/* =========================
   整え舎：簡易NISAシミュレーター
   ========================= */

.se-sim{
  --se-bg: #fffdf9;
  --se-paper: #fcfaf6;
  --se-line: #e7e1d6;
  --se-line-soft: #efe9df;
  --se-text: #2f3747;
  --se-muted: #6b7280;
  --se-accent: #b7791f;      /* 整え舎らしい灯り系アクセント */
  --se-accent-dark: #8f5f17;
  --se-navy: #1f2a44;        /* メインボタン */
  --se-navy-dark: #162033;
  --se-white: #ffffff;
  --se-shadow: 0 8px 24px rgba(47, 55, 71, 0.08);

  border: 1px solid var(--se-line);
  border-radius: 20px;
  padding: 20px;
  margin: 16px 0;
  background: linear-gradient(180deg, #fffdfa 0%, #fffaf4 100%);
  box-shadow: 0 4px 18px rgba(47, 55, 71, 0.05);
  color: var(--se-text);
}

.se-sim__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  align-items:end;
}

.se-sim__field span{
  display:block;
  font-size:13px;
  font-weight:600;
  color: var(--se-text);
  opacity: .9;
  margin-bottom: 7px;
  letter-spacing: .02em;
}

/* 入力欄 */
.se-sim__field input,
.se-sim__field select{
  width:100%;
  max-width:100%;
  min-height:48px;
  padding: 11px 14px;
  border:1px solid var(--se-line);
  border-radius:14px;
  background:#fff;
  color: var(--se-text);
  font-size:16px;
  line-height:1.4;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:none;
}

.se-sim__field input:focus,
.se-sim__field select:focus{
  outline:none;
  border-color: rgba(183,121,31,.55);
  box-shadow: 0 0 0 4px rgba(183,121,31,.12);
  background:#fffefb;
}

/* ボタン群 */
.se-sim__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 2px;
}

/* TT4対策を含めて強めに指定 */
.se-sim .se-sim__actions button,
.se-sim .se-btn-group button,
.se-sim button.se-calc,
.se-sim button.se-reset{
  appearance:none;
  -webkit-appearance:none;
  border-radius:14px;
  min-height:44px;
  padding: 10px 16px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.02em;
  cursor:pointer;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .08s ease,
    box-shadow .2s ease,
    opacity .2s ease;
  opacity:1 !important;
  box-shadow:none;
}

/* 計算する：主ボタン */
.se-sim .se-sim__actions button.se-calc,
.se-sim button.se-calc{
  background: var(--se-navy) !important;
  color: var(--se-white) !important;
  border: 1px solid var(--se-navy) !important;
  box-shadow: 0 6px 16px rgba(31, 42, 68, 0.18);
}

.se-sim .se-sim__actions button.se-calc:hover,
.se-sim button.se-calc:hover{
  background: var(--se-navy-dark) !important;
  border-color: var(--se-navy-dark) !important;
  color: var(--se-white) !important;
  transform: translateY(-1px);
}

/* 初期値に戻す：副ボタン */
.se-sim .se-sim__actions button.se-reset,
.se-sim .se-btn-group button,
.se-sim button.se-reset{
  background: #fff8ee !important;
  color: var(--se-accent-dark) !important;
  border: 1px solid #e7cfa3 !important;
}

.se-sim .se-sim__actions button.se-reset:hover,
.se-sim .se-btn-group button:hover,
.se-sim button.se-reset:hover{
  background: #fff1d9 !important;
  border-color: #d9b777 !important;
  color: #7a4f10 !important;
  transform: translateY(-1px);
}

/* 無効状態 */
.se-sim .se-sim__actions button:disabled,
.se-sim .se-btn-group button:disabled,
.se-sim button:disabled{
  opacity:.55 !important;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* 結果 */
.se-sim__result{
  margin-top:16px;
}

.se-kpis{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-bottom:12px;
}

.se-kpi{
  border:1px solid var(--se-line-soft);
  border-radius:16px;
  padding:14px;
  background: linear-gradient(180deg, #fffdfa 0%, #faf7f1 100%);
}

.se-kpi__label{
  font-size:12px;
  color: var(--se-muted);
  opacity:.95;
}

.se-kpi__value{
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight:700;
  color: var(--se-text);
  margin-top:8px;
  line-height:1.35;
}

.se-chartWrap{
  border:1px solid var(--se-line-soft);
  border-radius:16px;
  padding:12px;
  background:#fff;
}

.se-note{
  font-size:12px;
  color: var(--se-muted);
  margin-top:10px;
  line-height:1.7;
}

/* 既存のボタン色指定は整理して統一 */
.se-sim .se-btn-group button{
  background:#fff8ee !important;
  border:1px solid #e7cfa3 !important;
  color:#8f5f17 !important;
}

.se-sim .se-btn-group button:hover{
  background:#fff1d9 !important;
}

/* モバイル */
@media (max-width:680px){
  .se-sim{
    padding:16px;
    border-radius:16px;
  }

  .se-sim__grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .se-kpis{
    grid-template-columns:1fr;
  }

  .se-sim .se-sim__actions button,
  .se-sim .se-btn-group button,
  .se-sim button.se-calc,
  .se-sim button.se-reset{
    width:100%;
    justify-content:center;
  }
}