/* ==========================================================================
   GNX Hybrid Logicnoid Mobile UX/UI Patch
   Purpose: mobile-only layout repair without breaking desktop surface
   ========================================================================== */

@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden !important;
  }

  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  img, svg, video, canvas {
    max-width: 100% !important;
    height: auto;
  }

  main,
  .page,
  .page-shell,
  .surface,
  .container,
  .wrap,
  .shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow-x: hidden !important;
  }

  header,
  nav,
  section,
  article,
  footer,
  .panel,
  .card,
  .section,
  .hero,
  .hero-card,
  .feature-card,
  .license-card,
  .guide-card,
  .intake-card,
  .verify-card,
  .evidence-card,
  .status-panel,
  .license-reason-panel,
  .live-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .panel,
  .card,
  .section,
  .hero-card,
  .feature-card,
  .license-card,
  .guide-card,
  .intake-card,
  .verify-card,
  .evidence-card,
  .status-panel,
  .license-reason-panel {
    border-radius: 24px !important;
    padding: 22px !important;
    margin-bottom: 22px !important;
  }

  .live-grid,
  .hero-grid,
  .content-grid,
  .license-grid,
  .priority-grid,
  .status-grid,
  .kv-grid,
  .meta-grid,
  .review-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .module-grid,
  .step-grid,
  .flow-grid,
  .mini-card-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .module-card,
  .step-card,
  .flow-card,
  .mini-card {
    min-width: 0 !important;
    min-height: 112px !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .module-card h3,
  .step-card h3,
  .flow-card h3,
  .mini-card h3,
  .module-card h4,
  .step-card h4,
  .flow-card h4,
  .mini-card h4 {
    font-size: 17px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 8px !important;
  }

  .module-card p,
  .step-card p,
  .flow-card p,
  .mini-card p {
    font-size: 14px !important;
    line-height: 1.52 !important;
    margin: 0 !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  h1 {
    font-size: clamp(34px, 9vw, 46px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.055em !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  h2 {
    font-size: clamp(28px, 7.4vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.045em !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  h3 {
    font-size: clamp(22px, 5.8vw, 30px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.035em !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  p,
  li,
  dt,
  dd,
  label {
    font-size: 16px !important;
    line-height: 1.68 !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .kicker,
  .eyebrow,
  .section-eyebrow {
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 12px !important;
    word-break: keep-all !important;
  }

  .lead,
  .lede,
  .desc,
  .description,
  .section-copy,
  .card-copy,
  .panel-copy,
  .guide-copy,
  .intro-copy {
    font-size: 16px !important;
    line-height: 1.68 !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .notice,
  .note,
  .hint,
  .summary-box,
  .explain-box,
  .gold-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    overflow-x: hidden !important;
  }

  input,
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    line-height: 1.36 !important;
    overflow: hidden !important;
  }

  textarea {
    min-height: 130px !important;
    resize: vertical !important;
  }

  input::placeholder,
  textarea::placeholder {
    font-size: 16px !important;
    line-height: 1.36 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  button,
  .btn,
  .button,
  .cta,
  .action-btn,
  .primary-btn,
  .secondary-btn,
  a.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    font-size: clamp(17px, 4.7vw, 20px) !important;
    line-height: 1.18 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .button-row,
  .button-stack,
  .cta-row,
  .action-row,
  .actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  pre,
  code,
  .json-output,
  .evidence-output,
  .result-output,
  .terminal-output,
  #licenseReasonOutput,
  #liveEngineProofOutput,
  #evidenceOutput,
  #verificationOutput,
  #enterpriseReviewOutput {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  }

  pre,
  .json-output,
  .evidence-output,
  .result-output,
  .terminal-output,
  #licenseReasonOutput,
  #liveEngineProofOutput,
  #evidenceOutput,
  #verificationOutput,
  #enterpriseReviewOutput {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 390px !important;
    padding: 16px !important;
    border-radius: 18px !important;
    font-size: 12.5px !important;
    line-height: 1.58 !important;
  }

  a,
  .url,
  .mono,
  .hash,
  .receipt,
  .fingerprint,
  .token {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .brand,
  .brand-wrap,
  .top-brand,
  .hero-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  .brand-logo {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 10px !important;
  }

  .brand-name,
  .brand-title {
    min-width: 0 !important;
    font-size: clamp(20px, 5.6vw, 28px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .license-reason-core,
  .status-list,
  .kv-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .license-reason-core div,
  .status-row,
  .kv-row,
  .meta-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
  }

  .license-reason-core strong,
  .status-row strong,
  .kv-row strong,
  .meta-row strong {
    text-align: left !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* 하단 fixed/sticky 도메인 pill 모바일 정리 */
  .gnx-domain-pill-normalized,
  .floating-domain,
  .domain-pill,
  .site-pill,
  .bottom-pill,
  .floating-badge {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: calc(100vw - 48px) !important;
    margin: 18px auto 0 !important;
    z-index: auto !important;
    pointer-events: auto !important;
  }

  .floating-domain-wrap,
  .site-pill-wrap,
  .bottom-floating-wrap,
  .gnx-domain-pill-wrap-normalized {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    pointer-events: auto !important;
  }

  footer,
  .company-footer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 16px calc(42px + env(safe-area-inset-bottom)) !important;
    margin-top: 28px !important;
    overflow: hidden !important;
  }

  footer p,
  .company-footer p,
  .footer-company p,
  .company-line {
    margin: 0 0 10px !important;
    font-size: 14.5px !important;
    line-height: 1.72 !important;
    color: rgba(202,210,225,.68) !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
  }

  .copyright-line,
  footer a[href*="admin-review"],
  .company-footer a[href*="admin-review"] {
    display: block !important;
    margin-top: 14px !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    color: rgba(202,210,225,.68) !important;
    text-decoration: none !important;
    text-align: left !important;
  }
}

@media (max-width: 420px) {
  main,
  .page,
  .page-shell,
  .surface,
  .container,
  .wrap,
  .shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .panel,
  .card,
  .section,
  .hero-card,
  .feature-card,
  .license-card,
  .guide-card,
  .intake-card,
  .verify-card,
  .evidence-card,
  .status-panel,
  .license-reason-panel {
    padding: 20px !important;
    border-radius: 22px !important;
  }

  h1 {
    font-size: clamp(32px, 8.6vw, 42px) !important;
  }

  h2 {
    font-size: clamp(27px, 7.1vw, 36px) !important;
  }

  .module-grid,
  .step-grid,
  .flow-grid,
  .mini-card-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .module-card,
  .step-card,
  .flow-card,
  .mini-card {
    min-height: 104px !important;
    padding: 14px !important;
  }

  pre,
  .json-output,
  .evidence-output,
  .result-output,
  .terminal-output,
  #licenseReasonOutput,
  #liveEngineProofOutput,
  #evidenceOutput,
  #verificationOutput,
  #enterpriseReviewOutput {
    max-height: 360px !important;
    font-size: 12px !important;
  }
}