@charset "utf-8";
/* 온라인 문의(inquiry) - Figma 6549:4182 : CONTACT 카드 + 문의 폼 */

.iq-head{text-align:center;margin-bottom:50px;font-family:'Pretendard',sans-serif}
.iq-head__tit{margin:0 0 20px;font-size:38px;font-weight:600;letter-spacing:-.76px;color:#111;line-height:1.3}
.iq-head__desc{margin:0;font-size:18px;color:#111;letter-spacing:-.36px}

.iq-wrap{display:flex;gap:60px;align-items:stretch;font-family:'Pretendard',sans-serif}

/* 좌측 CONTACT 카드 */
.iq-contact{flex:0 0 550px;max-width:550px;border-radius:15px;background:#333;position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:600px}
.iq-contact__bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}   /* cover : 왜곡 없이 채움 */
.iq-contact__inner{position:relative;z-index:1;width:100%;padding:30px 40px;color:#fff;background:rgba(0,0,0,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.iq-contact__label{margin:0 0 14px;font-family:'SB Aggro','Pretendard',sans-serif;font-size:16px;letter-spacing:-.16px}
.iq-contact__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.iq-contact__list li{display:flex;align-items:center;gap:10px;font-size:17px;letter-spacing:-.34px}
.iq-contact__list i{width:24px;text-align:center;font-size:18px}

/* 우측 폼 */
.iq-form{flex:1;min-width:0;display:flex;flex-direction:column;gap:30px}
.iq-tabs{display:flex;gap:12px}
.iq-tab{flex:1;min-width:0;height:50px;padding:0 10px;border-radius:5px;border:1px solid #888;background:#fff;color:#0f0f0f;font-size:18px;font-weight:600;letter-spacing:-.36px;cursor:pointer;font-family:'Pretendard',sans-serif;transition:background-color .2s,color .2s,border-color .2s}
.iq-tab:hover{border-color:#050505}
.iq-tab.is-active{background:#050505;border-color:#050505;color:#fff}

.iq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.iq-fld{display:flex;flex-direction:column;gap:8px}
.iq-fld--full{width:100%}
.iq-fld label{font-size:17px;font-weight:500;color:#111619;letter-spacing:-.15px}
.iq-fld label em{color:#f42500;font-style:normal}
.iq-inp{height:50px;padding:0 16px;border:0.8px solid #ccc;border-radius:6px;font-size:16px;color:#333;font-family:'Pretendard',sans-serif;outline:none;box-sizing:border-box;width:100%;transition:border-color .15s}
.iq-inp:focus{border-color:#f42500}
.iq-inp::placeholder{color:#888}
.iq-inp.is-invalid{border-color:#f42500;background:#fff6f4}
/* 입력 안내 */
.iq-hint{display:none;margin-top:6px;font-size:13px;color:#f42500;line-height:1.4}
.iq-hint.is-show{display:block;animation:iqHint .2s ease}
@keyframes iqHint{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.iq-textarea{min-height:152px;padding:14px 16px;border:0.8px solid #ccc;border-radius:6px;font-size:16px;color:#333;font-family:'Pretendard',sans-serif;outline:none;box-sizing:border-box;width:100%;resize:vertical;line-height:1.5}
.iq-textarea:focus{border-color:#f42500}
.iq-textarea::placeholder{color:#888}

.iq-agree__box{background:#f4f4f4;border-radius:6px;padding:14px 16px;height:90px;overflow:auto;font-size:14px;line-height:1.5;color:#888;white-space:pre-line}
.iq-fld label.iq-agree__chk{display:inline-flex;align-items:center;gap:9px;margin-top:12px;font-family:'Pretendard',sans-serif;font-size:15px;font-weight:400;line-height:20px;color:#888;cursor:pointer;user-select:none}
.iq-agree__chk input{position:absolute;opacity:0;width:0;height:0}
.iq-agree__mark{flex:0 0 auto;width:20px;height:20px;border:1.5px solid #ccc;border-radius:5px;background:#fff;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;transition:background-color .15s,border-color .15s}
.iq-agree__mark i{opacity:0;transition:opacity .15s}
.iq-agree__chk input:checked + .iq-agree__mark{background:#f42500;border-color:#f42500}
.iq-agree__chk input:checked + .iq-agree__mark i{opacity:1}
.iq-agree__chk input:focus-visible + .iq-agree__mark{box-shadow:0 0 0 3px rgba(244,37,0,.2)}
/* 텍스트는 .iq-agree__chk 의 값(#888·15px·400·line-height 20px) 상속 — 별도 override 제거 */

.iq-submit{display:flex;justify-content:flex-end;gap:10px;margin-top:40px}
.iq-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:207px;height:50px;padding:0 30px;border-radius:5px;background:#f42500;color:#fff;font-size:18px;font-weight:700;letter-spacing:-.36px;text-decoration:none;border:0;cursor:pointer;font-family:'Pretendard',sans-serif;transition:background-color .2s}
.iq-btn:hover{background:#e02200}
.iq-btn--sub{background:#555;min-width:120px}
.iq-btn--sub:hover{background:#3f3f3f}

/* 접수 완료 레이어 팝업 */
.iq-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.iq-modal.is-open{display:flex}
.iq-modal__dim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.iq-modal__box{position:relative;z-index:1;width:min(440px,92vw);background:#fff;border-radius:16px;padding:48px 36px 36px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);font-family:'Pretendard',sans-serif;animation:iqPop .25s ease}
@keyframes iqPop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.iq-modal__ic{display:block;color:#f42500;font-size:56px;margin-bottom:20px;line-height:1}
.iq-modal__tit{margin:0 0 12px;font-size:22px;font-weight:600;color:#111;letter-spacing:-.4px}
.iq-modal__desc{margin:0 0 28px;font-size:15px;color:#666;line-height:1.6}
.iq-modal__box .iq-btn{width:100%;min-width:0}
.iq-modal__close{position:absolute;top:16px;right:16px;width:30px;height:30px;border:0;background:transparent;cursor:pointer}
.iq-modal__close::before,.iq-modal__close::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:1.5px;background:#aaa;transform-origin:center}
.iq-modal__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.iq-modal__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.iq-modal__close:hover::before,.iq-modal__close:hover::after{background:#f42500}

/* 반응형 */
@media (max-width:1024px){
    .iq-wrap{flex-direction:column;gap:30px}
    .iq-contact{flex-basis:auto;max-width:none;width:100%;min-height:320px}
    .iq-head__tit{font-size:30px}
}
@media (max-width:768px){
    .iq-head__tit{font-size:24px}
    .iq-head__desc{font-size:15px}
    .iq-tabs{flex-wrap:wrap}
    .iq-tab{flex:1 1 calc(50% - 6px);font-size:15px;height:46px}
    .iq-grid{grid-template-columns:1fr;gap:16px}
    /* CONTACT 카드를 문의신청 버튼 아래로 이동 (iq-wrap 해체 후 order 재배치) */
    #fwrite{display:flex;flex-direction:column;gap:30px}
    .iq-wrap{display:contents}
    .iq-form{order:1}
    .iq-submit{order:2;margin-top:0;justify-content:stretch}
    .iq-contact{order:3}
    .iq-btn{flex:1;min-width:0}
    /* CONTACT 카드 텍스트 모바일 축소 */
    .iq-contact{min-height:240px}
    .iq-contact__inner{padding:20px 22px}
    .iq-contact__label{font-size:14px;margin-bottom:10px}
    .iq-contact__list{gap:8px}
    .iq-contact__list li{font-size:14px;letter-spacing:-.3px;gap:8px}
    .iq-contact__list i{width:18px;font-size:15px}
    .iq-fld label{font-size:15px}
    .iq-inp,.iq-textarea{font-size:15px}
}

/* ===== 관리자 문의 리스트 ===== */
.iq-listtop{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:24px;font-family:'Pretendard',sans-serif}
.iq-filter{display:flex;flex-wrap:wrap}
.iq-filter__tab{padding:8px 20px;font-size:18px;font-weight:600;color:#696969;text-decoration:none;border-bottom:1px solid transparent;letter-spacing:-.36px}
.iq-filter__tab.is-active{color:#f42500;border-bottom-color:#f42500}
.iq-filter__tab:hover{color:#f42500}
.iq-listtop__right{display:flex;align-items:flex-end;gap:20px}
.iq-total{display:flex;align-items:center;gap:11px;font-size:18px;color:#333;white-space:nowrap}
.iq-total em{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;background:#e6e6e6;border-radius:3px;font-style:normal;font-size:15px;color:#333}
.iq-search2{display:flex;align-items:center;width:337px;max-width:46vw;height:50px;border-bottom:1px solid #919191}
.iq-search2 input{flex:1;min-width:0;border:0;background:transparent;padding:0 4px 0 15px;font-size:16px;color:#333;outline:none;font-family:'Pretendard',sans-serif}
.iq-search2 input::placeholder{color:#8d8d8d}
.iq-search2 button{border:0;background:transparent;color:#555;font-size:18px;padding:0 6px;cursor:pointer}

.iq-table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:'Pretendard',sans-serif}
.iq-table thead th{height:45px;background:#050505;color:#fff;font-size:17px;font-weight:400;padding:10px}
.iq-table tbody td{height:70px;border-bottom:1px solid #ccc;padding:10px;font-size:16px;color:#555;text-align:center;vertical-align:middle}
.iq-td-no{color:#222;font-size:17px}
.iq-td-cate{font-weight:700;color:#222;font-size:18px}
.iq-td-subj{text-align:left !important;padding:0 10px;overflow:hidden}
.iq-td-subj a{display:flex;align-items:center;gap:10px;max-width:100%;min-width:0;color:#222;text-decoration:none}
.iq-lock{width:17px;height:17px;color:#888;flex:0 0 auto;display:inline-block;vertical-align:middle}
.iq-subjtxt{flex:0 1 auto;min-width:0;font-size:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iq-td-subj a:hover .iq-subjtxt{color:#f42500}
.iq-new{color:#f42500;font-weight:800;font-size:17px;flex:0 0 auto}
.iq-subj-writer{display:none}   /* PC : 작성자 별도 열에 표시 / 모바일 : 제목 아래로 노출 */
.iq-status{display:inline-flex;align-items:center;justify-content:center;padding:2px 20px;border-radius:50px;font-size:16px;font-weight:500;line-height:1.9}
.iq-status--wait{border:1px solid #f42500;color:#f42500}
.iq-status--done{background:#ededed;color:#585858}
.iq-td-name,.iq-td-date{color:#555;font-size:16px}
.iq-th-check,.iq-td-check{text-align:center}
.iq-td-check .wg-list-check--inline{vertical-align:middle}
.iq-empty{text-align:center;padding:80px 0;color:#888}

/* 뷰 : 문의 정보 블록 + 상태뱃지 (공통 wbd-view 안에서 사용) */
.iq-vstatus{display:inline-flex;align-items:center;justify-content:center;padding:3px 16px;border-radius:50px;font-size:14px;font-weight:600;margin-bottom:10px}
.iq-vstatus--wait{border:1px solid #f42500;color:#f42500}
.iq-vstatus--done{background:#ededed;color:#585858}
.iq-info{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e5e5e5;border:1px solid #e5e5e5;border-radius:8px;overflow:hidden;margin-bottom:24px;font-family:'Pretendard',sans-serif}
.iq-info dl{display:flex;background:#fff;margin:0}
.iq-info dt{flex:0 0 110px;background:#f7f7f7;padding:14px 16px;font-size:14px;color:#666;font-weight:600}
.iq-info dd{flex:1;min-width:0;margin:0;padding:14px 16px;font-size:15px;color:#222;word-break:break-all}
@media (max-width:768px){ .iq-info{grid-template-columns:1fr} }

.iq-listbtn{display:flex;justify-content:flex-end;margin-top:30px}
.iq-listbtn .iq-btn{min-width:184px}

@media (max-width:1024px){
    .iq-table thead th{font-size:15px}
    .iq-subjtxt{font-size:17px}
    .iq-td-cate{font-size:16px}
}
@media (max-width:768px){
    .iq-head{text-align:left}   /* 상단 안내글 좌측정렬 (리스트·글쓰기 공통) */
    .iq-listtop{flex-direction:column;align-items:stretch;gap:18px}
    /* 카테고리 탭 : 모바일에서 한 줄에 4개씩 */
    /* 모바일 : 자료실과 동일한 pill 칩 가로 스크롤 (PC는 기존 밑줄 유지) */
    .iq-filter{flex-wrap:nowrap;width:100%;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .iq-filter::-webkit-scrollbar{display:none}
    .iq-filter__tab{flex:0 0 auto;max-width:none;padding:7px 16px;border:1px solid #d9d9d9;border-radius:50px;background:#fff;font-size:13px;font-weight:500;color:#666;white-space:nowrap}
    .iq-filter__tab.is-active{border-color:#f42500;border-bottom-color:#f42500;color:#f42500}
    .iq-filter__tab:hover{border-color:#f42500;color:#f42500}
    .iq-listtop__right{align-items:center;gap:14px}
    .iq-search2{flex:1;width:auto;max-width:none}
    /* 작성자는 제목 아래로 이동 */
    .iq-subj-writer{display:block;margin-top:4px;font-size:12px;color:#888}
    /* 분류(2)·작성자(5) 열 접기 : 셀 제거(display:none) 대신 폭 0 + 내용 숨김 → 열 매핑 유지 */
    .iq-table thead th:nth-child(2),.iq-table tbody td:nth-child(2),
    .iq-table thead th:nth-child(5),.iq-table tbody td:nth-child(5){padding:0;font-size:0;overflow:hidden;white-space:nowrap}
    /* 컬럼 폭 : 제목(3)만 유동, 나머지 고정 / 분류·작성자=0 / 상태 축소 */
    .iq-table col{width:auto!important}
    .iq-table col:nth-child(1){width:44px!important}   /* NO */
    .iq-table col:nth-child(2){width:0!important}       /* 분류 */
    .iq-table col:nth-child(4){width:58px!important}   /* 상태 : 답변완료 배지에 맞춘 폭 */
    .iq-table col:nth-child(5){width:0!important}       /* 작성자 */
    .iq-table col:nth-child(6){width:66px!important}   /* 등록일 */
    .iq-table col.iq-col-check{width:44px!important}
    .iq-td-status{padding:10px 2px}
    .iq-table thead th{font-size:14px;padding:10px 4px}
    .iq-table tbody td{height:auto;padding:16px 6px;font-size:14px}
    .iq-td-no{font-size:14px}
    .iq-td-name{font-size:13px}
    .iq-td-date{font-size:11px !important;white-space:nowrap}
    .iq-subjtxt{font-size:15px}
    .iq-status{padding:1px 6px;font-size:11px;line-height:1.7;white-space:nowrap}
}

/* ===== 답변(댓글) 영역 ===== */
.iqc{margin-top:40px;font-family:'Pretendard',sans-serif}
.iqc__ttl{display:flex;align-items:center;gap:8px;margin:0 0 20px;font-size:20px;font-weight:600;color:#111}
.iqc__ttl i{color:#f42500}
.iqc__ttl em{font-style:normal;color:#f42500}
.iqc__list{display:flex;flex-direction:column;gap:12px}
.iqc-item{padding:20px 24px;border:1px solid #e5e5e5;border-radius:10px;background:#fafafa}
.iqc-item--reply{background:#fff;border-left:3px solid #f42500}
.iqc-item__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.iqc-item__name{font-size:15px;font-weight:600;color:#111}
.iqc-item__name i{color:#f42500;font-size:13px}
.iqc-item__date{font-size:13px;color:#999}
.iqc-item__date i{margin-right:3px}
.iqc-item__opt{margin-left:auto;display:flex;gap:12px}
.iqc-item__opt a{font-size:13px;color:#888;text-decoration:none}
.iqc-item__opt a:hover{color:#f42500}
.iqc-item__body{font-size:15px;line-height:1.7;color:#333;word-break:break-all;white-space:pre-line}
.iqc-item__body i{color:#888;margin-right:4px}
.iqc-empty{padding:40px 0;text-align:center;color:#999;font-size:15px;border:1px dashed #e0e0e0;border-radius:10px}

/* 답변 작성 폼 */
.iqc-write{margin-top:24px;padding:24px;border:1px solid #e5e5e5;border-radius:10px;background:#fff}
.iqc-write__ttl{margin:0 0 14px;font-size:16px;font-weight:600;color:#111}
.iqc-textarea{width:100%;min-height:110px;padding:14px 16px;border:0.8px solid #ccc;border-radius:8px;font-size:15px;line-height:1.6;color:#333;font-family:'Pretendard',sans-serif;outline:none;box-sizing:border-box;resize:vertical}
.iqc-textarea:focus{border-color:#f42500}
.iqc-textarea::placeholder{color:#aaa}
.iqc-count{margin:6px 0 0;font-size:13px;color:#999;text-align:right}
.iqc-write__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.iqc-write__left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.iqc-inp{height:42px;padding:0 14px;border:0.8px solid #ccc;border-radius:6px;font-size:14px;font-family:'Pretendard',sans-serif;outline:none}
.iqc-inp:focus{border-color:#f42500}
.iqc-secret{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#666;cursor:pointer}
.iqc-secret input{accent-color:#f42500;width:15px;height:15px}
.iqc-submit{flex:0 0 auto;height:44px;padding:0 28px;border:0;border-radius:6px;background:#f42500;color:#fff;font-size:15px;font-weight:600;cursor:pointer;font-family:'Pretendard',sans-serif;transition:background-color .2s}
.iqc-submit:hover{background:#e02200}
.iqc-submit:disabled{opacity:.6;cursor:default}
@media (max-width:768px){
    .iqc-write__foot{align-items:stretch}
    .iqc-submit{width:100%}
}