/* ══ v-196 (2026-11-07) 휴대폰 — 급여 작성 · 부가세 도우미 (화면 폭 760px 아래만 · PC 는 그대로) ══
   · 급여 작성: 맨 위 남색 판(#py196) · 이 화면 안 색은 급여 도우미 새 화면(부가세 도우미 v-195)과 같게 ·
     순서(판 → 급여도우미 탭 → 담당 → 이번 달 한눈에 → 찾기 · 단추 → 수임처 카드 → 4대보험 · 두루누리 → 안내 글) · 표는 수임처 카드
   · 부가세 도우미: 판을 짧게(설명 숨김 · 작은 고리 · 6단계 줄 낮게) · 설명 세 단은 옆으로 밀어 보는 카드 ·
     숫자 카드 세 칸 · 「내 부가세 신고」 표는 수임처 카드 · 다른 표는 첫 칸을 붙여 둠
   · 두 화면 모두 오른쪽 아래 떠 있는 단추(카카오톡 채널 · 지킴 도우미 · 개선 요청)는 그림만 */
.py196-hero{display:none}
@media (max-width:760px){
  /* ── 급여 작성 — 색(밝게) ── */
  #view.page:has(>.py196-hero){
    --paper:#F3F5F9;--surface:#FFFFFF;--surface-2:#F8FAFD;--card:#EFF4FF;--rail:#FFFFFF;
    --ink:#101828;--slate:#344054;--muted:#475467;--faint:#667085;--ink2:#475467;
    --line:#E9EDF3;--line-soft:#F2F4F7;--line-2:#E4E9F2;--row-line:#F2F4F7;--zebra:#FBFCFE;--field:#F8FAFD;
    --accent:#155EEF;--accent-ink:#004EEB;--accent-soft:#EFF4FF;--accent-mid:#84ADFF;--sky:#2E90FA;--sky-soft:#EFF8FF;--acc:#155EEF;
    --good:#067647;--good-bg:#ECFDF3;--sev2:#B54708;--sev2-bg:#FFFAEB;--sev3:#D92D20;--sev3-bg:#FEF3F2;--sev1:#475467;--sev1-bg:#F2F4F7;
    --y-card:#FFFFFF;--y-sub:#F8FAFD;--y-line:#E9EDF3;--y-line3:#EEF1F6;--y-ink:#101828;--y-ink3:#475467;--y-ink4:#667085;
    --y-pri-grad:linear-gradient(180deg,#2E7BFF 0%,#155EEF 100%);--y-pri-sh:inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px -6px rgba(21,94,239,.6);
    --y-sh:0 1px 2px rgba(16,24,40,.04),0 8px 24px -16px rgba(16,24,40,.14);
    display:flex;flex-direction:column;color:var(--ink)}
  /* 순서 — 판 · 탭 · 담당 · 한눈에 · (찾기 · 단추 · 알림) · 카드 · 4대보험 · 두루누리 · 안내 글 */
  #view.page:has(>.py196-hero)>*{order:4;min-width:0}
  #view.page:has(>.py196-hero)>.head,#view.page:has(>.py196-hero)>.icards{display:none}
  #view.page:has(>.py196-hero)>.py196-hero{order:0}
  #view.page:has(>.py196-hero)>.tlbar{order:1}
  #view.page:has(>.py196-hero)>.qzquick{order:2}
  #view.page:has(>.py196-hero)>#py194{order:3}
  #view.page:has(>.py196-hero)>#py-tbl{order:5}
  #view.page:has(>.py196-hero)>#py-col,#view.page:has(>.py196-hero)>#py-dur{order:6}
  #view.page:has(>.py196-hero)>p.ismall:not([style*="margin:0 0 8px"]){order:7;font-size:11.5px;line-height:1.6;color:var(--faint)}

  /* ── 급여 작성 — 맨 위 남색 판 ── */
  .py196-hero{display:block;order:0;position:relative;overflow:hidden;margin:0 0 14px;padding:16px 16px 16px;border-radius:24px;color:#fff;box-sizing:border-box;
    background-color:#1847B8;
    background-image:radial-gradient(rgba(255,255,255,.07) 1px,rgba(255,255,255,0) 1.4px),radial-gradient(420px 240px at 100% -12%,rgba(125,165,255,.34),rgba(125,165,255,0) 70%),radial-gradient(380px 240px at -12% 118%,rgba(34,204,238,.24),rgba(34,204,238,0) 70%),linear-gradient(135deg,#081736 0%,#0F2C6E 52%,#1847B8 100%);
    background-size:18px 18px,auto,auto,auto;box-shadow:0 22px 44px -28px rgba(8,23,54,.72)}
  .py196-deco{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
  .py196-deco svg{position:absolute;right:-190px;top:-210px;fill:none;stroke-width:1}
  .py196-deco circle:nth-child(1){stroke:rgba(255,255,255,.09)}
  .py196-deco circle:nth-child(2){stroke:rgba(255,255,255,.06)}
  .py196-deco circle:nth-child(3){stroke:rgba(255,255,255,.04)}
  .py196-hero>:not(.py196-deco){position:relative}
  .py196-top{display:flex;align-items:center;gap:8px;min-height:34px}
  .py196-eye{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:14px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:#fff}
  .py196-tile{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;box-sizing:border-box}
  .py196-sec{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.8);white-space:nowrap}
  .py196-sec::before{content:"·";margin-right:7px;color:rgba(255,255,255,.55)}
  .py196-act{margin-left:auto;display:flex;gap:6px}
  .py196-act button,.py196-nav{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;padding:0;box-sizing:border-box;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font:inherit}
  .py196-act button:active,.py196-nav:active{background:rgba(255,255,255,.2)}
  .py196-act button:focus-visible,.py196-nav:focus-visible,.py196-s:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .py196-mon{display:flex;align-items:center;gap:8px;margin-top:14px}
  .py196-nav{width:36px;height:36px;border-radius:11px}
  .py196-t{flex:1;min-width:0;margin:0;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.035em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
  .py196-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
  .py196-chips:empty{display:none}
  .py196-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;box-sizing:border-box;border-radius:9px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);font-size:12px;font-weight:600;color:rgba(255,255,255,.92);white-space:nowrap}
  .py196-chip b{color:#fff;font-weight:800}
  .py196-chip svg{opacity:.85}
  .py196-dd{display:inline-flex;align-items:center;height:28px;padding:0 10px;box-sizing:border-box;border-radius:9px;background:rgba(83,177,253,.24);border:1px solid rgba(132,202,255,.55);color:#fff;font-size:13px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
  .py196-dd.warn{background:rgba(247,144,9,.28);border-color:rgba(254,200,75,.62);color:#FFF6E0}
  .py196-dd.bad{background:rgba(240,68,56,.3);border-color:rgba(253,162,155,.6);color:#FFE4E1}
  .py196-dd.over{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.9);font-size:12px}
  .py196-ring{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
  .py196-rg{position:relative;flex:none;width:72px;height:72px}
  .py196-rg svg{display:block;width:72px;height:72px}
  .py196-rg .bg{fill:none;stroke:rgba(255,255,255,.14);stroke-width:7}
  .py196-rg .fg{fill:none;stroke:url(#py196-rgr);stroke-width:7;stroke-linecap:round}
  .py196-pc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
  .py196-pc b{font-size:16px;font-weight:800;letter-spacing:-.04em;color:#fff}
  .py196-pc span{margin-top:2px;font-size:10px;font-weight:600;color:rgba(255,255,255,.82)}
  .py196-rt{display:flex;flex-direction:column;gap:3px;min-width:0}
  .py196-n{font-size:15px;color:rgba(255,255,255,.86);white-space:nowrap}
  .py196-n b{font-size:24px;font-weight:800;letter-spacing:-.04em;color:#fff;margin-right:4px}
  .py196-n i{font-style:normal;font-weight:700}
  .py196-rl{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9)}
  .py196-rs{font-size:11.5px;color:rgba(255,255,255,.78)}
  .py196-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
  .py196-s{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic lb" "nb nb" "dd dd";align-items:center;column-gap:7px;min-width:0;padding:10px 10px 9px;box-sizing:border-box;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;text-align:left;font:inherit;cursor:pointer}
  .py196-s:active{background:rgba(255,255,255,.14)}
  .py196-si{grid-area:ic;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;color:#fff;background:linear-gradient(135deg,#98A2B3 0%,#667085 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
  .py196-si svg{width:14px;height:14px}
  .s-draft .py196-si{background:linear-gradient(135deg,#53B1FD 0%,#1570EF 100%)}
  .s-ok .py196-si{background:linear-gradient(135deg,#47CD89 0%,#079455 100%)}
  .py196-sl{grid-area:lb;min-width:0;font-size:12px;font-weight:700;color:rgba(255,255,255,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .py196-sn{grid-area:nb;margin-top:8px;font-size:22px;line-height:1.1;font-weight:800;letter-spacing:-.04em;color:#fff}
  .py196-sd{grid-area:dd;margin-top:2px;font-size:11px;font-weight:600;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .py196-s.on{background:#fff;border-color:transparent;box-shadow:0 12px 24px -14px rgba(0,0,0,.6)}
  .py196-s.on .py196-sl,.py196-s.on .py196-sn{color:#101828}
  .py196-s.on .py196-sd{color:#475467}

  /* ── 급여 작성 — 급여도우미 탭 · 담당 칩(옆으로 밀어 봄) ── */
  #view.page:has(>.py196-hero)>.tlbar{margin:0 0 10px}
  #view.page:has(>.py196-hero)>.qzquick{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0 0 12px!important;padding:2px 1px 4px;scrollbar-width:none}
  #view.page:has(>.py196-hero)>.qzquick::-webkit-scrollbar{display:none}
  #view.page:has(>.py196-hero)>.qzquick .qzchip{flex:none;height:36px;padding:0 13px;border:1px solid var(--y-line);border-radius:999px;background:var(--y-card);color:var(--y-ink);font-size:13px;font-weight:650;white-space:nowrap;box-shadow:0 1px 2px rgba(16,24,40,.05)}
  #view.page:has(>.py196-hero)>.qzquick .qzchip b{color:var(--accent);font-family:var(--sans)}
  #view.page:has(>.py196-hero)>.qzquick .qzchip.on{border-color:transparent;background-color:#0F2C6E;background-image:linear-gradient(135deg,#0F2C6E 0%,#1847B8 100%);color:#fff;box-shadow:0 8px 16px -10px rgba(15,44,110,.8)}
  #view.page:has(>.py196-hero)>.qzquick .qzchip.on b{color:#BFD6FF}
  #view.page:has(>.py196-hero)>#py194{margin-bottom:14px}

  /* ── 급여 작성 — 찾기 · 단추 줄(달 옮기기는 판으로) ── */
  #view.page:has(>.py196-hero)>.obtools{gap:8px;align-items:center;margin:0 0 12px;padding:12px;border:1px solid var(--y-line);border-radius:18px;background:var(--y-card);box-shadow:var(--y-sh)}
  #view.page:has(>.py196-hero)>.obtools>.py196-mn,#view.page:has(>.py196-hero)>.obtools>span[style*="flex:1"]{display:none}
  #view.page:has(>.py196-hero)>.obtools>input{flex:1 1 100%;min-width:0!important;height:42px;box-sizing:border-box;padding:0 14px 0 38px;border:1px solid var(--y-line);border-radius:12px;background:var(--y-sub) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px 50%/16px 16px;font-size:14px}
  #view.page:has(>.py196-hero)>.obtools>.cchk{flex:1 1 100%;margin:0;font-size:13px}
  #view.page:has(>.py196-hero)>.obtools>button.mini{height:36px;padding:0 12px;border-radius:11px;font-size:12.5px;border-color:var(--y-line);background:var(--y-card);color:var(--y-ink)}

  /* ── 급여 작성 — 수임처 카드(표 → 카드 · 칸 · 단추 그대로) ── */
  #py-tbl .tblwrap{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;padding:0;margin:0;max-height:none}
  #py-tbl table{display:block;width:100%;min-width:0;border:0;background:none}
  #py-tbl thead{display:block}
  #py-tbl thead tr{display:flex;align-items:center}
  #py-tbl thead th{display:none}
  #py-tbl thead th.pbc{display:flex;align-items:center;gap:8px;width:auto;padding:0 4px 10px;border:0;background:none;font-size:12.5px;font-weight:600;color:var(--y-ink3);white-space:nowrap;position:static}
  #py-tbl thead th.pbc::after{content:"표시된 수임처 모두 고르기"}
  #py-tbl tbody{display:flex;flex-direction:column;gap:10px}
  #py-tbl tbody>tr{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ck nm st" ". sf sf" "pv pv pv" "in in in" "cl cl cl" "ac ac ac";align-items:center;column-gap:10px;padding:14px;border:1px solid var(--y-line);border-radius:20px;background:var(--y-card);box-shadow:var(--y-sh)}
  #py-tbl tbody>tr>td{display:block;width:auto!important;min-width:0;padding:0;border:0!important;background:none!important;white-space:normal!important;text-align:left!important}
  #py-tbl tbody>tr>td.pbc{grid-area:ck;align-self:start;padding-top:10px}
  #py-tbl tbody>tr>td.py196-nm{grid-area:nm;display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-areas:"ti a" "ti o";column-gap:11px;align-items:center}
  #py-tbl td.py196-nm::before{content:attr(data-i);grid-area:ti;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#fff;font-size:16px;font-weight:800;line-height:1;background:linear-gradient(135deg,#98A2B3 0%,#667085 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 12px -8px rgba(16,24,40,.6)}
  #py-tbl td.py196-nm[data-i=""]::before{content:"·"}
  #py-tbl tr[data-st="sub"] td.py196-nm::before{background:linear-gradient(135deg,#22CCEE 0%,#088AB2 100%)}
  #py-tbl tr[data-st="draft"] td.py196-nm::before{background:linear-gradient(135deg,#53B1FD 0%,#1570EF 100%)}
  #py-tbl tr[data-st="ok"] td.py196-nm::before{background:linear-gradient(135deg,#47CD89 0%,#079455 100%)}
  #py-tbl td.py196-nm>a{grid-area:a;align-self:end;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15.5px;font-weight:800!important;letter-spacing:-.02em;color:var(--y-ink);text-decoration:none}
  #py-tbl td.py196-nm>span{grid-area:o;align-self:start;margin-top:1px;font-size:12px;color:var(--y-ink4)}
  #py-tbl td.py196-nm:not(:has(>span)){grid-template-areas:"ti a"}
  #py-tbl td.py196-nm:not(:has(>span))>a{align-self:center}
  #py-tbl td.py196-sf{grid-area:sf;margin:8px 0 0;padding-left:53px!important;font-size:12.5px;color:var(--y-ink3)}
  #py-tbl td.py196-cur{display:contents}
  #py-tbl td.py196-cur>.pill{grid-area:st;justify-self:end;align-self:start;margin-top:2px;padding:3px 10px;font-size:12px}
  #py-tbl td.py196-cur>button{grid-area:ac;justify-content:center;width:100%;height:42px;margin-top:12px;border-radius:12px;font-size:14px;font-weight:700;border:1px solid var(--y-line);background:var(--y-card);color:var(--y-ink)}
  #py-tbl td.py196-cur>button.pri{border-color:transparent;background-color:#155EEF;background-image:var(--y-pri-grad);color:#fff;box-shadow:var(--y-pri-sh)}
  #py-tbl td.py196-pv,#py-tbl td.py196-in,#py-tbl td.py196-cl{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:8px 12px!important;background:var(--y-sub)!important;font-size:12.5px;line-height:1.5;color:var(--y-ink3)}
  #py-tbl td.py196-pv{grid-area:pv;margin-top:12px;border-radius:12px 12px 0 0}
  #py-tbl td.py196-in{grid-area:in;border-top:1px solid var(--y-line3)!important}
  #py-tbl td.py196-cl{grid-area:cl;border-top:1px solid var(--y-line3)!important;border-radius:0 0 12px 12px}
  #py-tbl td.py196-pv::before,#py-tbl td.py196-in::before,#py-tbl td.py196-cl::before{content:attr(data-l);flex:0 0 72px;font-size:11.5px;font-weight:700;color:var(--y-ink4)}
  #py-tbl td.py196-pv>button.mini{height:30px;border-radius:9px;font-size:12px}
  #py-tbl td.py196-cl a{font-weight:700}
  /* 일괄 작성 띠 — 다른 기능의 진행 막대와 이름(pbbar)이 겹쳐 높이 10px · 넘침 숨김이 걸려 두 줄이면 글 · 단추가 잘리던 것 */
  #pb-bar>.pbbar{height:auto;overflow:visible}
  #py-tbl #pb-bar:not(:empty){margin:0 0 10px}

  /* ── 급여 작성 — 4대보험 자료 수집 · 두루누리 상자 ── */
  #view.page:has(>.py196-hero)>.pycard{margin:12px 0 0!important;padding:14px!important;border:1px solid var(--y-line)!important;border-radius:18px!important;background:var(--y-card)!important;box-shadow:var(--y-sh);font-size:12.5px}
  #view.page:has(>.py196-hero)>.pycard button.mini{min-height:34px;border-radius:10px}

  /* ── 부가세 도우미 — 판을 짧게 ── */
  #vh-root .vh-hero{padding:16px 14px 50px;border-radius:22px}
  #vh-root .vh-hero.fold{padding:14px 14px 48px}
  #vh-root .vh-hero .vh-sub{display:none}
  #vh-root .vb-top{grid-template-columns:minmax(0,1fr);gap:12px}
  #vh-root .vb-t{font-size:23px;line-height:1.2;margin-top:10px}
  #vh-root .vb-chips{margin-top:10px;gap:6px}
  #vh-root .vb-meta{gap:6px}
  #vh-root .vb-meta>span,#vh-root .vb-dl,#vh-root .vb-dd{height:28px;font-size:12px;padding:0 9px;border-radius:9px}
  #vh-root .vg-side{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:10px}
  #vh-root .vg-act{position:absolute;top:-2px;right:0;gap:6px}
  #vh-root .vh-hero .vg-act .vb-fold.mini,#vh-root .vg-act .vh-about>summary,#vh-root .vg-act .vh-help{height:32px;border-radius:10px}
  #vh-root .vh-about>summary>span,#vh-root .vh-hero .vh-help>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #vh-root .vh-about>summary,#vh-root .vh-hero .vh-help{padding:0 9px}
  #vh-root .vg-ring{gap:12px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
  #vh-root .vg-rg,#vh-root .vg-rg svg{width:66px;height:66px}
  #vh-root .vg-pc b{font-size:15px}
  #vh-root .vg-pc span{margin-top:2px;font-size:9.5px}
  #vh-root .vg-n{font-size:21px}
  #vh-root .vg-rl{font-size:12px}
  #vh-root .vg-chips{flex-wrap:nowrap;align-self:stretch;min-width:0;max-width:100%;margin-top:5px;gap:4px;overflow-x:auto;scrollbar-width:none}
  #vh-root .vg-chips::-webkit-scrollbar{display:none}
  #vh-root .vg-chip{flex:none;height:22px;padding:0 7px;gap:5px;font-size:11px}
  #vh-root .vg-sh{display:none}
  #vh-root .vb-rail{margin-top:12px}
  /* 6단계 — 두 칸씩(넓으면 세 칸) 작은 카드: 그림 · 이름 / 큰 숫자 · 건수 / 막대 */
  #vh-root .vb-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  #vh-root .vb-st{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-areas:"ic nm" "bg bg" "cn cn" "mt mt";column-gap:7px;row-gap:0;align-items:center;height:100%;box-sizing:border-box;padding:7px 9px 7px;border-radius:13px}
  #vh-root .vg-sr{grid-area:ic;display:block;align-self:center}
  #vh-root .vg-ic{width:24px;height:24px;border-radius:8px}
  #vh-root .vg-ic svg{width:13px;height:13px}
  #vh-root .vb-node{display:none}
  #vh-root .vb-name{grid-area:nm;min-width:0;margin:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #vh-root .vg-big{grid-area:bg;justify-self:start;margin:4px 0 0;line-height:1.15}
  #vh-root .vg-big b{font-size:18px}
  #vh-root .vb-cn{grid-area:cn;min-width:0;margin:1px 0 0;font-size:10.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #vh-root .vb-m{grid-area:mt;margin:6px 0 0;height:3px}
  #vh-root .vb-d{display:none}
  #vh-root .vh-hero .vh-cal{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:12px -14px 0;padding:0 14px}
  #vh-root .vh-hero .vh-cal::-webkit-scrollbar{display:none}

  /* ── 부가세 도우미 — 탭마다 설명 세 단: 옆으로 밀어 보는 카드 ── */
  #vh-root:not(.vh-nonotes)>.rules.rl-ps{display:flex;gap:10px;margin:0 0 16px;padding:2px 0 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border:0;border-radius:0;background:none;box-shadow:none}
  #vh-root>.rules.rl-ps::-webkit-scrollbar{display:none}
  #vh-root>.rules.rl-ps .r,#vh-root>.rules.rl-ps .r:first-child{flex:0 0 86%;box-sizing:border-box;scroll-snap-align:start;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:13px 14px;border:1px solid var(--g-line);border-radius:18px;background:var(--g-card);box-shadow:var(--g-sh1);font-size:12.5px;line-height:1.65}
  #vh-root>.rules.rl-ps .mk{width:24px;height:24px;border-radius:8px;font-size:11.5px}

  /* ── 부가세 도우미 — 숫자 카드 · 상자 · 제목 ── */
  #vh-root .icards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #vh-root[data-tab="my"] .icards,#vh-root[data-tab="pre"] .icards{grid-template-columns:repeat(3,minmax(0,1fr))}
  #vh-root .icards>.icard,#vh-root[data-tab="my"] .icards>.icard{min-width:0;padding:10px 10px 11px;border-radius:16px}
  #vh-root .icard .l{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #vh-root .icard b{font-size:21px}
  #vh-root .icard .d{font-size:10.5px;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  #vh-root[data-tab="my"] .icards>.icard::before{right:8px;top:8px;width:22px;height:22px;border-radius:7px}
  #vh-root[data-tab="my"] .icards>.icard::after{right:12px;top:12px;width:14px;height:14px}
  #vh-root[data-tab="my"] .icards>.icard .l{padding-right:24px}
  #vh-root .obtools{flex-wrap:wrap;max-width:100%;box-sizing:border-box}
  #vh-root .obtools>*{min-width:0;max-width:100%}
  #vh-root select{max-width:100%}
  #vh-root h2.sec{flex-wrap:wrap;row-gap:4px}
  #vh-root h2.sec .n{flex:1 1 100%}

  /* ── 부가세 도우미 — 「내 부가세 신고」 표 → 수임처 카드(칸 · 단추 그대로) ── */
  #vh-root .tblwrap.scroll:has(>table.vm-t){max-height:none!important;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
  #vh-root table.vm-t{display:block;width:100%;min-width:0;border:0}
  #vh-root table.vm-t thead{display:block}
  #vh-root table.vm-t thead tr{display:flex;align-items:center}
  #vh-root table.vm-t thead th{display:none}
  #vh-root table.vm-t thead th:first-child:has(input){display:flex;align-items:center;gap:8px;position:static;padding:0 4px 10px;border:0;background:none;font-size:12.5px;font-weight:600;color:var(--g-ink3)}
  #vh-root table.vm-t thead th:first-child:has(input)::after{content:"보이는 곳 모두 고르기"}
  #vh-root table.vm-t tbody{display:flex;flex-direction:column;gap:10px}
  #vh-root table.vm-t tbody>tr{display:block}
  #vh-root table.vm-t tbody>tr:not(.vm-x){position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"nm nm" "src src" "a b" "c d" "e f" "op op";gap:6px;padding:14px;border:1px solid var(--g-line);border-radius:18px;background:var(--g-card);box-shadow:var(--g-sh1)}
  #vh-root table.vm-t tbody>tr>td{display:block;width:auto!important;min-width:0;padding:0;border:0!important;background:none!important;white-space:normal!important;text-align:left!important}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(1){position:absolute;top:12px;right:12px}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(1):empty{display:none}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td.vm-nm{grid-area:nm;position:relative;min-height:40px;padding:1px 34px 2px 50px;font-size:13px}
  #vh-root table.vm-t td.vm-nm::before{left:0;top:1px;margin-top:0;width:40px;height:40px;font-size:15px}
  #vh-root table.vm-t td.vm-nm a b{font-size:15px}
  #vh-root table.vm-t td.vm-nm .isub{display:block;margin-top:1px}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td.vm-src{grid-area:src;margin-top:4px;font-size:12.5px;line-height:1.7}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(n+4):nth-child(-n+9){padding:8px 10px;border-radius:12px;background:var(--g-sub)!important;font-size:12.5px;line-height:1.45}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(n+4):nth-child(-n+9)::before{display:block;margin-bottom:3px;font-size:11px;font-weight:700;color:var(--g-ink4);font-family:var(--sans)}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(4){grid-area:a}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(4)::before{content:"(30) 차가감세액"}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(5){grid-area:b}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(5)::before{content:"작년 같은 기"}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(6){grid-area:c}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(6)::before{content:"판단 필요"}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(7){grid-area:d}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(7)::before{content:"단계"}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(8){grid-area:e}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(8)::before{content:"위하고"}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(9){grid-area:f}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(9)::before{content:"마지막 돌림"}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(10){grid-area:op;margin-top:6px}
  #vh-root table.vm-t tbody>tr:not(.vm-x)>td:nth-child(10)>button{justify-content:center;width:100%;height:42px;border-radius:12px;font-size:14px;font-weight:700}
  #vh-root table.vm-t tbody>tr.vm-x{margin-top:-4px;padding:12px 14px;border:1px solid var(--g-line);border-radius:16px;background:var(--g-sub)}
  #vh-root table.vm-t tbody>tr.vm-x>td:first-child{display:none}

  /* ── 부가세 도우미 — 다른 표: 첫 칸(수임처 · 받을 자료)을 붙여 두고 옆으로 밂 ── */
  #vh-root .tblwrap.scroll>table.gr:not(.vm-t)>tbody>tr>td:first-child,#vh-root .tblwrap.scroll>table.gr:not(.vm-t)>thead>tr>th:first-child{position:sticky;left:0;z-index:2;min-width:7.5em;background:var(--g-card);box-shadow:1px 0 0 var(--g-line3)}
  #vh-root .tblwrap.scroll>table.gr:not(.vm-t)>thead>tr>th:first-child{z-index:3;background:var(--g-sub)}
  #vh-root .tblwrap.scroll>table.gr:not(.vm-t)>tbody>tr:hover>td:first-child{background:var(--g-sub)}
  #vh-root table.vx-t{min-width:620px}
  #vh-root table.vx-t>tbody>tr>td:first-child,#vh-root table.vx-t>thead>tr>th:first-child{min-width:9.5em}

  /* ── 두 화면 — 떠 있는 단추는 그림만(오른쪽 아래 세로 줄) ── */
  body:has(#py196) #kkfab,body:has(#vh-root) #kkfab,body:has(#py196) #asbtn,body:has(#vh-root) #asbtn,body:has(#py196) #fbbtn,body:has(#vh-root) #fbbtn{right:12px;width:44px;height:44px;padding:0;gap:0;justify-content:center;font-size:0;border-radius:15px}
  body:has(#py196) #kkfab,body:has(#vh-root) #kkfab{bottom:116px}
  body:has(#py196) #asbtn,body:has(#vh-root) #asbtn{bottom:64px}
  body:has(#py196) #fbbtn,body:has(#vh-root) #fbbtn{bottom:12px}
  body:has(#py196) #asbtn>span,body:has(#vh-root) #asbtn>span,body:has(#py196) #fbbtn>span,body:has(#vh-root) #fbbtn>span{display:none}
  body:has(#py196) #fbbtn>em,body:has(#vh-root) #fbbtn>em{position:absolute;top:-6px;right:-6px;padding:1px 6px;font-size:10px;line-height:1.5;border:2px solid var(--surface,#fff)}
}
@media (min-width:541px) and (max-width:760px){
  #vh-root .vb-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 급여 작성 「이번 달 한눈에」 — 펼친 폴드처럼 넓은 휴대폰은 진행 추이 한 줄 · 담당별 · Claude 작업 두 칸, 그래프 글자는 늘어나지 않게 */
  #py194 .p194-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #py194 .p194-trend{grid-column:1/-1}
  #py194 .p194-svg text{font-size:10.5px}
  #py194 .p194-svg .xs{font-size:10px}
}
/* 어둡게 — 판(남색)은 그대로 · 카드 · 글 · 줄만 어두운 색(부가세 도우미 v-195 와 같은 색) */
@media (max-width:760px){
  :root[data-theme="dark"] #view.page:has(>.py196-hero){
    --paper:#0E1420;--surface:#131C2E;--surface-2:#0F1828;--card:#17305A;--rail:#0E1420;
    --ink:#EEF2F8;--slate:#D5DCE7;--muted:#B7C1D0;--faint:#9AA6B8;--ink2:#B7C1D0;
    --line:#253149;--line-soft:#1B2537;--line-2:#2E3B56;--row-line:#1F2A40;--zebra:#111A2B;--field:#0F1828;
    --accent:#3D8BFF;--accent-ink:#9DC1FF;--accent-soft:#17305A;--accent-mid:#2C5FA8;--sky:#33BBFF;--sky-soft:#152A44;--acc:#3D8BFF;
    --good:#75E0A7;--good-bg:#14301F;--sev2:#FEC84B;--sev2-bg:#332614;--sev3:#FDA29B;--sev3-bg:#3A1A18;--sev1:#B7C1D0;--sev1-bg:#1B2537;
    --y-card:#131C2E;--y-sub:#0F1828;--y-line:#253149;--y-line3:#1F2A40;--y-ink:#EEF2F8;--y-ink3:#B7C1D0;--y-ink4:#9AA6B8;
    --y-sh:0 1px 2px rgba(0,0,0,.4),0 10px 28px -18px rgba(0,0,0,.65)}
  :root[data-theme="dark"] .py196-hero{box-shadow:0 22px 44px -28px rgba(0,0,0,.85)}
}
@media (max-width:760px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #view.page:has(>.py196-hero){
    --paper:#0E1420;--surface:#131C2E;--surface-2:#0F1828;--card:#17305A;--rail:#0E1420;
    --ink:#EEF2F8;--slate:#D5DCE7;--muted:#B7C1D0;--faint:#9AA6B8;--ink2:#B7C1D0;
    --line:#253149;--line-soft:#1B2537;--line-2:#2E3B56;--row-line:#1F2A40;--zebra:#111A2B;--field:#0F1828;
    --accent:#3D8BFF;--accent-ink:#9DC1FF;--accent-soft:#17305A;--accent-mid:#2C5FA8;--sky:#33BBFF;--sky-soft:#152A44;--acc:#3D8BFF;
    --good:#75E0A7;--good-bg:#14301F;--sev2:#FEC84B;--sev2-bg:#332614;--sev3:#FDA29B;--sev3-bg:#3A1A18;--sev1:#B7C1D0;--sev1-bg:#1B2537;
    --y-card:#131C2E;--y-sub:#0F1828;--y-line:#253149;--y-line3:#1F2A40;--y-ink:#EEF2F8;--y-ink3:#B7C1D0;--y-ink4:#9AA6B8;
    --y-sh:0 1px 2px rgba(0,0,0,.4),0 10px 28px -18px rgba(0,0,0,.65)}
  :root:not([data-theme="light"]) .py196-hero{box-shadow:0 22px 44px -28px rgba(0,0,0,.85)}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.py196-hero *{transition:none!important;animation:none!important}}