/* =====================================================================
   真優屋 月次締め — MF風 LP/プロダクトUI
   設計思想: 余白多め・大きな見出し・円形アイコンバッジ・薄色セクション分離
   ===================================================================== */

:root {
  /* MF系カラー */
  --mf-blue:        #00468b;
  --mf-blue-mid:    #0073cf;
  --mf-blue-light:  #4a9bd8;
  --mf-blue-bg:     #eef5fb;
  --mf-blue-soft:   #f5f9fd;

  --mf-orange:      #f5a800;
  --mf-orange-dark: #e69a00;
  --mf-orange-soft: #fff5e0;

  --mf-pink-soft:   #fbeef0;
  --mf-green:       #00a578;
  --mf-green-soft:  #e7f7f1;
  --mf-purple-soft: #f1ebfb;

  /* ニュートラル */
  --bg:             #fafcfe;
  --surface:        #ffffff;
  --text:           #1a2940;
  --text-sub:       #5a6c82;
  --text-mute:      #8a99ad;
  --border:         #e8eef5;

  /* ステータス */
  --idle-bg:   #eef2f6;  --idle-fg:   #5a6b7a;
  --run-bg:    #e1efff;  --run-fg:    #1654b5;
  --ok-bg:     #e7f7f1;  --ok-fg:     #0a7048;
  --warn-bg:   #fff4d6;  --warn-fg:   #8a5b00;
  --ng-bg:     #fde7e7;  --ng-fg:     #8c2828;
  --manual-bg: #f1ebfb;  --manual-fg: #5e3aa1;

  --radius:    12px;
  --radius-pill: 999px;
  --shadow:    0 2px 12px rgba(0,40,80,.06);
  --shadow-lg: 0 8px 32px rgba(0,40,80,.10);

  --font: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", "Meiryo", -apple-system, system-ui, sans-serif;
  --font-num: "SF Mono", "Consolas", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ====== topbar (シンプル) ====== */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand__back {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: all .15s;
}
.brand__back:hover {
  background: var(--mf-blue-bg);
  color: var(--mf-blue);
  border-color: var(--mf-blue-light);
}
.brand__icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--mf-blue) 0%, var(--mf-blue-mid) 100%);
  color: #fff;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 70, 139, .25);
}
.brand__name { font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.brand__sub  {
  font-size: 10px;
  color: var(--text-mute);
  background: var(--bg);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .08em;
  font-weight: 700;
}
.topbar__meta { display: flex; align-items: center; gap: 12px; }

.auth-status {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.auth-status--ok { background: var(--ok-bg);  color: var(--ok-fg); }
.auth-status--ng { background: var(--ng-bg);  color: var(--ng-fg); }

.select {
  font: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}

/* ====== container (横幅控えめ・縦余白多め) ====== */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* ====== card (薄色ブロック方式) ====== */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: none;
  overflow: hidden;
  padding: 48px 56px;
}
.card__head {
  text-align: center;
  margin-bottom: 40px;
}
.card__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .02em;
}
.card__title-bar {
  display: inline-block;
  width: 60px;
  height: 4px;
  background: var(--mf-blue);
  margin: 16px auto 0;
  border-radius: 2px;
}
.card__sub {
  margin: 16px 0 0;
  color: var(--text-sub);
  font-size: 14px;
}
.card__body { }

/* ====== hero (大きく中央) ====== */
.card--hero {
  background: linear-gradient(180deg, var(--mf-blue-soft) 0%, var(--surface) 100%);
  padding: 64px 56px;
}
.card--hero .card__head { margin-bottom: 32px; }
.hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.hero__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.hero__target {
  color: var(--text-mute);
  font-size: 12px;
  letter-spacing: .15em;
  font-weight: 600;
}
.hero__target-value {
  font-size: 44px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .02em;
  line-height: 1.2;
  margin: 8px 0 4px;
}
.hero__hint {
  color: var(--text-mute);
  font-size: 13px;
  margin-top: 12px;
}
.hero__right { margin-top: 24px; }

.hero__progress {
  width: 100%;
  max-width: 520px;
  padding: 20px 24px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-top: 12px;
}
.progress {
  height: 8px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--mf-blue-mid) 0%, var(--mf-blue) 100%);
  transition: width .3s ease;
  border-radius: 999px;
}
.progress__label {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 10px;
  font-weight: 600;
  text-align: center;
}

/* ====== buttons ====== */
.btn {
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  transition: all .15s;
  white-space: nowrap;
}
.btn:hover { background: var(--mf-blue-soft); border-color: var(--mf-blue-light); color: var(--mf-blue); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
  background: var(--mf-blue);
  color: #fff;
  border-color: var(--mf-blue);
  box-shadow: 0 4px 14px rgba(0, 70, 139, .25);
}
.btn--primary:hover {
  background: var(--mf-blue-mid);
  border-color: var(--mf-blue-mid);
  color: #fff;
}
.btn--primary:disabled:hover { background: var(--mf-blue); }

.btn--accent {
  background: var(--mf-orange);
  color: #fff;
  border-color: var(--mf-orange);
  box-shadow: 0 4px 14px rgba(245, 168, 0, .3);
}
.btn--accent:hover { background: var(--mf-orange-dark); border-color: var(--mf-orange-dark); color: #fff; }

.btn--xl {
  font-size: 17px;
  padding: 18px 56px;
  letter-spacing: .04em;
}

.btn--pill { padding: 10px 24px; }
.btn--sm   { padding: 6px 16px; font-size: 12px; }

.btn--ghost {
  background: transparent;
  color: var(--mf-blue);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--mf-blue-soft); border-color: transparent; }

/* ====== task grid (大きいカード・円アイコン・余白多い) ====== */
.task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
}
.task {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  transition: transform .2s, box-shadow .2s;
  border: 1px solid var(--border);
  position: relative;
}
.task:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--mf-blue-light);
}
.task__icon {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--mf-blue-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  margin-bottom: 8px;
}
.task:nth-child(7n+1) .task__icon { background: var(--mf-blue-bg); }
.task:nth-child(7n+2) .task__icon { background: var(--mf-green-soft); }
.task:nth-child(7n+3) .task__icon { background: var(--mf-orange-soft); }
.task:nth-child(7n+4) .task__icon { background: var(--mf-pink-soft); }
.task:nth-child(7n+5) .task__icon { background: var(--mf-purple-soft); }
.task:nth-child(7n+6) .task__icon { background: var(--mf-blue-bg); }
.task:nth-child(7n+7) .task__icon { background: var(--mf-orange-soft); }

.task__num {
  font-size: 10px;
  font-weight: 700;
  color: var(--mf-blue);
  letter-spacing: .15em;
  font-family: var(--font-num);
}
.task__name {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  margin-top: 4px;
}
.task__desc {
  color: var(--text-sub);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 4px;
  min-height: 38px;
}
.task__status { margin-top: 8px; }
.task__foot {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.task__foot .btn { width: 100%; max-width: 200px; }
.task__detail {
  font-size: 11px;
  color: var(--mf-blue);
  text-decoration: none;
  font-weight: 600;
}
.task__detail:hover { text-decoration: underline; }

/* ====== badge (pill大きめ) ====== */
.badge {
  display: inline-block;
  font-size: 11px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: .03em;
}
.badge--idle    { background: var(--idle-bg);    color: var(--idle-fg); }
.badge--running { background: var(--run-bg);     color: var(--run-fg); }
.badge--ok      { background: var(--ok-bg);      color: var(--ok-fg); }
.badge--warn    { background: var(--warn-bg);    color: var(--warn-fg); }
.badge--ng      { background: var(--ng-bg);      color: var(--ng-fg); }
.badge--manual  { background: var(--manual-bg);  color: var(--manual-fg); }

/* ====== check list (柔らかい行リスト) ====== */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.check {
  border-radius: var(--radius);
  padding: 24px 28px;
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--mf-blue-soft);
  transition: background .15s, transform .15s;
}
.check:hover { transform: translateX(4px); }
.check--info   { background: var(--mf-blue-soft); }
.check--warn   { background: var(--mf-orange-soft); }
.check--danger { background: var(--mf-pink-soft); }

.check__icon {
  font-size: 26px;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.check__body { flex: 1; min-width: 0; }
.check__title { font-weight: 700; font-size: 15px; color: var(--text); }
.check__sub   { color: var(--text-sub); font-size: 13px; margin-top: 4px; line-height: 1.6; }
.check input[type="number"] {
  font: inherit;
  font-family: var(--font-num);
  width: 160px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  text-align: right;
  font-size: 14px;
  background: var(--surface);
}
.check input[type="number"]:focus { outline: 2px solid var(--mf-blue-light); border-color: var(--mf-blue); }

/* ====== data buttons ====== */
.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.data-btn {
  font: inherit;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  transition: all .15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
}
.data-btn:hover {
  background: var(--mf-blue-bg);
  border-color: var(--mf-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.data-preview {
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.data-preview__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--mf-blue-soft);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 700;
  color: var(--mf-blue);
}
.data-preview__body {
  margin: 0;
  padding: 24px;
  max-height: 400px;
  overflow: auto;
  font-size: 12px;
  font-family: var(--font-num);
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--surface);
  color: var(--text);
}

/* ====== log table ====== */
.log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.log {
  display: grid;
  grid-template-columns: 170px 100px 1fr;
  gap: 20px;
  padding: 18px 24px;
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  align-items: center;
}
.log:hover { background: var(--mf-blue-soft); border-color: var(--mf-blue-light); }
.log__time {
  color: var(--text-sub);
  font-family: var(--font-num);
  font-size: 12px;
}
.log__status {
  font-weight: 700;
  font-size: 11px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  text-align: center;
}
.log__status--ok { background: var(--ok-bg); color: var(--ok-fg); }
.log__status--ng { background: var(--ng-bg); color: var(--ng-fg); }
.log__msg { color: var(--text); }

/* ====== footer ====== */
.footer {
  text-align: center;
  padding: 40px 20px 56px;
  color: var(--text-mute);
  font-size: 12px;
}

/* ====== responsive ====== */
@media (max-width: 720px) {
  .container { padding: 32px 16px; gap: 40px; }
  .card { padding: 32px 24px; }
  .card--hero { padding: 40px 24px; }
  .hero__target-value { font-size: 32px; }
  .btn--xl { padding: 16px 32px; font-size: 15px; }
  .task-grid { grid-template-columns: 1fr; gap: 16px; }
  .task { padding: 24px 20px 22px; }
  .data-grid { grid-template-columns: 1fr; }
  .topbar__inner { padding: 12px 16px; }
  .log { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .log__time { font-size: 11px; }
  .check { flex-direction: column; align-items: flex-start; padding: 20px; }
  .check input[type="number"] { width: 100%; }
  .card__title { font-size: 20px; }
}