/* TouchClass ROI 계산기 — 공유 스타일 (ko/en/ja include 공통 SSOT)
 * 입력형 계산기: 사이트가 절감/ROI 를 주장하지 않고, 사용자 입력·가정만 계산.
 * 기존에 3개 include 에 인라인 중복되던 .roi-mock-* 도 여기로 통합. */

/* ===== 결과 패널 목업 (기존 인라인에서 이전·통합) ===== */
.roi-mock-header{font-size:13px;font-weight:700;color:#533BFF;text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px;}
.roi-mock-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f0eef5;gap:12px;}
.roi-mock-row:last-child{border-bottom:none;}
.roi-mock-label{font-size:14px;color:#555;font-weight:500;}
.roi-mock-value{font-size:15px;font-weight:700;color:#292016;text-align:right;}
.roi-mock-value--red{color:#dc2626;}
.roi-mock-value--green{color:#16a34a;}
.roi-mock-total{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:16px;background:#f8f7ff;border-radius:12px;gap:12px;}
.roi-mock-total .roi-mock-label{font-size:15px;font-weight:700;color:#292016;}
.roi-mock-total .roi-mock-value{font-size:22px;}
.roi-mock-bar{height:8px;background:#eee;border-radius:4px;margin-top:8px;overflow:hidden;}
.roi-mock-bar-fill{height:100%;border-radius:4px;background:#533BFF;transition:width .2s ease;}

/* ===== 계산기 2컬럼 그리드 (입력 좌 / 결과 우 sticky) ===== */
.roi-calc__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;
  max-width:var(--tc-max-w,1200px);margin:0 auto;padding:0 24px;align-items:start;}
.roi-calc__inputs{min-width:0;}
.roi-calc__result{min-width:0;position:sticky;top:100px;}

/* ===== 입력 (this page 는 _form_assets.css 미로드 → 자체 정의) ===== */
.roi-fieldset{border:0;margin:0 0 32px;padding:0;}
.roi-fieldset__legend{font-size:13px;font-weight:700;color:#533BFF;text-transform:uppercase;
  letter-spacing:.5px;margin:0 0 6px;padding:0;}
.roi-fieldset__hint{font-size:12px;color:#8a8a8a;margin:0 0 16px;}
.roi-label{display:block;font-size:14px;font-weight:600;color:#1a1a2e;margin-bottom:6px;line-height:1.4;}
.roi-input{height:44px;padding:10px 14px;font-size:14px;border:1px solid #e2e0ea;border-radius:10px;
  box-sizing:border-box;width:100%;background:#fff;color:#292016;transition:border-color .15s ease,box-shadow .15s ease;}
.roi-input:hover{border-color:#c9c5d8;}
.roi-input:focus{outline:none;border-color:#533BFF;box-shadow:0 0 0 3px rgba(83,59,255,.12);}
.roi-affix{position:relative;display:block;}
.roi-affix .roi-input{text-align:right;padding-right:40px;}
.roi-affix__unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:13px;color:#555;pointer-events:none;}

/* 비용 + 그 항목 절감률을 한 행에 (가정=사용자 입력임을 라인마다 명시) */
.roi-cost-row{display:grid;grid-template-columns:minmax(0,1fr) 170px 104px;gap:10px 16px;
  align-items:end;padding:16px 0;border-bottom:1px solid #f0eef5;}
.roi-cost-row__label{align-self:end;font-size:14px;font-weight:600;color:#1a1a2e;line-height:1.4;}
.roi-cost-row__calc{grid-column:1/-1;text-align:right;font-size:12px;color:#8a8a8a;margin-top:2px;}
.roi-scale-row{margin:0 0 8px;}
.roi-scale-row .roi-affix{max-width:220px;}

.roi-price-link{display:inline-block;margin-top:8px;font-size:13px;color:#533BFF;text-decoration:underline;}
.roi-reset{margin-top:8px;background:none;border:0;color:#555;font-size:13px;text-decoration:underline;cursor:pointer;padding:4px 0;}

/* ===== 결과 카드 ===== */
.roi-result-card{background:#fff;border:1px solid #ece9f5;border-radius:16px;
  padding:28px 24px;box-shadow:0 12px 40px -8px rgba(17,23,95,.06);}
.roi-result-eyebrow{font-size:12px;font-weight:600;letter-spacing:.04em;color:#555;margin:0 0 12px;}
.roi-result-hero{padding:20px;background:#f8f7ff;border-radius:12px;margin-bottom:16px;}
.roi-result-hero__label{font-size:13px;font-weight:600;color:#555;margin-bottom:6px;}
.roi-result-hero__num{font-size:44px;font-weight:800;line-height:1.1;color:#16a34a;letter-spacing:-1px;}
.roi-result-hero__cap{font-size:12px;color:#555;margin-top:6px;}
.roi-estimate-pill{display:inline-block;padding:2px 8px;border-radius:6px;background:#f0eef5;
  color:#666;font-size:11px;font-weight:600;margin-left:8px;vertical-align:middle;}
.roi-empty{font-size:14px;font-weight:600;color:#555;line-height:1.5;}
.roi-empty small{display:block;margin-top:6px;font-size:12px;font-weight:400;color:#8a8a8a;}

.roi-result-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.roi-metric{padding:14px;background:#faf9fc;border:1px solid #ece9f5;border-radius:10px;text-align:center;}
.roi-metric__num{font-size:24px;font-weight:700;color:#11175f;line-height:1;}
.roi-metric__label{font-size:11px;color:#555;margin-top:6px;}

.roi-formula{margin-top:16px;font-size:13px;color:#555;}
.roi-formula>summary{cursor:pointer;font-weight:600;color:#11175f;padding:8px 0;list-style:none;}
.roi-formula>summary::-webkit-details-marker{display:none;}
.roi-formula>summary::marker{content:'';}
.roi-formula__body{padding:8px 0 4px;line-height:1.7;}
.roi-formula__body code{background:#f6f5fb;border-radius:4px;padding:1px 6px;font-size:12px;color:#292016;}
.roi-formula__body ul{margin:8px 0 0;padding-left:18px;}
.roi-disclaimer{margin-top:16px;padding-top:14px;border-top:1px solid #f0eef5;
  font-size:12px;line-height:1.6;color:#8a8a8a;}

/* ===== 빈 상태 토글 (절감액 0 → 히어로 안내, ₩0 큰숫자 숨김) ===== */
.roi-empty{display:none;}
[data-roi-result].is-empty .roi-empty{display:block;}
[data-roi-result].is-empty .roi-result-hero__num{display:none;}

/* ===== 반응형 ===== */
@media(max-width:800px){
  .roi-mock-header{font-size:12px;margin-bottom:10px;}
  .roi-mock-row{padding:8px 0;}
  .roi-mock-label{font-size:12px;}
  .roi-mock-value{font-size:13px;}
  .roi-mock-total{padding:12px;}
  .roi-mock-total .roi-mock-value{font-size:18px;}

  .roi-calc__grid{grid-template-columns:1fr;gap:24px;padding:0 20px;}
  .roi-calc__result{position:static;}
  .roi-cost-row{grid-template-columns:1fr 1fr;}
  .roi-cost-row__label{grid-column:1/-1;}
  .roi-result-hero__num{font-size:32px;}
}