// Asset structure + future/present value section
const Structure = () => {
  return (
    <section className="structure-section paper-2" id="structure">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">Asset Structure · PV & FV</div>
          <h2 className="section-title">자산 구조와 시간의 관점</h2>
          <p className="section-desc">
            지금의 자산은 오늘의 가격만이 아닙니다.
            10년 뒤, 20년 뒤의 가치와 오늘의 가치를 함께 보아야
            정확한 설계 방향이 보입니다.
          </p>
        </div>

        <div className="structure-grid">
          {/* Left: Asset composition diagram */}
          <div className="reveal">
            <div className="struct-card">
              <div className="struct-card-head">
                <div className="scc-lbl mono">01 · COMPOSITION</div>
                <div className="scc-title serif">자산 구조 진단</div>
              </div>
              <div className="composition">
                <div className="comp-bar">
                  <div className="cb-seg cb-real" style={{width: '68%'}}>
                    <span className="cb-lbl">부동산 68%</span>
                  </div>
                  <div className="cb-seg cb-fin" style={{width: '22%'}}>
                    <span className="cb-lbl">금융 22%</span>
                  </div>
                  <div className="cb-seg cb-cash" style={{width: '10%'}}>
                    <span className="cb-lbl cb-lbl-outside">현금 10%</span>
                  </div>
                </div>
                <div className="comp-legend">
                  <div className="cl"><span className="cl-dot cl-real"/>부동산 자산</div>
                  <div className="cl"><span className="cl-dot cl-fin"/>금융 자산</div>
                  <div className="cl"><span className="cl-dot cl-cash"/>현금성 자산</div>
                </div>
                <p className="comp-note">
                  부동산 비중이 높을수록 세금 시점에 <em>유동성 확보 전략</em>이 함께 필요합니다.
                </p>
              </div>
            </div>
          </div>

          {/* Right: PV / FV chart */}
          <div className="reveal reveal-delay-1">
            <div className="struct-card">
              <div className="struct-card-head">
                <div className="scc-lbl mono">02 · PV & FV</div>
                <div className="scc-title serif">현재가치 · 미래가치</div>
              </div>
              <div className="pvfv-chart">
                <svg viewBox="0 0 400 220" preserveAspectRatio="xMidYMid meet">
                  {/* Grid */}
                  {[0, 1, 2, 3, 4].map(i => (
                    <line key={i} x1="40" x2="380" y1={40 + i * 36} y2={40 + i * 36} stroke="#e3ddd0" strokeWidth="0.5"/>
                  ))}
                  {/* X axis labels */}
                  {['현재', '+5y', '+10y', '+15y', '+20y'].map((lbl, i) => (
                    <text key={i} x={40 + i * 85} y="205" fontSize="10" fill="#6b7885" textAnchor="middle" fontFamily="Pretendard">{lbl}</text>
                  ))}
                  {/* PV area (flat) */}
                  <path d="M40 140 L380 140 L380 184 L40 184 Z" fill="#1a3a52" fillOpacity="0.06"/>
                  <line x1="40" y1="140" x2="380" y2="140" stroke="#1a3a52" strokeWidth="1.5" strokeDasharray="3 3"/>
                  <text x="46" y="134" fontSize="10" fill="#1a3a52" fontFamily="Pretendard" fontWeight="600">현재가치 (PV)</text>
                  {/* FV curve */}
                  <path d="M40 140 Q 130 110 210 84 T 380 40" fill="none" stroke="#d4af37" strokeWidth="2"/>
                  <path d="M40 140 Q 130 110 210 84 T 380 40 L 380 184 L 40 184 Z" fill="#d4af37" fillOpacity="0.08"/>
                  <circle cx="380" cy="40" r="4" fill="#d4af37"/>
                  <text x="374" y="30" fontSize="10" fill="#b8952d" fontFamily="Pretendard" fontWeight="600" textAnchor="end">미래가치 (FV)</text>
                </svg>
                <p className="comp-note">
                  지금은 낮게 평가되어 있지만 <em>미래 가치가 크게 증가할 자산</em>이라면,
                  증여 시점을 앞당기는 것이 유리할 수 있습니다.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* ═══════════════════════════════════════════
             🎯 왜 자산가들은 정기금 평가와 K-신탁을 활용하는가
             · 강의 청중 대상 · 4가지 이유 카드 + 요약 인용
             · PV/FV → 정기금평가 도구로 연결하는 브릿지
             ═══════════════════════════════════════════ */}
        <div className="wealthy-reasons reveal">
          <div className="wr-head">
            <div className="wr-eyebrow mono">Why K-Trust · 자산가들의 선택</div>
            <h3 className="wr-title serif">
              자산가는 왜 <em>정기금 평가와 K-신탁</em>을 활용할까요?
            </h3>
            <p className="wr-desc">
              단순한 절세를 넘어, <strong>네 가지 가치</strong>를 동시에 얻기 때문입니다.
              부모의 <em>통제권</em>과 자녀의 <em>안정</em>, 그리고 법의 <em>안전</em>이 하나의 구조로 정돈됩니다.
            </p>
          </div>

          <div className="wr-cards">
            {/* 01 · 극대화된 절세 효과 */}
            <article className="wr-card">
              <div className="wrc-header">
                <div className="wrc-num serif">01</div>
                <div className="wrc-icon">
                  <svg viewBox="0 0 40 40" width="32" height="32" fill="none">
                    <circle cx="20" cy="20" r="17" stroke="#d4af37" strokeWidth="1.3"/>
                    <text x="20" y="25" textAnchor="middle" fontSize="15" fill="#1a3a52" fontFamily="Noto Serif KR" fontWeight="600">₩</text>
                    <path d="M11 12 L15 8 M25 8 L29 12" stroke="#d4af37" strokeWidth="1.4" strokeLinecap="round"/>
                    <path d="M11 30 L14 33 M26 33 L29 30" stroke="#d4af37" strokeWidth="1.4" strokeLinecap="round"/>
                  </svg>
                </div>
              </div>
              <h4 className="wrc-title serif">극대화된 <em>절세 효과</em></h4>
              <p className="wrc-body">
                화폐의 시간가치 <strong>3.0% 법정 할인율</strong>을 활용해
                미래 자산의 현재가치(PV)로 <em>대폭 할인</em>합니다.
              </p>
              <div className="wrc-highlight">
                <span className="wrch-lbl">EXAMPLE</span>
                <span className="wrch-body serif">20억 자산 → <strong>10~12억</strong>으로 평가</span>
                <span className="wrch-note">증여세 구간 하락 · 세금 절반 가능</span>
              </div>
            </article>

            {/* 02 · 명확한 법적 기준 · 세무 안전성 */}
            <article className="wr-card">
              <div className="wrc-header">
                <div className="wrc-num serif">02</div>
                <div className="wrc-icon">
                  <svg viewBox="0 0 40 40" width="32" height="32" fill="none">
                    <path d="M20 5 L32 10 L32 20 Q32 30 20 35 Q8 30 8 20 L8 10 Z" stroke="#d4af37" strokeWidth="1.3" fill="none"/>
                    <path d="M14 20 L18 24 L26 15" stroke="#1a3a52" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
              </div>
              <h4 className="wrc-title serif">법적 <em>세무 안전성</em></h4>
              <p className="wrc-body">
                편법이 아닌 <strong>상증법 §65</strong>에 명시된
                <em>국가 승인 평가 방식</em>입니다. 세무당국과의 분쟁 없이 안전합니다.
              </p>
              <div className="wrc-highlight">
                <span className="wrch-lbl">LEGAL BASIS</span>
                <span className="wrch-body serif">상증법 §65 · <strong>3.0%</strong> 법정 할인율</span>
                <span className="wrch-note">국세청 승인 · 세무조사 리스크 최소화</span>
              </div>
            </article>

            {/* 03 · 자녀 재산 탕진 방지 · 통제권 유지 */}
            <article className="wr-card">
              <div className="wrc-header">
                <div className="wrc-num serif">03</div>
                <div className="wrc-icon">
                  <svg viewBox="0 0 40 40" width="32" height="32" fill="none">
                    <rect x="10" y="16" width="20" height="18" stroke="#d4af37" strokeWidth="1.3" fill="none"/>
                    <path d="M15 16 L15 12 Q15 8 20 8 Q25 8 25 12 L25 16" stroke="#d4af37" strokeWidth="1.3" fill="none"/>
                    <circle cx="20" cy="24" r="2" fill="#1a3a52"/>
                    <line x1="20" y1="26" x2="20" y2="30" stroke="#1a3a52" strokeWidth="1.8" strokeLinecap="round"/>
                  </svg>
                </div>
              </div>
              <h4 className="wrc-title serif">K-신탁으로 <em>통제권 유지</em></h4>
              <p className="wrc-body">
                원본(소유권)은 <strong>K-신탁에 안전 보관</strong>하고,
                자녀에게는 <em>매월·매년 정기 수익금</em>만 지급되도록 설계합니다.
              </p>
              <div className="wrc-highlight">
                <span className="wrch-lbl">PROTECTION</span>
                <span className="wrch-body serif">자녀 탕진·오용 <strong>방지</strong></span>
                <span className="wrch-note">K-신탁 원본 안전 + 자녀 안정적 현금 흐름</span>
              </div>
            </article>

            {/* 04 · 자녀의 승계 재원 마련 */}
            <article className="wr-card">
              <div className="wrc-header">
                <div className="wrc-num serif">04</div>
                <div className="wrc-icon">
                  <svg viewBox="0 0 40 40" width="32" height="32" fill="none">
                    <path d="M8 22 Q20 12 32 22" stroke="#d4af37" strokeWidth="1.4" fill="none"/>
                    <rect x="5" y="22" width="6" height="12" stroke="#1a3a52" strokeWidth="1.3" fill="none"/>
                    <rect x="29" y="22" width="6" height="12" stroke="#1a3a52" strokeWidth="1.3" fill="none"/>
                    <circle cx="20" cy="14" r="3" fill="#d4af37"/>
                    <text x="20" y="17" textAnchor="middle" fontSize="6" fill="#0f2637" fontFamily="serif" fontWeight="700">₩</text>
                  </svg>
                </div>
              </div>
              <h4 className="wrc-title serif">승계 <em>재원 마련</em></h4>
              <p className="wrc-body">
                자녀는 정기금을 <strong>자기 자금(자금출처 명확)</strong>으로 축적합니다.
                미래 상속세 납부·자산 취득 시 <em>세무 걱정 없이</em> 활용 가능합니다.
              </p>
              <div className="wrc-highlight">
                <span className="wrch-lbl">FUTURE</span>
                <span className="wrch-body serif">자녀 <strong>자금출처 증명</strong> 확보</span>
                <span className="wrch-note">상속세 재원 · 자산 취득 시 안전</span>
              </div>
            </article>
          </div>

          {/* 요약 인용 · K-Trust · K-신탁 슬로건 */}
          <div className="wr-summary">
            <div className="wrs-quote-mark serif">"</div>
            <div className="wrs-body">
              <p className="wrs-lead serif">
                <strong>K-신탁</strong>으로 재산 <em>원본은 안전하게</em> 지키면서
                <span className="wrs-legal">(신탁법 §22)</span>,<br/>
                세법상 할인 공식(3.0%)으로 <em>세금은 대폭 낮추고</em>,<br/>
                <span className="wrs-slogan">통제된 <span className="wrs-han">부富</span>의 승계<span className="wrs-slogan-mark">!!</span></span><br/>
                자녀에게는 <em>안정적 현금 흐름을 합법적으로</em> 만들어주는 —
              </p>
              <p className="wrs-conclude">
                <strong>이것이 K-Trust가 제안하는 최상의 승계 구조입니다.</strong>
              </p>
            </div>
          </div>

          {/* 다음 섹션 연결 브릿지 */}
          <div className="wr-to-next">
            <div className="wrn-line"/>
            <div className="wrn-text mono">
              그렇다면 · 이 <span className="wrn-em">정기금 평가</span>는
              <span className="wrn-em"> 어떻게 계산되는가</span>
            </div>
            <div className="wrn-arrow serif">↓</div>
          </div>
        </div>

        {/* 정기금평가 소개 · 가벼운 개념 안내 */}
        <div className="annuity-intro reveal">
          <div className="ai-left">
            <div className="ai-lbl mono">Annuity Valuation · §65</div>
            <h3 className="ai-title serif">
              <em>정기금평가</em>라는 도구를<br/>
              함께 살펴보시겠습니까?
            </h3>
            <p className="ai-desc">
              임대료·연금·정기적 소득처럼 <strong>미래에 정기적으로 발생할 권리</strong>는
              현재가치로 <em>할인 평가</em>됩니다. K-Trust는 이 정기금평가와 PV/FV 관점을
              활용해, <strong>사전 증여의 시점과 방식</strong>을 세밀하게 설계합니다.
            </p>
          </div>
          <div className="ai-right">
            <div className="ai-formulas">
              {/* PV 공식 · 정기금평가 */}
              <div className="ai-formula">
                <div className="af-lbl">정기금평가 산식 · 상증법 §65</div>
                <div className="af-body serif">
                  PV = <span className="af-frac">
                    <span className="af-num">Σ 정기금액<sub>t</sub></span>
                    <span className="af-den">(1 + r)<sup>t</sup></span>
                  </span>
                </div>
                <div className="af-note">
                  r : 할인율 (현재 <strong>연 3%</strong> 적용) &nbsp;·&nbsp; t : 각 지급 연차
                </div>
              </div>
              {/* FV 공식 · 원본가치평가 */}
              <div className="ai-formula ai-formula-fv">
                <div className="af-lbl">원본가치평가 산식 · Future Value</div>
                <div className="af-body serif">
                  FV = PV × (1 + r)<sup>N</sup>
                </div>
                <div className="af-note">
                  r : 상승률 &nbsp;·&nbsp; N : 경과 연수 &nbsp;·&nbsp; 시간이 흐르면 <strong>이자로 증가</strong>
                </div>
              </div>
            </div>
            <div className="ai-cases">
              <div className="aic-item">
                <span className="aic-dot"/>상업용 부동산 <strong>임대수익권</strong>
              </div>
              <div className="aic-item">
                <span className="aic-dot"/>연금 · 보험 등 <strong>정기 지급 권리</strong>
              </div>
              <div className="aic-item">
                <span className="aic-dot"/>가업승계 시 <strong>정기적 배당권</strong>
              </div>
            </div>
          </div>
        </div>

        {/* ═══════════════════════════════════════════
             🎯 PV ↔ FV · 양방향 미니 시뮬레이터
             강의 초반 · 청중 집중용 인터랙티브 도구
             ═══════════════════════════════════════════ */}
        <PVFVMiniSim/>

        {/* Bottom insights */}
        <div className="structure-insights reveal">
          <div className="si">
            <div className="si-num serif">01</div>
            <div className="si-text">
              <strong>보유 vs. 이전 시점</strong>의 선택이 세대의 부담을 좌우합니다.
            </div>
          </div>
          <div className="si">
            <div className="si-num serif">02</div>
            <div className="si-text">
              같은 자산이라도 <strong>이전 방식</strong>에 따라 결과는 달라집니다.
            </div>
          </div>
          <div className="si">
            <div className="si-num serif">03</div>
            <div className="si-text">
              구조 진단은 <strong>단순한 계산이 아니라 방향의 문제</strong>입니다.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════════
//  🎯 PVFVMiniSim · 양방향 PV↔FV 미니 시뮬레이터
//   · 강의 초반 청중 집중용 인터랙티브 도구
//   · 금액·기간·이율 3가지 실시간 조정
//   · PV → FV : 이자로 증가 (곱하기)
//   · FV → PV : 할인해서 감소 (나누기)
// ═══════════════════════════════════════════════════════════════
const PVFVMiniSim = () => {
  // ─── PV → FV 파라미터 · 자산가 스케일 · 초기값 50억·10년·3.0% ─────
  const [pvBase, setPvBase]   = React.useState(50);      // 억 (자산가 감이 즉시 오는 스케일)
  const [pvYears, setPvYears] = React.useState(10);
  const [pvRate, setPvRate]   = React.useState(0.03);

  // ─── FV → PV 파라미터 · 대칭적 초기값 (자산가 스케일) ─────
  const [fvBase, setFvBase]     = React.useState(100);   // 억 · 미래 100억 시나리오
  const [fvYears, setFvYears]   = React.useState(10);
  const [fvRate, setFvRate]     = React.useState(0.03);

  // ─── 실시간 계산 ─────
  //  PV → FV : 곱하기 (1+r)^N
  const fvResult = pvBase * Math.pow(1 + pvRate, pvYears);
  const fvGain   = fvResult - pvBase;

  //  FV → PV : 나누기 (1+r)^N
  const pvResult    = fvBase / Math.pow(1 + fvRate, fvYears);
  const pvDiscount  = fvBase - pvResult;

  // 억 표시 포맷
  // 자산가 스케일 포맷터 · 소수점 1자리 (전문가 감각)
  // 예: 50 → "50.0", 67.2036 → "67.2", 1234.5678 → "1,234.6"
  const fmt = v => v.toLocaleString('ko-KR', { 
    minimumFractionDigits: 1, 
    maximumFractionDigits: 1 
  });

  return (
    <div className="pvfv-sim reveal">
      <div className="pvfv-sim-head">
        <div className="psh-eyebrow mono">Interactive Demo · Live Simulation</div>
        <h3 className="psh-title serif">
          시간이 자산을 어떻게 바꾸는지 <em>직접 보십시오</em>
        </h3>
        <p className="psh-desc">
          같은 금액도 <strong>어느 방향으로 흐르느냐</strong>에 따라 그 가치가 달라집니다.
          값을 조정하시면 <em>실시간</em>으로 계산됩니다.
        </p>
      </div>

      <div className="pvfv-sim-body">
        {/* ══════ PV → FV · 미래로 (증가) ══════ */}
        <div className="pvfv-panel pvfv-panel-fwd">
          <div className="pp-header">
            <div className="pp-tag pp-tag-gold">PV → FV</div>
            <div className="pp-name serif">미래로 <span className="pp-arrow">→</span></div>
            <div className="pp-op">이자로 <strong>증가</strong> · <em>곱하기</em></div>
          </div>

          <div className="pp-flow">
            <div className="pp-side">
              <div className="pp-side-lbl mono">지금 (PV)</div>
              <div className="pp-side-val serif">
                {fmt(pvBase)}<span>억</span>
              </div>
            </div>
            <div className="pp-wave pp-wave-fwd">
              <svg viewBox="0 0 240 40" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="waveGoldFwd" x1="0" x2="1">
                    <stop offset="0" stopColor="#d4af37" stopOpacity="0.15"/>
                    <stop offset="0.5" stopColor="#d4af37" stopOpacity="0.75"/>
                    <stop offset="1" stopColor="#d4af37" stopOpacity="0.15"/>
                  </linearGradient>
                </defs>
                <path d="M0 20 Q60 5 120 20 T240 20" stroke="url(#waveGoldFwd)" strokeWidth="2" fill="none"/>
                <path d="M0 24 Q60 10 120 24 T240 24" stroke="url(#waveGoldFwd)" strokeWidth="1.5" fill="none" opacity="0.6"/>
              </svg>
              <div className="pp-wave-mark">{pvYears}년 · {(pvRate * 100).toFixed(1)}%</div>
            </div>
            <div className="pp-side pp-side-result">
              <div className="pp-side-lbl mono">미래 (FV)</div>
              <div className="pp-side-val serif pp-side-val-gold">
                {fmt(fvResult)}<span>억</span>
              </div>
              <div className="pp-side-delta">+{fmt(fvGain)}억 증가</div>
            </div>
          </div>

          {/* 컨트롤 · PV 방향 */}
          <div className="pp-controls">
            <div className="pctrl">
              <div className="pc-hdr">
                <label>초기 금액 (PV)</label>
                <div className="pc-val"><strong>{fmt(pvBase)}</strong> <span>억</span></div>
              </div>
              <input type="range" min="1" max="3000" step="1"
                value={pvBase} onChange={e => setPvBase(parseFloat(e.target.value))}
                className="pp-slider pp-slider-gold"/>
              <div className="pc-scale"><span>1억</span><span>500억</span><span>1,500억</span><span>3,000억</span></div>
            </div>

            <div className="pctrl">
              <div className="pc-hdr">
                <label>기간</label>
                <div className="pc-val"><strong>{pvYears}</strong> <span>년</span></div>
              </div>
              <div className="pp-stepper">
                <button onClick={() => setPvYears(Math.max(1, pvYears - 1))} disabled={pvYears <= 1}>−</button>
                <div className="pps-val">{pvYears}년</div>
                <button onClick={() => setPvYears(Math.min(30, pvYears + 1))} disabled={pvYears >= 30}>+</button>
              </div>
            </div>

            <div className="pctrl">
              <div className="pc-hdr">
                <label>이율 (상승률)</label>
                <div className="pc-val"><strong>{(pvRate * 100).toFixed(1)}</strong><span>%</span></div>
              </div>
              <div className="pp-stepper">
                <button onClick={() => setPvRate(Math.max(0.005, +(pvRate - 0.005).toFixed(3)))} disabled={pvRate <= 0.005}>−</button>
                <div className="pps-val">{(pvRate * 100).toFixed(1)}%</div>
                <button onClick={() => setPvRate(Math.min(0.15, +(pvRate + 0.005).toFixed(3)))} disabled={pvRate >= 0.15}>+</button>
              </div>
            </div>
          </div>

          <div className="pp-formula-inline">
            <span className="ppfi-lbl">공식</span>
            <span className="ppfi-body serif">FV = {fmt(pvBase)} × (1 + {(pvRate * 100).toFixed(1)}%)<sup>{pvYears}</sup> = <strong>{fmt(fvResult)}억</strong></span>
          </div>
        </div>

        {/* ══════ FV → PV · 현재로 (감소) ══════ */}
        <div className="pvfv-panel pvfv-panel-bwd">
          <div className="pp-header">
            <div className="pp-tag pp-tag-navy">FV → PV</div>
            <div className="pp-name serif"><span className="pp-arrow">←</span> 현재로</div>
            <div className="pp-op">할인해서 <strong>감소</strong> · <em>나누기</em></div>
          </div>

          <div className="pp-flow">
            <div className="pp-side pp-side-result">
              <div className="pp-side-lbl mono">지금 (PV)</div>
              <div className="pp-side-val serif pp-side-val-navy">
                {fmt(pvResult)}<span>억</span>
              </div>
              <div className="pp-side-delta pp-side-delta-minus">−{fmt(pvDiscount)}억 할인</div>
            </div>
            <div className="pp-wave pp-wave-bwd">
              <svg viewBox="0 0 240 40" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="waveNavyBwd" x1="1" x2="0">
                    <stop offset="0" stopColor="#1a3a52" stopOpacity="0.15"/>
                    <stop offset="0.5" stopColor="#1a3a52" stopOpacity="0.75"/>
                    <stop offset="1" stopColor="#1a3a52" stopOpacity="0.15"/>
                  </linearGradient>
                </defs>
                <path d="M0 20 Q60 5 120 20 T240 20" stroke="url(#waveNavyBwd)" strokeWidth="2" fill="none"/>
                <path d="M0 24 Q60 10 120 24 T240 24" stroke="url(#waveNavyBwd)" strokeWidth="1.5" fill="none" opacity="0.6"/>
              </svg>
              <div className="pp-wave-mark pp-wave-mark-navy">{fvYears}년 · {(fvRate * 100).toFixed(1)}%</div>
            </div>
            <div className="pp-side">
              <div className="pp-side-lbl mono">미래 (FV)</div>
              <div className="pp-side-val serif">
                {fmt(fvBase)}<span>억</span>
              </div>
            </div>
          </div>

          {/* 컨트롤 · FV 방향 */}
          <div className="pp-controls">
            <div className="pctrl">
              <div className="pc-hdr">
                <label>미래 금액 (FV)</label>
                <div className="pc-val"><strong>{fmt(fvBase)}</strong> <span>억</span></div>
              </div>
              <input type="range" min="1" max="3000" step="1"
                value={fvBase} onChange={e => setFvBase(parseFloat(e.target.value))}
                className="pp-slider pp-slider-navy"/>
              <div className="pc-scale"><span>1억</span><span>500억</span><span>1,500억</span><span>3,000억</span></div>
            </div>

            <div className="pctrl">
              <div className="pc-hdr">
                <label>기간</label>
                <div className="pc-val"><strong>{fvYears}</strong> <span>년</span></div>
              </div>
              <div className="pp-stepper">
                <button onClick={() => setFvYears(Math.max(1, fvYears - 1))} disabled={fvYears <= 1}>−</button>
                <div className="pps-val">{fvYears}년</div>
                <button onClick={() => setFvYears(Math.min(30, fvYears + 1))} disabled={fvYears >= 30}>+</button>
              </div>
            </div>

            <div className="pctrl">
              <div className="pc-hdr">
                <label>할인율</label>
                <div className="pc-val"><strong>{(fvRate * 100).toFixed(1)}</strong><span>%</span></div>
              </div>
              <div className="pp-stepper">
                <button onClick={() => setFvRate(Math.max(0.005, +(fvRate - 0.005).toFixed(3)))} disabled={fvRate <= 0.005}>−</button>
                <div className="pps-val">{(fvRate * 100).toFixed(1)}%</div>
                <button onClick={() => setFvRate(Math.min(0.15, +(fvRate + 0.005).toFixed(3)))} disabled={fvRate >= 0.15}>+</button>
              </div>
            </div>
          </div>

          <div className="pp-formula-inline">
            <span className="ppfi-lbl">공식</span>
            <span className="ppfi-body serif">PV = {fmt(fvBase)} ÷ (1 + {(fvRate * 100).toFixed(1)}%)<sup>{fvYears}</sup> = <strong>{fmt(pvResult)}억</strong></span>
          </div>
        </div>
      </div>

      {/* 자문 코멘트 */}
      <div className="pvfv-sim-note">
        <span className="psn-mark">💡</span>
        <div className="psn-body">
          <strong>같은 자산이라도 시간의 방향이 다르면 값이 달라집니다.</strong>
          자산가의 상속·증여 설계는 결국 <em>이 두 흐름을 어느 시점에 어떻게 활용할지</em>의 문제입니다.
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Structure, PVFVMiniSim });