/* 문의하기 — 시안(docs/design/2026-10-23-dark-editorial/site.html) 의 문의 전용 규칙 (.inq, .form, .fld, .chips, .count, .agree, .sent, .form-err).
   공통 규칙(첫 화면·.cta·.pill)은 base.css. 폼 동작은 public/assets/js/pages/inquiry.js — 그 스크립트가 쓰는 inquiry-form__* 클래스도 여기서 꾸민다.
   시안은 폼이 바로 그리드 칸이지만, 실제 사이트는 완료 상자(#sent)와 폼을 .inq__main 하나로 묶어 그 칸에 둔다. */

.inq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.inq__side { grid-column: 1 / span 4; position: sticky; top: 96px; align-self: start; }
.inq__side h2 { margin: 0 0 16px; font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -0.05em; line-height: 1.2; }
.inq__side p { color: var(--sub); margin: 0 0 32px; }
.inq__side dl { margin: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px 16px; font-size: 14px; }
.inq__side dt { color: var(--sub); }
.inq__side dd { margin: 0; }
.inq__side dd a { text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.inq__side dd a:hover { text-decoration-color: currentColor; }
.inq__main { grid-column: 6 / span 7; min-width: 0; }

.form { display: grid; gap: 40px; }
.form[hidden] { display: none; }
.form .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.fld { display: grid; gap: 10px; min-width: 0; }
.fld > label, .fld > legend { font-size: 13.5px; color: var(--sub); padding: 0; }
.fld > legend { margin-bottom: 10px; }
.fld input[type="text"], .fld input[type="tel"], .fld input[type="email"], .fld select, .fld textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line2); color: var(--ink); font: inherit; font-size: 18px; padding: 10px 0 12px; border-radius: 0; }
.fld textarea { min-height: 160px; resize: vertical; line-height: 1.7; }
.fld select option { background: var(--bg2); }
.fld ::placeholder { color: var(--sub); opacity: .7; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--blue); }
/* 브라우저 기본 검사(required·pattern)에 걸린 칸: 사용자가 건드린 뒤에만 붉게 */
.fld input:user-invalid, .fld textarea:user-invalid { border-bottom-color: #ff8f8f; }
fieldset.fld { border: 0; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
/* 체크 칸은 알약 전체를 덮는 투명한 칸 (눌러도, 키보드로도 그대로 체크된다) */
.chips input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chips span { display: inline-block; border: 1px solid var(--line2); border-radius: 99px; padding: 9px 18px; font-size: 14.5px; transition: background .2s, border-color .2s; }
.chips label:hover span { border-color: var(--ink); }
.chips input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.count { justify-self: end; color: var(--sub); font-size: 12.5px; margin: 0; }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.agree input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--blue); }
.form details { color: var(--sub); font-size: 13.5px; margin-top: 6px; }
.form details summary { cursor: pointer; color: var(--ink); width: fit-content; }
.form details dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 16px; margin: 14px 0 0; }
.form details dd { margin: 0; }
.form details p { margin: 12px 0 0; }

/* 오류 상자 (#send-error) — 처음엔 hidden. 스크립트 없이 ?error=…#send-error 로 돌아오면 :target 으로 보인다 */
.form-err { color: #ff8f8f; font-size: 13.5px; min-height: 1.2em; margin: 0; }
.inquiry-form__alert { border-left: 2px solid #ff8f8f; padding: 4px 0 4px 16px; }
.inquiry-form__alert:target { display: block; }
.inquiry-form__alert:focus { outline: none; }
.inquiry-form__alert-text { margin: 0; line-height: 1.7; }
.inquiry-form__alert a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 보내기 */
.inquiry-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.form .submit { justify-self: start; border: 0; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; }
.form .submit:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.form .submit[disabled] { opacity: .65; cursor: progress; }
.inquiry-form__spinner { display: none; width: 18px; height: 18px; border: 2px solid var(--line2); border-top-color: currentColor; border-radius: 50%; animation: inquiry-spin .8s linear infinite; }
.inquiry-form.is-sending .submit i { display: none; }
.inquiry-form.is-sending .inquiry-form__spinner { display: inline-block; }
@keyframes inquiry-spin { to { transform: rotate(360deg); } }
.inquiry-form__status { margin: 0; color: var(--sub); font-size: 13.5px; }
.inquiry-form__status:empty { display: none; }

/* 허니팟 칸 (사람에게는 보이지 않는다) */
.inquiry-form__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* 접수 완료 (#sent) — 처음엔 hidden. 스크립트 없이 ?sent=1#sent 로 돌아오면 :target 으로 보이고 폼은 숨는다 */
.sent { border: 1px solid var(--line2); border-radius: 6px; padding: 28px; }
.sent h3 { margin: 0 0 8px; font-size: 24px; letter-spacing: -0.04em; }
.sent p { margin: 0; color: var(--sub); }
.sent .pill { margin-top: 24px; }
.inquiry-done:target { display: block; }
.inquiry-done:target + .inquiry-form { display: none; }
.inquiry-done:focus { outline: none; }

@media (max-width: 960px) {
  .inq__side, .inq__main { grid-column: 1 / -1; position: static; }
  .form .row2 { grid-template-columns: minmax(0, 1fr); }
  .form details dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .form details dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .inquiry-form__spinner { animation-duration: 2s; }
}
/* 완료·오류 상자로 초점이 가거나 #sent·#send-error 로 열릴 때 고정 머리에 가리지 않게 */
.inquiry-done, .inquiry-form__alert { scroll-margin-top: 96px; }

/* 동의 내용 안의 개인정보처리방침 링크 */
.form details a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }