/* base.css 위에 얹는, 백엔드 연동으로 새로 생긴 요소들 */

/* ------------------------------------------------------- 자동 저장 표시 */
.savestate{font-family:var(--font);font-size:.76rem;color:var(--muted);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;transition:color .2s ease}
.savestate:empty{display:none}
.savestate::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.term-lines{white-space:pre-line;line-height:1.85}
.qfoot{margin-top:12px;color:var(--muted);font-size:.84rem;line-height:1.65}
.g-eval-guide{margin-top:14px;padding:14px 16px;border:1px solid var(--rule-2);
  border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);
  font-size:.9rem;font-weight:450;line-height:1.75;white-space:pre-line}
.savestate.busy{color:var(--warn)}
.savestate.busy::before{animation:pulse 1s ease-in-out infinite}
.savestate.ok{color:var(--ok)}
.savestate.err{color:var(--req);font-weight:600}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* --------------------------------------------- 조건부로 열리는 주관식 칸 */
.field.cond{margin-top:4px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  animation:slidein .22s cubic-bezier(.4,0,.2,1)}
.field.cond label{color:var(--accent-ink);font-weight:600}
.field.cond input{background:var(--surface)}
@keyframes slidein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ 제출 검증 */
.qerr{background:var(--req-soft);border:1px solid color-mix(in srgb,var(--req) 28%,transparent);
  border-radius:var(--r-md);color:var(--req);padding:10px 14px;font-size:.85rem;font-weight:500}
.q.haserr{border-color:var(--req);box-shadow:0 0 0 3px color-mix(in srgb,var(--req) 12%,transparent)}
.q.flash{animation:flash 1.6s ease}
@keyframes flash{0%{box-shadow:0 0 0 4px color-mix(in srgb,var(--req) 22%,transparent)}100%{box-shadow:var(--sh-1)}}
.warnbox a,.qerr a{color:var(--accent);font-family:var(--font);font-weight:600;
  text-decoration:none;border-bottom:1px solid var(--rule-2)}
.warnbox a:hover,.qerr a:hover{border-bottom-color:var(--accent)}

/* 최대 선택 초과 안내 */
.qhint.over{color:var(--req);font-weight:600}

/* 선택 응답·필수 표시 */
.tag.opt{background:var(--surface-2);color:var(--muted)}
.req-mark{color:var(--req);font-size:.7rem;margin-left:5px;font-weight:600}

/* -------------------------------------------------------------- 동의 */
.terms{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.terms li::marker{color:var(--accent)}
.declinebox{background:var(--req-soft);border:1px solid color-mix(in srgb,var(--req) 26%,transparent);
  border-radius:var(--r-md);padding:16px 18px;font-size:.88rem;color:var(--ink);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;line-height:1.8;
  animation:slidein .22s cubic-bezier(.4,0,.2,1)}
.declinebox .btn{margin-left:auto;border-color:var(--req);color:var(--req)}
.declinebox .btn:hover{background:var(--req);color:#fff;border-color:var(--req)}

/* ------------------------------------------------- 38대 기후기술 선택 */
.opts.t38grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:6px}
.opts.t38grid label.opt{font-size:.88rem;padding:9px 12px}