/* N3 契約の期限管理（RAKLUMO）で足したもの。共通の見た目は style.css（S1から写したもの） */
.span3 { grid-column:1 / -1; }
.tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.filebtn { position:relative; overflow:hidden; cursor:pointer; }
.filebtn input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.row2 { display:flex; gap:6px; } .row2 input { flex:1; min-width:0; } .row2 select { width:auto; }
.backup { margin:0 0 12px; padding:10px 12px; border:2px solid #c77700; border-radius:8px; background:#fff6e5; line-height:1.7; }
.backup .btn { margin-left:8px; }
.importbox { margin-top:10px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#f7f9fb; }
.importbox .btn { margin:4px 6px 0 0; }
.group { margin-top:14px; }
.group h3 { font-size:14.5px; margin:0 0 6px; padding:4px 10px; border-radius:6px; }
.g-expired h3 { background:#fde2e1; color:#a1261e; }
.g-soon30 h3 { background:#fff0d9; color:#9a5b00; }
.g-soon90 h3 { background:#fdf8d7; color:#6f6400; }
.g-later h3 { background:#e7f3ec; color:#2e6b47; }
.g-ended h3 { background:#eceff3; color:#555; }
.card { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:0 0 8px; background:#fff; }
.g-expired .card { border-left:5px solid #c0392b; } .g-soon30 .card { border-left:5px solid #e08a00; }
.g-soon90 .card { border-left:5px solid #c9b400; } .g-later .card { border-left:5px solid #2e7d4f; } .g-ended .card { border-left:5px solid #999; }
.ctitle { font-size:15px; overflow-wrap:anywhere; }
.ckey { margin:4px 0; font-size:15px; } .klabel { color:#555; } .days { margin-left:10px; font-weight:bold; }
.g-expired .days { color:#a1261e; } .g-soon30 .days { color:#9a5b00; }
.cinfo { margin:4px 0 6px 18px; padding:0; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.cbar { display:flex; flex-wrap:wrap; gap:6px; }
.notes ul { margin:4px 0 10px 18px; padding:0; line-height:1.7; }
@media (max-width:600px) { .tools .btn { flex:1 1 45%; text-align:center; } .days { display:block; margin-left:0; } }