/* ===== 고객지원(service) 공통 스타일 =====
   layout.css 다음에 링크. 색/변수는 layout.css :root 재사용.
   좌측정렬 기준 = .wrap(max-width1720/padding48) = 네브바 로고 좌측 라인.
   Figma "고객지원" 섹션 실측값 반영. */

/* ---------- 히어로 (중앙 정렬 대제목) — 전 페이지 공통 실측 스펙 ----------
   실측(Figma, nav bottom=y73 기준): eyebrow top=193(→pad-top 120), title top=258,
   sub top=447. 다음 섹션 top: sub없음 619(→pad-bottom 196) / sub있음 672(→147). */
.sup-hero{text-align:center;padding:120px 0 196px}
.sup-hero.has-sub{padding-bottom:147px}          /* as·membership (sub 있는 페이지) */
.sup-hero .eyebrow{display:block;font-size:28px;font-weight:500;line-height:1.4;
  letter-spacing:-.025em;color:#004A48;margin-bottom:26px}
.sup-hero h1{font-size:64px;font-weight:700;line-height:1.3;letter-spacing:-.025em;color:#111}
.sup-hero .sub{margin-top:24px;font-size:24px;font-weight:500;line-height:1.625;
  letter-spacing:-.025em;color:#000}

/* ---------- 전체폭 배너 (aspect-ratio 유지 → 확대·크롭 없음) ---------- */
.sup-banner{position:relative;aspect-ratio:1920/636;overflow:hidden;background:#0c1a1a}
.sup-banner.tall{aspect-ratio:1920/833}
.sup-banner img{width:100%;height:100%;object-fit:cover;display:block}
.sup-banner .logo-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sup-banner .logo-overlay img{width:auto;height:76px}

/* ---------- 우측 플로팅 퀵바 ---------- */
.quick-nav{position:fixed;right:40px;top:50%;transform:translateY(-50%);z-index:48;
  display:flex;flex-direction:column;align-items:center;gap:19px}
.quick-nav .qn-panel{background:#004A47;border-radius:0;padding:25px 15px;
  display:flex;flex-direction:column;align-items:center;gap:15px;box-shadow:0 10px 24px rgba(0,0,0,.16)}
.quick-nav a.qn-item{display:flex;flex-direction:column;align-items:center;gap:4px;
  width:61px;color:#fff;font-size:14px;font-weight:500;line-height:1.45;text-align:center}
.quick-nav a.qn-item svg{width:35px;height:35px;stroke:#fff;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.quick-nav .qn-divider{width:50px;height:1px;background:#005E5B}
.quick-nav .qn-top{width:52px;height:52px;border-radius:50%;background:#fff;border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 14.3px 0 rgba(0,0,0,0.25)}
.quick-nav .qn-top svg{width:20px;height:24px;stroke:#004A48;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1280px){.quick-nav{display:none}}

/* ---------- 문의 폼 (고객상담·제휴제안 공통) ---------- */
.sup-form-wrap{padding:0 0 140px}   /* 실측: 버튼→푸터 ~140 */
hr.sup-line{border:0;border-top:1px solid #E5E5EC;margin:0}
hr.sup-line.dark{border-top-color:#111}
.sup-form{padding:40px 0 0}
.f-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;row-gap:30px}  /* 실측: input pitch 84 − h54 = 30 */
.f-field{display:flex;align-items:center;gap:20px}
.f-field.full{grid-column:1/-1}
.f-field.top{align-items:flex-start}
/* 세로형(top) 필드: 라벨을 인풋 placeholder 첫 줄과 일렬로 맞춤 */
.f-field.full.top>label{padding-top:16px}
.f-field>label{flex:0 0 150px;font-size:20px;font-weight:600;line-height:1.4;
  letter-spacing:-.025em;color:#111}
.f-field>label .req{color:#E5342A;margin-left:2px}
.f-body{flex:1;min-width:0}
/* input */
.f-input{width:100%;height:54px;border:1px solid #E5E5EC;border-radius:0;background:#fff;
  padding:0 16px;font-size:16px;font-weight:400;letter-spacing:-.025em;color:#111;
  font-family:inherit;outline:none;transition:border-color .15s}
.f-input::placeholder{color:#505050}
.f-input:focus{border-color:#004A48}
textarea.f-input{height:auto;min-height:280px;padding:16px;line-height:1.5;resize:vertical}
/* 파일첨부 */
.f-file{display:flex;gap:12px}
.f-file .f-input{flex:1}
.f-file .f-file-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:54px;
  padding:0 20px;background:#E5E5EC;border:none;border-radius:0;cursor:pointer;
  font-size:16px;font-weight:600;letter-spacing:-.025em;color:#505050;white-space:nowrap;font-family:inherit}
.f-note{margin-top:6px;font-size:12px;font-weight:400;line-height:1.45;
  letter-spacing:-.025em;color:#767676}   /* 실측: 인풋 아래 5~6px */
.f-note.indent{padding-left:170px}   /* 라벨열(150)+gap(20) 만큼 들여써서 인풋 좌측라인에 맞춤 */
/* 약관 박스 */
.f-agree-box{width:100%;border:1px solid #E5E5EC;border-radius:0;background:#fff;padding:30px;
  font-size:16px;font-weight:400;line-height:1.75;letter-spacing:-.025em;color:#111;
  max-height:520px;overflow-y:auto}
.f-agree-box h4{font-size:16px;font-weight:700;margin:0 0 4px}
.f-agree-box p{margin:0 0 14px}
.f-agree-box p:last-child{margin-bottom:0}
/* 동의 체크 */
.f-consent{display:flex;align-items:center;gap:14px;margin:20px 0 0;padding-left:170px}  /* 실측: 약관박스→체크 20 */
.f-consent input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  border:2px solid #E5E5EC;background:#fff;cursor:pointer;position:relative;flex:0 0 auto;margin:0}
.f-consent input:checked{border-color:#004A48}
.f-consent input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#004A48}
.f-consent label{font-size:18px;font-weight:500;letter-spacing:-.025em;color:#111;cursor:pointer}
.f-consent label .req{color:#E5342A;margin-left:2px}
/* 제출 버튼 */
.f-submit-row{display:flex;justify-content:center;padding-top:40px}
.f-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:256px;height:54px;padding:0 30px;border:none;border-radius:0;cursor:pointer;
  background:#004A48;color:#D7FAD4;font-size:18px;font-weight:600;letter-spacing:-.025em;
  font-family:inherit;transition:background .2s}
.f-submit:hover{background:#005E5B}

/* ---------- 고객상담 상단 FAQ 안내박스 ---------- */
.sup-faqbox{background:#F7F7FB;padding:50px 60px 60px;text-align:center;margin-bottom:120px;
  display:flex;flex-direction:column;align-items:center;gap:20px}   /* 실측: 박스→상단선 120 */
.sup-faqbox h2{font-size:28px;font-weight:600;line-height:1.4;letter-spacing:-.025em;color:#111}
.sup-faqbox p{font-size:20px;font-weight:400;line-height:1.4;letter-spacing:-.025em;color:#111}
.sup-faqbox .fb-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:20px;
  width:131px;height:42px;background:#004A48;color:#D7FAD4;font-size:14px;font-weight:500;
  letter-spacing:-.025em;transition:background .2s}   /* 실측: 텍스트블록→버튼 40(=gap20+margin20) */
.sup-faqbox .fb-btn:hover{background:#005E5B}

/* ---------- 게시판 테이블 (공지사항·자료실) ---------- */
.sup-board{padding:90px 0 130px}   /* 실측: 배너→테이블 90, 섹션 하단 130 */
.board-table{width:100%;border-collapse:collapse;border-top:1px solid #111}  /* 상단 진한 라인 #111 */
.board-table thead th{border-bottom:1px solid #E5E5EC}
.board-table tbody td{border-bottom:1px solid #E5E5EC}                        /* 행 구분선 옅은 #E5E5EC */
.board-table tbody tr:last-child td{border-bottom:1px solid #111}            /* 하단 진한 라인 #111 */
.board-table tr{height:70px}                                          /* 실측 70 */
.board-table td,.board-table th{font-size:14px;letter-spacing:-.025em;vertical-align:middle}  /* 실측 14 */
.board-table .c-no{width:110px;text-align:center;color:#111;font-weight:400}
.board-table .c-cat{width:130px;text-align:center;color:#111;font-weight:400}
.board-table .c-title{color:#111;font-weight:400;padding-left:8px}
.board-table .c-title a:hover{color:#004A48}
.board-table .c-date{width:150px;text-align:right;color:#767676;font-weight:400}   /* 날짜 #767676 */
.board-table tr.pinned .c-no{color:#111;font-weight:700}              /* 공지행 번호 fw700 #111 */
.board-table tr.pinned .c-title{font-weight:500}                      /* 공지행 제목 fw500 */
/* 페이지네이션 */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;padding:57px 0 0}   /* 실측: 테이블→페이저 57 */
.pager a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
  padding:0 6px;font-size:15px;font-weight:400;color:#767676;border-radius:4px;transition:.15s}
.pager a:hover{color:#004A48}
.pager a.on{color:#111;font-weight:700}
.pager a.nav{color:#9a9aa2}

/* ---------- FAQ (필터탭 + 검색 + 아코디언) ---------- */
.faq-wrap{padding:90px 0 130px}   /* 실측: 배너→탭 90, 섹션 하단 130 */
.faq-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.faq-tabs{display:flex;gap:0}                          /* 실측: 탭 붙어있음(gap 0) */
.faq-tab{width:154px;height:54px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #E5E5EC;border-radius:0;background:#fff;
  font-size:15px;font-weight:500;letter-spacing:-.025em;color:#505050;cursor:pointer;
  white-space:nowrap;transition:.15s;font-family:inherit}   /* 실측: 154px 고정 */
.faq-tab+.faq-tab{margin-left:-1px}                    /* 인접 보더 겹쳐 연속된 바 */
.faq-tab:hover{border-color:#004A48;color:#004A48;position:relative;z-index:1}
.faq-tab.on{background:#004A48;border-color:#004A48;color:#fff;position:relative;z-index:1}
.faq-search{flex:0 0 275px;display:flex;align-items:center;gap:8px;height:54px;padding:0 16px;
  border:1px solid #E5E5EC;border-radius:0}   /* 실측 275 */
.faq-search svg{width:20px;height:20px;stroke:#545461;fill:none;stroke-width:1.5}
.faq-search input{flex:1;border:none;outline:none;font-size:16px;letter-spacing:-.025em;
  color:#111;font-family:inherit;background:transparent}
.faq-search input::placeholder{color:#9a9aa2}
.faq-list{margin-top:12px;border-top:1px solid #111;border-bottom:1px solid #111}  /* 상·하단 진한 #111 */
.faq-item{border-bottom:1px solid #E5E5EC}                                          /* 항목 사이 옅은 #E5E5EC */
.faq-item:last-child{border-bottom:none}                                           /* 하단은 목록 border가 담당 */
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  padding:26px 8px;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;
  font-size:20px;font-weight:600;letter-spacing:-.025em;color:#111}
.faq-q .faq-qwrap{flex:1 1 auto;min-width:0;text-align:left}   /* 번호+제목 = 좌측 한 덩어리 */
.faq-q .chev{flex:0 0 auto;width:40px;height:40px;stroke:#111;fill:none;stroke-width:1.6;
  transition:transform .25s}
.faq-item.open .chev{transform:rotate(180deg)}       /* 열리면 ∧ */
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a-inner{padding:40px 90px;font-size:16px;font-weight:400;line-height:1.7;
  letter-spacing:-.025em;color:#505050}   /* 실측: 펼침박스 pad T40/R90/B40/L90 */
.faq-item.open .faq-a{max-height:600px;background:#F1F1F5}   /* 펼침 배경 회색 #F1F1F5 (실측) */

/* ---------- 검은 안내박스 (A/S신청) ---------- */
.sup-notice{background:#111;color:#fff;text-align:center;padding:50px 60px 60px}   /* 실측 pad 50/60/60 */
.sup-notice h3{font-size:28px;font-weight:600;letter-spacing:-.025em;margin-bottom:20px}
.sup-notice p{font-size:20px;font-weight:400;line-height:1.6;letter-spacing:-.025em;color:#D9D9D9}
.sup-notice p .u{text-decoration:underline;color:#fff}

/* ---------- 반응형 ---------- */
@media(max-width:1080px){
  .sup-hero{padding:80px 0 50px}
  .sup-hero h1{font-size:40px}
  .sup-hero .eyebrow{font-size:20px}
  .sup-hero .sub{font-size:18px}
  .f-grid{grid-template-columns:1fr}
  .f-field{flex-direction:column;align-items:stretch;gap:10px}
  .f-field>label{flex:none}
  .f-note.indent,.f-consent{padding-left:0}
  .faq-search{flex-basis:200px}
}
@media(max-width:640px){
  .sup-hero h1{font-size:30px}
  .sup-faqbox{padding:34px 20px}
  .sup-faqbox h2{font-size:20px}
  .sup-faqbox p{font-size:15px}
  .board-table .c-cat{display:none}
  .f-file{flex-direction:column}
}

/* ===== 공지 상세 (board-view) — 게시판 공통 톤 ===== */
.board-view{border-top:2px solid #111}
.board-view .bv-head{padding:28px 8px;border-bottom:1px solid #E5E5EC}
.board-view .bv-title{font-size:22px;font-weight:600;letter-spacing:-.025em;color:#111;line-height:1.4}
.board-view .bv-meta{margin-top:14px;display:flex;gap:18px;font-size:14px;font-weight:400;letter-spacing:-.025em;color:#767676}
.board-view .bv-content{padding:40px 8px;min-height:200px;border-bottom:1px solid #111;
  font-size:16px;line-height:1.7;letter-spacing:-.025em;color:#333}
.board-view .bv-content img{max-width:100%;height:auto}
.bv-actions{display:flex;justify-content:flex-end;margin-top:24px}
.bv-actions .bv-list-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 40px;
  background:#004A48;color:#D7FAD4;font-size:16px;font-weight:600;letter-spacing:-.025em}
.bv-actions .bv-list-btn:hover{background:#005E5B}