/* 2026-10-26: 현 명식 입력(styles.css .mq-*)과 같은 짜임 — 한 화면에 질문 하나, 캐릭터 그림 위에 질문, 버튼은 아래.
   기존 page.css·customer-page.css 의 #csat-form 규칙보다 뒤에 읽히고, 같은 무게(.csat-input #csat-form …)로 덮는다. */
.csat-input .input-section{padding:0}
.csat-input #personal-teaser,.csat-input #order-summary{padding:0 20px}
.csat-input .csat-mq{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - 72px);overflow:hidden;color:#f0e6d2;background:#0c0a11 url("./assets/satgat-hero.jpg") 50% 20%/cover no-repeat}
.csat-input .csat-mq [hidden]{display:none!important}
.csat-input .csat-mq .mq-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,13,.4) 0%,rgba(6,7,13,.12) 28%,rgba(6,7,13,.82) 56%,rgba(6,7,13,.97) 100%);pointer-events:none}
.csat-input .csat-mq .mq-top{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 14px 0}
.csat-input .csat-mq .mq-back{width:38px;height:38px;min-height:0;border:0;border-radius:50%;background:rgba(10,9,14,.5);color:#f0e6d2;font-size:24px;line-height:1;padding:0;cursor:pointer}
.csat-input .csat-mq .mq-dots{display:flex;gap:5px;flex:1}
.csat-input .csat-mq .mq-dots i{height:3px;flex:1;border-radius:2px;background:rgba(255,255,255,.18);transition:background .25s ease}
.csat-input .csat-mq .mq-dots i.is-on{background:rgba(232,201,119,.9)}
.csat-input #csat-form.mq-form{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:0;margin:0;padding:0 18px 16px;font:inherit}
.csat-input #csat-form .mq-step{animation:csat-mq-rise .32s ease both}
@keyframes csat-mq-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.csat-input #csat-form .mq-lead{margin:0 0 4px;font:15px/1.6 var(--sans,inherit);color:rgba(240,230,210,.72)}
.csat-input #csat-form .mq-ask{margin:0 0 18px;font:800 27px/1.32 var(--sans,inherit);color:#fdf7ec;letter-spacing:-.01em;word-break:keep-all}
.csat-input #csat-form input.mq-input,.csat-input #csat-form textarea.mq-input{display:block;width:100%;box-sizing:border-box;min-height:0;margin:0;padding:15px 16px;border:1px solid rgba(232,201,119,.32);border-radius:12px;background:rgba(12,11,17,.72);color:#f6efe1;font:17px/1.5 var(--sans,inherit)}
.csat-input #csat-form textarea.mq-textarea{min-height:120px;line-height:1.6;resize:vertical}
.csat-input #csat-form .mq-input:focus{outline:2px solid rgba(232,201,119,.6);outline-offset:1px}
.csat-input #csat-form .mq-input::placeholder{color:rgba(240,230,210,.38)}
.csat-input #csat-form .mq-input:disabled{opacity:.35}
.csat-input #csat-form .mq-seg{display:flex;gap:8px;margin-bottom:10px}
.csat-input #csat-form .mq-seg-btn{position:relative;flex:1;display:block;min-height:0;margin:0;padding:0}
.csat-input #csat-form .mq-seg-btn input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.csat-input #csat-form .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:700 15px/1.5 var(--sans,inherit);cursor:pointer}
.csat-input #csat-form .mq-seg-btn input:checked+span{border-color:rgba(232,201,119,.85);background:rgba(232,201,119,.16);color:#fbf2e0}
.csat-input #csat-form .mq-choice{display:grid;gap:10px}
.csat-input #csat-form .mq-opt{position:relative;display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;min-height:0;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:700 17px/1.5 var(--sans,inherit);cursor:pointer}
.csat-input #csat-form .mq-opt input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0}
.csat-input #csat-form .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}
.csat-input #csat-form .mq-opt.is-on,.csat-input #csat-form .mq-opt:has(input:checked){border-color:rgba(232,201,119,.85);background:rgba(232,201,119,.14);color:#fbf2e0}
.csat-input #csat-form .mq-opt.is-on i,.csat-input #csat-form .mq-opt:has(input:checked) i{border-color:#e8c977;background:#e8c977;box-shadow:inset 0 0 0 3px rgba(12,11,17,.85)}
.csat-input #csat-form .mq-opt:focus-within{outline:2px solid rgba(232,201,119,.6);outline-offset:1px}
.csat-input #csat-form .mq-unknown{margin-top:12px;padding:13px 16px;font-size:15px}
.csat-input #csat-form .mq-note{margin:10px 2px 0;font:13px/1.55 var(--sans,inherit);color:rgba(240,230,210,.55);word-break:keep-all}
.csat-input #csat-form .mq-order{display:flex;justify-content:space-between;gap:10px;margin:14px 0 0;padding:12px 14px;border:1px solid rgba(232,201,119,.22);border-radius:10px;background:rgba(12,11,17,.6);font:13px/1.6 var(--sans,inherit);color:rgba(240,230,210,.7)}
.csat-input #csat-form .mq-order span,.csat-input #csat-form .mq-order b{font:13.5px/1.6 var(--sans,inherit);letter-spacing:0}
.csat-input #csat-form .mq-order span{color:rgba(240,230,210,.7)}
.csat-input #csat-form .mq-order b{font-weight:800;color:#e8c977;white-space:nowrap}
.csat-input #csat-form .mq-foot{padding-top:18px}
.csat-input #csat-form #input-status{margin:0 2px 8px;min-height:18px;font:13.5px/1.6 var(--sans,inherit);color:#f0b7a8;word-break:keep-all}
.csat-input #csat-form .mq-next{display:block;width:100%;min-height:0;margin:0;padding:17px 0;border:0;border-radius:999px;background:#f4efe4;color:#14121a;font:800 17px/1.4 var(--sans,inherit);text-align:center;cursor:pointer}
.csat-input #csat-form .mq-next span{font-size:17px;font-weight:800}
.csat-input #csat-form .mq-next:disabled{opacity:.55;cursor:default}
.csat-input #csat-form .mq-privacy{margin:12px 2px 0;text-align:center;font:12px/1.6 var(--sans,inherit);color:rgba(240,230,210,.45)}
@media (prefers-reduced-motion:reduce){.csat-input #csat-form .mq-step{animation:none}}