/* ===== 投資計算ラボ — 計算ツールページ 共通スタイル ===== */
.page { padding: 28px 0 64px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-500); margin-bottom: 22px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb i { font-size: 14px; color: var(--ink-400); }
.breadcrumb .cur { color: var(--ink-700); font-weight: 700; }

/* title */
.tool-title { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
.tool-title .big-ic {
  width: 72px; height: 72px; border-radius: 18px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 40px;
}
.tool-title h1 { margin: 0 0 8px; font-size: 38px; font-weight: 800; letter-spacing: .01em; }
.tool-title p { margin: 0; font-size: 15.5px; color: var(--ink-600); max-width: 50em; line-height: 1.65; }

/* layout */
.calc-grid { display: grid; grid-template-columns: 420px 1fr; gap: 24px; align-items: start; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 26px; }
.panel-title { font-size: 18px; font-weight: 800; margin: 0 0 20px; }

/* input rows */
.field { display: grid; grid-template-columns: 1fr 200px; gap: 14px; align-items: center; margin-bottom: 16px; }
.field-label { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 600; color: var(--ink-700); }
.field-label .f-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; flex-shrink: 0; }
.field-label .help {
  width: 17px; height: 17px; border-radius: 50%; background: var(--line); color: var(--ink-500);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; cursor: help; flex-shrink: 0;
}
.fi-green { background: var(--green-50); color: var(--green-dark); }
.fi-blue { background: var(--primary-50); color: var(--primary); }
.fi-purple { background: var(--purple-50); color: var(--purple); }
.fi-amber { background: var(--amber-50); color: var(--amber); }
.fi-coral { background: var(--coral-50); color: #E8475C; }

.input-unit {
  display: flex; align-items: center; background: var(--bg-soft);
  border: 1.5px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: .14s;
}
.input-unit:focus-within { border-color: var(--primary-light); background: #fff; box-shadow: 0 0 0 4px var(--primary-50); }
.input-unit input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  padding: 12px 14px; font-size: 17px; font-weight: 700; text-align: right; color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.input-unit .unit { padding: 0 14px 0 4px; font-size: 14px; font-weight: 600; color: var(--ink-500); white-space: nowrap; }

/* segmented */
.seg { display: flex; background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 3px; gap: 3px; }
.seg button { flex: 1; padding: 9px 0; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--ink-500); transition: .14s; }
.seg button.on { background: var(--primary); color: #fff; box-shadow: var(--sh-sm); }

.btn-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; margin-top: 22px; }
.calc-note { font-size: 12px; color: var(--ink-400); margin-top: 14px; }

/* result */
.result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.result-label { font-size: 15px; font-weight: 700; color: var(--ink-600); }
.result-big { font-size: 50px; font-weight: 800; color: var(--green-dark); line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.result-big .yen { font-size: 26px; font-weight: 700; margin-left: 4px; color: var(--ink-700); }
.result-big.coral { color: #E8475C; }
.result-big.blue { color: var(--primary); }
.multiple { display: inline-flex; align-items: center; gap: 6px; background: var(--green-50); color: var(--green-dark); border: 1px solid var(--green-100); border-radius: var(--r-md); padding: 9px 14px; font-size: 14px; font-weight: 800; white-space: nowrap; }
.multiple.coral { background: var(--coral-50); color: #E8475C; border-color: #FFD9D9; }
.multiple.blue { background: var(--primary-50); color: var(--primary); border-color: var(--primary-100); }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 8px; }
.stat-row.two { grid-template-columns: repeat(2, 1fr); }
.stat {
  display: flex; align-items: center; gap: 12px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 15px;
}
.stat .s-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.stat > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.stat .s-label { font-size: 12px; color: var(--ink-500); font-weight: 600; }
.stat .s-val { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 1px; }

/* chart */
.chart-card { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.chart-head h3 { margin: 0; font-size: 15px; font-weight: 800; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-600); }
.legend .ln { width: 22px; height: 0; border-top-width: 3px; border-top-style: solid; border-radius: 3px; }
.legend .g { border-color: var(--green); }
.legend .b { border-color: var(--primary); border-top-style: dashed; }
.legend .c { border-color: var(--coral); border-top-style: dashed; }
.chart-wrap { position: relative; width: 100%; }
.chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }

/* callout (notice line above results / formula) */
.callout {
  display: flex; gap: 12px; align-items: flex-start; background: var(--primary-50);
  border: 1px solid var(--primary-100); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 20px;
}
.callout i { color: var(--primary); font-size: 20px; flex-shrink: 0; }
.callout p { margin: 0; font-size: 12.5px; color: var(--ink-600); line-height: 1.6; }
.callout.amber { background: var(--amber-50); border-color: #FDE9B5; }
.callout.amber i { color: var(--amber); }

/* secondary grids */
.below-grid { display: grid; grid-template-columns: 420px 1fr; gap: 24px; margin-top: 24px; align-items: start; }
.read-list { display: grid; gap: 16px; }
.read-item { display: flex; align-items: flex-start; gap: 13px; }
.read-item .r-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.read-item h4 { margin: 0 0 2px; font-size: 14px; font-weight: 700; }
.read-item p { margin: 0; font-size: 12.5px; color: var(--ink-500); line-height: 1.55; }

.related { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.related-card { display: block; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; transition: .16s; }
.related-card:hover { background: #fff; border-color: var(--primary-light); box-shadow: var(--sh-md); transform: translateY(-2px); }
.related-card .rc-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 25px; margin-bottom: 12px; }
.related-card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.related-card p { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-500); line-height: 1.55; }
.related-card .rc-go { color: var(--primary); font-size: 19px; }

/* alert */
.alert { display: flex; gap: 14px; background: var(--primary-50); border: 1px solid var(--primary-100); border-radius: var(--r-md); padding: 18px 20px; margin-top: 24px; }
.alert i { color: var(--primary); font-size: 22px; flex-shrink: 0; }
.alert .a-body h4 { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--primary); }
.alert .a-body p { margin: 0; font-size: 13px; color: var(--ink-600); line-height: 1.6; }

.sec-label { font-size: 16px; font-weight: 800; margin: 0 0 16px; }

/* 入力グループ見出し（複数ロット等） */
.field-group-label { font-size: 12.5px; font-weight: 800; color: var(--ink-500); margin: 6px 0 10px; letter-spacing: .02em; }

/* 内訳バー（手取り vs 税金 など） */
.breakdown { margin: 22px 0 6px; }
.bd-bar { display: flex; height: 18px; border-radius: var(--r-pill); overflow: hidden; background: var(--line-soft); }
.bd-seg { height: 100%; transition: width .25s ease; }
.bd-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.bd-leg { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-600); }
.bd-leg .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.bd-leg b { color: var(--ink-900); font-variant-numeric: tabular-nums; margin-left: 2px; }

/* 共有バー */
.share-bar { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.share-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--ink-600); }
.share-label i { font-size: 17px; color: var(--ink-400); }
.share-btns { display: flex; gap: 9px; flex-wrap: wrap; }
.share-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding: 9px 15px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; color: var(--ink-700); transition: .15s; cursor: pointer; }
.share-btn:hover { border-color: var(--primary-light); color: var(--primary); background: var(--primary-50); }
.share-btn i { font-size: 16px; }
.share-btn.copied { background: var(--green-50); color: var(--green-dark); border-color: var(--green-100); }
.share-btn.x { background: #111827; color: #fff; border-color: #111827; gap: 5px; }
.share-btn.x:hover { background: #000; color: #fff; }
.share-btn.x .x-logo { font-weight: 900; font-size: 14px; font-family: Arial, sans-serif; }
.share-btn.line { background: #06C755; color: #fff; border-color: #06C755; }
.share-btn.line:hover { background: #05b34c; color: #fff; }
@media (max-width: 760px) {
  .share-bar { gap: 12px; }
  .share-btns { width: 100%; }
  .share-btn { flex: 1; justify-content: center; }
}

@media (max-width: 980px) {
  .calc-grid, .below-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tool-title h1 { font-size: 28px; }
  .tool-title .big-ic { width: 56px; height: 56px; font-size: 30px; border-radius: 14px; }
  .result-big { font-size: 38px; }
  .stat-row, .stat-row.two { grid-template-columns: 1fr; }
  .field { grid-template-columns: 1fr; gap: 9px; }
  .input-unit input { font-size: 16px; }
  .related { grid-template-columns: 1fr; }
  .panel { padding: 20px; }
}