/* ===========================================================================
   문의 폼 - 모바일 우선
   =========================================================================== */

.contactForm {
    width: 100%;
    max-width: 600px;
    /* 헤더 여백은 body 가 담당하므로 여기서는 순수 여백만
       (예전에는 헤더를 피하려고 margin-top:120px / 모바일 100px 를 줬다) */
    margin: clamp(1.5rem, 5vh, 3rem) auto 3rem;
    padding: 0 var(--page-pad);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(1rem, 3vh, 1.75rem);
}

.contactTable {
    width: 100%;
    border-collapse: collapse;
}

/* 좁은 화면: 라벨을 입력칸 위로 (테이블을 블록으로 펼침) */
.contactTable,
.contactTable tbody,
.contactTable tr,
.contactTable th,
.contactTable td {
    display: block;
    width: 100%;
}

.contactTable tr {
    margin-bottom: 0.75rem;
}

.contactTable th {
    text-align: left;
    padding: 0 0 0.35rem;
    font-weight: bold;
}

.contactTable td {
    padding: 0;
}

/*
 * 입력칸 글자 크기.
 * 16px 보다 작으면 iOS Safari 가 포커스할 때 화면을 강제로 확대한다.
 * 측정 결과 Title/Message/Email 이 13.3px, 캡차 입력칸이 13px 이었다.
 */
.contactTable input[type="text"],
.contactTable input[type="email"],
.contactTable textarea,
.captcha-action input[type="text"] {
    width: 100%;
    font: inherit;
    font-size: 16px;
    padding: 0.7rem;
    min-height: 44px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #111;
}

.contactTable textarea {
    min-height: 140px;
    resize: vertical;
}

/* ---------------------------------------------------------------------------
   캡차
--------------------------------------------------------------------------- */
.captcha-container {
    text-align: center;
    margin-bottom: 0.5rem;
}

#captcha_img {
    height: 48px;
    width: 168px;                   /* 원본 120x40 비율(3:1) 유지 */
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
}

.captcha-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.captcha-action input[type="text"] {
    max-width: 240px;
    text-align: center;
    text-transform: uppercase;      /* 코드는 대문자 - 입력할 때부터 보이게 */
    letter-spacing: 0.15em;
}

/*
 * 버튼 줄.
 * 예전 모바일 레이아웃은 float:left + width:48% + ::after clearfix 였다.
 * flex 로 바꾸면 clearfix 가 필요 없고 높이도 자동으로 맞는다.
 */
.captcha-buttons,
.captcha-action {
    box-sizing: border-box;
}

.captcha-action a.captcha-refresh,
.captcha-action input[type="button"],
.contactForm input[type="submit"] {
    flex: 1 1 auto;
    min-height: 48px;               /* 권장 터치 높이 */
    padding: 0.75rem 1.5rem;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}

@media (hover: hover) {
    .captcha-action a.captcha-refresh:hover,
    .captcha-action input[type="button"]:hover,
    .contactForm input[type="submit"]:hover {
        background-color: #555;
    }
}

/* 480px 이상: 라벨을 왼쪽에 두는 2단 테이블로 되돌리고 버튼은 가로 배치 */
@media (min-width: 480px) {
    .contactTable {
        display: table;
    }

    .contactTable tbody { display: table-row-group; }
    .contactTable tr    { display: table-row; margin-bottom: 0; }

    .contactTable th {
        display: table-cell;
        width: 120px;
        padding: 0.65rem 0.75rem 0.65rem 0;
        vertical-align: top;
    }

    .contactTable td {
        display: table-cell;
        padding: 0.4rem 0;
    }

    .captcha-action {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .captcha-action input[type="text"] {
        flex: 0 0 auto;
        width: 200px;
    }

    .captcha-action a.captcha-refresh,
    .captcha-action input[type="button"] {
        flex: 0 0 auto;
        min-width: 120px;
    }
}