/* 계약 만기 알림판 */
[data-app="contract-expiry"]{ display:flex; flex-direction:column; gap:10px; word-break:keep-all; overflow-wrap:anywhere; }
/* 요약·월 금액 합계 */
[data-app="contract-expiry"] .ce-sum{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:12px; background:#F1F4F9; border:1px solid #E3E8F0; }
[data-app="contract-expiry"] .ce-cnt{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:0; font-size:13px; color:#4B5059; }
[data-app="contract-expiry"] .ce-cnt span{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
[data-app="contract-expiry"] .ce-cnt span::before{ content:''; width:9px; height:9px; border-radius:50%; background:#2563EB; }
[data-app="contract-expiry"] .ce-cnt span.o::before{ background:#D92D20; }
[data-app="contract-expiry"] .ce-cnt span.s::before{ background:#F2C230; }
[data-app="contract-expiry"] .ce-cnt span.n::before{ background:#C2410C; }
[data-app="contract-expiry"] .ce-cnt b{ font-size:15px; color:#1A1A1A; font-variant-numeric:tabular-nums; }
[data-app="contract-expiry"] .ce-total{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin:2px 0 0; font-size:14px; font-weight:700; color:#3A3F47; }
[data-app="contract-expiry"] .ce-tm{ font-size:22px; font-weight:900; color:#1A1A1A; font-variant-numeric:tabular-nums; }
[data-app="contract-expiry"] .ce-ty{ font-size:13px; font-weight:700; color:#5B6470; font-variant-numeric:tabular-nums; }
[data-app="contract-expiry"] .ce-tnote{ margin:0; }
[data-app="contract-expiry"] .ce-warn{ margin:0; padding:6px 10px; border-radius:8px; background:#FDECEC; color:#9F1C1C; font-size:12.5px; font-weight:700; }
/* 추가 칸 */
[data-app="contract-expiry"] .ce-add{ display:flex; flex-direction:column; gap:8px; margin:0; padding:10px; border-radius:12px; background:#FAFAFB; border:1px dashed #D9DCE1; }
[data-app="contract-expiry"] .ce-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px 8px; }
[data-app="contract-expiry"] .ce-w2{ grid-column:span 2; }
[data-app="contract-expiry"] .ce-w3{ grid-column:span 3; }
[data-app="contract-expiry"] .ce-f{ display:flex; flex-direction:column; gap:3px; min-width:0; }
[data-app="contract-expiry"] .ce-f .ndt-k small{ font-weight:600; color:#8A8F98; }
[data-app="contract-expiry"] .ndt-in{ min-width:0; min-height:42px; }
[data-app="contract-expiry"] .ce-nd{ display:flex; align-items:center; gap:6px; min-height:42px; font-size:14px; font-weight:700; color:#3A3F47; white-space:nowrap; }
[data-app="contract-expiry"] .ce-nd .ndt-in{ width:74px; flex:none; text-align:right; }
[data-app="contract-expiry"] .ce-ck{ display:flex; align-items:center; gap:6px; min-height:42px; font-size:14px; font-weight:700; color:#3A3F47; cursor:pointer; }
[data-app="contract-expiry"] .ce-ck input{ width:20px; height:20px; margin:0; accent-color:#1A1A1A; }
[data-app="contract-expiry"] .ce-amt{ display:flex; gap:4px; min-width:0; }
[data-app="contract-expiry"] .ce-amt select{ width:64px; flex:none; padding:6px 4px; }
[data-app="contract-expiry"] .ce-amt input{ flex:1 1 auto; text-align:right; }
[data-app="contract-expiry"] .ce-hint{ margin:0; }
[data-app="contract-expiry"] .ce-addb{ min-height:44px; font-size:15px; }
[data-app="contract-expiry"] .ce-msg{ margin:0; min-height:1.3em; font-size:12.5px; color:#0D7A43; font-weight:700; }
[data-app="contract-expiry"] .ce-msg.warn{ color:#B42318; }
[data-app="contract-expiry"] .ce-msg:empty{ min-height:0; }
[data-app="contract-expiry"] .ce-undo{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0; padding:6px 10px; border-radius:10px; background:#EAF7EF; color:#0D5C33; font-size:13px; font-weight:700; }
[data-app="contract-expiry"] .ce-undo[hidden]{ display:none; }
/* 거르기·정렬 */
[data-app="contract-expiry"] .ce-bar{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 12px; padding-top:6px; border-top:1px solid #ECEDF0; }
[data-app="contract-expiry"] .ce-seg{ display:flex; flex-wrap:wrap; gap:6px; }
[data-app="contract-expiry"] .ce-fk{ min-height:38px; padding:0 12px; border:1px solid #D9DCE1; border-radius:999px; background:#fff; color:#3A3F47; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
[data-app="contract-expiry"] .ce-fk[aria-pressed="true"]{ background:#1A1A1A; border-color:#1A1A1A; color:#fff; }
[data-app="contract-expiry"] .ce-fk i{ font-style:normal; opacity:.7; font-variant-numeric:tabular-nums; }
[data-app="contract-expiry"] .ce-sortl{ display:flex; flex-direction:column; gap:3px; min-width:0; max-width:100%; }
[data-app="contract-expiry"] .ce-sort{ width:auto; max-width:100%; min-height:40px; padding-right:28px; }
/* 계약 목록 */
[data-app="contract-expiry"] .ce-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
[data-app="contract-expiry"] .ce-item{ display:grid; grid-template-columns:minmax(64px, max-content) minmax(0,1fr); gap:4px 10px; align-items:start; padding:10px 12px; border:1px solid #E3E5E9; border-radius:12px; background:#fff; }
[data-app="contract-expiry"] .ce-item.soon{ background:#FFF8DC; border-color:#F1D46A; }
[data-app="contract-expiry"] .ce-item.over{ background:#FFF1F0; border-color:#F4B4AE; }
[data-app="contract-expiry"] .ce-b{ padding:5px 6px; border-radius:9px; background:#EEF2FA; color:#314B86; font-size:15px; font-weight:900; text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums; }
[data-app="contract-expiry"] .ce-item.soon .ce-b{ background:#FFD84D; color:#4A3600; }
[data-app="contract-expiry"] .ce-item.over .ce-b{ background:#D92D20; color:#fff; }
[data-app="contract-expiry"] .ce-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
[data-app="contract-expiry"] .ce-nt{ margin:0; font-size:15px; line-height:1.4; color:#1A1A1A; }
[data-app="contract-expiry"] .ce-name{ font-weight:800; }
[data-app="contract-expiry"] .ce-ex, [data-app="contract-expiry"] .ce-kind, [data-app="contract-expiry"] .ce-autob{ display:inline-block; padding:0 6px; border-radius:6px; font-size:11.5px; font-weight:800; vertical-align:2px; white-space:nowrap; }
[data-app="contract-expiry"] .ce-ex{ background:#ECEDF0; color:#6B717B; }
[data-app="contract-expiry"] .ce-kind{ background:#EAF1FE; color:#1E4FB8; }
[data-app="contract-expiry"] .ce-autob{ background:#EDF7EE; color:#17693A; }
[data-app="contract-expiry"] .ce-meta{ display:flex; flex-wrap:wrap; gap:2px 12px; margin:0; font-size:13px; color:#4B5059; font-variant-numeric:tabular-nums; }
[data-app="contract-expiry"] .ce-end{ font-weight:700; color:#1A1A1A; }
[data-app="contract-expiry"] .ce-item.over .ce-end{ color:#B42318; font-weight:800; }
[data-app="contract-expiry"] .ce-money{ font-weight:700; color:#3A3F47; }
/* 해지 통보 마감 — 따로 강조 */
[data-app="contract-expiry"] .ce-notice{ align-self:flex-start; margin:0; padding:3px 9px; border-radius:8px; background:#F1F4F9; border:1px solid #DCE3EE; color:#3A4A66; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
[data-app="contract-expiry"] .ce-notice::before{ content:'✉ '; content:'✉ ' / ''; }
[data-app="contract-expiry"] .ce-notice.due{ background:#FFE9A8; border-color:#F2C230; color:#5A4300; font-weight:800; }
[data-app="contract-expiry"] .ce-notice.late{ background:#D92D20; border-color:#D92D20; color:#fff; font-weight:800; }
[data-app="contract-expiry"] .ce-nw{ white-space:nowrap; }
[data-app="contract-expiry"] .ce-memo{ margin:0; padding:4px 8px; border-radius:8px; background:rgba(0,0,0,.035); font-size:12.5px; color:#4B5059; }
[data-app="contract-expiry"] .ce-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:2px; }
[data-app="contract-expiry"] .ce-acts .ndt-btn{ min-height:36px; }
[data-app="contract-expiry"] .ce-renew{ border-color:#93B4F5; color:#1E4FB8; }
[data-app="contract-expiry"] .ce-rn{ font-size:12px; }
[data-app="contract-expiry"] .ce-empty{ padding:14px 12px; border:1px dashed #D9DCE1; border-radius:12px; color:#6B717B; font-size:13.5px; text-align:center; }
/* 고치는 칸 */
[data-app="contract-expiry"] .ce-item.editing{ display:flex; flex-direction:column; gap:8px; background:#F3F6FC; border-color:#9DB6EA; }
/* 엑셀 불러오기·내보내기 */
[data-app="contract-expiry"] .ce-io{ padding:8px 10px; border:1px solid #E3E5E9; border-radius:12px; background:#FAFAFB; }
[data-app="contract-expiry"] .ce-io summary{ min-height:36px; display:flex; align-items:center; gap:6px; cursor:pointer; font-size:14px; font-weight:800; color:#3A3F47; list-style:none; }
[data-app="contract-expiry"] .ce-io summary::-webkit-details-marker{ display:none; }
[data-app="contract-expiry"] .ce-io summary::before{ content:'▸'; content:'▸' / ''; display:inline-block; width:12px; color:#8A8F98; transition:transform .15s; }
[data-app="contract-expiry"] .ce-io[open] > summary::before{ transform:rotate(90deg); }
[data-app="contract-expiry"] .ce-io > p{ margin:4px 0 6px; }
[data-app="contract-expiry"] .ce-paste{ min-height:96px; font-size:13px; }
[data-app="contract-expiry"] .ce-iorow{ gap:6px; margin-top:6px; }
[data-app="contract-expiry"] .ce-foot{ gap:6px; }
[data-app="contract-expiry"] .ce-note{ margin:0; }
[data-app="contract-expiry"] .ndt-btn.ndt-arm{ width:auto !important; max-width:min(100%, 13em); }
/* 좁은 폭 */
@media (max-width:760px){
  [data-app="contract-expiry"] .ce-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  [data-app="contract-expiry"] .ce-w2, [data-app="contract-expiry"] .ce-w3{ grid-column:1 / -1; }
}
@media (max-width:420px){
  /* 날짜·금액 칸은 한 줄 전체(나란히 두면 「2026. 10. 0」처럼 잘림) · 상대+종류, 해지 통보+자동 갱신은 나란히 */
  [data-app="contract-expiry"] .ce-wd{ grid-column:1 / -1; }
  [data-app="contract-expiry"] .ce-nd{ gap:4px; }
  [data-app="contract-expiry"] .ce-nd .ndt-in{ width:58px; padding:6px 6px; }
  [data-app="contract-expiry"] .ce-item:not(.editing){ grid-template-columns:minmax(0,1fr); }
  [data-app="contract-expiry"] .ce-b{ justify-self:start; padding:2px 10px; font-size:14px; }
  [data-app="contract-expiry"] .ce-sortl, [data-app="contract-expiry"] .ce-sort{ width:100%; }
}