@charset "utf-8";

#sub-inquiry {
    background: #f5f7f9;
}

#sub-inquiry .inob-sec {
    padding: clamp(72px, 8vw, 112px) 0;
}

#sub-inquiry .inob-inquiry-layout {
    display: grid;
    grid-template-columns: minmax(300px, .76fr) minmax(0, 1.24fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

#sub-inquiry .inob-inquiry-copy {
    position: sticky;
    top: 110px;
    padding: clamp(30px, 4vw, 46px);
    background: var(--inob-navy);
    color: #fff;
}

#sub-inquiry .inob-inquiry-copy .inob-sec-head {
    margin-bottom: 34px;
}

#sub-inquiry .inob-inquiry-copy .inob-sec-head h3 {
    color: #fff;
}

#sub-inquiry .inob-inquiry-copy .inob-sec-head p {
    color: rgba(255,255,255,.72);
}

#sub-inquiry .inob-inquiry-notes {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255,255,255,.18);
}

#sub-inquiry .inob-inquiry-notes li {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
}

#sub-inquiry .inob-inquiry-notes strong,
#sub-inquiry .inob-inquiry-notes span {
    display: block;
}

#sub-inquiry .inob-inquiry-notes strong {
    color: #fff;
    font-weight: 800;
}

#sub-inquiry .inob-inquiry-notes span {
    margin-top: 6px;
    color: rgba(255,255,255,.68);
    line-height: 1.7;
}

#sub-inquiry .inob-inquiry-form {
    padding: clamp(26px, 4vw, 44px);
    border: 1px solid var(--inob-line);
    background: #fff;
}

#sub-inquiry .inob-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

#sub-inquiry .inob-field {
    display: grid;
    gap: 9px;
    margin-bottom: 22px;
}

#sub-inquiry .inob-field label {
    color: var(--inob-ink);
    font-size: 14px;
    font-weight: 800;
}

#sub-inquiry .inob-field label span {
    color: #007a30;
}

/*
   테마 gw.css 는 input[type="text"] 에만 `all: unset` 과 height 55px 을 건다.
   그래서 text 칸과 email 칸의 높이 · 테두리가 서로 달라진다. 여기서는
   타입과 무관하게 같은 값을 명시해 한 줄로 맞춘다.
*/
#sub-inquiry .inob-field input,
#sub-inquiry .inob-field select,
#sub-inquiry .inob-field textarea {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    min-height: 52px;
    padding: 13px 15px;
    border: 1px solid var(--inob-line);
    border-radius: var(--inob-r-sm);
    background: #f8fafb;
    color: var(--inob-ink);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
}

/* 셀렉트인 줄 알아보게 오른쪽에 화살표를 깐다 */
#sub-inquiry .inob-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2346505c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

#sub-inquiry .inob-field textarea {
    height: auto;
    min-height: 190px;
    resize: vertical;
}

#sub-inquiry .inob-field input:focus,
#sub-inquiry .inob-field select:focus,
#sub-inquiry .inob-field textarea:focus {
    outline: 3px solid rgba(0, 160, 64, .18);
    outline-offset: 0;
    border-color: #007a30;
    background: #fff;
}

#sub-inquiry .inob-agree {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 16px 18px;
    border: 1px solid var(--inob-line);
    background: #f8fafb;
    color: var(--inob-body);
    font-size: 14px;
    line-height: 1.6;
}

/*
   테마가 체크박스를 커스텀 마크업(.check-label)으로 그리도록 잡아둔 탓에
   여기 기본 체크박스가 보이지 않는다. 네이티브 표시를 되살린다.
*/
#sub-inquiry .inob-agree input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    position: static;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    opacity: 1;
    accent-color: #007a30;
    cursor: pointer;
}

#sub-inquiry .inob-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 30px;
}

#sub-inquiry .inob-form-actions .inob-btn {
    min-width: 150px;
}

@media (max-width: 1024px) {
    #sub-inquiry .inob-inquiry-layout {
        grid-template-columns: 1fr;
    }

    #sub-inquiry .inob-inquiry-copy {
        position: static;
    }

    #sub-inquiry .inob-form-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    #sub-inquiry .inob-form-grid {
        grid-template-columns: 1fr;
    }
}