/* Cheongeum reader PWA banner, install/notification modal.
 * The banner stays hidden above mobile width so the PC newsletter block is
 * exactly the existing e-mail form. */
.cg-pwa-banner {
  display: none;
}
@media only screen and (max-width: 900px) {
  .cg-pwa-banner:not([hidden]) {
    display: flex;
  }
}
.cg-pwa-banner {
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding: 16px 18px;
  border: 1px solid #BBD8E8;
  border-radius: 10px;
  background: #EDF6FB;
  color: #123549;
}
.cg-pwa-banner-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 220px;
}
.cg-pwa-banner-copy strong {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.cg-pwa-banner-copy span {
  font-size: 12.5px;
  line-height: 1.55;
  color: #40596B;
}
.cg-pwa-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cg-pwa-primary,
.cg-pwa-secondary,
.cg-pwa-dismiss {
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
  min-height: 36px;
  padding: 0 13px;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.2;
}
.cg-pwa-primary {
  border: 1px solid #0B4C7C;
  background: #0B4C7C;
  color: #fff;
}
.cg-pwa-primary:hover { background: #0A416A; }
.cg-pwa-primary:disabled { opacity: .55; cursor: progress; }
.cg-pwa-secondary {
  border: 1px solid #9DB4C4;
  background: #fff;
  color: #123549;
}
.cg-pwa-secondary:hover { background: #F2F7FA; }
.cg-pwa-dismiss {
  border: 0;
  background: transparent;
  color: #4C6272;
  text-decoration: underline;
  padding: 0 4px;
  min-height: 30px;
  font-weight: 600;
}
.cg-pwa-primary:focus-visible,
.cg-pwa-secondary:focus-visible,
.cg-pwa-dismiss:focus-visible,
.cg-pwa-modal-close:focus-visible,
.cg-pwa-notify:focus-visible {
  outline: 2px solid #0B4C7C;
  outline-offset: 2px;
}

/* Article toolbar button sits next to the TTS control and reuses .tool-btn. */
.cg-pwa-notify.active {
  background: #EAF4F9;
  border-color: #7BAFC8;
  color: #07486B;
}

/* ---------- modal ---------- */
.cg-pwa-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(9, 24, 34, .55);
  overflow-y: auto;
}
.cg-pwa-modal-backdrop[hidden],
.cg-pwa-modal [hidden] {
  display: none !important;
}
.cg-pwa-modal {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 24px 22px 20px;
  border-radius: 14px;
  background: #fff;
  color: #1B2A33;
  box-shadow: 0 24px 60px rgba(6, 22, 32, .28);
}
.cg-pwa-modal h2 {
  margin: 0 0 8px;
  padding-right: 34px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.4;
}
.cg-pwa-lead {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #43555F;
}
.cg-pwa-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #F0F3F5;
  color: #35474F;
  font-size: 15px;
  cursor: pointer;
}
.cg-pwa-modal-close:hover { background: #E3E8EB; }
.cg-pwa-steps {
  border-top: 1px solid #E4E9EC;
  padding: 14px 0 4px;
}
.cg-pwa-steps h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: #0B4C7C;
}
.cg-pwa-hint {
  margin: 8px 0 10px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #52636C;
}
.cg-pwa-ios-steps {
  margin: 0 0 10px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: #2C3D46;
}
.cg-pwa-ios-steps li { margin: 0 0 6px; }
.cg-pwa-install { width: 100%; margin-top: 2px; }
.cg-pwa-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.cg-pwa-status {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #F2F7FA;
  border: 1px solid #D9E6EE;
  font-size: 12.5px;
  line-height: 1.6;
  color: #24404F;
}
.cg-pwa-privacy {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: #6A7A83;
}
html.cg-pwa-modal-open { overflow: hidden; }

@media only screen and (max-width: 600px) {
  .cg-pwa-banner { padding: 14px 15px; }
  .cg-pwa-banner-copy strong { font-size: 13.5px; }
  .cg-pwa-banner-actions { width: 100%; }
  .cg-pwa-banner-actions .cg-pwa-primary { flex: 1 1 auto; }
  .cg-pwa-modal { padding: 22px 18px 18px; border-radius: 12px; }
}

/* Dark theme keeps the same contrast relationship as the rest of the site. */
html[data-theme="dark"] .cg-pwa-banner {
  background: #14232D;
  border-color: #2C4A5C;
  color: #E7EFF4;
}
html[data-theme="dark"] .cg-pwa-banner-copy span { color: #AEC2CD; }
html[data-theme="dark"] .cg-pwa-modal { background: #141A1F; color: #E7EBEE; }
html[data-theme="dark"] .cg-pwa-lead,
html[data-theme="dark"] .cg-pwa-hint,
html[data-theme="dark"] .cg-pwa-ios-steps { color: #C2CDD4; }
html[data-theme="dark"] .cg-pwa-steps { border-top-color: #2C343A; }
html[data-theme="dark"] .cg-pwa-steps h3 { color: #7FB9D8; }
html[data-theme="dark"] .cg-pwa-modal-close { background: #232B31; color: #D7DEE3; }
html[data-theme="dark"] .cg-pwa-status { background: #1B262D; border-color: #2E3C45; color: #CFDCE4; }
html[data-theme="dark"] .cg-pwa-privacy { color: #93A2AB; }