/* 음절별 한자 후보 선택 (QUANTARO-0907-1900-01)
 *
 * 모바일에서 한자키가 없어 한자 이름을 아예 못 넣던 자리를 「누르기만으로」 채우게 한다.
 * 글자 칸(.hj-slot)을 누르면 그 독음의 후보 칩(.hj-chip)이 아래에 펼쳐지고, 칩을 누르면
 * 칸이 채워지며 다음 칸으로 넘어간다. 타이핑은 한 번도 필요하지 않다.
 *
 * 두 벌로 쓴다 — 밝은 폼 바닥(위저드가 안 뜬 경우)이 바탕이고, 위저드 히어로 시트
 * (.wz--hero .wz-sheet) 안에서는 다크 글래스·금테 정본으로 되받는다. 색 규칙은
 * wizard.css 의 그 블록과 같은 값을 쓴다(금 #F0D9A0/#E2C074, 유리 rgba(8,13,26,…)).
 */
.hj-pick{margin-top:8px;}
.hj-pick__empty{margin:0;font-size:.8125rem;color:#6B6B6B;
  font-family:Pretendard,"Noto Sans KR",sans-serif;}

.hj-slots{display:flex;flex-wrap:wrap;gap:8px;}
.hj-slot{
  flex:0 0 auto;min-width:62px;padding:8px 6px 6px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:#FFFFFF;border:1px solid #6E7C93;border-radius:12px;
  cursor:pointer;transition:.15s;font-family:inherit;
}
.hj-slot:hover{border-color:#1B3B6F;}
.hj-slot[aria-expanded="true"]{border-color:#1B3B6F;box-shadow:0 0 0 3px rgba(27,59,111,.18);}
.hj-slot__ko{font-size:.75rem;color:#6B6B6B;line-height:1;}
.hj-slot__hj{font-size:1.6rem;line-height:1.15;color:#222222;
  font-family:"Noto Serif KR",serif;min-height:1.15em;}
.hj-slot--empty .hj-slot__hj{color:#B9B2A8;}

.hj-cands{
  margin-top:10px;padding:10px;border-radius:12px;
  background:rgba(27,59,111,.04);border:1px dashed #6E7C93;
}
.hj-cands__head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 8px;font-size:.8125rem;color:#6B6B6B;}
.hj-cands__clear{background:none;border:0;padding:4px 6px;cursor:pointer;
  font-size:.8125rem;color:#1B3B6F;text-decoration:underline;font-family:inherit;}
.hj-cands__list{display:flex;flex-wrap:wrap;gap:6px;max-height:38vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;}
.hj-chip{
  flex:0 0 auto;display:inline-flex;align-items:baseline;gap:5px;
  padding:7px 10px;border-radius:999px;cursor:pointer;transition:.15s;
  background:#FFFFFF;border:1px solid #6E7C93;color:#222222;font-family:inherit;
}
.hj-chip:hover{border-color:#1B3B6F;background:#F4F7FC;}
.hj-chip.is-on{border-color:#1B3B6F;background:#EAF0FA;}
.hj-chip__h{font-size:1.15rem;font-family:"Noto Serif KR",serif;}
.hj-chip__m{font-size:.75rem;color:#6B6B6B;}

.hj-manual{margin-top:10px;}
.hj-manual>summary{cursor:pointer;font-size:.8125rem;color:#1B3B6F;
  list-style:none;padding:4px 0;font-family:Pretendard,"Noto Sans KR",sans-serif;}
.hj-manual>summary::-webkit-details-marker{display:none;}
.hj-manual>summary::before{content:"▸ ";}
.hj-manual[open]>summary::before{content:"▾ ";}

/* ── 위저드 히어로 시트 안 — 다크 글래스·금테 정본 ── */
.wz--hero .wz-sheet .hj-pick__empty{color:#D9D0BE;}
.wz--hero .wz-sheet .hj-slot{background:rgba(8,13,26,.72);
  border-color:rgba(240,217,160,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.wz--hero .wz-sheet .hj-slot:hover{border-color:#E2C074;}
.wz--hero .wz-sheet .hj-slot[aria-expanded="true"]{border-color:#E2C074;
  box-shadow:0 0 0 3px rgba(226,192,116,.28);}
.wz--hero .wz-sheet .hj-slot__ko{color:#D9D0BE;}
.wz--hero .wz-sheet .hj-slot__hj{color:#F0D9A0;}
.wz--hero .wz-sheet .hj-slot--empty .hj-slot__hj{color:rgba(240,217,160,.4);}
.wz--hero .wz-sheet .hj-cands{background:rgba(8,13,26,.86);
  border-color:rgba(240,217,160,.34);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.wz--hero .wz-sheet .hj-cands__head{color:#D9D0BE;}
.wz--hero .wz-sheet .hj-cands__clear{color:#F0D9A0;}
.wz--hero .wz-sheet .hj-chip{background:rgba(255,255,255,.10);
  border-color:rgba(240,217,160,.45);color:#F1E9DA;}
.wz--hero .wz-sheet .hj-chip:hover{background:rgba(255,255,255,.18);border-color:#E2C074;}
.wz--hero .wz-sheet .hj-chip.is-on{background:#1B3B6F;border-color:#E2C074;}
.wz--hero .wz-sheet .hj-chip__h{color:#F0D9A0;}
.wz--hero .wz-sheet .hj-chip__m{color:#D9D0BE;}
.wz--hero .wz-sheet .hj-manual>summary{color:#F0D9A0;}

/* 손가락 닿는 자리는 44px 이상으로 — 모바일 실기기 폭이 이 컴포넌트의 본무대다 */
@media (max-width:480px){
  .hj-slot{min-width:56px;padding:9px 6px 7px;}
  .hj-slot__hj{font-size:1.5rem;}
  .hj-chip{padding:9px 11px;}
}
@media (prefers-reduced-motion:reduce){
  .hj-slot,.hj-chip{transition:none;}
}