/* Contact */
        .contact { position: relative; color: #fff; background: #071018; overflow: hidden; }
        .contact::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: .2;
            background:
                linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.09) 50%, transparent 50.2%),
                linear-gradient(0deg, transparent 49.8%, rgba(255,255,255,.07) 50%, transparent 50.2%);
            background-size: 110px 110px;
            mask-image: radial-gradient(circle at 20% 50%, #000, transparent 62%);
        }
        .contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: start; }
        .contact .section-kicker { color: var(--amber); }
        .contact-copy .section-title { font-size: clamp(2.45rem, 4.8vw, 4.6rem); }
        .contact-copy > p { margin: 28px 0 0; color: #9eabb7; line-height: 1.85; }
        .contact-email {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-top: 48px;
            padding-bottom: 7px;
            color: #fff;
            border-bottom: 1px solid rgba(255,255,255,.35);
            font: 700 clamp(1.05rem, 2vw, 1.35rem) "Manrope", sans-serif;
        }
        .contact-email svg { width: 20px; color: var(--amber); }
        .contact-meta { margin-top: 22px; color: #91a0ad; font-size: .9rem; line-height: 1.78; }
        .contact-form { padding: 42px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); background: rgba(255,255,255,.045); backdrop-filter: blur(15px); }
        .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
        .field { display: grid; gap: 9px; }
        .field.full { grid-column: 1 / -1; }
        .field label { color: #d5dce2; font-size: .9rem; font-weight: 700; }
        .field input, .field select, .field textarea {
            width: 100%;
            border: 1px solid rgba(255,255,255,.13);
            border-radius: 9px;
            outline: 0;
            color: #fff;
            background: rgba(0,0,0,.17);
            transition: border-color .2s, box-shadow .2s;
        }
        .field input, .field select { height: 52px; padding: 0 15px; }
        .field textarea { min-height: 130px; padding: 14px 15px; resize: vertical; line-height: 1.65; }
        .field input::placeholder, .field textarea::placeholder { color: #8795a1; }
        .field select { color-scheme: dark; }
        .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(242,166,25,.12); }
        .consent { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0; color: #a5b0ba; font-size: .9rem; line-height: 1.65; }
        .consent input { margin-top: 3px; accent-color: var(--amber); }
        .contact-form .button { width: 100%; border: 0; }
        .form-help { margin: 13px 0 0; color: #91a0ad; font-size: .9rem; line-height: 1.65; text-align: center; }

        /* ============================================
           문의 결과 모달
           - 색상은 기존 CSS 변수(--ink, --amber 등) 재사용
             → 사이트 톤 바뀌어도 변수만 고치면 같이 따라감
        ============================================ */
        .result-modal {
            width: min(calc(100% - 40px), 400px);
            padding: 40px 30px 30px;
            border: 0;
            border-radius: 20px;
            color: var(--ink);
            background: #fff;
            text-align: center;
            box-shadow: 0 30px 80px rgba(0,0,0,.3);
        }
        /* ::backdrop = dialog 전용 배경 레이어 */
        .result-modal::backdrop { background: rgba(4,10,16,.6); backdrop-filter: blur(3px); }
        .result-icon {
            display: grid;
            place-items: center;
            width: 62px;
            height: 62px;
            margin: 0 auto 20px;
            color: var(--amber);
            border: 2px solid var(--amber);
            border-radius: 50%;
        }
        .result-icon svg { width: 30px; }
        .result-icon .icon-fail { display: none; }
        .result-title { margin: 0 0 10px; font-size: 1.25rem; }
        .result-message { margin: 0 0 26px; color: var(--muted); font-size: .95rem; line-height: 1.75; }
        .result-close { width: 100%; border: 0; }
        /* 실패 상태: is-error 클래스로 색·아이콘 전환 */
        .result-modal.is-error .result-icon { color: #c94040; border-color: #c94040; }
        .result-modal.is-error .icon-ok { display: none; }
        .result-modal.is-error .icon-fail { display: block; }