/* 車両損傷チェックシート スタイル（ビュー切替版） */
:root{
  --ink:#131c28; --navy:#1f4e74; --orange:#f15a00; --orange-d:#cf4500;
  --line:rgba(19,28,40,.14); --line2:rgba(19,28,40,.08); --muted:#5d6b7a;
  --mono:"Oswald","Noto Sans JP",sans-serif; --body:"Noto Sans JP",sans-serif;
}
.checksheet *{box-sizing:border-box}
.checksheet{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;font-family:var(--body);color:var(--ink)}
.cs-head{background:var(--navy);color:#fff;padding:14px 18px}
.cs-head h3{font-size:1.12rem;margin:0}
.cs-head p{font-size:.82rem;color:#cfe0f0;margin:2px 0 0}
.cs-body{padding:16px}

.cs-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cs-tabs button{padding:8px 14px;border:1px solid var(--line);border-radius:9px;background:#f5f7f9;color:var(--muted);cursor:pointer;font-size:.92rem}
.cs-tabs button[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:#fff}

.cs-views{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.cs-views button{flex:1 1 auto;min-width:74px;padding:9px 6px;border:1px solid var(--line);border-radius:9px 9px 0 0;background:#eef2f6;color:var(--muted);cursor:pointer;font-size:.9rem;font-weight:500}
.cs-views button[aria-pressed="true"]{border-color:var(--orange);border-bottom-color:#fff;background:#fff;color:var(--orange-d)}

.cs-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.cs-tools button{display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);cursor:pointer;font-size:.92rem}
.cs-tools button[aria-pressed="true"]{border-color:var(--ink);font-weight:700}
.cs-dot{width:14px;height:14px;border-radius:50%;display:inline-block}

.cs-stage{position:relative;border:1px solid var(--line);border-radius:0 10px 10px 10px;background:#fff;overflow:hidden;line-height:0}
.cs-img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.cs-layer{position:absolute;inset:0;cursor:crosshair}
.cs-marker{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.8rem;font-weight:600;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);pointer-events:none}
.cs-aerosel{padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-size:.92rem;cursor:pointer}
.cs-hint{font-size:.8rem;color:var(--muted);margin:8px 2px 0;line-height:1.7}

.cs-list{margin-top:14px}
.cs-list h4{font-size:.98rem;color:var(--navy);margin:0 0 8px}
.cs-row{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.cs-badge{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--mono);font-weight:600;font-size:.82rem}
.cs-fields{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cs-vtag{font-size:.74rem;color:var(--navy);background:#eef2f6;border:1px solid var(--line2);border-radius:6px;padding:3px 8px}
.cs-fields select,.cs-fields input{height:36px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font-family:var(--body);font-size:.92rem;background:#fff}
.cs-fields select{min-width:160px}
.cs-fields .cs-rep{min-width:170px}
.cs-fields .num{width:96px}
.cs-fields .note{flex:1;min-width:120px}
.cs-pv{font-size:.84rem;color:var(--muted);margin-top:7px;line-height:1.6}
.cs-del{border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;color:var(--muted);padding:6px 9px;font-size:.9rem}
.cs-empty{font-size:.9rem;color:var(--muted);padding:8px 0}

.cs-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.cs-count{font-size:.86rem;color:var(--muted)}
.cs-actions{display:flex;gap:8px}
.cs-btn{border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;color:var(--ink);padding:9px 14px;font-size:.9rem}
.cs-btn.primary{background:var(--orange);border-color:var(--orange);color:#fff;font-family:var(--mono);font-weight:600;letter-spacing:.03em}
.cs-btn.primary:hover{background:var(--orange-d)}

@media(max-width:560px){
  .cs-fields select{min-width:46%}
  .cs-fields .note{min-width:100%}
  .cs-row{grid-template-columns:34px 1fr auto}
  .cs-views button{min-width:60px;font-size:.84rem;padding:8px 4px}
}