/* 독끝 전기기능사 교재 미리보기 전용 레이아웃. */
html.textbook-preview-open,
html.textbook-preview-open body {
  overflow: hidden;
}

dialog.textbook-preview {
  box-sizing: border-box;
  width: min(1120px, calc(100vw - 40px));
  max-width: none;
  height: min(860px, calc(100vh - 40px));
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #f5f6f8;
  color: #171a20;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .36);
  overflow: hidden;
  flex-direction: column;
  font-family: "Pretendard", "Noto Sans KR", "Spoqa Han Sans Neo", sans-serif;
}

dialog.textbook-preview:not([open]) { display: none; }
dialog.textbook-preview[open] { display: flex; }
dialog.textbook-preview::backdrop { background: rgba(13, 19, 27, .72); backdrop-filter: blur(3px); }
dialog.textbook-preview *,
dialog.textbook-preview *::before,
dialog.textbook-preview *::after { box-sizing: border-box; }

dialog.textbook-preview .textbook-preview__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 112px;
  padding: 21px 32px;
  background: #171a20;
  color: #fff;
}
dialog.textbook-preview .textbook-preview__header span {
  display: block;
  margin-bottom: 5px;
  color: #ffda34;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
}
dialog.textbook-preview .textbook-preview__header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -.04em;
}
dialog.textbook-preview .textbook-preview__title-break { display: none; }
dialog.textbook-preview .textbook-preview__header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
dialog.textbook-preview .textbook-preview__header-actions button,
dialog.textbook-preview .textbook-preview__footer button {
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
}
dialog.textbook-preview .textbook-preview__buy {
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #ffdc29 !important;
  color: #171a20 !important;
  font-size: 14px;
}
dialog.textbook-preview .textbook-preview__close {
  display: grid;
  place-items: center;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 26px;
  line-height: 1;
}
dialog.textbook-preview .textbook-preview__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 28px 32px 36px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
dialog.textbook-preview .textbook-preview__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
dialog.textbook-preview .textbook-preview__intro b {
  display: block;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}
dialog.textbook-preview .textbook-preview__intro p,
dialog.textbook-preview .textbook-preview__pdf-copy p {
  margin: 0;
  color: #69717d;
  font-size: 14px;
  line-height: 1.55;
}
dialog.textbook-preview .textbook-preview__intro > span {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff2b6;
  color: #5e4a00;
  font-size: 12px;
  font-weight: 800;
}
dialog.textbook-preview .textbook-preview__pdf,
dialog.textbook-preview .textbook-preview__detail {
  overflow: hidden;
  border: 1px solid #e1e5eb;
  border-radius: 12px;
  background: #fff;
}
dialog.textbook-preview .textbook-preview__pdf-head {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 22px;
  border-bottom: 1px solid #e8ebef;
}
dialog.textbook-preview .textbook-preview__pdf-badge {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #171a20;
  color: #ffdc29;
  font-size: 14px;
  font-weight: 900;
}
dialog.textbook-preview .textbook-preview__pdf-copy { flex: 1 1 auto; min-width: 0; }
dialog.textbook-preview .textbook-preview__pdf-copy strong {
  display: block;
  margin-bottom: 3px;
  font-size: 17px;
  font-weight: 800;
}
dialog.textbook-preview .textbook-preview__pdf-open {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid #cdd4de;
  border-radius: 8px;
  color: #222831;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
dialog.textbook-preview .textbook-preview__pdf-frame {
  height: 470px;
  background: #d8dce2;
}
dialog.textbook-preview .textbook-preview__pdf-frame object {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
dialog.textbook-preview .textbook-preview__detail { margin-top: 22px; }
dialog.textbook-preview .textbook-preview__section-title {
  padding: 19px 22px;
  border-bottom: 1px solid #e8ebef;
}
dialog.textbook-preview .textbook-preview__section-title span {
  display: block;
  margin-bottom: 4px;
  color: #9b7600;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
}
dialog.textbook-preview .textbook-preview__section-title h3 {
  margin: 0;
  color: #171a20;
  font-size: 19px;
  font-weight: 800;
}
dialog.textbook-preview .textbook-preview__detail-image { margin: 0; line-height: 0; }
dialog.textbook-preview .textbook-preview__detail-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
dialog.textbook-preview .textbook-preview__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex: 0 0 auto;
  padding: 17px 32px;
  background: #171a20;
  color: #fff;
}
dialog.textbook-preview .textbook-preview__footer strong,
dialog.textbook-preview .textbook-preview__footer span { display: block; }
dialog.textbook-preview .textbook-preview__footer strong { font-size: 15px; font-weight: 800; }
dialog.textbook-preview .textbook-preview__footer > div > span { margin-top: 4px; color: #b8bdc7; font-size: 12px; }
dialog.textbook-preview .textbook-preview__footer button {
  flex: 0 0 auto;
  padding: 12px 20px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #ffdc29 !important;
  color: #171a20 !important;
  font-size: 14px;
}
dialog.textbook-preview button:hover,
dialog.textbook-preview .textbook-preview__pdf-open:hover { filter: brightness(.95); }
dialog.textbook-preview :is(button, a):focus-visible { outline: 3px solid #4aa8ed; outline-offset: 3px; }

@media (max-width: 700px) {
  dialog.textbook-preview {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    border-radius: 12px;
  }
  dialog.textbook-preview .textbook-preview__header { min-height: 0; padding: 16px; gap: 12px; }
  dialog.textbook-preview .textbook-preview__header h2 { font-size: 19px; }
  dialog.textbook-preview .textbook-preview__title-break { display: initial; }
  dialog.textbook-preview .textbook-preview__header-actions { gap: 8px; }
  dialog.textbook-preview .textbook-preview__buy { display: none !important; }
  dialog.textbook-preview .textbook-preview__close { width: 38px !important; height: 38px !important; }
  dialog.textbook-preview .textbook-preview__body { padding: 18px 16px 24px; }
  dialog.textbook-preview .textbook-preview__intro { align-items: flex-start; }
  dialog.textbook-preview .textbook-preview__intro b { font-size: 16px; }
  dialog.textbook-preview .textbook-preview__intro > span { padding: 6px 9px; }
  dialog.textbook-preview .textbook-preview__pdf-head { flex-wrap: wrap; padding: 15px; gap: 10px; }
  dialog.textbook-preview .textbook-preview__pdf-badge { flex-basis: 38px; width: 38px; height: 38px; }
  dialog.textbook-preview .textbook-preview__pdf-copy strong { font-size: 15px; }
  dialog.textbook-preview .textbook-preview__pdf-open { margin-left: 48px; padding: 7px 11px; }
  dialog.textbook-preview .textbook-preview__pdf-frame { height: 410px; }
  dialog.textbook-preview .textbook-preview__section-title { padding: 15px; }
  dialog.textbook-preview .textbook-preview__footer { padding: 13px 16px; }
  dialog.textbook-preview .textbook-preview__footer > div { display: none; }
  dialog.textbook-preview .textbook-preview__footer button { width: 100%; }
}