/* ══════════════════════════════════════════════════════════════
   원고도우미 새 디자인 — 공통.css(무채색 시스템)를 기존 화면에 입히는 어댑터
   · HTML은 그대로 두고 겉모습만 바꾼다(기능 손상 위험 최소)
   · 원칙: 색은 회색 계열, 강조는 '진하기'로. 빨강은 되돌릴 수 없는 것에만.
   ══════════════════════════════════════════════════════════════ */

body{
  background: var(--바탕) !important;
  color: var(--글) !important;
  font-family: -apple-system, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif !important;
  font-size: 14px;
  padding: 20px 16px 72px !important;
}

/* ── 카드(판) ───────────────────────────────── */
.card{
  background: var(--판) !important;
  border: 1px solid var(--선) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 18px 18px 22px !important;
  max-width: 1100px !important;   /* 모든 화면 같은 폭 (가이드함·규칙 등이 좁던 것 통일) */
  margin: 0 auto !important;
}
h1{ font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.01em; color: var(--글) !important; margin: 2px 0 6px !important; }
h2{ font-size: 16px !important; font-weight: 600 !important; }
p, label{ color: var(--글연한) !important; font-size: 13px !important; line-height: 1.6; }
p b, label b{ color: var(--글) !important; }
/* 제목 옆 버전 뱃지 */
h1 span{ background: transparent !important; color: var(--글흐린) !important; font-weight: 400 !important; font-size: 11px !important; border: 1px solid var(--선); border-radius: 5px; }

/* ── 화면 이동(상단 메뉴) — 모든 페이지 같은 모양·위치 ───────────
   윗줄(topnav): 버튼이 가로를 꽉 채워 균등 분할 (스케줄 화면 기준)
   아랫줄(subnav): 오른쪽 정렬, 작은 버튼 */
.topnav{ display: flex !important; gap: 6px !important; margin-bottom: 6px !important; flex-wrap: wrap !important; }
.topnav button{ flex: 1 1 0 !important; min-width: 92px !important; text-align: center !important; }
.subnav{ display: flex !important; gap: 6px !important; justify-content: flex-end !important; margin-bottom: 14px !important; flex-wrap: wrap !important; }
.subnav button{ flex: 0 0 auto !important; }
.topnav button, .subnav button{
  background: transparent !important; color: var(--글연한) !important;
  border: 1px solid transparent !important; border-radius: 7px !important;
  font-size: 13px !important; font-weight: 500 !important; padding: 8px 12px !important;
  box-shadow: none !important;
}
.topnav button:hover, .subnav button:hover{ background: #ececee !important; opacity: 1 !important; }
.topnav button.navActive, .subnav button.navActive{
  background: var(--판) !important; border-color: var(--선) !important;
  color: var(--글) !important; font-weight: 600 !important;
}

/* ── 버튼 ─────────────────────────────────────
   ⚠️ 버튼 색은 각 화면에 이미 지정돼 있다(제목=파랑·본문=초록·사진=보라·취소=빨강 …).
      여기서 색을 덮으면 화면이 흑백이 되므로 '모양'만 다듬고 색은 건드리지 않는다. */
button{
  font-family: inherit;
  border-radius: 7px !important;
  box-shadow: none !important; text-shadow: none !important;
}
button:hover{ opacity: .92; }
.cellcopy{ border-radius: 0 !important; }

/* ── 입력칸 ─────────────────────────────────── */
input, select, textarea{
  border: 1px solid var(--선진한) !important; border-radius: 7px !important;
  background: var(--판) !important; color: var(--글) !important; font-family: inherit;
}
input:focus, select:focus, textarea:focus{ outline: none !important; border-color: var(--글연한) !important; box-shadow: none !important; }

/* ── 표(스케줄) : 칸마다 옅은 색 구역으로 구분 (한눈에 어디가 뭔지) ── */
.grid th{ background: #eef0f4 !important; color: var(--글연한) !important; font-weight: 600 !important; font-size: 12px !important; }
.grid td, .grid th{ border-color: var(--선) !important; }
.grid td.num, .grid th.num{ background: #f4f5f7 !important; color: var(--글흐린) !important; }
.col-e{ background: #f4faf5 !important; }   /* 원고 = 연초록 */
.col-m{ background: #fdf8f0 !important; }   /* 계정·업체명·비고 = 연노랑 */
.col-p{ background: #f7f4fb !important; }   /* 사진 = 연보라 */
.grid td textarea{ background: transparent !important; color: var(--글) !important; }
.col-h .mhead{ color: var(--글) !important; }
.col-m .mval, .col-m .mcomp{ color: #1f3a63 !important; }
.col-m .macct{ color: #6b5410 !important; }
.col-m .mnote, .mcard .mnote{ color: var(--경고) !important; }   /* 비고는 빨강 유지(놓치면 사고) */
.col-m .mtag{ color: var(--글흐린) !important; }
/* ══ 스케줄 구분 색 — 차분한 톤으로 '띠 + 아주 옅은 배경'에만 사용 ══
   맘카페=분홍 / 커뮤니티=파랑 / 시트 옮김완료=초록 / 게시완료=회색
   (칸 배경은 흰색 유지 → 알록달록해지지 않게) */
:root{
  --맘: #d1608a;  --맘연: #fbeaf1;
  --커뮤: #4a72b8; --커뮤연: #e9f0fb;
  --완료: #2f9e6f; --완료연: #e7f5ee;
  --게시: #8a94a1; --게시연: #eceef1;
}
.grid tr.mom  td.col-h{ background: var(--맘연) !important;  border-left: 5px solid var(--맘) !important; }
.grid tr.comm td.col-h{ background: var(--커뮤연) !important; border-left: 5px solid var(--커뮤) !important; }
.grid tr.mom  td.num{ background: var(--맘) !important;  color: #fff !important; font-weight: 700 !important; }
.grid tr.comm td.num{ background: var(--커뮤) !important; color: #fff !important; font-weight: 700 !important; }
.grid tr.moved td.num{ background: var(--완료) !important; color: #fff !important; }

/* 시트로 옮긴 줄 — 옅은 초록(왼쪽 카페 띠는 그대로 유지) */
.grid tr.moved td{ background: var(--완료연) !important; }
.grid tr.moved td.col-h{ background: var(--완료연) !important; }
.grid tr.moved td.num{ background: #e6f2ea !important; color: var(--완료) !important; }
/* 게시완료(링크전달) 줄 — 회색으로 흐려서 '끝난 건'이 한눈에 */
.grid tr.sent td{ background: var(--게시연) !important; }
.grid tr.sent td.col-h{ background: var(--게시연) !important; }
.grid tr.sent td.num{ background: var(--게시) !important; color: #fff !important; }
.grid tr.sent td textarea{ color: var(--글흐린) !important; }

/* 모바일 카드·요약도 같은 구분 */
.mcard.mom,  .sumcard.mom { border-left: 4px solid var(--맘) !important; }
.mcard.comm, .sumcard.comm{ border-left: 4px solid var(--커뮤) !important; }
.mcard.moved{ background: var(--완료연) !important; }

/* 상태 뱃지/버튼 — 배경 대신 '글자색 + 옅은 배경'으로 은은하게 */
.k-good{ background: var(--완료연) !important; color: var(--완료) !important; border-color: #cfe6d8 !important; font-weight: 600 !important; }
.sbadge.ong{ background: var(--완료연) !important; color: var(--완료) !important; }
.sbadge.onb{ background: var(--게시연) !important; color: var(--게시) !important; }
.sbadge.onw{ background: #fbf6e9 !important; color: var(--주의) !important; }
/* 맨 위 색 안내(범례) 점 */
.card > div > span[style*="border-radius:3px"]{ border-radius: 3px !important; }

/* ── 카드형(모바일)·요약 ────────────────────── */
.mcard, .sumcard, .item, .entry, .calbox, .datebar, .note, .hint, .rotatehint, .src, .판{
  background: var(--판) !important; border: 1px solid var(--선) !important;
  border-radius: 10px !important; box-shadow: none !important; color: var(--글연한) !important;
}
.mcard.mom, .sumcard.mom{ border-left: 3px solid var(--선진한) !important; }
.mcard.comm, .sumcard.comm{ border-left: 3px solid var(--글연한) !important; }
.mcard textarea, .mcard .mval{ background: #fafafb !important; }
.mnum, .sbadge, .tag{ background: #f2f2f4 !important; color: var(--글연한) !important; font-weight: 500 !important; }
.sumtitle, .ihead{ color: var(--글) !important; }
.sumtime{ color: var(--글) !important; }
.sumbody, .ibody{ background: #fafafb !important; color: var(--글연한) !important; }
.ilink{ color: var(--글연한) !important; }

/* ── 달력 ───────────────────────────────────── */
.calday{ border-color: var(--선) !important; }
.calday.today{ border-color: var(--글) !important; }
.calcnt{ background: var(--강조) !important; color: #fff !important; }
.calday.sel .calcnt{ background: #fff !important; color: var(--글) !important; }
.datebar .dblabel{ color: var(--글연한) !important; }

/* ── 경고/알림 박스 ─────────────────────────── */
#linkWarn{ border-radius: 10px !important; }
#msg, #cafeMsg{ color: var(--글연한) !important; }

/* ── 폰 ─────────────────────────────────────── */
@media (max-width: 520px){
  body{ padding: 14px 11px 76px !important; }
  h1{ font-size: 18px !important; }
  input, select, textarea{ font-size: 16px !important; }   /* 아이폰 확대 방지 */
  .topnav button, .subnav button{ padding: 9px 12px !important; }
}