/* SHA-256 해시 대조기 — '해시 대조판'. 작업면 폭 컨테이너 shaw, 대조판 폭 컨테이너 shab(글자 크기를 묶음 폭에 맞춤) */
.sha-work{container:shaw/inline-size;overflow:hidden}
.sha-work [hidden]{display:none !important}

/* 예시 줄 */
.sha-top{display:flex;align-items:center;gap:10px 14px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.sha-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
@container shaw (max-width:520px){
  .sha-top{padding:10px 14px;gap:8px}
  .sha-ex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sha-exl,#shaReset span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sha-exb{min-width:0;padding:6px 8px;justify-content:center}
  .sha-exb b{font-size:12px;line-height:1.3}
  .sha-exb small{display:none}
  #shaReset{flex:0 0 auto;align-self:stretch;height:auto;padding:0 10px}
}
.sha-exb{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:5px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;transition:border-color var(--ease),background var(--ease)}
.sha-exb b{font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink)}
.sha-exb small{font-family:var(--sans);font-size:11px;color:var(--muted)}
.sha-exb:hover{background:var(--btn)}
.sha-exb[aria-pressed="true"]{border-color:var(--fill);box-shadow:inset 0 0 0 1px var(--fill)}

/* A | B 두 칸 */
.sha-io{display:grid;grid-template-columns:minmax(0,1fr)}
.sha-pane{display:flex;flex-direction:column;gap:10px;padding:14px 18px;min-width:0;border-bottom:1px solid var(--soft)}
/* 두 칸이 나란하면 머리 줄·몸통 줄 높이를 subgrid 로 맞춘다(언어마다 제목 줄 수가 달라도 단추·입력 위치가 같다) */
@container shaw (min-width:600px){
  .sha-io{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr}
  .sha-pane{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start}
  .sha-pbx{border-left:1px solid var(--soft)}
}
.sha-ph{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:8px}
.sha-k{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;margin-top:4px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;font-weight:700}
.sha-pbx .sha-k{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sha-pt{min-width:0;padding-top:5px;font-family:var(--sans);font-size:14px;font-weight:750;line-height:1.4;color:var(--ink);overflow-wrap:break-word}
@container shaw (max-width:599px){
  .sha-ph{display:flex;flex-wrap:wrap;align-items:center}
  .sha-k{margin-top:0}
  .sha-pt{padding-top:0;margin-right:auto}
}
.sha-pb{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}

/* 파일 칸 */
.sha-fz{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:188px;border-radius:var(--radius)}
.sha-drop{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:96px;padding:14px;border:1.5px dashed var(--line);border-radius:var(--radius);background:var(--wash);color:var(--ink);text-align:center;transition:border-color var(--ease),background var(--ease)}
.sha-drop .i{width:20px;height:20px;color:var(--muted)}
.sha-drop b{font-family:var(--sans);font-size:13.5px;font-weight:650}
.sha-drop small{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.sha-drop:hover,.sha-fz.is-over .sha-drop,.sha-tb.is-over .sha-ta{border-color:var(--ink);background:var(--paper)}
.sha-fz.has-file .sha-drop{flex-direction:row;gap:8px;padding:8px 12px;min-height:0}
.sha-fz.has-file .sha-drop small{display:none}
.sha-fc{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:14px 12px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.sha-ext{display:grid;place-items:center;width:40px;height:48px;background:var(--wash);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--muted);clip-path:polygon(0 0,70% 0,100% 24%,100% 100%,0 100%)}
.sha-fn{min-width:0;display:flex;flex-direction:column;gap:4px}
.sha-fn b{font-family:var(--sans);font-size:13.5px;font-weight:650;line-height:1.35;color:var(--ink);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sha-fn small{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.sha-tag{display:inline-block;margin-right:6px;padding:0 7px;border-radius:9px;background:var(--accent-wash);color:var(--accent);font-weight:650;font-size:11px}
.sha-fb{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sha-pg{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--soft)}
.sha-pg i{display:block;height:100%;background:var(--line);transform-origin:0 50%;transform:scaleX(0);transition:transform .2s linear}
.sha-fc.is-busy .sha-pg i{background:var(--accent)}
@container shaw (max-width:380px){ .sha-fc{grid-template-columns:auto minmax(0,1fr)} .sha-fb{grid-column:1/-1;justify-content:flex-start} }
@container shaw (max-width:599px){ .sha-fz{min-height:0} .sha-fz:not(.has-file) .sha-drop{min-height:120px} .sha-ta{min-height:112px} }

/* 글자 칸 · 기준값 칸 */
.sha-ta{flex:1 1 auto;display:block;width:100%;min-height:150px;resize:vertical;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55}
.sha-mono{font-family:var(--mono);font-size:12.5px;line-height:1.6;overflow-wrap:anywhere}
.sha-ta:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.sha-ta[aria-invalid="true"]{border-color:var(--accent)}
.sha-ta::placeholder{color:var(--muted);opacity:.8}
.sha-opts{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:30px}
.sha-tm{margin-left:auto;font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.sha-rn{flex:1 1 150px;min-width:0;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted)}
.sha-rn.is-error{color:var(--accent)}

/* 판정 줄 */
.sha-res{display:flex;flex-direction:column;gap:12px;padding:14px 18px}
.sha-vl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 14px}
.sha-vi{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line);color:var(--muted);transition:background var(--ease),color var(--ease)}
.sha-vi svg{width:20px;height:20px}
.sha-work[data-state="ok"] .sha-vi{background:var(--fill);box-shadow:none;color:var(--on-fill)}
.sha-work[data-state="bad"] .sha-vi{background:var(--accent);box-shadow:none;color:var(--card)}
.sha-work[data-state="refbad"] .sha-vi,.sha-work[data-state="err"] .sha-vi{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent)}
.sha-vt{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.sha-vt b{font-family:var(--sans);font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.sha-work[data-state="bad"] .sha-vt b,.sha-work[data-state="refbad"] .sha-vt b{color:var(--accent)}
.sha-vt span{font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--muted)}
.sha-cp{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@container shaw (max-width:560px){
  .sha-vl{grid-template-columns:auto minmax(0,1fr)}
  .sha-cp{grid-column:1/-1;justify-content:flex-start}
}

/* 대조판 + 그림 지문 */
.sha-bd{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@container shaw (min-width:600px){ .sha-bd{grid-template-columns:minmax(0,1fr) clamp(132px,22cqi,168px);align-items:start} }
.sha-bw{min-width:0}
.sha-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 8px;font-family:var(--sans);font-size:11.5px;line-height:1.3;color:var(--muted)}
.sha-leg span::before{content:"";display:inline-block;width:12px;height:3px;margin-right:6px;vertical-align:middle;background:var(--ink)}
.sha-leg .sha-lb::before{background:var(--muted);opacity:.6}
.sha-leg .sha-ld::before{height:9px;background:var(--accent-wash);box-shadow:inset 0 -2px 0 var(--accent)}
.sha-board{container:shab/inline-size;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sha-g{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:15px 2px 7px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);overflow:hidden;transition:border-color var(--ease)}
.sha-g::before{content:"";position:absolute;inset:0;background:var(--accent-wash);transform-origin:0 50%;transform:scaleX(var(--fill,0));transition:transform .15s linear;pointer-events:none}
.sha-g > i{position:absolute;top:2px;left:5px;font-family:var(--mono);font-size:10px;font-weight:700;font-style:normal;color:var(--muted)}
.sha-g.is-same > i::after{content:" \2713";color:var(--ink)}
.sha-g.is-diff{border-color:var(--accent)}
.sha-g.is-diff > i{color:var(--accent)}
.sha-g.is-same{border-color:var(--line)}
.sha-r{position:relative;display:flex;font-family:var(--mono);font-size:clamp(11px,calc(((100cqi - 18px) / 4 - 8px) / 4.96),19px);line-height:1.35}
.sha-ra{color:var(--ink);font-weight:700}
.sha-rb{color:var(--muted);font-weight:600}
.sha-r b{display:inline-block;width:1ch;text-align:center;border-radius:2px;font-weight:inherit;transition:background-color var(--ease),color var(--ease)}
.sha-r b.d{background:var(--accent-wash);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.sha-r b.spin{color:var(--muted)}
.sha-gl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sha-board.is-busy .sha-ra{color:var(--muted)}

.sha-arts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;align-content:start}
.sha-arts figure{margin:0;display:flex;flex-direction:column;gap:3px;min-width:0}
.sha-arts figcaption{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);text-align:center}
.sha-art{aspect-ratio:17/9;border-radius:3px}
@container shaw (min-width:600px){
  .sha-arts{grid-template-columns:minmax(0,1fr);gap:8px;padding-top:22px}
  .sha-arts figure{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:6px}
  .sha-arts figcaption{grid-row:1;grid-column:1;line-height:1.4}
}
.sha-art svg{display:block;width:100%;height:100%}
.sha-art.is-empty{background:repeating-linear-gradient(135deg,var(--wash) 0 6px,transparent 6px 12px);box-shadow:inset 0 0 0 1px var(--soft)}
.sha-ab{fill:var(--wash);stroke:var(--soft);stroke-width:1}
.sha-art rect:not(.sha-ab):not(.sha-ae){fill:var(--ink);opacity:var(--o)}
.sha-artc{text-wrap:balance}
.sha-as{fill:var(--paper);stroke:var(--accent);stroke-width:1.8}
.sha-ae{fill:var(--accent)}
.sha-art.is-in rect:not(.sha-ab),.sha-art.is-in .sha-as,.sha-art.is-in .sha-ae{transform-box:fill-box;transform-origin:center;animation:shaIn .28s ease-out both;animation-delay:var(--d,0ms)}
@keyframes shaIn{from{opacity:0;transform:scale(.3)}}
.sha-artc{grid-column:1/-1;margin:2px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted);text-align:center}

/* 정보 줄 · 원인 */
.sha-info{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.sha-info:empty{display:none}
.sha-diag{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sha-diag li{position:relative;padding:9px 12px 9px 32px;border-radius:var(--radius);background:var(--wash);font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.sha-diag li::before{content:"i";position:absolute;left:10px;top:10px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1.4px var(--muted);font-family:var(--serif);font-size:10.5px;font-weight:700;font-style:italic;color:var(--muted)}
.sha-diag li.is-w{background:color-mix(in srgb,var(--accent-wash) 80%,var(--paper))}
.sha-diag li.is-w::before{content:"!";font-style:normal;font-family:var(--sans);box-shadow:inset 0 0 0 1.4px var(--accent);color:var(--accent)}
.sha-diag code{font-family:var(--mono);font-size:12px;background:var(--paper);padding:1px 5px;border-radius:2px;overflow-wrap:anywhere}
.sha-cmds{display:grid;gap:4px;margin-top:6px}
.sha-cmds span{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.sha-cmds em{flex:0 0 62px;font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.sha-apply{margin-left:4px;height:26px;vertical-align:middle}

/* 바닥 줄 */
.sha-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:9px 18px;border-top:1px solid var(--soft);background:color-mix(in srgb,var(--wash) 60%,var(--card))}
.sha-msg{margin:0}
.sha-msg:empty{display:none}
.sha-privacy{margin:0 0 0 auto;font-family:var(--sans);font-size:11.5px;color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  .sha-work *,.sha-work *::before{animation:none !important;transition:none !important}
}
.v2-article code.sha-hx{word-break:break-all;font-size:12px}