/* ==========================================================================
   DAMDA 2026 — 견적문의 (contact)
   시안: contact_base / contact_scroll down / contact_mobile ver
   ========================================================================== */

#contact2026 {
    max-width: 880px;
    margin: 0 auto;
    padding: 72px 16px 40px; /* 헤더와 타이틀 간격 72px (XD 스펙) */
}

/* PC(메뉴 폭 고정 구간): 폼 컬럼 좌측을 ABOUT US 박스 좌측과 정렬.
   GNB는 우측 기준 고정 폭이므로(ABOUT US 좌측 = 우측에서 1309px,
   DAMDA NOTE 우측 = 우측에서 492px) 우측 마진으로 정렬한다. */
@media (min-width: 1501px) {
    #contact2026 {
        width: 817px;            /* 1309 - 492 */
        max-width: none;
        margin: 0 492px 0 auto;
        padding-left: 0;
        padding-right: 0;
    }

}

#contact2026 .ct-title {
    /* XD 스펙: normal normal 600 40px/56px Pretendard */
    font-family: var(--font-kr);
    font-size: 40px;
    font-weight: 600;
    line-height: 56px;
    letter-spacing: -0.8px;
    text-align: left;
    color: #252A28;
    opacity: 1;
    margin: 0 0 68px;
}

#contact2026 .ct-form-error {
    background: #FDECEA;
    color: #C0392B;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 15px;
}

#contact2026 .ct-field-error {
    color: #C0392B;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-line;
}

/* ---------- 필드 공통 ---------- */
#contact2026 label,
#contact2026 .ct-label {
    display: block;
    /* XD 스펙: normal normal bold 18px/32px Pretendard */
    font-family: var(--font-kr);
    font-size: 18px;
    font-weight: 550;
    line-height: 32px;
    letter-spacing: -0.36px;
    opacity: 1;
    color: var(--ink);
    margin-bottom: 10px;
}

#contact2026 label em,
#contact2026 .ct-label em {
    color: #E2574C;
    font-style: normal;
    margin-right: 2px;
}

#contact2026 .ct-label small {
    font-weight: 400;
    color: var(--dark-gray);
}

#contact2026 .ct-field label,
#contact2026 .ct-field .ct-label,
#contact2026 .ct-req > .ct-label,
#contact2026 .ct-pf > .ct-label { color: #505554; }

#contact2026 input[type="text"],
#contact2026 input[type="email"],
#contact2026 input[type="tel"],
#contact2026 input[type="number"],
#contact2026 select,
#contact2026 textarea {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #E4E7E5;
    background: var(--white-gray);
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    outline: none;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
}

#contact2026 textarea {
    height: 280px;
    padding: 16px;
    resize: vertical;
}

#contact2026 input:focus,
#contact2026 select:focus,
#contact2026 textarea:focus { border-color: var(--green); }

#contact2026 input::placeholder,
#contact2026 textarea::placeholder { color: #AAB2AD; }

#contact2026 .is-invalid { border-color: #E2574C !important; }

#contact2026 select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23AAB2AD' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

#contact2026 select:invalid { color: #AAB2AD; }

/* 2열 그리드 */
#contact2026 .ct-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
    margin-bottom: 28px;
}

#contact2026 .ct-field-full { margin-bottom: 24px; }

/* 사이즈 3분할 + 안내 툴팁 */
#contact2026 .ct-size-row {
    display: flex;
    gap: 8px;
}

#contact2026 .ct-size-help {
    position: relative;
    display: inline-flex;
    float: right; /* 아이콘을 컬럼 오른쪽 끝에 배치 (시안) */
}

#contact2026 .ct-size-info {
    display: inline-flex;
    vertical-align: -3px;
}

/* 사이즈 측정 방법 팝오버 — XD(PC CONTACT-1) 실측: 364×336, r8, 패딩 28 */
#contact2026 .ct-size-tip {
    display: none;
    position: absolute;
    left: -8px;
    bottom: calc(100% + 8px); /* 아이콘 위로 펼침 (XD) */
    z-index: 20;
    width: 364px;
    max-width: calc(100vw - 48px);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
    padding: 30px 28px 28px;
    text-align: left;
    cursor: default;
}

#contact2026 .ct-size-help.is-open .ct-size-tip { display: block; }

#contact2026 .ct-size-tip-title {
    display: block;
    font-family: var(--font-kr);
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.36px;
    color: #252A28;
}

#contact2026 .ct-size-tip-close {
    position: absolute;
    top: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

#contact2026 .ct-size-tip-img {
    display: block;
    width: 116px;
    margin: 24px auto 32px;
}

#contact2026 .ct-size-tip-txt {
    display: block;
    font-family: var(--font-kr);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.32px;
    color: #505554;
    word-break: keep-all;
}

/* ---------- 의뢰분야 ---------- */
#contact2026 .ct-req { margin-bottom: 28px; }

#contact2026 .ct-req-items {
    display: flex;
    flex-wrap: nowrap; /* PC: 한 줄 배치 */
    gap: 16px;
}

#contact2026 .ct-req-items label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 16px;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
    color: #505554; /* XD 스펙 */
}

#contact2026 .ct-req-items input {
    width: 18px;
    height: 18px;
    accent-color: var(--green);
}

#contact2026 .ct-req-items.is-invalid-group {
    outline: 1px solid #E2574C;
    outline-offset: 8px;
}

/* ---------- 파일첨부 ---------- */
#contact2026 .ct-file {
    display: block;
    background: #D9E0DD 0% 0% no-repeat padding-box;
    border-radius: 4px;
    opacity: 1;
    height: 56px;
    line-height: 56px;
    padding: 0 20px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#contact2026 .ct-file-text {
    /* XD 스펙: normal normal 400 18px/32px Pretendard */
    font-family: var(--font-kr);
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -0.36px;
    text-align: left;
    color: #848D89;
    opacity: 1;
}

#contact2026 .ct-file input { display: none; }

#contact2026 .ct-file.has-file { color: var(--ink); background: var(--pastel-green); }

/* ---------- 참고 포트폴리오 ---------- */
#contact2026 .ct-pf { margin-bottom: 28px; }

#contact2026 .ct-pf-carousel {
    display: flex;
    align-items: center;
    gap: 20px;
}

#contact2026 .ct-pf-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1 1 auto;
    min-width: 0;
    scrollbar-width: none;
}

#contact2026 .ct-pf-track::-webkit-scrollbar { display: none; }

#contact2026 .ct-pf-item {
    position: relative;
    flex: 0 0 auto;
    width: 224px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

#contact2026 .ct-pf-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

#contact2026 .ct-pf-item.is-removed { display: none; }

#contact2026 .ct-pf-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .85);
}

#contact2026 .ct-pf-arrows {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

#contact2026 .ct-pf-arrow {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-gray);
}

/* ---------- 동의 + 제출 ---------- */
#contact2026 .ct-agree {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

#contact2026 .ct-agree label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 15px;
    margin: 0;
    cursor: pointer;
    color: #505554; /* XD 스펙 */
}

#contact2026 .ct-agree input {
    width: 18px;
    height: 18px;
    accent-color: var(--green);
}

#contact2026 .ct-agree a { font-weight: 700; }

#contact2026 .ct-submit {
    width: 100%;
    height: 60px;
    background: #D9E0DD 0% 0% no-repeat padding-box;
    border-radius: 4px;
    opacity: 1;
    /* XD 스펙: normal normal 500 18px/32px Pretendard */
    font-family: var(--font-kr);
    font-size: 18px;
    font-weight: 550;
    line-height: 32px;
    letter-spacing: -0.36px;
    color: #505554;
    transition: background-color .2s ease, color .2s ease;
}

#contact2026 .ct-submit:hover {
    background: var(--green);
    color: var(--white-gray);
}

/* ---------- 완료 페이지 ---------- */
#contactdone2026 {
    max-width: 720px;
    margin: 0 auto;
    padding: 120px 16px 160px;
    text-align: center;
}

#contactdone2026 .cd-mark {
    width: 72px;
    height: 72px;
    margin: 0 auto 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pastel-green);
    border-radius: 50%;
}

#contactdone2026 h1 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--ink);
}

#contactdone2026 p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--dark-gray);
    margin-bottom: 40px;
}

#contactdone2026 .cd-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 40px;
    background: var(--green);
    color: var(--white-gray);
    font-weight: 600;
}

/* ---------- 모바일 (contact_mobile ver 시안 실측) ---------- */
@media (max-width: 900px) {
    /* 시안: 헤더 ↔ 타이틀 간격 ~80px */
    #contact2026 { padding: 80px 16px 32px; }

    /* 의뢰분야: 2열 × 4행 그리드 — 체크박스 세로 정렬 */
    #contact2026 .ct-req-items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 20px;
    }

    /* XD 스펙: normal normal 520 32px/38px Pretendard, 아래 여백 ~64px */
    #contact2026 .ct-title {
        font-size: 32px;
        font-weight: 520;
        line-height: 38px;
        letter-spacing: -0.64px;
        color: #252A28;
        margin: 0 0 64px;
    }

    #contact2026 .ct-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* 시안 모바일 필드 순서: 회사명 → 담당자명 → 연락처 → 수량 → 메일주소 → 예산 → 사이즈 → 제품종류
       (DOM은 데스크톱 2열 배치 기준이므로 모바일에서만 order로 재배열) */
    #contact2026 .ct-grid > .ct-field:nth-child(1) { order: 1; } /* 회사명 */
    #contact2026 .ct-grid > .ct-field:nth-child(2) { order: 5; } /* 메일주소 */
    #contact2026 .ct-grid > .ct-field:nth-child(3) { order: 2; } /* 담당자명/직책 */
    #contact2026 .ct-grid > .ct-field:nth-child(4) { order: 6; } /* 예산 */
    #contact2026 .ct-grid > .ct-field:nth-child(5) { order: 3; } /* 연락처 */
    #contact2026 .ct-grid > .ct-field:nth-child(6) { order: 7; } /* 사이즈(mm) */
    #contact2026 .ct-grid > .ct-field:nth-child(7) { order: 4; } /* 수량 */
    #contact2026 .ct-grid > .ct-field:nth-child(8) { order: 8; } /* 제품종류 */

    #contact2026 label,
    #contact2026 .ct-label {
        font-size: 17px;
        line-height: 26px;
        margin-bottom: 8px;
    }

    /* XD 스펙: h40, #F9F9F9 bg + #D9E0DD 1px 테두리, r4
       (select 화살표 이미지가 지워지지 않도록 background 축약형 대신 개별 속성) */
    #contact2026 input[type="text"],
    #contact2026 input[type="email"],
    #contact2026 input[type="tel"],
    #contact2026 input[type="number"],
    #contact2026 select {
        height: 40px;
        background-color: var(--white-gray); /* #F9F9F9 */
        border: 1px solid #D9E0DD;
        border-radius: 4px;
    }

    /* 사이즈 안내 아이콘: 시안은 라벨 바로 옆(인라인) */
    #contact2026 .ct-size-help { float: none; margin-left: 4px; }

    /* 팝오버: 화면 중앙 고정 (아이콘 기준 배치는 화면을 벗어남) */
    #contact2026 .ct-size-tip {
        position: fixed;
        left: 50%;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: calc(100vw - 32px);
        max-width: 364px;
    }

    /* 파일첨부 — XD 스펙: h40 */
    #contact2026 .ct-file { height: 40px; line-height: 40px; padding: 0 16px; }

    #contact2026 .ct-file-text { font-size: 16px; line-height: 40px; }

    /* 참고 포트폴리오: 카드 2장 노출 + 화살표는 아래 중앙 (시안) */
    #contact2026 .ct-pf-carousel {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    /* 시안: 카드가 화면의 절반 이상 차지, 두 번째 카드는 우측에서 잘려 보임 */
    #contact2026 .ct-pf-item { width: 53%; }

    /* XD 스펙: 50×44, #D9E0DD, r4, 간격 3px */
    #contact2026 .ct-pf-arrows {
        display: flex;
        justify-content: center;
        gap: 3px;
    }

    #contact2026 .ct-pf-arrow {
        width: 50px;
        height: 44px;
        background: #D9E0DD 0% 0% no-repeat padding-box;
        border: 1px solid #D9E0DD;
        border-radius: 4px;
    }

    #contact2026 .ct-agree { justify-content: flex-start; margin: 32px 0 16px; }

    #contact2026 .ct-submit {
        height: 40px; /* XD 스펙 */
        border-radius: 4px; /* XD 스펙 */
        font-size: 17px;
    }

    #contactdone2026 { padding: 80px 16px 100px; }
}

/* PC 정렬 구간: 우측 컬럼을 DAMDA NOTE 박스와 동일 폭(341px)·동일 위치로, 컬럼 간격 40px */
@media (min-width: 1501px) {
    #contact2026 .ct-grid {
        /* 좌 460(→ PORTFOLIO 우측 선) + 16 + 우 341(= DAMDA NOTE 박스) = 817 */
        grid-template-columns: 460px 341px;
        column-gap: 16px;
    }
}

/* 와이드(>1920): 본문 좌우 여백을 헤더·푸터 인셋(8px)과 정렬 */
@media (min-width: 1921px) {
    #contact2026 { padding: 72px 8px 40px; }

    #contactdone2026 { padding: 120px 8px 160px; }
}

/* ==========================================================================
   와이드(>1920) — Figma 4K-CONTACT 실측값(절반 스케일) 재정의
   규칙: base/base.css 와이드 블록 주석 참고 (4K값 ÷ 2 를 CSS값으로 지정)
   ========================================================================== */
@media (min-width: 1921px) {
    /* 폼 컬럼 — 4K: 제목 좌 1211, 폼 폭 1904(940×2+24), 우측 여백 725 */
    #contact2026 {
        width: 952px;
        max-width: none;
        margin: 0 362px 0 auto;
        padding: 36px 0 20px; /* 4K: 헤더 ↔ 타이틀 72 */
    }

    #contact2026 .ct-title { font-size: 28px; line-height: 34px; margin: 0 0 36px; } /* 4K 56/67 Bold */

    #contact2026 .ct-form-error { padding: 6px 8px; margin-bottom: 12px; font-size: 12px; }

    #contact2026 label,
    #contact2026 .ct-label { font-size: 16px; line-height: 19px; margin-bottom: 8px; } /* 4K 32 */

    #contact2026 input[type="text"],
    #contact2026 input[type="email"],
    #contact2026 input[type="tel"],
    #contact2026 input[type="number"],
    #contact2026 select,
    #contact2026 textarea {
        height: 32px;           /* 4K 64 */
        padding: 0 8px;
        font-size: 14px;
        border-radius: 2px;
    }

    #contact2026 textarea { height: 130px; padding: 8px; }

    #contact2026 .ct-grid { grid-template-columns: 470px 470px; gap: 24px 12px; margin-bottom: 14px; } /* 4K: 두 열 각 940, 간격 24 */

    #contact2026 .ct-field-full { margin-bottom: 12px; }

    #contact2026 .ct-size-info { width: 14px; height: 14px; }

    #contact2026 .ct-req { margin-bottom: 14px; }

    #contact2026 .ct-req-items { gap: 8px; }

    #contact2026 .ct-req-items label { gap: 4px; font-size: 14px; }

    #contact2026 .ct-req-items input { width: 12px; height: 12px; }

    #contact2026 .ct-file { height: 28px; line-height: 28px; padding: 0 10px; border-radius: 2px; }

    #contact2026 .ct-file-text { font-size: 12px; }

    #contact2026 .ct-pf { margin-bottom: 14px; }

    #contact2026 .ct-pf-item { width: 112px; }

    #contact2026 .ct-agree { margin-bottom: 8px; }

    #contact2026 .ct-agree label { gap: 4px; font-size: 12px; }

    #contact2026 .ct-agree input { width: 12px; height: 12px; }

    #contact2026 .ct-submit { height: 48px; line-height: 24px; font-size: 16px; font-weight: 600; border-radius: 2px; } /* 4K 32/600 */

    /* 완료 페이지 — 물리 크기 유지(절반 스케일) */
    #contactdone2026 { max-width: 400px; padding: 60px 8px 80px; }

    #contactdone2026 .cd-mark { width: 36px; height: 36px; margin: 0 auto 16px; }

    #contactdone2026 h1 { font-size: 14px; margin-bottom: 10px; }

    #contactdone2026 p { font-size: 9px; margin-bottom: 20px; }

    #contactdone2026 .cd-home { height: 28px; padding: 0 20px; font-size: 9px; }
}

/* 파일첨부 바: 클립 아이콘 + '문의하기' 버튼과 동일 높이 */
#contact2026 .ct-file {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 60px;        /* = .ct-submit */
    line-height: normal;
}

#contact2026 .ct-file-clip {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
}

#contact2026 .ct-file-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 1921px) {
    #contact2026 .ct-file { height: 48px; padding: 0 12px; } /* = 문의하기(48) */
}