.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-panel{padding:12px!important}
  .abc-wrap,.abc-board{width:100%;max-width:100%;min-width:0}
  .abc-board{padding:24px 2px 12px;overflow:hidden}
  .abc-cross{--abc-cell:clamp(18px,5.5vw,26px);width:max-content;max-width:100%;grid-template-columns:max-content 14px max-content 14px max-content;column-gap:2px;row-gap:7px;justify-content:center;margin:auto}
  .abc-word{grid-template-columns:repeat(4,var(--abc-cell))}
  .abc-cell{width:var(--abc-cell);height:calc(var(--abc-cell) + 4px)}
  .abc-cell .abc-top{font-size:clamp(10px,3vw,14px);top:-17px}
  .abc-cell input,.abc-cell b{font-size:clamp(14px,4.5vw,20px);min-width:0;padding:0}
  .abc-hop{font-size:18px}
  .abc-vop{height:22px;font-size:18px;line-height:22px}
  .abc-vline{margin:4px 0 8px}
  .abc-key{gap:6px}.abc-key label{font-size:13px}.abc-key input{width:38px;padding:6px;font-size:17px}
}

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