@charset "UTF-8";
/* ============================================================
   SURGINUS — 문의 페이지 (INQUIRY) 데스크톱 스타일
   ※ @media 는 m.inquiry.css 에 작성한다.
   ============================================================ */

/* ── hero ───────────────────────────────────────────────── */
.qhero {
    position: relative;
    height: 1080px;
    overflow: hidden;
}
.qhero__bg { position: absolute; inset: 0; }
.qhero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    opacity: .44;
}
.qhero .container { position: relative; height: 100%; width: var(--w-header); }
.qhero__title {
    position: absolute;
    left: 1px;
    top: 776px;
    font-size: 60px;
    font-weight: 500;
    line-height: 1.2;
}

/* ── form 영역 ──────────────────────────────────────────── */
.qform { padding-top: 150px; padding-bottom: 180px; }
.qform__inner { display: flex; }

/* 왼쪽 안내 */
.qform__intro { width: 440px; flex: none; }
.qform__title { font-size: 50px; font-weight: 500; line-height: 50px; }
.qform__desc { margin-top: 27px; font-size: 20px; line-height: 30px; }

/* 오른쪽 폼 */
.qform__form { width: 735px; margin-left: 45px; }

.qfield + .qfield { margin-top: 55px; }
.qfield__label {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
}
.qfield__req { color: #c8162e; }

.qfield__input {
    display: block;
    width: 100%;
    height: 67px;
    margin-top: 9px;
    padding: 20px;
    background: #f8f8f8;
    border: 1px solid #dadada;
    border-radius: 6px;
    font-family: inherit;
    font-stretch: inherit;
    font-size: 18px;
    line-height: 27px;
    color: #000;
    transition: border-color .2s, background-color .2s;
}
.qfield__input::placeholder { color: #848484; opacity: 1; }
.qfield__input:focus {
    outline: none;
    background: #fff;
    border-color: var(--c-navy);
}
.qfield__input--area { height: 260px; resize: none; }   /* 시안에 리사이즈 핸들이 없다 */

/* ── 문의유형 드롭다운 ─────────────────────────────────────
 네이티브 select 는 옵션 목록을 꾸밀 수 없어 버튼 + ul 로 만든다.
 상자 치수·색은 .qfield__input 과 같게 맞춰 다른 입력칸과 한 줄로 보이게 한다.
 움직이는 값은 transform·opacity 로만 둔다 (MOTION.md §5) */
.qselect { position: relative; }
.qselect__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    height: 67px;
    margin-top: 9px;
    padding: 20px;
    background: #f8f8f8;
    border: 1px solid #dadada;
    border-radius: 6px;
    font-family: inherit;
    font-stretch: inherit;
    font-size: 18px;
    line-height: 27px;
    color: #848484;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
.qselect__btn:hover { border-color: #b9b9b9; }
.qselect__btn:focus-visible,
.qselect.is-open .qselect__btn { outline: none; background: #fff; border-color: var(--c-navy); }
/* 값을 고르기 전에는 placeholder 색, 고르면 본문색 */
.qselect.is-picked .qselect__btn { color: #000; }
.qselect__value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.qselect__caret {
    flex: none;
    width: 9px;
    height: 9px;
    margin: -4px 4px 0 0;
    border-right: 2px solid #848484;
    border-bottom: 2px solid #848484;
    transform: rotate(45deg);
    transition: transform .25s ease, border-color .2s;
}
.qselect.is-open .qselect__caret { margin-top: 4px; transform: rotate(-135deg); border-color: var(--c-navy); }

.qselect__list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 5;
    padding: 6px;
    background: #fff;
    border: 1px solid #dadada;
    border-radius: 6px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .13);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.qselect.is-open .qselect__list { opacity: 1; visibility: visible; transform: translateY(0); }

.qselect__option {
    padding: 13px 14px;
    border-radius: 4px;
    font-size: 17px;
    line-height: 26px;
    color: #333;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, background-color .15s, color .15s;
}
/* 열릴 때 항목이 차례로 내려온다 — 목록이 길어져도 4번째부터는 같은 지연을 쓴다 */
.qselect.is-open .qselect__option { opacity: 1; transform: translateY(0); }
.qselect.is-open .qselect__option:nth-child(1) { transition-delay: .05s; }
.qselect.is-open .qselect__option:nth-child(2) { transition-delay: .1s; }
.qselect.is-open .qselect__option:nth-child(3) { transition-delay: .15s; }
.qselect.is-open .qselect__option:nth-child(n+4) { transition-delay: .2s; }

.qselect__option:hover,
.qselect__option.is-active { background: #f1f5fb; color: var(--c-navy); }
.qselect__option[aria-selected="true"] { background: #e9eff8; color: var(--c-navy); font-weight: 700; }

/* 값 전송·required 검사를 맡는 진짜 select — 보이지 않지만 포커스는 가능해야
 브라우저 기본 경고 말풍선이 이 자리에 뜬다 (display:none 이면 검사가 막힌다) */
.qselect__native {
    position: absolute;
    left: 20px;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* 개인정보 수집 동의 */
.qagree { display: flex; align-items: center; margin-top: 20px; }
.qagree__check {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid #000;
    border-radius: 0;
    accent-color: var(--c-navy);
    cursor: pointer;
}
.qagree__label { margin-left: 6px; font-size: 16px; line-height: 27px; cursor: pointer; }
.qagree__link {
    margin-left: 8px;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 16px;
    line-height: 27px;
    color: #a3a3a3;
    text-decoration: underline;
    cursor: pointer;
}
.qagree__link:hover { color: var(--c-navy); }

/* 전송 버튼 */
.qsend {
    display: block;
    width: 198px;
    height: 67px;
    margin-top: 50px;
    border-radius: 33.5px;
    background: var(--c-navy);
    color: #fff;
    font-size: 18px;
    line-height: 27px;
    transition: background-color .2s, transform .2s;
}
.qsend:hover { background: #33507f; transform: translateY(-2px); }
.qsend:disabled { background: #8a97ae; transform: none; cursor: default; }

/* 스팸 봇용 허니팟 — display:none 은 일부 봇이 건너뛰므로 화면 밖으로 밀어낸다 */
.qhoney { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 전송 결과 안내 — 버튼 아래에 둬야 문구가 떠도 버튼 위치가 안 흔들린다 */
.qform__msg { margin-top: 18px; font-size: 16px; line-height: 27px; }
.qform__msg:empty  { margin: 0; }
.qform__msg.is-ok  { color: var(--c-navy); }
.qform__msg.is-err { color: #d0342c; }

/* 폼 아래 여백은 섹션 padding 으로 잡으므로 푸터 기본 여백은 해제한다 */
/* ── 개인정보 수집·이용 동의 모달 ────────────────────────
 <dialog> 를 카드 자체로 쓴다 — 포커스 트랩·Esc 닫기·백드롭을 브라우저가 처리한다 */
.pp {
    width: 720px;
    max-width: calc(100% - 40px);
    max-height: 84vh;
    margin: auto;          /* UA 기본값이 브라우저마다 달라 가운데 정렬을 명시한다 */
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
    color: var(--c-text);
    overflow: hidden;
}
.pp::backdrop { background: rgba(10, 16, 30, .55); }

.pp__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 34px 40px 22px;
    border-bottom: 1px solid var(--c-line);
}
.pp__title { font-size: 26px; font-weight: 700; line-height: 34px; letter-spacing: -.3px; }
/* 닫기 버튼 — 시안에 아이콘이 없어 선 두 개로 그린다 */
.pp__close {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    margin: -2px -8px 0 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.pp__close span {
    position: absolute;
    left: 6px;
    top: 15px;
    width: 20px;
    height: 2px;
    background: var(--c-text);
    transition: background .2s;
}
.pp__close span:first-child { transform: rotate(45deg); }
.pp__close span:last-child  { transform: rotate(-45deg); }
.pp__close:hover span { background: var(--c-navy); }

.pp__body {
    max-height: calc(84vh - 100px);
    padding: 26px 40px 36px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.pp__lead { font-size: 16px; line-height: 27px; color: var(--c-gray); }

.pp__caption { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pp__table {
    width: 100%;
    margin-top: 22px;
    border-top: 2px solid var(--c-navy);
    border-collapse: collapse;
}
.pp__table th,
.pp__table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-line);
    font-size: 15px;
    line-height: 25px;
    text-align: left;
    vertical-align: top;
}
.pp__table th { width: 170px; background: #f5f6f8; font-weight: 700; }
.pp__table td { color: var(--c-gray); }

.pp__sec { margin-top: 26px; }
.pp__sec-title { font-size: 17px; font-weight: 700; line-height: 26px; }
.pp__text { margin-top: 8px; font-size: 15px; line-height: 26px; color: var(--c-gray); }

.qform + .footer { margin-top: 0; }