/* 비교 세포 (/grammar/adjective/cells.jsp, 2026-10-18). 틀(.aa-*)은 css/ps2-adjective-arcade.css, 여기는 색 · 문장 틀 · 로비 그림(.ad-*) */
#main .gi .aa--cells { --aa-bg1: #042f2e; --aa-bg2: #0f4c4a; --aa-glow: #5eead4; --aa-halo: rgba(94, 234, 212, .24); --aa-win: #0f766e; --aa-accent: #0d9488; }

/* 로비 그림: 접시 위에 낱말 방울이 떠다니고, 내 세포(deeper)가 than 방울로 다가간다. 가시 돋친 천적이 뒤에서 쫓는다 */
#main .gi .aa--cells .aa-hero__art { height: 250px; background: radial-gradient(110% 90% at 50% 50%, #0b2a3a 0%, #06172a 60%, #020814 100%); box-shadow: inset 0 0 0 1.5px rgba(94, 234, 212, .35); }
#main .gi .aa--cells .ad-hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(125, 211, 252, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 211, 252, .08) 1px, transparent 1px); background-size: 24px 24px; }
#main .gi .aa--cells .ad-hero__b { position: absolute; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; font-size: 13px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(15, 23, 42, .7);
    box-shadow: inset -6px -8px 14px rgba(0, 0, 0, .25), inset 6px 6px 12px rgba(255, 255, 255, .25), 0 0 0 2px rgba(255, 255, 255, .3); animation: ad-float 3.4s ease-in-out infinite; }
#main .gi .aa--cells .ad-hero__b--1 { left: 64%; top: 28%; background: radial-gradient(circle at 35% 30%, #93c5fd, #1d4ed8); animation: ad-eaten 4.2s ease-in-out infinite; }
#main .gi .aa--cells .ad-hero__b--2 { left: 14%; top: 14%; background: radial-gradient(circle at 35% 30%, #f0abfc, #a21caf); animation-delay: -1s; }
#main .gi .aa--cells .ad-hero__b--3 { left: 72%; top: 62%; width: 74px; height: 74px; background: radial-gradient(circle at 35% 30%, #fcd34d, #b45309); animation-delay: -2s; }
#main .gi .aa--cells .ad-hero__me { position: absolute; z-index: 2; left: 34%; top: 40%; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5eead4, #0d9488);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 0 22px rgba(94, 234, 212, .6); animation: ad-me 4.2s ease-in-out infinite; }
#main .gi .aa--cells .ad-hero__me b { font-size: 13px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(15, 23, 42, .7); animation: ad-word 4.2s steps(1) infinite; }
#main .gi .aa--cells .ad-hero__me b::after { content: ""; }
#main .gi .aa--cells .ad-hero__foe { position: absolute; z-index: 1; left: 6%; top: 58%; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fb7185, #7f1d1d);
    box-shadow: 0 0 0 2px rgba(254, 202, 202, .6), 0 0 0 7px rgba(254, 202, 202, .12); animation: ad-foe 4.2s ease-in-out infinite; }
#main .gi .aa--cells .ad-hero__bar { position: absolute; z-index: 3; left: 50%; bottom: 5%; transform: translateX(-50%); white-space: nowrap; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #e2e8f0; background: rgba(2, 6, 23, .72); }
#main .gi .aa--cells .ad-hero__bar i { display: inline-block; min-width: 38px; padding: 0 6px; margin: 0 1px; border-radius: 6px; font-style: normal; color: #042f2e; background: #5eead4; text-align: center; }
#main .gi .aa--cells .ad-hero__bar i.is-next { color: transparent; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(94, 234, 212, .8); animation: ad-slot 4.2s steps(1) infinite; }
@keyframes ad-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -8px); } }
@keyframes ad-eaten { 0%, 45% { transform: translate(0, 0) scale(1); opacity: 1; } 58% { transform: translate(-60px, 26px) scale(.4); opacity: 0; } 59%, 86% { opacity: 0; } 100% { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes ad-me { 0%, 10% { transform: translate(0, 0) scale(1); } 50% { transform: translate(52px, -16px) scale(1); } 60% { transform: translate(52px, -16px) scale(1.15); } 86% { transform: translate(52px, -16px) scale(1.15); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes ad-word { 0% { color: #fff; } 58% { color: #fde68a; } 90% { color: #fff; } }
@keyframes ad-foe { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, -20px); } }
@keyframes ad-slot { 0% { color: transparent; background: transparent; } 58% { color: #042f2e; background: #5eead4; } 90% { color: transparent; background: transparent; } }

/* 한 판: 자료 줄과 문장 틀(빈칸이 차례로 찬다) */
#main .gi .aa--cells .ad-ctx { display: inline-block; margin: 0 auto 6px; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #ccfbf1; background: rgba(94, 234, 212, .14); box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .35); }
#main .gi .aa--cells .ad-frame { line-height: 2.1; }
#main .gi .aa--cells .ad-slot { display: inline-block; min-width: 46px; padding: 0 8px; margin: 0 2px; border-radius: 8px; line-height: 1.6; text-align: center; font-size: .82em; color: rgba(255, 255, 255, .45);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); vertical-align: middle; }
#main .gi .aa--cells .ad-slot.is-next { color: #fde68a; box-shadow: inset 0 0 0 2px #fde68a; animation: ad-pulse 1s ease-in-out infinite; }
#main .gi .aa--cells .ad-slot.is-got { color: #042f2e; background: #5eead4; box-shadow: none; font-size: 1em; }
@keyframes ad-pulse { 50% { box-shadow: inset 0 0 0 2px rgba(253, 230, 138, .35); } }
#main .gi .aa--cells .aa-cv { cursor: crosshair; }
#main .gi .aa--cells .aa-side { display: none; }
#main .gi .aa--cells .aa-ctl { display: none; }
@media (max-width: 760px) {
    #main .gi .aa--cells .aa-hero__art { height: 220px; }
    #main .gi .aa--cells .ad-ctx { font-size: 12px; }
}