.abc-panel{overflow:hidden}
.abc-wrap{max-width:980px;margin:0 auto}
.abc-rule{margin-bottom:20px}
.abc-board{background:#fff;border:2px solid #0a9b4a;padding:32px 24px;margin:auto;overflow-x:auto}
.abc-cross{display:grid;grid-template-columns:max-content 46px max-content 46px max-content;align-items:center;justify-content:center;column-gap:10px;row-gap:8px}
.abc-slot{display:flex;align-items:center;justify-content:center}
.abc-word{display:grid;grid-template-columns:repeat(4,54px);align-items:end}
.abc-cell{display:inline-flex;position:relative;width:54px;height:54px;border:1px solid #111;background:#fff;align-items:center;justify-content:center}
.abc-empty{border-color:transparent;background:transparent!important}
.abc-cell .abc-top{position:absolute;top:-29px;left:0;right:0;text-align:center;font-size:24px;color:#000;font-weight:400;line-height:1}
.abc-cell input{width:100%;height:100%;border:0;text-align:center;font-size:30px;background:transparent;color:#111;font-weight:bold}
.abc-cell input::placeholder{color:#cfcfcf;opacity:1}
.abc-cell b{font-size:30px}
.abc-fixed{background:#d9d9d9}
.abc-letter{background:#fff}
.abc-error{outline:3px solid #d00000;outline-offset:-3px}
.abc-hop{font-size:32px;font-weight:bold;text-align:center;align-self:center}
.abc-vop{height:30px;font-size:30px;font-weight:bold;text-align:center;line-height:30px;align-self:center}
.abc-vline{border-top:3px double #111;height:8px;margin:8px 0 10px}
.abc-key{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:16px}
.abc-key h3{width:100%;text-align:center;margin:8px 0}
.abc-key label{font-weight:bold}
.abc-key input{width:48px;padding:7px;border:2px solid #111;border-radius:8px;text-align:center;font-size:20px}
.abc-solution{text-align:center;margin-top:14px;font-size:18px;font-weight:bold}
.number-0{background:#eee!important}
.number-1{background:#e0e0e0!important}
.number-2{background:#c9a3e6!important}
.number-3{background:#a9df78!important}
.number-4{background:#bde7fb!important}
.number-5{background:#e8a3d2!important}
.number-6{background:#ffe44f!important}
.number-7{background:#b6e97d!important}
.number-8{background:#76d7d9!important}
.number-9{background:#ffc84d!important}

@media(max-width:760px){
  .abc-board{padding:24px 8px}
  .abc-cross{grid-template-columns:max-content 24px max-content 24px max-content;column-gap:4px;row-gap:7px;justify-content:start}
  .abc-word{grid-template-columns:repeat(4,34px)}
  .abc-cell{width:34px;height:38px}
  .abc-cell .abc-top{font-size:15px;top:-19px}
  .abc-cell input,.abc-cell b{font-size:21px}
  .abc-hop{font-size:23px}
  .abc-vop{height:24px;font-size:22px;line-height:24px}
  .abc-vline{margin:4px 0 8px}
}

@media print{
  .toolbar,.btn{display:none!important}
  .abc-key{display:none}
  .abc-board{border:1px solid #000}
}