/* ============================================================
   자주 묻는 질문 페이지 전용 디자인
   삼성글로벌비즈니스센터 · 2026-09-09

   ★ 넣는 곳 : faq.asp 와 faq_view.asp 의 head 닫는 태그 바로 윗줄
   ★ 넣는 법 : style 여는 태그와 닫는 태그 사이에 통째로 붙여넣기

   이 내용은 두 파일 안에만 들어가므로 다른 페이지에는
   전혀 영향을 주지 않습니다. 공통 CSS 파일은 건드리지 마세요.
   ============================================================ */

/* ── 제목 영역 ─────────────────────────────────── */
/* 사무실 소개 페이지용 큰 여백(아래 200px)을 FAQ에 맞게 줄입니다.
   ※ 아래에서 클래스 이름을 세 번 겹쳐 쓴 것은 오타가 아닙니다.
     사이트 공통 CSS(style.css)의 여백 규칙을 이겨야 해서 일부러
     이렇게 적었습니다. 한 번만 쓰면 여백이 그대로 200px 로 남습니다. */
.entry-header.entry-header.entry-header { padding: 90px 0 40px; }
.entry-header.entry-header .entry-title { font-size: 44px; }
.entry-header.entry-header h2 { font-size: 24px; margin-top: 10px; }
.entry-header.entry-header p { margin-top: 14px; font-size: 17px; color: #5a6068; line-height: 1.7; }
.entry-content.entry-content.entry-content { padding-bottom: 90px; }
.entry-content.entry-content .inner { max-width: 900px; margin: 0 auto; }

/* ── 질문 목록 (faq.asp) ───────────────────────── */
.faq-qa { list-style: none; margin: 0; padding: 0; }

.faq-qa-item {
  border: 1px solid #e4e7ea;
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 14px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.faq-qa-item:last-child { margin-bottom: 0; }
.faq-qa-item:hover {
  border-color: #2c8842;
  box-shadow: 0 4px 16px -8px rgba(44,136,66,.35);
}

.faq-qa-item h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.5; font-weight: 700; }
.faq-qa-item h3 a { color: #101010; text-decoration: none; }
.faq-qa-item:hover h3 a { color: #2c8842; }

.faq-summary { color: #555c64; font-size: 16px; line-height: 1.75; }
.faq-summary p { margin: 0 0 8px; }
.faq-summary p:last-child { margin-bottom: 0; }
.faq-summary ol, .faq-summary ul { margin: 6px 0 0; padding-left: 20px; }
.faq-summary li { margin-bottom: 4px; }
.faq-summary a { color: #2c8842; font-weight: 600; }

/* 두 번 겹쳐 쓴 이유는 위와 같습니다 (공통 CSS의 p 여백을 이기기 위함) */
.faq-more.faq-more { margin: 14px 0 0; }
.faq-more a { color: #2c8842; font-weight: 600; font-size: 15px; text-decoration: none; }
.faq-more a::after { content: " \203A"; font-weight: 700; }
.faq-more a:hover { text-decoration: underline; }

/* ── 개별 질문 페이지 (faq_view.asp) ───────────── */
.faq-breadcrumb { font-size: 14px; color: #8b9199; margin-bottom: 26px; }
.faq-breadcrumb a { color: #8b9199; text-decoration: none; }
.faq-breadcrumb a:hover { color: #2c8842; }

.faq-detail {
  border-top: 3px solid #101010;
  padding-top: 26px;
  margin-bottom: 34px;
}
.faq-detail > .entry-title.entry-title.entry-title {
  font-size: 30px; font-weight: 700; line-height: 1.45;
  color: #101010; margin: 0 0 20px;
}
/* float:none 은 꼭 필요합니다. 사이트 공통 CSS가 .entry-content 를
   왼쪽으로 띄우기(float) 때문에, 그대로 두면 바로 아래의 「이전/다음 질문」
   칸이 폭 0 으로 찌그러져 오른쪽에 세로로 붙어버립니다. */
.faq-detail .entry-content.entry-content.entry-content {
  font-size: 17px; line-height: 1.85; color: #33383e; padding: 0;
  float: none; width: auto;
}
.faq-detail .entry-content.entry-content .inner { max-width: none; padding: 0; }
.faq-detail .entry-content p { margin: 0 0 14px; }
.faq-detail .entry-content p:last-child { margin-bottom: 0; }
.faq-detail .entry-content ol,
.faq-detail .entry-content ul { margin: 0 0 14px; padding-left: 22px; }
.faq-detail .entry-content li { margin-bottom: 7px; }
.faq-detail .entry-content a { color: #2c8842; font-weight: 600; text-decoration: underline; }

/* 이전 / 다음 질문 */
.faq-nav {
  clear: both;
  display: flex; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid #e4e7ea; border-bottom: 1px solid #e4e7ea;
  padding: 18px 0; margin-bottom: 22px;
}
.faq-nav a {
  flex: 1 1 260px; min-width: 0;
  color: #555c64; font-size: 15px; font-weight: 500; text-decoration: none;
  line-height: 1.5;
}
.faq-nav a.next { text-align: right; }
.faq-nav a:hover { color: #2c8842; }

.faq-back.faq-back { margin: 0 0 34px; }
.faq-back a { color: #2c8842; font-weight: 600; font-size: 15px; text-decoration: none; }
.faq-back a:hover { text-decoration: underline; }

/* ── 문의 안내 상자 (두 페이지 공통) ───────────── */
.faq-contact {
  background: #f6f8f7;
  border: 1px solid #dfe6e1;
  border-radius: 14px;
  margin-top:50px;
  padding: 26px 30px;
  font-size: 15.5px; line-height: 1.8; color: #555c64;
}
.faq-contact p { margin: 0 0 8px; }
.faq-contact p:first-child { font-size: 17px; font-weight: 700; color: #101010; margin-bottom: 12px; }
.faq-contact p:last-child { margin-bottom: 0; font-size: 14.5px; color: #8b9199; }
.faq-contact a { color: #2c8842; font-weight: 600; text-decoration: none; }
.faq-contact a:hover { text-decoration: underline; }

/* ── 휴대폰 화면 ───────────────────────────────── */
@media (max-width: 768px) {
  .entry-header.entry-header.entry-header { padding: 60px 0 30px; }
  .entry-header.entry-header .entry-title { font-size: 32px; }
  .entry-header.entry-header h2 { font-size: 19px; }
  .entry-header.entry-header p { font-size: 15.5px; }
  .entry-content.entry-content .inner { padding: 0 20px; }
  .faq-qa-item { padding: 20px; border-radius: 12px; }
  .faq-qa-item h3 { font-size: 17px; }
  .faq-summary { font-size: 15px; }
  .faq-detail > .entry-title.entry-title.entry-title { font-size: 23px; }
  .faq-detail .entry-content.entry-content.entry-content { font-size: 16px; }
  .faq-nav a.next { text-align: left; }
  .faq-contact { padding: 20px; }
}