/* 문의하기 — 피그마 시안이 없어 서브페이지(온누리 소개·주문안내) 톤에 맞춘다 */
.contact-page { padding: 160px 0; background-color: var(--color-bg-1); }
.contact-inner { max-width: 880px; margin-inline: auto; padding: 0 var(--size-wrap-padding); }

.contact-header { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 60px; text-align: center; }
.contact-eyebrow { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.4; letter-spacing: 0.84px; color: var(--color-sub-1); }
.contact-title { margin: 0; font-family: var(--font-serif); font-size: 48px; font-weight: 700; line-height: 1.4; color: var(--color-primary); }
.contact-subtitle { margin: 0; font-size: 20px; line-height: 1.6; color: var(--color-sub-3); word-break: keep-all; }

.contact-alert { margin-bottom: 24px; padding: 16px 20px; border-radius: 10px; font-size: 16px; line-height: 1.5; }
.contact-alert-success { border: 1px solid rgba(48, 35, 27, 0.2); background-color: var(--color-sub-4); color: var(--color-primary); }
.contact-alert-error { border: 1px solid rgba(229, 74, 1, 0.4); background-color: #fdeee6; color: var(--color-sub-1); }

.contact-form { display: flex; flex-direction: column; gap: 32px; padding: 60px; border-radius: 20px; background-color: var(--color-neutral-1); box-shadow: 0 20px 40px rgba(48, 35, 27, 0.06); }
.contact-field { display: flex; flex-direction: column; gap: 10px; }
.contact-label { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--color-primary); }
.contact-required { margin-left: 2px; font-weight: 600; color: var(--color-sub-1); }

.contact-input,
.contact-textarea { display: block; width: 100%; border: 1px solid rgba(48, 35, 27, 0.2); border-radius: 10px; background-color: var(--color-neutral-1); font: inherit; font-size: 16px; color: var(--color-primary); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.contact-input { height: 56px; padding: 0 18px; }
.contact-textarea { min-height: 200px; padding: 16px 18px; line-height: 1.6; resize: vertical; }
.contact-input::placeholder,
.contact-textarea::placeholder { color: rgba(122, 106, 97, 0.7); }
.contact-input:focus,
.contact-textarea:focus { outline: none; border-color: var(--color-sub-1); box-shadow: 0 0 0 3px rgba(229, 74, 1, 0.12); }
.contact-input[readonly] { background-color: var(--color-bg-1); }

.contact-phone-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; }
.contact-phone-sep { color: var(--color-sub-3); text-align: center; }

.contact-address { display: flex; flex-direction: column; gap: 10px; }
.contact-address-zip-row { display: flex; gap: 10px; align-items: center; }
.contact-input-zip { max-width: 200px; }

.contact-btn-primary,
.contact-btn-secondary { display: inline-flex; align-items: center; justify-content: center; border-radius: 99px; font-family: var(--font-serif); font-weight: 700; line-height: 1.4; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; }
.contact-btn-primary { width: 100%; height: 60px; padding: 0 40px; border: 0; background-color: var(--color-primary); font-size: 20px; color: var(--color-neutral-1); }
.contact-btn-primary:hover { opacity: 0.92; }
.contact-btn-secondary { flex-shrink: 0; height: 56px; padding: 0 24px; border: 1px solid var(--color-primary); background-color: transparent; font-size: 16px; color: var(--color-primary); }
.contact-btn-secondary:hover { background-color: var(--color-primary); color: var(--color-neutral-1); }

.contact-notice { margin: 0; padding: 16px 20px; border-radius: 10px; background-color: var(--color-bg-1); font-size: 14px; line-height: 1.6; color: var(--color-sub-3); }
.contact-actions { margin-top: 8px; }

.contact-field-error { margin: 0; font-size: 14px; color: var(--color-sub-1); }
.contact-field.has-error .contact-input,
.contact-field.has-error .contact-textarea { border-color: var(--color-sub-1); }

@media all and (max-width:1023px) {
  .contact-page { padding: 100px 0; }
  .contact-header { margin-bottom: 48px; }
  .contact-eyebrow { font-size: 22px; }
  .contact-title { font-size: 36px; }
  .contact-subtitle { font-size: 18px; }
  .contact-form { padding: 48px 40px; }
}

@media all and (max-width:767px) {
  .contact-page { padding: 60px 0; }
  .contact-header { gap: 4px; margin-bottom: 32px; }
  .contact-eyebrow { font-size: 16px; letter-spacing: 0.48px; }
  .contact-title { font-size: 24px; }
  .contact-subtitle { margin-top: 8px; font-size: 15px; }
  .contact-form { gap: 24px; padding: 28px 20px; border-radius: 10px; }
  .contact-label { font-size: 16px; }
  .contact-input { height: 48px; padding: 0 14px; font-size: 15px; }
  .contact-textarea { min-height: 160px; padding: 12px 14px; font-size: 15px; }
  .contact-phone-row { gap: 6px; }
  .contact-input-zip { max-width: none; flex: 1 1 0; min-width: 0; }
  .contact-btn-secondary { height: 48px; padding: 0 18px; font-size: 15px; }
  .contact-btn-primary { height: 52px; font-size: 17px; }
  .contact-notice { padding: 12px 14px; font-size: 13px; }
}

/* 스팸 허니팟 — 사람에게 보이지 않게 화면 밖으로 보낸다.
   display:none 을 쓰지 않는 이유는 숨겨진 필드를 무시하는 봇에게도
   걸리게 하기 위해서다. 스크린 리더는 aria-hidden 으로 건너뛴다. */
.contact-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* 문의 제출 중 전체화면 마스크. 구글 시트 웹훅 등 알림이 응답을 붙잡는 동안 사용. */
html.inquiry-loading-lock,
html.inquiry-loading-lock body {
    overflow: hidden;
}

.inquiry-loading {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: rgba(48, 35, 27, 0.5);
    pointer-events: auto;
}

.inquiry-loading[hidden] {
    display: none;
}

.inquiry-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: inquiry-spin 0.7s linear infinite;
}

.inquiry-loading-text {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

@keyframes inquiry-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .inquiry-loading-spinner {
        animation: none;
        border-top-color: rgba(255, 255, 255, 0.35);
        border-right-color: #ffffff;
    }
}

/* 노트북(1024~1599px): 1920 기준 디자인이라 글자가 커 보여 한 단계 줄인다 */
@media all and (min-width:1024px) and (max-width:1599px) {
  .contact-eyebrow { font-size: 22px; }
  .contact-title { font-size: 38px; }
  .contact-subtitle { font-size: 17px; }
  .contact-btn-primary { height: 52px; font-size: 18px; }
}