/* MagamWorks 공용 디자인 토큰 + 상세정보 모달 컴포넌트
   admin(/admin)과 center(/center)가 함께 불러 쓴다. 색상 값은 admin/index.html에 이미 쓰이던
   실제 팔레트(#2f5fda 계열 accent, 상태 배지 색상 등)를 그대로 토큰화한 것 — 새 색을 들여온 게 아니라
   기존 화면과 시각적으로 이어지도록 기존 값을 재사용한다. 이 파일은 신규 상세정보 모달/패널에만
   쓰는 mw- 접두사 클래스만 담고, 기존 .btn/.status-badge 등 앱별 클래스는 건드리지 않는다. */

/* ── 색 토큰 ──────────────────────────────────────────────────────────────
   화면마다 색을 직접 박지 않고 여기서 이름으로 정한다. 어두운 화면은 아래 [data-theme="dark"]
   블록에서 같은 이름에 다른 값만 주면 되므로, 화면 코드는 한 벌만 유지된다.

   채움색과 글자색을 따로 둔 이유: 파란 버튼처럼 "색 위에 흰 글자"를 얹는 자리(--mw-accent)와
   "흰 바탕에 색 글자"를 쓰는 자리(--mw-accent-ink)는 필요한 밝기가 정반대다. 한 값으로 두면
   어두운 화면에서 둘 중 하나는 반드시 읽기 어려워진다. good/warn/bad/danger도 같은 이유로 쌍이다. */
:root {
  --mw-ink: #1f2430;
  --mw-ink-soft: #565f73;
  --mw-paper: #f4f5f7;
  --mw-surface: #ffffff;
  --mw-surface-sunken: #f7f8fb;
  --mw-line: #e4e6ee;
  /* 입력칸·표의 테두리. 카드 대비 1.57 이라 칸이 어디서 시작하고 끝나는지 짐작해야 했다.
     1.88 로 올려 센터 화면(1.90)과 같은 세기로 맞춘다. 푸른 결은 그대로 둔다.
     --mw-line 은 그보다 옅은 칸(표 줄 나눔 등)이라 손대지 않는다 — 두 단이 갈려야 뜻이 산다. */
  --mw-line-strong: #b8bdcd;
  --mw-accent: #2f5fda;
  --mw-accent-ink: #1d3faa;
  --mw-accent-soft: #eef1fa;
  --mw-good: #1e824c;
  --mw-good-ink: #1a7346;
  --mw-good-soft: #e6f6ea;
  --mw-warn: #a67c00;
  --mw-warn-ink: #8a6100;
  --mw-warn-soft: #fff8e1;
  --mw-bad: #c0392b;
  --mw-bad-ink: #b0322a;
  --mw-bad-soft: #fdecea;
  --mw-danger: #d0342c;
  --mw-danger-ink: #c0322a;
  --mw-neutral: #666666;
  --mw-neutral-soft: #eeeeee;
  /* 흐린 글자 — 작은 딱지·설명 한 줄·자리표시자가 쓴다. 이 색은 바탕 넷에 얹히므로 넷을 모두
     놓고 재야 한다. 두 번 연달아 놓쳤다 — 처음에는 흰 카드(4.55) 하나만 보고 넘겼고, 다음에는
     카드·내린 바탕 둘만 봐서 쪽 바탕(4.43)·회색칸(4.17)이 그대로 남았다. 지금은 넷 모두 넘는다
     (sdlc-48 ⑦ 이 지킨다):

       흰 카드 --mw-surface          5.52      쪽 바탕 --mw-paper        5.06
       내린 바탕 --mw-surface-sunken  5.20      회색칸 --mw-neutral-soft   4.76

     짙은 메뉴(--mw-sidebar) 위에는 이 색을 얹지 않는다 — 진하게 할수록 되레 나빠지는 방향이라
     이 토큰으로는 풀 수 없다. 그런 자리는 그 바탕의 짝(--mw-sidebar-ink)을 쓴다.
     어두운 화면은 반대로 밝혀야 오른다 — 아래 블록에 따로 적어 두었다.
     푸른 결(R:G:B 0.84:0.89:1)은 그대로다. */
  --mw-muted: #626976;
  /* 메뉴(사이드바) — 밝은 화면에서도 짙은 남색을 유지한다. 본문과 확실히 갈라져야
     넓은 표를 볼 때 시선이 메뉴로 새지 않는다. */
  --mw-sidebar: #101728;
  --mw-sidebar-ink: #ffffff;
  --mw-nav-ink: #97a3c0;
  --mw-nav-hover: rgba(255, 255, 255, .07);
  --mw-nav-active: rgba(122, 160, 255, .15);
  --mw-nav-accent: #7aa0ff;
  --mw-nav-sep: rgba(255, 255, 255, .09);
  --mw-nav-label: #5f6d90;
  --mw-shadow: 0 1px 3px rgba(20, 24, 34, .07);
  --mw-shadow-lift: 0 8px 24px -16px rgba(20, 24, 34, .45);
  --mw-serif: Iowan Old Style, Palatino Linotype, "Noto Serif KR", Georgia, serif;
  --mw-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  /* 움직임 — 화면마다 제각각 정하지 않도록 길이와 가속을 여기서 고정한다. */
  --mw-ease: cubic-bezier(.22, .61, .36, 1);
  --mw-dur: .22s;
  --mw-dur-slow: .42s;
  color-scheme: light;
}

/* 어두운 화면. 채움색(accent/good/warn/bad/danger)은 밝은 화면과 거의 같은 값을 유지한다 —
   그 위에 얹히는 흰 글자가 두 화면 모두에서 읽혀야 하기 때문이다. 대신 바탕·선·글자만 뒤집는다. */
:root[data-theme="dark"] {
  --mw-ink: #e9edf5;
  --mw-ink-soft: #b0b9ca;
  --mw-paper: #0a0d13;
  --mw-surface: #131822;
  --mw-surface-sunken: #0f141d;
  --mw-line: #212938;
  --mw-line-strong: #394559;
  --mw-accent: #3f6fe0;
  --mw-accent-ink: #a8c2ff;
  --mw-accent-soft: #17203a;
  --mw-good: #1e824c;
  --mw-good-ink: #5cc394;
  --mw-good-soft: #10281f;
  --mw-warn: #97700a;
  --mw-warn-ink: #d8a94a;
  --mw-warn-soft: #2a2213;
  --mw-bad: #b8382c;
  --mw-bad-ink: #e08b81;
  --mw-bad-soft: #2c1a18;
  --mw-danger: #c2352b;
  --mw-danger-ink: #e0736a;
  --mw-neutral: #9aa3b2;
  --mw-neutral-soft: #1c2431;
  /* 밝은 화면과 반대로, 어두운 화면에서는 밝혀야 대비가 오른다. #7c8698 은 회색칸
     (--mw-neutral-soft) 위에서 4.25 로 모자랐다 — 한 단계 밝혀 4.65 로 올린다.
     카드 5.26 · 내린 바탕 5.53 · 쪽 바탕 5.72 로 나머지도 함께 오른다. */
  --mw-muted: #838d9f;
  --mw-sidebar: #0d111a;
  --mw-sidebar-ink: #eef2fb;
  --mw-nav-ink: #8894ae;
  --mw-nav-hover: rgba(255, 255, 255, .05);
  --mw-nav-active: rgba(122, 160, 255, .14);
  --mw-nav-accent: #7aa0ff;
  --mw-nav-sep: rgba(255, 255, 255, .07);
  --mw-nav-label: #5d6883;
  --mw-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  --mw-shadow-lift: 0 10px 26px -18px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

/* 하자 사진은 증빙 자료다. 어두운 화면이라고 어둡게 깔면 실제 색을 잘못 판단할 수 있으므로
   사진이 놓이는 자리만 항상 밝게 유지한다. */
:root[data-theme="dark"] img { background: #fff; }
:root[data-theme="dark"] .mw-photo-frame { background: #f2f3f6; }

/* ---- 창(모달) 등장 ----
   세 앱이 모두 .modal-backdrop / .modal 구조를 쓰므로 여기서 한 번만 정의한다.
   배경은 옅게 깔리고 카드는 살짝 커지며 나타난다 — 어디서 열렸는지 감이 잡힐 만큼만 짧게(.24초). */
.modal-backdrop.active { animation: mwBackdropIn .18s ease both; }
.modal-backdrop.active > .modal,
.modal-backdrop.active > .modal-box { animation: mwModalIn .24s var(--mw-ease) both; }
@keyframes mwBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mwModalIn { from { opacity: 0; transform: translateY(6px) scale(.975); } to { opacity: 1; transform: none; } }

/* ---- 진입 애니메이션(공용) ---- */
.mw-reveal { opacity: 0; animation: mwFadeUp .45s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes mwFadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.mw-r1 { animation-delay: .05s; } .mw-r2 { animation-delay: .1s; } .mw-r3 { animation-delay: .15s; } .mw-r4 { animation-delay: .2s; }

@keyframes mwCardIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mwDotIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes mwPing { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes mwRingFill { to { stroke-dashoffset: var(--mw-ring-target, 0); } }

/* ---- 상태 플레이트 ---- */
.mw-status-plate { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 8px; border: 1px solid; }
.mw-status-plate .mw-dot-wrap { width: 8px; height: 8px; position: relative; flex-shrink: 0; }
.mw-status-plate .mw-dot { width: 8px; height: 8px; border-radius: 50%; position: absolute; inset: 0; }
.mw-status-plate .mw-ping { width: 8px; height: 8px; border-radius: 50%; position: absolute; inset: 0; animation: mwPing 2.2s cubic-bezier(0,0,.2,1) infinite; }
.mw-status-plate-label { font-family: var(--mw-serif); font-size: 13.5px; font-weight: 600; line-height: 1.15; }
.mw-status-plate-sub { font-family: var(--mw-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.mw-tone-good { border-color: var(--mw-good); background: var(--mw-good-soft); }
.mw-tone-good .mw-dot, .mw-tone-good .mw-ping { background: var(--mw-good); }
.mw-tone-good .mw-status-plate-label, .mw-tone-good .mw-status-plate-sub { color: var(--mw-good); }
.mw-tone-warn { border-color: var(--mw-warn); background: var(--mw-warn-soft); }
.mw-tone-warn .mw-dot, .mw-tone-warn .mw-ping { background: var(--mw-warn); }
.mw-tone-warn .mw-status-plate-label, .mw-tone-warn .mw-status-plate-sub { color: var(--mw-warn); }
.mw-tone-bad { border-color: var(--mw-bad); background: var(--mw-bad-soft); }
.mw-tone-bad .mw-dot, .mw-tone-bad .mw-ping { background: var(--mw-bad); }
.mw-tone-bad .mw-status-plate-label, .mw-tone-bad .mw-status-plate-sub { color: var(--mw-bad); }
.mw-tone-info { border-color: var(--mw-accent); background: var(--mw-accent-soft); }
.mw-tone-info .mw-dot, .mw-tone-info .mw-ping { background: var(--mw-accent); }
.mw-tone-info .mw-status-plate-label, .mw-tone-info .mw-status-plate-sub { color: var(--mw-accent-ink); }
.mw-tone-neutral { border-color: var(--mw-line-strong); background: var(--mw-neutral-soft); }
.mw-tone-neutral .mw-dot, .mw-tone-neutral .mw-ping { background: var(--mw-neutral); }
.mw-tone-neutral .mw-status-plate-label, .mw-tone-neutral .mw-status-plate-sub { color: var(--mw-neutral); }
.mw-tone-neutral .mw-ping { animation: none; } /* 대기/보류 없는 정적 상태는 굳이 펄스 없이 */

/* ---- 사진 증빙: 가로 한 줄 ----
   카드 폭을 컨테이너에 꽉 채우지 않고 220px로 캡을 씌운다 — 컨테이너 폭에 맞춰 무제한으로 늘어나면
   3:4 세로 비율 때문에 사진이 같이 커져서 한 줄만으로 창 높이를 다 잡아먹는다. 220px는 사진이 작아
   보이지 않으면서도 모달 폭(#modal .modal의 max-width)이 이 캡에 맞춰 적당한 크기로 정해지도록
   admin/index.html과 같이 맞춰 둔 값이다. */
.mw-photo-row { display: grid; grid-template-columns: repeat(4, minmax(0, 220px)); justify-content: center; gap: 12px; }
@media (max-width: 760px) { .mw-photo-row { grid-template-columns: repeat(2, minmax(0, 220px)); } }
.mw-photo-card {
  border: 1px solid var(--mw-line); border-radius: 9px; overflow: hidden; background: var(--mw-surface-sunken);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  opacity: 0; animation: mwCardIn .4s cubic-bezier(.2,.7,.3,1) forwards;
}
.mw-photo-card:nth-child(1) { animation-delay: .05s; }
.mw-photo-card:nth-child(2) { animation-delay: .11s; }
.mw-photo-card:nth-child(3) { animation-delay: .17s; }
.mw-photo-card:nth-child(4) { animation-delay: .23s; }
.mw-photo-card:hover { border-color: var(--mw-accent); box-shadow: 0 5px 16px -8px rgba(47,95,218,.35); transform: translateY(-2px); }
/* 현장 사진은 세로(휴대폰 카메라) 촬영이 대부분이라 기존 상세정보 모달과 같은 3:4 세로 비율을 그대로 쓴다
   — 가로 비율로 바꾸면 object-fit:cover가 사진 위/아래를 잘라내 하자 증빙 내용이 가려질 수 있다. */
.mw-photo-frame { aspect-ratio: 3/4; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--mw-surface-sunken); }
.mw-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.mw-photo-empty { color: var(--mw-muted); font-size: 12px; }
.mw-photo-tag {
  position: absolute; top: 6px; left: 6px; font-family: var(--mw-mono); font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(20,22,28,.55); color: #fff; padding: 2px 5px; border-radius: 4px; pointer-events: none;
}
.mw-photo-meta { padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border-top: 1px solid var(--mw-line); background: var(--mw-surface); }
.mw-photo-meta .mw-label { font-size: 11.5px; font-weight: 600; color: var(--mw-ink); }
.mw-chip { font-family: var(--mw-mono); font-size: 8.5px; letter-spacing: .03em; padding: 2px 6px; border-radius: 20px; flex-shrink: 0; }
.mw-chip.mw-on { background: var(--mw-good-soft); color: var(--mw-good); }
.mw-chip.mw-off { background: var(--mw-surface); color: var(--mw-muted); border: 1px solid var(--mw-line); }

/* ---- 완료도 링 ---- */
.mw-ring-svg { width: 26px; height: 26px; flex-shrink: 0; transform: rotate(-90deg); }
.mw-ring-track { fill: none; stroke: var(--mw-line); stroke-width: 3; }
.mw-ring-fill { fill: none; stroke: var(--mw-good); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 78.54; stroke-dashoffset: 78.54; animation: mwRingFill .9s .2s cubic-bezier(.2,.7,.3,1) forwards; }

/* ---- 스펙시트형 정보 그리드 ----
   칸마다 선을 긋지 않는다. 아홉 칸을 격자선으로 나누면 표처럼 빽빽해 보이고, 정작 읽어야 할
   값보다 선이 먼저 눈에 들어온다. 선 대신 여백으로 나누고, 라벨을 값보다 흐리게 두어
   "무엇이 무엇인지"가 색 차이로 읽히게 한다. */
.mw-spec-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px 22px; padding: 14px 16px;
  border-radius: 10px; background: var(--mw-surface);
}
@media (min-width: 760px) { .mw-spec-grid.mw-spec-grid-4 { grid-template-columns: repeat(4, 1fr); } }
.mw-spec-cell { padding: 0; min-width: 0; }
.mw-spec-cell.mw-span-2 { grid-column: span 2; }
.mw-spec-label {
  font-size: 10px; font-weight: 600; letter-spacing: .01em;
  color: var(--mw-muted); margin: 0 0 3px; line-height: 1.3;
}
.mw-spec-value {
  font-size: 12.5px; font-weight: 600; color: var(--mw-ink); line-height: 1.4; margin: 0;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; word-break: break-word;
}
.mw-badge-new { font-size: 9px; font-weight: 700; color: var(--mw-accent); background: var(--mw-accent-soft); padding: 1px 5px; border-radius: 4px; }
.mw-badge-team { font-family: var(--mw-mono); font-size: 9.5px; font-weight: 500; color: var(--mw-accent-ink); background: var(--mw-accent-soft); padding: 1px 6px; border-radius: 4px; }

/* ---- 처리 내역 / 비고 ---- */
.mw-trail { display: flex; gap: 18px; margin-bottom: 10px; flex-wrap: wrap; }
.mw-trail-item dt { font-family: var(--mw-mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--mw-muted); margin: 0 0 3px; }
.mw-trail-item dd { margin: 0; font-family: var(--mw-mono); font-size: 11.5px; color: var(--mw-ink-soft); font-variant-numeric: tabular-nums; }
.mw-note-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.mw-note-list li { font-size: 12px; color: var(--mw-ink); padding: 7px 10px; background: var(--mw-surface-sunken); border: 1px solid var(--mw-line); border-radius: 7px; }
.mw-note-list li b { display: block; font-family: var(--mw-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--mw-muted); font-weight: 600; margin-bottom: 2px; }
.mw-note-list li.mw-warn-note { border-color: var(--mw-bad); background: var(--mw-bad-soft); }
.mw-note-list li.mw-warn-note b { color: var(--mw-bad); }

@media (prefers-reduced-motion: reduce) {
  .mw-reveal, .mw-photo-card, .mw-ring-fill, .mw-status-plate .mw-dot-wrap, .mw-status-plate .mw-ping,
  .modal-backdrop.active, .modal-backdrop.active > .modal, .modal-backdrop.active > .modal-box {
    animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important;
  }
  .mw-status-plate .mw-ping { opacity: 0 !important; }
}

/* ── 체크·라디오 상자 ─────────────────────────────────────────────────────────
   브라우저 기본 상자는 13×13 이다. 현장에서 장갑을 낀 손으로는 빗나가고, 표시 색도
   브라우저 기본 파란색이라 갈색 계열인 센터 화면에서는 이 상자만 혼자 튀었다.
   크기를 한 단계 키우고, 색은 그 화면의 강조색에 맡긴다.

   --mw-check 를 먼저 보는 까닭 — 화면마다 강조색이 다르다(센터는 갈색 --accent).
   그 화면 :root 에 --mw-check 한 줄만 적어 주면 여기를 건드리지 않아도 따라온다.
   정해 두지 않은 화면은 예전처럼 파란 강조색을 쓴다.

   화면마다 따로 적어 둔 규칙(동의 목록의 width:auto 등)은 특이도가 더 높아 그대로 이긴다 —
   그쪽에는 이 크기를 직접 적어 두었다. */
input[type="checkbox"], input[type="radio"] {
  width: 17px; height: 17px; accent-color: var(--mw-check, var(--mw-accent));
}