/* 금액 한글 표기 전용 CSS (2026-10-20). 증서 띠(입력 · 한글 금액) → 자릿값 판(쓰는 묶음까지 --n칸, 최소 억·만·일, 바뀐 자리만 다시 들어옴 R45, transitions.dev number pop-in) → 상황별 표기 줄.
   작업면 640px 아래는 판을 묶음 줄(단위 | 네 칸 | 읽기)로 바꾸고 일 묶음 위로 쓰지 않는 묶음은 숨긴다. 공용 부품은 assets/v2.css */
.ka-work{container:ka/inline-size;--digit-dur:500ms;--digit-distance:8px;--digit-blur:2px;--digit-ease:cubic-bezier(0.34,1.45,0.64,1);--digit-dir-x:0;--digit-dir-y:1}

/* 증서 띠 */
.ka-deed{padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.ka-top{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:10px 16px;align-items:end}
.ka-inf{min-width:0}
.ka-inf > .v2-label{display:block}
.ka-inf .v2-input{margin-top:6px}
.ka-inf input{font-size:16px}
.ka-ex{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.ka-chip{height:32px;padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.ka-chip:hover{background:var(--btn);border-color:var(--line)}
.ka-chip:focus-visible,.ka-reset:focus-visible,.ka-row .v2-btn:focus-visible,#kaCopy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ka-ex svg,.ka-headrow svg,.ka-row svg{width:14px;height:14px}
.ka-inhint,.ka-line,.ka-bhead,.ka-err,.ka-hint,.ka-rn{word-break:keep-all}
.ka-inhint{display:block;margin-top:8px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.ka-err,.ka-hint{margin:8px 0 0;font-family:var(--sans);font-size:13px;line-height:1.5}
.ka-err{color:var(--accent);font-weight:650}
.ka-hint{padding:6px 10px;color:var(--ink);background:var(--paper);border-left:2px solid var(--line)}
.ka-head{container:kah/inline-size;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.ka-head > .v2-label{display:block;margin-bottom:6px}
.ka-headrow{display:flex;align-items:flex-start;gap:12px}
.ka-big{flex:1 1 auto;min-width:0;margin:0;font-family:var(--sans);font-weight:800;font-size:clamp(20px,calc((100cqi - 100px) / (var(--len, 8) + 1)),40px);line-height:1.22;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere;word-break:break-all}
.ka-big.is-empty{font-size:24px;color:var(--muted);opacity:.6}
.ka-big span{border-radius:var(--radius);transition:background var(--ease),box-shadow var(--ease)}
.ka-headrow .v2-btn{flex:0 0 auto;margin-top:2px}
.ka-line{margin:8px 0 0;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.ka-line .v2-status{margin-left:6px}

/* 자릿값 판 */
.ka-boardbox{padding:14px 18px 16px;border-bottom:1px solid var(--soft)}
.ka-bhead{margin:0 0 10px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.ka-bhead .v2-label{margin-right:4px;color:var(--ink)}
.ka-board{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:6px}
.ka-g[data-state="off"]:not([data-ctx]){display:none}
.ka-g{display:grid;align-content:start;gap:5px;min-width:0;padding:7px 7px 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);transition:background var(--ease),border-color var(--ease)}
.ka-gu{font-family:var(--sans);font-size:12px;font-weight:800;line-height:1.2;color:var(--accent)}
.ka-g[data-state="zero"] .ka-gu{color:var(--muted)}
.ka-g[data-state="off"]{background:transparent;border-style:dashed}
.ka-g[data-state="off"] .ka-gu{color:var(--muted);opacity:.55}
.ka-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.ka-c{display:grid;justify-items:center;gap:1px;min-width:0;padding:3px 0 4px;border-radius:var(--radius);background:var(--wash)}
.ka-c i{font-style:normal;font-family:var(--sans);font-size:10px;line-height:1.1;color:var(--muted)}
.ka-c b{display:block;min-height:1.15em;font-family:var(--mono);font-size:22px;font-weight:700;line-height:1.15;color:var(--ink);will-change:transform,opacity,filter}
.ka-c[data-k="zero"] b{color:var(--muted);opacity:.75}
.ka-c[data-k="off"]{background:transparent;box-shadow:inset 0 0 0 1px var(--soft)}
.ka-c[data-k="off"] i{opacity:.5}
.ka-gr{min-height:1.3em;font-family:var(--sans);font-size:12px;font-weight:700;line-height:1.3;color:var(--ink);overflow-wrap:anywhere;word-break:break-all}
.ka-g[data-state="zero"] .ka-gr{font-weight:600;color:var(--muted)}
/* 판 묶음 ↔ 한글 금액 조각 함께 밝히기 */
.ka-work[data-hot="0"] [data-g="0"],.ka-work[data-hot="1"] [data-g="1"],.ka-work[data-hot="2"] [data-g="2"],.ka-work[data-hot="3"] [data-g="3"],.ka-work[data-hot="4"] [data-g="4"]{background:var(--accent-wash)}
.ka-work[data-hot="0"] .ka-big [data-g="0"],.ka-work[data-hot="1"] .ka-big [data-g="1"],.ka-work[data-hot="2"] .ka-big [data-g="2"],.ka-work[data-hot="3"] .ka-big [data-g="3"],.ka-work[data-hot="4"] .ka-big [data-g="4"]{box-shadow:0 2px 0 0 var(--accent)}
.ka-work[data-hot="0"] .ka-g[data-g="0"],.ka-work[data-hot="1"] .ka-g[data-g="1"],.ka-work[data-hot="2"] .ka-g[data-g="2"],.ka-work[data-hot="3"] .ka-g[data-g="3"],.ka-work[data-hot="4"] .ka-g[data-g="4"]{border-color:var(--accent)}

/* 바뀐 자리만 다시 들어옴 (transitions.dev 02 number pop-in) */
@keyframes t-digit-pop-in {
  0%   { transform: translate(calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y))); opacity: 0; filter: blur(var(--digit-blur)); }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}
.ka-board.is-animating .ka-c b{animation:t-digit-pop-in var(--digit-dur) var(--digit-ease) both}
.ka-board.is-animating .ka-c b[data-same]{animation:none}
@media (prefers-reduced-motion:reduce){ .ka-board .ka-c b{animation:none !important} }

/* 상황별 표기 */
.ka-listbox{padding:14px 18px 6px}
.ka-listbox > .v2-label{display:block;margin-bottom:2px}
.ka-list{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr) auto;column-gap:16px;margin:0;padding:0;list-style:none}
.ka-row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;padding:9px 0;border-bottom:1px solid var(--soft)}
.ka-row:last-child{border-bottom:0}
.ka-rn{display:grid;gap:1px;min-width:0;max-width:220px}
.ka-rn b{font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.35;color:var(--ink)}
.ka-rn small{font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}
.ka-rt{min-width:0;font-family:var(--sans);font-size:15.5px;font-weight:700;line-height:1.4;color:var(--ink);overflow-wrap:anywhere;word-break:break-all;font-variant-numeric:tabular-nums}

@container ka (max-width:559px){
  .ka-top{grid-template-columns:minmax(0,1fr)}
  .ka-ex{justify-content:flex-start}
  .ka-list{display:block}
  .ka-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n b" "t t";row-gap:5px;column-gap:12px}
  .ka-rn{grid-area:n;max-width:none}
  .ka-rt{grid-area:t}
  .ka-row .v2-btn{grid-area:b}
}
@container ka (max-width:639px){
  .ka-board{grid-template-columns:minmax(0,1fr);gap:4px}
  .ka-g{grid-template-columns:1.6em minmax(0,132px) minmax(0,1fr);align-items:center;gap:10px;padding:6px 10px}
  .ka-gr{font-size:14px;word-break:keep-all}
  .ka-g[data-state="off"]:not([data-u="0"]){display:none}
}
@container kah (max-width:420px){
  .ka-headrow{flex-direction:column;gap:8px}
  .ka-big{font-size:clamp(20px,calc(100cqi / (var(--len, 8) + 1)),36px)}
}