/*
 * 견적문의 (#nt-contact) — 2026-10 리뉴얼, /견적문의/ 본문을 단가표 리뉴얼(nt-price.css)과 같은 디자인으로 교체
 * 마크업: resources/views/pages/partials/contact-page.blade.php (Contact Form 7 5.1.7 폼 마크업 그대로)
 * 모든 선택자는 #nt-contact 로 시작한다 (Avada 의 #main h2, .post-content p, body a, .wpcf7-form input 등보다 우선).
 * 일반 콘텐츠 폭(PC 1170px) 안에 놓는다 (full-bleed 아님).
 * 구성: 머리말(연락 칩) → 본문 2단 [폼 카드 | 안내 카드 3개] (태블릿·모바일은 폼 → 안내 순서의 1단)
 * 폼 요소는 Avada 폼 스타일(입력칸 높이 60px·13px 글씨·각진 테두리, 둥근 25px 대문자 버튼, 분홍/파랑 응답 상자, 스피너)을
 * 속성마다 명시해 덮어쓴다. 응답 상자 색은 CF7 이 붙이는 wpcf7-mail-sent-ok / wpcf7-validation-errors / wpcf7-mail-sent-ng 로 정한다
 * (Avada avada-contact-form-7.js 가 덧붙이는 fusion-alert error / success 클래스는 다시 보내도 지워지지 않으므로 쓰지 않는다).
 * 중단점: PC 1024px 이상 · 태블릿 768~1023px · 모바일 767px 이하.
 */

#nt-contact {
    --nc-navy: #0B2540;
    --nc-blue: #1E79B4;
    --nc-blue-dark: #155E8E;
    --nc-blue-deep: #17669A;
    --nc-teal-dark: #1C7C6E;
    --nc-teal-text: #176B5F;
    --nc-ink: #22313F;
    --nc-body: #4B5B6B;
    --nc-muted: #5F6E7D;
    --nc-line: #E2E8EF;
    --nc-line-soft: #EDF1F5;
    --nc-surface: #F4F7FA;
    --nc-tint-blue: #EAF3FA;
    --nc-tint-teal: #E9F5F2;
    --nc-tint-navy: #E9EEF4;
    /* 폼 전용: 입력칸 테두리(흰 바탕 대비 3:1) · 안내 글자(4.5:1) · 오류 빨강(글자 6.6:1, 테두리 4.8:1) */
    --nc-field-line: #8696A7;
    --nc-check-line: #7D8B99;
    --nc-placeholder: #6B7886;
    --nc-error: #B42318;
    --nc-error-line: #D92D20;
    --nc-error-soft: #FEF3F2;
    --nc-error-border: #F5B5AE;
    --nc-success-border: #A8D8CB;
    --nc-shadow-sm: 0 1px 2px rgba(11, 37, 64, 0.05);
    --nc-shadow: 0 0 0 1px rgba(11, 37, 64, 0.08), 0 14px 32px -16px rgba(11, 37, 64, 0.22);

    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 0;
    padding: 0 0 8px;
    color: var(--nc-body);
    text-wrap: pretty;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

#nt-contact,
#nt-contact *,
#nt-contact *::before,
#nt-contact *::after {
    box-sizing: border-box;
}

/* Avada 기본값 초기화: .post-content p {margin:0 0 20px}, h3·h4 {margin:1em 0}, .post-content h4 {color:#fff}, li {list-style:none} 등 */
#nt-contact p,
#nt-contact h2,
#nt-contact h3,
#nt-contact h4,
#nt-contact ul,
#nt-contact ol,
#nt-contact li,
#nt-contact dl,
#nt-contact dt,
#nt-contact dd,
#nt-contact form {
    margin: 0;
    padding: 0;
}

#nt-contact ul,
#nt-contact ol,
#nt-contact li {
    list-style: none;
}

#nt-contact h2,
#nt-contact h3,
#nt-contact h4 {
    font-family: inherit;
    font-style: normal;
    text-transform: none;
    color: var(--nc-navy);
}

#nt-contact strong {
    font-weight: 700;
}

#nt-contact svg {
    display: block;
    flex-shrink: 0;
}

#nt-contact .nt-contact__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * 제목(h2·h3·h4)의 font-size·line-height 만 !important:
 * Avada 의 fusion-responsive-typography.js 가 모든 제목에 인라인 line-height 를 넣고,
 * 1000px 이하에서는 .fusion-responsive-typography-calculated 로 font-size 를 다시 계산한다.
 * #wrapper .post-content h2 {font-size:38px} 도 #nt-contact .클래스 보다 우선순위가 높다.
 */

/* ---- 머리말 ------------------------------------------------------------ */
#nt-contact .nt-contact__hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 64px 40px 40px;
    border: 1px solid #E3ECF4;
    border-radius: 32px;
    background:
        radial-gradient(760px 260px at 50% -12%, rgba(30, 121, 180, 0.16), rgba(30, 121, 180, 0) 70%),
        radial-gradient(420px 200px at 92% 112%, rgba(114, 191, 172, 0.22), rgba(114, 191, 172, 0) 70%),
        linear-gradient(180deg, #F4F9FD 0%, #FFFFFF 100%);
    text-align: center;
}

#nt-contact .nt-contact__eyebrow {
    padding: 6px 14px;
    border: 1px solid #D5E3EF;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--nc-blue-deep);
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.16em;
}

#nt-contact .nt-contact__title {
    font-size: 44px !important;
    font-weight: 800;
    line-height: 1.25 !important;
    letter-spacing: -0.035em;
}

#nt-contact .nt-contact__lead {
    max-width: 720px;
    color: var(--nc-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.005em;
    text-wrap: balance;
}

/* 연락 칩: 전화·이메일은 링크(44px 터치 높이), 영업시간은 정보만 */
#nt-contact .nt-contact__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 8px;
}

#nt-contact .nt-contact__chips li {
    max-width: 100%;
}

#nt-contact .nt-contact__chip,
#nt-contact .nt-contact__chip:focus,
#nt-contact .nt-contact__chip:visited {
    color: #2E3B48;
}

#nt-contact .nt-contact__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 44px;
    padding: 6px 18px;
    border: 1px solid #D5DEE7;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

#nt-contact .nt-contact__chip > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

#nt-contact .nt-contact__chip svg {
    color: var(--nc-blue-deep);
}

#nt-contact a.nt-contact__chip:hover {
    border-color: var(--nc-blue);
    background: #FFFFFF;
    color: var(--nc-blue-dark);
}

/* 영업시간 칩은 링크가 아니다: 단가표 '기준일' 칩(.nt-price__date)처럼 옅은 테두리·흰 바탕·회색 글씨 (높이는 링크 칩과 같다) */
#nt-contact .nt-contact__chip--static {
    border-color: var(--nc-line);
    background: #FFFFFF;
    color: #3E4C5A;
    cursor: default;
}

/* ---- 본문 2단: 폼 카드 약 2/3 · 안내 카드 약 1/3 ------------------------ */
#nt-contact .nt-contact__body {
    display: grid;
    /* 안내 칸은 340px 밑으로 줄이지 않는다: 1024~1089px 에서 대표전화 번호가 남색 상자 밖으로 잘렸다 */
    grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
    align-items: start;
    gap: 28px;
}

/* ---- 폼 카드 = 색 머리 띠(제목·필수 안내) + 흰 본문 ---------------------- */
#nt-contact .nt-contact__form-card {
    min-width: 0;
    overflow: hidden;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: var(--nc-shadow);
}

/* 흰 글씨 / 띠의 가장 밝은 끝(#1E79B4) 대비 4.7:1 */
#nt-contact .nt-contact__form-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 24px 32px 22px;
    background: linear-gradient(135deg, #12507A 0%, #1E79B4 100%);
}

#nt-contact .nt-contact__form-title {
    color: #FFFFFF;
    font-size: 22px !important;
    font-weight: 800;
    line-height: 1.35 !important;
    letter-spacing: -0.02em;
}

#nt-contact .nt-contact__form-note {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

#nt-contact .nt-contact__form-body {
    padding: 32px 32px 36px;
}

/* 자바스크립트를 끈 방문자 안내(<noscript>, 폼 위): 폼은 scripts.js 가 보내므로 전화·메일로 안내한다. 응답 상자와 같은 계열의 옅은 안내 상자 */
#nt-contact .nt-contact__noscript {
    margin: 0 0 24px;
    padding: 14px 18px;
    border: 1px solid var(--nc-line);
    border-radius: 12px;
    background: var(--nc-surface);
    color: var(--nc-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

#nt-contact .nt-contact__noscript a,
#nt-contact .nt-contact__noscript a:focus,
#nt-contact .nt-contact__noscript a:visited {
    color: var(--nc-blue-dark);
}

#nt-contact .nt-contact__noscript a {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

#nt-contact .nt-contact__noscript a:hover {
    color: var(--nc-navy);
}

/* 전화번호는 하이픈에서 끊지 않는다 (360px 에서 '02-' / '6461-0352' 로 갈라졌다) */
#nt-contact .nt-contact__noscript a[href^="tel:"] {
    white-space: nowrap;
}

#nt-contact .wpcf7,
#nt-contact .wpcf7-form {
    margin: 0;
    padding: 0;
}

/* 필드: PC·태블릿 2열 (이메일·내용은 한 줄 전체) */
#nt-contact .nt-contact__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 20px;
}

#nt-contact .nt-contact__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#nt-contact .nt-contact__field--wide {
    grid-column: 1 / -1;
}

#nt-contact .nt-contact__label {
    display: block;
    margin: 0;
    color: var(--nc-ink);
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

#nt-contact .nt-contact__req {
    margin-left: 3px;
    color: var(--nc-blue-dark);
    font-weight: 800;
}

#nt-contact .wpcf7-form-control-wrap {
    position: relative;
    display: block;
    min-width: 0;
}

/* 입력칸: Avada .wpcf7-form .wpcf7-text {height:60px; font-size:13px; border-radius:0 ...} 와 input[type=text] 기본값을 모두 덮는다 */
#nt-contact .wpcf7-form .wpcf7-text,
#nt-contact .wpcf7-form .wpcf7-textarea {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    height: 52px;
    min-height: 0;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--nc-field-line);
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: none;
    color: var(--nc-ink);
    font-family: inherit;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: left;
    text-indent: 0;
    text-transform: none;
    vertical-align: top;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* 내용: rows 8 로 높이를 정하고 세로로만 늘린다 (Avada .wpcf7-form textarea {height:150px} 덮기) */
#nt-contact .wpcf7-form .wpcf7-textarea {
    height: auto;
    min-height: 160px;
    padding: 14px 16px;
    line-height: 1.6;
    resize: vertical;
}

#nt-contact .wpcf7-form .wpcf7-form-control::placeholder {
    color: var(--nc-placeholder);
    font-weight: 400;
    opacity: 1;
}

#nt-contact .wpcf7-form .wpcf7-text:hover,
#nt-contact .wpcf7-form .wpcf7-textarea:hover {
    border-color: var(--nc-muted);
}

/* 포커스: 3px 파랑 외곽선 (body.fusion-disable-outline 의 outline:0 덮기) */
#nt-contact .wpcf7-form .wpcf7-text:focus,
#nt-contact .wpcf7-form .wpcf7-textarea:focus {
    border-color: var(--nc-blue);
    outline: 3px solid var(--nc-blue);
    outline-offset: 2px;
}

/* 오류 필드(.wpcf7-not-valid) 와 필드 아래 오류 안내(.wpcf7-not-valid-tip, CF7 JS 가 span.wpcf7-form-control-wrap 안에 넣는다) */
#nt-contact .wpcf7-form .wpcf7-not-valid,
#nt-contact .wpcf7-form .wpcf7-not-valid:hover {
    border-color: var(--nc-error-line);
    box-shadow: inset 0 0 0 1px var(--nc-error-line);
}

#nt-contact .wpcf7-not-valid-tip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--nc-error);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

#nt-contact .wpcf7-not-valid-tip::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* ---- 개인정보 동의: 원문 접기(details) + 동의 체크 ------------------------ */
#nt-contact .nt-contact__consent {
    margin-top: 28px;
    border: 1px solid var(--nc-line);
    border-radius: 16px;
    background: var(--nc-surface);
}

#nt-contact .nt-contact__policy summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 18px;
    border-radius: 15px 15px 0 0;
    color: var(--nc-ink);
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    list-style: none;
}

#nt-contact .nt-contact__policy summary::-webkit-details-marker {
    display: none;
}

#nt-contact .nt-contact__policy summary:hover {
    color: var(--nc-blue-dark);
}

#nt-contact .nt-contact__policy-icon {
    color: var(--nc-teal-dark);
}

#nt-contact .nt-contact__policy-summary {
    flex: 1 1 auto;
    min-width: 0;
}

#nt-contact .nt-contact__policy-chevron {
    color: var(--nc-muted);
}

#nt-contact .nt-contact__policy[open] .nt-contact__policy-chevron {
    transform: rotate(180deg);
}

/* 원문 상자: 최대 220px, 안에서 스크롤 (키보드로도 스크롤하도록 tabindex="0") */
#nt-contact .nt-contact__policy-body {
    max-height: 220px;
    margin: 0 18px 16px;
    padding: 16px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--nc-line);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--nc-body);
    font-size: 13.5px;
    line-height: 1.7;
}

#nt-contact .nt-contact__policy-body > * + * {
    margin-top: 10px;
}

#nt-contact .nt-contact__policy-title {
    color: var(--nc-ink);
    font-weight: 700;
}

#nt-contact .nt-contact__policy-body .nt-contact__policy-heading {
    margin-top: 18px;
    color: var(--nc-ink);
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.5 !important;
    letter-spacing: 0;
}

#nt-contact .nt-contact__policy-body .nt-contact__policy-heading + * {
    margin-top: 6px;
}

#nt-contact .nt-contact__policy-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#nt-contact .nt-contact__policy-list li {
    position: relative;
    padding-left: 14px;
}

#nt-contact .nt-contact__policy-list li::before {
    content: "";
    position: absolute;
    top: 0.75em;
    left: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #94A2B0;
}

/* 보호책임자 줄은 원문처럼 '–' 머리표 */
#nt-contact .nt-contact__policy-list--officer {
    gap: 0;
}

#nt-contact .nt-contact__policy-list--officer li::before {
    content: "–";
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: var(--nc-muted);
}

#nt-contact .nt-contact__policy-list strong {
    color: var(--nc-ink);
}

/*
 * 동의 줄: [체크박스 | 문구] 2칸 격자. CF7 JS 가 오류 안내를 span.wpcf7-form-control-wrap.agree 안(체크박스 뒤)에 넣으므로
 * 그 span 을 display: contents 로 풀어, 안내가 문구 아래 줄(2열 2행)에 오게 한다.
 */
#nt-contact .nt-contact__agree {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 6px 12px;
    padding: 14px 18px 16px;
    border-top: 1px solid var(--nc-line);
}

#nt-contact .nt-contact__agree .wpcf7-form-control-wrap {
    display: contents;
}

#nt-contact .nt-contact__agree input[type="checkbox"] {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    padding: 0;
    border: 2px solid var(--nc-check-line);
    border-radius: 6px;
    background: #FFFFFF center / 14px 14px no-repeat;
    box-shadow: none;
    cursor: pointer;
    vertical-align: top;
    -webkit-appearance: none;
    appearance: none;
}

#nt-contact .nt-contact__agree input[type="checkbox"]:hover {
    border-color: var(--nc-blue-dark);
}

#nt-contact .nt-contact__agree input[type="checkbox"]:checked {
    border-color: var(--nc-navy);
    background-color: var(--nc-navy);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* 동의하지 않고 보내면 CF7 JS 가 aria-invalid 를 "true" 로 바꾼다 → 체크박스 테두리도 빨갛게 (체크박스에는 wpcf7-form-control 클래스가 없다) */
#nt-contact .nt-contact__agree input[type="checkbox"][aria-invalid="true"]:not(:checked) {
    border-color: var(--nc-error-line);
}

#nt-contact .nt-contact__agree-label {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
    color: var(--nc-ink);
    cursor: pointer;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.5;
}

#nt-contact .nt-contact__agree-req {
    color: var(--nc-blue-dark);
    font-weight: 700;
}

#nt-contact .nt-contact__agree .wpcf7-not-valid-tip {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
}

/* ---- 제출 버튼: 폭 전체 · 남색 · 58px (Avada 둥근 25px·대문자·Source Sans Pro·#4585be 덮기) ---- */
/* 테두리는 투명 2px: 평소에는 남색 바탕에 묻히고, 고대비(강제 색) 모드에서는 시스템 색 테두리로 버튼 윤곽이 보인다 (padding 을 2px 줄여 크기는 그대로) */
#nt-contact .wpcf7-form .wpcf7-submit {
    display: block;
    float: none;
    width: 100%;
    height: auto;
    min-height: 58px;
    margin: 24px 0 0;
    padding: 14px 22px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: var(--nc-navy);
    background-image: none;
    box-shadow: none;
    color: #FFFFFF;
    cursor: pointer;
    font-family: inherit;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: center;
    text-shadow: none;
    text-transform: none;
    -webkit-appearance: none;
    appearance: none;
}

#nt-contact .wpcf7-form .wpcf7-submit:focus,
#nt-contact .wpcf7-form .wpcf7-submit:visited {
    color: #FFFFFF;
}

#nt-contact .wpcf7-form .wpcf7-submit:hover,
#nt-contact .wpcf7-form .wpcf7-submit:active {
    background: var(--nc-blue-dark);
    color: #FFFFFF;
}

/* 보내는 동안 잠금: 스크립트가 요청 중에 버튼을 disabled 로 바꾼다 (흰 글씨 대비 5.2:1) */
#nt-contact .wpcf7-form .wpcf7-submit:disabled {
    background: var(--nc-muted);
    cursor: progress;
}

/* 보내는 중 표시: Avada 가 CF7 의 .ajax-loader 를 .fusion-slider-loading 으로 바꿔 넣는다 (버튼 아래 가운데) */
#nt-contact .wpcf7-form .fusion-slider-loading {
    position: static;
    width: 28px;
    height: 28px;
    margin: 14px auto 0;
    border-width: 3px;
    border-style: solid;
    border-color: rgba(11, 37, 64, 0.14);
    border-bottom-color: var(--nc-blue);
    border-radius: 50%;
    color: transparent;
    font-size: 10px;
}

/* ---- 응답 메시지 (CF7 JS 가 문구를 넣고 slideDown) --------------------- */
/* 처음 숨김은 Avada 합본 CSS 에 든 CF7 기본 규칙 .wpcf7-display-none { display: none } 이 맡는다 */
#nt-contact .wpcf7-form .wpcf7-response-output {
    position: relative;
    clear: both;
    margin: 16px 0 0;
    padding: 14px 18px 14px 48px;
    border: 1px solid var(--nc-line);
    border-radius: 14px;
    background: var(--nc-surface);
    box-shadow: none;
    color: var(--nc-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    text-align: left;
    text-shadow: none;
    text-transform: none;
}

#nt-contact .wpcf7-form .wpcf7-response-output::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 18px;
    width: 20px;
    height: 20px;
    background: center / 20px 20px no-repeat;
}

/* Avada 가 감싸는 마크업(.fusion-alert-content-wrapper > .alert-icon + .fusion-alert-content): 아이콘은 위 ::before 로 대신한다 */
#nt-contact .wpcf7-response-output .alert-icon {
    display: none;
}

#nt-contact .wpcf7-response-output .fusion-alert-content-wrapper,
#nt-contact .wpcf7-response-output .fusion-alert-content {
    display: block;
    color: inherit;
    font: inherit;
}

/* 오류(빨강 계열): 입력 오류 · 전송 실패 (서버 오류·요청 제한 안내도 wpcf7-mail-sent-ng 를 쓴다) */
#nt-contact .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
#nt-contact .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ng {
    border-color: var(--nc-error-border);
    background: var(--nc-error-soft);
    color: var(--nc-error);
}

#nt-contact .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors::before,
#nt-contact .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ng::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
}

/* 성공(초록 계열 = 청록). 오류 클래스와 함께 붙어도 성공이 이기도록 오류 규칙 뒤에 둔다 */
#nt-contact .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    border-color: var(--nc-success-border);
    background: var(--nc-tint-teal);
    color: var(--nc-teal-text);
}

#nt-contact .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C7C6E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.5 2.8 2.8L16.5 9.5'/%3E%3C/svg%3E");
}

/* ---- 안내 카드 ---------------------------------------------------------- */
#nt-contact .nt-contact__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

#nt-contact .nt-contact__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 26px 26px 24px;
    border: 1px solid var(--nc-line);
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: var(--nc-shadow-sm);
}

/* 빠른 상담: 머리말과 같은 테두리·옅은 그라데이션 바탕 */
#nt-contact .nt-contact__card--quick {
    border-color: #E3ECF4;
    background:
        radial-gradient(320px 160px at 100% 0%, rgba(30, 121, 180, 0.12), rgba(30, 121, 180, 0) 70%),
        linear-gradient(180deg, #F4F9FD 0%, #FFFFFF 100%);
}

#nt-contact .nt-contact__card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

#nt-contact .nt-contact__icon-tile {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--nc-tint-blue);
    color: var(--nc-blue-dark);
}

#nt-contact .nt-contact__icon-tile--teal {
    background: var(--nc-tint-teal);
    color: var(--nc-teal-text);
}

#nt-contact .nt-contact__icon-tile--navy {
    background: var(--nc-tint-navy);
    color: var(--nc-navy);
}

#nt-contact .nt-contact__card-title {
    font-size: 19px !important;
    font-weight: 800;
    line-height: 1.35 !important;
    letter-spacing: -0.02em;
}

/* 대표전화: 남색 블록 (전화 걸기) */
#nt-contact .nt-contact__tel,
#nt-contact .nt-contact__tel:focus,
#nt-contact .nt-contact__tel:visited,
#nt-contact .nt-contact__tel:hover {
    color: #FFFFFF;
}

#nt-contact .nt-contact__tel {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 14px 18px;
    border-radius: 16px;
    background: linear-gradient(120deg, #0B2540 0%, #12395F 62%, #155E8E 100%);
    text-decoration: none;
}

#nt-contact .nt-contact__tel:hover {
    background: var(--nc-blue-dark);
}

#nt-contact .nt-contact__tel-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
}

#nt-contact .nt-contact__tel-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#nt-contact .nt-contact__tel-label {
    color: #C9D6E3;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

#nt-contact .nt-contact__tel-number {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

#nt-contact .nt-contact__facts {
    display: flex;
    flex-direction: column;
}

#nt-contact .nt-contact__fact {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--nc-line-soft);
}

#nt-contact .nt-contact__fact:first-child {
    padding-top: 2px;
    border-top: 0;
}

#nt-contact .nt-contact__fact:last-child {
    padding-bottom: 0;
}

#nt-contact .nt-contact__fact dt {
    color: var(--nc-muted);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.5;
}

#nt-contact .nt-contact__fact dd {
    min-width: 0;
    color: var(--nc-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

#nt-contact .nt-contact__fact a,
#nt-contact .nt-contact__fact a:focus,
#nt-contact .nt-contact__fact a:visited {
    color: var(--nc-blue-dark);
}

#nt-contact .nt-contact__fact a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

#nt-contact .nt-contact__fact a:hover {
    color: var(--nc-navy);
}

/* 오시는 길 */
#nt-contact .nt-contact__address {
    color: var(--nc-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.55;
}

#nt-contact .nt-contact__more,
#nt-contact .nt-contact__more:focus,
#nt-contact .nt-contact__more:visited {
    color: var(--nc-blue-dark);
}

#nt-contact .nt-contact__more {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    min-height: 44px;
    margin-top: auto;
    padding: 0 16px;
    border: 1px solid #D5DEE7;
    border-radius: 12px;
    background: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

#nt-contact .nt-contact__more:hover {
    border-color: var(--nc-blue);
    background: var(--nc-tint-blue);
    color: var(--nc-blue-dark);
}

/* 함께 보면 좋은 페이지: 한 줄 링크 목록 */
#nt-contact .nt-contact__links {
    display: flex;
    flex-direction: column;
    margin-top: -4px;
}

#nt-contact .nt-contact__links li + li {
    border-top: 1px solid var(--nc-line-soft);
}

#nt-contact .nt-contact__links a,
#nt-contact .nt-contact__links a:focus,
#nt-contact .nt-contact__links a:visited {
    color: var(--nc-ink);
}

#nt-contact .nt-contact__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 4px 2px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

#nt-contact .nt-contact__links a svg {
    color: var(--nc-muted);
}

#nt-contact .nt-contact__links a:hover,
#nt-contact .nt-contact__links a:hover svg {
    color: var(--nc-blue-dark);
}

/* ---- 포커스 · 움직임 --------------------------------------------------- */
#nt-contact a:focus-visible,
#nt-contact .nt-contact__policy-body:focus-visible,
#nt-contact .wpcf7-form .wpcf7-submit:focus-visible {
    outline: 3px solid var(--nc-blue);
    outline-offset: 3px;
}

/* 동의 체크박스는 입력칸처럼 :focus 에 외곽선: 오류 뒤 nt-contact.js 가 옮긴 포커스가 마우스로 보낸 뒤에도 보이게 */
#nt-contact .nt-contact__agree input[type="checkbox"]:focus {
    outline: 3px solid var(--nc-blue);
    outline-offset: 2px;
}

#nt-contact .nt-contact__policy summary:focus-visible {
    outline: 3px solid var(--nc-blue);
    outline-offset: -3px;
}

@media (prefers-reduced-motion: no-preference) {
    #nt-contact .nt-contact__chip,
    #nt-contact .nt-contact__tel,
    #nt-contact .nt-contact__more,
    #nt-contact .nt-contact__links a,
    #nt-contact .wpcf7-form .wpcf7-submit,
    #nt-contact .wpcf7-form .wpcf7-text,
    #nt-contact .wpcf7-form .wpcf7-textarea {
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    #nt-contact .nt-contact__policy-chevron,
    #nt-contact .nt-contact__more svg,
    #nt-contact .nt-contact__links a svg {
        transition: transform 0.2s ease;
    }

    #nt-contact .nt-contact__more:hover svg,
    #nt-contact .nt-contact__links a:hover svg {
        transform: translateX(3px);
    }
}

/* 고대비(강제 색) 모드: 꾸민 체크박스 대신 기본 체크박스 */
@media (forced-colors: active) {
    #nt-contact .nt-contact__agree input[type="checkbox"] {
        -webkit-appearance: auto;
        appearance: auto;
    }
}

/* ---- 태블릿: 1단 (폼 → 안내). 빠른 상담은 한 줄 전체, 나머지 두 카드는 나란히 ---- */
@media (max-width: 1023px) {
    #nt-contact {
        gap: 32px;
    }

    #nt-contact .nt-contact__hero {
        padding: 52px 28px 32px;
        border-radius: 28px;
    }

    #nt-contact .nt-contact__title {
        font-size: 36px !important;
        line-height: 1.28 !important;
    }

    #nt-contact .nt-contact__lead {
        font-size: 17px;
    }

    #nt-contact .nt-contact__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    #nt-contact .nt-contact__aside {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    #nt-contact .nt-contact__card--quick {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 18px 28px;
    }

    #nt-contact .nt-contact__card--quick .nt-contact__card-head {
        grid-column: 1 / -1;
    }
}

/* ---- 모바일: 필드 1열, 여백 축소 -------------------------------------- */
@media (max-width: 767px) {
    #nt-contact {
        gap: 24px;
    }

    #nt-contact .nt-contact__hero {
        gap: 14px;
        padding: 36px 18px 24px;
        border-radius: 24px;
    }

    #nt-contact .nt-contact__title {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    #nt-contact .nt-contact__lead {
        font-size: 15.5px;
    }

    #nt-contact .nt-contact__chips {
        gap: 6px;
        margin-top: 4px;
    }

    #nt-contact .nt-contact__chip {
        padding: 6px 14px;
        font-size: 14px;
    }

    #nt-contact .nt-contact__body {
        gap: 20px;
    }

    #nt-contact .nt-contact__form-card {
        border-radius: 20px;
    }

    #nt-contact .nt-contact__form-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 20px 20px 18px;
    }

    #nt-contact .nt-contact__form-title {
        font-size: 20px !important;
        line-height: 1.35 !important;
    }

    #nt-contact .nt-contact__form-note {
        font-size: 13.5px;
    }

    #nt-contact .nt-contact__form-body {
        padding: 24px 18px 24px;
    }

    #nt-contact .nt-contact__noscript {
        margin-bottom: 20px;
        padding: 13px 14px;
        font-size: 14.5px;
    }

    #nt-contact .nt-contact__fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    #nt-contact .nt-contact__consent {
        margin-top: 24px;
    }

    #nt-contact .nt-contact__policy summary {
        gap: 8px;
        padding: 12px 14px;
        font-size: 14.5px;
    }

    #nt-contact .nt-contact__policy-body {
        margin: 0 12px 14px;
        padding: 14px;
        font-size: 13px;
    }

    #nt-contact .nt-contact__agree {
        column-gap: 10px;
        padding: 14px 14px 16px;
    }

    #nt-contact .nt-contact__agree-label {
        font-size: 15px;
    }

    #nt-contact .wpcf7-form .wpcf7-submit {
        min-height: 56px;
        margin-top: 20px;
    }

    #nt-contact .wpcf7-form .wpcf7-response-output {
        padding: 13px 14px 13px 42px;
        font-size: 14.5px;
    }

    #nt-contact .wpcf7-form .wpcf7-response-output::before {
        top: 14px;
        left: 14px;
    }

    #nt-contact .nt-contact__aside {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    #nt-contact .nt-contact__card,
    #nt-contact .nt-contact__card--quick {
        display: flex;
        align-items: stretch;
        gap: 14px;
        padding: 22px 20px 20px;
    }

    #nt-contact .nt-contact__tel {
        min-height: 72px;
        padding: 12px 16px;
    }

    #nt-contact .nt-contact__tel-number {
        font-size: 23px;
    }

    #nt-contact .nt-contact__fact {
        grid-template-columns: 56px minmax(0, 1fr);
        column-gap: 10px;
    }
}

/* 아주 좁은 휴대폰(374px 이하): 대표전화 번호가 남색 상자 안에 들어가도록 상자를 줄인다 */
@media (max-width: 374px) {
    #nt-contact .nt-contact__tel {
        gap: 10px;
        padding: 12px 14px;
    }

    #nt-contact .nt-contact__tel-icon {
        width: 36px;
        height: 36px;
    }

    #nt-contact .nt-contact__tel-number {
        font-size: 20px;
    }
}

/* 360px 미만 휴대폰: 장식 아이콘을 숨겨 대표전화 번호가 한 줄에 들어가게 한다 */
@media (max-width: 359px) {
    #nt-contact .nt-contact__tel-icon {
        display: none;
    }
}