/* 형용사 · 부사 피아노 (/grammar/adjective/piano.jsp, 2026-10-18). 틀(.aa-*)은 css/ps2-adjective-arcade.css, 여기는 색과 로비 그림(.ap-*) */
#main .gi .aa--piano { --aa-bg1: #0b1030; --aa-bg2: #241a5a; --aa-glow: #93c5fd; --aa-halo: rgba(252, 211, 77, .2); --aa-win: #3730a3; --aa-accent: #4f46e5; }

/* 로비 그림: 건반 위로 문장 띠가 흘러내리고, 맞는 건반이 빛나며 음표가 떠오른다 */
#main .gi .aa--piano .aa-hero__art { height: 250px; background: linear-gradient(180deg, #101a3f, #05081a); box-shadow: inset 0 0 0 1.5px rgba(147, 197, 253, .35); }
#main .gi .aa--piano .ap-hero__keys { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
#main .gi .aa--piano .ap-hero__keys i { border-right: 1px solid rgba(255, 255, 255, .06); }
#main .gi .aa--piano .ap-hero__row { position: absolute; left: 6%; right: 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .35); animation: ap-flow 5s linear infinite; }
#main .gi .aa--piano .ap-hero__row--2 { animation-delay: -2.5s; }
#main .gi .aa--piano .ap-hero__row em { grid-column: 1 / -1; font-style: normal; text-align: center; font-weight: 800; font-size: 14.5px; color: #f8fafc; }
#main .gi .aa--piano .ap-hero__row b { display: grid; place-items: center; height: 38px; border-radius: 10px; font-weight: 900; font-size: 14px; color: #fff; background: linear-gradient(#273250, #0b1020);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
#main .gi .aa--piano .ap-hero__row--1 b:first-of-type, #main .gi .aa--piano .ap-hero__row--2 b:last-of-type { animation: ap-press 5s linear infinite; }
#main .gi .aa--piano .ap-hero__row--2 b:last-of-type { animation-delay: -2.5s; }
#main .gi .aa--piano .ap-hero__line { position: absolute; left: 4%; right: 4%; bottom: 14%; height: 3px; border-radius: 2px; background: #fcd34d; box-shadow: 0 0 14px #fcd34d; }
#main .gi .aa--piano .ap-hero__note { position: absolute; bottom: 18%; font-size: 22px; font-weight: 900; color: #fcd34d; opacity: 0; animation: ap-note 2.5s ease-out infinite; }
#main .gi .aa--piano .ap-hero__note--1 { left: 28%; }
#main .gi .aa--piano .ap-hero__note--2 { left: 52%; animation-delay: -.8s; }
#main .gi .aa--piano .ap-hero__note--3 { left: 70%; animation-delay: -1.6s; }
@keyframes ap-flow { 0% { top: -36%; } 100% { top: 104%; } }
@keyframes ap-press { 0%, 52% { background: linear-gradient(#273250, #0b1020); color: #fff; } 58%, 100% { background: linear-gradient(#fefce8, #e5e7eb); color: #111827; box-shadow: 0 0 18px rgba(252, 211, 77, .8); } }
@keyframes ap-note { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px) rotate(12deg); } }

/* 한 판 */
#main .gi .aa--piano .aa-side { display: none; }
#main .gi .aa--piano .aa-ctl { display: none; }
@media (max-width: 760px) {
    #main .gi .aa--piano .aa-hero__art { height: 210px; }
    #main .gi .aa--piano .ap-hero__row em { font-size: 13px; }
}