.mfp-app {
  --mfp-bg: #f5f2ea;
  --mfp-paper: #fffef8;
  --mfp-ink: #1f2a2e;
  --mfp-accent-soft: #d6f5ee;
  --mfp-warn: #b45309;
  --mfp-line: #d2cec2;
  margin: 0;
  color: var(--mfp-ink);
  background:
    radial-gradient(circle at 10% 20%, #fff7d6 0, transparent 35%),
    radial-gradient(circle at 90% 10%, #d8f7ef 0, transparent 30%),
    linear-gradient(180deg, #f7f4ec 0%, #f1ede3 100%);
  padding: 24px;
  border-radius: 14px;
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mfp-app * {
  box-sizing: border-box;
}

.mfp-app .mfp-panel {
  background: var(--mfp-paper);
  border: 1px solid var(--mfp-line);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(35, 31, 27, 0.06);
  padding: 18px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.mfp-app .mfp-title {
  margin: 0 0 10px;
  font-family: "Avenir Next", "Hiragino Sans", sans-serif;
  letter-spacing: 0.02em;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.mfp-app h3 {
  margin: 0 0 10px;
}

.mfp-app .mfp-lead {
  margin: 0;
  color: #37474f;
  line-height: 1.55;
}

.mfp-app .mfp-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
}

.mfp-app label {
  font-size: 0.9rem;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}

.mfp-app select,
.mfp-app input,
.mfp-app button {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #b7c7c2;
  padding: 10px;
  font-size: 0.95rem;
  background: #fff;
}

.mfp-app button {
  cursor: pointer;
  border: none;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(120deg, #0f766e 0%, #115e59 100%);
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.25);
}

.mfp-app button:hover {
  transform: translateY(-1px);
}

.mfp-app .mfp-secondary {
  background: #eef7f4;
  color: #0f5a54;
  border: 1px solid #b8dbd2;
  box-shadow: none;
}

.mfp-app .mfp-action-row {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mfp-app .mfp-action-row button {
  width: auto;
  min-width: 168px;
}

.mfp-app .mfp-warn {
  color: var(--mfp-warn);
  font-size: 0.85rem;
  margin-top: 8px;
  font-weight: 700;
}

.mfp-app .mfp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 0.86rem;
}

.mfp-app .mfp-chip {
  background: var(--mfp-accent-soft);
  color: #0f4e47;
  border: 1px solid #9ed9cc;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
}

.mfp-app .mfp-chart-wrap {
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overscroll-behavior-x: contain;
}

.mfp-app [data-role="chart"] {
  display: block;
  width: 980px;
  min-width: 980px;
  max-width: none;
  height: auto;
}

.mfp-app .axis {
  stroke: #7d8e89;
  stroke-width: 1;
}

.mfp-app .bar {
  fill: #1f8f85;
  opacity: 0.9;
}

.mfp-app .bar.race {
  fill: #d9480f;
}

.mfp-app .bar.cutback {
  fill: #88bdb5;
}

.mfp-app .bar.taper {
  fill: #f59f00;
  opacity: 0.82;
}

.mfp-app .label {
  font-size: 11px;
  fill: #33504b;
}

.mfp-app table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.mfp-app th,
.mfp-app td {
  padding: 8px;
  border-bottom: 1px solid #e7e2d7;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  line-break: auto;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

.mfp-app th {
  background: #f6f3ec;
  position: sticky;
  top: 0;
}

.mfp-app .mfp-scroll-table {
  max-height: 430px;
  overflow: auto;
  overflow-x: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #ece6d8;
  border-radius: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.mfp-app .mfp-scroll-table table {
  width: 100%;
  min-width: 100%;
}

.mfp-app .mfp-table-plan { width: 1180px; min-width: 1180px; }
.mfp-app .mfp-table-coach { width: 980px; min-width: 980px; }
.mfp-app .mfp-table-strength { width: 1040px; min-width: 1040px; }
.mfp-app .mfp-table-fuel { width: 980px; min-width: 980px; }
.mfp-app .mfp-table-strategy { width: 920px; min-width: 920px; }
.mfp-app .mfp-table-raceday { width: 760px; min-width: 760px; }

.mfp-app .mfp-table-plan {
  table-layout: fixed;
}

.mfp-app .mfp-table-plan th:nth-child(1),
.mfp-app .mfp-table-plan td:nth-child(1) { width: 60px; }
.mfp-app .mfp-table-plan th:nth-child(2),
.mfp-app .mfp-table-plan td:nth-child(2) { width: 140px; }
.mfp-app .mfp-table-plan th:nth-child(3),
.mfp-app .mfp-table-plan td:nth-child(3) { width: 140px; }
.mfp-app .mfp-table-plan th:nth-child(4),
.mfp-app .mfp-table-plan td:nth-child(4) { width: 110px; }
.mfp-app .mfp-table-plan th:nth-child(5),
.mfp-app .mfp-table-plan td:nth-child(5) { width: 520px; }
.mfp-app .mfp-table-plan th:nth-child(6),
.mfp-app .mfp-table-plan td:nth-child(6) { width: 210px; }

.mfp-app .mfp-scroll-table .mfp-term-tooltip::after {
  display: none;
}

.mfp-app .mfp-menu-cell {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.mfp-app .mfp-menu-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.mfp-app .mfp-menu-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  line-height: 1.35;
}

.mfp-app .mfp-table-plan .mfp-menu-line > span {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mfp-app .mfp-menu-tag {
  font-size: 0.75rem;
  font-weight: 700;
  background: #e4f3ef;
  color: #0f5a54;
  border: 1px solid #b8dbd2;
  border-radius: 999px;
  padding: 2px 8px;
}

.mfp-app .mfp-menu-km {
  font-weight: 700;
  color: #17453f;
}

.mfp-app .mfp-menu-footer {
  margin-top: 7px;
  font-size: 0.8rem;
  color: #365853;
}

.mfp-app .mfp-term-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.mfp-app .mfp-term {
  border: 1px solid #e6dfd1;
  border-radius: 10px;
  padding: 10px;
  background: #fffdf6;
}

.mfp-app .mfp-term strong {
  display: block;
  margin-bottom: 4px;
  color: #24453f;
}

.mfp-app .mfp-rule-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #304945;
}

.mfp-app .mfp-note {
  font-size: 0.85rem;
  color: #425a56;
  line-height: 1.6;
  margin: 0;
}

.mfp-app .mfp-term-tooltip {
  position: relative;
  border-bottom: 1px dashed #6ca09a;
  cursor: help;
}

.mfp-app .mfp-term-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: 130%;
  width: 200px;
  background: #143f3a;
  color: #fff;
  border-radius: 8px;
  padding: 8px;
  font-size: 0.74rem;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 4;
}

.mfp-app .mfp-term-tooltip:hover::after,
.mfp-app .mfp-term-tooltip:focus-visible::after {
  opacity: 1;
}

@media print {
  .mfp-app {
    background: #fff;
    padding: 0;
  }

  .mfp-app .mfp-panel {
    box-shadow: none;
    border: none;
    page-break-inside: avoid;
  }

  .mfp-app .mfp-scroll-table {
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
  }

  .mfp-app th {
    position: static !important;
  }

  .mfp-app button,
  .mfp-app input,
  .mfp-app select,
  .mfp-app [data-role="warning"] {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .mfp-app {
    padding: 12px;
  }

  .mfp-app .mfp-grid {
    grid-template-columns: 1fr;
  }

  .mfp-app .mfp-panel {
    padding: 14px;
  }

  .mfp-app .mfp-meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mfp-app .mfp-chip {
    width: 100%;
  }

  .mfp-app .mfp-scroll-table table {
    font-size: 0.82rem;
  }

  .mfp-app [data-role="chart"] {
    width: 760px;
    min-width: 760px;
  }

  .mfp-app .mfp-table-plan { width: 980px; min-width: 980px; }
  .mfp-app .mfp-table-coach { width: 900px; min-width: 900px; }
  .mfp-app .mfp-table-strength { width: 900px; min-width: 900px; }
  .mfp-app .mfp-table-fuel { width: 900px; min-width: 900px; }
  .mfp-app .mfp-table-strategy { width: 860px; min-width: 860px; }
  .mfp-app .mfp-table-raceday { width: 720px; min-width: 720px; }

  .mfp-app .label {
    font-size: 10px;
  }

  .mfp-app .mfp-action-row button {
    width: 100%;
    min-width: 0;
  }

  .mfp-app .mfp-term-tooltip::after {
    display: none;
  }
}