/* 또또스쿨 인기 게임 학습 시리즈 공통 화면 */
.hk-ov { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; padding: 14px 12px; overflow: auto; background: var(--hk-back, linear-gradient(180deg, rgba(20, 26, 48, .92), rgba(20, 26, 48, .96))); color: #fff; animation: hk-in .25s ease-out; }
@keyframes hk-in { from { opacity: 0; } }
.hk-head { text-align: center; margin-bottom: 10px; }
.hk-head h2 { margin: 0; font-family: var(--sp-font-display); font-weight: 400; font-size: clamp(26px, 4.6vh, 38px); }
.hk-head p { margin: 4px 0 0; font-size: 16px; opacity: .85; }

/* 단계 지도 */
.hk-path { width: min(560px, 100%); display: flex; flex-direction: column-reverse; gap: 14px; padding: 10px 6px 20px; }
.hk-row { display: flex; justify-content: space-between; gap: 8px; }
.hk-row.rev { flex-direction: row-reverse; }
.hk-node { position: relative; width: clamp(52px, 15vw, 82px); height: clamp(52px, 15vw, 82px); border-radius: 50%; border: 0; background: linear-gradient(#ffe48a, #ffbf2e); color: #5a3d00; font-family: var(--sp-font-num); font-weight: 900; font-size: clamp(20px, 4vw, 28px); box-shadow: 0 6px 0 #c98a00, 0 10px 18px rgba(0, 0, 0, .3); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hk-node.done { background: linear-gradient(#a6f0b7, #3fc06a); color: #0e4a22; box-shadow: 0 6px 0 #22833f, 0 10px 18px rgba(0, 0, 0, .3); }
.hk-node.lock { background: #59607a; color: #c4c9dd; box-shadow: 0 6px 0 #3b4157; cursor: default; }
.hk-node.cur { animation: hk-bob 1s ease-in-out infinite; outline: 4px solid #fff; outline-offset: 3px; }
@keyframes hk-bob { 50% { transform: translateY(-6px); } }
.hk-node .hk-st { position: absolute; bottom: -14px; display: flex; gap: 1px; font-size: 15px; }
.hk-st i { font-style: normal; color: rgba(255, 255, 255, .35); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.hk-st i.on { color: #ffd84d; }
.hk-foot { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: auto; padding-top: 10px; }

/* 학습 묶음 */
.hk-pack-grid { width: min(820px, 100%); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.hk-pack { position: relative; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 14px; border: 3px solid transparent; border-radius: 20px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; min-height: 84px; }
.hk-pack:hover, .hk-pack.on { border-color: #ffd84d; background: rgba(255, 255, 255, .2); }
.hk-pack-em { grid-row: 1 / span 2; font-size: 40px; text-align: center; }
.hk-pack b { font-family: var(--sp-font-display); font-weight: 400; font-size: 21px; }
.hk-pack small { font-size: 14px; opacity: .85; line-height: 1.4; }
.hk-pack-stars { position: absolute; right: 12px; top: 10px; font-size: 13px; color: #ffd84d; font-weight: 800; }

/* 결과 카드 */
.hk-result { justify-content: center; background: rgba(15, 20, 38, .72); }
.hk-card { width: min(460px, 100%); background: #fff; color: #26332f; border-radius: 28px; padding: 20px 18px 16px; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); animation: hk-pop .35s cubic-bezier(.2, .9, .3, 1.3); max-height: 100%; overflow: auto; }
@keyframes hk-pop { from { transform: scale(.7); opacity: 0; } }
.hk-card h2 { margin: 0 0 4px; font-family: var(--sp-font-display); font-weight: 400; font-size: 30px; }
.hk-card.lose h2 { color: #b5462f; }
.hk-bigstars { display: flex; justify-content: center; gap: 8px; margin: 6px 0; }
.hk-bigstars i { font-style: normal; font-size: 54px; color: #dfe3ec; }
.hk-bigstars i.on { color: #ffc61a; text-shadow: 0 3px 0 #d08f00; animation: hk-star .45s cubic-bezier(.2, .9, .3, 1.5) both; }
@keyframes hk-star { from { transform: scale(0) rotate(-90deg); } }
.hk-score { font-family: var(--sp-font-num); font-weight: 900; font-size: 40px; color: #e5602b; }
.hk-score small { font-size: 18px; margin-left: 2px; }
.hk-lines { list-style: none; padding: 0; margin: 6px 0; font-size: 16px; line-height: 1.7; }
.hk-learn { text-align: left; background: #f4f7fb; border-radius: 16px; padding: 10px 12px; margin: 8px 0; font-size: 15px; }
.hk-learn ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.hk-learn li { display: flex; gap: 8px; align-items: baseline; line-height: 1.5; word-break: keep-all; }
.hk-learn li span { font-weight: 900; }
.hk-learn li.ok span { color: #2f9e5a; } .hk-learn li.no span { color: #e5483b; }
.hk-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.hk-btn { min-height: 50px; padding: 0 18px; border: 0; border-radius: 16px; font-family: var(--sp-font-display); font-size: 19px; cursor: pointer; }
.hk-primary { background: linear-gradient(#ad481b, #913812); color: #fff; box-shadow: 0 5px 0 #6d2b0f; }
.hk-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #a8401a; }
.hk-ghost { background: rgba(120, 130, 160, .16); color: inherit; }
.hk-ov .hk-ghost { color: #fff; background: rgba(255, 255, 255, .16); }
.hk-card .hk-ghost { color: #26332f; background: #eef1f6; }

/* 알림 */
.hk-toast { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 15; background: rgba(20, 24, 40, .86); color: #fff; padding: 12px 24px; border-radius: 20px; font-family: var(--sp-font-display); font-size: clamp(20px, 4vh, 32px); text-align: center; pointer-events: none; animation: hk-pop .25s ease-out; white-space: nowrap; transition: opacity .35s, transform .35s; }
.hk-toast.out { opacity: 0; transform: translate(-50%, -80%); }
.hk-toast.good { background: rgba(31, 140, 70, .92); } .hk-toast.bad { background: rgba(200, 60, 45, .92); }
.hk-toast small { display: block; font-family: var(--sp-font-body); font-size: 15px; opacity: .9; }

/* 놀이 중 지도 버튼 */
.hk-mapbtn { position: absolute; right: 10px; top: 10px; z-index: 7; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .85); box-shadow: 0 3px 10px rgba(0, 0, 0, .2); font-size: 22px; cursor: pointer; }
.hk-mapbtn:active { transform: scale(.94); }
.hk-toast{max-width:calc(100% - 24px);white-space:normal;overflow-wrap:anywhere;line-height:1.5}.hk-node{flex-shrink:0;min-width:48px;min-height:48px}.hk-ov :focus-visible{outline:3px solid #165eaf;outline-offset:4px}.hk-map :focus-visible,.hk-packs :focus-visible{outline-color:#fff}
@media(max-width:374px){.hk-path{padding-inline:0}.hk-row{gap:6px}.hk-node{width:48px;height:52px;font-size:20px}.hk-st i{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hk-ov,.hk-card,.hk-node,.hk-bigstars i,.hk-toast{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.hk-map-guide{max-width:540px;line-height:1.6;font-size:16px!important;opacity:1!important;color:#fff}.hk-btn{min-height:56px;touch-action:manipulation}.hk-card{width:min(600px,100%)}.hk-node{animation:none}.hk-free-map .hk-path{flex-direction:column;gap:12px}.hk-free-map .hk-row.rev{flex-direction:row}.hk-free-map .hk-node{border-radius:16px;width:clamp(48px,15vw,82px);height:82px;background:#edf6ff;color:#244768;box-shadow:0 4px 0 #95afc9}.hk-free-map .hk-node small{font-family:var(--sp-font-body);font-size:12px;margin-top:6px;font-weight:700}.hk-free-ranks{margin:12px 0;padding:12px;background:#edf6f1;border-radius:14px;text-align:left}.hk-free-ranks h3{margin:0;font-size:18px}.hk-free-ranks p{font-size:14px;line-height:1.5}.hk-free-ranks ol{padding-left:24px;font-size:16px}.hk-free-ranks li{padding:5px}.hk-free-ranks li b{float:right}.hk-btns{position:sticky;bottom:-1px;background:#fff;padding:12px 0 4px}.hk-btns .hk-primary{flex-basis:100%}.hk-ov{padding-bottom:max(18px,env(safe-area-inset-bottom))}

/* 안내창: 왼쪽 50% 배치 때문에 절반 너비에서 접히던 문제, 한글 낱말 중간 끊김 */
.hk-toast{width:max-content;word-break:keep-all;overflow-wrap:break-word}

/* 배운 것 줄: 글 속 <b>·<small>이 따로 칸으로 갈라지지 않게 한 덩어리로 */
.hk-learn li .hk-li-tx { flex: 1 1 auto; min-width: 0; font-weight: 400; }
.hk-learn li.ok .hk-li-tx, .hk-learn li.no .hk-li-tx, .hk-learn li .hk-li-tx span { color: inherit; font-weight: inherit; }