/* ============================================================
   사진 견적 신청서 — 뼈대와 동작에 필요한 것만.
   색·모서리·그림자는 각 페이지가 --q-* 변수로 정합니다.
   ============================================================ */
.q{
  --q-fg:#17181a; --q-sub:#6d6f74; --q-bg:#fff; --q-line:#e3e1dd;
  --q-accent:#1f1f1f; --q-accent-fg:#fff; --q-chip:#f4f2ef; --q-in:#fbfaf8;
  --q-r:14px; --q-shadow:0 1px 2px rgba(0,0,0,.05);
  color:var(--q-fg); position:relative;
}
.q *{box-sizing:border-box}

.q-top{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.q-bar{flex:1;height:4px;border-radius:99px;background:var(--q-chip);overflow:hidden}
.q-bar span{display:block;height:100%;width:33%;border-radius:99px;background:var(--q-accent);transition:width .35s cubic-bezier(.2,.7,.3,1)}
.q-tag{font-size:12px;letter-spacing:.02em;color:var(--q-sub);white-space:nowrap;font-variant-numeric:tabular-nums}

.q-step{display:none;animation:qin .3s ease both}
.q-step.on{display:block}
@keyframes qin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.q-step,.q-bar span{animation:none;transition:none}}

.q-h{margin:0 0 6px;font-size:clamp(20px,4.4vw,25px);line-height:1.35;letter-spacing:-.02em;font-weight:700}
.q-sub{margin:0 0 18px;font-size:14.5px;line-height:1.65;color:var(--q-sub)}
.q-sub b{color:var(--q-fg);font-weight:600}
.q-note{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--q-sub)}
.q-note b{color:var(--q-fg)}

/* 사진 */
.q-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.q-shots:not(:empty){margin-bottom:12px}
.q-shot{position:relative;aspect-ratio:1;border-radius:calc(var(--q-r) - 4px);background:var(--q-chip) center/cover no-repeat;border:1px solid var(--q-line)}
.q-load{display:grid;place-items:center}
.q-spin{width:18px;height:18px;border:2px solid var(--q-line);border-top-color:var(--q-accent);border-radius:50%;animation:qspin .7s linear infinite;display:block}
@keyframes qspin{to{transform:rotate(360deg)}}
.q-x{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;border:0;
  background:var(--q-accent);color:var(--q-accent-fg);font-size:16px;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}

.q-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.q-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:60px;padding:0 10px;
  border:1px dashed var(--q-line);border-radius:var(--q-r);background:var(--q-in);color:var(--q-fg);
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.q-btn:hover{border-color:var(--q-accent);background:var(--q-chip)}
.q-btn:active{transform:scale(.985)}
.q-btn svg{flex:none;opacity:.75}
.q-cam{border-style:solid;border-color:var(--q-accent);background:var(--q-chip)}

/* 칩 */
.q-field{margin-bottom:18px}
.q-label{display:block;font-size:13px;font-weight:600;margin-bottom:9px;letter-spacing:.01em}
.q-label em{color:#c0392b;font-style:normal}
.q-chips{display:flex;flex-wrap:wrap;gap:7px}
.q-chip{padding:11px 15px;border-radius:99px;border:1px solid var(--q-line);background:var(--q-bg);
  color:var(--q-fg);font:inherit;font-size:14px;cursor:pointer;transition:.15s}
.q-chip:hover{border-color:var(--q-accent)}
.q-chip.on{background:var(--q-accent);color:var(--q-accent-fg);border-color:var(--q-accent);font-weight:600}

.q-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.6;
  color:var(--q-sub);cursor:pointer;margin:4px 0 18px}
.q-check input{flex:none;width:19px;height:19px;margin:1px 0 0;accent-color:var(--q-accent)}
.q-check b{color:var(--q-fg);font-weight:600}

/* 입력 */
.q-in{width:100%;padding:14px 15px;border:1px solid var(--q-line);border-radius:var(--q-r);
  background:var(--q-in);color:var(--q-fg);font:inherit;font-size:16px;transition:border-color .15s,box-shadow .15s}
.q-in::placeholder{color:color-mix(in srgb,var(--q-sub) 70%,transparent)}
.q-in:focus{outline:0;border-color:var(--q-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--q-accent) 15%,transparent)}
.q-memo{resize:vertical;min-height:84px;line-height:1.6}

/* 예상 금액 */
.q-est{border:1px solid var(--q-line);border-radius:var(--q-r);background:var(--q-in);
  padding:16px 18px;display:flex;flex-direction:column;gap:3px}
.q-est-l{font-size:12px;letter-spacing:.06em;color:var(--q-sub)}
.q-est b{font-size:clamp(21px,5vw,26px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.q-est-s{font-size:12.5px;line-height:1.55;color:var(--q-sub)}

/* 버튼 */
.q-foot{display:flex;gap:10px;align-items:center;margin-top:24px}
.q-ghost{padding:14px 18px;border:1px solid var(--q-line);border-radius:var(--q-r);background:transparent;
  color:var(--q-sub);font:inherit;font-size:15px;cursor:pointer}
.q-ghost:hover{color:var(--q-fg);border-color:var(--q-accent)}
.q-go{flex:1;min-height:56px;padding:0 20px;border:0;border-radius:var(--q-r);
  background:var(--q-accent);color:var(--q-accent-fg);font:inherit;font-size:16.5px;font-weight:700;
  letter-spacing:-.01em;cursor:pointer;transition:transform .1s,filter .15s;box-shadow:var(--q-shadow)}
.q-go:hover{filter:brightness(1.08)}
.q-go:active{transform:scale(.99)}
.q-go[disabled]{opacity:.55;cursor:default}
.q-err{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:#c0392b;min-height:1px}
.q-err a{color:inherit;font-weight:700}

/* 완료 */
.q-done{text-align:center;padding:14px 0 6px}
.q-tick{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:var(--q-accent);color:var(--q-accent-fg);font-size:26px;animation:qpop .4s cubic-bezier(.2,1.3,.4,1) both}
@keyframes qpop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.q-done .q-sub{margin-bottom:22px}
.q-call{display:flex;align-items:center;justify-content:center;text-decoration:none;max-width:320px;margin:0 auto}

@media (max-width:420px){
  .q-pick{grid-template-columns:1fr}
  .q-btn{min-height:54px}
}