* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; background: #faf7f2; color: #2b2b2b; -webkit-text-size-adjust: 100%; }
.hide { display: none !important; }
/* ログイン */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: #fff; border: 1px solid #ece6da; border-radius: 14px; padding: 24px 20px; width: 100%; max-width: 360px; box-shadow: 0 6px 24px rgba(0,0,0,.04); }
.login-logo { font-weight: 800; font-size: 22px; letter-spacing: 1px; color: #111; text-align:center; }
.login-logo b { color: #b91c1c; }
.login-sub { font-size: 12px; color: #888; text-align: center; margin-top: 4px; }
/* アプリ */
.wrap { max-width: 1080px; margin: 0 auto; padding: 16px 14px 60px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 0 14px; border-bottom: 2px solid #b91c1c; margin-bottom: 14px; }
.brand .logo { font-weight: 800; font-size: 20px; letter-spacing: 1px; color: #111; cursor: pointer; }
.brand .logo b { color: #b91c1c; }
.brand .sub { font-size: 12px; color: #888; margin-left: auto; }
.brand .sub a { color: #b91c1c; margin-left: 8px; text-decoration: none; font-weight: 700; }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab { padding: 8px 14px; border-radius: 8px; border: 1px solid #e3ddd2; background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: #555; white-space: nowrap; }
.tab.active { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; margin-bottom: 18px; }
.kpi { background: #fff; border: 1px solid #ece6da; border-radius: 12px; padding: 12px 14px; }
.kpi .lbl { font-size: 12px; color: #999; }
.kpi .val { font-size: 23px; font-weight: 800; margin-top: 4px; }
.kpi .val small { font-size: 13px; font-weight: 600; color: #777; }
.kpi.red .val { color: #b91c1c; }
.panel { background: #fff; border: 1px solid #ece6da; border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.panel h3 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.panel h3 .bar { width: 4px; height: 16px; background: #b91c1c; border-radius: 2px; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #f0ebe1; }
th { color: #999; font-weight: 600; font-size: 12px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.clk { cursor: pointer; }
tr.clk:hover td { background: #fdf6f3; }
.stg { display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700; white-space: nowrap; }
.s0{background:#eee;color:#666}.s1{background:#e0edff;color:#1d4ed8}.s2{background:#fef3d7;color:#a16207}.s3{background:#ffe6cc;color:#c2410c}.s4{background:#dcfce7;color:#15803d}
input, select, textarea { font-size: 16px; padding: 10px 12px; border: 1px solid #ddd6c8; border-radius: 8px; background: #fff; font-family: inherit; min-height: 44px; writing-mode: horizontal-tb; }
textarea { min-height: 80px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
button.act { background: #b91c1c; color: #fff; border: none; padding: 11px 18px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 14px; min-height: 44px; }
button.act:disabled { background: #d99; cursor: not-allowed; }
button.gh { background: #fff; border: 1px solid #ddd6c8; color: #555; padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; min-height: 44px; }
.muted { color: #999; font-size: 12px; }
.pill { display:inline-block;padding:4px 10px;border-radius:20px;background:#fde2e2;color:#b91c1c;font-size:12px;font-weight:700;margin:3px; }
.back { color:#b91c1c;cursor:pointer;font-size:14px;font-weight:700;margin-bottom:12px;display:inline-block; min-height: 30px; }
.dgrid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px }
@media (max-width: 600px) { .dgrid { grid-template-columns: 1fr; } }
.field label { display:block;font-size:12px;color:#666;margin-bottom:4px;font-weight:600 }
.field select, .field input { width:100% }
.memo { border:1px solid #eee;border-radius:8px;padding:9px 11px;margin-bottom:7px }
/* ========= フォームグリッド ========= */
/* 「ラベル(上) + 入力欄(下) 」を必ず縦に積むセット。
スマホ(〜600px)は1列、タブレット〜は2列、PCは3列。 */
.fgrid {
display: grid;
grid-template-columns: 1fr; /* 既定はスマホ向け1列 */
gap: 14px;
}
.fgrid .field {
display: flex;
flex-direction: column; /* ラベル上・入力欄下 */
gap: 4px;
min-width: 0; /* gridセル内で縮める許可 */
}
.fgrid .field label {
font-size: 12px;
color: #666;
font-weight: 600;
}
.fgrid .field input,
.fgrid .field select,
.fgrid .field textarea {
width: 100%;
min-height: 44px;
font-size: 16px;
writing-mode: horizontal-tb; /* 文字は必ず横書き */
}
.fgrid-actions {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.fgrid-actions button.act { width: 100%; min-height: 48px; font-size: 15px; }
/* 600px超(タブレット): 2列 */
@media (min-width: 601px) {
.fgrid { grid-template-columns: 1fr 1fr; }
.fgrid-actions { flex-direction: row; align-items: center; }
.fgrid-actions button.act { width: auto; min-width: 180px; }
}
/* 960px超(PC): 3列 */
@media (min-width: 961px) {
.fgrid { grid-template-columns: 1fr 1fr 1fr; }
}
/* タッチターゲット余裕 */
@media (hover: none) {
.tab { padding: 10px 14px; }
}
/* ========= 案件カード（スマホ用） ========= */
.deal-cards { display: flex; flex-direction: column; gap: 10px; }
.deal-card {
background: #fff;
border: 1px solid #ece6da;
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
writing-mode: horizontal-tb;
}
.deal-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; cursor: pointer; }
.deal-card-co { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; word-break: break-word; color: #111; }
.deal-card-meta { font-size: 12px; color: #777; cursor: pointer; line-height: 1.55; word-break: break-word; }
.deal-card-est { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.deal-card-est input {
width: 110px;
text-align: right;
font-size: 16px;
min-height: 44px;
padding: 8px 10px;
writing-mode: horizontal-tb;
}
.deal-card-amt { font-weight: 700; color: #b91c1c; font-size: 15px; flex: 1; text-align: right; font-variant-numeric: tabular-nums; }
.deal-card-memo { font-size: 12px; color: #b91c1c; cursor: pointer; padding-top: 2px; }
.deal-card-empty { padding: 24px 8px; text-align: center; color: #999; }
/* スマホでダッシュ表の min-width 解除＆セル詰める */
@media (max-width: 600px) {
#dash table { min-width: 0; }
#dash th, #dash td { padding: 7px 8px; font-size: 12px; }
#dash .tbl-scroll { overflow-x: visible; }
.hide-mobile { display: none !important; }
}
/* ========= ローディングスピナー / 保存中表示 ========= */
.spin {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: bspin 0.7s linear infinite;
vertical-align: middle;
margin-right: 6px;
}
@keyframes bspin { to { transform: rotate(360deg); } }
button.is-loading { opacity: 0.85; cursor: wait; }
/* 案件番号バッジ */
.deal-no {
display: inline-block;
background: #fde2e2;
color: #b91c1c;
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
vertical-align: middle;
margin-right: 6px;
}
.est-status { display: inline-block; margin-left: 8px; font-size: 12px; vertical-align: middle; min-width: 50px; }