/* Shared responsive corrections for Korean public pages. */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.doctor-credentials-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
  }

  body {
    overflow-x: visible;
    letter-spacing: normal;
  }

  :where(main, article, section, .section, .container, .split-layout, .greeting-text,
    .greeting-body, .flow-container, .flow-card, .flow-content, .card-grid,
    .content-grid, .detail-support-grid, .related-grid, .connection-layout,
    .connection-card-grid, .summary-card, .content-card, .connection-feature-card,
    .connection-self-check, .footer-container, footer) {
    min-width: 0;
    max-width: 100%;
  }

  :where(h1, h2, h3, h4, p, li, dt, dd, blockquote) {
    word-break: keep-all;
    letter-spacing: normal;
  }

  :where(a[href^="http"], code, pre, .flow-step-title) {
    overflow-wrap: break-word;
  }

  .section {
    padding-inline: 22px;
  }

  .split-layout,
  .card-grid,
  .content-grid,
  .detail-support-grid,
  .related-grid,
  .connection-card-grid,
  .doctor-credentials-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .split-layout {
    display: grid;
    gap: 36px;
  }

  .greeting-visual,
  .greeting-text,
  .doctor-credentials-grid > *,
  .flow-card > * {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .greeting-body p {
    text-align: left;
  }

  .flow-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    height: auto;
    padding: 26px 22px;
  }

  .flow-num {
    position: static;
    width: auto;
    justify-self: start;
  }

  .flow-content {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .flow-step-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    max-width: 100%;
    font-size: 1.35rem;
    line-height: 1.35;
    white-space: normal;
  }

  .flow-step-title span,
  .flow-step-desc {
    min-width: 0;
    max-width: 100%;
    word-break: keep-all;
    letter-spacing: normal;
  }

  .flow-step-desc {
    font-size: 1rem;
    line-height: 1.8;
  }

  .detail-hero {
    min-height: 0;
    padding: 56px 22px 64px;
  }

  .summary-section,
  .related-section,
  .connection-section {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
  }

  body.intro-page .hero,
  body.program-index-page .hero {
    min-height: 0;
    height: auto;
    padding: 110px 22px 56px;
  }

  body.intro-page .hero-title,
  body.program-index-page .hero h1,
  body.story-page .hero-title,
  body.axis-logic-page .hero-title {
    max-width: 100%;
    font-size: 2rem;
    line-height: 1.35;
    word-break: keep-all;
    letter-spacing: normal;
  }

  .detail-hero h1,
  .detail-hero h2,
  .detail-hero p,
  .lab-dynamic-article .article-title,
  .lab-article-title,
  .section-heading h2 {
    letter-spacing: normal;
  }

  .detail-hero h1 {
    max-width: calc(100vw - 44px);
    font-size: 1.85rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .detail-hero .hero-lead,
  .summary-card p,
  .content-card-body p,
  .connection-feature-card p {
    max-width: 100%;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  body.mobile-action-bar {
    padding-bottom: calc(76px + max(8px, env(safe-area-inset-bottom)));
  }

  .floating-menu[data-mobile-action-bar] {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 12px !important;
    z-index: 900 !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }

  .floating-menu[data-mobile-action-bar] .float-btn {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
    padding: 0 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }

  .floating-menu[data-mobile-action-bar] .float-btn span {
    flex: 0 0 auto;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .floating-menu[data-mobile-action-bar] .float-btn[href^="tel:"] {
    display: none !important;
  }

  body.footer-in-view .floating-menu[data-mobile-action-bar],
  body.footer-in-view .back-to-top,
  body.footer-in-view #backToTop,
  body.footer-in-view [data-back-to-top] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(18px);
  }

  .back-to-top,
  #backToTop,
  [data-back-to-top] {
    left: auto !important;
    right: 16px !important;
    bottom: calc(76px + max(8px, env(safe-area-inset-bottom))) !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    z-index: 899 !important;
  }

  #noticeFloatBtn {
    display: none !important;
  }

  .mobile-nav:not(.active):not(.open),
  .mobile-menu:not(.is-open) {
    display: none !important;
  }

  .mobile-nav.active,
  .mobile-nav.open {
    right: 0 !important;
    display: flex !important;
  }

  .mobile-menu.is-open {
    display: flex !important;
  }
}

@media (max-width: 430px) {
  footer .mobile-footer-actions,
  .site-footer .mobile-footer-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  footer .mobile-footer-actions a,
  .site-footer .mobile-footer-actions a {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px !important;
    white-space: nowrap;
  }
}