/* =============================================================
   세무 신고 › 사업소득 대장 — 맥 고밀도 화면. 범위: #business_income-content 안쪽만, 값은 ui-tokens.css 에서만.
   머리 한 줄(제목 · 달 넘기기 · 저장 상태 · 흰 단추 2 + 파란 '엑셀 내려받기' 1) · 흰 알림 줄(점) · 합계 한 줄
   · 흰 묶음 표(28px 한 줄 줄, 금액 오른쪽 · 고정폭 숫자). 휴대폰: 표는 옆으로 밀기. 마크업: business-income.js render.
   ============================================================= */
@media screen {
html #business_income-content{ background:var(--ui-bg); padding:0 16px 24px }
html #business_income-content *:not(i):not(.fas):not(.far):not(.fa){ font-family:var(--ui-font) !important }
html #business_income-content .num{ font-variant-numeric:tabular-nums }
html #business_income-content .dim{ color:var(--ui-text-2) }
html #business_income-content .sep{ flex:none; color:var(--ui-text-3) }
html #business_income-content .bi-head{ display:flex; align-items:center; gap:8px; min-height:54px; white-space:nowrap }
html #business_income-content .bi-head h2{ margin:0 4px 0 0; font-size:var(--ui-text-title2); font-weight:var(--ui-weight-bold); color:var(--ui-text-1) }
html #business_income-content .bi-sp{ flex:1 }
html #business_income-content .bi-month{ display:inline-flex; align-items:center; gap:2px; height:var(--ui-control-sm); padding:0 2px; border-radius:var(--ui-radius-control); background:var(--ui-fill) }
html #business_income-content .bi-month-label{ padding:0 6px; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) }
html #business_income-content .bi-step{ width:24px; height:24px; padding:0; border:0; border-radius:calc(var(--ui-radius-control) - 2px); background:transparent; color:var(--ui-text-2); cursor:default }
html #business_income-content .bi-step:hover{ background:var(--ui-surface); color:var(--ui-text-1) }
html #business_income-content .bi-step i{ font-size:11px }
html #business_income-content .bi-saved{ font-size:var(--ui-text-caption) }
html #business_income-content .bi-dirty{ color:var(--ui-warning) }
html #business_income-content .bi-btn{ height:var(--ui-control-sm); padding:0 10px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular); cursor:default }
html #business_income-content .bi-btn.primary{ background:var(--ui-accent); color:var(--ui-on-accent); box-shadow:none; font-weight:var(--ui-weight-semibold) }
html #business_income-content .bi-btn.primary:hover:not(:disabled){ background:var(--ui-accent-hover) }
html #business_income-content .bi-btn:disabled{ opacity:.45 }
html #business_income-content .bi-line{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; min-height:30px; margin-bottom:6px; padding:4px 12px; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); font-size:var(--ui-text-footnote); color:var(--ui-text-1) }
html #business_income-content .bi-line b{ font-weight:var(--ui-weight-semibold) }
html #business_income-content .bi-src{ display:inline-flex; align-items:center; gap:6px; min-width:0 }
html #business_income-content .bi-dot{ display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; background:var(--ui-text-3) }
html #business_income-content .bi-dot.red{ background:var(--ui-danger-dot) }
html #business_income-content .bi-dot.orange{ background:var(--ui-warning-dot) }
html #business_income-content .bi-dot.green{ background:var(--ui-success-dot) }
html #business_income-content .bi-problems{ margin-bottom:6px; padding:8px 12px; border-radius:var(--ui-radius-group); background:var(--ui-danger-tint); font-size:var(--ui-text-footnote); color:var(--ui-text-1) }
html #business_income-content .bi-problems b{ color:var(--ui-danger); font-weight:var(--ui-weight-semibold) }
html #business_income-content .bi-problems ul{ margin:4px 0 0; padding-left:18px; list-style:disc }
html #business_income-content .bi-sum{ display:flex; align-items:center; gap:8px; min-height:28px; margin:2px 0 6px; padding:0 2px; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #business_income-content .bi-sum b{ color:var(--ui-text-1); font-weight:var(--ui-weight-semibold) }
html #business_income-content .bi-card{ border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); overflow:hidden }
html #business_income-content .bi-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
html #business_income-content .bi-table{ width:100%; min-width:1020px; border-collapse:collapse; table-layout:fixed; font-size:var(--ui-text-footnote); color:var(--ui-text-1) }
html #business_income-content .bi-others .bi-table{ min-width:520px }
html #business_income-content .bi-table th{ height:31px; padding:0 8px; background:var(--ui-surface-alt); color:var(--ui-text-2); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); text-align:left; white-space:nowrap; box-shadow:inset 0 calc(var(--ui-hairline) * -1) 0 var(--ui-line) }
html #business_income-content .bi-table td{ height:28px; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:inset 0 calc(var(--ui-hairline) * -1) 0 var(--ui-line) }
html #business_income-content .bi-table tr:last-child td{ box-shadow:none }
html #business_income-content .bi-table .r{ text-align:right }
html #business_income-content .bi-table .c-amt{ text-align:right }
html #business_income-content .bi-table .c-chk{ text-align:center }
html #business_income-content .bi-table tr.off td:not(.c-chk){ color:var(--ui-text-2) }
html #business_income-content .bi-table tr.off .bi-amt{ color:var(--ui-text-2) }
html #business_income-content .bi-table td.c-total{ text-align:right }
html #business_income-content .bi-name{ display:inline-block; max-width:110px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle }
html #business_income-content .bi-tag{ margin-left:6px; font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #business_income-content .bi-bad{ color:var(--ui-danger); font-weight:var(--ui-weight-semibold) }
html #business_income-content .bi-warn-text{ color:var(--ui-warning) }
html #business_income-content .bi-amt{ width:96px; height:22px; padding:0 6px; border:0; border-radius:var(--ui-radius-row); background:var(--ui-fill); color:var(--ui-text-1); font-size:var(--ui-text-footnote); text-align:right }
html #business_income-content .bi-amt:focus, html #business_income-content .bi-pick:focus, html #business_income-content .bi-date:focus{ outline:none; box-shadow:var(--ui-focus-ring); background:var(--ui-surface) }
html #business_income-content .bi-nm{ width:84px; height:22px; padding:0 6px; border:0; border-radius:var(--ui-radius-row); background:var(--ui-fill); color:var(--ui-text-1); font-size:var(--ui-text-footnote); vertical-align:middle }
html #business_income-content .bi-nm:focus{ outline:none; box-shadow:var(--ui-focus-ring); background:var(--ui-surface) }
html #business_income-content .bi-pick{ width:100%; max-width:140px; height:22px; padding:0 4px; border:0; border-radius:var(--ui-radius-row); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-footnote) }
html #business_income-content .bi-date{ width:100%; height:22px; padding:0 2px; border:0; border-radius:var(--ui-radius-row); background:var(--ui-fill); color:var(--ui-text-1); font-size:var(--ui-text-caption) }
html #business_income-content .bi-seg{ display:inline-flex; flex:none; padding:1px; border-radius:var(--ui-radius-control); background:var(--ui-fill) }
html #business_income-content .bi-seg button{ height:20px; padding:0 7px; border:0; border-radius:calc(var(--ui-radius-control) - 2px); background:transparent; color:var(--ui-text-2); font-size:var(--ui-text-caption); cursor:default }
html #business_income-content .bi-seg button.on{ background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-weight:var(--ui-weight-semibold) }
html #business_income-content .bi-x{ position:relative; width:22px; height:22px; padding:0; border:0; border-radius:50%; background:transparent; cursor:default }
html #business_income-content .bi-x::before, html #business_income-content .bi-x::after{ content:""; position:absolute; left:7px; top:10.5px; width:8px; height:1px; background:var(--ui-text-2); transform:rotate(45deg) }
html #business_income-content .bi-x::after{ transform:rotate(-45deg) }
html #business_income-content .bi-x:hover{ background:var(--ui-fill) }
html #business_income-content .bi-tools{ display:flex; align-items:center; gap:12px; min-height:32px; margin:6px 0 }
html #business_income-content .bi-link{ height:22px; padding:0 4px; border:0; border-radius:4px; background:transparent; color:var(--ui-accent-text); font-size:var(--ui-text-footnote); cursor:default }
html #business_income-content .bi-link.dim{ color:var(--ui-text-2) }
html #business_income-content .bi-ex{ margin-right:6px; height:20px; font-size:var(--ui-text-caption) }
html #business_income-content .bi-link:hover{ background:var(--ui-fill) }
html #business_income-content .bi-empty{ padding:40px 0 !important; text-align:center; font-size:var(--ui-text-footnote); color:var(--ui-text-2); white-space:normal !important }
html #business_income-content .bi-foot{ margin:10px 2px 0; font-size:var(--ui-text-caption); line-height:16px; color:var(--ui-text-2) }
}
@media screen and (max-width: 768px){
html #business_income-content{ padding:0 12px 24px }
html #business_income-content .bi-head{ flex-wrap:wrap; gap:6px; padding:8px 0 }
html #business_income-content .bi-head h2{ width:100% }
html #business_income-content .bi-head .bi-sp{ display:none }
html #business_income-content .bi-btn{ flex:1; height:36px; font-size:var(--ui-text-body) }
html #business_income-content .bi-head .bi-btn.primary{ flex:none; height:44px; width:100% }
html #business_income-content .bi-saved{ order:9; width:100% }
html #business_income-content .bi-table td{ height:44px }
html #business_income-content .bi-amt{ height:36px; font-size:16px }
html #business_income-content .bi-nm{ height:36px; font-size:16px }
html #business_income-content .bi-pick{ height:36px; font-size:16px }
html #business_income-content .bi-date{ height:36px; font-size:16px }
html #business_income-content .bi-step{ width:32px; height:32px }
html #business_income-content .bi-month{ width:100%; height:36px; justify-content:space-between }
}
/* -------------------------------------------------------------
   세무 신고 위쪽 고르기 [사업소득 대장 | 급여·상여 자료] + 급여·상여 자료(#pt-root, payroll-tax.js)
   사업소득 대장의 bi-* 모양을 그대로 쓰고, 다른 것만 pt-* 로 더한다.
   ------------------------------------------------------------- */
@media screen {
html #business_income-content [hidden]{ display:none !important }
html #business_income-content .tax-seg{ display:inline-flex; margin:12px 0 0; padding:2px; border-radius:var(--ui-radius-control); background:var(--ui-fill) }
html #business_income-content .tax-seg button{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 12px; border:0; border-radius:calc(var(--ui-radius-control) - 2px); background:transparent; color:var(--ui-text-2); font-size:var(--ui-text-footnote); cursor:default }
html #business_income-content .tax-seg button.on{ background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-weight:var(--ui-weight-semibold) }
html #business_income-content .tax-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 5px; border-radius:8px; background:var(--ui-danger); color:var(--ui-on-accent); font-size:10px; font-weight:var(--ui-weight-semibold); font-variant-numeric:tabular-nums }
html #business_income-content .pt-tasks{ margin-bottom:8px }
html #business_income-content .pt-tasks-head{ display:flex; align-items:center; gap:8px; min-height:32px; padding:0 12px; font-size:var(--ui-text-footnote); color:var(--ui-text-1); box-shadow:inset 0 calc(var(--ui-hairline) * -1) 0 var(--ui-line) }
html #business_income-content .pt-tasks-head b{ font-weight:var(--ui-weight-semibold) }
html #business_income-content .pt-task-list{ margin:0; padding:0; list-style:none }
html #business_income-content .pt-task-list li{ display:flex; align-items:center; gap:8px; min-height:30px; padding:0 12px; font-size:var(--ui-text-footnote); color:var(--ui-text-1); box-shadow:inset 0 calc(var(--ui-hairline) * -1) 0 var(--ui-line) }
html #business_income-content .pt-task-list li:last-child{ box-shadow:none }
html #business_income-content .pt-task-list li.done .pt-task-what{ color:var(--ui-text-2) }
html #business_income-content .pt-task-what b{ font-weight:var(--ui-weight-semibold); margin-right:4px }
html #business_income-content .pt-facts .bi-src{ white-space:normal }
html #business_income-content .pt-warns{ font-size:var(--ui-text-footnote) }
html #business_income-content .pt-table{ min-width:1322px }
html #business_income-content .pt-table td.c-amt{ padding:0 3px }
html #business_income-content .pt-table.with-bank{ min-width:1454px }
html #business_income-content .pt-bank{ white-space:nowrap }
html #business_income-content .pt-bank .bi-dot{ margin-right:5px; vertical-align:1px }
html #business_income-content .pt-bank-st{ margin-left:5px; font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #business_income-content .pt-bank-st.diff, html #business_income-content .pt-bank-st.guess{ color:var(--ui-warning) }
html #business_income-content .pt-bank-st.missing{ color:var(--ui-danger) }
html #business_income-content .pt-table td.pt-bank{ height:auto; padding-top:3px; padding-bottom:3px }
html #business_income-content .pt-bank-why{ display:block; margin-top:1px; font-size:10px; line-height:12px; color:var(--ui-text-2); overflow:hidden; text-overflow:ellipsis }
html #business_income-content .pt-bankcard{ margin-bottom:8px }
html #business_income-content .pt-bankcard .bi-foot{ margin:6px 12px 8px }
html #business_income-content .pt-bank-sum{ display:inline-flex; align-items:center; gap:4px; font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #business_income-content .pt-bank-sum .bi-dot{ margin-left:6px }
html #business_income-content .pt-bank-note{ padding:6px 12px; font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #business_income-content .pt-bank-sub{ padding:6px 12px 0; font-size:var(--ui-text-footnote); color:var(--ui-text-1) }
html #business_income-content .pt-bank-sub b{ font-weight:var(--ui-weight-semibold) }
html #business_income-content .pt-bank-sub ul{ margin:4px 0 0; padding:0; list-style:none }
html #business_income-content .pt-bank-sub li{ display:flex; align-items:baseline; gap:8px; min-height:24px }
html #business_income-content .pt-table .bi-amt{ padding:0 4px }
html #business_income-content .pt-table .c-who{ overflow:hidden }
html #business_income-content .pt-table .bi-amt{ width:100% }
html #business_income-content .pt-kindname{ font-weight:var(--ui-weight-semibold) }
html #business_income-content .pt-kind{ margin-left:6px; padding:1px 6px; border-radius:4px; background:var(--ui-warning-tint, var(--ui-fill)); color:var(--ui-warning); font-size:var(--ui-text-caption) }
html #business_income-content .pt-kind.fixed{ background:var(--ui-fill); color:var(--ui-text-2) }
html #business_income-content .pt-table .c-note{ white-space:nowrap }
html #business_income-content .pt-note{ width:100%; height:22px; padding:0 6px; border:0; border-radius:var(--ui-radius-row); background:var(--ui-fill); color:var(--ui-text-1); font-size:var(--ui-text-caption) }
html #business_income-content .pt-note:focus, html #business_income-content .pt-memo:focus{ outline:none; box-shadow:var(--ui-focus-ring); background:var(--ui-surface) }
html #business_income-content .pt-warn{ display:block; margin-top:1px; font-size:10px; line-height:12px; overflow:hidden; text-overflow:ellipsis }
html #business_income-content .pt-table td.c-note{ height:auto; padding-top:3px; padding-bottom:3px }
html #business_income-content .pt-mail{ margin-bottom:8px; padding:0 12px 10px }
html #business_income-content .pt-mail-head{ display:flex; align-items:center; gap:8px; min-height:38px; font-size:var(--ui-text-footnote) }
html #business_income-content .pt-mail-head b{ font-weight:var(--ui-weight-semibold) }
html #business_income-content .pt-mail-subj{ margin-bottom:6px; font-size:var(--ui-text-footnote); color:var(--ui-text-1) }
html #business_income-content .pt-mail-text{ width:100%; padding:8px 10px; border:0; border-radius:var(--ui-radius-row); background:var(--ui-fill); color:var(--ui-text-1); font-size:var(--ui-text-footnote); line-height:1.6; resize:vertical }
html #business_income-content .pt-memo-label{ display:block; margin:12px 2px 4px; font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); color:var(--ui-text-2) }
html #business_income-content .pt-memo{ width:100%; padding:6px 10px; border:0; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); color:var(--ui-text-1); font-size:var(--ui-text-footnote); resize:vertical }
}
@media screen and (max-width: 768px){
html #business_income-content .tax-seg{ display:flex; width:100% }
html #business_income-content .tax-seg button{ flex:1; justify-content:center; height:32px }
html #business_income-content .pt-task-list li{ flex-wrap:wrap; padding:6px 12px }
html #business_income-content .pt-bankcard .pt-tasks-head{ flex-wrap:wrap; padding:6px 12px }
html #business_income-content .pt-bank-why{ white-space:normal; word-break:keep-all; overflow-wrap:anywhere }
html #business_income-content .pt-bank-sub li{ flex-wrap:wrap }
html #business_income-content .pt-facts{ display:block; padding:6px 12px }
html #business_income-content .pt-facts .sep{ display:none }
html #business_income-content .pt-facts .bi-src{ display:block; padding:2px 0 }
html #business_income-content .pt-facts .bi-dot{ margin-right:6px; vertical-align:1px }
html #business_income-content .pt-mail-head{ flex-wrap:wrap; padding:6px 0 }
html #business_income-content .pt-note{ height:36px; font-size:16px }
html #business_income-content .pt-memo{ font-size:16px }
}