/* 고객지원 게시판 공용 스타일 (공지사항·묻고답하기·자료실·견적문의 — 목록/상세/글쓰기)
 * 목록 화면의 기존 인라인 스타일과 같은 규칙 + 상세·글쓰기 화면용 규칙 */

/* ===== PAGE HERO ===== */
.page-hero { position:relative; height:340px; background:var(--navy); display:flex; align-items:center; overflow:hidden; }
.page-hero .container { position:relative; z-index:2; }
/* 고객지원 머리 그림 (2026-10-15) — Unsplash 무료 3q4V539j_bw(노트북·서류·펜), 남색 덮개 */
.page-hero::before { content:''; position:absolute; inset:0; z-index:0; background:url('../images/hero/support-hero-2.jpg') center/cover no-repeat; }
.page-hero::after { content:''; position:absolute; inset:0; z-index:1; background:rgba(14,31,56,.8); }
.hero-breadcrumb { display:flex; gap:8px; font-size:13px; color:#c5ccd8; margin-bottom:16px; }
.hero-breadcrumb a { color:#c5ccd8; text-decoration:none; }
.hero-breadcrumb a:hover { color:#fff; }
.hero-breadcrumb .sep { color:#8a93a0; }
.page-hero h1 { font-size:36px; font-weight:800; color:#fff; margin-bottom:10px; letter-spacing:-0.02em; }
.page-hero p { font-size:15px; color:#d5dae2; line-height:1.7; }
.support-tabs { display:flex; gap:6px; margin-top:24px; flex-wrap:wrap; }
.support-tab { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:0; font-size:13px; font-weight:600; color:#d5dae2; text-decoration:none; background:none; border:1px solid rgba(255,255,255,.35); transition:all .2s; }
.support-tab:hover { color:#fff; border-color:#fff; }
.support-tab.active { background:#fff; color:var(--dark); border-color:#fff; }
.support-tab.active:hover { background:#fff; color:var(--dark); }

/* ===== BOARD ===== */
.board-section { padding:60px 0 80px; background:var(--gray-50); }
.board-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.board-total { font-size:14px; color:var(--gray-600); }
.board-total strong { color:var(--primary); font-weight:800; }
.board-search { display:flex; gap:8px; align-items:center; }
.board-search select, .board-search input { height:42px; border:1px solid var(--gray-300); border-radius:0; padding:0 14px; font-size:14px; background:#fff; }
.board-search input { min-width:240px; }
.board-search button { height:42px; padding:0 18px; background:var(--primary); color:#fff; border:none; border-radius:0; font-size:14px; font-weight:700; cursor:pointer; transition:all .2s; }
.board-search button:hover { background:var(--primary-light); }

.board-table { width:100%; background:#fff; border-radius:0; overflow:hidden; box-shadow:none; border:1px solid var(--gray-200); border-collapse:separate; border-spacing:0; }
.board-table thead th {
  background:var(--dark); color:#fff;
  padding:16px 20px; font-size:13px; font-weight:700; letter-spacing:.5px;
  text-align:center; border:none;
}
.board-table thead th:nth-child(2) { text-align:start; }
.board-table tbody td {
  padding:16px 20px; font-size:14px; background:#fff; border-bottom:1px solid var(--gray-100);
  text-align:center; transition:background .15s;
}
.board-table tbody td:nth-child(2) { text-align:start; }
.board-table tbody tr { cursor:pointer; }
.board-table tbody tr:hover td { background:var(--gray-50); }
.board-table tbody tr.pinned td { background:#fdf1ec; font-weight:700; }
.board-table tbody tr.pinned:hover td { background:#fbe4da; }
.board-table tbody tr:last-child td { border-bottom:none; }

.col-no { width:80px; color:var(--gray-500); font-size:13px; }
.col-title a { color:var(--dark); text-decoration:none; font-weight:600; }
.col-title a:hover { color:var(--primary); }
.col-date { width:130px; color:var(--gray-500); font-size:13px; }
.col-views { width:90px; color:var(--gray-500); font-size:13px; }

.tag-badge { display:inline-block; padding:3px 10px; border-radius:0; font-size:12px; font-weight:700; margin-inline-end:8px; vertical-align:middle; }
/* 공지 분류 (2026-10-16 사용자 지시): 중요 = 꽉 찬 빨간 배지 · 업데이트·행사·점검 = 검은 테두리 흰 바탕 검은 글자 · 공지 = 회색 그대로 */
.tag-badge.red { background:#b91c1c; color:#fff; border:1px solid #b91c1c; }
.tag-badge.blue, .tag-badge.amber, .tag-badge.orange { background:#fff; color:#111418; border:1px solid #111418; }
.tag-badge.gray { background:#f3f4f6; color:#4b5563; border:1px solid #f3f4f6; }   /* 다른 분류와 높이 맞춤 */
.pin-icon { color:var(--accent); margin-inline-end:6px; font-size:14px; }

.board-pagination { display:flex; justify-content:center; gap:6px; margin-top:30px; }
.board-pagination a { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border:1px solid var(--gray-300); border-radius:0; background:#fff; color:var(--gray-600); text-decoration:none; font-size:14px; font-weight:600; transition:all .2s; }
.board-pagination a:hover { border-color:var(--primary); color:var(--primary); }
.board-pagination a.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ===== CTA ===== */
.support-cta { padding:60px 0; background:#fff; text-align:center; border-top:1px solid var(--gray-100); }
.support-cta h3 { font-size:24px; font-weight:800; margin-bottom:10px; }
.support-cta p { color:var(--gray-600); margin-bottom:22px; font-size:14px; }
.support-cta .cta-buttons { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.support-cta .cta-btn-primary { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:0; background:var(--primary); color:#fff; font-weight:700; font-size:14px; text-decoration:none; transition:all .25s; }
.support-cta .cta-btn-primary:hover { background:var(--primary-light); color:#fff; }
.support-cta .cta-btn-outline { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:0; background:#fff; color:var(--gray-700); font-weight:600; font-size:14px; text-decoration:none; border:1px solid var(--gray-300); transition:all .25s; }
.support-cta .cta-btn-outline:hover { border-color:var(--primary); color:var(--primary); }

/* ===== 묻고답하기·견적문의 목록 추가 규칙 (기존 화면과 동일) ===== */
.board-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.board-controls select, .board-controls input { height:42px; border:1px solid var(--gray-300); border-radius:0; padding:0 14px; font-size:14px; background:#fff; }
.board-controls input { min-width:200px; }
.board-controls button { height:42px; padding:0 18px; background:var(--primary); color:#fff; border:none; border-radius:0; font-size:14px; font-weight:700; cursor:pointer; transition:all .2s; }
.board-controls button:hover { background:var(--primary-light); }
.btn-write { background:var(--accent) !important; }
.btn-write:hover { background:#c94a24 !important; }
.col-writer { width:100px; color:var(--gray-600); font-size:13px; }
.col-status { width:90px; }
.cat-badge { display:inline-block; padding:3px 10px; border-radius:0; font-size:12px; font-weight:700; margin-inline-end:8px; vertical-align:middle; }
.cat-badge.teal   { background:#ccfbf1; color:#0f766e; }
.cat-badge.blue   { background:#dbeafe; color:#1d4ed8; }
.cat-badge.amber  { background:#fef3c7; color:#b45309; }
.cat-badge.purple { background:#ede9fe; color:#6d28d9; }
.cat-badge.pink   { background:#fce7f3; color:#be185d; }
.cat-badge.gray   { background:#f3f4f6; color:#4b5563; }
.status-badge { display:inline-block; padding:4px 12px; border-radius:0; font-size:12px; font-weight:700; }
.status-badge.wait { background:#fef3c7; color:#b45309; }
.status-badge.done { background:#d1fae5; color:#047857; }
.cat-badge.red    { background:#fee2e2; color:#b91c1c; }
.status-badge.progress { background:#dbeafe; color:#1d4ed8; }

/* ===== 빈 목록 · 알림 ===== */
.board-table tbody tr.empty-row { cursor:default; }
.board-table tbody tr.empty-row td { padding:60px 20px; text-align:center !important; color:var(--gray-600); font-size:15px; }
.board-table tbody tr.empty-row:hover td { background:#fff; }
.board-alert { padding:14px 18px; border-radius:0; font-size:14px; margin-bottom:20px; font-weight:600; }
.board-alert.success { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.board-alert.error { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.private-icon { color:var(--gray-600); margin-inline-end:6px; }
.hp-field { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ===== 상세 보기 ===== */
.board-view { background:#fff; border-radius:0; box-shadow:none; border:1px solid var(--gray-200); overflow:hidden; }
.board-view-head { padding:28px 32px; border-bottom:2px solid var(--dark); }
.board-view-head h2 { font-size:22px; font-weight:800; color:var(--dark); margin:10px 0 12px; line-height:1.45; word-break:keep-all; }
.board-view-meta { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--gray-600); }
.board-view-meta i { margin-inline-end:4px; }
.board-view-body { padding:32px; font-size:15px; line-height:1.9; color:#1f2937; min-height:200px; word-break:break-word; }
.board-answer { margin:0 32px 32px; padding:24px 28px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:0; }
.board-answer h4 { font-size:16px; font-weight:800; color:var(--primary); margin-bottom:12px; }
.board-answer .answer-date { font-size:13px; color:var(--gray-600); font-weight:400; margin-inline-start:8px; }
.board-answer .answer-body { font-size:15px; line-height:1.9; color:#1f2937; word-break:break-word; }
.board-answer.waiting { background:#fffbeb; border-color:#fcd34d; }
.board-answer.waiting h4 { color:#b45309; }
.board-nav { margin-top:20px; background:#fff; border-radius:0; overflow:hidden; box-shadow:none; border:1px solid var(--gray-200); }
.board-nav > a, .board-nav > span { display:flex; gap:16px; padding:14px 24px; font-size:14px; color:var(--dark); text-decoration:none; border-bottom:1px solid var(--gray-100); }
.board-nav > a:last-child, .board-nav > span:last-child { border-bottom:none; }
.board-nav > a:hover { background:var(--gray-50); color:var(--primary); }
.board-nav .nav-label { width:70px; flex-shrink:0; color:var(--gray-600); font-weight:700; }
.board-nav > span { color:var(--gray-600); }
.board-actions { display:flex; justify-content:space-between; gap:10px; margin-top:24px; flex-wrap:wrap; }
.btn-board { display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 22px; border-radius:0; font-size:14px; font-weight:700; text-decoration:none; border:1px solid var(--gray-200); background:#fff; color:var(--dark); cursor:pointer; }
.btn-board:hover { border-color:var(--primary); color:var(--primary); }
.btn-board.primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-board.primary:hover { background:var(--primary-light); color:#fff; }
.btn-board.danger { color:#b91c1c; border-color:#fca5a5; }
.btn-board.danger:hover { background:#fee2e2; }

/* ===== 비밀번호 확인 ===== */
.pw-box { max-width:440px; margin:0 auto; padding:36px 32px; background:#fff; border-radius:0; box-shadow:none; border:1px solid var(--gray-200); text-align:center; }
.pw-box i.bi-lock-fill { font-size:34px; color:var(--primary); }
.pw-box p { font-size:15px; color:#1f2937; margin:14px 0 20px; line-height:1.7; }
.pw-box input[type=password] { width:100%; height:46px; border:1px solid var(--gray-200); border-radius:0; padding:0 14px; font-size:15px; margin-bottom:12px; }
.pw-box .btn-board { width:100%; justify-content:center; }
.delete-box { margin-top:16px; padding:20px 24px; background:#fff; border:1px solid #fca5a5; border-radius:0; }
.delete-box p { font-size:14px; color:#1f2937; margin-bottom:12px; }
.delete-box form { display:flex; gap:8px; flex-wrap:wrap; }
.delete-box input[type=password] { flex:1; min-width:180px; height:44px; border:1px solid var(--gray-200); border-radius:0; padding:0 14px; font-size:14px; }

/* ===== 글쓰기 ===== */
.board-form { background:#fff; border-radius:0; box-shadow:none; border:1px solid var(--gray-200); padding:36px 36px 32px; }
.board-form .form-label { font-size:14px; font-weight:700; color:var(--dark); }
.board-form .form-text { font-size:13px; color:var(--gray-600); }
.board-form .form-control, .board-form .form-select { font-size:15px; border-color:var(--gray-200); border-radius:0; }
.board-form textarea.form-control { min-height:260px; }

/* 목록 도구줄의 글쓰기 버튼 (링크) */
.board-controls a.board-write-link { display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 18px; color:#fff; border-radius:0; font-size:14px; font-weight:700; text-decoration:none; }
.board-controls a.board-write-link:hover { color:#fff; }

/* 자료실 카드 (링크) */
a.resource-card { text-decoration:none; color:inherit; }
a.resource-card:hover { color:inherit; }

/* 견적 목록은 개인정보라 상세 열람 없음 */
.quote-table tbody tr { cursor:default; }

/* 상태 배지: 줄바꿈 막기 + Bootstrap .progress(막대그래프) 모양과 겹치지 않게 */
.status-badge { white-space:nowrap; }
.status-badge.progress { display:inline-block; height:auto; overflow:visible; font-size:12px; line-height:normal; background:#dbeafe; color:#1d4ed8; border-radius:0; }

/* 자료실 "설치 파일" 분류 배지 */
.res-cat-badge.installer { background:#ede9fe; color:#6d28d9; }

/* 프로그램으로 걸러 볼 때 표시 (누르면 해제) */
.prog-chip { display:inline-flex; align-items:center; gap:4px; height:42px; padding:0 14px; border-radius:0; background:var(--gray-50); border:1px solid var(--gray-200); color:var(--dark); font-size:14px; font-weight:700; text-decoration:none; }
.prog-chip:hover { border-color:var(--dark); color:var(--dark); }

/* =====================================================================
   반응형 (태블릿 · 모바일) — PC 화면은 바꾸지 않음
   ===================================================================== */
@media (max-width:991px) {
  .page-hero { height:auto; padding:112px 0 44px; }
  .page-hero h1 { font-size:30px; }
  .board-section { padding:44px 0 60px; }
  .col-views { display:none; }
  .board-table thead th, .board-table tbody td { padding:14px 14px; }
  .board-view-head { padding:24px 24px; }
  .board-view-body { padding:24px; }
  .board-answer { margin:0 24px 24px; }
  .board-form { padding:28px 24px; }
}

@media (max-width:767px) {
  /* 윗부분: 머리글에 가리지 않게 + 메뉴 4개는 한 줄 가로 넘김 */
  .page-hero { padding:84px 0 20px; }
  .page-hero::before, .page-hero::after { display:none; }
  .hero-breadcrumb { font-size:12px; gap:6px; margin-bottom:8px; }
  .page-hero h1 { font-size:19px; margin-bottom:6px; letter-spacing:-.5px; }
  .page-hero p { font-size:12px; line-height:1.6; }
  .support-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:16px 0 0; padding:0; }
  .support-tab { justify-content:center; padding:9px 8px; font-size:12px; white-space:nowrap; }
  html[lang=es] .support-tab, html[lang=ar] .support-tab { white-space:normal; text-align:center; line-height:1.3; }   /* 스페인어·아랍어는 탭 이름이 길어 두 줄 허용 */

  /* 검색줄: [분류][검색어][검색] + 글쓰기는 아랫줄 가득 */
  .board-section { padding:20px 0 40px; }
  .board-toolbar { flex-direction:column; align-items:stretch; gap:10px; margin-bottom:12px; }
  .board-total { font-size:12px; }
  .board-search, .board-controls { width:100%; flex-wrap:wrap; gap:6px; }
  .board-search select, .board-search input, .board-controls select, .board-controls input { height:40px; padding:0 10px; font-size:13px; }
  .board-search select, .board-controls select { flex:0 0 auto; max-width:40%; }
  .board-search input, .board-controls input { flex:1 1 120px; min-width:0; }
  .board-search button, .board-controls button { height:40px; padding:0 14px; flex:0 0 auto; }
  .board-controls a.board-write-link, .board-controls .btn-write { flex:1 1 100%; justify-content:center; height:40px; }
  .prog-chip { height:40px; }

  /* 목록: 표 → 한 줄 목록 (제목 한 줄 + 작성자·날짜·상태 작은 줄) */
  .board-table, .board-table tbody { display:block; }
  .board-table thead { display:none; }
  .board-table tbody tr { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:12px 14px; background:#fff; border-bottom:1px solid var(--gray-100); }
  .board-table tbody tr:last-child { border-bottom:none; }
  .board-table tbody tr.pinned { background:#fdf1ec; }
  .board-table tbody td { display:block; width:auto; padding:0; border:none; background:transparent; text-align:start; font-size:12px; color:var(--gray-600); }
  .board-table tbody tr:hover td, .board-table tbody tr.pinned td { background:transparent; }
  .board-table tbody td.col-title { flex:1 1 100%; font-size:13px; line-height:1.5; color:var(--dark); font-weight:600; }
  .board-table tbody td.col-no, .board-table tbody td.col-views { display:none; }
  .board-table tbody td.col-status { margin-inline-start:auto; }
  .board-table tbody td.col-org { font-weight:600; color:var(--dark); }
  .board-table tbody tr.empty-row { display:block; }
  .board-table tbody tr.empty-row td { display:block; padding:40px 16px; font-size:13px; }
  .tag-badge, .cat-badge { padding:2px 8px; margin-inline-end:6px; }
  .board-pagination { margin-top:20px; gap:4px; flex-wrap:wrap; }
  .board-pagination a { min-width:34px; height:34px; padding:0 8px; font-size:12px; }

  /* 상세 보기 */
  .board-view-head { padding:18px 16px; }
  .board-view-head h2 { font-size:15px; margin:8px 0 10px; }
  .board-view-meta { gap:12px; font-size:12px; }
  .board-view-body { padding:18px 16px; font-size:13px; line-height:1.8; min-height:120px; }
  .board-answer { margin:0 16px 18px; padding:16px; }
  .board-answer h4 { font-size:14px; }
  .board-answer .answer-body { font-size:13px; line-height:1.8; }
  .board-nav { margin-top:14px; }
  .board-nav > a, .board-nav > span { padding:12px 16px; gap:10px; font-size:12px; }
  .board-nav .nav-label { width:48px; }
  .board-actions { margin-top:16px; }
  .btn-board { height:40px; padding:0 16px; font-size:12px; }
  .pw-box { padding:24px 18px; }
  .delete-box { padding:16px; }

  /* 글쓰기 */
  .board-form { padding:20px 16px; }
  .board-form .form-control, .board-form .form-select { font-size:13px; }
  .board-form textarea.form-control { min-height:200px; }

  /* 아래 안내 띠 */
  .support-cta { padding:32px 0; }
  .support-cta h3 { font-size:15px; margin-bottom:6px; }
  .support-cta p { font-size:12px; margin-bottom:16px; }
  .support-cta .cta-btn-primary, .support-cta .cta-btn-outline { padding:11px 20px; font-size:12px; }
}