/* 사진대지 제출 — 화면 서식
 *
 * 현장에서 장갑 낀 손으로 쓰는 도구라 터치 목표를 44px 아래로 내리지 않는다.
 * 색은 CTR 그린 하나만 쓰고 나머지는 무채색으로 둔다. 서류를 다루는 도구가
 * 알록달록하면 어디가 중요한지 안 보인다.
 */
:root{
  --green:#14532d; --green-2:#1f6f3f; --green-tint:#eaf3ee; --green-line:#c9e0d3;
  --ink:#111827; --ink-2:#374151; --mut:#6b7280; --mut-2:#9ca3af;
  --line:#e5e7eb; --bg:#f4f6f5; --card:#ffffff;
  --warn:#b45309; --warn-bg:#fef6e7; --warn-line:#f3ddb0;
  --danger:#b91c1c;
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --shadow-up:0 -2px 12px rgba(16,24,40,.07);
  --bar:66px;
}
*{box-sizing:border-box}
/* display 를 지정한 요소는 hidden 속성만으로 안 사라진다.
   화면엔 안 보이는데 터치만 가로채는 상태가 되므로 여기서 못을 박는다. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  color:var(--ink); background:var(--bg);
  padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom));
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
b{font-weight:700}

/* ── 아이콘 : 선 굵기 하나로 통일해 두면 무엇을 넣어도 한 벌로 보인다 */
.i{width:18px; height:18px; flex:none; fill:none; stroke:currentColor;
   stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.i.lg{width:26px; height:26px}

/* ── 버튼 */
button{
  font:inherit; font-weight:600; cursor:pointer; border-radius:var(--r-sm);
  border:1px solid transparent; min-height:46px; padding:0 15px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:background .12s, border-color .12s;
}
button.primary{background:var(--green); color:#fff}
button.primary:hover{background:#0f3f22}
button.ghost{background:var(--card); color:var(--ink-2); border-color:var(--line)}
button.ghost:hover{background:#fafbfa; border-color:#d6dbd8}
button.danger{color:var(--danger); border-color:#f0cfcf; background:var(--card)}
button.wide{width:100%; margin:12px 0}
button[disabled]{opacity:.4; pointer-events:none}
.iconBtn{
  min-height:38px; min-width:38px; padding:0; background:transparent;
  border:0; color:inherit; border-radius:9px;
}
.iconBtn.dim{color:var(--mut)}

/* ── 상단바 : 현장명을 항상 붙잡아 둔다.
   다른 현장에 사진을 올리는 사고가 가장 뼈아파서 스크롤해도 안 사라지게 고정한다. */
#topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:6px;
  padding:11px 14px; padding-top:calc(11px + env(safe-area-inset-top));
  background:var(--green); color:#fff;
}
#topbar .titles{flex:1; min-width:0}
#topTitle{font-weight:700; font-size:16.5px; letter-spacing:-.01em;
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#topbar .sub{font-size:12.5px; color:#bfe0cd; margin-top:1px;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── 상태 칩 */
.chip{
  display:inline-flex; align-items:center; gap:5px; border-radius:999px;
  padding:3px 10px; font-size:12px; font-weight:700; white-space:nowrap;
  background:var(--green-tint); color:var(--green); border:1px solid var(--green-line);
}
.chip.warn{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line)}
.chip.mut{background:#f3f4f6; color:var(--mut); border-color:var(--line)}

/* ── 알림 띠 */
.notice{
  display:flex; gap:9px; align-items:flex-start;
  background:var(--warn-bg); color:#7c5310; border-bottom:1px solid var(--warn-line);
  padding:10px 14px; font-size:12.5px; line-height:1.55;
}
.notice .i{margin-top:2px; stroke-width:2}

main{padding:14px}
.view{max-width:760px; margin:0 auto}
.sectionLabel{font-size:12px; font-weight:700; color:var(--mut);
              letter-spacing:.04em; margin:2px 4px 8px}

/* ── 카드 목록 */
.cards{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.cards li{background:var(--card); border:1px solid var(--line);
          border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.cards button.card{
  width:100%; text-align:left; background:transparent; border:0; padding:14px 15px;
  display:flex; align-items:center; gap:13px; min-height:70px; border-radius:0;
}
.cards button.card:hover{background:#fafbfa}
.card .lead{
  width:40px; height:40px; border-radius:11px; flex:none; display:flex;
  align-items:center; justify-content:center; background:var(--green-tint);
  color:var(--green);
}
.card .grow{flex:1; min-width:0}
/* span 을 그대로 두면 이름과 부제가 한 줄에 붙는다. 이 실수를 두 번 했다. */
.card .name,.card .meta{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card .name{font-weight:700; font-size:15.5px; letter-spacing:-.01em}
.card .meta{font-size:12.5px; color:var(--mut); margin-top:3px}
.card .go{color:var(--mut-2)}

/* ── 현장 정보 패널 */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
       box-shadow:var(--shadow); padding:6px 15px; margin-bottom:16px}
.panel .row{display:flex; align-items:center; gap:11px; padding:11px 0}
.panel .row + .row{border-top:1px solid #f1f3f2}
.panel .row .i{color:var(--mut-2)}
.panel .k{font-size:12.5px; color:var(--mut); width:42px; flex:none}
.panel .v{font-size:14.5px; font-weight:600; word-break:break-all; flex:1}
.panel .v.missing{color:var(--warn); font-weight:700; text-decoration:underline;
                  text-underline-offset:3px; cursor:pointer}

/* ── 현장 입력 : 여기서 적은 값이 갑지에 그대로 인쇄된다.
      그래서 '필수' 를 회색으로 묻어 두지 않고 눈에 걸리게 둔다. */
.panel.form{padding:14px 15px 4px}
.panel.form .field span i{color:var(--warn); font-weight:600}
/* 입력칸 + 곁버튼. 버튼이 칸보다 커 보이면 안 되므로 높이를 맞춘다 */
.withBtn{display:flex; gap:7px}
.withBtn input{flex:1; min-width:0}
.withBtn button{flex:none; min-height:46px; padding:0 14px; white-space:nowrap}

/* 도로명 ↔ 지번 바꿔 넣기. 링크처럼 보이되 실제로 버튼이라 키보드로도 잡힌다 */
.fieldNote{margin:6px 2px 0; font-size:12.5px; color:var(--mut); line-height:1.6}
.linkBtn{
  background:none; border:0; padding:0; font:inherit; font-weight:600;
  color:var(--green-2); text-decoration:underline; text-underline-offset:3px;
  min-height:0; border-radius:0; text-align:left;
}
.linkBtn:hover{background:none; color:var(--green)}

/* 주소 검색 창 — 우편번호 위젯이 iframe 이라 높이를 직접 준다 */
.addrBody{padding-bottom:10px}
.addrBox{height:56vh; min-height:320px; border:1px solid var(--line);
         border-radius:var(--r-sm); overflow:hidden; margin-bottom:10px; background:#fff}
.addrBox iframe{display:block; width:100%; height:100%; border:0}

.formLead{color:var(--mut); font-size:12.5px; line-height:1.7; margin:2px 4px 12px}
.formLead b{color:var(--ink); font-weight:600}
.formErr{
  display:flex; gap:7px; margin:0 0 4px; padding:10px 12px;
  background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:var(--r-sm);
  color:#7c5310; font-size:12.5px; line-height:1.6;
}

/* 알림 띠를 본문 안에서 쓸 때 — 화면 폭을 가로지르지 않고 카드처럼 앉는다 */
.notice.inline{
  border:1px solid var(--warn-line); border-radius:var(--r-sm);
  margin:0 0 10px; padding:11px 13px;
}

/* ── 빈 상태 : 처음 연 파트너에게는 이게 첫 화면이다 */
.empty{text-align:center; padding:34px 20px 10px; color:var(--mut)}
.empty .i.xl{width:38px; height:38px; color:var(--mut-2); stroke-width:1.7; margin-bottom:14px}
.empty h1{font-size:16.5px; font-weight:700; color:var(--ink); margin:0 0 9px}
.empty p{font-size:13.5px; line-height:1.75; margin:0}
.empty p b{color:var(--ink-2); font-weight:600}

/* ── 링크 관문 : 로그인 화면이 없으니 여기가 막다른 길이다.
      경고처럼 붉게 칠하지 않는다 — 파트너 잘못이 아니고, 할 일은 링크를 다시 받는 것뿐이다. */
.gate{text-align:center; padding:52px 22px 40px; max-width:440px}
.gate .i.xl{width:40px; height:40px; color:var(--warn); stroke-width:1.7; margin-bottom:16px}
.gate h1{font-size:18px; font-weight:700; margin:0 0 10px; line-height:1.45}
.gate>p{color:var(--mut); font-size:13.5px; line-height:1.75; margin:0}
.gate>p b{color:var(--ink); font-weight:600}
.gate .hint{margin:26px 0 0; padding-top:16px; border-top:1px solid var(--line)}

.hint{color:var(--mut); font-size:12.5px; margin:16px 4px; line-height:1.7}
.tip{color:var(--mut); font-size:12.5px; margin:0 2px 14px}
.dimText{color:var(--mut)}
.spacer{height:6px}

/* 관문 화면의 문의처. ★막다른 길에서 **누구에게 말하면 되는지**를 적는 자리다 —
   본문과 같은 크기로 흘려 두면 안내문에 묻혀서, 정작 필요한 사람이 못 찾는다. */
.gateContact{margin:18px auto 0; max-width:23em; padding:11px 14px; border:1px solid var(--line);
             border-radius:var(--r-sm); background:var(--card); color:var(--fg);
             font-size:13.5px; line-height:1.75}
/* 전화·메일은 눌러서 바로 걸린다. 손가락으로 누를 것이라 줄 간격을 넉넉히 둔다. */
.gateContact a{color:var(--green); font-weight:700; text-decoration:none;
               border-bottom:1px solid currentColor; padding-bottom:1px}

/* ── 진행률 */
.progress{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
          box-shadow:var(--shadow); padding:14px 16px; margin-bottom:12px}
.progress .txt{display:flex; justify-content:space-between; align-items:center; gap:10px}
.progress .n{font-size:15px; font-weight:700}
.progress .n em{font-style:normal; color:var(--green); font-size:19px}
.progress .bar{height:6px; background:#eef0ef; border-radius:999px; overflow:hidden; margin-top:11px}
.progress .bar i{display:block; height:100%; background:var(--green-2); border-radius:999px;
                 transition:width .25s ease}

/* ── 슬롯 목록 */
.slots{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.slots li{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
          box-shadow:var(--shadow); overflow:hidden}
.slots li.done{border-color:var(--green-line)}
.slotBtn{
  width:100%; background:transparent; border:0; border-radius:0; padding:10px;
  display:flex; gap:13px; align-items:center; text-align:left; min-height:82px;
}
.slotBtn:hover{background:#fafbfa}
.thumb{
  position:relative; width:100px; height:74px; border-radius:var(--r-sm); flex:none;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:#f7f8f8; border:1px solid var(--line); color:var(--mut-2);
}
.thumb.empty{border-style:dashed; background:#fbfcfb}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb .seq{
  position:absolute; left:5px; top:5px; min-width:20px; height:20px; padding:0 5px;
  border-radius:6px; background:rgba(17,24,39,.72); color:#fff;
  font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.thumb.empty .seq{background:#e8eae9; color:var(--mut)}
.slotBody{flex:1; min-width:0}
.slotName{display:block; font-weight:700; font-size:15px; letter-spacing:-.01em;
          line-height:1.35; color:var(--ink)}
.slotMeta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px;
          font-size:12px; color:var(--mut)}
.slotMeta .chip{padding:2px 8px; font-size:11.5px}
.slotMemo{display:block; margin-top:4px; font-size:12px; color:var(--mut);
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── 하단 고정 바 */
#bottomBar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); box-shadow:var(--shadow-up);
  padding-bottom:env(safe-area-inset-bottom);
}
.barInner{display:flex; gap:8px; padding:10px 14px; max-width:760px; margin:0 auto}
/* 좁은 폭에서 글자가 두 줄로 접히면 버튼이 아니라 사고처럼 보인다 */
.barInner button{flex:1; white-space:nowrap; font-size:14px; padding:0 8px; gap:6px}
.barInner .primary{flex:1.3}
.barInner .i{width:17px; height:17px}
@media (max-width:359px){ .barInner .i{display:none} }

/* ── 시트 */
.sheet{position:fixed; inset:0; z-index:40; background:rgba(17,24,39,.45);
       display:flex; align-items:flex-end}
.sheetBody{
  width:100%; max-width:760px; margin:0 auto; background:var(--card);
  border-radius:18px 18px 0 0; padding:8px 16px 16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
  max-height:90vh; overflow:auto;
}
.sheetBody::before{content:""; display:block; width:38px; height:4px; border-radius:999px;
                   background:#e2e5e3; margin:6px auto 10px}
.sheetHead{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.sheetTitle{font-weight:700; font-size:17px; flex:1; letter-spacing:-.01em}
.sheetPreview{border-radius:var(--r-sm); overflow:hidden; margin-bottom:12px;
              border:1px solid var(--line); background:#f7f8f8}
.sheetPreview img{width:100%; display:block; max-height:38vh; object-fit:contain}
.field{display:block; margin-bottom:11px}
.field span{display:block; font-size:12.5px; color:var(--mut); margin-bottom:5px; font-weight:600}
.field span i{font-style:normal; font-weight:400; color:var(--mut-2)}
.field input{
  width:100%; min-height:46px; padding:0 13px; font:inherit;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); color:var(--ink);
}
.field input:focus{outline:2px solid var(--green-line); outline-offset:-1px; border-color:var(--green-2)}
.row2{display:flex; gap:8px; margin-bottom:10px}
.row2 button{flex:1}
.row2.siteActs{margin:0 0 16px}

/* 끌어다 놓기·붙여넣기 안내는 PC 에서만 뜻이 있다 */
.pcOnly{display:none}
@media (min-width:760px){ .pcOnly{display:block} }

/* ── 설치 안내 */
.installHint{
  position:fixed; left:12px; right:12px; bottom:calc(var(--bar) + 12px); z-index:50;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:15px;
  box-shadow:0 10px 34px rgba(16,24,40,.16); font-size:13px; line-height:1.6;
  max-width:520px; margin:0 auto;
}
.ihBody{display:flex; gap:11px; align-items:flex-start}
.ihBody .i{color:var(--green); margin-top:1px}
.installHint .row2{margin-top:12px; margin-bottom:0}

.updateBar{
  position:sticky; top:0; z-index:19; display:flex; gap:8px; align-items:center;
  justify-content:space-between; background:var(--green-tint); color:var(--green);
  border-bottom:1px solid var(--green-line); padding:8px 14px; font-size:12.5px; font-weight:600;
}
.updateBar button{min-height:34px; padding:0 12px; font-size:12.5px}

/* ── 알림 */
.toast{
  position:fixed; left:50%; bottom:calc(var(--bar) + 18px); transform:translateX(-50%);
  background:#111827; color:#fff; padding:12px 17px; border-radius:11px; font-size:13.5px;
  z-index:60; max-width:92vw; text-align:center; box-shadow:0 8px 26px rgba(0,0,0,.24);
}
.toast.bad{background:#7f1d1d}
/* ★시트가 열려 있으면 토스트를 위로 옮긴다.
   화면 아래쪽은 이미 붐빈다 — 하단바·갱신 배너·지면 넘김 단추가 다 거기 있고,
   시트가 열리면 그 자리가 통째로 **입력칸**이 된다(내용·memo). 토스트가 z-index 로
   그 위에 얹히면 방금 연 칸을 가려서, 사용자는 손가락을 어디에 둘지 모른 채 사라지기를
   기다리게 된다. 시트가 떠 있는 동안은 뒤가 어두워지므로 위쪽이 비어 있다. */
#sheet:not([hidden]) ~ .toast{bottom:auto; top:14px}
.busy{position:fixed; inset:0; z-index:70; background:rgba(244,246,245,.9);
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px}
.spin{width:36px; height:36px; border:3px solid #dfe3e1; border-top-color:var(--green-2);
      border-radius:50%; animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
#busyMsg{color:var(--mut); font-size:13.5px}

/* ── 넓은 화면 : PC 로 작성하는 경우가 절반이라 빈 여백만 늘리지 않는다 */
@media (min-width:900px){
  .view{max-width:1000px}
  .barInner{max-width:1000px}
  .sheetBody{max-width:560px; border-radius:18px; margin-bottom:6vh}
  .sheet{align-items:center}
  .slots{grid-template-columns:1fr 1fr; gap:10px}
  .cards{grid-template-columns:1fr 1fr}
  #viewSite .cards{grid-template-columns:1fr 1fr}
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#e5e7eb; --ink-2:#d1d5db; --mut:#9ca3af; --mut-2:#6b7280;
    --line:#282d31; --bg:#0f1214; --card:#181c1f;
    --green-tint:#14261c; --green-line:#2a4a37; --green:#2f7d52; --green-2:#3d9464;
    --warn-bg:#2a2113; --warn-line:#4a3a1c; --warn:#d9a441;
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
  button.ghost:hover{background:#1e2327; border-color:#333a3f}
  .cards button.card:hover,.slotBtn:hover{background:#1c2124}
  .thumb{background:#14181a} .thumb.empty{background:#151a1c}
  .thumb.empty .seq{background:#2a3034; color:var(--mut)}
  .progress .bar{background:#242a2e}
  .panel .row + .row{border-top-color:#232829}
  #bottomBar{background:rgba(24,28,31,.94)}
  .sheetBody::before{background:#2c3236}
  .busy{background:rgba(15,18,20,.92)}
  .toast{background:#e5e7eb; color:#111827}
  .toast.bad{background:#7f1d1d; color:#fff}
}
/* ══════════════════════════════════════════════════════════════════════
   CTR Energy · Clear Day(모바일) + Document Studio(PC)

   색·자형은 「2026 CTR에너지 회사소개서 V2」에서 실측해 옮겼다.
     그린 #007A4C  — 표제·아이콘·강조. 소개서 전반의 주조색이다
     레드 #E1251B  — CTR 워드마크에만. 소개서에서도 로고 말고는 안 쓴다
     먹   #262626 / 본문 #595959·#7F7F7F / 괘선 #D9D9D9 / 면 #F2F2F2
     맑은 고딕

   소개서는 흰 지면에 얇은 괘선과 평평한 회색 면으로 짜여 있다. 그래서 여기서도
   둥근 카드·알약·그림자를 겹겹이 쌓지 않는다. 서류를 다루는 화면이라 그 편이 맞다.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --green:#007A4C; --green-2:#00613C; --green-3:#00946E;
  --green-tint:#EAF4EF; --green-line:#B5D8C6;
  --ctr-red:#E1251B; --logo-gray:#767778;
  --ink:#262626; --ink-2:#404040; --mut:#595959; --mut-2:#7F7F7F;
  --line:#D9D9D9; --line-2:#ECEEED;
  --bg:#F7F8F7; --panel:#F2F2F2; --card:#fff;
  --warn:#9A5A00; --warn-bg:#FDF6EA; --warn-line:#E8D5AC;
  --danger:#C0201A;
  --r:6px; --r-sm:4px;
  --shadow:0 1px 2px rgba(38,38,38,.05);
  --shadow-up:0 -1px 3px rgba(38,38,38,.06);
  /* 하단 고정바 실측 높이(버튼 48 + 위아래 9 + 괘선 1)보다 넉넉히.
     모자라면 목록 맨 끝 버튼이 바에 깔려 끝까지 스크롤해도 안 눌린다. */
  --bar:70px;
}
body{
  /* 소개서가 전부 맑은 고딕이다. 한국 기업 문서의 인상이 자형에서 절반은 온다. */
  font-family:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",-apple-system,
              BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--bg); letter-spacing:-.01em;
}

/* ── 버튼 : 초록은 '지금 할 일' 하나에만 쓴다 */
button{border-radius:var(--r-sm); font-weight:700}
button.primary{background:var(--green); color:#fff}
button.primary:hover{background:var(--green-2)}
button.ghost{background:var(--card); color:var(--ink-2); border-color:var(--line)}
button.ghost:hover{background:#F4F7F5; border-color:#C3CBC7}
button.ghost:disabled{opacity:.35}
.iconBtn{min-height:44px; min-width:44px; border-radius:var(--r-sm)}

/* ── 상단바 : 소개서 각 장의 머리와 같은 짜임 —
      왼쪽에 작은 워드마크, 얇은 괘선 하나, 그 아래가 본문.
      큰 초록 띠를 두르지 않는다. 그러면 브랜드가 아니라 배경만 커진다. */
#topbar{
  background:var(--card); color:var(--ink); border-bottom:1px solid var(--line);
  padding:7px 14px; padding-top:calc(7px + env(safe-area-inset-top));
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 8px;
}
.brandLine{
  grid-column:1/-1; display:flex; align-items:center; min-width:0; gap:8px;
  white-space:nowrap; padding-bottom:5px; border-bottom:1px solid var(--line-2);
}
/* 실제 워드마크(index.html 의 #i-ctr). viewBox 비율대로 폭을 잡아 눌리지 않게 한다. */
.ctrLogo{
  display:block; flex:none; height:13px; width:calc(13px * 109.85 / 14.82);
  color:var(--logo-gray);
}
.brandBusiness{font-size:11px; color:var(--mut-2); padding-left:8px; border-left:1px solid var(--line)}
.brandProduct{
  font-size:11.5px; font-weight:700; color:var(--green);
  min-width:0; overflow:hidden; text-overflow:ellipsis;
}
#topbar .titles{align-self:center; grid-column:2}
#topbar>.iconBtn{grid-column:1; margin-left:-8px}
#topTitle{font-size:16px; font-weight:700; color:var(--ink)}
#topbar .sub{font-size:12px; color:var(--green); font-weight:700; margin-top:0}
#netBadge{grid-column:3; align-self:center}

.notice{background:var(--warn-bg); color:#7A4A08; border-color:var(--warn-line)}
main{padding:14px 14px 18px}
.view{max-width:760px}

/* 소개서의 ▸ 표식. 자주 쓰면 장식이 되므로 구역 제목에만 남긴다. */
.sectionLabel{
  color:var(--green); font-size:12px; font-weight:700; letter-spacing:.02em;
  display:flex; align-items:center; gap:5px; margin:4px 2px 8px;
}
.sectionLabel::before{content:"▸"; font-size:10px}

/* ── 상태 표시 : 알약 대신 각진 작은 표. 소개서의 항목 상자와 결이 같다 */
.chip,.tag{
  display:inline-flex; align-items:center; border-radius:3px; padding:2px 7px;
  font-size:11.5px; font-weight:700; white-space:nowrap; line-height:1.6;
  background:var(--green-tint); color:var(--green); border:1px solid var(--green-line);
}
.chip.warn,.tag.warn{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line)}
.chip.mut,.tag.mut{background:#F2F2F2; color:var(--mut); border-color:var(--line)}

/* ── 현장 목록 : 현장에서 제일 먼저 찾는 것은 '어디까지 했나' 다 */
.cards{gap:8px}
.cards li{border-color:var(--line); border-radius:var(--r); box-shadow:none}
.cards li:hover{border-color:#BFC8C3}
.cards button.card{padding:13px 14px; min-height:72px; gap:12px; align-items:flex-start}
.card .lead{
  width:40px; height:40px; border-radius:var(--r-sm); color:var(--green);
  background:var(--green-tint); border:1px solid var(--green-line); margin-top:1px;
}
.card .name{font-size:15.5px; font-weight:700; color:var(--ink)}
/* 주소는 길다. 한 줄로 자르면 시·군까지만 남아 현장이 구분되지 않으므로 두 줄까지 준다. */
.card .meta{
  font-size:12.5px; color:var(--mut); margin-top:2px; white-space:normal;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
}
/* 진행 상태는 말줄임에 걸리면 안 되므로 이름·주소 줄에서 떼어 낸다 */
.card .tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:7px}
.card .go{color:#9AA39F; align-self:center}
#docList .card{align-items:center}
#docList .chip{align-self:center}

.empty{padding-top:40px}
.empty .i.xl{color:var(--green); opacity:.55}
.empty h1{font-size:17px}
.hint{color:var(--mut); max-width:620px; font-size:12.5px}

/* ── 패널·입력 */
.panel,.progress{border-color:var(--line); border-radius:var(--r); box-shadow:none}
.panel.form{padding:15px 15px 5px}
.panel .k{color:var(--mut-2)}
.field input{border-color:#C9D0CC; border-radius:var(--r-sm); background:var(--card)}
.field input:focus{outline:2px solid var(--green); outline-offset:-2px; border-color:var(--green)}
.linkBtn{color:var(--green); min-height:0}
.linkBtn:hover{color:var(--green-2)}
.formLead b{color:var(--ink)}

/* ── 진행률 : 남은 일을 먼저 읽히게 */
.progress{padding:13px 15px; margin-bottom:11px; background:var(--card)}
.progress .n{font-size:14.5px; color:var(--mut)}
.progress .n em{color:var(--green); font-size:21px; font-weight:700}
.progress .bar{height:4px; border-radius:2px; background:#E4E8E6; margin-top:10px}
.progress .bar i{background:var(--green); border-radius:2px}

/* ══ Clear Day — 모바일은 사진이 주인공인 2열 갤러리 ══
   야외에서 장갑 낀 손으로 쓴다. 썸네일 자체가 터치 목표라 크게 두고,
   칸 비율은 실제 양식의 사진칸(108 x 82.8mm)과 같게 맞춘다 —
   화면에서 꽉 차 보이면 지면에서도 꽉 찬다. */
.slots{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.slots li{border-color:var(--line); border-radius:var(--r); box-shadow:none; min-width:0}
.slots li.done{border-color:var(--green-line)}
.slots li.sel{border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green)}
.slotBtn{display:block; width:100%; padding:0; min-height:0; text-align:left; border-radius:0}
.thumb{
  width:100%; height:auto; aspect-ratio:108/82.8; border:0;
  border-bottom:1px solid var(--line); border-radius:0; background:#F4F6F5;
}
.slots li.done .thumb{border-bottom-color:var(--green-line)}
.thumb.empty{background:repeating-linear-gradient(45deg,#F7F8F7 0 6px,#F2F4F3 6px 12px)}
.thumb.empty .i{width:26px; height:26px; color:#9AA39F}
/* 번호표는 채워졌는지를 색 하나로 말한다 — 초록이면 들어간 것 */
.thumb .seq{
  left:6px; top:6px; min-width:22px; height:22px; border-radius:3px;
  background:var(--green); color:#fff; font-size:11.5px;
}
.thumb.empty .seq{background:#fff; color:var(--mut); border:1px solid var(--line)}
.slotBody{padding:9px 10px 10px}
.slotName{font-size:13.5px; font-weight:700; line-height:1.4; white-space:normal}
.slotMeta{gap:4px; margin-top:6px}
.slotMeta .chip{font-size:10.5px; padding:1px 6px}
.slotMemo{font-size:11.5px; margin-top:5px}

/* PC 전용. 모바일에서는 촬영·선택에만 집중한다. */
.studioAside{display:none}

/* ── 하단 고정 바 : 유리 효과 없이 흰 면과 괘선 하나로 */
#bottomBar{background:var(--card); border-top:1px solid var(--line);
           box-shadow:var(--shadow-up); -webkit-backdrop-filter:none; backdrop-filter:none}
.barInner{padding:9px 14px; gap:7px}
.barInner button{min-height:48px; font-size:14px}
.barInner .primary{flex:1.3}

/* ── 시트 */
.sheet{background:rgba(38,38,38,.45)}
.sheetBody{border-radius:10px 10px 0 0}
.sheetTitle{font-size:16.5px}
.sheetPreview{border-radius:var(--r-sm)}
.sheetHead .iconBtn{min-height:44px; min-width:44px}
.toast{background:#262626; border-radius:var(--r-sm)}
.updateBar{background:var(--green-tint); color:var(--green-2); border-bottom-color:var(--green-line)}
.spin{border-top-color:var(--green)}

@media (max-width:359px){
  .slots{grid-template-columns:1fr}
  .brandBusiness{display:none}
}
@media (min-width:600px) and (max-width:899px){
  .slots{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ══════════════════════════════════════════════════════════════════════
   Document Studio (PC) — 체크리스트와 실제 지면을 나란히 두고 검수한다.

   모바일 화면을 넓히기만 하면 PC 에서 할 수 있는 일이 없다. 사무실에서 하는 일은
   '넣기' 가 아니라 '맞는지 보기' 라서, 왼쪽은 15항목 체크리스트, 오른쪽은
   **실제로 나갈 지면**을 둔다. 지면 좌표는 app.js 가 layout.json 에서 읽는다.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  #topbar{
    grid-template-columns:auto auto minmax(0,1fr) auto; column-gap:12px;
    padding:8px 22px; align-items:center;
  }
  .brandLine{grid-column:1; border-bottom:0; padding-bottom:0; padding-right:14px;
             border-right:1px solid var(--line)}
  .brandBusiness{display:inline}
  #topbar>.iconBtn{grid-column:2; margin-left:0}
  #topbar .titles{grid-column:3}
  #topTitle{font-size:15px}
  #netBadge{grid-column:4}

  main{padding:16px 22px 26px}
  .view{max-width:1240px}
  .cards{grid-template-columns:1fr 1fr}

  #viewDoc{
    display:grid; grid-template-columns:minmax(400px,1fr) 430px;
    /* ★마지막 행이 1fr 이어야 한다. 아니면 4개 행에 걸친 aside 의 높이가 행마다
       나눠 붙어서, 칸이 3개뿐인 입고 문서에서 진행률과 목록 사이가 벌어진다. */
    grid-template-rows:auto auto auto 1fr; align-items:start; column-gap:20px;
  }
  #docProgress{grid-column:1; grid-row:1}
  #slotList{grid-column:1; grid-row:2; grid-template-columns:1fr; gap:6px}
  #addSlotBtn{grid-column:1; grid-row:3; margin:8px 0 0}
  #viewDoc>.hint{grid-column:1; grid-row:4; margin:10px 2px 0}
  #viewDoc>.spacer{display:none}

  /* 체크리스트 한 줄 = 썸네일 + 이름 + 상태. 세로로 훑으며 빈 칸을 찾는 화면이다. */
  .slots li{border-radius:var(--r-sm)}
  .slotBtn{display:flex; align-items:center; gap:12px; min-height:72px; padding:8px 12px 8px 8px}
  .thumb{width:92px; height:70px; aspect-ratio:auto; flex:none;
         border:1px solid var(--line); border-radius:3px}
  .slots li.done .thumb{border-color:var(--green-line)}
  .slotBody{padding:0; flex:1; min-width:0}
  .slotName{font-size:14px}
  .slotMeta{margin-top:5px}

  .studioAside{
    display:block; grid-column:2; grid-row:1/span 4; position:sticky; top:88px;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px;
  }
  .studioToolbar{display:flex; align-items:center; justify-content:space-between;
                 gap:12px; margin-bottom:12px}
  .studioLabel{min-width:0}
  .studioLabel span{display:block; font-size:9.5px; letter-spacing:.06em;
                    color:var(--mut-2); font-weight:700}
  .studioLabel strong{display:block; font-size:15px; margin-top:2px; color:var(--ink)}
  .studioToolbar button{min-height:44px; padding:0 13px; font-size:12.5px}

  /* 지면 — A4 비율 그대로. 안의 요소는 app.js 가 mm 좌표를 백분율로 앉힌다. */
  /* ★폭을 꽉 채우면 A4 비율상 세로가 화면을 넘어서, 쪽 이동 버튼과 안내가 하단
     고정바 밑으로 내려간다 — 검수 화면인데 정작 아랫단을 못 본다.
     그래서 **높이를 기준으로** 잡고 폭은 aspect-ratio 가 따라오게 한다.
     빼는 380px = 상단바·알림띠·도구줄·쪽이동·안내·하단바·여백의 실측 합.
     (flex 로 남는 높이를 받게 해 봤더니, 부모 높이가 불확정이라 지면이 2px 로
      접혔다 — 안쪽이 전부 absolute 라 콘텐츠 높이가 0 이기 때문이다.) */
  .studioPage{
    position:relative; height:min(calc(100vh - 380px), 720px); width:auto; max-width:100%;
    aspect-ratio:210/296.9; margin:0 auto; background:#fff;
    border:1px solid #C6CBC8; box-shadow:0 2px 10px rgba(38,38,38,.10); overflow:hidden;
    color:#1F1F1F;
  }
  .studioPage>*{position:absolute; box-sizing:border-box}
  .spRect{border:1px solid #4A4A4A}
  .spTitleBox{display:flex; align-items:center; justify-content:center; overflow:hidden}
  .spTitleBox span{font-weight:700; white-space:nowrap; letter-spacing:.02em}
  .spCoverRow{display:block}
  .spCoverRow b,.spCoverRow span{position:absolute; top:50%; transform:translateY(-50%);
                                 white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .spCoverRow b{transform:translate(-50%,-50%); font-weight:700}
  .spBodyTitle{
    left:0; right:0; text-align:center; font-weight:700; letter-spacing:.02em;
    text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:from-font;
  }
  /* 사진칸을 누르면 그 칸이 열린다 — 지면에서 이상한 사진을 봤을 때 목록에서
     몇 번인지 다시 세지 않아도 되게. */
  .spPhoto{
    padding:0; margin:0; min-height:0; border:1px solid #4A4A4A; border-radius:0;
    background:#fff; overflow:hidden; display:block; cursor:pointer;
  }
  .spPhoto img{width:100%; height:100%; object-fit:cover; display:block}
  .spPhoto:hover{border-color:var(--green)}
  .spPhoto.sel{outline:2px solid var(--green); outline-offset:-2px; border-color:var(--green)}
  .spRow{display:flex; align-items:stretch; border:1px solid #4A4A4A; border-top-width:0}
  .spRow.first{border-top-width:1px}
  .spRow b{
    flex:none; display:flex; align-items:center; justify-content:center;
    border-right:1px solid #4A4A4A; font-weight:400; text-align:center; line-height:1.25;
  }
  .spRow span{
    flex:1; min-width:0; display:flex; align-items:center; justify-content:center;
    padding:0 2%; text-align:center; line-height:1.3; overflow:hidden; word-break:break-all;
  }

  .studioNav{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px}
  .studioNav button{min-height:44px; min-width:44px; padding:0}
  .studioPageNo{font-size:12px; font-weight:700; color:var(--mut);
                min-width:120px; text-align:center}
  .studioGuide{font-size:11.5px; color:var(--mut); line-height:1.65; margin:10px 2px 0}
  .studioGuide b{color:var(--green)}

  .barInner{max-width:1240px}
  .sheetBody{max-width:560px; border-radius:10px}

  /* ★스튜디오에서도 토스트를 위로 올린다.
     이 폭에서는 하단바 바로 위가 **지면 넘김(`‹ 2 / 3 쪽 ›`)** 자리다. 사진을 여러 장
     넣으면 "n장 등록했습니다" 가 정확히 그 단추들을 덮어서, 방금 넣은 사진이 어느 쪽에
     들어갔는지 확인하러 가는 길을 막는다. 위쪽은 지면 여백이라 가릴 것이 없다. */
  .toast{bottom:auto; top:14px}
}

@media (min-width:1200px){
  #viewDoc{grid-template-columns:minmax(500px,1fr) 480px}
  .studioAside{padding:16px}
}

/* ══════════════════════════════════════════════════════════════════════
   C + D 최종 보정 — 색 토큰
   ★이 :root 는 아래 다크 블록보다 **위**에 있어야 한다. 한 번 아래에 두었다가
     다크의 초록·그림자가 통째로 라이트값으로 되돌아갔다(--green-tint 가 밝은
     민트라 현장 카드의 아이콘 타일만 흰 덩어리로 떴다). @media 는 특정도를
     올리지 않으니, 색 토큰은 전부 다크 블록 앞에서 끝내야 한다.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --green:#00884A; --green-2:#006C3B; --green-3:#00A06D;
  --green-tint:#E8F5EE; --green-line:#B8DCC8;
  --bg:#F3F7F5; --panel:#EDF2EF; --line:#DCE5E0; --line-2:#EDF1EF;
  --r:10px; --r-sm:8px;
  --shadow:0 1px 2px rgba(24,52,38,.035),0 8px 24px rgba(24,52,38,.045);
}

/* ── 다크 모드
   ★이 블록은 반드시 새 :root 뒤에 와야 한다. @media 는 특정도를 올리지 않아서,
     앞쪽 다크 블록만 두면 아래 :root 가 그대로 덮어써 다크가 통째로 죽는다. */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#E7EAE8; --ink-2:#D2D7D4; --mut:#A3ABA7; --mut-2:#8B938F;
    --line:#2C3331; --line-2:#232927;
    --bg:#101413; --panel:#171C1B; --card:#181D1C;
    --green:#3E9E70; --green-2:#4FB081; --green-3:#5CBF8E;
    --green-tint:#14261E; --green-line:#2C4A3B;
    --logo-gray:#9AA39E;
    --warn:#D9A441; --warn-bg:#2A2113; --warn-line:#4A3A1C;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-up:0 -1px 3px rgba(0,0,0,.4);
  }
  #topbar,#bottomBar{background:var(--card)}
  button.ghost:hover{background:#1F2523; border-color:#39413E}
  .cards li:hover{border-color:#3A423F}
  .chip.mut,.tag.mut{background:#202624; border-color:var(--line)}
  .thumb{background:#161B1A}
  .thumb.empty{background:repeating-linear-gradient(45deg,#161B1A 0 6px,#1B211F 6px 12px)}
  .thumb.empty .seq{background:#202624; border-color:var(--line)}
  .progress .bar{background:#242A28}
  .notice{color:#E0C48B}
  .toast{background:#E7EAE8; color:#101413}
  /* 지면은 실제 종이라 다크에서도 흰색을 유지한다 — 여기서 색을 뒤집으면
     '실제로 이렇게 나간다' 는 말이 거짓이 된다. */
  .studioPage{background:#fff; color:#1F1F1F; border-color:#3A423F}
}

/* ══════════════════════════════════════════════════════════════════════
   C + D 최종 보정
   모바일은 사진 갤러리의 리듬을, PC 는 체크리스트·A4 지면·선택 정보의
   세 영역을 분명히 나눈다. 브랜드 초록은 행동과 완료 상태에 집중한다.
   (색 토큰 :root 는 위 다크 블록 앞으로 옮겨 두었다 — 이유는 그쪽 주석에)
   ══════════════════════════════════════════════════════════════════════ */
button{border-radius:8px}
button.primary{box-shadow:0 5px 14px rgba(0,136,74,.16)}
.chip,.tag{border-radius:6px}
.cards li{border-radius:10px; box-shadow:var(--shadow)}
.panel,.progress{border-radius:10px; box-shadow:var(--shadow)}
.progress{padding:14px 16px}
.progress .bar{height:5px}

/* 모바일 사진칸: 사선 패턴을 버리고 실제 사진이 들어갈 조용한 프레임을 만든다. */
.slots{gap:10px}
.slots li{
  border-radius:10px; background:#fff; overflow:hidden;
  box-shadow:0 1px 2px rgba(24,52,38,.035);
}
.slots li.done{border-color:#8FC8A9}
.slotBtn{padding:8px 8px 10px}
.thumb{
  width:100%; height:auto; aspect-ratio:3/2; margin:0 0 9px;
  border:1px solid var(--line); border-radius:8px; background:#F7FAF8;
}
.thumb.empty{
  background:#FBFDFC; border:1px dashed #C8D7CF;
}
.thumb.empty .i{width:28px; height:28px; color:var(--green); opacity:.78}
.thumb .seq{left:7px; top:7px; border-radius:6px}
.thumb.empty .seq{background:#EEF3F0; border:0; color:#6F7C75}
.slotBody{padding:0 2px}
.slotName{font-size:14px; min-height:39px; line-height:1.42}
.slotMeta{min-height:24px; margin-top:4px}
.slotMeta .chip{padding:2px 7px}

/* ★3영역(체크리스트·지면·선택 정보)은 스튜디오가 켜지는 900px 부터 **같이** 켠다.
   한 번 인스펙터만 1180px 부터 띄웠다가, 900~1179px 에서 사진을 넣을 방법이
   통째로 사라졌다 — 목록도 지면도 '고르기' 만 하고 [사진 등록] 버튼은 인스펙터
   안에 있어서 display:none 에 같이 숨었다. 오류도 안 났다.
   1920 모니터에서 창을 좌우로 붙이면 정확히 960px 이라 흔한 폭이다.
   그래서 좁은 폭에서는 세 영역을 줄여서라도 다 넣는다. */
@media (min-width:900px){
  #viewDoc{grid-template-columns:minmax(260px,320px) minmax(0,1fr); column-gap:16px}
  #slotList{gap:7px}
  .slots li{border-radius:8px}
  .slotBtn{min-height:62px; padding:7px 9px; gap:10px}
  .thumb{width:66px; height:48px; margin:0; border-radius:6px}
  .slotName{min-height:0; font-size:13px}
  .slotMeta{min-height:0; margin-top:3px}

  .studioAside{
    top:78px; padding:14px; border-radius:12px; background:var(--panel);
    box-shadow:0 10px 30px rgba(24,52,38,.055);
  }
  .studioWorkspace{
    display:grid; grid-template-columns:minmax(0,1fr) 176px; align-items:start; gap:12px;
  }
  .studioPaperPane{min-width:0}
  /* ★지면 폭은 지면이 스스로 정하게 둔다.
     height 고정 + max-width:100% 를 같이 걸면, 칸이 좁을 때 폭만 잘리고 높이는
     그대로 남아 A4 비율이 깨진다(안쪽이 전부 백분율 배치라 도면이 통째로 어긋난다).
     좁은 폭에서는 칸 폭이, 넓은 폭에서는 화면 높이가 한계가 되도록 min() 으로 묶는다.
     .7073 = 210/296.9 (A4 세로 기준 가로 비율), 438px = 옛 상한 620px 을 폭으로 환산. */
  .studioPage{width:min(100%, calc((100vh - 340px) * .7073), 438px); height:auto}
  .spPhoto{background:#FAFCFB; border-color:#5E6863}
  .spPhotoPlaceholder{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:7px; color:#829089; font-size:10em; font-weight:700;
    background:#F7FAF8;
  }
  .spPhotoPlaceholder .i{width:24em; height:24em; color:var(--green); opacity:.48}

  .studioInspector{
    display:block; background:#fff; border:1px solid var(--line); border-radius:10px;
    padding:10px; min-width:0; box-shadow:0 1px 2px rgba(24,52,38,.035);
  }
  .inspectorHead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px}
  .inspectorHead strong{font-size:12px}
  .inspectorHead span{
    width:23px; height:23px; flex:none; display:flex; align-items:center; justify-content:center;
    border-radius:7px; background:var(--green); color:#fff; font-size:11.5px; font-weight:800;
  }
  .inspectorThumb{
    width:100%; aspect-ratio:4/3; border:1px dashed #C8D7CF; border-radius:8px;
    background:#F7FAF8; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:6px; color:var(--mut-2); font-size:11px; text-align:center;
    padding:0 6px; overflow:hidden;
  }
  .inspectorThumb .i{color:var(--green); opacity:.65}
  .inspectorThumb img{width:100%; height:100%; object-fit:cover; display:block}
  .inspectorFacts{margin:10px 0 0}
  .inspectorFacts div{padding:6px 0; border-top:1px solid var(--line-2)}
  .inspectorFacts dt{font-size:10.5px; color:var(--mut-2); margin-bottom:3px}
  .inspectorFacts dd{margin:0; font-size:12px; color:var(--ink); line-height:1.45; word-break:break-word}
  .studioInspector .wide{margin:10px 0 0; min-height:44px; padding:0 8px; font-size:13px}
  .studioNav{margin-top:9px}
  .studioGuide{margin-top:9px}
}

/* 1180px 부터는 줄여 둔 세 영역을 제 크기로 편다. */
@media (min-width:1180px){
  .view{max-width:1380px}
  #viewDoc{grid-template-columns:350px minmax(0,1fr); column-gap:18px}
  .slotBtn{min-height:66px; padding:7px 10px; gap:11px}
  .thumb{width:78px; height:54px}
  .slotName{font-size:13.5px}
  .studioAside{padding:14px 14px 12px}
  .studioWorkspace{grid-template-columns:minmax(0,1fr) 238px; gap:14px}
  .studioPage{width:min(100%, calc((100vh - 300px) * .7073), 481px)}

  .studioInspector{padding:12px}
  .inspectorHead{gap:10px; margin-bottom:10px}
  .inspectorHead strong{font-size:13px}
  .inspectorHead span{width:25px; height:25px; font-size:12px}
  .inspectorThumb{aspect-ratio:16/9; gap:8px; font-size:11.5px}
  .inspectorFacts{margin:12px 0 0}
  .inspectorFacts div{padding:7px 0}
  .inspectorFacts dd{font-size:12.5px; line-height:1.5}
  .studioInspector .wide{margin:11px 0 0}
}

@media (min-width:1420px){
  #viewDoc{grid-template-columns:380px minmax(0,1fr)}
  .studioWorkspace{grid-template-columns:minmax(0,1fr) 260px}
}

@media (prefers-color-scheme: dark){
  :root{--bg:#101513; --panel:#171D1A; --line:#2D3832; --line-2:#222A26}
  .slots li,.studioInspector{background:var(--card)}
  .thumb.empty,.inspectorThumb{background:#151C18; border-color:#34463C}
  .spPhoto,.spPhotoPlaceholder{background:#F7FAF8; color:#66736C}
}