/**
 * 材料積算ツール スタイル（ビルド不要・app/estimator.php が enqueue）
 * デザイントークンは app.css の :root カスタムプロパティを参照（fallback 併記）。
 * 対象: 商品詳細の簡易版 [data-can-estimator] / /tools/ フル版 [data-can-estimator-full]
 */

/* 見出しは商品ページ・/tools/ とも can-prod-head--inline（Precaution 等と同型・左揃え）のため、
   ボックスも中央寄せせず左起点に揃える（Kent指定 2026-07-13） */
.can-est {
  border: 1px solid #e3e3df;
  background: var(--color-bg, #fff);
  padding: clamp(20px, 3.2vw, 36px);
  max-width: 903px; /* CONTACT フォームと同じ最大幅 */
  margin-inline: 0;
}

.can-est__lead {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-ink-soft, #4f4f4f);
  margin: 0 0 18px;
}

/* ---- 入力列 ---- */

.can-est__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-bottom: 6px;
}

.can-est__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
  flex: 1 1 150px;
  max-width: 220px;
}

.can-est__field > span:first-child {
  font-size: 13px;
  color: var(--color-cta-secondary, #5d5d5d);
}

.can-est__field > span:first-child small {
  font-size: 11px;
  color: var(--color-ink-mute, #707070);
}

.can-est__field select,
.can-est__input-wrap input {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--color-cta-secondary, #5d5d5d);
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  padding: 6px 2px;
  width: 100%;
  color: var(--color-ink, #000);
}

.can-est__field select:focus,
.can-est__input-wrap input:focus {
  outline: none;
  border-bottom-color: var(--color-accent, #687675);
  box-shadow: 0 1px 0 var(--color-accent, #687675);
}

.can-est__field--wide { max-width: 320px; }

.can-est__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.can-est__input-wrap input::-webkit-outer-spin-button,
.can-est__input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.can-est__input-wrap input[type='number'] { -moz-appearance: textfield; }

.can-est__unit {
  position: absolute;
  right: 2px;
  font-size: 12px;
  color: var(--color-ink-mute, #707070);
  pointer-events: none;
}

/* ---- 結果 ---- */

.can-est__result {
  margin: 18px 0 0;
  border-top: 1px solid #e3e3df;
  padding-top: 14px;
}

.can-est__result h4 {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-heading, #2e3b3b);
  margin: 18px 0 6px;
}

.can-est__result h4:first-child { margin-top: 0; }

.can-est__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dotted #d9d9d4;
}

.can-est__row-label {
  font-size: 13.5px;
  color: var(--color-ink-soft, #4f4f4f);
}

.can-est__row-label small,
.can-est__row-val small {
  font-size: 11px;
  color: var(--color-ink-mute, #707070);
  font-weight: 400;
}

.can-est__row-val {
  font-size: 19px;
  color: var(--color-heading, #2e3b3b);
  white-space: nowrap;
}

.can-est__w { margin-left: 8px; }

.can-est__note {
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--color-ink-mute, #707070);
  margin: 12px 0 0;
}

/* ---- アクション ---- */

.can-est__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 20px;
}

.can-est__actions .can-btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.can-est__more {
  font-size: 12.5px;
  color: var(--color-cta-secondary, #5d5d5d);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.can-est__more:hover { color: var(--color-accent, #687675); }

/* ---- /tools/ フル版のシリーズ・補正列 ---- */

.can-est__shapes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .can-est { padding: 18px 16px; }
  .can-est__field { max-width: none; flex-basis: calc(50% - 11px); }
  .can-est__field--wide { flex-basis: 100%; }
  .can-est__row dd { font-size: 17px; }
}

/* ---- /contact/ 積算ツール案内ポップアップ（セッション1回・Kent 2026-07-14） ---- */

.can-est-nudge {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.can-est-nudge__scrim {
  position: absolute;
  inset: 0;
  background: rgba(30, 33, 33, 0.55);
}

.can-est-nudge__panel {
  position: relative;
  background: #fff;
  max-width: 480px;
  width: 100%;
  padding: clamp(24px, 4vw, 36px);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(20, 24, 24, 0.3);
  animation: can-img-fade 0.25s ease;
}

.can-est-nudge__panel h3 {
  font-size: 19px;
  color: var(--color-heading, #2e3b3b);
  margin: 0 0 12px;
}

.can-est-nudge__panel p {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--color-ink-soft, #4f4f4f);
  margin: 0 0 20px;
}

.can-est-nudge__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.can-est-nudge__skip {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  color: var(--color-ink-mute, #707070);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.can-est-nudge__skip:hover { color: var(--color-accent, #687675); }