/* 소상공인 계산기 3차 — 공통 UI */
.b3-app { margin-top:18px; }
.b3-calc { background:var(--card); border-radius:var(--radius); padding:24px 22px; box-shadow:0 4px 20px rgba(27,39,64,.07); }
.b3-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.b3-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.b3-field.wide { grid-column:1 / -1; }
.b3-field label { font-size:.84rem; font-weight:750; color:var(--ink); }
.b3-field .hint { display:block; margin-top:2px; font-size:.72rem; font-weight:450; color:var(--ink-soft); }
.b3-input { display:flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; background:#FAFBFE; overflow:hidden; transition:border-color .15s,box-shadow .15s; }
.b3-input:focus-within { border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); background:#fff; }
.b3-input input,.b3-input select,.b3-input textarea { width:100%; min-width:0; border:0; outline:0; background:transparent; padding:12px 13px; color:var(--ink); font:inherit; font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; }
.b3-input textarea { min-height:104px; resize:vertical; line-height:1.55; font-weight:600; }
.b3-input input { text-align:right; }
.b3-input select { appearance:none; cursor:pointer; }
.b3-input .unit { flex:none; padding-right:13px; color:var(--ink-soft); font-size:.82rem; font-weight:650; }
.b3-check { display:flex; align-items:center; gap:9px; min-height:47px; padding:11px 13px; border:1.5px solid var(--line); border-radius:12px; background:#FAFBFE; font-size:.88rem; font-weight:700; cursor:pointer; }
.b3-check input { width:18px; height:18px; accent-color:var(--primary); }
.b3-guide { grid-column:1 / -1; margin:2px 0 0; padding:11px 13px; border-radius:11px; background:var(--primary-soft); color:#3155B8; font-size:.77rem; line-height:1.55; }
.b3-guide a { color:inherit; font-weight:800; }
.b3-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.b3-action { border:1.5px solid var(--line); border-radius:11px; background:#fff; color:var(--ink); padding:10px 15px; font:inherit; font-size:.84rem; font-weight:800; cursor:pointer; }
.b3-action.primary { border-color:var(--primary); background:var(--primary); color:#fff; }
.b3-extra { margin-top:16px; }
.b3-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.b3-kpi { padding:14px 12px; border:1.5px solid var(--line); border-radius:13px; background:var(--card); }
.b3-kpi span { display:block; font-size:.72rem; color:var(--ink-soft); }
.b3-kpi b { display:block; margin-top:5px; font-size:1.02rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.b3-kpi.good b { color:var(--money); }
.b3-kpi.warn b { color:#C88414; }
.b3-kpi.bad b { color:var(--danger); }
.b3-funnel { display:grid; grid-template-columns:repeat(4,1fr); align-items:stretch; gap:7px; margin:15px 0; }
.b3-funnel div { padding:12px 7px; border-radius:11px; background:var(--primary-soft); text-align:center; font-size:.72rem; color:var(--ink-soft); }
.b3-funnel b { display:block; margin-top:4px; color:var(--primary); font-size:1rem; }
.b3-mix { margin:14px 0; }
.b3-mix-row { display:grid; grid-template-columns:90px 1fr 60px; gap:8px; align-items:center; margin:8px 0; font-size:.78rem; }
.b3-mix-track { height:10px; border-radius:999px; background:#E9EDF4; overflow:hidden; }
.b3-mix-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#6D92F1); }
.b3-mix-row b { text-align:right; font-variant-numeric:tabular-nums; }
.b3-table { width:100%; border-collapse:collapse; margin:12px 0; font-size:.8rem; }
.b3-table th,.b3-table td { padding:9px 8px; border-bottom:1px solid var(--line); text-align:right; }
.b3-table th:first-child,.b3-table td:first-child { text-align:left; }
.b3-table th { color:var(--ink-soft); font-size:.72rem; }
.b3-policy-list { display:grid; gap:10px; margin-top:14px; }
.b3-policy { padding:15px; border:1.5px solid var(--line); border-radius:13px; background:var(--card); }
.b3-policy h3 { margin:0 0 5px; font-size:.96rem; }
.b3-policy p { margin:0 0 8px; color:var(--ink-soft); font-size:.78rem; line-height:1.5; }
.b3-policy a { color:var(--primary); font-size:.78rem; font-weight:800; }
.b3-source { margin-top:12px; padding:11px 13px; border-radius:11px; background:#FFF8EC; color:#7A6335; font-size:.74rem; line-height:1.55; }
.b3-source a { color:inherit; font-weight:800; }
.b3-canvas { width:100%; height:230px; border:1.5px solid var(--line); border-radius:13px; background:var(--card); }
.b3-sensitive { padding:14px 16px; border-left:4px solid var(--danger); border-radius:0 12px 12px 0; background:#FFF5F5; color:#7A3E3E; font-size:.8rem; line-height:1.6; }
.b3-empty { padding:18px; border:1.5px dashed var(--line); border-radius:12px; color:var(--ink-soft); text-align:center; font-size:.84rem; }
.stock-disclaimer { margin:0 0 16px; padding:12px 14px; border:1px solid #F5C5BB; border-radius:12px; background:#FFF1EE; color:#7B3E34; font-size:.8rem; font-weight:700; line-height:1.55; }
.stock-disclaimer small { display:block; margin-top:3px; color:#956258; font-weight:500; }
.stock-name { margin:0 0 16px; padding:14px 15px; border:1.5px solid var(--line); border-radius:13px; background:#F5F8FF; }
.stock-name > label { display:block; font-weight:700; font-size:.92rem; color:var(--ink); margin-bottom:9px; }
.stock-name .hint { display:block; font-weight:500; font-size:.8rem; color:#64748F; margin-top:2px; }
.stock-name input { width:100%; min-width:0; padding:11px 12px; border:1.5px solid var(--line); border-radius:10px; font:inherit; }
.stock-result { margin-top:16px; }
.stock-result .stub-final .amount.negative { color:var(--danger); }
.stock-result .stub-final .amount.positive { color:var(--money); }
.stock-note { margin-top:12px; color:var(--ink-soft); font-size:.76rem; line-height:1.6; }
.stock-note strong { color:var(--ink); }
.stock-table-wrap { overflow-x:auto; margin:14px 16px 0; }
.stock-chart { display:block; width:calc(100% - 32px); height:270px; margin:14px 16px 0; border:1.5px solid var(--line); border-radius:13px; background:#fff; }
.stock-callout { margin-top:14px; padding:14px; border-radius:12px; background:var(--primary-soft); color:#2D4FA8; font-size:.8rem; line-height:1.6; }
.stock-callout.warn { background:#FFF5E6; color:#7A5A1D; }
.stock-source { margin-top:13px; padding:11px 13px; border-radius:11px; background:#F5F7FB; color:var(--ink-soft); font-size:.74rem; line-height:1.6; }
.stock-source a { color:var(--primary); font-weight:750; }
.stock-hub-intro { padding:20px; border-radius:16px; background:linear-gradient(135deg,#163A74,#3367C7); color:#fff; }
.stock-hub-intro p { margin:8px 0 0; color:#F3F7FF; line-height:1.7; }
.stock-hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
.stock-hub-grid a { min-height:116px; padding:16px; border:1.5px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); text-decoration:none; transition:transform .15s,box-shadow .15s; }
.stock-hub-grid a:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(27,39,64,.10); }
.stock-hub-grid b,.stock-hub-grid small { display:block; }
.stock-hub-grid b { margin:7px 0 5px; }
.stock-hub-grid small { color:var(--ink-soft); line-height:1.45; }

@media (max-width:900px) {
  .stock-hub-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:620px) {
  .b3-grid { grid-template-columns:1fr; }
  .b3-field.wide,.b3-guide { grid-column:auto; }
  .b3-kpis { grid-template-columns:1fr; }
  .b3-funnel { grid-template-columns:1fr 1fr; }
  .b3-mix-row { grid-template-columns:76px 1fr 54px; }
  .stock-hub-grid { grid-template-columns:1fr; }
  .stock-table-wrap { margin-left:10px; margin-right:10px; }
  .stock-chart { width:calc(100% - 20px); margin-left:10px; margin-right:10px; }
}