/* べつの 端末へ ひっこす（/manabi/hikkoshi/。templates/manabi/hikkoshi.html）。
   色・角丸・影は manabi.css の :root のトークンだけを使う（正本は manabi/DESIGN.md「べつの 端末へ ひっこす」）。 */

.hk__inner { display: grid; gap: 20px; padding-block: 8px 48px; max-width: 880px; }
.hk__inner [hidden] { display: none !important; }
.hk__lead { font-size: 17px; line-height: 1.9; max-width: 44em; margin: 0; }
.hk__note { font-size: 15px; color: var(--ink-soft); margin: 0; }

.hk-card { display: grid; gap: 16px; padding: 22px; background: var(--panel); border: 2px solid var(--ink); border-radius: var(--radius-m); box-shadow: 0 4px 0 var(--ink); }
.hk-card p { margin: 0; }
.hk-sum { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.hk-sum li { padding: 4px 14px; font-size: 15px; font-weight: 700; background: var(--wood-light); border: 2px solid var(--ink); border-radius: var(--radius-pill); }

/* QR コード（白地に墨。読みとりやすいよう、まわりの白い余白は QR の側で4マスとる） */
.hk-qr { margin: 0; display: grid; gap: 10px; justify-items: start; }
.hk-qr__img { width: min(320px, 100%); background: #FFFFFF; border: 2.5px solid var(--ink); border-radius: var(--radius-s); line-height: 0; }
.hk-qr__img svg { display: block; width: 100%; height: auto; }
.hk-qr__img:empty { display: none; }
.hk-qr__note { font-size: 16px; font-weight: 700; }

.hk-ask { font-family: var(--font-head); font-weight: 900; font-size: 22px; line-height: 1.6; }
.hk-mix { padding: 10px 14px; font-size: 15px; line-height: 1.7; background: var(--wood-light); border: 2px solid var(--ink); border-radius: var(--radius-s); }
.hk-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hk-btns .m-btn { cursor: pointer; min-width: 8em; justify-content: center; }
.hk-card .m-btn { cursor: pointer; }

.hk-msg { margin: 0; padding: 14px 18px; font-size: 17px; font-weight: 700; line-height: 1.8; background: var(--panel); border: 2px solid var(--ink); border-radius: var(--radius-m); }
.hk-msg--warn { border-color: var(--fig-red); }
.hk-msg--ok { background: var(--wood-light); }

.hk-adult { padding: 16px 20px; border: 2px dashed var(--grid); border-radius: var(--radius-m); }
.hk-adult__title { margin: 0; font-family: var(--font-head); font-weight: 900; font-size: 16px; }
.hk-adult__list { margin: 6px 0 0; padding-left: 1.3em; display: grid; gap: 4px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }

@media print { .hk-qr { display: none !important; } }