/* 고쳐 쓰기 소방관 (/grammar/conditional/fire.jsp, 2026-10-21) — js/ps2-conditional-fire.js 의 .cfr-* 모양. 틀(css/ps2-conditional-arcade.css 의 .ga-*) 위에 이 게임의 빛깔 · 문장 줄의 낱말 칩 · 고칠 말 판 · 조작 단추 · 로비 그림만 얹는다.
   틀이 상자에 'ga ga--fire' 를 붙인다. 틀의 규칙은 '#main .gi .pa' 아래이므로 페이지 상자에 class="pa" 가 있다. */
#main .gi .pa.ga--fire { --ga-bg1: #1b1f5e; --ga-bg2: #5b3a8a; --ga-glow: #fdba74; --ga-halo: rgba(253, 186, 116, .28); --ga-accent: #ea580c; --ga-win: #9a3412; --ga-hot: #f97316; }
#main .gi .ga--fire .cfr-play { position: relative; }
#main .gi .ga--fire .cfr-cv { max-width: 100%; background: #1b1f5e; }
/* '왜' 카드: 캔버스가 낮은 휴대폰에서도 카드 전체가 보이게 덮개가 아래로 늘어난다 */
#main .gi .ga--fire .ga-overlay { bottom: auto; min-height: 100%; }
#main .gi .ga--fire .ga-card { max-height: none; overflow: visible; }

/* 문장 줄: 창문 하나 = 칩 하나 (조준한 창문은 노랑 테 · 끈 창문은 하늘빛 · 고친 덩이는 초록 · 틀린 덩이는 빨강 · 젖은 창문은 파란 점선) */
#main .gi .ga--fire .ga-q { gap: 5px; }
#main .gi .ga--fire .ga-q .cfr-ask { font-size: clamp(14px, 1.8vw, 16px); font-weight: 700; color: rgba(255, 255, 255, .8); }
#main .gi .ga--fire .cfr-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--fire .cfr-chip { display: inline-block; padding: 0 4px; border-radius: 8px; line-height: 1.45; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
#main .gi .ga--fire .cfr-chip.is-aim { background: rgba(253, 224, 71, .18); box-shadow: 0 0 0 1.5px rgba(253, 224, 71, .9); }
#main .gi .ga--fire .cfr-chip.is-wet { box-shadow: 0 0 0 1.5px rgba(147, 197, 253, .7); background: rgba(147, 197, 253, .14); }
#main .gi .ga--fire .cfr-chip.is-found { background: #bae6fd; color: #0c4a6e; }
#main .gi .ga--fire .cfr-chip.is-fixed { background: #bbf7d0; color: #052e16; box-shadow: 0 0 14px rgba(74, 222, 128, .55); }
#main .gi .ga--fire .cfr-chip.is-bad { background: #fecdd3; color: #7f1d1d; text-decoration: line-through; }
#main .gi .ga--fire .cfr-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--fire .cfr-chip--blank.is-found { border-style: solid; }
#main .gi .ga--fire .cfr-side { padding: 3px 10px; border-radius: 999px; background: #ffedd5; color: #9a3412; font-weight: 800; white-space: nowrap; }

/* 고칠 말 판: 불을 끈 창문 위로 떠오르는 단추 둘~셋 */
#main .gi .ga--fire .cfr-fix { position: absolute; left: 50%; bottom: 14px; 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, .22); border-radius: 18px; background: linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(67, 20, 7, .94)); color: #fff;
    box-shadow: 0 24px 50px -18px rgba(2, 6, 23, .95), 0 0 0 1px rgba(253, 186, 116, .14); animation: cfr-rise .22s ease; }
#main .gi .ga--fire .cfr-fix.is-top { top: 14px; bottom: auto; }
#main .gi .ga--fire .cfr-fix[hidden] { display: none; }
@keyframes cfr-rise { from { transform: translate(-50%, 12px) scale(.97); opacity: 0; } }
#main .gi .ga--fire .cfr-fix__head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 15px; font-weight: 800; }
#main .gi .ga--fire .cfr-fix__tag { padding: 2px 10px; border-radius: 999px; background: #bae6fd; color: #0c4a6e; font-size: 13px; }
#main .gi .ga--fire .cfr-fix__from { color: #fda4af; text-decoration-thickness: 2px; font-size: 17px; }
#main .gi .ga--fire .cfr-fix__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
#main .gi .ga--fire .cfr-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%, #fed7aa 45%, #fb923c 100%); color: #431407; font-family: inherit; font-weight: 900; font-size: 17px; line-height: 1.2;
    box-shadow: 0 6px 0 #9a3412, 0 12px 24px -10px rgba(251, 146, 60, .8); touch-action: manipulation; transition: transform .08s ease, box-shadow .08s ease, filter .15s ease; }
#main .gi .ga--fire .cfr-fix__opt:hover { filter: brightness(1.06); }
#main .gi .ga--fire .cfr-fix__opt:focus-visible { outline: 3px solid #fde047; outline-offset: 3px; }
#main .gi .ga--fire .cfr-fix__opt:active { transform: translateY(4px); box-shadow: 0 2px 0 #9a3412, 0 6px 14px -8px rgba(251, 146, 60, .8); }
#main .gi .ga--fire .cfr-fix__opt kbd { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #9a3412; color: #fff; font-family: inherit; font-size: 13px; font-weight: 800; }

/* 조작 단추: ◀ 💧 ▶ ✓ */
#main .gi .ga--fire .ga-ctl { display: block; }
#main .gi .ga--fire .cfr-pads { display: grid; grid-template-columns: 1fr 1.6fr 1fr 1.4fr; gap: 8px; width: min(520px, 100%); margin: 0 auto; }
#main .gi .ga--fire .cfr-pad { width: 100%; min-width: 0; height: 54px; font-size: 22px; }
#main .gi .ga--fire .cfr-pad span { display: block; line-height: 1; }
#main .gi .ga--fire .cfr-pad small { display: block; }
#main .gi .ga--fire .cfr-pad--spray { background: radial-gradient(120% 120% at 50% 10%, #1d4ed8 0%, var(--ga-bg1) 70%); border-color: #1d4ed8; }
#main .gi .ga--fire .cfr-pad--ok { background: #ecfdf5; border-color: #86efac; color: #14532d; font-size: 20px; }
#main .gi .ga--fire .cfr-pad--ok small { color: #166534; }
#main .gi .ga--fire .cfr-pad--ok[hidden] { display: none; }
#main .gi .ga--fire .cfr-pad:disabled { opacity: .5; cursor: default; }

/* 로비 그림: 작은 집 (캔버스) + 문장 */
#main .gi .ga--fire .cfr-hero { position: absolute; inset: 0; overflow: hidden; background: #1b1f5e; }
#main .gi .ga--fire .cfr-hero__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#main .gi .ga--fire .cfr-hero__q { position: absolute; left: 50%; bottom: 8px; 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--fire .cfr-sent { font-size: 16px; line-height: 1.55; }
    #main .gi .ga--fire .ga-q { padding: 9px 12px; min-height: 0; }
    #main .gi .ga--fire .ga-q .cfr-ask { font-size: 13px; }
    #main .gi .ga--fire .cfr-fix { width: calc(100% - 14px); padding: 9px 10px 10px; gap: 7px; }
    #main .gi .ga--fire .cfr-fix__opts { grid-template-columns: 1fr; gap: 7px; }
    #main .gi .ga--fire .cfr-fix__opt { min-height: 46px; font-size: 16px; }
    #main .gi .ga--fire .cfr-pads { grid-template-columns: 1fr 1.5fr 1fr 1.3fr; gap: 6px; }
    #main .gi .ga--fire .cfr-pad { height: 50px; font-size: 20px; }
    #main .gi .ga--fire .cfr-pad small { font-size: 10px; }
    #main .gi .ga--fire .cfr-pad--ok { font-size: 18px; }
    #main .gi .pa.ga--fire .ga-card { padding: 12px 14px; }
    #main .gi .pa.ga--fire .ga-card .ga-sent { font-size: 16px; line-height: 1.45; }
    #main .gi .pa.ga--fire .ga-card__ko { font-size: 13.5px; }
    #main .gi .pa.ga--fire .ga-card__why { margin-top: 6px; padding: 8px 10px; font-size: 14px; line-height: 1.55; }
    #main .gi .pa.ga--fire .ga-card__mine { margin-top: 6px; }
    #main .gi .pa.ga--fire .ga-card__mine .ga-sent { font-size: 14.5px; }
    #main .gi .pa.ga--fire .ga-card__row { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--fire .cfr-fix { animation: none; }
    #main .gi .ga--fire .cfr-chip, #main .gi .ga--fire .cfr-fix__opt { transition: none; }
}