/* ============================================================
   공지 · 팝업  —  경로 : /www/fermat/map/notice.css
   색은 index.html 의 테마 변수(--green 계열)를 그대로 쓴다.
   화면 색을 바꾸면 여기도 같이 따라간다.
   ============================================================ */

/* ---------- 로그인 직후 팝업 ---------- */
.ntc-bg{
  position:fixed; inset:0; z-index:9000;
  background:rgba(15,23,42,.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.ntc{
  background:#fff; border-radius:10px; width:100%; max-width:560px;
  max-height:86vh; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.ntc-hd{
  background:var(--green,#1e3a8a); color:#fff; padding:16px 20px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.ntc-hd.imp{ background:#991b1b; }
.ntc-tag{
  font-size:11px; font-weight:700; letter-spacing:.04em;
  background:rgba(255,255,255,.22); padding:3px 9px; border-radius:11px; white-space:nowrap;
}
.ntc-ttl{ font-size:17px; font-weight:700; line-height:1.4; flex:1; min-width:0; }
.ntc-cnt{ font-size:12px; opacity:.85; white-space:nowrap; }

.ntc-bd{
  padding:20px; font-size:14px; line-height:1.75; color:#1f2937;
  overflow:auto; flex:1; white-space:normal; word-break:break-word;
}
.ntc-meta{ padding:0 20px 14px; font-size:12px; color:#6b7280; }

.ntc-ft{
  border-top:1px solid #e5e7eb; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.ntc-chk{ font-size:13px; color:#374151; display:flex; align-items:center; gap:6px; cursor:pointer; }
.ntc-chk.off{ color:#9ca3af; cursor:default; }
.ntc-btns{ display:flex; gap:8px; margin-left:auto; }
.ntc-b1,.ntc-b2{
  border:1px solid transparent; border-radius:6px; padding:9px 18px;
  font-size:14px; font-weight:700; cursor:pointer; font-family:inherit;
}
.ntc-b1{ background:var(--green,#1e3a8a); color:#fff; }
.ntc-b2{ background:#fff; color:#374151; border-color:#d1d5db; }
.ntc-b1:hover{ filter:brightness(1.08); }
.ntc-b2:hover{ background:#f3f4f6; }

/* ---------- 등록 화면 ---------- */
.ntc-warn{
  background:#fef3c7; border:1px solid #fcd34d; color:#92400e;
  border-radius:6px; padding:10px 12px; font-size:13px; line-height:1.6; margin:-4px 0 4px;
}
.ntc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.ntc-chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #d1d5db; border-radius:6px; padding:6px 11px;
  font-size:13px; cursor:pointer; background:#fff; user-select:none;
}
.ntc-chip:hover{ background:#f9fafb; }

/* ---------- 읽음 현황 ---------- */
.ntc-bar{ height:9px; background:#e5e7eb; border-radius:5px; overflow:hidden; margin:10px 0 4px; }
.ntc-bar-in{ height:100%; background:var(--green,#1e3a8a); transition:width .3s; }
.ntc-names{
  max-height:260px; overflow:auto; border:1px solid #e5e7eb; border-radius:6px;
  padding:8px 10px; font-size:13px; line-height:1.9;
}

/* 좁은 화면 */
@media (max-width:560px){
  .ntc-ft{ flex-direction:column; align-items:stretch; }
  .ntc-btns{ margin-left:0; }
  .ntc-b1,.ntc-b2{ flex:1; }
}