/* ============================================================
   mycred-jiko 慰謝料計算ツール
   ── 値はすべて assets/tokens.css のトークンを参照する。
   ── ショートコード [mycred_jiko_calculator] 単体で他テーマの
      ページに置いても成立するよう、サイト本体のCSSには依存しない。
   ============================================================ */

.mycred-jiko-calc {
  box-sizing: border-box;
  background: var(--color-surface-base, #fff);
  border: 1px solid var(--color-border-default, #ECEDF1);
  border-radius: var(--radius-xl, 22px);
  padding: var(--space-10, 28px) var(--space-9, 20px);
  box-shadow: var(--shadow-md);
  font-family: var(--font-family-stack);
  font-size: var(--font-size-base, 16px);
  line-height: var(--line-height-normal, 1.6);
  color: var(--color-text-body, #555A66);
  letter-spacing: var(--letter-spacing-tight, .01em);
}
.mycred-jiko-calc *,
.mycred-jiko-calc *::before,
.mycred-jiko-calc *::after { box-sizing: border-box; }

@media (min-width: 768px) {
  .mycred-jiko-calc { padding: var(--space-12, 56px) var(--space-11, 40px); }
}

.mycred-jiko-calc .mj-calc-title {
  font-size: var(--font-size-4xl, 21px);
  font-weight: var(--font-weight-black, 900);
  line-height: var(--line-height-tight, 1.35);
  margin: 0 0 var(--space-9, 20px);
  text-align: center;
  color: var(--color-text-primary, #1A1A2E);
}

/* ── プリセット ── */
.mycred-jiko-calc .mj-calc-presets { margin-bottom: var(--space-10, 28px); }
.mycred-jiko-calc .mj-calc-presets-label {
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--letter-spacing-wide, .08em);
  color: var(--color-text-muted, #6E7380);
  margin: 0 0 var(--space-5, 10px);
}
.mycred-jiko-calc .mj-calc-presets-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5, 10px);
}
.mycred-jiko-calc .mj-calc-preset-btn {
  display: flex; flex-direction: column; gap: var(--space-2, 2px); align-items: center;
  padding: var(--space-7, 13px) var(--space-4, 8px);
  border: 1.5px solid var(--color-border-default, #ECEDF1);
  border-radius: var(--radius-md, 10px);
  background: var(--color-surface-base, #fff);
  cursor: pointer;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
              background var(--motion-duration-fast) var(--motion-ease-standard),
              transform var(--motion-duration-instant) var(--motion-ease-standard);
}
.mycred-jiko-calc .mj-calc-preset-btn:hover { border-color: var(--color-surface-accent); background: var(--color-surface-tint); }
.mycred-jiko-calc .mj-calc-preset-btn:active { transform: scale(.985); }
.mycred-jiko-calc .mj-calc-preset-btn.active {
  border-color: var(--color-surface-accent);
  background: var(--color-surface-tint);
  box-shadow: inset 0 0 0 1px var(--color-surface-accent);
}
.mycred-jiko-calc .mj-calc-preset-title {
  font-size: var(--font-size-lg, 15px); font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #1A1A2E);
}
.mycred-jiko-calc .mj-calc-preset-desc { font-size: var(--font-size-xs, 12px); color: var(--color-text-muted, #6E7380); }

/* ── 入力 ── */
.mycred-jiko-calc .mj-calc-field { margin-bottom: var(--space-9, 20px); }
.mycred-jiko-calc .mj-calc-field label {
  display: block;
  font-size: var(--font-size-md, 14px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #1A1A2E);
  margin-bottom: var(--space-4, 8px);
}
.mycred-jiko-calc .mj-calc-input {
  width: 100%;
  min-height: 52px;
  padding: var(--space-6, 12px) var(--space-8, 14px);
  border: 1.5px solid var(--color-border-default, #ECEDF1);
  border-radius: var(--radius-md, 10px);
  font-family: inherit;
  font-size: var(--font-size-xl, 16px);   /* iOSの自動ズーム防止も兼ねる */
  color: var(--color-text-primary, #1A1A2E);
  background: var(--color-surface-base, #fff);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
              box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
  -webkit-appearance: none; appearance: none;
}
.mycred-jiko-calc select.mj-calc-input {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236E7380' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-8, 14px) center;
  padding-right: var(--space-11, 40px);
}
.mycred-jiko-calc .mj-calc-input:hover { border-color: var(--color-primitive-coral-300, #F4A595); }
.mycred-jiko-calc .mj-calc-input:focus {
  border-color: var(--color-surface-accent);
  box-shadow: 0 0 0 3px var(--color-primitive-coral-100, #FFE7E0);
  outline: none;
}
.mycred-jiko-calc .mj-calc-input:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 1px; }
.mycred-jiko-calc .mj-calc-optional {
  font-size: var(--font-size-xs, 12px); color: var(--color-text-muted, #6E7380);
  font-weight: var(--font-weight-base, 400); margin-left: var(--space-4, 8px);
}
.mycred-jiko-calc .mj-calc-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6, 12px); }

.mycred-jiko-calc .mj-calc-period-display {
  background: var(--color-surface-tint);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-6, 12px) var(--space-8, 14px);
  font-size: var(--font-size-md, 14px);
  margin-bottom: var(--space-9, 20px);
}
.mycred-jiko-calc .mj-calc-period-display strong {
  color: var(--color-text-accent); font-size: var(--font-size-4xl, 21px);
  font-family: var(--font-family-serif); font-weight: var(--font-weight-black, 900);
}

/* ── 任意項目アコーディオン ── */
.mj-calc-optional-block {
  border: 1px solid var(--color-border-default, #ECEDF1);
  border-radius: var(--radius-md, 10px);
  margin-bottom: var(--space-9, 20px);
  overflow: hidden;
}
.mj-calc-optional-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4, 8px);
  background: var(--color-surface-subtle, #FAFAFB);
  border: none; padding: var(--space-8, 14px);
  cursor: pointer; text-align: left; font-family: inherit;
  font-size: var(--font-size-md, 14px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #1A1A2E);
  transition: color var(--motion-duration-fast) var(--motion-ease-standard),
              background var(--motion-duration-fast) var(--motion-ease-standard);
}
.mj-calc-optional-toggle:hover { color: var(--color-text-accent); background: var(--color-surface-tint); }
.mj-calc-chevron { transition: transform var(--motion-duration-fast) var(--motion-ease-standard); }
.mj-calc-optional-toggle.is-open .mj-calc-chevron { transform: rotate(180deg); }
.mj-calc-optional-body { padding: var(--space-9, 20px) var(--space-8, 14px) var(--space-3, 5px); border-top: 1px solid var(--color-border-soft); }
.mycred-jiko-calc .mj-calc-hint {
  font-size: var(--font-size-sm, 13px); color: var(--color-text-muted, #6E7380);
  margin: calc(var(--space-4) * -1) 0 var(--space-9, 20px); line-height: var(--line-height-loose, 1.9);
}

/* ── エラー ── */
.mycred-jiko-calc .mj-calc-error {
  display: flex; gap: var(--space-4, 8px); align-items: flex-start;
  background: #FFF0EE; color: #B3271A;
  border: 1px solid #F8CFC9;
  border-radius: var(--radius-md, 10px);
  padding: var(--space-6, 12px) var(--space-8, 14px);
  font-size: var(--font-size-md, 14px);
  margin-bottom: var(--space-8, 14px);
}

/* ── ボタン ── */
.mycred-jiko-calc .mj-calc-btn-row { display: flex; gap: var(--space-5, 10px); align-items: stretch; }
.mycred-jiko-calc .mj-calc-submit {
  flex: 1; min-height: 56px;
  background: linear-gradient(135deg, var(--color-primitive-coral) 0%, var(--color-primitive-coral-600) 100%);
  color: var(--color-text-on-accent, #fff);
  border: none; border-radius: var(--radius-pill, 999px);
  padding: var(--space-8, 14px) var(--space-9, 20px);
  font-family: inherit;
  font-size: var(--font-size-2xl, 17px);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--letter-spacing-tight, .01em);
  box-shadow: var(--shadow-accent);
  cursor: pointer;
  transition: transform var(--motion-duration-instant) var(--motion-ease-emphasized),
              box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
              filter var(--motion-duration-fast) var(--motion-ease-standard);
}
.mycred-jiko-calc .mj-calc-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(240,112,96,.38); filter: saturate(1.05); }
.mycred-jiko-calc .mj-calc-submit:active { transform: translateY(0); }
.mycred-jiko-calc .mj-calc-submit.is-loading,
.mycred-jiko-calc .mj-calc-submit:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.mycred-jiko-calc .mj-calc-reset-btn {
  background: var(--color-surface-base, #fff);
  border: 1.5px solid var(--color-border-default, #ECEDF1);
  border-radius: var(--radius-pill, 999px);
  color: var(--color-text-muted, #6E7380);
  padding: var(--space-6, 12px) var(--space-9, 20px);
  font-family: inherit; font-size: var(--font-size-md, 14px); cursor: pointer;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
              color var(--motion-duration-fast) var(--motion-ease-standard);
}
.mycred-jiko-calc .mj-calc-reset-btn:hover { border-color: var(--color-primitive-ink-400); color: var(--color-text-primary); }

/* ── 結果 ── */
.mj-calc-result {
  margin-top: var(--space-11, 40px);
  padding-top: var(--space-10, 28px);
  border-top: 1px solid var(--color-border-soft);
}
.mycred-jiko-calc .mj-calc-result-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8, 14px); margin-bottom: var(--space-8, 14px);
}
.mycred-jiko-calc .mj-calc-result-card {
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-9, 20px) var(--space-8, 14px);
  text-align: center;
}
.mycred-jiko-calc .mj-calc-result-card.jibaiseki { background: var(--color-surface-tint); border: 1px solid var(--color-border-accent); }
.mycred-jiko-calc .mj-calc-result-card.bengoshi {
  background: linear-gradient(135deg, var(--color-primitive-coral) 0%, var(--color-primitive-coral-600) 100%);
  color: #fff; box-shadow: var(--shadow-accent);
}
.mycred-jiko-calc .mj-calc-result-card h4 {
  font-size: var(--font-size-sm, 13px); font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--letter-spacing-tight, .01em);
  margin: 0 0 var(--space-4, 8px); color: var(--color-text-muted, #6E7380);
  line-height: var(--line-height-tight, 1.35);
}
.mycred-jiko-calc .mj-calc-result-card.bengoshi h4 { color: rgba(255,255,255,.9); }
.mycred-jiko-calc .mj-calc-result-card .amount {
  font-size: clamp(var(--font-size-6xl, 28px), 5vw, var(--font-size-7xl, 34px));
  font-weight: var(--font-weight-black, 900);
  color: var(--color-text-accent);
  font-family: var(--font-family-serif);
  line-height: var(--line-height-tight, 1.35);
  word-break: break-all;
}
.mycred-jiko-calc .mj-calc-result-card.bengoshi .amount { color: #fff; }
.mycred-jiko-calc .mj-calc-result-card p { font-size: var(--font-size-xs, 12px); color: var(--color-text-muted, #6E7380); margin: var(--space-3, 5px) 0 0; }
.mycred-jiko-calc .mj-calc-result-card.bengoshi p { color: rgba(255,255,255,.82); }

.mj-calc-diff {
  background: #FFFBEA; border: 1px solid #F0DFAE;
  border-radius: var(--radius-md, 10px);
  padding: var(--space-7, 13px) var(--space-8, 14px);
  text-align: center; font-size: var(--font-size-md, 14px);
  color: #7A5E14; margin-bottom: var(--space-8, 14px);
}
.mj-calc-diff strong { font-size: var(--font-size-4xl, 21px); color: #B3271A; font-family: var(--font-family-serif); }

.mycred-jiko-calc .mj-calc-result-meta {
  font-size: var(--font-size-sm, 13px); color: var(--color-text-muted, #6E7380);
  margin: 0 0 var(--space-6, 12px); text-align: center;
}

.mycred-jiko-calc .mj-calc-detail-toggle { margin-bottom: var(--space-6, 12px); text-align: center; }
.mycred-jiko-calc .mj-calc-detail-toggle button {
  background: none; border: none; color: var(--color-text-accent);
  font-family: inherit; font-size: var(--font-size-md, 14px);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  padding: var(--space-3, 5px);
}
.mycred-jiko-calc .mj-calc-detail-inner {
  background: var(--color-surface-subtle, #FAFAFB);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-9, 20px);
  margin-bottom: var(--space-8, 14px);
}
.mj-calc-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-md, 14px); margin-bottom: var(--space-6, 12px); }
.mj-calc-table th, .mj-calc-table td {
  padding: var(--space-5, 10px) var(--space-3, 5px);
  border-bottom: 1px solid var(--color-border-default, #ECEDF1);
  text-align: right;
}
.mj-calc-table thead th { font-size: var(--font-size-xs, 12px); color: var(--color-text-muted, #6E7380); font-weight: var(--font-weight-bold, 700); }
.mj-calc-table tbody th { text-align: left; font-weight: var(--font-weight-medium, 500); color: var(--color-text-body); white-space: nowrap; }
.mj-calc-table tbody td { font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.mj-calc-table thead th:first-child { text-align: left; }
.mj-calc-table .mj-calc-table-total th,
.mj-calc-table .mj-calc-table-total td {
  border-bottom: none; border-top: 2px solid var(--color-primitive-ink-400);
  font-weight: var(--font-weight-black, 900); color: var(--color-text-primary);
  padding-top: var(--space-6, 12px); font-size: var(--font-size-lg, 15px);
}
.mycred-jiko-calc .mj-calc-detail-row {
  display: flex; justify-content: space-between; gap: var(--space-6, 12px);
  font-size: var(--font-size-sm, 13px); color: var(--color-text-muted, #6E7380);
  padding: var(--space-4, 8px) 0; border-bottom: 1px dashed var(--color-border-default);
}
.mycred-jiko-calc .mj-calc-detail-row:last-of-type { border-bottom: none; }
.mycred-jiko-calc .mj-calc-detail-note {
  font-size: var(--font-size-sm, 13px); color: var(--color-text-muted, #6E7380);
  margin: var(--space-5, 10px) 0 0; line-height: var(--line-height-loose, 1.9);
}

.mycred-jiko-calc .mj-calc-result-cta {
  background: var(--color-surface-tint);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-9, 20px); text-align: center; margin-top: var(--space-3, 5px);
}
.mycred-jiko-calc .mj-calc-result-cta p {
  font-size: var(--font-size-md, 14px); color: var(--color-text-body);
  margin: 0 0 var(--space-6, 12px); line-height: var(--line-height-loose, 1.9);
}
.mycred-jiko-calc .mj-calc-tel-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  background: linear-gradient(135deg, var(--color-primitive-coral) 0%, var(--color-primitive-coral-600) 100%);
  color: #fff; border-radius: var(--radius-pill, 999px);
  padding: var(--space-6, 12px) var(--space-10, 28px);
  font-size: var(--font-size-lg, 15px); font-weight: var(--font-weight-bold, 700);
  text-decoration: none; box-shadow: var(--shadow-accent);
  transition: transform var(--motion-duration-instant) var(--motion-ease-emphasized),
              box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
.mycred-jiko-calc .mj-calc-tel-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(240,112,96,.38); color: #fff; }

.mycred-jiko-calc .mj-calc-disclaimer {
  display: flex; gap: var(--space-5, 10px); align-items: flex-start;
  margin-top: var(--space-10, 28px);
  background: var(--color-surface-subtle, #FAFAFB);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-8, 14px);
}
.mycred-jiko-calc .mj-calc-disclaimer span { flex-shrink: 0; font-size: var(--font-size-xl, 16px); }
.mycred-jiko-calc .mj-calc-disclaimer p {
  font-size: var(--font-size-sm, 13px); color: var(--color-text-muted, #6E7380);
  line-height: var(--line-height-loose, 1.9); margin: 0;
}

@media (max-width: 640px) {
  .mycred-jiko-calc { padding: var(--space-9, 20px) var(--space-8, 14px); }
  .mycred-jiko-calc .mj-calc-presets-grid { grid-template-columns: 1fr; }
  .mycred-jiko-calc .mj-calc-date-row { grid-template-columns: 1fr; }
  .mycred-jiko-calc .mj-calc-result-grid { grid-template-columns: 1fr; }
  .mycred-jiko-calc .mj-calc-btn-row { flex-direction: column; }
  .mycred-jiko-calc .mj-calc-reset-btn { width: 100%; }
  .mj-calc-table th, .mj-calc-table td { padding: var(--space-5, 10px) var(--space-2, 2px); font-size: var(--font-size-sm, 13px); }
}