/* =============================================================================
   medaka.css — tools/medaka-fuka/ 専用スタイル
   このファイルは medaka-fuka ページ専用。共有スタイルは ../../assets/css/site.css。
   前半: 旧デザインからそのまま移設した .medaka-explainer / .medaka-page 系ルール
   (発生ステージ図・水温メーター・タイムライン等。viz.js の出力に対応するため維持)。
   後半: 2026-07 デザイン刷新で追加した新UI(ヒーロー・入力カード・結果カード・
   記録カード・クイック記録・孵化当日カード等)のスタイル。
   ============================================================================= */

/* ==== medaka explainer ==== */
/* tools/medaka-fuka/ の「積算温度とは」解説セクションだけに適用するゆったりめの行間・余白。
   グローバルなp/bodyの行間(1.75)には手を触れず、.medaka-explainer配下だけ広げる。 */
.medaka-explainer h3 { margin: 2.2rem 0 .5rem; }
.medaka-explainer p { line-height: 1.9; margin: 1rem 0; }

/* 解説図（積算温度の積み上げ図・水温別の日数比較図）を囲むカード。
   .formula/.notice と同じsurface-2+borderのトーンに合わせている */
.medaka-explainer .mf-figure {
  margin: 1.3rem 0 1.6rem;
  padding: 1.1rem 1.1rem .9rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.medaka-explainer .mf-figure svg {
  width: 100%;
  height: auto;
}
.medaka-explainer .mf-figure figcaption {
  margin-top: .7rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* 図内の要素はサイトのテーマ色（--accent）・テキストトークンに追従させ、ダークモードでも
   自動的に配色が切り替わるようにする（固定色の直書きはしない） */
.medaka-explainer .mf-bar { fill: var(--accent); }
.medaka-explainer .mf-axis { stroke: var(--border); stroke-width: 1; }
.medaka-explainer .mf-threshold {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  opacity: .75;
}
.medaka-explainer .mf-label {
  fill: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
}
.medaka-explainer .mf-value {
  fill: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
}
.medaka-explainer .mf-value-strong {
  fill: var(--text);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 800;
}
@media (max-width: 559px) {
  .medaka-explainer .mf-figure { padding: .9rem .8rem .8rem; }
}

/* ==== medaka hatch viz ==== */
.medaka-page.temp-cool {
  --mf-water-fill: var(--accent-weak);
  --mf-water-wave: var(--accent);
}
.medaka-page.temp-normal {
  --mf-water-fill: var(--accent-weak-2);
  --mf-water-wave: var(--accent);
}
.medaka-page.temp-warm {
  --mf-water-fill: var(--warn-bg);
  --mf-water-wave: var(--warn-text);
}
.medaka-page .medaka-hero {
  position: relative;
  overflow: hidden;
  padding: .15rem 0 .35rem;
}
.medaka-page .medaka-hero > :not(.medaka-hero-decor) {
  position: relative;
  z-index: 1;
}
.medaka-page .medaka-hero-decor {
  position: absolute;
  inset: 0 -2rem;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.medaka-page .temp-preview {
  margin-top: .8rem;
}
.medaka-page .temp-preview-card {
  padding: .85rem .95rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.medaka-page .temp-preview-card p {
  margin: 0 0 .7rem;
}
.medaka-page .temp-preview-card p:last-child {
  margin-bottom: 0;
}
.medaka-page .medaka-result-actions {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.medaka-page .medaka-actions-title {
  margin: 0 0 .8rem;
  color: var(--text);
  font-weight: 800;
}
.medaka-page .medaka-action-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
}
.medaka-page .medaka-action-item {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.medaka-page .medaka-action-item.is-primary {
  background: var(--accent-weak);
  border-color: var(--accent-border);
}
.medaka-page .medaka-action-item button {
  width: 100%;
  min-width: 0;
  white-space: normal;
  line-height: 1.45;
  text-align: center;
}
.medaka-page .medaka-action-item p {
  margin: 0;
  color: var(--text-secondary);
}
.medaka-page .medaka-records {
  margin-top: 2rem;
}
.medaka-page .clutch-card-list {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.medaka-page .clutch-card {
  scroll-margin-top: 1rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.medaka-page .clutch-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1rem;
  align-items: flex-start;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
}
.medaka-page .clutch-card-head h3 {
  margin: 0 0 .25rem;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.45;
}
.medaka-page .clutch-card-label {
  margin: 0 0 .15rem;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.medaka-page .clutch-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .45rem;
}
.medaka-page .clutch-log-panel {
  display: grid;
  gap: .85rem;
  margin-top: .9rem;
}
.medaka-page .clutch-log-form,
.medaka-page .clutch-card-section {
  padding: .85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.medaka-page .clutch-log-form h4,
.medaka-page .clutch-card-section h4 {
  margin: 0 0 .5rem;
  color: var(--text);
  font-size: .95rem;
}
.medaka-page .clutch-log-form p,
.medaka-page .clutch-card-section p {
  margin-top: 0;
}
.medaka-page .clutch-log-form p:last-child,
.medaka-page .clutch-card-section p:last-child {
  margin-bottom: 0;
}
.medaka-page .clutch-log-list {
  display: grid;
  gap: .45rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.medaka-page .clutch-log-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .55rem;
  padding: .45rem .55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  white-space: normal;
}
.medaka-page .clutch-log-form .field-inline {
  align-items: stretch;
  gap: .55rem;
}
.medaka-page .clutch-log-form .field-inline button {
  white-space: normal;
  text-align: center;
}
.medaka-page .clutch-progress-body {
  display: grid;
  grid-template-columns: minmax(86px, 110px) minmax(0, 1fr);
  gap: .85rem;
  align-items: center;
}
.medaka-page .clutch-progress-panel .water-meter-svg {
  width: min(100%, 104px);
}
.medaka-page .clutch-progress-copy .result-sub {
  margin-bottom: .35rem;
}
.medaka-page .clutch-empty-log,
.medaka-page .clutch-progress-panel.is-empty {
  background: color-mix(in srgb, var(--surface-2) 82%, var(--accent-weak) 18%);
}
.medaka-page .hatch-viz-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.medaka-page .hatch-viz-panel.is-compact {
  margin: .8rem 0;
  padding: .85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.medaka-page .hatch-viz-grid {
  display: grid;
  grid-template-columns: minmax(116px, 168px) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}
.medaka-page .hatch-viz-panel.is-compact .hatch-viz-grid {
  grid-template-columns: minmax(104px, 138px) minmax(0, 1fr);
  gap: .8rem;
}
.medaka-page .hatch-viz-note {
  margin: .75rem 0 0;
  color: var(--text-muted);
}
.medaka-page .hatch-stage-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .55rem;
  margin-bottom: .75rem;
  color: var(--text-secondary);
  font-size: .86rem;
}
.medaka-page .hatch-stage-summary-label {
  color: var(--text-muted);
  font-size: .76rem;
  font-weight: 700;
}
.medaka-page .hatch-stage-summary b {
  color: var(--accent);
}
.medaka-page .hatch-stage {
  margin: 0 0 1rem;
  text-align: center;
}
.medaka-page .hatch-stage-svg {
  display: block;
  width: min(100%, 220px);
  height: auto;
  margin: 0 auto;
}
.medaka-page .hatch-stage.is-compact .hatch-stage-svg {
  width: min(100%, 164px);
}
.medaka-page .hatch-chorion {
  fill: color-mix(in srgb, var(--surface) 78%, var(--accent-weak) 22%);
  stroke: var(--border-strong);
  stroke-width: 3;
}
.medaka-page .hatch-thread,
.medaka-page .hatch-shell-gloss {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .82;
}
.medaka-page .hatch-shell-gloss {
  stroke: var(--surface);
  stroke-width: 5;
  opacity: .8;
}
.medaka-page .hatch-stage-part {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.medaka-page .hatch-stage-svg[data-stage="fertilized"] [data-stage-key="fertilized"],
.medaka-page .hatch-stage-svg[data-stage="embryo"] [data-stage-key="embryo"],
.medaka-page .hatch-stage-svg[data-stage="eyes"] [data-stage-key="eyes"],
.medaka-page .hatch-stage-svg[data-stage="heartbeat"] [data-stage-key="heartbeat"],
.medaka-page .hatch-stage-svg[data-stage="pigment"] [data-stage-key="pigment"],
.medaka-page .hatch-stage-svg[data-stage="prehatch"] [data-stage-key="prehatch"],
.medaka-page .hatch-stage-svg[data-stage="hatched"] [data-stage-key="hatched"] {
  opacity: 1;
  visibility: visible;
}
.medaka-page .hatch-oil {
  fill: var(--warn-bg);
  stroke: var(--warn-border);
  stroke-width: 2;
  opacity: .88;
}
.medaka-page .hatch-oil-small {
  opacity: .7;
}
.medaka-page .hatch-oil-late {
  opacity: .62;
}
.medaka-page .hatch-cell,
.medaka-page .hatch-yolk {
  fill: var(--accent-weak-2);
  stroke: var(--accent-border);
  stroke-width: 2;
}
.medaka-page .hatch-cell-light {
  fill: var(--surface);
  opacity: .68;
}
.medaka-page .hatch-node-dot,
.medaka-page .hatch-burst {
  fill: var(--accent);
}
.medaka-page .hatch-embryo,
.medaka-page .hatch-embryo-line,
.medaka-page .hatch-somites,
.medaka-page .hatch-vein,
.medaka-page .hatch-fry-spine {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.medaka-page .hatch-somites,
.medaka-page .hatch-vein {
  stroke-width: 3;
  opacity: .76;
}
.medaka-page .hatch-embryo-fill,
.medaka-page .hatch-fry-inside,
.medaka-page .hatch-fry-large {
  fill: var(--accent-weak-2);
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linejoin: round;
}
.medaka-page .hatch-eye-ring {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 3;
}
.medaka-page .hatch-eye-dark,
.medaka-page .hatch-pigment {
  fill: var(--text);
}
.medaka-page .hatch-heart {
  fill: var(--danger-bg);
  stroke: var(--danger-text);
  stroke-width: 2;
  transform-origin: center;
  transform-box: fill-box;
  animation: mf-pulse 1.2s var(--ease) infinite;
}
.medaka-page .hatch-tail-fin {
  fill: var(--accent-weak);
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}
.medaka-page .hatch-crack {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.medaka-page .hatch-stage-cap {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin-top: .45rem;
}
.medaka-page .hatch-stage-name {
  color: var(--accent);
  font-weight: 700;
}
.medaka-page .hatch-stage-desc {
  color: var(--text-secondary);
}
.medaka-page .hatch-stage-note {
  max-width: 42rem;
  margin: .45rem auto 0;
  color: var(--text-muted);
}
.medaka-page .water-meter {
  text-align: center;
}
.medaka-page .water-meter-svg {
  display: block;
  width: min(100%, 150px);
  height: auto;
  margin: 0 auto;
}
.medaka-page .water-fill {
  fill: var(--mf-water-fill, var(--accent-weak-2));
  opacity: .9;
  transition: y .6s var(--ease), height .6s var(--ease);
}
.medaka-page .water-wave {
  fill: var(--mf-water-wave, var(--accent));
  opacity: .56;
  transform-box: fill-box;
  animation: mf-wave 4s linear infinite;
}
.medaka-page .water-bubbles circle {
  fill: var(--surface);
  opacity: .68;
  animation: mf-bubble-rise 3.4s ease-in infinite;
}
.medaka-page .water-bubbles circle:nth-child(2) { animation-delay: .7s; }
.medaka-page .water-bubbles circle:nth-child(3) { animation-delay: 1.3s; }
.medaka-page .egg-outline {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 2.4;
}
.medaka-page .water-meter.is-complete .egg-outline {
  stroke: var(--ok-border);
}
.medaka-page .water-meter-label {
  margin: .35rem 0 0;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.medaka-page .water-meter-label b {
  color: var(--text);
}
.medaka-page .water-meter-note {
  margin: .15rem 0 0;
  color: var(--text-muted);
}
.medaka-page .hatch-timeline {
  min-width: 0;
}
.medaka-page .hatch-track {
  position: relative;
  height: 14px;
  margin: 2.05rem 2.3rem 2.45rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.medaka-page .hatch-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent-weak-2), var(--accent));
  transition: width .55s var(--ease);
}
.medaka-page .hatch-node {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .08rem;
  min-width: 3.7rem;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.25;
  white-space: nowrap;
}
.medaka-page .hatch-node b {
  color: var(--text);
  font-size: .76rem;
}
.medaka-page .hatch-node time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.medaka-page .hatch-start {
  left: 0;
  top: 1.15rem;
  transform: translateX(-50%);
}
.medaka-page .hatch-goal {
  right: 0;
  top: 1.15rem;
  transform: translateX(50%);
}
.medaka-page .hatch-today {
  top: -2rem;
  transform: translateX(-50%);
}
.medaka-page .hatch-today::after {
  content: "";
  width: 1px;
  height: 1.9rem;
  margin-top: .15rem;
  background: var(--border-strong);
}
.medaka-page .hatch-fry {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 42px;
  height: 18px;
  transform: translate(-50%, -50%);
  animation: mf-swim 2.2s var(--ease) infinite;
}
.medaka-page .hatch-fry-svg {
  width: 42px;
  height: 18px;
  filter: drop-shadow(0 1px 1px rgba(16, 34, 51, .18));
}
.medaka-page .hatch-fry-body,
.medaka-page .hatch-fry-tail {
  fill: var(--accent);
}
.medaka-page .hatch-fry-eye {
  fill: var(--surface);
}
.medaka-page .hatch-fry-fin {
  stroke: var(--accent-weak);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.medaka-page .hatch-timeline-label {
  margin: .35rem 0 0;
  color: var(--text-secondary);
  text-align: center;
}
.medaka-page .hatch-timeline.is-hatched .hatch-timeline-label {
  color: var(--ok-text);
  font-weight: 700;
}
.medaka-page .hatch-pop {
  display: none;
  position: absolute;
  right: -1rem;
  top: 50%;
  z-index: 4;
  width: 3.6rem;
  height: 3.6rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.medaka-page .hatch-timeline.is-new-hatch .hatch-pop {
  display: block;
}
.medaka-page .hatch-pop i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--ok-border);
  opacity: 0;
  animation: mf-hatch-pop 1.5s var(--ease) both;
}
.medaka-page .hatch-pop i:nth-child(1) { --tx: -1.4rem; --ty: -1.6rem; }
.medaka-page .hatch-pop i:nth-child(2) { --tx: 1.25rem; --ty: -1.25rem; animation-delay: .08s; }
.medaka-page .hatch-pop i:nth-child(3) { --tx: -1rem; --ty: 1.15rem; animation-delay: .16s; }
.medaka-page .hatch-pop i:nth-child(4) { --tx: 1.4rem; --ty: .9rem; animation-delay: .24s; }
.medaka-page .hatch-timeline.is-new-hatch .hatch-fry {
  animation: mf-hatch-swim 1.5s var(--ease) both;
}
.medaka-page .medaka-share-hint {
  margin-top: -.35rem;
}
.medaka-page .hatch-viz-panel.is-compact .hatch-track {
  margin-left: 1.85rem;
  margin-right: 1.85rem;
}
.medaka-page .hatch-viz-panel.is-compact .hatch-node {
  min-width: 3.2rem;
  font-size: .68rem;
}
.medaka-page .hatch-viz-panel.is-compact .hatch-fry,
.medaka-page .hatch-viz-panel.is-compact .hatch-fry-svg {
  width: 36px;
  height: 16px;
}
@keyframes mf-wave {
  from { transform: translateX(0); }
  to   { transform: translateX(60px); }
}
@keyframes mf-bubble-rise {
  0%   { transform: translateY(0); opacity: 0; }
  18%  { opacity: .65; }
  100% { transform: translateY(-38px); opacity: 0; }
}
@keyframes mf-swim {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 3px)); }
}
@keyframes mf-pulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.24); opacity: 1; }
}
@keyframes mf-hatch-pop {
  from { transform: translate(-50%, -50%) scale(.5); opacity: .9; }
  to   { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.1); opacity: 0; }
}
@keyframes mf-hatch-swim {
  0%   { transform: translate(-50%, -50%) scale(1); }
  45%  { transform: translate(-18%, calc(-50% - 6px)) scale(1.05); }
  100% { transform: translate(10%, -50%) scale(1); }
}
@media (max-width: 640px) {
  .medaka-page .hatch-viz-grid,
  .medaka-page .hatch-viz-panel.is-compact .hatch-viz-grid {
    grid-template-columns: 1fr;
  }
  .medaka-page .medaka-result-actions,
  .medaka-page .clutch-card {
    padding: .9rem;
  }
  .medaka-page .clutch-card-head > button {
    width: 100%;
  }
  .medaka-page .clutch-log-form .field-inline > input,
  .medaka-page .clutch-log-form .field-inline > button {
    flex: 1 1 100%;
    max-width: none;
  }
  .medaka-page .clutch-progress-body {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .medaka-page .water-meter-svg {
    width: 132px;
  }
  .medaka-page .hatch-track {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .medaka-page .water-wave,
  .medaka-page .water-bubbles circle,
  .medaka-page .hatch-fry,
  .medaka-page .hatch-heart,
  .medaka-page .hatch-pop i,
  .medaka-page .hatch-timeline.is-new-hatch .hatch-fry {
    animation: none;
  }
  .medaka-page .hatch-pop {
    display: none;
  }
  .medaka-page .water-fill,
  .medaka-page .hatch-fill,
  .medaka-page .hatch-stage-part {
    transition: none;
  }
}

/* =============================================================================
   medaka.css 追記 — デザイン刷新（2026-07 リニューアル）
   上記(このファイル前半)は旧デザインのCSSをsite.cssからそのまま移設したもの。
   ここから下が新しいUI（ヒーロー・入力カード・結果カード・記録カード等）のスタイル。
   すべて .medaka-page 配下にスコープ。共有クラス(.tool-form/.field/.result-box/
   .formula/.notice/.badge/button 等)の基本ルールはsite.css側を変更せず、
   このページ内だけの上書き（子孫セレクタでの再指定）にとどめる。
   ============================================================================= */

/* ---------- デザイントークン ---------- */
.medaka-page {
  --mf-teal: #0b7f95;
  --mf-teal-hover: #095f70;
  --mf-navy: #123c49;
  --mf-orange: #f6a63c;
  --mf-orange-strong: #e0821f;
  --mf-aqua: #9fdbe4;
  --mf-aqua-2: #c9ecef;
  --mf-page-bg: #f4fbfc;
  --mf-sub: #4c6b75;
  --mf-sub-2: #62737a; /* AA 4.5:1以上（白地4.94:1・ページ地#f4fbfc上4.71:1で実測確認済み） */
  --mf-pill-bg: #e6f6f7;
  --mf-card-bg: #ffffff;
  --mf-card-border: #cfe6ea;
  --mf-card-shadow: 0 10px 30px rgba(12, 90, 110, .12);
  --mf-card-shadow-sm: 0 4px 14px rgba(12, 90, 110, .08);
  --mf-warn-bg: #fff0d9;
  --mf-warn-text: #9a5208; /* AA 4.5:1以上（背景#fff0d9上で5.22:1、実測確認済み） */
  --mf-ok: #2e9e6b;
  --mf-track-bg: #dff0f2;
  --mf-fill-start: #7fcac2;
  --mf-fill-end: #1795a8;
  --mf-hatch-border: #f6c568;
  --mf-hatch-shadow: 0 12px 34px rgba(224, 130, 31, .18);
  --mf-slider-band-border: rgba(11, 127, 149, .55);
  --mf-icon-bg: #fdf6ea;
  --mf-icon-bg-active: #e6f6f7;
  /* --mf-teal はダークモードで暗背景用の明るい水色に変わるため、ボタン文字色は
     このトークンで反転させる（白固定だとダークモードでコントラスト不足になるため）。
     --mf-orange-contrast はライト/ダーク共通: どちらのオレンジも中〜明るいトーンなので
     濃色文字のままでよい。 */
  --mf-teal-contrast: #ffffff;
  --mf-orange-contrast: #2a1500;
  background: var(--mf-page-bg);
}
/* ---------- ヒーロー ---------- */
/* ヘッダー/フッターと同様、ヒーローの水色帯はビューポート幅いっぱいに全面表示し、
   中身(.medaka-hero-inner)だけを max-width:1100 に収める（モックのフレーム構造） */
.medaka-page .medaka-hero {
  position: relative;
  overflow: hidden;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 18px 0 40px;
  background: linear-gradient(180deg, var(--mf-aqua) 0%, var(--mf-aqua-2) 62%, var(--mf-page-bg) 100%);
}
@media (min-width: 1024px) {
  .medaka-page .medaka-hero { padding: 28px 0 56px; }
}
.medaka-page .medaka-hero > :not(.medaka-hero-decor) {
  position: relative;
  z-index: 1;
}
.medaka-page .medaka-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
@media (min-width: 1024px) {
  .medaka-page .medaka-hero-inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 40px;
  }
}
.medaka-page .medaka-hero-text { display: flex; flex-direction: column; gap: 8px; }
.medaka-page .medaka-breadcrumb {
  margin: 0;
  font-size: 11px;
  color: #2a6274;
  opacity: 1;
}
@media (min-width: 1024px) { .medaka-page .medaka-breadcrumb { font-size: 11px; } }
.medaka-page .medaka-hero h1 {
  color: var(--mf-navy);
  margin: 0;
  font-size: 25px;
  line-height: 1.3;
}
.medaka-page .medaka-hero-title-sub {
  display: block;
  margin-top: .18rem;
  color: #2a6274;
  font-size: .58em;
  font-weight: 700;
  letter-spacing: .035em;
}
@media (min-width: 1024px) {
  .medaka-page .medaka-hero h1 { font-size: 34px; line-height: 1.25; }
  .medaka-page .medaka-hero-title-sub { font-size: .52em; }
}
.medaka-page .medaka-hero .lead {
  max-width: 34rem;
  margin: 0;
  color: #2a6274;
  opacity: 1;
  font-size: 12.5px;
  line-height: 1.7;
}
@media (min-width: 1024px) { .medaka-page .medaka-hero .lead { font-size: 14px; } }
.medaka-page .medaka-hero .lead strong { color: var(--mf-navy); }
.medaka-page .medaka-privacy-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: 5px 12px;
  background: rgba(255, 255, 255, .78);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--mf-teal);
}
@media (min-width: 1024px) { .medaka-page .medaka-privacy-pill { padding: 7px 16px; font-size: 12px; } }
.medaka-page .medaka-privacy-pill svg { flex: none; }

/* 水面の波紋（同心円ペアが拡大しながらフェードアウト） */
.medaka-page .medaka-ripples { position: absolute; inset: 0; width: 100%; height: 100%; }
.medaka-page .medaka-ripple {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  animation: mf-ripple 7s var(--ease) infinite;
}
.medaka-page .medaka-ripple ellipse { fill: none; stroke: #ffffff; stroke-width: 1.5; }
.medaka-page .medaka-ripple-1 { animation-delay: 0s; }
.medaka-page .medaka-ripple-2 { animation-delay: 2.3s; }
.medaka-page .medaka-ripple-3 { animation-delay: 4.6s; }
@keyframes mf-ripple {
  0%   { transform: scale(.7); opacity: 0; }
  14%  { opacity: .55; }
  70%  { opacity: .1; }
  100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .medaka-page .medaka-ripple { animation: none; opacity: .3; transform: scale(1); }
}

/* ---------- 全体フロー ---------- */
/* ページ本文コンテナ。ヘッダー/ヒーロー/フッターは全面帯、本文だけ max-width:1100 に収める */
.medaka-page main.medaka-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 1rem;
}
@media (min-width: 1024px) {
  .medaka-page main.medaka-main { padding: 0 40px 2rem; }
}
.medaka-page .medaka-flow {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 1;
  margin-top: -26px; /* ヒーロー下端へカードを重ねる（モック: モバイル入力カード -26px） */
}
@media (min-width: 1024px) {
  .medaka-page .medaka-flow { margin-top: -36px; } /* モック: デスクトップグリッド -36px */
}

.medaka-page .medaka-grid { display: flex; flex-direction: column; gap: 1rem; }

/* ---------- 入力カード ---------- */
.medaka-page .medaka-input-card {
  background: var(--mf-card-bg);
  border: none;
  border-radius: 20px;
  box-shadow: var(--mf-card-shadow);
  overflow: hidden;
}
.medaka-page .medaka-calc-summary {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 700;
  color: var(--mf-teal);
  list-style: none;
}
.medaka-page .medaka-calc-summary::-webkit-details-marker,
.medaka-page .medaka-calc-summary::marker { display: none; content: ""; }
.medaka-page .medaka-flow[data-has-clutches="1"] .medaka-calc-summary { display: flex; }
.medaka-page .medaka-summary-arrow { transition: transform .2s var(--ease); color: var(--mf-sub-2); }
.medaka-page .medaka-input-card[open] .medaka-summary-arrow { transform: rotate(180deg); }

.medaka-page .medaka-calc-form.tool-form {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
  padding: 1.1rem 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.medaka-page .medaka-flow[data-has-clutches="1"] .medaka-calc-summary + .medaka-calc-form.tool-form {
  padding-top: 0;
}

.medaka-page .medaka-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.medaka-page .medaka-field-head label { margin: 0; }
.medaka-page .medaka-today-pill,
.medaka-page .medaka-hint-pill {
  font-size: .72rem;
  font-weight: 700;
  color: var(--mf-teal);
  background: var(--mf-pill-bg);
  border-radius: var(--radius-pill);
  padding: .2rem .65rem;
  white-space: nowrap;
}
.medaka-page .medaka-hint-pill { color: var(--mf-sub-2); background: transparent; font-weight: 500; padding-right: 0; }

.medaka-page .medaka-calc-form input[type="date"] {
  max-width: none;
  border: 1.5px solid var(--mf-card-border);
  border-radius: 14px;
  padding: .8rem .9rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mf-navy);
}

/* 水温の大きな数値表示 */
.medaka-page .medaka-temp-display {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  margin-bottom: .5rem;
}
.medaka-page .medaka-temp-display output {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--mf-teal);
  font-variant-numeric: tabular-nums;
}
.medaka-page .medaka-temp-unit { font-size: 1.1rem; font-weight: 700; color: var(--mf-teal); }

/* 水温スライダー（適温帯オーバーレイ付きグラデーション） */
.medaka-page .medaka-slider-wrap {
  position: relative;
  height: 2rem;
  display: flex;
  align-items: center;
}
.medaka-page .medaka-slider-wrap input[type="range"] {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}
.medaka-page .medaka-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #6fb6d6 0%, #7fcac2 40%, #ffd274 72%, #f2925e 100%);
}
.medaka-page .medaka-slider-wrap input[type="range"]::-moz-range-track {
  height: 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #6fb6d6 0%, #7fcac2 40%, #ffd274 72%, #f2925e 100%);
}
.medaka-page .medaka-slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--mf-teal);
  box-shadow: 0 3px 8px rgba(12, 60, 80, .3);
}
.medaka-page .medaka-slider-wrap input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--mf-teal);
  box-shadow: 0 3px 8px rgba(12, 60, 80, .3);
}
/* 適温帯(24〜28℃)の枠。15〜32℃レンジ中の位置を%で固定計算 */
.medaka-page .medaka-slider-band {
  position: absolute;
  left: calc((24 - 15) / (32 - 15) * 100%);
  width: calc((28 - 24) / (32 - 15) * 100%);
  top: 2px;
  bottom: 2px;
  border: 2px solid var(--mf-slider-band-border);
  border-radius: var(--radius-pill);
  z-index: 1;
  pointer-events: none;
}
.medaka-page .medaka-slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--mf-sub-2);
  margin-top: .2rem;
}
.medaka-page .medaka-slider-scale-mid { color: var(--mf-teal); font-weight: 700; }

.medaka-page .medaka-temp-num-input {
  margin-top: .6rem;
  max-width: 8rem;
  min-height: 40px;
  font-weight: 700;
  color: var(--mf-navy);
}

.medaka-page .temp-preview-card {
  background: #e8f7f5;
  border: none;
  border-radius: 12px;
}
.medaka-page .temp-preview-card p { color: var(--mf-navy); }
.medaka-page .temp-preview-card b { color: var(--mf-teal); font-size: 1.05em; }

/* 自動入力ピルボタン */
.medaka-page .medaka-autofill-label {
  display: block;
  margin-bottom: .55rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--mf-sub);
}
.medaka-page .medaka-autofill-row {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}
.medaka-page .medaka-pill-btn,
.medaka-page .medaka-pill-select-wrap {
  flex: 1 1 9rem;
}
.medaka-page .medaka-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 42px;
  padding: .5rem .8rem;
  border: 1.5px solid var(--mf-card-border);
  border-radius: var(--radius-pill);
  background: #f2fafb;
  color: var(--mf-teal);
  font-size: .82rem;
  font-weight: 700;
  box-shadow: none;
}
.medaka-page .medaka-pill-btn:hover { background: var(--mf-pill-bg); color: var(--mf-teal); }
.medaka-page .medaka-pill-select-wrap select {
  width: 100%;
  max-width: none;
  min-height: 42px;
  border: 1.5px solid var(--mf-card-border);
  border-radius: var(--radius-pill);
  background-color: #f2fafb;
  color: var(--mf-teal);
  font-size: .82rem;
  font-weight: 700;
  padding: .5rem 2rem .5rem 1rem;
  text-align: center;
  text-align-last: center;
}
.medaka-page .medaka-cta-btn {
  width: 100%;
  min-height: 54px;
  border-radius: var(--radius-pill);
  background: var(--mf-teal);
  color: var(--mf-teal-contrast);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(11, 127, 149, .35);
}
.medaka-page .medaka-cta-btn:hover { background: var(--mf-teal-hover); }

/* ---------- 結果カード ---------- */
.medaka-page .medaka-result-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.medaka-page .medaka-result-card.result-box {
  background: var(--mf-card-bg);
  border: none;
  border-left: none;
  border-radius: 20px;
  box-shadow: var(--mf-card-shadow);
  padding: 1.3rem 1.2rem;
}
.medaka-page .medaka-result-head {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  text-align: center;
}
@media (min-width: 1024px) {
  .medaka-page .medaka-result-head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    text-align: left;
  }
}
.medaka-page .medaka-result-label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--mf-teal);
}
.medaka-page .result-big.medaka-result-date {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  font-weight: 900;
  color: var(--mf-navy);
  margin: .15rem 0;
}
.medaka-page .medaka-result-date .medaka-result-weekday {
  font-size: .55em;
  font-weight: 700;
  color: var(--mf-sub);
  margin-left: .2em;
}
.medaka-page .result-sub.medaka-countdown-text {
  font-size: .95rem;
  font-weight: 700;
  color: var(--mf-orange-strong);
}
.medaka-page .formula.medaka-formula-box {
  background: #f0f8f7;
  border: none;
  color: var(--mf-sub);
  font-size: .82rem;
  border-radius: 10px;
  margin: .9rem 0 0;
}
.medaka-page .formula.medaka-formula-box strong { color: var(--mf-navy); }

/* タイムライン（renderTimeline()を再利用しつつ配色をフラットな刷新デザインへ上書き） */
.medaka-page #medaka-timeline-panel { margin-top: 1.1rem; }
.medaka-page #medaka-timeline-panel .hatch-timeline-label { display: none; }
.medaka-page #medaka-timeline-panel .hatch-track {
  height: 12px;
  margin: 1.9rem 1.1rem 1.7rem;
  background: var(--mf-track-bg);
  border: none;
}
.medaka-page #medaka-timeline-panel .hatch-fill {
  background: linear-gradient(90deg, var(--mf-fill-start), var(--mf-fill-end));
}
.medaka-page #medaka-timeline-panel .hatch-node b { color: var(--mf-navy); }
.medaka-page #medaka-timeline-panel .hatch-goal b,
.medaka-page #medaka-timeline-panel .hatch-goal time { color: var(--mf-orange-strong); }
.medaka-page #medaka-timeline-panel .hatch-fry-body,
.medaka-page #medaka-timeline-panel .hatch-fry-tail { fill: var(--mf-teal); }

/* 5丸アイコンの発生ステージ行 */
.medaka-page .medaka-stage-card,
.medaka-page .medaka-temp-card {
  background: var(--mf-card-bg);
  border-radius: 20px;
  box-shadow: var(--mf-card-shadow-sm);
  padding: 1rem 1.1rem;
}
.medaka-page .medaka-stage-head,
.medaka-page .medaka-temp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .7rem;
}
.medaka-page .medaka-stage-head h3,
.medaka-page .medaka-temp-card-head h3 {
  margin: 0;
  font-size: .92rem;
  color: var(--mf-navy);
}
.medaka-page .medaka-stage-badge {
  font-size: .72rem;
  font-weight: 700;
  color: var(--mf-teal);
  background: var(--mf-pill-bg);
  border-radius: var(--radius-pill);
  padding: .2rem .65rem;
  white-space: nowrap;
}
.medaka-page .medaka-stage-row {
  display: flex;
  justify-content: space-between;
  gap: .3rem;
}
.medaka-page .medaka-stage-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  flex: 1 1 0;
  min-width: 0;
}
.medaka-page .medaka-stage-icon-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--mf-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.medaka-page .medaka-stage-icon-circle svg { width: 34px; height: 34px; }
.medaka-page .medaka-stage-icon-label {
  font-size: .64rem;
  color: var(--mf-sub-2);
  text-align: center;
  line-height: 1.25;
}
/* .medaka-result-grid が2カラムになる640px以降は、いまの発生ステージカードの実質幅が
   半分になり5アイコンが窮屈になるため、アイコン・文字を少し小さくして折り返しを避ける */
@media (min-width: 640px) {
  .medaka-page .medaka-stage-icon-circle { width: 40px; height: 40px; }
  .medaka-page .medaka-stage-icon-circle svg { width: 28px; height: 28px; }
  .medaka-page .medaka-stage-icon-label { font-size: .58rem; }
}
.medaka-page .medaka-stage-icon.is-current .medaka-stage-icon-circle {
  background: var(--mf-icon-bg-active);
  box-shadow: 0 0 0 2.5px var(--mf-teal);
}
.medaka-page .medaka-stage-icon.is-current .medaka-stage-icon-label {
  color: var(--mf-teal);
  font-weight: 700;
}
.medaka-page .medaka-stage-advice {
  margin: .8rem 0 0;
  padding: .6rem .75rem;
  background: #fbf7ef;
  border-radius: 10px;
  color: var(--mf-sub);
  font-size: .8rem;
  line-height: 1.6;
}
/* 水温カード（結果側・現在値の再掲） */
.medaka-page .medaka-temp-card-value {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--mf-teal);
  font-variant-numeric: tabular-nums;
}
/* 水温カードのスライダーは操作不可の静的表示（<input type=range>ではなくdivで現在値だけ再掲する） */
.medaka-page .medaka-temp-static-slider {
  position: relative;
  height: 10px;
  margin: .3rem 0 .4rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #6fb6d6 0%, #7fcac2 40%, #ffd274 72%, #f2925e 100%);
}
.medaka-page .medaka-temp-static-slider .medaka-slider-band {
  top: -3px;
  bottom: -3px;
}
.medaka-page .medaka-temp-thumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--mf-teal);
  box-shadow: 0 2px 6px rgba(12, 60, 80, .3);
  transform: translateY(-50%);
}
.medaka-page .medaka-temp-card-note {
  text-align: center;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px dashed var(--mf-card-border);
  color: var(--mf-sub-2);
  font-size: .74rem;
}

@media (min-width: 640px) {
  .medaka-page .medaka-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

/* ---------- アクション ---------- */
.medaka-page .medaka-result-actions {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
.medaka-page .medaka-actions-title { display: none; }
.medaka-page .medaka-action-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.medaka-page .medaka-action-item {
  background: transparent;
  border: none;
  padding: 0;
}
.medaka-page .medaka-action-item p { display: none; }
.medaka-page .medaka-action-item button {
  border-radius: var(--radius-pill);
  min-height: 50px;
}
.medaka-page .medaka-action-item.is-primary button {
  background: var(--mf-teal);
  color: var(--mf-teal-contrast);
  border: none;
  box-shadow: 0 6px 16px rgba(11, 127, 149, .35);
}
.medaka-page .medaka-action-item.is-primary button:hover { background: var(--mf-teal-hover); }
.medaka-page .medaka-action-row {
  display: flex;
  gap: .6rem;
}
.medaka-page .medaka-action-row .medaka-action-item { flex: 1 1 0; }
.medaka-page .medaka-action-row button.secondary {
  width: 100%;
  border-color: var(--mf-card-border);
  color: var(--mf-teal);
}
.medaka-page .medaka-share-note {
  text-align: center;
  margin: 0;
  color: var(--mf-sub-2);
  font-size: .74rem;
}

/* ---------- 記録中の卵 ---------- */
.medaka-page .medaka-records-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem .8rem;
}
.medaka-page .medaka-records-head h2 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 1.1rem;
}
.medaka-page .medaka-records-head h2::after { content: none; }
.medaka-page .medaka-records-count { color: var(--mf-sub-2); font-size: .78rem; }
.medaka-page .medaka-records-desc { color: var(--mf-sub); }

.medaka-page #clutch-empty {
  margin-top: 1rem;
  padding: 1.1rem;
  text-align: center;
  color: var(--mf-sub);
  background: transparent;
  border: 2px dashed #a8d8de;
  border-radius: 16px;
  line-height: 1.8;
}
.medaka-page .clutch-card-list { gap: 1rem; }
@media (min-width: 1024px) {
  .medaka-page .clutch-card-list { grid-template-columns: 1fr 1fr; }
}
.medaka-page .clutch-card {
  border: none;
  border-radius: 20px;
  box-shadow: var(--mf-card-shadow-sm);
  padding: 1.1rem 1.2rem;
}
.medaka-page .clutch-card.is-next {
  border: 1.5px solid var(--mf-hatch-border);
  box-shadow: var(--mf-card-shadow);
}
.medaka-page .clutch-card-head { border: none; padding-bottom: 0; }
.medaka-page .clutch-card-label { display: none; }
.medaka-page .clutch-card-head h3 {
  font-size: .98rem;
  font-weight: 900;
}
.medaka-page .clutch-card-meta {
  margin: .1rem 0 0;
  color: var(--mf-sub-2);
  font-size: .74rem;
}
.medaka-page .clutch-card-badges { display: none; } /* 新デザインでは専用バッジ(.medaka-remain-badge等)に置換 */
.medaka-page .medaka-remain-badge {
  font-size: .76rem;
  font-weight: 900;
  color: var(--mf-warn-text);
  background: var(--mf-warn-bg);
  border-radius: var(--radius-pill);
  padding: .3rem .75rem;
  white-space: nowrap;
}
.medaka-page .medaka-recorded-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .74rem;
  font-weight: 700;
  color: var(--mf-ok);
  white-space: nowrap;
}

.medaka-page .medaka-mini-progress {
  position: relative;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--mf-track-bg);
  margin-top: .8rem;
}
.medaka-page .medaka-mini-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--mf-fill-start), var(--mf-fill-end));
  transition: width .5s var(--ease);
}
.medaka-page .medaka-mini-progress-stats {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .5rem;
  font-size: .78rem;
}
.medaka-page .medaka-mini-progress-acc { color: var(--mf-teal); font-weight: 700; }
.medaka-page .medaka-mini-progress-eta { color: var(--mf-sub-2); }

/* 今日の水温クイック記録 */
.medaka-page .medaka-quick-record {
  margin-top: .95rem;
  padding-top: .95rem;
  border-top: 1px dashed var(--mf-card-border);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.medaka-page .medaka-quick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  font-weight: 700;
  color: var(--mf-navy);
}
.medaka-page .medaka-quick-unrecorded { color: var(--mf-warn-text); font-weight: 700; font-size: .74rem; }
.medaka-page .medaka-quick-chips {
  display: flex;
  gap: .5rem;
}
.medaka-page .medaka-quick-chip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .5rem .3rem;
  border: 1.5px solid var(--mf-card-border);
  background: #fbfeff;
  color: var(--mf-navy);
  border-radius: 12px;
  font-size: .68rem;
  font-weight: 500;
  min-height: 0;
  box-shadow: none;
}
.medaka-page .medaka-quick-chip b {
  font-size: .95rem;
  font-weight: 900;
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.medaka-page .medaka-quick-chip.is-selected {
  border-color: var(--mf-teal);
  background: var(--mf-pill-bg);
  color: var(--mf-teal);
}
.medaka-page .medaka-quick-manual {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.medaka-page .medaka-quick-manual[hidden] { display: none; }
.medaka-page .medaka-quick-manual input.quick-temp-input {
  max-width: none;
  flex: 1 1 auto;
  min-height: 40px;
  text-align: center;
  font-weight: 700;
}
.medaka-page .medaka-quick-status {
  margin: 0;
  font-size: .72rem;
  color: var(--mf-sub-2);
}
.medaka-page .medaka-quick-submit {
  width: 100%;
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: var(--mf-teal);
  color: var(--mf-teal-contrast);
  font-weight: 700;
}
.medaka-page .medaka-quick-submit:hover { background: var(--mf-teal-hover); }
.medaka-page .medaka-quick-done {
  text-align: center;
  color: var(--mf-ok);
  font-weight: 700;
  font-size: .82rem;
}
.medaka-page .medaka-quick-note {
  margin: 0;
  color: var(--mf-sub-2);
  font-size: .74rem;
}

/* 詳しい記録（旧・詳細パネル）を折りたたみ表示に */
.medaka-page .medaka-clutch-details { margin-top: .8rem; }
.medaka-page .medaka-clutch-details summary {
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  color: var(--mf-teal);
  list-style: none;
}
.medaka-page .medaka-clutch-details summary::-webkit-details-marker,
.medaka-page .medaka-clutch-details summary::marker { display: none; content: ""; }
.medaka-page .medaka-clutch-details .clutch-log-panel { margin-top: .8rem; }
.medaka-page .clutch-card > button[data-del-id] {
  align-self: flex-start;
  margin-top: .6rem;
  border-radius: var(--radius-pill);
}

/* 孵化当日カード（実測到達 or 予定日当日） */
.medaka-page .clutch-card.is-hatch-day {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--mf-hatch-border);
  box-shadow: var(--mf-hatch-shadow);
}
.medaka-page .medaka-hatch-confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;
  pointer-events: none;
}
.medaka-page .medaka-hatch-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}
.medaka-page .medaka-hatch-pill {
  font-size: .74rem;
  font-weight: 900;
  color: var(--mf-warn-text);
  background: var(--mf-warn-bg);
  border-radius: var(--radius-pill);
  padding: .3rem .8rem;
  letter-spacing: .06em;
}
.medaka-page .medaka-hatch-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--mf-navy);
}
.medaka-page .medaka-hatch-fry-icon { width: 60px; height: 60px; }
.medaka-page .medaka-hatch-meta { font-size: .78rem; color: var(--mf-sub); margin: 0; }
.medaka-page .medaka-hatch-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: .5rem;
}
.medaka-page .medaka-hatch-record-btn {
  width: 100%;
  min-height: 48px;
  border-radius: var(--radius-pill);
  background: var(--mf-orange-strong);
  color: var(--mf-orange-contrast);
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(224, 130, 31, .35);
}
.medaka-page .medaka-hatch-record-btn:hover { background: var(--mf-orange); }
.medaka-page .medaka-hatch-dismiss-btn {
  width: 100%;
  min-height: 44px;
  border-radius: var(--radius-pill);
}
.medaka-page .medaka-hatch-note {
  margin: 0;
  color: var(--mf-sub-2);
  font-size: .72rem;
}

/* ---------- くわしく知る ---------- */
.medaka-page .medaka-explore-label {
  display: block;
  margin-bottom: .7rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--mf-sub);
}
.medaka-page .medaka-explore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}
@media (min-width: 640px) {
  .medaka-page .medaka-explore-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .medaka-page .medaka-explore-grid { grid-template-columns: repeat(4, 1fr); }
}
.medaka-page .medaka-explore-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .9rem 1rem;
  background: var(--mf-card-bg);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(12, 90, 110, .06);
  color: var(--mf-navy);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}
.medaka-page .medaka-explore-card:hover { color: var(--mf-teal); }
.medaka-page .medaka-explore-card span.small {
  color: var(--mf-sub-2);
  font-weight: 500;
  white-space: nowrap;
}
.medaka-page .medaka-explore-wrap .app-promo {
  margin-top: .9rem;
}

/* ---------- デスクトップ(1024px〜) ---------- */
@media (min-width: 1024px) {
  .medaka-page .medaka-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 24px;
    align-items: start;
  }
  .medaka-page .medaka-calc-summary { display: none !important; }
}

/* ---------- レスポンシブ微調整(スマホ) ---------- */
@media (max-width: 639px) {
  .medaka-page .medaka-quick-chips { flex-wrap: wrap; }
}

/* =============================================================================
   medaka.css 追記2 — モック忠実化（2026-07 リニューアル 第2版）
   ヘッダー/フッターの濃色帯・ヒーロー2カラム重ね・結果カードのアクション配置・
   記録セクションの空状態など、モックのフレーム構造に合わせた最終調整。
   ============================================================================= */

/* ---------- ヘッダー/フッター 濃色帯（このページのみ再スタイル） ---------- */
.medaka-page .site-header {
  background: #0f151b;
  border-bottom: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.medaka-page .site-header .inner {
  max-width: 1100px;
  padding: 0 16px;
  min-height: 50px;
  flex-wrap: nowrap;
}
@media (min-width: 1024px) {
  .medaka-page .site-header .inner { padding: 0 40px; min-height: 56px; }
}
.medaka-page .wordmark { color: #fff; }
.medaka-page .wordmark:hover { color: #fff; }
.medaka-page .wordmark-mark { display: none; } /* モックはテキストのみのワードマーク */
.medaka-page .wordmark-name { color: #fff; font-weight: 900; letter-spacing: .06em; font-size: 17px; }
@media (min-width: 1024px) { .medaka-page .wordmark-name { font-size: 19px; } }
.medaka-page .wordmark-tag { color: #8fa3ad; letter-spacing: .1em; }
.medaka-page .tagline { color: #c3d2d8; font-size: 12px; }
@media (min-width: 1024px) { .medaka-page .tagline { font-size: 13px; } }

.medaka-page .site-footer {
  background: #0f151b;
  border-top: none;
  margin-top: 2.5rem;
  color: #7f939d;
}
.medaka-page .site-footer .inner {
  max-width: 1100px;
  padding: 1rem 16px 1.4rem;
}
@media (min-width: 1024px) {
  .medaka-page .site-footer .inner { padding: 1.1rem 40px 1.4rem; }
}
.medaka-page .site-footer nav {
  gap: .3rem 1.1rem;
  margin-bottom: .7rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: .78rem;
}
.medaka-page .site-footer nav a { color: #7f939d; }
.medaka-page .site-footer nav a:hover { color: #c3d2d8; }
.medaka-page .site-footer p { color: #5f7079; }

/* ---------- 入力カード（モック順・数値入力は非表示） ---------- */
.medaka-page .medaka-calc-form.tool-form {
  padding: 18px 16px;
  gap: 20px;
}
@media (min-width: 1024px) {
  .medaka-page .medaka-calc-form.tool-form { padding: 24px 22px; }
}
.medaka-page .medaka-temp-num-row { display: none; } /* モックはスライダーのみ。#temp-num はJS用に残置 */
.medaka-page #temp-preview { margin: 0; }
.medaka-page #temp-preview .temp-preview-card p.small { display: none; } /* モックは1行のみ */
.medaka-page .medaka-field-head { margin-bottom: .4rem; }

/* ---------- 結果カード：見出しとアクションの配置 ---------- */
.medaka-page .medaka-result-card.result-box { padding: 20px 16px 18px; }
@media (min-width: 1024px) {
  .medaka-page .medaka-result-card.result-box { padding: 24px; }
}
.medaka-page .medaka-result-head-actions:empty { display: none; }
@media (min-width: 1024px) {
  .medaka-page .medaka-result-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    text-align: left;
  }
  .medaka-page .medaka-result-head-main { text-align: left; }
  .medaka-page .medaka-result-head-actions { min-width: 220px; }
  /* デスクトップは結果カード見出し右にアクションを収める（コンパクト） */
  .medaka-page .medaka-result-head-actions .medaka-result-actions { margin: 0; }
  .medaka-page .medaka-result-head-actions .medaka-action-list { gap: 8px; }
  .medaka-page .medaka-result-head-actions .medaka-action-item.is-primary button { min-height: 46px; font-size: 14px; }
  .medaka-page .medaka-result-head-actions .medaka-action-row button.secondary { min-height: 40px; font-size: 12px; }
  .medaka-page .medaka-result-head-actions .medaka-share-note { display: none; }
  /* 発生ステージ+水温は 1fr / 300px（モック2a） */
  .medaka-page .medaka-result-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
  }
  /* 水温カード下の注記はデスクトップのみ（モック2a）。モバイルはアクション下の共有注記側で表示 */
  .medaka-page .medaka-share-note { display: none; }
}
/* モバイルは結果カード下端にアクションをまとめて表示（1b） */
@media (max-width: 1023px) {
  .medaka-page .medaka-temp-card-note { display: none; } /* モバイルの水温カードには注記なし（1b） */
}

/* ---------- 記録セクション ---------- */
.medaka-page .medaka-records-head { align-items: center; }
.medaka-page .medaka-records-title { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.medaka-page .medaka-records-add {
  min-height: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--mf-teal);
  font-size: .82rem;
  font-weight: 700;
  box-shadow: none;
  white-space: nowrap;
}
.medaka-page .medaka-records-add:hover { background: transparent; color: var(--mf-teal-hover); }
.medaka-page .medaka-records-desc { display: none; } /* 件数メタと下部注記で代替（モック） */
/* 空状態（卵なし）は見出し・追加ボタンを隠し、点線ボックスのみ（1a） */
.medaka-page .medaka-flow[data-has-clutches="0"] .medaka-records-head { display: none; }
.medaka-page #clutch-cap-note {
  margin-top: .7rem;
  text-align: center;
  color: var(--mf-sub-2);
  font-size: .68rem;
}

/* クイック記録：手入力チップは1行表示（モック1c） */
.medaka-page .medaka-quick-chip.medaka-quick-chip-manual {
  justify-content: center;
  font-size: .86rem;
  font-weight: 700;
  color: var(--mf-sub);
}

/* 結果カード内タイムライン下の積算メモ（モック2a/1b: 右寄せの計算値ベース） */
.medaka-page .medaka-timeline-acc {
  margin: .1rem 0 0;
  text-align: right;
  color: var(--mf-sub-2);
  font-size: .68rem;
}
/* formula box をモックの1行トーンに（小さめ・角丸10・淡緑地） */
.medaka-page .formula.medaka-formula-box {
  padding: 8px 12px;
  font-size: .78rem;
  line-height: 1.5;
}
/* コンパクト配置(結果カード見出し右・記録カードのクイック行)では .ics のカレンダーアイコンを省いて1行に収める */
.medaka-page .medaka-result-head-actions .ics-ic { display: none; }
.medaka-page .medaka-result-head-actions .medaka-action-row button.secondary { white-space: nowrap; padding: 0 8px; }

/* ---------- 結果カード：モック忠実タイムライン（採卵/今日/予定 ラベル上・バー・積算下） ---------- */
.medaka-page #medaka-timeline-panel { margin-top: 14px; }
.medaka-page .medaka-tl { display: flex; flex-direction: column; gap: 7px; }
.medaka-page .medaka-tl-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
}
.medaka-page .medaka-tl-start { color: var(--mf-sub); }
.medaka-page .medaka-tl-today { color: var(--mf-teal); }
.medaka-page .medaka-tl-goal { color: var(--mf-orange-strong); }
.medaka-page .medaka-tl-bar {
  position: relative;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--mf-track-bg);
}
.medaka-page .medaka-tl-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--mf-fill-start), var(--mf-fill-end));
}
.medaka-page .medaka-tl-drop {
  position: absolute;
  top: -7px;
}
.medaka-page .medaka-tl-acc {
  margin: 0;
  text-align: right;
  font-size: 11px;
  color: var(--mf-sub-2);
}
/* デスクトップ・狭い結果カラムでステージ5アイコンのラベルが折り返さないように */
.medaka-page .medaka-stage-icon-label { white-space: nowrap; }
@media (min-width: 640px) {
  .medaka-page .medaka-stage-icon-label { font-size: .56rem; }
}

/* 孵化当日カードの装飾グラデーションバー（モック1d） */
.medaka-page .medaka-hatch-bar {
  width: 100%;
  height: 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--mf-fill-start), var(--mf-fill-end) 60%, var(--mf-orange));
}

/* 全面帯ヒーロー(50vw技法)がスクロールバー幅ぶん横スクロールを生むのを防ぐ安全弁。
   overflow-x:clip はスクロールコンテナを作らないため position:sticky ヘッダーを壊さない。 */
.medaka-page { overflow-x: clip; }

/* =============================================================================
   medaka.css 追記3 — レビュー残差分の解消（2026-07 リニューアル 第3版）
   コンパクトヒーロー帯(1c/1d)・デスクトップのクイック記録インライン化(2a)・
   モバイルのアプリ導線/くわしく知るカードのモック忠実化・空状態の縦空白解消 ほか。
   ============================================================================= */

/* ---------- item5: 空状態(1a)の過剰な縦空白を解消 ---------- */
/* モバイルの縦間隔はflowのgapに一元化（旧.medaka-recordsのmargin-top等は無効化して重複を排除）。 */
.medaka-page .medaka-flow { gap: 20px; }
@media (min-width: 1024px) { .medaka-page .medaka-flow { gap: 32px; } }
.medaka-page .medaka-records { margin-top: 0; }
.medaka-page .medaka-flow[data-has-clutches="0"] #clutch-empty { margin-top: 0; }
/* 結果未計算(1a)は結果カラムが空。入力カード直下の無駄なgapを詰めて点線ボックスまで20pxに。 */
@media (max-width: 1023px) {
  .medaka-page .medaka-grid:has(#result-area[hidden]) { gap: 0; }
}

/* ---------- item1: モバイル再訪のコンパクトヒーロー帯（1c/1d） ---------- */
.medaka-page .medaka-hero-compact {
  position: relative;
  z-index: 1;
  display: none;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.medaka-page .medaka-hero-compact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.medaka-page .medaka-hero-compact-title { font-size: 16px; font-weight: 900; color: var(--mf-navy); line-height: 1.2; }
.medaka-page .medaka-hero-compact-meta { font-size: 11px; color: #2a6274; }
.medaka-page .medaka-hero-compact-add {
  min-height: 0;
  padding: 7px 13px;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .85);
  color: var(--mf-teal);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
}
.medaka-page .medaka-hero-compact-add:hover { background: #fff; color: var(--mf-teal-hover); }
.medaka-page .medaka-hero-compact-add[hidden] { display: none; }
/* モバイル + 記録中の卵あり: フルヒーローを畳んで帯へ切替（h1はsr-only化してDOMに残す＝SEO安全）。 */
@media (max-width: 1023px) {
  .medaka-page.medaka-has-clutches .medaka-hero { padding: 14px 0 20px; }
  .medaka-page.medaka-has-clutches .medaka-hero-inner { display: block; padding: 0; }
  .medaka-page.medaka-has-clutches .medaka-hero-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .medaka-page.medaka-has-clutches .medaka-privacy-pill { display: none; }
  .medaka-page.medaka-has-clutches .medaka-hero-compact { display: flex; }
  /* 帯の直下にカードが続く（フルヒーロー用の-26px重ねは解除して+4px） */
  .medaka-page.medaka-has-clutches .medaka-flow { margin-top: 4px; }
  /* 帯が「記録中の卵」見出しを兼ねるので、本文側の見出し行は隠す（重複防止） */
  .medaka-page.medaka-has-clutches .medaka-records-head { display: none; }
}

/* ---------- item9: 記録済みカードのヒント（点線区切りの下） ---------- */
.medaka-page .medaka-recorded-hint {
  margin: .85rem 0 0;
  padding-top: .85rem;
  border-top: 1px dashed var(--mf-card-border);
  color: var(--mf-sub-2);
  font-size: .72rem;
  line-height: 1.5;
}

/* ---------- item2: デスクトップのクイック記録を1行インラインに（2a） ---------- */
/* モバイルは「◯℃で記録する」フルラベル、デスクトップは短縮「記録」（下のメディアクエリで切替）。 */
.medaka-page .medaka-quick-submit-short { display: none; }
@media (min-width: 1024px) {
  .medaka-page .medaka-quick-record {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
  }
  .medaka-page .medaka-quick-head { flex: 0 0 auto; }
  .medaka-page .medaka-quick-head-date,
  .medaka-page .medaka-quick-unrecorded { display: none; }
  .medaka-page .medaka-quick-head-label::after { content: ":"; }
  .medaka-page .medaka-quick-chips { flex: 1 1 auto; }
  .medaka-page .medaka-quick-manual { flex: 1 1 100%; order: 8; }
  .medaka-page .medaka-quick-status { flex: 1 1 100%; order: 9; margin: 0; }
  .medaka-page .medaka-quick-submit {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    padding: 0 18px;
  }
  /* デスクトップのインライン記録ボタンは短縮ラベル「記録」に（モック2a） */
  .medaka-page .medaka-quick-submit-full { display: none; }
  .medaka-page .medaka-quick-submit-short { display: inline; }
}

/* ---------- item11: 孵化当日カードの稚魚アイコンを72pxへ（1d） ---------- */
.medaka-page .medaka-hatch-fry-icon { width: 72px; height: 72px; }

/* ---------- item12: 発生ステージ下アドバイスの文字サイズ（モック12px） ---------- */
.medaka-page .medaka-stage-advice { font-size: .75rem; }

/* ---------- item3/item4: くわしく知るカード（モバイル1行/デスクトップ縦積み）+ アプリ導線 ---------- */
/* モバイル(既定): タイトル左＋右端に › のみ。desktop用の short・sub は隠す。 */
.medaka-page .medaka-explore-card { padding: 14px 16px; }
.medaka-page .medaka-explore-title { min-width: 0; }
.medaka-page .medaka-explore-full { display: inline; }
.medaka-page .medaka-explore-short,
.medaka-page .medaka-explore-sub { display: none; }
.medaka-page .medaka-explore-arrow { color: #9db9c0; font-weight: 400; flex: none; }
/* デスクトップ(4列): タイトル(short)上＋サブ下の縦積み。full と › は隠す。FAQはモバイルのみ。 */
@media (min-width: 1024px) {
  .medaka-page .medaka-explore-card {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 16px;
    font-size: 13.5px;
  }
  .medaka-page .medaka-explore-full,
  .medaka-page .medaka-explore-arrow { display: none; }
  .medaka-page .medaka-explore-short { display: inline; }
  .medaka-page .medaka-explore-sub { display: block; font-size: 11px; }
  .medaka-page .medaka-explore-faq { display: none; }
}
/* アプリ導線カード（濃紺・グリッド内。ライト/ダーク共通で濃紺固定） */
.medaka-page .medaka-explore-card.medaka-explore-app {
  background: #123c49;
  color: #ffffff;
  box-shadow: none;
  justify-content: flex-start;
  gap: 12px;
  padding: 13px 16px;
}
.medaka-page .medaka-explore-card.medaka-explore-app:hover { color: #ffffff; }
.medaka-page .medaka-explore-app-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.medaka-page .medaka-explore-app-icon svg { display: block; width: 100%; height: 100%; }
.medaka-page .medaka-explore-app .medaka-explore-title { display: flex; flex-direction: column; gap: 1px; }
.medaka-page .medaka-explore-app-name { font-size: 13px; font-weight: 700; color: #ffffff; }
.medaka-page .medaka-explore-app-sub-mobile { font-size: 10.5px; color: #9db9c0; font-weight: 400; }
.medaka-page .medaka-explore-app-sub-desktop { display: none; }
@media (min-width: 1024px) {
  .medaka-page .medaka-explore-card.medaka-explore-app {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
  }
  .medaka-page .medaka-explore-app-icon,
  .medaka-page .medaka-explore-app-sub-mobile { display: none; }
  .medaka-page .medaka-explore-app-name { font-size: 13.5px; }
  .medaka-page .medaka-explore-app-sub-desktop { display: block; font-size: 11px; color: #9db9c0; font-weight: 400; }
}

/* ---------- アプリ導線（計算エリアと「記録中の卵」の間） ---------- */
.medaka-page .medaka-app-promo {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  overflow: hidden;
  padding: 26px 22px;
  background:
    radial-gradient(circle at 88% 12%, rgba(109, 207, 224, .23), transparent 28%),
    radial-gradient(circle at 8% 110%, rgba(246, 166, 60, .16), transparent 34%),
    linear-gradient(145deg, #102f3b 0%, #123f4d 58%, #0d5665 100%);
  border: 1px solid rgba(157, 219, 228, .18);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(10, 54, 68, .22);
  color: #ffffff;
}
.medaka-page .medaka-app-promo::before,
.medaka-page .medaka-app-promo::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(190, 235, 242, .14);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.medaka-page .medaka-app-promo::before {
  width: 210px;
  height: 62px;
  top: 36px;
  right: -50px;
  transform: rotate(-8deg);
}
.medaka-page .medaka-app-promo::after {
  width: 150px;
  height: 42px;
  right: 12%;
  bottom: -18px;
}
.medaka-page .medaka-app-promo-copy {
  min-width: 0;
  position: relative;
  z-index: 1;
}
.medaka-page .medaka-app-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  color: #a9dce5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.medaka-page .medaka-app-kicker > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f6a63c;
  box-shadow: 0 0 0 4px rgba(246, 166, 60, .15);
}
.medaka-page .medaka-app-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}
.medaka-page .medaka-app-icon {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 17px;
  box-shadow: 0 12px 24px rgba(0, 18, 28, .32);
}
.medaka-page .medaka-app-icon svg { display: block; width: 100%; height: 100%; }
.medaka-page .medaka-app-name {
  margin: 0 0 4px;
  color: #a9dce5;
  font-size: 12px;
  font-weight: 700;
}
.medaka-page .medaka-app-promo h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.25rem, 1.08rem + .65vw, 1.72rem);
  line-height: 1.35;
  letter-spacing: .01em;
}
.medaka-page .medaka-app-lead {
  max-width: 46rem;
  margin: 17px 0 0;
  color: #d4e7eb;
  font-size: 13.5px;
  line-height: 1.75;
}
.medaka-page .medaka-app-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.medaka-page .medaka-app-benefits li {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .065);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 13px;
}
.medaka-page .medaka-app-benefit-icon {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: grid;
  place-items: center;
  color: #ffc067;
  background: rgba(246, 166, 60, .12);
  border-radius: 11px;
}
.medaka-page .medaka-app-benefit-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.medaka-page .medaka-app-benefits li > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.medaka-page .medaka-app-benefits strong {
  color: #ffffff;
  font-size: 12.5px;
  line-height: 1.4;
}
.medaka-page .medaka-app-benefits small {
  color: #9fc0c8;
  font-size: 10.5px;
  line-height: 1.45;
}
.medaka-page .medaka-app-cta-wrap {
  margin-top: 20px;
}
.medaka-page .medaka-app-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 54px;
  padding: 0 21px;
  background: linear-gradient(135deg, #ffbd5d 0%, #f49a3e 100%);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 18, 28, .24);
  color: #2c1a08;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.medaka-page .medaka-app-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 13px 28px rgba(0, 18, 28, .3);
  color: #2c1a08;
  filter: brightness(1.03);
}
.medaka-page .medaka-app-cta:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .85);
  outline-offset: 3px;
}
.medaka-page .medaka-app-cta svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.medaka-page .medaka-app-cta-wrap > p {
  margin: 9px 0 0;
  color: #a9c6cd;
  font-size: 10.5px;
  line-height: 1.5;
}
.medaka-page .medaka-app-cta-wrap > p span { margin: 0 3px; color: #f6a63c; }

/* 実画面のスクリーンショットではなく、孵化追跡の価値を短く伝える機能イメージ。 */
.medaka-page .medaka-app-preview {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 0;
}
.medaka-page .medaka-app-preview > p {
  max-width: 17rem;
  margin: 0;
  color: #a9c6cd;
  font-size: 10.5px;
  line-height: 1.5;
  text-align: center;
}
.medaka-page .medaka-app-phone {
  width: min(100%, 248px);
  padding: 8px;
  background: #091d25;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 34px;
  box-shadow: 0 24px 50px rgba(0, 18, 28, .4);
}
.medaka-page .medaka-app-phone-notch {
  width: 74px;
  height: 17px;
  margin: -1px auto -12px;
  position: relative;
  z-index: 2;
  background: #091d25;
  border-radius: 0 0 12px 12px;
}
.medaka-page .medaka-app-phone-screen {
  overflow: hidden;
  min-height: 344px;
  padding: 24px 12px 13px;
  background: linear-gradient(180deg, #dff4f6 0%, #f7fbfc 42%);
  border-radius: 27px;
}
.medaka-page .medaka-app-screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px 10px;
  color: #123c49;
  font-size: 10px;
  font-weight: 900;
}
.medaka-page .medaka-app-screen-head i {
  width: 22px;
  height: 7px;
  background: linear-gradient(90deg, #0b7f95 35%, transparent 35% 45%, #0b7f95 45% 70%, transparent 70% 80%, #0b7f95 80%);
  border-radius: 4px;
  opacity: .55;
}
.medaka-page .medaka-app-screen-card {
  padding: 14px;
  background: #ffffff;
  border: 1px solid #cfe6ea;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(12, 90, 110, .12);
}
.medaka-page .medaka-app-screen-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #123c49;
  font-size: 10px;
}
.medaka-page .medaka-app-screen-card-head span {
  padding: 3px 7px;
  background: #e6f6f7;
  border-radius: 999px;
  color: #0b7f95;
  font-size: 8px;
  font-weight: 800;
}
.medaka-page .medaka-app-screen-card > p {
  margin: 14px 0 1px;
  color: #62808a;
  font-size: 8px;
  font-weight: 700;
}
.medaka-page .medaka-app-screen-count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.medaka-page .medaka-app-screen-count strong { color: #e0821f; font-size: 24px; line-height: 1.2; }
.medaka-page .medaka-app-screen-count span { color: #6d8188; font-size: 8px; }
.medaka-page .medaka-app-screen-progress {
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  background: #dff0f2;
  border-radius: 999px;
}
.medaka-page .medaka-app-screen-progress i {
  display: block;
  width: 53%;
  height: 100%;
  background: linear-gradient(90deg, #7fcac2, #1795a8);
  border-radius: inherit;
}
.medaka-page .medaka-app-screen-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  color: #6d8188;
  font-size: 8px;
}
.medaka-page .medaka-app-screen-stats strong { color: #123c49; font-size: 8px; }
.medaka-page .medaka-app-screen-stages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 4px 16px;
  position: relative;
}
.medaka-page .medaka-app-screen-stages::before {
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: #d9e8eb;
  content: "";
}
.medaka-page .medaka-app-screen-stages i {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  background: #d9e8eb;
  border: 2px solid #ffffff;
  border-radius: 50%;
}
.medaka-page .medaka-app-screen-stages i.is-done { background: #7fcac2; }
.medaka-page .medaka-app-screen-stages i.is-current {
  width: 15px;
  height: 15px;
  background: #f6a63c;
  box-shadow: 0 0 0 4px #fff0d9;
}
.medaka-page .medaka-app-screen-record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  background: #e6f6f7;
  border-radius: 11px;
  color: #486772;
  font-size: 8px;
  font-weight: 700;
}
.medaka-page .medaka-app-screen-record strong { color: #0b7f95; font-size: 9px; }

@media (max-width: 639px) {
  .medaka-page .medaka-app-cta { width: 100%; }
  .medaka-page .medaka-app-preview { align-items: stretch; }
  .medaka-page .medaka-app-preview > p { max-width: none; }
  .medaka-page .medaka-app-phone {
    width: 100%;
    padding: 0;
    background: transparent;
    border-color: rgba(255, 255, 255, .16);
    border-radius: 21px;
  }
  .medaka-page .medaka-app-phone-notch { display: none; }
  .medaka-page .medaka-app-phone-screen {
    min-height: 0;
    padding: 15px;
    border-radius: 20px;
  }
  .medaka-page .medaka-app-screen-head { padding-bottom: 9px; }
}

@media (min-width: 760px) {
  .medaka-page .medaka-app-promo {
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: center;
    gap: 32px;
    padding: 31px 32px;
  }
  .medaka-page .medaka-app-icon { width: 76px; height: 76px; flex-basis: 76px; border-radius: 19px; }
}

@media (min-width: 1024px) {
  .medaka-page .medaka-app-promo {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 44px;
    padding: 36px 40px;
  }
  .medaka-page .medaka-app-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .medaka-page .medaka-app-benefits li { align-items: flex-start; padding: 11px; }
  .medaka-page .medaka-app-phone { width: 252px; }
}

@media (prefers-reduced-motion: reduce) {
  .medaka-page .medaka-app-cta { transition: none; }
  .medaka-page .medaka-app-cta:hover { transform: none; }
}

/* =============================================================================
   medaka.css 追記4 — 配置の残問題（2026-07 リニューアル 第4版）
   item1: デスクトップ計算前の入力カード中央配置
   item2: 計算後2カラムの上端揃え
   item3: 記録カードの名前編集欄
   ============================================================================= */

/* ---------- item1: 計算結果が未表示のデスクトップは入力カードを中央に単独表示 ---------- */
/* 結果が出たら（#result-area の hidden 解除で）通常の 420px|1fr 2カラムへ戻る。 */
@media (min-width: 1024px) {
  .medaka-page .medaka-grid:has(#result-area[hidden]) {
    grid-template-columns: 420px;
    justify-content: center;
  }
  .medaka-page .medaka-grid:has(#result-area[hidden]) .medaka-result-col {
    display: none;
  }
}

/* ---------- item2: 計算後2カラムの上端を完全に揃える ---------- */
/* 結果カラム先頭の空 #form-warn による flex gap(16px) と、共有 .result-box の
   上マージン(16px)で結果カードが入力カードより32px下がっていた。両方を打ち消す。 */
.medaka-page .medaka-result-col > #form-warn:empty { display: none; }
.medaka-page .medaka-result-card.result-box { margin-top: 0; }

/* ---------- item3: 記録カードの名前編集欄（details「くわしい記録・削除」内） ---------- */
.medaka-page .clutch-name-editor {
  margin-top: .8rem;
  padding: .85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.medaka-page .clutch-name-editor label {
  display: block;
  margin-bottom: .45rem;
  color: var(--mf-navy);
  font-size: .82rem;
  font-weight: 700;
}
.medaka-page .clutch-name-row {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.medaka-page .clutch-name-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  min-height: 40px;
}

/* =============================================================================
   常時ライト固定（デザインモックにダーク版が存在しないため）
   OSがダークモードでも、このページ(.medaka-page)配下は常にモックの明るい水辺配色で
   表示する。site.css の :root がダーク時に上書きする共有トークン(--bg/--surface系/
   --text系/--border系/--accent系/--ok・warn・danger系/--count系/--tag-id系/
   --chart系/--shadow系)を、ここで body.medaka-page に対してライト値のまま再宣言する。
   カスタムプロパティは継承するため、.medaka-page配下で使われる共有コンポーネント
   (.notice/.faq/.tool-form/.lookup-table/.related-tools等)も含めて全てライト表示になる。
   このファイル前半にあった .medaka-page 独自の @media (prefers-color-scheme: dark)
   ブロック(--mf-* トークンのダーク再定義や個別の色調整)は、上記の理由によりすべて
   削除済み(--mf-* は常にこのファイル冒頭のライト値のまま使われる)。
   ヘッダー/フッターは元々 #0f151b 固定(下記「ヘッダー/フッター」セクション参照)で
   このブロックの影響を受けないため変更しない。
   site.css 自体はここでは変更しない。 ============================================================================= */
@media (prefers-color-scheme: dark) {
  .medaka-page {
    color-scheme: light;

    --bg:          #f4f6f8;
    --surface:     #ffffff;
    --surface-2:   #eef2f5;
    --surface-3:   #e4eaef;

    --text:            #16212b;
    --text-secondary:  #465666;
    --text-muted:      #5f6b78;

    --border:         #dde5ec;
    --border-strong:  #7e8f9d;

    --accent:          #0e6b82;
    --accent-hover:    #0b5668;
    --accent-active:   #084858;
    --accent-contrast: #ffffff;
    --accent-weak:     #e7f1f4;
    --accent-weak-2:   #d3e7ec;
    --accent-border:   #b4d6de;
    --accent-ring:     0 0 0 3px rgba(14, 107, 130, .25);

    --ok-text:   #1f7a4d;  --ok-bg:   #e7f4ec;  --ok-border:   #a9d8bd;
    --warn-text: #8a5a08;  --warn-bg: #fbf1dd;  --warn-border: #e6c583;
    --danger-text: #bb3b33; --danger-bg: #fbeae7; --danger-border: #ecb2ab;

    --count-text:   #a1520a;
    --count-bg:     #fbecd6;
    --count-border: #eecb92;

    --tag-id-text:   #7a3fa6;
    --tag-id-bg:     #f3ecfa;
    --tag-id-border: #dcc2ef;

    --chart-tedori:  #0891a8;
    --chart-expense: #eda100;
    --chart-hoken:   #4a3aa7;
    --chart-shotoku: #eb6834;
    --chart-juumin:  #008300;
    --chart-burden:  #e34948;

    --shadow-sm: 0 1px 2px rgba(16, 34, 51, .05), 0 1px 3px rgba(16, 34, 51, .05);
    --shadow-md: 0 3px 8px rgba(16, 34, 51, .07), 0 10px 24px rgba(16, 34, 51, .07);
  }

  /* site.css がダーク時に :root 以外へ直接色を当てているブロックのうち、このページ内で
     使われる要素(<select>のシェブロン)への影響を打ち消す。ライト時と同じSVGを再指定。
     (.cat--*/.home-rank-list/.app-banner/.mask-pane/.rc-theme-*等の他ブロックは、この
     ページのDOMに該当要素が存在しないため対応不要=grepで確認済み) */
  .medaka-page select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235f6b78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  }
}