@charset "utf-8";
/* ------------------------------------------------------------------
 * inquiry.css — IPR 컨설팅 문의 폼
 *
 * 이 파일은 /bbs/inquiry 에서만 로드한다. 클래스는 전부 .iq- 접두사를 쓰며
 * sub.css 의 기존 문의 폼 규칙(.form-wrap.inquiry-write …)과 겹치지 않는다.
 * (기존 규칙은 다른 문의 페이지가 계속 사용하므로 건드리지 않았다)
 * ------------------------------------------------------------------ */

/* 서브페이지 타이틀(.page-head)이 좌측 정렬이므로 폼도 좌측에 맞춘다.
   가운데 정렬하면 타이틀과 시작점이 어긋나 보인다. */
.iq-wrap{ max-width: 1440px; margin: 0; }

/* ── 2단: 좌측 폼 / 우측 비주얼+연락처 ──────────────────────── */
.iq-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; }
.iq-main{ min-width: 0; }
.iq-side{ position: sticky; top: 120px; }

/* 원본이 거의 정사각(480x475)이라 세로로 길게 잘라 쓴다 */
.iq-visual{ overflow: hidden; border-radius: 4px; background: #f2f2f2; aspect-ratio: 7 / 10; }
.iq-visual img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

.iq-card{
    margin-top: 20px; padding: 26px 24px;
    border: 1px solid #ececec; border-radius: 4px; background: #fafafa;
}
.iq-card h4{ margin: 0 0 18px; font-size: 16px; font-weight: 600; color: #222; }
.iq-card ul{ margin: 0; padding: 0; list-style: none; }
.iq-card li{ display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.6; color: #444; }
.iq-card li + li{ margin-top: 16px; }
/* 오시는 길(.location-ic)과 같은 이미지 아이콘 */
.iq-card .iq-ic{ flex: 0 0 auto; width: 15px; height: auto; margin-top: 3px; }
.iq-card li span{ min-width: 0; }
.iq-card li em{ display: inline-block; margin-top: 3px; font-style: normal; font-size: 13px; color: #999; }
.iq-card li a{ color: #444; }
.iq-card li a:hover{ color: #c30010; }
.iq-card .iq-card-note{
    margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #e8e8e8;
    font-size: 13px; line-height: 1.65; color: #8c8c8c;
}

/* ── 안내 문구 ─────────────────────────────────────────────── */
.iq-intro{ margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid #ededed; }
.iq-intro p{ margin: 0; font-size: 17px; line-height: 1.75; color: #666; }

/* ── 필드 그리드 ───────────────────────────────────────────── */
.iq-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px 30px; }
.iq-field{ display: flex; flex-direction: column; min-width: 0; }
.iq-field--full{ grid-column: 1 / -1; }

/* 라벨 = [제목(+필수표시)] ... [글자수]. 양끝 정렬이므로 제목과 * 는
   반드시 같은 span 으로 묶어야 한다. 안 묶으면 * 가 오른쪽 끝으로 밀린다. */
.iq-label{
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 0 0 9px; font-size: 15px; font-weight: 600; color: #222; line-height: 1.4;
}
.iq-label .iq-req{ color: #c30010; margin-left: 3px; }
.iq-count{ font-size: 12px; font-weight: 400; color: #aaa; letter-spacing: .02em; }

/* ── 입력 ─────────────────────────────────────────────────── */
.iq-input, .iq-textarea{
    width: 100%; height: 54px; padding: 0 16px;
    border: 1px solid #e0e0e0; border-radius: 4px; background: #fff;
    font-size: 16px; color: #222; font-family: inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.iq-textarea{ height: auto; min-height: 220px; padding: 16px; line-height: 1.75; resize: vertical; }
.iq-input::placeholder, .iq-textarea::placeholder{ color: #b5b5b5; }
.iq-input:focus, .iq-textarea:focus{
    outline: none; border-color: #c30010; box-shadow: 0 0 0 3px rgba(195, 0, 16, .10);
}

/* ── 첨부파일 ─────────────────────────────────────────────── */
.iq-file input[type="file"]{ display: none; }
.iq-file-drop{
    display: flex; align-items: center; gap: 12px;
    height: 54px; padding: 0 16px; cursor: pointer;
    border: 1px dashed #d4d4d4; border-radius: 4px; background: #fafafa;
    transition: border-color .18s ease, background-color .18s ease;
}
.iq-file-drop:hover{ border-color: #c30010; background: #fff; }
.iq-file-drop > i{ flex: none; font-size: 16px; color: #c30010; }
.iq-file-name{
    flex: 1 1 auto; min-width: 0; font-size: 15px; color: #999;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iq-file-name.is-set{ color: #222; }
.iq-file-clear{
    flex: none; display: none; padding: 4px 6px; border: 0; background: none;
    font-size: 19px; line-height: 1; color: #aaa; cursor: pointer;
}
.iq-file-clear:hover{ color: #c30010; }
.iq-file-clear.is-on{ display: block; }
.iq-file-hint{ margin-top: 8px; font-size: 12px; color: #aaa; line-height: 1.5; }

/* ── 개인정보처리방침 ──────────────────────────────────────── */
.iq-privacy{
    height: 240px; overflow-y: auto; padding: 24px 26px;
    border: 1px solid #e0e0e0; border-radius: 4px; background: #fafafa;
}
.iq-privacy p{ margin: 0; font-size: 14px; line-height: 1.9; color: #666; }
.iq-privacy::-webkit-scrollbar{ width: 10px; background: #f0f0f0; }
.iq-privacy::-webkit-scrollbar-track{ background: transparent; }
.iq-privacy::-webkit-scrollbar-thumb{ background: #cacaca; border-radius: 5px; }
.iq-privacy::-webkit-scrollbar-thumb:hover{ background: #c30010; }

.iq-agree{ margin-top: 18px; }
.iq-agree label{
    display: inline-flex; align-items: center; gap: 10px; margin: 0;
    font-size: 15px; font-weight: 400; color: #444; cursor: pointer;
}
.iq-agree input[type="checkbox"]{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.iq-agree .iq-box{
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border: 1px solid #cfcfcf; border-radius: 3px; background: #fff;
    transition: background-color .15s ease, border-color .15s ease;
}
.iq-agree .iq-box::after{
    content: ''; width: 5px; height: 10px; margin-top: -2px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0); transition: transform .15s ease;
}
.iq-agree input:checked + .iq-box{ background: #c30010; border-color: #c30010; }
.iq-agree input:checked + .iq-box::after{ transform: rotate(45deg) scale(1); }
.iq-agree input:focus-visible + .iq-box{ box-shadow: 0 0 0 3px rgba(195, 0, 16, .18); }

/* ── 제출 ─────────────────────────────────────────────────── */
.iq-submit-wrap{ margin: 48px 0 90px; text-align: center; }
.iq-submit{
    min-width: 240px; height: 58px; padding: 0 40px;
    border: 0; border-radius: 4px; background: #c30010;
    color: #fff; font-size: 17px; font-weight: 600; font-family: inherit; letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.iq-submit:hover{ background: #a50010; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(195, 0, 16, .24); }
.iq-submit:active{ transform: translateY(0); box-shadow: none; }

/* ── 오류 안내 ────────────────────────────────────────────── */
.iq-error{
    margin: 0 0 26px; padding: 16px 20px;
    border: 1px solid #f0c6ca; border-left: 3px solid #c30010; border-radius: 4px;
    background: #fdf4f5; color: #a5000e; font-size: 15px; line-height: 1.6;
}

/* ── 접수 완료 ────────────────────────────────────────────── */
.iq-done{ padding: 90px 20px 110px; text-align: center; }
.iq-done .iq-done-icon{
    display: inline-flex; align-items: center; justify-content: center;
    width: 74px; height: 74px; margin-bottom: 26px;
    border-radius: 50%; background: #c30010; color: #fff; font-size: 30px;
}
.iq-done h3{ margin: 0 0 12px; font-size: 26px; font-weight: 600; color: #222; }
.iq-done p{ margin: 0 0 32px; font-size: 16px; line-height: 1.75; color: #777; }
.iq-done .iq-again{
    display: inline-block; min-width: 180px; height: 52px; line-height: 50px; padding: 0 28px;
    border: 1px solid #d5d5d5; border-radius: 4px; color: #333; font-size: 15px;
    transition: border-color .18s ease, color .18s ease;
}
.iq-done .iq-again:hover{ border-color: #c30010; color: #c30010; }

/* ── 좁은 데스크톱 / 태블릿 ───────────────────────────────── */
@media (max-width: 1199px) {
    .iq-layout{ grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
}
@media (max-width: 991px) {
    /* 우측 칼럼을 폼 위로 올리고 이미지+연락처를 나란히 */
    .iq-layout{ grid-template-columns: 1fr; gap: 30px; }
    .iq-side{ position: static; order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
    .iq-visual{ aspect-ratio: auto; }
    .iq-visual img{ height: 190px; }
    .iq-card{ margin-top: 0; }
}

/* ── 모바일 ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .iq-side{ grid-template-columns: 1fr; gap: 14px; }
    .iq-visual img{ height: 150px; }
    .iq-card{ padding: 20px 18px; }
    .iq-card h4{ margin-bottom: 14px; font-size: 15px; }
    .iq-card li{ font-size: 13px; }

    .iq-intro{ margin-bottom: 28px; padding-bottom: 22px; }
    .iq-intro p{ font-size: 15px; }

    .iq-grid{ grid-template-columns: 1fr; gap: 18px; }
    .iq-label{ font-size: 14px; margin-bottom: 7px; }
    .iq-input, .iq-file-drop{ height: 48px; font-size: 15px; }
    .iq-textarea{ min-height: 170px; font-size: 15px; padding: 14px; }
    .iq-file-name{ font-size: 14px; }

    .iq-privacy{ height: 180px; padding: 18px; }
    .iq-privacy p{ font-size: 13px; line-height: 1.8; }
    .iq-agree label{ font-size: 14px; align-items: flex-start; }
    .iq-agree .iq-box{ margin-top: 1px; }

    .iq-submit-wrap{ margin: 34px 0 60px; }
    .iq-submit{ width: 100%; min-width: 0; height: 54px; font-size: 16px; padding: 0; }

    .iq-done{ padding: 60px 16px 80px; }
    .iq-done .iq-done-icon{ width: 62px; height: 62px; font-size: 26px; margin-bottom: 20px; }
    .iq-done h3{ font-size: 21px; }
    .iq-done p{ font-size: 15px; }
}