/* ==========================================================================
   (주)투어수다 - 맞춤여행 요청 폼 (shop/suda_quote_form_custom.inc.php). SUDA CUSTOM (2026-10-24), 신규 파일.
   PC: 왼쪽 항목명 / 오른쪽 입력칸 표 형태, 768px 이하: 항목명 위 입력칸 아래 세로 배치.
   색은 사이트 공통 변수(--suda-blue 등, css/gnb.css), 체크박스·라디오는 .suda-form-check
   ========================================================================== */

/* #wrapper:has(#sudaQuoteCustom){ background: #fff; } - 2026-10-24: 페이지 배경은 css/default_shop.css(body·#wrapper) 한 곳에서 관리 */

.sqc{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0; /* 2026-10-24: 안쪽 여백 없앰 (원래 56px 24px 96px). 태블릿·모바일 좌우는 아래 margin */
    box-sizing: border-box;
    color: var(--suda-gray-900);
}
.sqc *, .sqc *::before, .sqc *::after{ box-sizing: border-box; }

.sqc-head{ margin-bottom: 28px; }
.sqc-title{ margin: 0 0 8px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.sqc-lead{ margin: 0; font-size: 15px; color: var(--suda-gray-500); }
.sqc-ref{ margin-bottom: 16px; padding: 14px 18px; border-radius: 12px; background: #eef0ff; font-size: 14px; }
.sqc-ref a{ margin-left: 8px; color: var(--suda-blue); font-weight: 600; }

/* ---------- 표 ---------- */
.sqc-table{ border-top: 2px solid var(--suda-gray-900); }
.sqc-row{
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    border-bottom: 1px solid var(--suda-gray-200);
}
.sqc-row--pair{ grid-template-columns: 1fr 1fr; }
.sqc-row--pair > .sqc-cell{ display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.sqc-row--pair > .sqc-cell + .sqc-cell{ grid-template-columns: 140px minmax(0, 1fr); }
.sqc-th{
    display: flex;
    align-items: center;
    padding: 18px 20px;
    background: var(--suda-gray-50);
    font-size: 15px;
    font-weight: 600;
    color: var(--suda-gray-700);
    line-height: 1.4;
}
.sqc-th em{ font-style: normal; color: var(--suda-blue); margin-left: 2px; }
.sqc-td{ padding: 14px 20px; min-width: 0; }

/* ---------- 입력칸 ---------- */
.sqc-input, .sqc-select, .sqc-textarea{
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--suda-gray-200);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--suda-gray-900);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sqc-input{ width: 240px; max-width: 100%; }
.sqc-w-lg{ width: 360px; }
.sqc-w-full{ width: 100%; }
.sqc-select{
    min-width: 140px;
    padding-right: 36px;
    -webkit-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
    cursor: pointer;
}
.sqc-select:disabled{ background-color: var(--suda-gray-50); color: var(--suda-gray-400); cursor: not-allowed; }
.sqc-textarea{ width: 100%; height: auto; min-height: 180px; padding: 14px; line-height: 1.6; resize: vertical; }
.sqc-input:focus, .sqc-select:focus, .sqc-textarea:focus{ outline: none; border-color: var(--suda-blue); box-shadow: 0 0 0 3px rgba(65, 84, 255, .12); }
.sqc-input:disabled{ background: var(--suda-gray-50); color: var(--suda-gray-400); }
.sqc-input[readonly]{ background: var(--suda-gray-50); color: var(--suda-gray-700); font-weight: 600; }
.sqc-input::placeholder, .sqc-textarea::placeholder{ color: var(--suda-gray-400); }

.sqc-hint{ margin: 8px 0 0; font-size: 13px; color: var(--suda-gray-500); line-height: 1.5; }
.sqc-err{ margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--suda-red-dark); }
.is-error .sqc-input, .is-error .sqc-select, .is-error .sqc-date{ border-color: var(--suda-red); }

.sqc-inline{ display: flex; flex-wrap: wrap; gap: 8px; }

/* 여행기간 */
.sqc-period{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sqc-period-part{ display: flex; gap: 8px; }
.sqc-period-sep{ color: var(--suda-gray-400); }
.sqc-date{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 180px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--suda-gray-200);
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    cursor: pointer;
}
.sqc-date:focus-visible{ outline: none; border-color: var(--suda-blue); box-shadow: 0 0 0 3px rgba(65, 84, 255, .12); }
.sqc-date.is-empty .sqc-date-text{ color: var(--suda-gray-400); }
.sqc-date svg{ width: 18px; height: 18px; color: var(--suda-blue); flex-shrink: 0; }
.sqc-period .sqc-select{ min-width: 100px; }

/* 목적지 */
.sqc-dest{ display: flex; gap: 8px; }
.sqc-dest-box{ position: relative; }
.sqc-dest-box .sqc-input{ width: 300px; }
.sqc-dest-list{
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    width: 100%;
    min-width: 260px;
    max-height: 280px;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(17, 17, 17, .12);
}
.sqc-dest-list li{ display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; cursor: pointer; }
.sqc-dest-list li strong{ font-size: 14px; font-weight: 600; }
.sqc-dest-list li span{ font-size: 12px; color: var(--suda-gray-500); }
.sqc-dest-list li:hover, .sqc-dest-list li.is-active{ background: #eef0ff; }
.sqc-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.sqc-chips:empty{ display: none; }
.sqc-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 6px 0 14px;
    border-radius: 999px;
    background: #eef0ff;
    color: var(--suda-blue);
    font-size: 14px;
    font-weight: 600;
}
.sqc-chip button{
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--suda-blue);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.sqc-chip button:hover, .sqc-chip button:focus-visible{ background: rgba(65, 84, 255, .15); outline: none; }

/* 버튼 */
.sqc-btn-line{
    height: 46px;
    padding: 0 18px;
    border: 1px solid var(--suda-blue);
    border-radius: 10px;
    background: #fff;
    color: var(--suda-blue);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.sqc-btn-line:hover{ background: #eef0ff; }
.sqc-btn-line:disabled{ border-color: var(--suda-gray-200); color: var(--suda-gray-400); background: var(--suda-gray-50); cursor: not-allowed; }

/* 인원 / 금액 */
.sqc-people{ display: flex; flex-wrap: wrap; gap: 16px; }
.sqc-people-item{ display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.sqc-num{ width: 120px; text-align: right; }
.sqc-money{ display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.sqc-money .sqc-input{ width: 200px; text-align: right; }

/* 체크박스·라디오 */
.sqc-checks{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.sqc-check{ display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.sqc-check--below{ margin-top: 12px; }
.sqc-checks .sqc-input{ width: 220px; }

/* 상세조건 */
.sqc-sub{ padding: 0; }
.sqc-sub-row{
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
}
.sqc-sub-row + .sqc-sub-row{ border-top: 1px solid var(--suda-gray-100); }
.sqc-sub-th{ font-size: 14px; font-weight: 600; color: var(--suda-gray-700); }

/* 개인정보 */
.sqc-pii{ margin: 0; padding: 16px 18px 16px 36px; border-radius: 10px; background: var(--suda-gray-50); font-size: 14px; line-height: 1.8; color: var(--suda-gray-700); }
.sqc-pii-q{ margin: 14px 0 10px; font-size: 15px; font-weight: 600; }
.sqc-pc-br{ display: inline; }

/* 자동등록방지(kcaptcha) */
.sqc #captcha{ margin: 0; }

/* 안내 / 버튼 */
.sqc-notes{ margin: 20px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.8; color: var(--suda-gray-500); }
.sqc-notes li::before{ content: "· "; }
.sqc-actions{ display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.sqc-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 56px;
    padding: 0 28px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}
.sqc-btn--cancel{ background: var(--suda-gray-100); color: var(--suda-gray-700); }
.sqc-btn--cancel:hover{ background: var(--suda-gray-200); }
.sqc-btn--submit{ background: var(--suda-blue); color: #fff; }
.sqc-btn--submit:hover{ background: var(--suda-blue-dark); }
.sqc-btn--submit:disabled{ opacity: .6; cursor: wait; }
.sqc-btn:focus-visible, .sqc-btn-line:focus-visible{ outline: 3px solid rgba(65, 84, 255, .35); outline-offset: 2px; }

/* ---------- 반응형 (px ÷ 기준폭 × 100 = vw) ---------- */
@media screen and (max-width:1024px){
    .sqc{ padding: 0; width: calc(100% - 10vw); margin-left: auto; margin-right: auto; } /* 원래 padding: 5.47vw 2.34vw 9.38vw */
    .sqc-title{ font-size: 2.93vw; }
    .sqc-row{ grid-template-columns: 17.58vw minmax(0, 1fr); }
    .sqc-row--pair > .sqc-cell{ grid-template-columns: 17.58vw minmax(0, 1fr); }
    .sqc-dest-box .sqc-input{ width: 26vw; }
}

@media screen and (max-width:768px){
    .sqc{ padding: 0; } /* 원래 7.29vw 3.12vw 12.5vw */
    .sqc-title{ font-size: 3.91vw; }
    .sqc-lead{ font-size: 1.95vw; }
    /* 세로 배치: 항목명 위, 입력칸 아래 */
    .sqc-row, .sqc-row--pair, .sqc-row--pair > .sqc-cell, .sqc-row--pair > .sqc-cell + .sqc-cell{ grid-template-columns: minmax(0, 1fr); }
    .sqc-row--pair > .sqc-cell + .sqc-cell{ border-top: 1px solid var(--suda-gray-200); }
    .sqc-th{ padding: 1.82vw 2.6vw; font-size: 1.95vw; }
    .sqc-td{ padding: 2.08vw 2.6vw 2.6vw; }
    .sqc-input, .sqc-select, .sqc-date, .sqc-btn-line{ height: 6vw; font-size: 1.95vw; }
    .sqc-input, .sqc-w-lg, .sqc-dest-box .sqc-input{ width: 100%; }
    /* 추천 목록이 버튼을 가리지 않도록 버튼은 입력칸 옆에 둔다 */
    .sqc-dest-box{ flex: 1; min-width: 0; }
    .sqc-btn-line{ padding: 0 2.6vw; }
    .sqc-period{ flex-direction: column; align-items: stretch; }
    .sqc-period-sep{ display: none; }
    .sqc-period-part{ width: 100%; }
    .sqc-date{ flex: 1; width: auto; }
    .sqc-inline > *{ flex: 1 1 100%; }
    .sqc-people{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.56vw; }
    .sqc-people-item{ flex-direction: column; align-items: stretch; gap: 0.78vw; }
    .sqc-num{ width: 100%; }
    .sqc-money{ display: flex; }
    .sqc-money .sqc-input{ flex: 1; width: auto; }
    .sqc-sub-row{ grid-template-columns: minmax(0, 1fr); gap: 1.3vw; padding: 2.08vw 2.6vw; }
    .sqc-checks{ gap: 1.56vw 3.12vw; }
    .sqc-check, .sqc-people-item, .sqc-money{ font-size: 1.95vw; }
    .sqc-checks .sqc-input{ width: 100%; }
    .sqc-hint, .sqc-err, .sqc-notes{ font-size: 1.82vw; }
    .sqc-pii{ font-size: 1.82vw; }
    .sqc-pc-br{ display: none; }
    .sqc-btn{ flex: 1; min-width: 0; height: 7.29vw; font-size: 2.21vw; }
}

@media screen and (max-width:480px){
    .sqc{ padding: 0; } /* 원래 10vw 5vw 16.67vw */
    .sqc-title{ font-size: 6.25vw; }
    .sqc-lead{ font-size: 3.33vw; }
    .sqc-th{ padding: 3.33vw 4.17vw; font-size: 3.54vw; }
    .sqc-td{ padding: 3.33vw 4.17vw 4.17vw; }
    .sqc-input, .sqc-select, .sqc-date, .sqc-btn-line{ height: 10.42vw; font-size: 3.54vw; }
    .sqc-select{ min-width: 0; }
    .sqc-btn-line{ padding: 0 3.33vw; }
    .sqc-people{ gap: 2.5vw; }
    .sqc-people-item{ gap: 1.25vw; }
    .sqc-sub-row{ gap: 2.08vw; padding: 3.33vw 4.17vw; }
    .sqc-checks{ gap: 2.5vw 5vw; }
    .sqc-check, .sqc-people-item, .sqc-money{ font-size: 3.54vw; }
    .sqc-hint, .sqc-err, .sqc-notes{ font-size: 3.13vw; }
    .sqc-pii{ padding: 3.33vw 3.33vw 3.33vw 7.5vw; font-size: 3.13vw; }
    .sqc-chip{ height: 7.5vw; font-size: 3.33vw; }
    .sqc-btn{ height: 12.5vw; font-size: 3.96vw; border-radius: 2.5vw; }
}

/* ==========================================================================
   SUDA CUSTOM (2026-10-24): 맞춤여행 상단 비주얼 배너(.sqh, extend/suda_quote_hero.lib.extend.php) + 진행 절차(.sqc-steps) + "요청서 작성" 제목
   배너 높이는 카테고리 배너(css/suda_cathero.css .suda-cathero)와 같게: 600px / 1024 이하 520 / 768 이하 360
   ========================================================================== */
.sqh{ position: relative; height: 600px; overflow: hidden; background: #1f2937 center / cover no-repeat; color: #fff; }
.sqh::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,24,39,.72) 0%, rgba(17,24,39,.45) 60%, rgba(17,24,39,.3) 100%); }
.sqh-inner{ position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.sqh-eyebrow{ padding: 4px 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.sqh-title{ margin: 20px 0 0; font-size: 40px; font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; color: #fff; word-break: keep-all; }
.sqh-desc{ max-width: 560px; margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.88); word-break: keep-all; }
.sqh-btn{ display: inline-flex; align-items: center; gap: 6px; height: 52px; margin-top: 32px; padding: 0 28px; border-radius: 12px; background: var(--suda-blue); color: #fff; font-size: 16px; font-weight: 700; transition: background .15s ease; }
.sqh-btn:hover, .sqh-btn:focus{ background: var(--suda-blue-dark); color: #fff; }
.sqh-btn:focus-visible{ outline: 3px solid rgba(255,255,255,.6); outline-offset: 2px; }
.sqh-btn svg{ width: 18px; height: 18px; }
.sqh-wrap ~ #wrapper #container.suda-sub-container{ padding-top: 48px; }

.sqc-steps{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0 0 56px; padding: 0; list-style: none; }
.sqc-step{ position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 20px; border: 1px solid var(--suda-gray-200); border-radius: 12px; background: #fff; }
.sqc-step + .sqc-step::before{ content: ""; position: absolute; left: -21px; top: 50%; width: 10px; height: 10px; border-top: 2px solid var(--suda-gray-400); border-right: 2px solid var(--suda-gray-400); transform: translateY(-50%) rotate(45deg); }
.sqc-step-ic{ display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #eef0ff; color: var(--suda-blue); }
.sqc-step-ic svg{ width: 24px; height: 24px; }
.sqc-step-no{ margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--suda-blue); }
.sqc-step-title{ margin-top: 4px; font-size: 17px; font-weight: 700; color: var(--suda-gray-900); }
.sqc-step-desc{ margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--suda-gray-500); word-break: keep-all; }
.sqc-form-title{ margin: 0 0 16px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--suda-gray-900); scroll-margin-top: calc(var(--suda-header-h, 80px) + 24px); }

@media screen and (max-width:1024px){
    .sqh{ height: 520px; } /* 카테고리 배너와 같은 높이 (css/suda_cathero.css 고정값) */
    .sqh-inner{ padding: 0 5vw; }
    .sqh-eyebrow{ padding: 0.39vw 0.98vw; font-size: 1.27vw; }
    .sqh-title{ margin-top: 1.76vw; font-size: 3.32vw; }
    .sqh-desc{ max-width: 54.69vw; margin-top: 1.37vw; font-size: 1.56vw; }
    .sqh-btn{ height: 5.08vw; margin-top: 2.73vw; padding: 0 2.73vw; border-radius: 1.17vw; font-size: 1.56vw; }
    .sqh-btn svg{ width: 1.76vw; height: 1.76vw; }
    .sqh-wrap ~ #wrapper #container.suda-sub-container{ padding-top: 4.69vw; }
    .sqc-steps{ gap: 2.73vw; margin-bottom: 5.47vw; }
    .sqc-step{ padding: 2.15vw 1.76vw; border-radius: 1.17vw; }
    .sqc-step + .sqc-step::before{ left: -1.86vw; width: 0.88vw; height: 0.88vw; }
    .sqc-step-ic{ width: 4.69vw; height: 4.69vw; }
    .sqc-step-ic svg{ width: 2.34vw; height: 2.34vw; }
    .sqc-step-no{ margin-top: 1.56vw; font-size: 1.17vw; }
    .sqc-step-title{ font-size: 1.66vw; }
    .sqc-step-desc{ font-size: 1.37vw; }
    .sqc-form-title{ margin-bottom: 1.56vw; font-size: 2.15vw; }
}
@media screen and (max-width:768px){
    .sqh{ height: 360px; }
    .sqh-eyebrow{ padding: 0.52vw 1.3vw; font-size: 1.56vw; }
    .sqh-title{ margin-top: 1.82vw; font-size: 3.65vw; }
    .sqh-desc{ max-width: 72.92vw; margin-top: 1.3vw; font-size: 1.82vw; }
    .sqh-btn{ height: 6.25vw; margin-top: 2.6vw; padding: 0 3.13vw; border-radius: 1.56vw; font-size: 1.95vw; }
    .sqh-btn svg{ width: 2.34vw; height: 2.34vw; }
    .sqh-wrap ~ #wrapper #container.suda-sub-container{ padding-top: 5.21vw; }
    .sqc-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6vw; margin-bottom: 7.29vw; }
    .sqc-step{ padding: 3.13vw 2.6vw; border-radius: 1.56vw; }
    .sqc-step + .sqc-step::before{ display: none; }
    .sqc-step-ic{ width: 6.25vw; height: 6.25vw; }
    .sqc-step-ic svg{ width: 3.13vw; height: 3.13vw; }
    .sqc-step-no{ margin-top: 2.08vw; font-size: 1.56vw; }
    .sqc-step-title{ margin-top: 0.52vw; font-size: 2.21vw; }
    .sqc-step-desc{ margin-top: 0.78vw; font-size: 1.82vw; }
    .sqc-form-title{ margin-bottom: 2.08vw; font-size: 2.86vw; }
}
@media screen and (max-width:480px){
    .sqh{ height: 360px; }
    .sqh-inner{ padding: 0 5vw; }
    .sqh-eyebrow{ padding: 0.83vw 2.08vw; font-size: 2.5vw; }
    .sqh-title{ margin-top: 2.92vw; font-size: 5.83vw; }
    .sqh-desc{ max-width: none; margin-top: 2.08vw; font-size: 3.13vw; }
    .sqh-btn{ height: 10.83vw; margin-top: 4.17vw; padding: 0 5vw; border-radius: 2.5vw; font-size: 3.33vw; }
    .sqh-btn svg{ width: 3.75vw; height: 3.75vw; }
    .sqh-wrap ~ #wrapper #container.suda-sub-container{ padding-top: 8.33vw; }
    .sqc-steps{ gap: 2.5vw; margin-bottom: 11.67vw; }
    .sqc-step{ padding: 4.17vw 3.33vw; border-radius: 2.5vw; }
    .sqc-step-ic{ width: 10vw; height: 10vw; }
    .sqc-step-ic svg{ width: 5vw; height: 5vw; }
    .sqc-step-no{ margin-top: 2.92vw; font-size: 2.5vw; }
    .sqc-step-title{ margin-top: 0.83vw; font-size: 3.54vw; }
    .sqc-step-desc{ margin-top: 1.25vw; font-size: 2.92vw; }
    .sqc-form-title{ margin-bottom: 3.33vw; font-size: 4.58vw; }
}