@charset "utf-8";
/* =============================================================================
 * 1:1문의(qa) 전용 스타일 - 공지사항 게시판(skin/board/basic/style.css)을 같이 로드해서
 * .suda-w-row/.suda-w-label/.suda-w-field, .suda-upload-*, 버튼 등은 그쪽 것을 그대로 쓰고,
 * 여기서는 1:1문의에만 있는 요소(답변알림 라디오, 개인정보동의, 글자수 카운터, 상태뱃지)만 정의.
 * ========================================================================== */

.suda-w-help{ margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--suda-gray-500); }

/* 상담유형 1차/2차 연동 셀렉트 - 예약코드와 동일한 .suda-qa-select 커스텀 드롭다운 재사용,
   여기선 가로 배치만 추가 */
.suda-qa-cate-select-row{ display: flex; gap: 8px; }

/* 예약코드 - 예약(주문) 선택 커스텀 드롭다운(ul/li) + 직접입력 인풋 + 예약확인 버튼 */
.suda-qa-resv-row{ display: flex; gap: 8px; }
.suda-qa-btn-outline{ flex: 0 0 auto; height: 52px; padding: 0 20px; border: 1px solid var(--suda-gray-200); border-radius: 12px; background: #fff; color: var(--suda-gray-700); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.suda-qa-btn-outline:hover{ border-color: var(--suda-blue); color: var(--suda-blue); }

/* .suda-qa-select/.suda-qa-select-btn/.suda-qa-select-list 자체 정의는 사이트 공통
   컴포넌트라 css/gnb.css(모든 페이지 공통 로드)로 옮겼음 - 여기서 또 정의하면 두 파일이
   따로 놀 위험이 있어 제거함. 아래는 이 컴포넌트를 "예약코드/상담유형" 자리에 쓸 때만
   필요한 추가 톤(보더 색 등)이 필요하면 여기 이어서 추가. */

.suda-qa-resv-input{ flex: 1 1 auto; min-width: 0; }

.suda-qa-resv-result{ margin: 8px 0 0; font-size: 13px; font-weight: 700; }
.suda-qa-resv-result.is-ok{ color: var(--suda-blue); }
.suda-qa-resv-result.is-fail{ color: var(--suda-red); }

/* 라디오/체크박스 + 라벨을 가로로 정렬하는 공통 래퍼 */
.suda-form-radio-label{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; color: var(--suda-gray-900); }

/* 답변알림수단 */
.suda-qa-notify{ display: flex; flex-wrap: wrap; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; }
/* 코어 .btn_frmline(default.css)은 높이만 40px이고 line-height/text-align이 없어서 글자가
   가운데 정렬 안 됨 - 여기서만 flex로 가로/세로 중앙정렬 */
.suda-qa-notify .btn_frmline{ display: inline-flex; align-items: center; justify-content: center; width: auto; height: 36px; padding: 0 16px; font-size: 13px; }

/* 문의내용 textarea + 글자수 카운터 */
.suda-qa-textarea{ height: 220px !important; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.suda-qa-char-count{ margin-top: 6px; text-align: right; font-size: 13px; color: var(--suda-gray-400); }

/* 개인정보 수집 이용 동의 */
.suda-qa-privacy{ margin: 0 0 14px; padding-left: 18px; font-size: 13px; line-height: 1.8; color: var(--suda-gray-700); }
.suda-qa-agree-radio{ display: flex; gap: 24px; }

/* 문의내역 목록 - 답변상태 뱃지 */
.suda-qa-status{ display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.suda-qa-status.is-wait{ background: var(--suda-gray-100); color: var(--suda-gray-500); }
.suda-qa-status.is-done{ background: rgba(65,84,255,.1); color: var(--suda-blue); }

/* 사이트 공통 규칙: 1024/768/480 전 구간 vw로(같은 목표 px를 각 구간 기준폭(1024/768/480)으로
   나눠서 계산). 레이아웃 방향(flex-direction 등)만 바뀌는 지점은 기존 그대로 두고 크기값만 추가. */
@media (max-width: 1024px){
    .suda-w-help{ font-size: 1.27vw; margin-top: 0.78vw; }
    .suda-qa-cate-select-row{ gap: 0.78vw; }
    .suda-qa-resv-row{ gap: 0.78vw; }
    .suda-qa-btn-outline{ height: 5.08vw; padding: 0 1.95vw; border-radius: 1.17vw; font-size: 1.46vw; }
    .suda-qa-resv-result{ font-size: 1.27vw; margin-top: 0.78vw; }
    .suda-form-radio-label{ font-size: 1.46vw; gap: 0.78vw; }
    .suda-qa-notify{ gap: 1.95vw; }
    .suda-qa-notify .btn_frmline{ height: 3.52vw; padding: 0 1.56vw; font-size: 1.27vw; }
    .suda-qa-textarea{ height: 21.48vw !important; padding: 1.37vw 1.56vw; }
    .suda-qa-char-count{ margin-top: 0.59vw; font-size: 1.27vw; }
    .suda-qa-privacy{ margin-bottom: 1.37vw; padding-left: 1.76vw; font-size: 1.27vw; }
    .suda-qa-agree-radio{ gap: 2.34vw; }
    .suda-qa-status{ padding: 0.39vw 1.17vw; font-size: 1.27vw; }
}

@media (max-width: 768px){
    .suda-w-help{ font-size: 1.69vw; margin-top: 1.04vw; }
    .suda-qa-cate-select-row{ gap: 1.04vw; }
    .suda-qa-resv-row{ gap: 1.04vw; }
    .suda-qa-btn-outline{ height: 6.77vw; padding: 0 2.60vw; border-radius: 1.56vw; font-size: 1.95vw; }
    .suda-qa-resv-result{ font-size: 1.69vw; margin-top: 1.04vw; }
    .suda-form-radio-label{ font-size: 1.95vw; gap: 1.04vw; }
    .suda-qa-notify{ gap: 1.56vw; flex-direction: column; align-items: flex-start; }
    .suda-qa-notify .btn_frmline{ height: 4.69vw; padding: 0 2.08vw; font-size: 1.69vw; }
    .suda-qa-textarea{ height: 20.83vw !important; padding: 1.82vw 2.08vw; }
    .suda-qa-char-count{ margin-top: 0.78vw; font-size: 1.69vw; }
    .suda-qa-privacy{ margin-bottom: 1.82vw; padding-left: 2.34vw; font-size: 1.69vw; }
    .suda-qa-agree-radio{ flex-direction: column; gap: 1.04vw; }
    .suda-qa-status{ padding: 0.52vw 1.56vw; font-size: 1.69vw; }
}

@media (max-width: 480px){
    .suda-w-help{ font-size: 2.71vw; margin-top: 1.67vw; }
    .suda-qa-resv-row{ flex-direction: column; }
    .suda-qa-btn-outline{ width: 100%; height: 10.83vw; padding: 0 4.17vw; border-radius: 2.50vw; font-size: 3.12vw; }
    .suda-qa-cate-select-row{ flex-direction: column; }
    .suda-qa-resv-result{ font-size: 2.71vw; margin-top: 1.67vw; }
    .suda-form-radio-label{ font-size: 3.12vw; gap: 1.67vw; }
    .suda-qa-notify .btn_frmline{ height: 7.50vw; padding: 0 3.33vw; font-size: 2.71vw; }
    .suda-qa-textarea{ height: 45.83vw !important; padding: 2.92vw 3.33vw; }
    .suda-qa-char-count{ margin-top: 1.25vw; font-size: 2.71vw; }
    .suda-qa-privacy{ margin-bottom: 2.92vw; padding-left: 3.75vw; font-size: 2.71vw; }
    .suda-qa-status{ padding: 0.83vw 2.50vw; font-size: 2.71vw; }
}

/* =============================================================================
 * 문의내역 목록(qalist.php) - 공지사항 게시판 목록(list.skin.php)과 동일한 상단 검색줄
 * (.suda-bo-top-row/.suda-bo-search/.suda-bo-sfl) + 하단 액션(.suda-bo-v-bottom-*)
 * 클래스를 그대로 재사용(같은 style.css를 이미 로드 중). 표(<table>)는 완전히 걷어내고
 * 공지사항 게시판(.suda-bo-n-list)과 같은 방식으로 div/ul/li로 다시 짰다 - 표 기반으로는
 * <table>/<tbody>가 표 서식 컨텍스트에 남아있어 tr/td만 block으로 바꿔도 UA가 익명 박스를
 * 끼워넣어 모바일에서 계속 레이아웃이 깨졌고, 코어(css/default.css)의 .tbl_head01 td 등
 * 전역 규칙까지 매번 하나씩 덮어써야 해서 근본적으로 표를 쓰지 않는 쪽으로 정리함.
 * ========================================================================== */
#bo_list{ max-width: none; }

.suda-qa-list{ border-top: 2px solid var(--suda-gray-900); }
.suda-qa-list-head,
.suda-qa-list-row{
    display: grid;
    grid-template-columns: 15fr 38fr 15fr 16fr 16fr;
    align-items: center;
    column-gap: 8px;
    padding: 14px 8px;
}
.suda-qa-list.has-chk .suda-qa-list-head,
.suda-qa-list.has-chk .suda-qa-list-row{ grid-template-columns: 40px 15fr 38fr 15fr 16fr 16fr; }

.suda-qa-list-head{ background: var(--suda-gray-50); border-bottom: 1px solid var(--suda-gray-200); color: var(--suda-gray-700); font-size: 14px; font-weight: 700; text-align: center; }
.suda-qa-list-body{ margin: 0; padding: 0; list-style: none; }
.suda-qa-list-row{ border-bottom: 1px solid var(--suda-gray-100); font-size: 14px; color: var(--suda-gray-900); text-align: center; }
.suda-qa-list-row > *{ min-width: 0; word-break: keep-all; overflow-wrap: break-word; }
.suda-qa-lc-chk{ text-align: left; }
.suda-qa-lc-subject{ text-align: left; }
.suda-qa-lc-subject .bo_tit{ color: var(--suda-gray-900); font-weight: 600; }
.suda-qa-lc-subject .bo_tit:hover{ color: var(--suda-blue); }
.suda-qa-lc-category{ color: var(--suda-gray-500); font-size: 13px; }
.suda-qa-lc-resv{ color: var(--suda-gray-500); font-size: 13px; }
.suda-qa-list-empty{ padding: 60px 0 !important; color: var(--suda-gray-400); text-align: center; }

@media (max-width: 1024px){
    .suda-qa-list-head,
    .suda-qa-list-row{ padding: 1.17vw 0.78vw; }
    .suda-qa-list-head{ font-size: 1.37vw; }
    .suda-qa-list-row{ font-size: 1.37vw; }
    .suda-qa-lc-category{ font-size: 1.27vw; }
    .suda-qa-lc-resv{ font-size: 1.27vw; }
    .suda-qa-list-empty{ padding: 5.86vw 0 !important; }
}

@media (max-width: 768px){
    .suda-qa-list-head{ display: none; }
    .suda-qa-list-row{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 2.08vw 0;
    }
    .suda-qa-lc-chk{ order: 0; flex: 0 0 100%; margin-bottom: 1.04vw; }
    /* 1줄: 제목(전체 너비) / 2줄: 유형 · 예약번호 · 작성일 ............ 답변상태(오른쪽 정렬) */
    .suda-qa-lc-subject{ order: 1; flex-basis: 100%; }
    .suda-qa-lc-subject .bo_tit{ font-size: 2.21vw; }
    .suda-qa-lc-category{ order: 2; margin-top: 0.78vw; font-size: 1.69vw; }
    .suda-qa-lc-resv{ order: 3; margin-top: 0.78vw; font-size: 1.69vw; }
    .suda-qa-lc-date{ order: 4; margin-top: 0.78vw; font-size: 1.69vw; color: var(--suda-gray-500); }
    .suda-qa-lc-category::after,
    .suda-qa-lc-resv::after{ content: "\B7"; margin: 0 0.78vw; color: var(--suda-gray-300); }
    .suda-qa-lc-stat{ order: 5; margin-top: 0.78vw; margin-left: auto; }
    .suda-qa-list-empty{ padding: 7.81vw 0 !important; }
}

@media (max-width: 480px){
    .suda-qa-list-row{ padding: 3.33vw 0; }
    .suda-qa-lc-chk{ margin-bottom: 1.67vw; }
    .suda-qa-lc-subject .bo_tit{ font-size: 3.54vw; }
    .suda-qa-lc-category{ margin-top: 1.25vw; font-size: 2.71vw; }
    .suda-qa-lc-resv{ margin-top: 1.25vw; font-size: 2.71vw; }
    .suda-qa-lc-date{ margin-top: 1.25vw; font-size: 2.71vw; }
    .suda-qa-lc-category::after,
    .suda-qa-lc-resv::after{ margin: 0 1.25vw; }
    .suda-qa-lc-stat{ margin-top: 1.25vw; }
    .suda-qa-list-empty{ padding: 12.50vw 0 !important; }
}

/* =============================================================================
 * 상세보기(qaview.php) - 공지사항 뷰페이지(skin/board/basic/view.skin.php)와 완전히 동일한
 * .suda-bo-v-* 클래스 재사용(같은 style.css를 이미 로드 중). 여기서는 QA에만 있는 답변등록폼/
 * 답변표시 카드만 새로 정의.
 * ========================================================================== */

/* 상담유형(분류) 표시 - 제목/메타 박스(.suda-bo-v-tit-info-wrap) 안, 작성자/작성일 목록
   밑에 회색 라운드 배너로 표시 */
.suda-qa-category-banner{ padding: 8px 14px; background: var(--suda-gray-50); color: var(--suda-gray-700); font-size: 14px; font-weight: 600; }

/* 답변등록폼(관리자) - 바로 위 하단 액션(수정/삭제/목록/문의하기) 버튼 줄과 너무 붙어 보여서
   위쪽 여백 추가 */
.suda-qa-answer-section{ margin-top: 80px; }
.suda-qa-answer-heading{ margin: 0 0 12px; font-size: 20px; font-weight: 700; color: var(--suda-gray-900); }
/* 에디터(SmartEditor2) 자체가 각진 프레임이라 라운드를 씌우면 모서리가 어색하게 남음 - 라운드 없앰 */
.suda-qa-answer-editor-noround{ border-radius: 0; }
/* 답변등록 버튼 - 하단 액션의 문의하기(.suda-bo-v-action-btn.is-primary)와 클래스 통일, 오른쪽 정렬만 추가 */
.suda-qa-answer-submit-row{ margin: 20px 0 0; text-align: right; }
.suda-qa-answer-waiting{ margin: 40px 0; padding: 24px; border-radius: 12px; background: var(--suda-gray-50); color: var(--suda-gray-500); font-size: 15px; text-align: center; }

/* 답변 표시 카드 (이미 답변완료된 경우) */
.suda-qa-answer-card{ margin: 40px 0; padding: 28px; border-radius: 12px; background: var(--suda-gray-50); }
.suda-qa-answer-card-header{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--suda-gray-200); }
.suda-qa-answer-badge{ display: inline-block; margin-right: 8px; padding: 3px 10px; border-radius: 999px; background: var(--suda-blue); color: #fff; font-size: 13px; font-weight: 700; vertical-align: middle; }
.suda-qa-answer-meta{ display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--suda-gray-500); }
.suda-qa-answer-link{ color: var(--suda-gray-500); text-decoration: underline; }
.suda-qa-answer-link:hover{ color: var(--suda-blue); }
.suda-qa-answer-link.is-danger:hover{ color: var(--suda-red); }
.suda-qa-answer-content{ font-size: 15px; line-height: 1.7; color: var(--suda-gray-900); word-break: break-all; }
/* 답변에 첨부한 이미지가 카드 배경/모서리와 안 어울리게 각지고 꽉 차게 붙어 보이던 문제 -
   카드 모서리(border-radius:12px)에 맞춰 라운드 주고 위아래 여백 확보 */
.suda-qa-answer-content img{ display: block; max-width: 100%; height: auto; margin: 8px 0 16px; border-radius: 8px; }
.suda-qa-answer-content .suda-bo-v-file-list{ margin-top: 20px; }

.suda-qa-rewrite-row{ display: flex; justify-content: flex-end; margin: 0 0 20px; }

@media (max-width: 1024px){
    .suda-qa-category-banner{ padding: 0.78vw 1.37vw; font-size: 1.37vw; }
    .suda-qa-answer-section{ margin-top: 7.81vw; }
    .suda-qa-answer-heading{ margin-bottom: 1.17vw; font-size: 1.95vw; }
    .suda-qa-answer-submit-row{ margin-top: 1.95vw; }
    .suda-qa-answer-waiting{ margin: 3.91vw 0; padding: 2.34vw; font-size: 1.46vw; }
    .suda-qa-answer-card{ margin: 3.91vw 0; padding: 2.73vw; }
    .suda-qa-answer-card-header{ gap: 0.78vw 1.56vw; margin-bottom: 1.56vw; padding-bottom: 1.56vw; }
    .suda-qa-answer-badge{ margin-right: 0.78vw; padding: 0.29vw 0.98vw; font-size: 1.27vw; }
    .suda-qa-answer-meta{ gap: 1.37vw; font-size: 1.27vw; }
    .suda-qa-answer-content{ font-size: 1.46vw; }
    .suda-qa-answer-content img{ margin: 0.78vw 0 1.56vw; border-radius: 0.78vw; }
    .suda-qa-answer-content .suda-bo-v-file-list{ margin-top: 1.95vw; }
    .suda-qa-rewrite-row{ margin-bottom: 1.95vw; }
}

@media (max-width: 768px){
    .suda-qa-category-banner{ padding: 1.04vw 1.82vw; font-size: 1.82vw; }
    .suda-qa-answer-section{ margin-top: 10.42vw; }
    .suda-qa-answer-heading{ margin-bottom: 1.56vw; font-size: 2.60vw; }
    .suda-qa-answer-submit-row{ margin-top: 2.60vw; }
    .suda-qa-answer-waiting{ margin: 5.21vw 0; padding: 3.13vw; font-size: 1.95vw; }
    .suda-qa-answer-card{ margin: 5.21vw 0; padding: 3.65vw; }
    .suda-qa-answer-card-header{ gap: 1.04vw 2.08vw; margin-bottom: 2.08vw; padding-bottom: 2.08vw; }
    .suda-qa-answer-badge{ margin-right: 1.04vw; padding: 0.39vw 1.30vw; font-size: 1.69vw; }
    .suda-qa-answer-meta{ gap: 1.82vw; font-size: 1.69vw; }
    .suda-qa-answer-content{ font-size: 1.95vw; }
    .suda-qa-answer-content img{ margin: 1.04vw 0 2.08vw; border-radius: 1.04vw; }
    .suda-qa-answer-content .suda-bo-v-file-list{ margin-top: 2.60vw; }
    .suda-qa-rewrite-row{ margin-bottom: 2.60vw; }
}

@media (max-width: 480px){
    .suda-qa-category-banner{ padding: 1.67vw 2.92vw; font-size: 2.92vw; }
    .suda-qa-answer-section{ margin-top: 16.67vw; }
    .suda-qa-answer-heading{ margin-bottom: 2.50vw; font-size: 4.17vw; }
    .suda-qa-answer-submit-row{ margin-top: 4.17vw; }
    .suda-qa-answer-waiting{ margin: 8.33vw 0; padding: 5.00vw; font-size: 3.12vw; }
    .suda-qa-answer-card{ margin: 8.33vw 0; padding: 4.17vw; }
    .suda-qa-answer-card-header{ gap: 1.67vw 3.33vw; margin-bottom: 3.33vw; padding-bottom: 3.33vw; }
    .suda-qa-answer-badge{ margin-right: 1.67vw; padding: 0.63vw 2.08vw; font-size: 2.71vw; }
    .suda-qa-answer-meta{ gap: 2.92vw; font-size: 2.71vw; }
    .suda-qa-answer-content{ font-size: 3.12vw; }
    .suda-qa-answer-content img{ margin: 1.67vw 0 3.33vw; border-radius: 1.67vw; }
    .suda-qa-answer-content .suda-bo-v-file-list{ margin-top: 4.17vw; }
    .suda-qa-rewrite-row{ margin-bottom: 4.17vw; }
}