/* ===================================================================
   사용가이드 PDF 뷰어 모달 (2026-09-10)
   index.html 히어로의 [사용가이드] 버튼으로 열린다.

   ※ style.css 에 합치지 않고 별도 파일로 둔 이유
     style.css 는 10개 페이지가 공유하며 ?v= 로 캐시를 관리한다.
     여기에 모달 스타일을 덧붙였다가 ?v= 를 올리지 않아,
     서버에는 새 CSS 가 있는데 브라우저는 옛 캐시를 써서
     모달이 스타일 없이 페이지 하단에 그대로 노출된 사고가 있었다.
     모달만 따로 두면 자체 ?v= 로 버전이 관리되고,
     모달을 쓰지 않는 나머지 9개 페이지가 이 CSS 를 받지 않아도 된다.
     수정할 때는 index.html 의 guide-modal.css?v= 값을 반드시 올릴 것.

   변수(--accent 등)는 style.css 의 :root 정의를 그대로 쓰므로
   반드시 style.css 다음에 로드되어야 한다.
   =================================================================== */
.guide-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.guide-modal[hidden] { display: none; }

.guide-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.guide-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  height: 90vh;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* 헤더: 제목 좌측, 다운로드/닫기 우측 상단 */
.guide-modal__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.guide-modal__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--dark);
}

.guide-modal__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.guide-modal__btn--download {
  padding: 9px 16px;
  background: var(--accent);
  color: var(--white);
}

.guide-modal__btn--download:hover { background: var(--accent-dark); }

.guide-modal__btn--close {
  width: 36px;
  height: 36px;
  font-size: 1.5rem;
  line-height: 1;
  background: transparent;
  color: var(--gray);
}

.guide-modal__btn--close:hover {
  background: var(--light-bg);
  color: var(--dark);
}

/* 본문: PDF 뷰어가 남은 높이를 모두 차지 */
.guide-modal__body {
  flex: 1 1 auto;
  min-height: 0;          /* flex 자식이 축소되도록 (없으면 뷰어가 넘친다) */
  background: #525659;    /* PDF 뷰어 기본 배경과 맞춤 */
}

.guide-modal__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* PDF 미리보기 미지원 환경 안내 */
.guide-modal__fallback {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: var(--white);
  text-align: center;
  color: var(--gray);
}

.guide-modal__fallback[hidden] { display: none; }

/* 모바일 */
@media (max-width: 768px) {
  .guide-modal { padding: 0; }

  .guide-modal__dialog {
    height: 100%;
    max-width: none;
    border-radius: 0;
  }

  .guide-modal__header { padding: 12px 14px; }
  .guide-modal__title { font-size: 1rem; }

  /* 좁은 화면에서 버튼 글자를 줄여 제목과 겹치지 않게 */
  .guide-modal__btn--download { padding: 8px 12px; font-size: 0.8125rem; }
}