/* 2026-10-26: 현 명식 입력(styles.css .mq-*)과 같은 짜임 — 한 화면에 질문 하나, 캐릭터 그림 위에 질문, 버튼은 아래. */
.reunion-input{position:relative;display:flex;flex-direction:column;min-height:min(640px,calc(100svh - 120px));margin:0 -26px;overflow:hidden;color:#f0e6d2;font-family:inherit;background:#0c0a11 url("./assets/gumiho-listen-v2.webp") 50% 0%/100% auto no-repeat}
.reunion-input [hidden]{display:none!important}
.reunion-input .mq-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,13,.38) 0%,rgba(6,7,13,.08) 22%,rgba(6,7,13,.7) 40%,rgba(6,7,13,.94) 55%,rgba(12,10,17,1) 100%);pointer-events:none}
.reunion-input .mq-top{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 14px 0}
.reunion-input .mq-back{width:38px;height:38px;border:0;border-radius:50%;background:rgba(10,9,14,.5);color:#f0e6d2;font-size:24px;line-height:1;cursor:pointer}
.reunion-input .mq-dots{display:flex;gap:5px;flex:1}
.reunion-input .mq-dots i{height:3px;flex:1;border-radius:2px;background:rgba(255,255,255,.18);transition:background .25s ease}
.reunion-input .mq-dots i.is-on{background:rgba(232,201,119,.9)}
.reunion-input .mq-form{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:0 18px 16px}
.reunion-input .mq-step{animation:reunion-mq-rise .32s ease both}
@keyframes reunion-mq-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reunion-input .mq-lead{margin:0 0 4px;font-size:15px;color:rgba(240,230,210,.78);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.reunion-input .mq-ask{margin:0 0 18px;font-size:27px;font-weight:800;line-height:1.32;color:#fdf7ec;letter-spacing:-.01em;word-break:keep-all;font-family:inherit;text-shadow:0 2px 12px rgba(0,0,0,.85)}
.reunion-input .mq-input{display:block;width:100%;box-sizing:border-box;min-height:0;padding:15px 16px;border:1px solid rgba(232,201,119,.32);border-radius:12px;background:rgba(12,11,17,.72);color:#f6efe1;font-size:17px;font-family:inherit}
.reunion-input .mq-input:focus{outline:2px solid rgba(232,201,119,.6);outline-offset:1px}
.reunion-input .mq-input::placeholder{color:rgba(240,230,210,.38)}
.reunion-input .mq-seg{display:flex;gap:8px;margin-bottom:10px}
.reunion-input .mq-seg-btn{position:relative;flex:1;margin:0}
.reunion-input .mq-seg-btn input{position:absolute;opacity:0;pointer-events:none}
.reunion-input .mq-seg-btn span{display:block;padding:11px 0;text-align:center;border:1px solid rgba(232,201,119,.28);border-radius:10px;background:rgba(12,11,17,.6);color:rgba(240,230,210,.7);font-size:15px;font-weight:700;cursor:pointer}
.reunion-input .mq-seg-btn input:checked+span{border-color:rgba(232,201,119,.85);background:rgba(232,201,119,.16);color:#fbf2e0}
.reunion-input .mq-choice{display:grid;gap:10px;margin-top:10px}
.reunion-input .mq-opt{position:relative;display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;margin:0;padding:16px 18px;border:1px solid rgba(232,201,119,.28);border-radius:12px;background:rgba(12,11,17,.64);color:rgba(240,230,210,.82);font-size:17px;font-weight:700;cursor:pointer}
.reunion-input .mq-opt input{position:absolute;opacity:0;pointer-events:none}
.reunion-input .mq-opt i{width:20px;height:20px;border-radius:50%;border:2px solid rgba(232,201,119,.55);flex:0 0 auto;box-sizing:border-box}
.reunion-input .mq-opt.is-on,.reunion-input .mq-opt:has(input:checked){border-color:rgba(232,201,119,.85);background:rgba(232,201,119,.14);color:#fbf2e0}
.reunion-input .mq-opt.is-on i,.reunion-input .mq-opt:has(input:checked) i{border-color:#e8c977;background:#e8c977;box-shadow:inset 0 0 0 3px rgba(12,11,17,.85)}
.reunion-input .mq-opt:focus-within{outline:2px solid rgba(232,201,119,.6);outline-offset:1px}
.reunion-input .mq-reveal{margin-top:10px}
.reunion-input .mq-note{margin:10px 2px 0;font-size:13px;line-height:1.55;color:rgba(240,230,210,.55);word-break:keep-all}
.reunion-input .mq-field{display:block;margin:0 0 12px}
.reunion-input .mq-field>span{display:block;margin-bottom:6px;font-size:13.5px;font-weight:700;color:rgba(240,230,210,.72)}
.reunion-input .mq-field select,.reunion-input .mq-field input,.reunion-input .mq-field textarea{width:100%;box-sizing:border-box;min-height:0;padding:13px 14px;border:1px solid rgba(232,201,119,.26);border-radius:11px;background:rgba(12,11,17,.7);color:#f6efe1;font-size:16px;font-family:inherit}
.reunion-input .mq-field textarea{min-height:96px;line-height:1.6;resize:vertical}
.reunion-input .mq-why{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:rgba(240,230,210,.5);word-break:keep-all}
.reunion-input .mq-foot{padding-top:18px}
.reunion-input .form-status{margin:0 2px 8px;min-height:18px;font-size:13.5px;color:#f0b7a8;word-break:keep-all}
.reunion-input .mq-next{display:block;width:100%;padding:17px 0;border:0;border-radius:999px;background:#f4efe4;color:#14121a;font-size:17px;font-weight:800;font-family:inherit;cursor:pointer}
.reunion-input .mq-next:disabled{opacity:.55;cursor:wait}
.reunion-input .mq-privacy{margin:12px 2px 0;text-align:center;font-size:12px;color:rgba(240,230,210,.45)}
.reunion-input input,.reunion-input select,.reunion-input textarea,.reunion-input button{touch-action:manipulation}
.reunion-input :focus-visible{outline:2px solid #f6d7a3;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.reunion-input .mq-step{animation:none}}