/* 엑셀 열 문자·번호 변환기 — '시트 머리글 판' (2026-10-21). 작업면 폭 컨테이너 eccw: 640 이상이면 위쪽 등식 띠를 [두 칸·문장 | 결과 줄·자주 찾는 열] 두 열로,
   560 이상이면 [자릿값 풀이 | 시트 안 위치] 나란히. 움직임 셋(시트 띠 미끄러짐·타일 굴러감·눈금 표식)은 동작 줄이기면 멈춘다. */
.ecc-work{container:eccw / inline-size;overflow:hidden}
.ecc-hl{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:0}
.ecc-hint{font-family:var(--sans);font-size:12px;color:var(--muted)}

/* 등식 띠 */
.ecc-top{display:grid;grid-template-columns:minmax(0,1fr);padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.ecc-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:0 10px}
.ecc-sign{display:grid;place-items:center;height:var(--v2-ctl);font-family:var(--sans);font-size:22px;font-weight:700;color:var(--muted)}
.ecc-cell .v2-input input{text-align:center;font-size:21px;font-weight:750;letter-spacing:.03em}
.ecc-cell[data-k="col"] .v2-input input{text-transform:uppercase}
.ecc-cell[data-k="col"] .v2-input input::placeholder{text-transform:none}
.ecc-sent{margin:12px 0 0;font-family:var(--sans);font-size:15px;font-weight:650;line-height:1.5;color:var(--ink)}
.ecc-sent.is-error{color:var(--accent);font-size:13.5px;font-weight:600}
.ecc-rows{margin:10px 0 0}
.ecc-rows li b{font-family:var(--mono);font-size:14px}
.ecc-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 0}
.ecc-chips .v2-label{margin-right:4px}
.ecc-chips button{height:28px;min-width:34px;padding:0 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);transition:background var(--ease),color var(--ease),border-color var(--ease)}
.ecc-chips button:hover{background:var(--btn)}
.ecc-chips button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.ecc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0}
@container eccw (min-width:640px){
  .ecc-top{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"pair rows" "sent chips" "acts acts";column-gap:26px}
  .ecc-pair{grid-area:pair}
  .ecc-sent{grid-area:sent}
  .ecc-rows{grid-area:rows;margin:0;align-self:end}
  .ecc-chips{grid-area:chips;align-self:start}
  .ecc-acts{grid-area:acts}
}

/* 시트 머리글 띠 */
.ecc-sheet{padding:14px 18px;border-bottom:1px solid var(--soft)}
.ecc-shead{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;margin:0 0 10px}
.ecc-shead .ecc-hl{flex:1 1 220px;padding-bottom:4px}
.ecc-rngbox{flex:0 0 180px}
.ecc-rngf .v2-input input{text-align:left;font-family:var(--mono);font-size:14px;text-transform:uppercase}
.ecc-rngf .v2-input input::placeholder{text-transform:none}
.ecc-grid{--ecc-min:52px;--ecc-cw:56px;--ecc-rh:26px;display:grid;grid-template-columns:26px minmax(46px,max-content) minmax(0,1fr) 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);outline:0;user-select:none}
.ecc-grid:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.ecc-nav{display:grid;place-items:center;border:0;background:var(--btn);color:var(--ink);cursor:pointer}
.ecc-nav:first-child{border-right:1px solid var(--line)}
.ecc-nav--r{border-left:1px solid var(--line)}
.ecc-nav--r svg{transform:scaleX(-1)}
.ecc-nav svg{width:14px;height:14px}
.ecc-nav:hover:not(:disabled){background:var(--btn-hover)}
.ecc-nav:disabled{opacity:.35;cursor:default}
.ecc-rowh{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--wash)}
.ecc-rowh span{display:grid;place-items:center;height:var(--ecc-rh);padding:0 5px;white-space:nowrap;border-bottom:1px solid var(--soft);font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--muted)}
.ecc-rowh .ecc-hk:nth-child(2){border-bottom-color:var(--line)}
.ecc-rowh .ecc-hx{display:none}
.ecc-rowh .ecc-hn.is-on{color:var(--accent)}
.ecc-rowh span:last-child,.ecc-col > :last-child{border-bottom:0}
.ecc-view{position:relative;overflow:hidden;min-width:0}
.ecc-track{display:flex;width:max-content;will-change:transform}
.ecc-col{display:flex;flex-direction:column;flex:0 0 var(--ecc-cw);width:var(--ecc-cw);border-right:1px solid var(--soft)}
.ecc-col > *{display:grid;place-items:center;height:var(--ecc-rh);border-bottom:1px solid var(--soft);font-style:normal}
.ecc-h{padding:0;border:0;border-bottom:1px solid var(--soft);background:var(--wash);font-family:var(--sans);font-size:12.5px;font-weight:750;color:var(--ink);cursor:pointer;transition:background var(--ease),color var(--ease)}
.ecc-h:hover{background:var(--btn)}
.ecc-r{background:var(--wash);border-bottom-color:var(--line) !important;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted)}
.ecc-x{display:none !important;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink)}
.has-rng .ecc-x,.has-rng .ecc-rowh .ecc-hx{display:grid !important}
.ecc-col.is-rng .ecc-x{background:color-mix(in srgb,var(--fill) 12%,var(--paper))}
.ecc-col.is-rng i{background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--fill) 9%,transparent) 5px 6px)}
.ecc-col.is-on .ecc-h{background:var(--accent);color:var(--card)}
.ecc-col.is-on .ecc-r,.ecc-col.is-on .ecc-x{color:color-mix(in srgb,var(--accent) 78%,var(--ink));font-weight:800} /* 작은 글자 대비 4.5 이상 */
.ecc-col.is-on i{background:color-mix(in srgb,var(--accent) 11%,var(--paper))}
.ecc-col.is-on.is-rng i{background:color-mix(in srgb,var(--accent) 16%,var(--paper))}
.ecc-col i.is-cell{box-shadow:inset 0 0 0 2px var(--accent);font-family:var(--mono);font-size:10.5px;font-weight:800;color:color-mix(in srgb,var(--accent) 70%,var(--ink));overflow:hidden;white-space:nowrap}
.ecc-col.is-xls{border-right:2px dashed var(--muted)}
.ecc-col.is-end{border-right:3px solid var(--ink)}
.ecc-rout{margin:9px 0 0;font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--ink)}
.ecc-rout.is-error{color:var(--accent)}
.ecc-rout code{font-family:var(--mono);font-size:12px;font-weight:700;padding:1px 5px;background:var(--wash);white-space:nowrap}

/* 자릿값 풀이 | 시트 안 위치 */
.ecc-duo{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--soft)}
.ecc-duo > figure{margin:0;padding:14px 18px;min-width:0}
.ecc-place{display:flex;flex-direction:column;border-bottom:1px solid var(--soft)}
@container eccw (min-width:560px){
  .ecc-duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ecc-place{border-bottom:0;border-right:1px solid var(--soft)}
}
.ecc-tiles{display:flex;justify-content:center;gap:12px;margin:14px 0 4px}
.ecc-tile{display:grid;justify-items:center;gap:3px;min-width:66px}
.ecc-win{width:60px;height:72px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:inset 0 7px 7px -7px rgba(26,18,8,.28),inset 0 -7px 7px -7px rgba(26,18,8,.28)}
.ecc-reel{display:flex;flex-direction:column;transition:transform 560ms cubic-bezier(.2,.75,.25,1)}
.ecc-reel span{display:grid;place-items:center;flex:0 0 72px;height:72px;font-family:var(--sans);font-size:40px;font-weight:800;line-height:1;color:var(--ink)}
.ecc-tile.is-off .ecc-win{background:var(--wash);opacity:.55}
.ecc-tile.is-off .ecc-reel{visibility:hidden}
.ecc-tv{min-height:1.5em;font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink)}
.ecc-tm{font-family:var(--mono);font-size:11px;color:var(--muted)}
.ecc-tp{font-family:var(--sans);font-size:14px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--ink)}
.ecc-tile.is-off .ecc-tp{color:var(--muted);font-weight:500}
.ecc-sum{margin:8px 0 0;text-align:center;font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--accent);overflow-wrap:anywhere}
.ecc-note{margin:auto 0 0;padding-top:10px;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.ecc-ruler{display:block;width:100%;height:auto;margin:6px 0 0;overflow:visible}
.ecc-band{stroke:var(--line);stroke-width:.8}
.ecc-band.b0{fill:color-mix(in srgb,var(--fill) 6%,var(--paper))}
.ecc-band.b1{fill:color-mix(in srgb,var(--fill) 13%,var(--paper))}
.ecc-band.b2{fill:color-mix(in srgb,var(--fill) 22%,var(--paper))}
.ecc-bl{font-family:var(--sans);font-size:9.5px;font-weight:650;fill:var(--muted)}
.ecc-tk{stroke:var(--ink);stroke-width:1}
.ecc-tl{font-family:var(--mono);font-size:9px;font-weight:700;fill:var(--muted)}
.ecc-xls{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 2}
.ecc-xl{font-family:var(--sans);font-size:9px;font-weight:700;fill:var(--ink);transition:opacity var(--ease)}
.ecc-xl.is-near{opacity:0}
.ecc-ptr{transition:transform 460ms cubic-bezier(.2,.7,.2,1),opacity var(--ease)}
.ecc-ptr path{fill:var(--accent)}
.ecc-ptr line{stroke:var(--accent);stroke-width:2.2}
.ecc-ptr text{font-family:var(--sans);font-size:12px;font-weight:800;fill:var(--accent)}
.ecc-ptr.is-off{opacity:0}
.ecc-compat{list-style:none;margin:8px 0 0;padding:0}
.ecc-compat li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 12px;padding:7px 0;border-top:1px solid var(--soft)}
.ecc-compat b{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink)}
.ecc-compat span{grid-column:1;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.ecc-compat i{grid-column:2;grid-row:1 / 3;font-style:normal;font-family:var(--sans);font-size:12px;font-weight:750;color:var(--ink);white-space:nowrap}
.ecc-compat i::before{content:"✓ "}
.ecc-compat li.is-no i{color:var(--accent)}
.ecc-compat li.is-no i::before{content:"✕ "}

/* 수식·코드 */
.ecc-fxbox{padding:14px 18px;border-bottom:1px solid var(--soft)}
.ecc-fxhead{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.ecc-fxhead .ecc-hl{flex:1 1 220px}
.ecc-fxst:empty{display:none}
.ecc-fx{list-style:none;margin:10px 0 0;padding:0}
.ecc-fx li{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,17fr) minmax(42px,auto) 30px;align-items:center;gap:6px 12px;padding:7px 0;border-top:1px solid var(--soft)}
.ecc-fx li span{font-family:var(--sans);font-size:12.5px;line-height:1.4;color:var(--muted)}
.ecc-fx code{display:block;min-width:0;padding:6px 9px;overflow-x:auto;white-space:nowrap;background:var(--wash);font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink)}
.ecc-fx b{font-family:var(--mono);font-size:13px;font-weight:800;color:var(--accent);text-align:right;white-space:nowrap}
.ecc-fxc{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--btn);color:var(--ink);cursor:pointer}
.ecc-fxc:hover{background:var(--btn-hover)}
.ecc-fxc .i{width:14px;height:14px}
.ecc-fxnote{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
@container eccw (max-width:559px){
  .ecc-fx li{grid-template-columns:minmax(0,1fr) auto 30px;grid-template-areas:"l l l" "c r b"}
  .ecc-fx li span{grid-area:l}
  .ecc-fx code{grid-area:c}
  .ecc-fx b{grid-area:r}
  .ecc-fxc{grid-area:b}
  .ecc-fx code{white-space:pre-wrap;overflow-wrap:anywhere} /* 좁은 폭: 식이 가로 스크롤 속에 잘려 보이지 않게 */
}

/* 여러 개 한꺼번에 */
.ecc-batch{padding:14px 18px 16px}
.ecc-bpanes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:10px 0 0}
.ecc-bp{min-width:0}
.ecc-bph{display:flex;align-items:center;gap:8px;min-height:20px;margin:0 0 5px}
.ecc-bph .v2-label{margin:0}
.ecc-pill{padding:1px 7px;border-radius:var(--radius);background:var(--btn);font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--muted)}
.ecc-pill[hidden]{display:none}
.ecc-ta{display:block;box-sizing:border-box;width:100%;height:194px;resize:none;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--mono);font-size:13px;font-weight:700;line-height:22px;color:var(--ink);tab-size:6;white-space:pre;overflow:auto}
.ecc-ta:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
#eccBOut{background:var(--wash);color:var(--ink)}
.ecc-bsum{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.ecc-bsum.is-error{color:var(--accent)}
.ecc-batch .ecc-acts{margin-top:10px}

@container eccw (max-width:419px){
  .ecc-top,.ecc-sheet,.ecc-duo > figure,.ecc-fxbox,.ecc-batch{padding-left:14px;padding-right:14px}
  .ecc-grid{--ecc-min:38px;grid-template-columns:22px minmax(36px,max-content) minmax(0,1fr) 22px}
  .ecc-h{font-size:12px}
  .ecc-r,.ecc-x{font-size:10.5px}
  .ecc-rowh span{padding:0 3px;font-size:10px}
  .ecc-rngbox{flex:1 1 100%}
  .ecc-tiles{gap:8px}
}
@media (prefers-reduced-motion: reduce){
  .ecc-track,.ecc-reel,.ecc-ptr{transition:none !important}
}

/* 본문 안 식 */
.v2-article code{padding:1px 4px;border-radius:3px;background:color-mix(in srgb,var(--ink) 6%,transparent);font-family:var(--mono);font-size:.9em;overflow-wrap:anywhere}