/* 한자 필기 입력기 — tools.css 다음에 읽는다 */
.pm.hj { --han: "Noto Serif KR", "Malgun Gothic", "맑은 고딕", "Batang", "바탕", "Nanum Myeongjo",
         "MingLiU", "SimSun", "Hiragino Mincho ProN", serif; }

/* 낱말 단위로 줄바꿈 — 폰에서 "입력기" 가 쪼개지지 않게 */
.pm.hj .top h1 { word-break: keep-all; }

/* 모아 둔 한자 */
.hj .tray { border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff;
  box-shadow: var(--shadow); padding: 12px 14px; display: grid; gap: 10px; margin-bottom: 16px; }
.hj .trayline { display: block; min-height: 62px; font-family: var(--han); font-size: 46px; line-height: 1.25;
  letter-spacing: .04em; word-break: break-all; color: var(--ink); }
.hj .trayline i { font: 600 16px/62px var(--font); color: var(--muted); letter-spacing: 0; }
.hj .traybtns { display: flex; gap: 6px; flex-wrap: wrap; }
.hj .traybtns .ghost { flex: 1 1 auto; padding: 10px 12px; }

/* 필기판 */
.hj .padwrap { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 1;
  border: 2px solid var(--line-2); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.hj .padwrap canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.hj .padtip { position: absolute; inset: auto 0 44% 0; text-align: center; color: var(--muted);
  font-size: 18px; font-weight: 700; pointer-events: none; transition: opacity .2s; }
.hj .padtip.off { opacity: 0; }
.hj .padbar { display: flex; align-items: center; gap: 8px; max-width: 460px; margin: 10px auto 0; }
.hj .padbar .cnt { font-weight: 800; font-size: 18px; color: var(--green-lit); min-width: 3.4em; }
.hj .padbar .ghost { flex: 1 1 0; padding: 11px 8px; }

/* 후보 */
.hj .cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 16px; }
.hj .cand { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 8px 4px 6px;
  cursor: pointer; display: grid; gap: 2px; justify-items: center; box-shadow: var(--shadow); }
.hj .cand:hover, .hj .cand:focus-visible { border-color: var(--green); outline: none; }
.hj .cand .g { font-family: var(--han); font-size: 42px; line-height: 1.1; }
.hj .cand .h { font-size: 13px; color: var(--ink-2); font-weight: 700; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.hj .cand.top { border-color: var(--green); background: var(--green-soft); }
.hj .loadnote { margin: 14px 0 0; color: var(--muted); font-size: 15px; font-weight: 700; text-align: center; }
.hj .loadnote[hidden] { display: none; }
.hj .none { margin-top: 16px; color: var(--muted); font-weight: 700; }

/* 음 */
.hj .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; max-height: 216px; overflow: auto;
  padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.hj .chip { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 8px 14px;
  font-size: 17px; font-weight: 700; cursor: pointer; color: var(--ink-2); }
.hj .chip:hover { border-color: var(--green); color: var(--green); }
.hj .chip.on { background: var(--green); border-color: var(--green); color: #fff; }

/* 부수 */
.hj .radlist { display: grid; gap: 14px; max-height: 300px; overflow: auto; padding: 8px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.hj .radgroup b { display: block; font-size: 15px; color: var(--muted); margin-bottom: 6px; }
.hj .radgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.hj .rad { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 7px 2px 5px;
  cursor: pointer; display: grid; justify-items: center; gap: 1px; }
.hj .rad:hover { border-color: var(--green); }
.hj .rad .g { font-family: var(--han); font-size: 28px; line-height: 1.1; }
.hj .rad .n { font-size: 12px; color: var(--muted); font-weight: 700; }
.hj .rad.on { border-color: var(--green); background: var(--green-soft); }

/* 고른 한자 */
.hj .sheet { position: fixed; inset: 0; background: rgba(20, 20, 30, .45); z-index: 50;
  display: grid; place-items: end center; padding: 0; }
.hj .sheet[hidden] { display: none; }
.hj .sheetbox { position: relative; width: 100%; max-width: 560px; background: #fff; border-radius: 22px 22px 0 0;
  padding: 20px 18px 24px; display: grid; gap: 14px; box-shadow: 0 -10px 40px rgba(20, 20, 30, .18); }
.hj .sheetx { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2); background: #fff; font-size: 17px; cursor: pointer; color: var(--ink-2); }
.hj .sheethead { display: flex; align-items: center; gap: 14px; }
.hj .bigchar { font-family: var(--han); font-size: 104px; line-height: 1; }
.hj .order { width: 150px; height: 150px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.hj .sheetmeta { display: grid; gap: 4px; }
.hj .sheetmeta .hun { font-size: 30px; letter-spacing: -.02em; }
.hj .sheetmeta .meta { color: var(--ink-2); font-size: 17px; font-weight: 600; }
.hj .acts.small { gap: 6px; }
.hj .acts.small .ghost { flex: 1 1 auto; padding: 11px 10px; text-align: center; text-decoration: none; }

@media (min-width: 640px) {
  .hj .sheet { place-items: center; padding: 20px; }
  .hj .sheetbox { border-radius: 22px; }
}
@media (max-width: 420px) {
  .pm.hj .tabs { gap: 4px; }
  .pm.hj .tabs button { padding: 9px 12px; font-size: 15px; }
  .hj .trayline { font-size: 40px; }
  .hj .cands { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .hj .cand .g { font-size: 38px; }
  .hj .bigchar { font-size: 84px; }
  .hj .order { width: 124px; height: 124px; }
}