/* Hangul block builder. Roles have their own colour and their own border style (never colour alone):
   initial = solid blue, vowel = dashed green, final = dotted purple. */
.hb { display: grid; gap: .5rem; justify-items: center; width: 100%; }
.hb-hint { margin: 0; font: 600 1.0625rem/1.3 var(--f-b), var(--cjk); color: var(--ink2); min-height: 1.3em; text-align: center; }
.hb-show { display: flex; gap: 1.125rem; align-items: center; min-height: 7.5rem; }
.hb-block { display: grid; width: 7.5rem; height: 7.5rem; gap: .25rem; padding: .25rem; border: 2px solid var(--edge); border-radius: .625rem; background: #fff; }
.hb-block > span { display: grid; place-items: center; border-radius: .375rem; font: 700 1.75rem/1 var(--cjk-ko, var(--cjk)); min-width: 0; min-height: 0; overflow: hidden; }
.hb-block.below .hb-v, .hb-block .hb-f { font-size: 1.375rem; }
.hb-block .hb-c { border: 2.5px solid #2E6FD8; background: #EAF2FF; grid-area: c; }
.hb-block .hb-v { border: 2.5px dashed #1E8C68; background: #E6F6F0; grid-area: v; }
.hb-block .hb-f { border: 2.5px dotted #7A4FC9; background: #F2ECFC; grid-area: f; }
.hb-block .empty { background: #fff; }
.hb-block.right { grid-template: "c v" 1fr "f f" .7fr / 1fr 1fr; }
.hb-block.below { grid-template: "c" 1fr "v" .8fr "f" .7fr / 1fr; }
.hb-block.both { grid-template: "c v" 1fr "c2 v" .8fr "f f" .7fr / 1fr 1fr; }
.hb-block.both .hb-c { grid-area: c / c / c2 / c2; }
.hb-big { font: 700 6rem/1 var(--cjk-ko, var(--cjk)); color: var(--ink); }
.hb-top { display: grid; gap: .375rem; justify-items: center; }
.hb-row { display: flex; gap: .75rem; align-items: center; }
.hb-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); gap: .375rem; width: min(100%, 35rem); }
.hb-key { min-height: 3.5rem; border: 2px solid var(--edge); border-radius: .75rem; background: #fff; font: 700 1.625rem/1 var(--cjk-ko, var(--cjk)); color: var(--ink); cursor: pointer; }
.hb-pal[data-step="cho"] .hb-key { border-color: #2E6FD8; }
.hb-pal[data-step="jung"] .hb-key { border-color: #1E8C68; border-style: dashed; }
.hb-pal[data-step="jong"] .hb-key { border-color: #7A4FC9; border-style: dotted; }
.hb-key.none { grid-column: span 2; font: 600 .9375rem/1.2 var(--f-b), var(--cjk); border-style: solid !important; }
.hb-key:active { transform: translate(1px, 1px); }
.hb-play { display: grid; gap: .75rem; justify-items: center; }
.hb-target { display: flex; gap: .875rem; align-items: center; }
.hb-goal { font: 700 clamp(2.75rem, 12vw, 4.5rem)/1 var(--cjk-ko, var(--cjk)); }
.hb-word { display: flex; gap: .5rem; }
.hb-word span { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; border: 2px dashed var(--edge); border-radius: .625rem; font: 700 2.5rem/1 var(--cjk-ko, var(--cjk)); background: #fff; }
.hb-word span.now { border: 2.5px solid var(--ink); background: #FFF6D8; }
.hb-word span.done { border-style: solid; }
.ho .hb-show { min-height: 0; }
.ho .hb-big { display: none; }
.ho .hb-play { gap: .5rem; }
.ho .hb-block { width: 6.75rem; height: 6.75rem; }
.ho .hb-big { font-size: 4rem; }
@media (max-height: 760px) { .ho .hb-goal { font-size: 40px; } .ho .hb-word span { width: 52px; height: 52px; font-size: 32px; } }
/* paper */
.hb-sheet { columns: 2; column-gap: 12mm; font: 600 18pt/1 var(--cjk-ko, var(--cjk)); padding-left: 8mm; }
.hb-sheet li { break-inside: avoid; margin: 0 0 7mm; }
.hb-sheet .blank.sq { display: inline-block; width: 13mm; height: 13mm; border: .4mm solid #1D2433; vertical-align: middle; }