/* 생활 유틸 도구 3종(한영타 변환·택배 부피무게·이미지 압축) 전용 스타일 */
/* 한영타 입력·결과 칸 */
.ut-ta{width:100%;box-sizing:border-box;min-height:140px;resize:vertical;font-family:inherit;font-size:14px;line-height:1.7;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.ut-ta:focus{outline:none;border-color:var(--ink2)}
.ut-ta[readonly]{background:var(--soft)}
/* 두벌식 자판 배열 표. 가로로 긴 배열이 좁은 화면에서 패널을 밀지 않도록 패널에 min-width:0 을 주고 배열만 가로 스크롤한다 */
.ut-kbp{min-width:0}
.ut-kb{display:grid;gap:5px}
.ut-krow{display:flex;gap:5px}
/* 글쇠는 줄 너비에 맞춰 줄었다 늘었다 하되 44px 보다 커지지 않는다(좁은 화면에서도 한 줄에 10개가 들어간다) */
.ut-key{position:relative;flex:1 1 0;min-width:0;max-width:44px;height:46px;border:1px solid var(--line);border-radius:8px;background:var(--soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.ut-key i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted)}
.ut-key b{font-size:16px;font-weight:700;color:var(--ink)}
.ut-key u{position:absolute;top:2px;right:4px;text-decoration:none;font-size:10.5px;font-weight:800;color:var(--coral)}
/* 택배 상자 치수 입력 3칸 */
.ut-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ut-box label{display:block;min-width:0}
.ut-box span{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:3px}
.ut-box input{width:100%;box-sizing:border-box;padding:8px 10px;font-size:14px;border-radius:8px}
/* 이미지 파일 넣는 칸 */
.ut-drop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:18px 14px;cursor:pointer;
  border:2px dashed var(--line);border-radius:14px;background:color-mix(in srgb,var(--soft) 50%,transparent)}
.ut-drop:hover,.ut-drop.over{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 10%,transparent)}
.ut-drop.has{border-style:solid;border-color:var(--mint)}
.ut-drop b{font-size:14.5px;overflow-wrap:anywhere}
.ut-drop input[type=file]{width:100%;max-width:280px;font-size:12.5px;padding:6px;margin-top:4px}
/* 결과 미리보기 */
.ut-prev{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:4px}
.ut-prev:empty{display:none}
.ut-prev img{max-width:100%;max-height:300px;height:auto;border-radius:12px;border:1px solid var(--line);background:var(--soft)}
.ut-prev .hint{margin:0;overflow-wrap:anywhere}
/* 좁은 화면에서는 글쇠 폭이 약 27px 까지 줄어 가운데 영문 글자와 오른쪽 위 Shift 자모가 포개진다.
   영문 글자를 왼쪽 위로 보내고 Shift 자모를 오른쪽 위에 작게 붙여 겹치지 않게 한다(W/ㅉ, R/ㄲ, P/ㅖ …). */
@media(max-width:420px){.ut-kb,.ut-krow{gap:3px}.ut-key{height:42px}.ut-key b{font-size:14px}.ut-key i,.ut-key u{font-size:9px}
  .ut-key i{position:absolute;top:1px;left:3px}.ut-key u{top:1px;right:3px}.ut-key b{margin-top:8px}
  .ut-box input{padding:7px 8px;font-size:13.5px}}