/* ══════════════════════════════════════
   문의하기 (contact.html)
   GP: 1920px / GM: 360px
   Figma file: 9atg0Kz3RdcbBqpN2Ozdsd  Page 5
   GP frame: 278:1980 / GM frame: 278:2179
══════════════════════════════════════ */


/* ── 페이지 헤더 ── */
/* GP: h=366, GNB=90, pt=70, pb=100, title fs=80, fw=700, center */
.ct-page-header {
    padding: 70px 120px 100px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-page-title {
    font-size: 80px;
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.4;
    text-align: center;
}


/* ── 폼 컨테이너 ── */
/* GP: pt=100, pb=100, pl=120, pr=120, gap=100 */
.ct-container {
    background: #fff;
    padding: 100px 120px;
    display: flex;
    flex-direction: column;
    gap: 100px;
}


/* ── 섹션 아이템 ── */
/* GP: gap=40 between title and content */
.ct-item {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* 문의자 정보: w=728 */
    max-width: 728px;
}

.ct-item--full {
    max-width: 100%;
}

/* GP: item title — fs=36, fw=700, color=#1B1B1B */
.ct-item-title {
    font-size: 36px;
    font-weight: 700;
    color: #1B1B1B;
    margin: 0;
    line-height: 1.5;
}


/* ── 선택 버튼 그리드 ── */
/* GP: gap=24, 3-col grid */
.ct-btn-grid {
    display: grid;
    gap: 24px;
}

/* GP: 카테고리 4개 — 3+1 (3col) */
.ct-btn-grid--4 {
    grid-template-columns: repeat(3, 1fr);
}

/* GP: 제품 3개 — 3col */
.ct-btn-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Figma 라디오 옵션 (node 1648:45231) — h120, px40, radius20, bg #F8F9FB, 라벨 24 Bold + 도넛 아이콘 32px
   비선택: 테두리 없음(투명 1px), 라벨 #7A7A7A / 선택: 테두리 #F27100, 라벨 #000 */
.ct-btn-sel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 120px;
    padding: 0 40px;
    border-radius: 20px;
    font-size: 24px;
    font-weight: 700;
    text-align: left;
    background: #F8F9FB;
    color: #7A7A7A;
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.15s, border-color 0.15s;
    line-height: 1.5;
    box-sizing: border-box;
}

/* 라디오 — 코일/도넛 32px SVG (비선택: 회색 링) */
.ct-btn-sel::after {
    content: '';
    order: -1;   /* 검수(0713): 라디오를 좌측으로 */
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: url(../assets/radio-donut-off.svg) center / contain no-repeat;
}

/* 검수(0713): 텍스트는 absolute 아님. 라디오가 왼쪽을 차지하고, 남은 공간에서 중앙정렬 */
.ct-btn-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 선택 — 테두리 #F27100, 라벨 검정, 도넛 오렌지 */
.ct-btn-sel.is-active {
    color: #000000;
    border-color: #F27100;
}

.ct-btn-sel.is-active::after {
    background-image: url(../assets/radio-donut-on.svg);
}

.ct-btn-sel:hover:not(.is-active) {
    border-color: #D3D3D3;
}


/* ── 문의자 정보 폼 ── */
/* GP: con — VERTICAL, gap=60 */
.ct-info-con {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* GP: Text Field — HORIZONTAL, gap=24, h=60 (이메일은 auto) */
.ct-field {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    height: 60px;
}

/* 이메일 필드 — 1줄, height auto */
.ct-field:has(.ct-email-wrap) {
    height: auto;
    align-items: center;
}

/* GP: 문의내용 textarea 행 — align-items flex-start */
.ct-field--textarea {
    align-items: flex-start;
    height: auto;
}

/* GP: 첨부파일 행 — align-items flex-start */
.ct-field--attach {
    align-items: flex-start;
    height: auto;
}

/* GP: Title — w=160, h=60, pt=12, pb=12, gap=4 */
.ct-field-title {
    width: 160px;
    min-width: 160px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* GP: 문의내용 title (첨부파일 포함) — top-aligned */
.ct-field--textarea .ct-field-title,
.ct-field--attach .ct-field-title {
    align-items: flex-start;
    padding-top: 12px;
    height: auto;
}

/* GP: label — fs=24, fw=700, color=#363636 */
.ct-field-label {
    font-size: 24px;
    font-weight: 700;
    color: #363636;
    line-height: 1.5;
}

/* GP: 필수 * — fs=20, color=#F00 */
.ct-required {
    font-size: 20px;
    color: #FF0000;
    line-height: 32px;
}

/* GP: Input 래퍼 — 문의자 정보(w=544) */
.ct-field-input-wrap {
    width: 544px;
}

/* GP: 문의내용 Input 래퍼 — w=1390 */
.ct-field-input-wrap--full {
    flex: 1;
    width: auto;
}

/* GP: Input — h=60, pl=24, pr=24, border=1px solid #A7A7A7, radius=10 */
.ct-input {
    width: 100%;
    height: 60px;
    padding: 0 24px;
    border: 1px solid #A7A7A7;
    border-radius: 10px;
    font-size: 22px;
    font-weight: 400;
    color: #1B1B1B;
    background: #fff;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}

.ct-input:focus {
    border-color: #1B1B1B;
}

.ct-input::placeholder {
    color: #A7A7A7;
}

/* GP: Textarea — h=302, pt=12, pb=12, pl=24, pr=24 */
.ct-textarea {
    width: 100%;
    height: 302px;
    padding: 12px 24px;
    border: 1px solid #A7A7A7;
    border-radius: 10px;
    font-size: 22px;
    font-weight: 400;
    color: #1B1B1B;
    background: #fff;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
    line-height: 1.6;
}

.ct-textarea:focus {
    border-color: #1B1B1B;
}

.ct-textarea::placeholder {
    color: #A7A7A7;
}

/* GP: 문의내용 섹션 con — gap=60 */
.ct-content-con {
    display: flex;
    flex-direction: column;
    gap: 60px;
}


/* ── 이메일 분할 입력 ── */
/* GP: 1줄 [local][@][domain][select] */
.ct-email-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* GP: local — w=544px FIXED, shrink-0 */
.ct-email-local {
    flex: 0 0 544px;
    width: 544px;
    border-radius: 10px;
}

/* GP: @ — 텍스트만 */
.ct-at {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #1B1B1B;
    background: none;
    border: none;
    box-sizing: border-box;
}

/* GP: domain-wrap — w=526px FIXED, shrink-0, flex row, gap=12 */
.ct-email-domain-wrap {
    flex: 0 0 526px;
    width: 526px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    border-radius: 0;
    height: 60px;
    overflow: visible;
    position: static;
}

/* GP: domain input — flex:1, 독립 border, radius=10, padding l=24 r=24 */
.ct-email-domain {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    border: 1px solid #A7A7A7;
    border-radius: 10px;
    height: 60px;
    padding: 0 24px;
    font-size: 22px;
    color: #1B1B1B;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.ct-email-domain::placeholder {
    color: #A7A7A7;
}

/* GP: 커스텀 select — flex:1, 독립 border, radius=10 */
.ct-email-select {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    height: 60px;
    border: 1px solid #A7A7A7;
    border-radius: 10px;
    background: #fff;
    font-size: 22px;
    color: #1B1B1B;
    font-family: inherit;
    padding: 0 24px;
    cursor: pointer;
    outline: none;
    position: relative;
    display: flex;
    align-items: center;
    user-select: none;
    box-sizing: border-box;
}

.ct-email-select:focus {
    border-color: #1B1B1B;
}

/* 현재 선택 텍스트 */
.ct-email-select-current {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 드롭다운 화살표 — SVG 삼각형 */
.ct-email-select-arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.ct-email-select-arrow svg {
    width: 24px;
    height: 24px;
}

.ct-email-select.is-open .ct-email-select-arrow {
    transform: rotate(180deg);
}

/* 드롭다운 리스트 — border=1 solid #A7A7A7, radius=10, items h=60 px=24 */
.ct-email-select-list {
    display: none;
    position: fixed;
    background: #fff;
    border: 1px solid #A7A7A7;
    border-radius: 10px;
    z-index: 9999;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.ct-email-select.is-open .ct-email-select-list {
    display: block;
}

/* 각 항목 — h=60, px=24, fs=22, color=#000 */
.ct-email-select-list li {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    font-size: 22px;
    color: #000;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
}

.ct-email-select-list li:hover {
    background: #F1F3F7;
}

/* 선택된 항목 — bg=#F1F3F7 */
.ct-email-select-list li.is-selected {
    background: #F1F3F7;
    color: #000;
    font-weight: 400;
}


/* ── 첨부파일 ── */
.ct-attach-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* GP: 파일선택 버튼 — h=52, pl=20, pr=20, bg=#1B1B1B, color=#fff, fs=18, fw=500, radius=10 */
.ct-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 20px;
    background: #1B1B1B;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    line-height: 1;
    width: fit-content;
    font-family: inherit;
    transition: opacity 0.15s;
}

.ct-file-btn:hover {
    opacity: 0.8;
}

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

/* GP: Drop area — h=200, bg=#F8F9FB, border=1px dashed #A7A7A7 (dasharray 4 4), radius=10 */
.ct-drop-area {
    height: 200px;
    background: #F8F9FB;
    border: none;
    border-radius: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='10' ry='10' fill='none' stroke='%23A7A7A7' stroke-width='1' stroke-dasharray='4%2C4' stroke-dashoffset='0'/%3E%3C/svg%3E");
    background-color: #F8F9FB;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ct-drop-area:hover,
.ct-drop-area.is-over {
    background-color: #F0F1F3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='10' ry='10' fill='none' stroke='%23F27100' stroke-width='1' stroke-dasharray='4%2C4' stroke-dashoffset='0'/%3E%3C/svg%3E");
}

.ct-drop-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

/* GP: drop text — fs=20, fw=400, color=#4E4E4E */
.ct-drop-text {
    font-size: 20px;
    font-weight: 400;
    color: #4E4E4E;
    margin: 0;
    line-height: 1.6;
    text-align: center;
}

/* GP: 첨부 안내 — fs=20, color=#7A7A7A, bullet */
.ct-attach-notes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-attach-notes li {
    font-size: 20px;
    font-weight: 400;
    color: #7A7A7A;
    line-height: 1.6;
    padding-left: 14px;
    position: relative;
}

.ct-attach-notes li::before {
    content: '';
    width: 4px;
    height: 4px;
    background: #7A7A7A;
    border-radius: 50%;
    position: absolute;
    left: 2px;
    top: 12px;
}

/* ── 첨부파일 상태 토글 ── */
.ct-drop-area.has-files {
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 220px;
    height: auto;
    padding: 24px;
    gap: 20px;
    cursor: default;
}

.ct-drop-default {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    flex: 1;
}

.ct-drop-files {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.ct-drop-header {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 20px;
    font-weight: 400;
    color: #4E4E4E;
    line-height: 1.6;
}

.ct-drop-clear {
    background: none;
    border: none;
    padding: 0;
    font-size: 20px;
    font-weight: 400;
    color: #4E4E4E;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.6;
}

.ct-drop-clear:hover {
    text-decoration: underline;
}

.ct-drop-divider {
    width: 1px;
    height: 16px;
    background: #A7A7A7;
    flex-shrink: 0;
}

.ct-drop-count {
    font-size: 20px;
    font-weight: 400;
    color: #4E4E4E;
    line-height: 1.6;
}

.ct-drop-count-current {
    font-weight: 500;
    color: #F27100;
}

.ct-file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-file-row {
    background: #fff;
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    align-items: center; /* 검수 0727(Figma): X가 파일(다줄 포함) 세로 중앙 정렬 */
    gap: 16px;
}

.ct-file-remove {
    width: 20px; /* 검수 0727(Figma): X 버튼 20×20 (24 아님) */
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transform: rotate(45deg);
}

.ct-file-remove svg {
    width: 12px; /* 검수 0727(Figma): 글리프 ~11.3, 20 박스 안에 여백 */
    height: 12px;
}

.ct-file-name {
    font-size: 20px;
    font-weight: 400;
    color: #4E4E4E;
    line-height: 1.6;
    /* 검수 0727: 긴 파일명(공백 없는 문자열)이 잘리지 않고 줄바꿈되게 */
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.ct-file-size {
    font-size: 16px;
    font-weight: 400;
    color: #A7A7A7;
    line-height: 1.6;
}


/* ── 개인정보 ── */
.ct-privacy-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* GP: 개인정보 테이블 외부 — bg=#F8F9FB, radius=16, pt=30, pb=30, pl=20, pr=20 */
.ct-privacy-table {
    background: #F8F9FB;
    border-radius: 16px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

/* GP: 헤더 행 — bg=none(부모 #F8F9FB 상속), pt=6, pb=6, pl=30, pr=30, h=48 */
.ct-privacy-row--head {
    background: none;
    border-radius: 0;
    padding: 6px 30px;
    margin-bottom: 0;
}

.ct-privacy-row--head span {
    font-size: 24px;
    font-weight: 700;
    color: #1B1B1B;
    line-height: 1.5;
    display: block;
}

/* GP: 내용 행 — bg=none(부모 #F8F9FB 상속), w=1640, h=164, pt=12, pb=12, pl=30, pr=30 */
.ct-privacy-row--body {
    background: none;
    border-radius: 0;
    padding: 12px 30px;
    margin: 0;
}

.ct-privacy-row--body p {
    font-size: 22px;
    font-weight: 400;
    color: #4E4E4E;
    line-height: 1.6;
    margin: 0;
}

.ct-privacy-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-privacy-list li {
    font-size: 22px;
    font-weight: 400;
    color: #4E4E4E;
    line-height: 35px;
    padding-left: 18px;
    position: relative;
}

.ct-privacy-list li::before {
    content: '';
    width: 5px;
    height: 5px;
    background: #4E4E4E;
    border-radius: 50%;
    position: absolute;
    left: 4px;
    top: 12px;
}

/* GP: 체크박스 — gap=10 */
.ct-checkbox-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    width: fit-content;
}

.ct-checkbox-input {
    display: none;
}

/* 검수 0630: 체크박스 제보하기와 동일 — 24×24, border 1px #A7A7A7, radius 4 */
.ct-checkbox-box {
    width: 24px;
    height: 24px;
    border: 1px solid #A7A7A7;
    border-radius: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s;
}

.ct-checkbox-box::after {
    content: '';
    width: 7px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) translate(-1px, -1px);
    opacity: 0;
    transition: opacity 0.15s;
}

.ct-checkbox-input:checked+.ct-checkbox-box {
    background: #F27100;
    border-color: #F27100;
}

.ct-checkbox-input:checked+.ct-checkbox-box::after {
    opacity: 1;
}

/* GP: 체크박스 텍스트 — fs=24, fw=700, color=#000 */
.ct-checkbox-label {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    line-height: 1.5;
}


/* ── 제출 버튼 섹션 ── */
/* GP: h=140, pt=60, justify-center */
.ct-btn-section {
    background: #fff;
    padding: 60px 0 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* GP: btn — w=346, h=80, radius=10, fs=24, fw=700, bg=#F27100, color=#fff */
.ct-submit-btn {
    width: 346px;
    height: 80px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 700;
    background: #111111; /* 검수 0728(Figma 1648-78695): 블랙톤 버튼 */
    color: #fff;
    border: 1px solid #111111;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s;
    line-height: 1;
}

.ct-submit-btn:hover {
    opacity: 0.85;
}


/* ── 고객지원 섹션 ── */
/* GP: pt=80, pb=80, pl=120, pr=120 */
.ct-support-section {
    background: #fff;
    padding: 80px 120px;
}

/* GP: card — w=1680, h=210, radius=20, bg=#F8F9FB, pt=40, pb=40, pl=30, pr=50, gap=20 */
.ct-support-card {
    background: #F8F9FB;
    border-radius: 20px;
    padding: 40px 50px 40px 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

/* GP: ic_고객지원 — 130×130 */
.ct-support-icon {
    width: 130px;
    height: 130px;
    flex-shrink: 0;
}

/* GP: text area — gap=24, flex-row */
.ct-support-text {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ct-support-texts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 데스크탑: 줄바꿈 없음 */
.ct-mo-br {
    display: none;
}

/* GP: title — fs=32, fw=700, color=#1B1B1B */
.ct-support-title {
    font-size: 32px;
    font-weight: 700;
    color: #1B1B1B;
    margin: 0;
    line-height: 1.5;
}

/* GP: desc — fs=22, fw=400, color=#4E4E4E */
.ct-support-desc {
    font-size: 22px;
    font-weight: 400;
    color: #4E4E4E;
    margin: 0;
    line-height: 1.6;
}

/* GP: Chevron — 64×64, radius=4, bg 없음 */
.ct-support-arrow {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background 0.15s;
}

.ct-support-arrow:hover {
    background: #F0F1F3;
}

.ct-support-arrow svg {
    width: 26px;
    height: 26px;
}


/* ══════════════════════════════════════
   반응형 — 태블릿 (768px ~ 1439px)
══════════════════════════════════════ */
@media (max-width: 1439px) {

    .ct-page-header {
        padding: 50px 40px 60px;
    }

    .ct-page-title {
        font-size: clamp(36px, 5vw, 60px);
    }

    .ct-container {
        padding: 60px 40px;
        gap: 60px;
    }

    .ct-btn-sel {
        height: 80px;
        padding: 0 clamp(16px, 2.78vw, 40px);        /* 작은 태블릿 여백 축소(min 16 / max 40) */
        border-radius: clamp(12px, 1.39vw, 20px);    /* min 12(모바일) / max 20(데스크탑) */
        gap: clamp(8px, 0.83vw, 12px);               /* 라디오↔텍스트 간격도 축소 */
        font-size: clamp(18px, 1.67vw, 24px);        /* min 18(모바일) / max 24(데스크탑) */
    }

    .ct-btn-sel::after {
        width: clamp(24px, 2.22vw, 32px);            /* 라디오 크기: min 24(모바일) / max 32(데스크탑) */
        height: clamp(24px, 2.22vw, 32px);
    }

    .ct-support-section {
        padding: 60px 40px;
    }

    .ct-support-card {
        gap: 16px;
    }

    .ct-support-icon {
        width: 90px;
        height: 90px;
    }

    .ct-support-title {
        font-size: 24px;
    }

    .ct-support-desc {
        font-size: 16px;
    }

    .ct-checkbox-label {
        font-size: 18px;
    }

    /* 검수 0630: 태블릿 텍스트 클램프 (768=모바일 최소 → 1440=데스크탑 최대) */
    .ct-item-title {
        font-size: clamp(26px, calc(26px + 10 * (100vw - 768px) / 672), 36px);
    }

    .ct-field-label {
        font-size: clamp(18px, calc(18px + 6 * (100vw - 768px) / 672), 24px);
    }

    .ct-required {
        font-size: clamp(18px, calc(18px + 2 * (100vw - 768px) / 672), 20px);
    }

    .ct-input,
    .ct-textarea {
        font-size: clamp(18px, calc(18px + 4 * (100vw - 768px) / 672), 22px);
    }

    .ct-email-select-current {
        font-size: clamp(18px, calc(18px + 4 * (100vw - 768px) / 672), 22px);
    }

    /* 검수 0630: 태블릿 이메일 — 레이블 상단 정렬 + '@' 표시 */
    .ct-field:has(.ct-email-wrap) {
        align-items: flex-start;
    }

    .ct-email-wrap {
        flex-wrap: wrap;
    }

    .ct-email-local {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .ct-at {
        display: flex;
        font-size: clamp(20px, calc(20px + 2 * (100vw - 768px) / 672), 22px);
    }

    .ct-email-domain-wrap {
        flex: 1 1 100%;
        width: 100%;
    }
}


/* ══════════════════════════════════════
   반응형 — 모바일 (~ 767px)
   GM frame: 360px, padding l=16 r=16
══════════════════════════════════════ */
@media (max-width: 767px) {

    /* GM: Page Header — pb=30, fs=30, center */
    .ct-page-header {
        padding: 0;
        gap: 20px;
        align-items: center;
    }

    .ct-page-title {
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        height: 54px;
        margin-top: 20px;
        margin-bottom: 30px;
        line-height: 1.4;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* GM: container — pt=40, pb=40, pl=16, pr=16, gap=60 */
    .ct-container {
        padding: 40px 16px;
        gap: 60px;
    }

    /* GM: item — max-width 해제, gap=30 */
    .ct-item {
        max-width: 100%;
        gap: 30px;
    }

    .ct-item--full {
        gap: 30px;
    }

    /* GM: item title — fs=26, fw=700 */
    .ct-item-title {
        font-size: 24px; /* 검수 0729: 모바일 문의하기 섹션 타이틀 26→24 (Figma 초록 딱지) */
        font-weight: 700;
    }

    /* GM: 카테고리 버튼 — 1col vertical, gap=10 */
    .ct-btn-grid--4,
    .ct-btn-grid--3 {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* GM: 각 버튼 — h=64, radius=12, fs=18, border=1px */
    /* GM Figma(node 1648:9288): h64, px20, radius12, 18 Bold, 아이콘 24px, gap10 */
    .ct-btn-sel {
        height: 64px;
        border-radius: 12px;
        font-size: 18px;
        line-height: 1.6;
        padding: 0 20px;
        border-width: 1px;
    }

    .ct-btn-sel::after {
        width: 24px;
        height: 24px;
        background-image: url(../assets/radio-donut-off-m.svg);
    }

    .ct-btn-sel.is-active::after {
        background-image: url(../assets/radio-donut-on-m.svg);
    }

    /* GM: 문의자 정보 con — gap=20, bg=none */
    .ct-info-con {
        gap: 20px;
        background: none;
        padding: 0;
        border-radius: 0;
    }

    /* GM: Text Field — VERTICAL (label 위, input 아래), gap=8 */
    .ct-field {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 8px;
    }

    .ct-field:has(.ct-email-wrap) {
        height: auto;
        align-items: flex-start;
    }

    .ct-field:has(.ct-email-wrap) .ct-field-title {
        padding-top: 0;
    }

    .ct-field--textarea,
    .ct-field--attach {
        align-items: flex-start;
    }

    /* GM: title — h=44, fs=18 */
    .ct-field-title {
        width: auto;
        min-width: unset;
        height: 44px;
        padding-top: 0;
        align-items: center;
    }

    .ct-field--textarea .ct-field-title,
    .ct-field--attach .ct-field-title {
        padding-top: 0;
        height: 44px;
        align-items: center;
    }

    .ct-field-label {
        font-size: 18px;
    }

    /* GM: Input 래퍼 — 100% */
    .ct-field-input-wrap {
        width: 100%;
    }

    /* GM: input — h=48, pl=16, pr=16, radius=8, fs=18 */
    .ct-input {
        height: 48px;
        padding: 0 16px;
        border-radius: 8px;
        font-size: 18px;
    }

    /* GM: textarea — radius=8 */
    .ct-textarea {
        font-size: 18px;
        border-radius: 8px;
        height: 246px;
    }

    /* GM: 문의내용 con — gap=20 */
    .ct-content-con {
        gap: 20px;
    }

    /* GM: 이메일 — 확실하게 3줄: Row1=이메일주소 / Row2=[@ 도메인] / Row3=select */
    .ct-email-wrap {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 12px;
        row-gap: 12px;
    }

    .ct-email-local {
        grid-column: 1 / -1;
        grid-row: 1;
        border-radius: 8px;
        border: 1px solid #A7A7A7;
        height: 48px;
        padding: 0 24px;
    }

    /* domain-wrap 해제 → 자식(도메인 input·select)이 grid에 직접 배치 */
    .ct-email-domain-wrap {
        display: contents;
    }

    /* Row2 col1: @ */
    .ct-at {
        grid-column: 1;
        grid-row: 2;
        display: flex;
        align-items: center;
        align-self: center;
        height: 48px;
        width: auto;
        background: none;
        border: none;
        font-size: 20px;
        color: #1B1B1B;
    }

    /* Row2 col2: 도메인 직접입력 */
    .ct-email-domain {
        grid-column: 2;
        grid-row: 2;
        height: 48px;
        width: 100%;
        border: 1px solid #A7A7A7;
        border-radius: 8px;
        font-size: 18px;
        padding: 0 16px;
        flex: none;
    }

    /* Row3: 도메인 select — @ 폭만큼 들여쓰기(col2, 도메인 입력과 정렬) */
    .ct-email-select {
        grid-column: 2;
        grid-row: 3;
        height: 48px;
        width: 100%;
        border-radius: 8px;
        font-size: 18px;
        padding: 0 16px;
        min-width: unset;
        flex: none;
    }

    .ct-email-select-list li {
        font-size: 18px;
        padding: 10px 16px;
    }

    /* GM: 파일선택 버튼 — w=88, h=48, fs=16 */
    .ct-file-btn {
        width: 88px;
        height: 48px;
        font-size: 16px;
        font-weight: 400;
        border-radius: 10px;
        white-space: nowrap;
    }

    /* GM: drop area — h=200, radius=8 */
    .ct-drop-area {
        height: 200px;
        border-radius: 8px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='8' ry='8' fill='none' stroke='%23A7A7A7' stroke-width='1' stroke-dasharray='4%2C4' stroke-dashoffset='0'/%3E%3C/svg%3E");
    }

    .ct-drop-text {
        font-size: 16px;
        padding: 0 16px;
        text-align: center;
    }

    .ct-attach-notes li {
        font-size: 16px;
    }

    /* GM: 이메일 드롭다운 리스트 항목 */
    .ct-email-select-list li {
        height: 48px;
        font-size: 18px;
        padding: 0 16px;
    }

    /* GM: 파일 첨부 상태 모바일 */
    .ct-drop-header {
        font-size: 16px;
    }

    .ct-file-name {
        font-size: 16px;
    }

    .ct-file-size {
        font-size: 14px;
    }

    /* GM: privacy table — pt=20, pb=20, pl=16, pr=16, radius=16 */
    .ct-privacy-table {
        padding: 20px 16px;
    }

    .ct-privacy-row--head span {
        font-size: 18px;
        line-height: 1.6;
    }

    /* GM: head row — pt=4, pb=4, pl=8, pr=8 */
    .ct-privacy-row--head {
        padding: 4px 8px;
    }

    /* GM: 내용 행 — w=296, pt=8, pb=8, pl=8, pr=0 */
    .ct-privacy-row--body {
        padding: 8px 0 8px 8px;
        margin: 0;
    }

    .ct-privacy-row--body p,
    .ct-privacy-list li {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.6;
    }

    /* GM: 체크박스 — gap=8, box=40×40 */
    .ct-checkbox-wrap {
        gap: 8px;
    }

    .ct-checkbox-box {
        width: 20px;
        height: 20px;
        border-radius: 4px;
    }

    .ct-checkbox-label {
        font-size: 18px;
    }

    /* GM: 버튼 섹션 — pt=20, pb=20, pl=20, pr=20 */
    .ct-btn-section {
        padding: 20px 20px;
    }

    /* GM: btn — w=100%, h=56, fs=16, radius=10 */
    .ct-submit-btn {
        width: 100%;
        height: 56px;
        font-size: 16px;
        border-radius: 10px;
    }

    /* GM: 고객지원 — pt=40, pb=40, pl=16, pr=16 */
    .ct-support-section {
        padding: 40px 16px;
    }

    /* GM: card — w=328, h=208, radius=16, pt=24, pb=24, pl=10, pr=10, gap=50 */
    .ct-support-card {
        border-radius: 16px;
        padding: 24px 10px;
        flex-direction: column;
        gap: 0;
        height: auto;
    }

    /* GM: icon — 80×80 */
    .ct-support-icon {
        width: 80px;
        height: 80px;
    }

    .ct-support-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0 6px;
        width: 100%;
    }

    .ct-support-texts {
        gap: 12px;
        width: 100%;
    }

    /* GM: title — fs=24, Bold, color=#000
       "동국산업에 대해 \n더 알고 싶으신가요?" */
    .ct-support-title {
        font-size: 24px;
    }

    /* 모바일: 줄바꿈 표시 */
    .ct-mo-br {
        display: inline;
    }

    /* GM: desc — fs=16, lh=1.6 */
    .ct-support-desc {
        font-size: 16px;
    }

    /* GM: 화살표 숨김 */
    .ct-support-arrow {
        display: none;
    }
}

/* ══════════════════════════════════════
   유효성 검사 팝업
══════════════════════════════════════ */
.ct-alert-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-alert-box {
    background: #fff;
    border-radius: 16px;
    padding: 40px 32px 32px;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* 검수 0730: 문구 좌측 정렬 위해 stretch */
    gap: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    text-align: left; /* 검수 0730: 팝업 문구 좌측 정렬 */
}

.ct-alert-msg {
    font-size: 18px;
    font-weight: 500;
    color: #1b1b1b;
    line-height: 1.6;
    margin: 0;
    text-align: left; /* 검수 0730: 문구 좌측 정렬 */
}

.ct-alert-btns {
    display: flex;
    gap: 10px;
    width: 100%;
}

.ct-alert-btn-confirm {
    flex: 1;
    height: 52px;
    background: #111111; /* 검수 0730: 팝업 버튼 오렌지→블랙 */
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.ct-alert-btn-cancel {
    flex: 1;
    height: 52px;
    background: #fff;
    color: #111111; /* 검수 0730: 팝업 버튼 오렌지→블랙 */
    border: 1px solid #111111;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

@media (max-width: 767px) {
    .ct-alert-box {
        max-width: calc(100% - 32px);
        padding: 32px 20px 24px;
    }
    .ct-alert-msg {
        font-size: 16px;
    }
}