/* 반쪽 합치기 (/grammar/modal/merge.jsp, 2026-10-21) — js/ps2-modal-merge.js 의 .mmg-* 모양. 틀(css/ps2-modal-arcade.css 의 .ga-*) 위에 이 게임의 빛깔 · 문장 줄의 짝 칩 · 단추 · 로비 그림만 얹는다.
   틀이 상자에 'ga ga--merge' 를 붙인다. 틀의 규칙은 '#main .gi .pa' 아래이므로 페이지 상자에 class="pa" 가 있다. */
#main .gi .pa.ga--merge { --ga-bg1: #0a1330; --ga-bg2: #2b1a5e; --ga-glow: #fcd34d; --ga-halo: rgba(252, 211, 77, .24); --ga-accent: #6d28d9; --ga-win: #155e75; --ga-hot: #f59e0b; }
#main .gi .ga--merge .mmg-cv { max-width: 100%; background: #040a1d; }

/* 문장 줄: 금빛 첫 칸 + 반쪽 자리(다음은 빛남, 맞으면 초록, 틀리면 빨강 줄 긋기, 보여 줄 때는 하늘색) */
#main .gi .ga--merge .ga-q .mmg-ask { line-height: 1.9; }
#main .gi .ga--merge .mmg-slot { display: inline-flex; align-items: baseline; gap: 3px; padding: 1px 3px; border-radius: 10px; vertical-align: baseline; transition: background-color .25s ease, box-shadow .25s ease; }
#main .gi .ga--merge .mmg-chip { display: inline-block; padding: 0 8px; border-radius: 8px; font-weight: 800; line-height: 1.5; white-space: nowrap; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
#main .gi .ga--merge .mmg-chip--m { background: linear-gradient(180deg, #fff6cc, #f59e0b); color: #431407; box-shadow: 0 2px 0 #b45309; }
#main .gi .ga--merge .mmg-chip--h { min-width: 2.4em; text-align: center; border: 1.5px dashed rgba(253, 230, 138, .6); background: rgba(255, 255, 255, .1); color: rgba(253, 230, 138, .9); }
#main .gi .ga--merge .mmg-chip--h.is-next { animation: mmg-next 1.2s ease-in-out infinite; }
#main .gi .ga--merge .mmg-slot.is-ok { background: rgba(34, 197, 94, .18); box-shadow: 0 0 0 1.5px rgba(134, 239, 172, .7), 0 0 18px rgba(74, 222, 128, .35); }
#main .gi .ga--merge .mmg-chip--h.is-ok { border: 1.5px solid #4ade80; background: #dcfce7; color: #14532d; }
#main .gi .ga--merge .mmg-slot.is-bad { background: rgba(239, 68, 68, .16); box-shadow: 0 0 0 1.5px rgba(252, 165, 165, .7); }
#main .gi .ga--merge .mmg-chip--h.is-bad { border: 1.5px solid #f87171; background: #fee2e2; color: #7f1d1d; text-decoration: line-through; text-decoration-thickness: 2px; }
#main .gi .ga--merge .mmg-slot.is-show { background: rgba(56, 189, 248, .16); box-shadow: 0 0 0 1.5px rgba(125, 211, 252, .7); }
#main .gi .ga--merge .mmg-chip--h.is-show { border: 1.5px solid #7dd3fc; background: #e0f2fe; color: #0c4a6e; }
@keyframes mmg-next { 50% { box-shadow: 0 0 0 4px rgba(253, 230, 138, .18); } }

/* 머리의 밀기 수 · 단추 */
#main .gi .ga--merge .mmg-side { padding: 3px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 800; white-space: nowrap; }
#main .gi .ga--merge .mmg-pad--dir { min-width: 58px; font-size: 20px; }
#main .gi .ga--merge .mmg-pad--tool { font-size: 18px; }
#main .gi .ga--merge .mmg-pad--tool.is-hint { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 0 0 3px rgba(245, 158, 11, .25); animation: mmg-hint 1s ease-in-out infinite; }
@keyframes mmg-hint { 50% { box-shadow: 0 0 0 7px rgba(245, 158, 11, .08); } }

/* 로비 그림: 4×4 판에서 swim 칸이 금빛 can 칸으로 미끄러져 와 can swim 으로 합쳐진다 */
#main .gi .ga--merge .mmg-hero { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center;
    background: radial-gradient(70% 60% at 30% 20%, rgba(56, 189, 248, .22), transparent 70%), radial-gradient(60% 60% at 80% 85%, rgba(167, 139, 250, .25), transparent 70%), linear-gradient(180deg, #040a1d 0%, #0a1d44 60%, #0d3557 100%); }
#main .gi .ga--merge .mmg-hero__board { position: relative; width: 200px; height: 200px; border-radius: 18px; background: linear-gradient(180deg, #16224a, #0b1433); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
#main .gi .ga--merge .mmg-hero__cell { position: absolute; width: 21.5%; height: 21.5%; border-radius: 9px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28); }
#main .gi .ga--merge .mmg-hero__cell:nth-child(4n+1) { left: 3.5%; }
#main .gi .ga--merge .mmg-hero__cell:nth-child(4n+2) { left: 27.5%; }
#main .gi .ga--merge .mmg-hero__cell:nth-child(4n+3) { left: 51.5%; }
#main .gi .ga--merge .mmg-hero__cell:nth-child(4n+4) { left: 75.5%; }
#main .gi .ga--merge .mmg-hero__cell:nth-child(-n+4) { top: 3.5%; }
#main .gi .ga--merge .mmg-hero__cell:nth-child(n+5):nth-child(-n+8) { top: 27.5%; }
#main .gi .ga--merge .mmg-hero__cell:nth-child(n+9):nth-child(-n+12) { top: 51.5%; }
#main .gi .ga--merge .mmg-hero__cell:nth-child(n+13):nth-child(-n+16) { top: 75.5%; }
#main .gi .ga--merge .mmg-hero__tile { position: absolute; width: 21.5%; height: 21.5%; display: grid; place-items: center; border-radius: 9px; font-weight: 800; font-size: 13px; line-height: 1.1; text-align: center; letter-spacing: -0.01em; }
#main .gi .ga--merge .mmg-hero__tile--m { left: 3.5%; top: 27.5%; z-index: 2; color: #431407; background: linear-gradient(180deg, #fff6cc, #f59e0b); box-shadow: 0 3px 0 #b45309, 0 0 18px rgba(251, 191, 36, .55); animation: mmg-hm 4.8s ease-in-out infinite; }
#main .gi .ga--merge .mmg-hero__tile--h { left: 75.5%; top: 27.5%; z-index: 1; color: #134e4a; background: linear-gradient(180deg, #ccfbf1, #5eead4); box-shadow: 0 3px 0 #0f766e; animation: mmg-hh 4.8s cubic-bezier(.2, .8, .3, 1) infinite; }
#main .gi .ga--merge .mmg-hero__tile--x { left: 51.5%; top: 75.5%; color: #3b0764; background: linear-gradient(180deg, #ede9fe, #a78bfa); box-shadow: 0 3px 0 #6d28d9; font-size: 12px; }
#main .gi .ga--merge .mmg-hero__tile--s { left: 75.5%; top: 3.5%; color: #facc15; background: linear-gradient(180deg, #334155, #0f172a); box-shadow: 0 3px 0 #020617, inset 0 0 0 1px rgba(253, 224, 71, .35); font-size: 22px; }
#main .gi .ga--merge .mmg-hero__tile--stone { left: 27.5%; top: 51.5%; border-radius: 40% 45% 38% 50%; background: linear-gradient(160deg, #94a3b8, #334155); box-shadow: inset 0 -3px 0 rgba(15, 23, 42, .5); }
#main .gi .ga--merge .mmg-hero__link { position: absolute; left: 25%; top: 38.5%; width: 50.5%; height: 0; border-top: 2px dashed rgba(253, 230, 138, .85); filter: drop-shadow(0 0 4px rgba(253, 230, 138, .8)); animation: mmg-hl 4.8s linear infinite; }
#main .gi .ga--merge .mmg-hero__merged { position: absolute; left: 3.5%; top: 27.5%; width: 45.5%; height: 21.5%; z-index: 3; display: grid; place-items: center; border-radius: 999px; color: #052e16; font-weight: 900; font-size: 14px;
    background: linear-gradient(180deg, #f0fdf4, #86efac 45%, #16a34a); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 0 26px rgba(74, 222, 128, .7); opacity: 0; animation: mmg-hmerge 4.8s ease-out infinite; }
#main .gi .ga--merge .mmg-hero__pop { position: absolute; left: calc(50% - 64px); top: calc(50% - 76px); font-weight: 900; font-size: 20px; color: #fde68a; text-shadow: 0 2px 0 rgba(2, 6, 23, .7); opacity: 0; animation: mmg-hpop 4.8s ease-out infinite; }
@keyframes mmg-hh {
    0%, 24% { left: 75.5%; opacity: 1; }
    36% { left: 27.5%; opacity: 1; }
    39% { left: 27.5%; opacity: 0; }
    90% { left: 75.5%; opacity: 0; transform: scale(.4); }
    96%, 100% { left: 75.5%; opacity: 1; transform: none; }
}
@keyframes mmg-hm {
    0%, 37% { opacity: 1; transform: none; }
    39% { opacity: 0; }
    90% { opacity: 0; transform: scale(.4); }
    96%, 100% { opacity: 1; transform: none; }
}
@keyframes mmg-hl {
    0%, 20% { opacity: .95; }
    24%, 92% { opacity: 0; }
    100% { opacity: .95; }
}
@keyframes mmg-hmerge {
    0%, 37% { opacity: 0; transform: scale(.6); }
    41% { opacity: 1; transform: scale(1.1); }
    46% { transform: scale(1); }
    84% { opacity: 1; transform: none; }
    90%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes mmg-hpop {
    0%, 39% { opacity: 0; transform: translateY(8px); }
    45% { opacity: 1; transform: translateY(0); }
    70% { opacity: 1; transform: translateY(-6px); }
    80%, 100% { opacity: 0; transform: translateY(-10px); }
}

@media (max-width: 760px) {
    #main .gi .ga--merge .mmg-hero__board { width: 150px; height: 150px; border-radius: 14px; }
    #main .gi .ga--merge .mmg-hero__tile { font-size: 11px; border-radius: 7px; }
    #main .gi .ga--merge .mmg-hero__tile--s { font-size: 17px; }
    #main .gi .ga--merge .mmg-hero__merged { font-size: 12px; }
    #main .gi .ga--merge .mmg-hero__pop { left: calc(50% - 50px); top: calc(50% - 62px); font-size: 17px; }
    #main .gi .ga--merge .mmg-pad--dir { min-width: 0; }
    #main .gi .ga--merge .mmg-chip { padding: 0 6px; }
}
/* 휴대폰: 판이 낮아 '왜' 카드가 판 안에서 잘리지 않게, 카드를 판 위쪽에 붙이고 아래로 넘쳐 보이게 한다(단추 위를 덮음) */
@media (max-width: 600px) {
    #main .gi .ga--merge .ga-overlay { place-items: start center; padding: 8px; }
    #main .gi .ga--merge .ga-card { max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--merge .mmg-chip--h.is-next, #main .gi .ga--merge .mmg-pad--tool.is-hint { animation: none; }
    #main .gi .ga--merge .mmg-hero__tile--h, #main .gi .ga--merge .mmg-hero__tile--m, #main .gi .ga--merge .mmg-hero__link, #main .gi .ga--merge .mmg-hero__pop { animation: none; }
    #main .gi .ga--merge .mmg-hero__merged { animation: none; opacity: 0; }
}