.page-heading{margin-bottom:20px}
.page-heading h1{font-size:clamp(1.8rem,3vw,2.5rem);margin:0 0 8px;word-break:keep-all;text-wrap:balance}
.page-heading>p{font-size:.9rem}
.hash-panel,.uuid-panel{margin-bottom:20px}
.hash-panel h2,.uuid-panel h2{font-size:1.1rem;margin:0 0 14px}
#hash-form,#uuid-form{display:flex;flex-direction:column;gap:14px}
.source-picker{border:1px solid var(--border);border-radius:8px;padding:8px 12px 12px;margin:0;display:flex;gap:10px;flex-wrap:wrap;min-width:0}
.source-picker legend{font-size:.9rem;font-weight:600;padding:0 6px}
.choice{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg);cursor:pointer;font-size:.9rem}
.choice:has(input:checked){border-color:#a2b9ed;background:#f0f5ff}
.choice:has(input:focus-visible){outline:3px solid #e9aa23;outline-offset:2px}
.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;align-items:start}
.field input[type=file]{min-height:44px;padding:8px 10px}
.field select,.field input[type=text],.field input[type=number]{min-height:44px}
.field textarea{min-height:110px;font:.92rem/1.6 ui-monospace,SFMono-Regular,Consolas,"Malgun Gothic",monospace;overflow-wrap:anywhere}
.field textarea:focus-visible,.field input:focus-visible,.field select:focus-visible,.action-row .button:focus-visible,.result-line .button:focus-visible{outline:3px solid #e9aa23;outline-offset:2px}
.field small{overflow-wrap:anywhere}
.file-info{margin:0;font-size:.85rem;font-weight:400;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.check{display:flex;gap:10px;align-items:center;border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--bg);cursor:pointer;min-height:44px;min-width:0}
.check:has(input:checked){border-color:#a2b9ed;background:#f0f5ff}
.check:has(input:focus-visible){outline:3px solid #e9aa23;outline-offset:2px}
.check input{flex-shrink:0;margin:0}
.check strong{font-size:.88rem;overflow-wrap:anywhere}
.action-row{display:flex;gap:10px;flex-wrap:wrap}
.action-row .button{font-size:.88rem}
.progress-box{display:flex;flex-direction:column;gap:6px;font-size:.88rem;font-weight:600}
.progress-box progress{height:14px}
.status{margin:0;min-height:1.5em;overflow-wrap:anywhere}
.status.error,.compare-status.error{color:var(--danger)}
.compare-status{margin:0;font-size:.88rem;overflow-wrap:anywhere;min-height:0}
.compare-status.ok{color:var(--success)}
.compare-status:empty{display:none}
.results{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.results h3{font-size:1rem;margin:0 0 10px}
.result-row{margin-bottom:14px;min-width:0}
.result-row>label{display:block;font-size:.88rem;font-weight:650;margin-bottom:6px}
.result-line{display:flex;gap:8px;align-items:stretch}
.result-line input{flex:1 1 auto;min-width:0;min-height:44px;font:.82rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;direction:ltr;unicode-bidi:isolate;text-overflow:ellipsis}
.result-line .button{flex:0 0 auto;font-size:.85rem}
.match-mark{display:block;font-size:.85rem;font-weight:650;min-height:0;margin-top:4px}
.match-mark:empty{display:none}
.legacy .small{margin:6px 0 0;font-size:.78rem;line-height:1.5;overflow-wrap:anywhere}
.privacy-note{color:var(--muted);font-size:.78rem;margin:0;overflow-wrap:anywhere}
.guide{margin:32px 0 40px;padding-top:22px;border-top:1px solid var(--border);color:var(--muted);font-size:.86rem;line-height:1.8}
.guide h2{color:var(--text);font-size:1.1rem}
.guide h3{color:var(--text);margin:20px 0 6px}
.guide summary{cursor:pointer;color:var(--text);font-weight:650;padding:10px 0;min-height:44px}
.guide summary:focus-visible{outline:3px solid #e9aa23;outline-offset:2px;border-radius:4px}
.guide li{overflow-wrap:anywhere}
@media(max-width:480px){
  /* 360px 가로 넘침 방지: 복사 버튼을 입력칸 아래로 내린다 */
  .result-line{flex-direction:column}
  .result-line .button{width:100%}
  .action-row .button{flex:1 1 100%;width:100%}
  .source-picker{flex-direction:column}
}