/* 고쳐 쓰기 큐브 (/grammar/modal/cube.jsp, 2026-10-21) — js/ps2-modal-cube.js 의 .mcb-* 모양. 틀(css/ps2-modal-arcade.css 의 .ga-*) 위에 이 게임의 빛깔 · 문장 줄의 낱말 칩 · 고칠 말 판 · 방향 단추 · 로비 그림만 얹는다.
   틀이 상자에 'ga ga--cube' 를 붙인다. 틀의 규칙은 '#main .gi .pa' 아래이므로 페이지 상자에 class="pa" 가 있다. */
#main .gi .pa.ga--cube { --ga-bg1: #0b1233; --ga-bg2: #2a1b63; --ga-glow: #67e8f9; --ga-halo: rgba(103, 232, 249, .24); --ga-accent: #4f46e5; --ga-win: #0e7490; --ga-hot: #f59e0b; }
#main .gi .ga--cube .mcb-play { position: relative; }
#main .gi .ga--cube .mcb-cv { max-width: 100%; background: #060d2b; }
/* '왜' 카드: 캔버스가 낮은 휴대폰에서도 카드 전체가 보이게 덮개가 아래(쉬는 단추 위)로 늘어난다 */
#main .gi .ga--cube .ga-overlay { bottom: auto; min-height: 100%; }
#main .gi .ga--cube .ga-card { max-height: none; overflow: visible; }

/* 문장 줄: 큐브 하나 = 칩 하나 (캐릭터가 있는 큐브는 하늘빛 · 고친 덩이는 초록 · 틀린 덩이는 빨강) */
#main .gi .ga--cube .ga-q { gap: 5px; }
#main .gi .ga--cube .ga-q .mcb-ask { font-size: clamp(14px, 1.8vw, 16px); font-weight: 700; color: rgba(255, 255, 255, .78); }
#main .gi .ga--cube .mcb-sent { margin: 0; font-weight: 800; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.75; letter-spacing: -0.005em; color: #fff; }
#main .gi .ga--cube .mcb-chip { display: inline-block; padding: 0 3px; border-radius: 8px; line-height: 1.45; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
#main .gi .ga--cube .mcb-chip.is-here { background: rgba(34, 211, 238, .22); box-shadow: 0 0 0 1.5px rgba(103, 232, 249, .85); }
#main .gi .ga--cube .mcb-chip.is-found { background: #fef08a; color: #422006; }
#main .gi .ga--cube .mcb-chip.is-fixed { background: #bbf7d0; color: #052e16; box-shadow: 0 0 14px rgba(74, 222, 128, .55); }
#main .gi .ga--cube .mcb-chip.is-bad { background: #fecdd3; color: #7f1d1d; }
#main .gi .ga--cube .mcb-chip.is-mine { text-decoration: underline wavy #fda4af; text-underline-offset: 4px; }
#main .gi .ga--cube .mcb-chip.is-good { color: #bbf7d0; }
#main .gi .ga--cube .mcb-chip--blank { min-width: 2.6em; text-align: center; border: 1.5px dashed rgba(253, 230, 138, .7); background: rgba(255, 255, 255, .1); color: #fde68a; }
#main .gi .ga--cube .mcb-chip--blank.is-fixed, #main .gi .ga--cube .mcb-chip--blank.is-show { border-style: solid; }
#main .gi .ga--cube .mcb-chip--blank.is-show { background: #e0f2fe; color: #0c4a6e; border-color: #7dd3fc; }
#main .gi .ga--cube .mcb-side { padding: 3px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 800; white-space: nowrap; }

/* 고칠 말 판: 뒤집힌 큐브 위로 떠오르는 원반 단추 둘~셋 */
#main .gi .ga--cube .mcb-fix { position: absolute; left: 50%; bottom: 12px; z-index: 4; width: min(560px, calc(100% - 20px)); transform: translateX(-50%); display: grid; gap: 9px; padding: 11px 12px 12px;
    border: 1px solid rgba(255, 255, 255, .2); border-radius: 18px; background: linear-gradient(180deg, rgba(15, 23, 42, .93), rgba(30, 27, 75, .93)); color: #fff;
    box-shadow: 0 24px 50px -18px rgba(2, 6, 23, .95), 0 0 0 1px rgba(103, 232, 249, .12); animation: mcb-rise .22s ease; }
#main .gi .ga--cube .mcb-fix.is-top { top: 12px; bottom: auto; }
#main .gi .ga--cube .mcb-fix[hidden] { display: none; }
@keyframes mcb-rise { from { transform: translate(-50%, 12px) scale(.97); opacity: 0; } }
#main .gi .ga--cube .mcb-fix__head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 15px; font-weight: 800; }
#main .gi .ga--cube .mcb-fix__tag { padding: 2px 10px; border-radius: 999px; background: #fde047; color: #422006; font-size: 13px; }
#main .gi .ga--cube .mcb-fix__from { color: #fda4af; text-decoration-thickness: 2px; font-size: 17px; }
#main .gi .ga--cube .mcb-fix__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
#main .gi .ga--cube .mcb-fix__opt { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer;
    background: radial-gradient(120% 140% at 50% 0%, #ffffff 0%, #a5f3fc 45%, #22d3ee 100%); color: #082f49; font-family: inherit; font-weight: 900; font-size: 17px; line-height: 1.2;
    box-shadow: 0 6px 0 #0e7490, 0 12px 24px -10px rgba(34, 211, 238, .8); touch-action: manipulation; transition: transform .08s ease, box-shadow .08s ease, filter .15s ease; }
#main .gi .ga--cube .mcb-fix__opt:hover { filter: brightness(1.06); }
#main .gi .ga--cube .mcb-fix__opt:focus-visible { outline: 3px solid #fde047; outline-offset: 3px; }
#main .gi .ga--cube .mcb-fix__opt:active { transform: translateY(4px); box-shadow: 0 2px 0 #0e7490, 0 6px 14px -8px rgba(34, 211, 238, .8); }
#main .gi .ga--cube .mcb-fix__opt kbd { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #0e7490; color: #fff; font-family: inherit; font-size: 13px; font-weight: 800; }

/* 방향 단추: ↖ ↗ / 가운데 내려앉기 / ↙ ↘ */
#main .gi .ga--cube .ga-ctl { display: block; }
#main .gi .ga--cube .mcb-pads { display: grid; grid-template-columns: 1fr 1.25fr 1fr; grid-template-rows: 52px 52px; gap: 8px; width: min(440px, 100%); margin: 0 auto; }
#main .gi .ga--cube .mcb-pad { width: 100%; height: 100%; min-width: 0; font-size: 24px; }
#main .gi .ga--cube .mcb-pad--ul { grid-column: 1; grid-row: 1; }
#main .gi .ga--cube .mcb-pad--ur { grid-column: 3; grid-row: 1; }
#main .gi .ga--cube .mcb-pad--dl { grid-column: 1; grid-row: 2; }
#main .gi .ga--cube .mcb-pad--dr { grid-column: 3; grid-row: 2; }
#main .gi .ga--cube .mcb-pad--land { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; border-radius: 18px;
    background: radial-gradient(120% 120% at 50% 10%, #3b3fb8 0%, var(--ga-bg1) 70%); box-shadow: inset 0 0 0 1.5px rgba(103, 232, 249, .35), 0 10px 20px -12px rgba(2, 6, 23, .9); }
#main .gi .ga--cube .mcb-pad--land span { display: block; font-weight: 900; }
#main .gi .ga--cube .mcb-pad:disabled { opacity: .5; cursor: default; }

/* 로비 그림: 작은 피라미드 (캔버스) + 문장 */
#main .gi .ga--cube .mcb-hero { position: absolute; inset: 0; overflow: hidden; background: #060d2b; }
#main .gi .ga--cube .mcb-hero__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#main .gi .ga--cube .mcb-hero__q { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: rgba(15, 23, 42, .72);
    color: #fff; font-weight: 800; font-size: 13.5px; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

@media (max-width: 760px) {
    #main .gi .ga--cube .mcb-sent { font-size: 16px; line-height: 1.55; }
    #main .gi .ga--cube .ga-q { padding: 9px 12px; min-height: 0; }
    #main .gi .ga--cube .ga-q .mcb-ask { font-size: 13px; }
    #main .gi .ga--cube .mcb-pad--land small { display: none; }
    #main .gi .ga--cube .mcb-fix { width: calc(100% - 14px); padding: 9px 10px 10px; gap: 7px; }
    #main .gi .ga--cube .mcb-fix__opts { grid-template-columns: 1fr; gap: 7px; }
    #main .gi .ga--cube .mcb-fix__opt { min-height: 46px; font-size: 16px; }
    #main .gi .ga--cube .mcb-pads { grid-template-rows: 48px 48px; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--cube .mcb-fix { animation: none; }
    #main .gi .ga--cube .mcb-chip, #main .gi .ga--cube .mcb-fix__opt { transition: none; }
}