/* 빨간 펜 땅따먹기 (/grammar/adjective/redpen.jsp, 2026-10-18). 틀(.aa-*)은 css/ps2-adjective-arcade.css, 여기는 색 · 고칠 말 판 · 로비 그림(.aj-*) */
#main .gi .aa--redpen { --aa-bg1: #3b0d0d; --aa-bg2: #7f1d1d; --aa-glow: #f87171; --aa-halo: rgba(248, 113, 113, .26); --aa-win: #b91c1c; --aa-accent: #dc2626; }

/* 로비 그림: 공책의 문장에서 빨간 펜이 good 둘레를 돌아 동그라미를 치고, 고칠 말 셋이 떠오른다. 분홍 지우개가 지나간다 */
#main .gi .aa--redpen .aa-hero__art { height: 250px; background: #3b0d0d; box-shadow: inset 0 0 0 1.5px rgba(248, 113, 113, .35); }
#main .gi .aa--redpen .aj-hero__paper { position: absolute; left: 7%; right: 7%; top: 8%; bottom: 8%; border-radius: 10px; background: repeating-linear-gradient(#fffaf0 0 25px, rgba(59, 130, 246, .22) 25px 26px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .45); }
#main .gi .aa--redpen .aj-hero__paper::before { content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: rgba(239, 68, 68, .4); }
#main .gi .aa--redpen .aj-hero__line { position: absolute; z-index: 1; left: 10%; right: 6%; top: 30%; text-align: center; white-space: nowrap; font-size: 14px; font-weight: 800; color: #1e293b; word-spacing: 3px; }
#main .gi .aa--redpen .aj-hero__line b { position: relative; color: #1e293b; animation: aj-word 4s steps(1) infinite; }
#main .gi .aa--redpen .aj-hero__line b::after { content: ""; position: absolute; left: -10px; right: -10px; top: -8px; bottom: -8px; border: 3px solid #dc2626; border-radius: 50%; transform: rotate(-6deg);
    clip-path: inset(0 100% 0 0); animation: aj-ring 4s linear infinite; }
#main .gi .aa--redpen .aj-hero__ring { display: none; }
#main .gi .aa--redpen .aj-hero__fix { position: absolute; z-index: 3; left: 50%; top: 52%; transform: translateX(-50%); display: flex; gap: 8px; opacity: 0; animation: aj-fix 4s ease-out infinite; }
#main .gi .aa--redpen .aj-hero__fix i { padding: 4px 12px; border-radius: 999px; font-style: normal; font-weight: 900; font-size: 13px; color: #1e293b; background: #fff; box-shadow: 0 0 0 1.5px #fca5a5, 0 4px 10px rgba(0, 0, 0, .2); }
#main .gi .aa--redpen .aj-hero__fix i:first-child { color: #15803d; box-shadow: 0 0 0 2px #22c55e, 0 4px 10px rgba(0, 0, 0, .2); }
#main .gi .aa--redpen .aj-hero__pen { position: absolute; z-index: 4; left: 50%; top: 30%; width: 46px; height: 10px; margin: -5px 0 0 -46px; border-radius: 3px; background: linear-gradient(90deg, #1f2937 0 70%, #dc2626 70% 82%, #e5e7eb 82%);
    transform-origin: 100% 50%; animation: aj-pen 4s linear infinite; }
#main .gi .aa--redpen .aj-hero__eraser { position: absolute; z-index: 3; top: 76%; left: -12%; width: 40px; height: 20px; border-radius: 5px; background: linear-gradient(90deg, #3b82f6 0 42%, #f9a8d4 42%); box-shadow: 0 4px 8px rgba(0, 0, 0, .25);
    animation: aj-eraser 4s linear infinite; }
#main .gi .aa--redpen .aj-hero__pop { position: absolute; z-index: 5; left: 50%; top: 13%; transform: translateX(-50%); white-space: nowrap; font-weight: 900; font-size: 18px; color: #15803d; text-shadow: 0 2px 8px rgba(255, 255, 255, .9); opacity: 0;
    animation: aj-pop 4s ease-out infinite; }
@keyframes aj-ring { 0%, 8% { clip-path: inset(0 100% 0 0); } 38% { clip-path: inset(0 0 0 0); } 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes aj-pen { 0%, 8% { transform: translate(-20px, 30px) rotate(-30deg); } 20% { transform: translate(40px, 14px) rotate(-60deg); } 30% { transform: translate(70px, -6px) rotate(-120deg); } 38% { transform: translate(30px, -18px) rotate(-200deg); }
    50%, 100% { transform: translate(-60px, 20px) rotate(-260deg); } }
@keyframes aj-fix { 0%, 40% { opacity: 0; transform: translate(-50%, 8px); } 46%, 88% { opacity: 1; transform: translate(-50%, 0); } 96%, 100% { opacity: 0; } }
@keyframes aj-word { 0% { color: #1e293b; } 62% { color: #15803d; } 92% { color: #1e293b; } }
@keyframes aj-eraser { 0% { left: -12%; } 100% { left: 108%; } }
@keyframes aj-pop { 0%, 60% { opacity: 0; transform: translate(-50%, 8px); } 66%, 86% { opacity: 1; transform: translate(-50%, 0); } 96%, 100% { opacity: 0; } }

/* 한 판: 고칠 말 판 (동그라미 친 곳 아래에 뜬다) */
#main .gi .aa--redpen .aj-cv { cursor: crosshair; }
#main .gi .aa--redpen .aj-fix { position: absolute; z-index: 4; transform: translateX(-50%); min-width: 240px; padding: 10px 12px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px #fca5a5, 0 18px 36px rgba(15, 23, 42, .35);
    text-align: center; animation: aj-in .25s ease-out; }
#main .gi .aa--redpen .aj-fix[hidden] { display: none; }
#main .gi .aa--redpen .aj-fix__h { margin: 0 0 8px; font-size: 13px; font-weight: 900; color: #b91c1c; }
#main .gi .aa--redpen .aj-fix__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#main .gi .aa--redpen .aj-fix__b { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 900; font-size: 15px; color: #1e293b;
    background: #fff7ed; box-shadow: inset 0 0 0 2px #fdba74; transition: transform .12s, box-shadow .12s; }
#main .gi .aa--redpen .aj-fix__b:hover, #main .gi .aa--redpen .aj-fix__b:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #dc2626; outline: none; }
#main .gi .aa--redpen .aj-fix__b small { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; color: #fff; background: #dc2626; }
@keyframes aj-in { from { opacity: 0; transform: translate(-50%, 8px) scale(.96); } }
#main .gi .aa--redpen .aa-side { display: none; }
#main .gi .aa--redpen .aa-ctl { display: none; }
@media (max-width: 760px) {
    #main .gi .aa--redpen .aa-hero__art { height: 220px; }
    #main .gi .aa--redpen .aj-hero__line { font-size: 13px; word-spacing: 2px; }
    #main .gi .aa--redpen .aj-fix { min-width: 200px; }
    #main .gi .aa--redpen .aj-fix__b { font-size: 14px; padding: 6px 12px; }
}