/* ═══════════════════════════════════════
   SG Customer Center CSS
══════════════════════════════════════ */

/* ── 페이지 헤더 ── */
.sg-customer-page{ min-height:60vh; }
.sgc-header{
  background:#f4f6f8;
  padding:60px 20px 50px;
  text-align:center;
  border-bottom:1px solid #e8e8e8;
  position:relative;
  overflow:hidden;
  min-height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.sgc-header-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,20,60,0.55);
  z-index:0;
}
.sgc-header h1{
  font-size:2.4em;
  font-weight:800;
  color:#111;
  letter-spacing:-0.02em;
  margin:0;
  position:relative;
  z-index:1;
}
/* 배경이미지 있을 때 h1 색상 */
.sgc-header[style*="background-image"] h1{
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,0.4);
}

/* ── 탭 ── */
.sgc-tab-wrap{
  border-bottom:2px solid #e0e0e0;
  background:#fff;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.sgc-tabs{
  display:flex;
  max-width:1200px;
  margin:0 auto;
  padding:0 30px;
  list-style:none;
  gap:0;
}
.sgc-tabs li a{
  display:block;
  padding:18px 32px;
  font-size:1em;
  font-weight:500;
  color:#666;
  text-decoration:none;
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
  transition:all 0.2s;
}
.sgc-tabs li.active a,
.sgc-tabs li a:hover{
  color:var(--mainColor,#004ea2);
  border-bottom-color:var(--mainColor,#004ea2);
  font-weight:700;
}

/* ── 본문 ── */
.sgc-body{
  max-width:1200px;
  margin:0 auto;
  padding:48px 30px 80px;
}

/* ── 카테고리 필터 ── */
.sgc-cat-filter{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.sgc-cat-filter a{
  display:inline-block;
  padding:7px 18px;
  border:1px solid #ddd;
  border-radius:20px;
  font-size:0.88em;
  color:#555;
  text-decoration:none;
  transition:all 0.2s;
}
.sgc-cat-filter a:hover,
.sgc-cat-filter a.active{
  background:var(--mainColor,#004ea2);
  border-color:var(--mainColor,#004ea2);
  color:#fff;
}

/* ── 검색 ── */
.sgc-search-wrap{
  margin-bottom:32px;
}
.sgc-search-wrap form{
  display:flex;
  max-width:560px;
  margin:0 auto;
  border:1.5px solid #ccc;
  border-radius:30px;
  overflow:hidden;
  background:#fff;
}
.sgc-search-wrap input[type="text"]{
  flex:1;
  border:none;
  padding:12px 22px;
  font-size:0.95em;
  outline:none;
  background:transparent;
}
.sgc-search-wrap button{
  background:none;
  border:none;
  padding:0 20px;
  cursor:pointer;
  color:#888;
}
.sgc-search-wrap button:hover{ color:var(--mainColor,#004ea2); }

/* ── 게시판 ── */
.sgc-board{ border-top:2px solid #111; }
.sgc-board-head{
  display:grid;
  grid-template-columns:70px 120px 1fr 60px 110px;
  padding:12px 16px;
  font-size:0.88em;
  font-weight:600;
  color:#555;
  border-bottom:1px solid #ddd;
  background:#fafafa;
}
.sgc-board-row{
  display:grid;
  grid-template-columns:70px 120px 1fr 60px 110px;
  padding:16px 16px;
  border-bottom:1px solid #eee;
  align-items:center;
  cursor:pointer;
  transition:background 0.15s;
}
.sgc-board-row:hover{ background:#f5f9ff; }
.sgc-board-row .col-num{ color:#999; font-size:0.9em; text-align:center; }
.sgc-board-row .col-cat{ font-size:0.85em; }
.sgc-board-row .col-title a{ color:#111; text-decoration:none; font-weight:500; }
.sgc-board-row .col-title a:hover{ color:var(--mainColor,#004ea2); }
.sgc-board-row .col-attach{ text-align:center; color:#888; }
.sgc-board-row .col-date{ color:#888; font-size:0.88em; text-align:right; }

/* Q&A 전용 컬럼 */
.sgc-board-head:has(.col-status),
.sgc-board-row:has(.col-status){
  grid-template-columns:70px 1fr 100px 90px 110px;
}
.col-author{ color:#666; font-size:0.9em; text-align:center; }
.col-status{ font-size:0.85em; font-weight:600; text-align:center; }
.col-status.answered{ color:#22a060; }
.col-status.pending{ color:#e55; }

.sgc-cat-badge{
  display:inline-block;
  padding:2px 10px;
  background:#e8f0ff;
  color:var(--mainColor,#004ea2);
  border-radius:12px;
  font-size:0.82em;
  font-weight:600;
  text-decoration:none;
}
.sgc-reply-cnt{ color:var(--mainColor,#004ea2); font-size:0.85em; margin-left:4px; }
.sgc-lock{ color:#888; font-size:0.9em; }

/* ── 게시판 푸터 ── */
.sgc-board-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:24px;
}

/* ── 페이지네이션 ── */
.sgc-pagination{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-top:32px;
}
.sgc-page-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border:1px solid #ddd;
  border-radius:6px;
  font-size:0.9em;
  color:#555;
  text-decoration:none;
  transition:all 0.15s;
}
.sgc-page-btn:hover,
.sgc-page-btn.active{
  background:var(--mainColor,#004ea2);
  border-color:var(--mainColor,#004ea2);
  color:#fff;
}

/* ── 빈 상태 ── */
.sgc-empty{
  text-align:center;
  padding:60px;
  color:#aaa;
  font-size:0.95em;
  border-bottom:1px solid #eee;
}

/* ── 버튼 ── */
.sgc-btn{
  display:inline-block;
  padding:10px 24px;
  border-radius:6px;
  font-size:0.92em;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  border:none;
  transition:all 0.2s;
}
.sgc-btn-primary{
  background:var(--mainColor,#004ea2);
  color:#fff;
}
.sgc-btn-primary:hover{ background:#003d82; color:#fff; }
.sgc-btn-outline{
  background:#fff;
  color:#555;
  border:1px solid #ccc;
}
.sgc-btn-outline:hover{ border-color:#888; color:#111; }

/* ── 상세 보기 ── */
.sgc-detail{ border-top:2px solid #111; }
.sgc-detail-head{
  padding:28px 0 20px;
  border-bottom:1px solid #eee;
}
.sgc-detail-num{ color:#aaa; font-size:0.88em; }
.sgc-detail-title{
  font-size:1.3em;
  font-weight:700;
  margin:8px 0 10px;
  color:#111;
}
.sgc-secret-badge{
  font-size:0.65em;
  font-weight:500;
  background:#f3f3f3;
  padding:3px 8px;
  border-radius:4px;
  color:#888;
  vertical-align:middle;
}
.sgc-detail-meta{
  display:flex;
  gap:16px;
  font-size:0.88em;
  color:#888;
  align-items:center;
}
.sgc-detail-meta .answered{ color:#22a060; font-weight:600; }
.sgc-detail-meta .pending{ color:#e55; font-weight:600; }
.sgc-detail-body{
  padding:32px 0;
  line-height:1.8;
  color:#333;
  border-bottom:1px solid #eee;
  white-space:pre-wrap;
}
.sgc-detail-foot{
  display:flex;
  justify-content:flex-start;
  margin-top:24px;
}

/* ── Q&A 답변 ── */
.sgc-reply{
  background:#f5f9ff;
  border-left:4px solid var(--mainColor,#004ea2);
  padding:20px 24px;
  margin-top:24px;
  border-radius:0 8px 8px 0;
}
.sgc-reply-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.sgc-reply-icon{
  font-size:1.1em;
  color:var(--mainColor,#004ea2);
}
.sgc-reply-head strong{ color:#004ea2; }
.sgc-reply-date{ color:#aaa; font-size:0.85em; margin-left:auto; }
.sgc-reply-body{ line-height:1.8; color:#333; white-space:pre-wrap; }

/* ── Q&A 작성 폼 ── */
.sgc-write-wrap{
  max-width:760px;
  margin:0 auto;
}
.sgc-write-title{
  font-size:1.4em;
  font-weight:700;
  margin-bottom:28px;
  padding-bottom:16px;
  border-bottom:2px solid #111;
}
.sgc-form-row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px 20px;
  align-items:start;
  padding:14px 0;
  border-bottom:1px solid #f0f0f0;
}
.sgc-form-row label{
  font-size:0.92em;
  font-weight:600;
  color:#333;
  padding-top:10px;
}
.sgc-form-row label em{ color:#e44; margin-left:2px; }
.sgc-form-row input[type="text"],
.sgc-form-row input[type="email"],
.sgc-form-row input[type="password"],
.sgc-form-row textarea{
  width:100%;
  padding:10px 14px;
  border:1px solid #ddd;
  border-radius:6px;
  font-size:0.92em;
  outline:none;
  transition:border-color 0.2s;
  box-sizing:border-box;
}
.sgc-form-row input:focus,
.sgc-form-row textarea:focus{ border-color:var(--mainColor,#004ea2); }
.sgc-form-row-check{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
  grid-template-columns:1fr;
  padding-left:140px;
}
.sgc-check-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.9em;
  color:#555;
  cursor:pointer;
}
.sgc-password-wrap input{
  width:240px;
  padding:8px 12px;
  border:1px solid #ddd;
  border-radius:6px;
}
.sgc-form-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:28px;
}
.sgc-msg-error{
  background:#fff0f0;
  border:1px solid #fcc;
  color:#c33;
  padding:10px 16px;
  border-radius:6px;
  font-size:0.9em;
  margin-top:10px;
}
.sgc-msg-success{
  background:#f0fff4;
  border:1px solid #9de;
  color:#1a7a4a;
  padding:10px 16px;
  border-radius:6px;
  font-size:0.9em;
  margin-top:10px;
}

/* ── FAQ ── */
.sgc-faq-list{ margin-top:8px; }
.sgc-faq-item{
  border-bottom:1px solid #eee;
  overflow:hidden;
}
.sgc-faq-q{
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px 16px;
  background:none;
  border:none;
  cursor:pointer;
  font-size:0.98em;
  font-weight:600;
  color:#111;
  text-align:left;
  transition:background 0.15s;
}
.sgc-faq-q:hover{ background:#f8f8f8; }
.sgc-faq-icon{
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--mainColor,#004ea2);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:0.88em;
}
.sgc-faq-icon-a{
  background:#22a060;
  align-self:flex-start;
  margin-top:2px;
}
.sgc-faq-arrow{
  margin-left:auto;
  color:#bbb;
  font-size:0.8em;
  transition:transform 0.25s;
}
.sgc-faq-item.open .sgc-faq-arrow{ transform:rotate(180deg); }
.sgc-faq-a{
  display:none;
  gap:16px;
  padding:20px 16px 28px;
  background:#f8fbff;
  font-size:0.93em;
  line-height:1.8;
  color:#333;
}
.sgc-faq-item.open .sgc-faq-a{ display:flex; }

/* ── 반응형 ── */
@media(max-width:768px){
  .sgc-header h1{ font-size:1.8em; }
  .sgc-tabs li a{ padding:14px 18px; font-size:0.9em; }
  .sgc-body{ padding:32px 16px 60px; }
  .sgc-board-head,
  .sgc-board-row{
    grid-template-columns:50px 1fr 80px;
  }
  .sgc-board-head .col-cat,
  .sgc-board-row .col-cat,
  .sgc-board-head .col-attach,
  .sgc-board-row .col-attach,
  .sgc-board-head .col-author,
  .sgc-board-row .col-author{ display:none; }
  .sgc-form-row{ grid-template-columns:1fr; gap:6px; }
  .sgc-form-row label{ padding-top:0; }
  .sgc-form-row-check{ padding-left:0; }
}
@media(max-width:768px){
  .sgc-board{ width:100%; overflow-x:hidden; }
  .sgc-board-head, .sgc-board-row{
    width:100%; box-sizing:border-box; padding:10px 8px;
    grid-template-columns:40px 1fr 54px 72px;
  }
  .sgc-board-head .col-cat, .sgc-board-row .col-cat,
  .sgc-board-head .col-attach, .sgc-board-row .col-attach{ display:none; }
  .sgc-board-head .col-num, .sgc-board-row .col-num,
  .sgc-board-head .col-status, .sgc-board-row .col-status,
  .sgc-board-head .col-date, .sgc-board-row .col-date{
    font-size:0.75em; text-align:center;
  }
  .sgc-board-row .col-title{ text-align:left; word-break:break-word; }
}

/* ★ Q&A 상세보기 — 번호 숨기기 */
.sgc-detail-num { display: none !important; }

/* ★ 공지사항 단일 페이지 — 모바일 이미지 overflow 방지 */
@media(max-width:768px){
  .sg-notice-single, .sgn-content, .sgc-detail {
    width:100% !important; max-width:100% !important;
    overflow-x:hidden !important; box-sizing:border-box !important;
  }
  .sgn-content img, .sgc-detail img, .sg-notice-single img,
  .wp-block-image img, .wp-block-image {
    max-width:100% !important; width:auto !important; height:auto !important;
  }
  .sgc-body.w_container {
    padding-left:16px !important; padding-right:16px !important;
    overflow-x:hidden !important;
  }
}

/* ★ 공지사항 단일 페이지 (sgn-*) */
.sg-notice-single .sgc-body { max-width: 860px; margin: 0 auto; }
.sgn-head { border-bottom: 2px solid #111; padding: 24px 0 20px; }
.sgn-cat { display:inline-block; font-size:0.78em; font-weight:600; color:var(--mainColor,#004ea2); letter-spacing:1px; margin-bottom:10px; }
.sgn-title { font-size:1.5em; font-weight:700; color:#111; line-height:1.4; margin:0 0 12px; }
.sgn-meta { font-size:0.85em; color:#888; display:flex; gap:16px; flex-wrap:wrap; }
.sgn-content { padding:40px 0; font-size:1em; color:#333; line-height:1.9; border-bottom:1px solid #e8e8e8; }
.sgn-content img { max-width:100%; height:auto; display:block; margin:16px auto; border-radius:8px; }
.sgn-content p { margin:0 0 16px; }
.sgn-nav { display:flex; gap:12px; padding:24px 0; }
@media(max-width:768px){
  .sgn-title { font-size:1.2em; }
  .sgn-content { padding:24px 0; font-size:0.95em; }
  .sgn-content img { max-width:100% !important; width:100% !important; }
}

/* ★ 공지사항 게시판 — 헤더/행 정렬 통일 */
.sgc-board-head .col-num,
.sgc-board-row .col-num { text-align: center; }
.sgc-board-head .col-cat,
.sgc-board-row .col-cat { text-align: center; }
.sgc-board-head .col-title { text-align: center; }
.sgc-board-row .col-title  { text-align: left; }
.sgc-board-head .col-attach,
.sgc-board-row .col-attach { text-align: center; }
.sgc-board-head .col-date,
.sgc-board-row .col-date { text-align: center; }

/* ★ 공지사항 게시판 — 카테고리·첨부파일 컬럼 숨기기 */
.sgc-board-head .col-cat,
.sgc-board-row .col-cat,
.sgc-board-head .col-attach,
.sgc-board-row .col-attach { display: none !important; }

/* 그리드 재조정: 번호(70px) 제목(1fr) 작성일(110px) */
.sgc-board-head,
.sgc-board-row { grid-template-columns: 70px 1fr 110px !important; }

/* sg-main-icon override */
.sg-main-icon-img {
  border-radius: 0 !important;
  border: none !important;
  overflow: visible !important;
  background: none !important;
  box-shadow: none !important;
}
.sg-main-icon-img img {
  width: 100% !important;
  height: auto !important;
  object-fit: unset !important;
}