:root {
  --mini-safe-top: env(safe-area-inset-top, 0px);
  --mini-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #f8f9ff;
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (max-width: 768px) {
  body[data-page] {
    padding-bottom: var(--mini-safe-bottom);
  }

  body[data-page] > header,
  body[data-page] > main,
  body[data-page] > section,
  body[data-page] > footer > div,
  body[data-page] > nav,
  body[data-page] > div.fixed.bottom-0.left-0.w-full > div {
    max-width: none !important;
  }

  body[data-page] > header {
    width: 100% !important;
    min-height: calc(64px + var(--mini-safe-top));
    padding-top: var(--mini-safe-top);
    left: 0;
    right: 0;
  }

  body[data-page] > main,
  body[data-page] > section.max-w-container-max,
  body[data-page] > section.max-w-5xl,
  body[data-page] > section.max-w-4xl,
  body[data-page] > section.max-w-md {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body[data-page] > main {
    padding-top: 16px !important;
    padding-bottom: calc(96px + var(--mini-safe-bottom)) !important;
  }

  body[data-page="home"] > main {
    padding-bottom: calc(84px + var(--mini-safe-bottom)) !important;
  }

  body[data-page="report"] > main,
  body[data-page="result"] > main,
  body[data-page="history"] > main {
    padding-bottom: calc(146px + var(--mini-safe-bottom)) !important;
  }

  body[data-page] [class*="max-w-4xl"],
  body[data-page] [class*="max-w-5xl"],
  body[data-page] [class*="max-w-md"],
  body[data-page] [class*="max-w-container-max"] {
    max-width: none !important;
  }

  body[data-page] section,
  body[data-page] .rounded-2xl,
  body[data-page] .rounded-xl {
    border-radius: 18px;
  }

  body[data-page] input,
  body[data-page] select,
  body[data-page] textarea {
    font-size: 16px !important;
  }

  body[data-page] button {
    min-height: 44px;
  }

  body[data-page] > nav.fixed.bottom-0.left-0.w-full {
    height: calc(64px + var(--mini-safe-bottom)) !important;
    padding-bottom: var(--mini-safe-bottom);
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body[data-page] > footer.fixed.bottom-0.left-0.w-full,
  body[data-page] > div.fixed.bottom-0.left-0.w-full {
    height: auto !important;
    padding-bottom: var(--mini-safe-bottom);
  }

  body[data-page] > footer.fixed.bottom-0.left-0.w-full > div,
  body[data-page] > div.fixed.bottom-0.left-0.w-full > div {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body[data-page="report"] > div.fixed.bottom-0.left-0.w-full {
    bottom: calc(64px + var(--mini-safe-bottom));
  }

  body[data-page="history"] > button.fixed,
  body[data-page="upload"] button.fixed,
  body[data-page="home"] > button.fixed {
    right: 16px !important;
    bottom: calc(80px + var(--mini-safe-bottom)) !important;
  }

  body[data-page] .grid.lg\:grid-cols-2,
  body[data-page] .grid.lg\:grid-cols-3,
  body[data-page] .grid.md\:grid-cols-2,
  body[data-page] .grid.md\:grid-cols-12 {
    gap: 14px !important;
  }

  body[data-page="report"] .fixed.bottom-0.left-0.w-full.bg-white\/90 .max-w-5xl,
  body[data-page="result"] section.max-w-container-max,
  body[data-page="enterprise"] footer .grid,
  body[data-page="project"] footer .grid {
    width: 100%;
  }

  body[data-page="history"] > main {
    padding-top: 12px !important;
  }

  body[data-page="history"] > main > section:first-child .grid,
  body[data-page="history"] > main > div.grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="history"] > main > div.grid > div {
    padding: 16px !important;
  }

  body[data-page="history"] > main > div.grid > div .flex.justify-between.items-start.mb-md,
  body[data-page="history"] > main > div.grid > div .flex.items-center.gap-md.py-md {
    gap: 10px !important;
  }

  body[data-page="history"] > button.fixed {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
  }

  body[data-page="result"] > main > section:first-child,
  body[data-page="report"] > main > section:first-child,
  body[data-page="report"] > main > section:nth-child(2),
  body[data-page="result"] > main > section:nth-child(3) {
    gap: 14px !important;
  }

  body[data-page="result"] > main > section:first-child > div:first-child {
    padding: 20px 16px !important;
  }

  body[data-page="result"] > main > section:first-child > div:last-child,
  body[data-page="report"] > main > section:first-child .flex-col,
  body[data-page="report"] > main > section:nth-child(2) {
    gap: 12px !important;
  }

  body[data-page="result"] > main > section:nth-child(2) > div,
  body[data-page="result"] > main > section:nth-child(3),
  body[data-page="report"] > main > section:nth-child(2) {
    grid-template-columns: 1fr !important;
  }

  body[data-page="result"] section.max-w-container-max > div,
  body[data-page="report"] .fixed.bottom-0.left-0.w-full.bg-white\/90 .max-w-5xl {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body[data-page="result"] section.max-w-container-max button,
  body[data-page="report"] .fixed.bottom-0.left-0.w-full.bg-white\/90 button {
    width: 100% !important;
  }

  body[data-page="form"] nav.py-xl {
    overflow-x: auto;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  body[data-page="form"] nav.py-xl > div {
    min-width: 680px;
  }

  body[data-page="form"] > main > section.mt-xl,
  body[data-page="upload"] > main > div.grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="form"] .p-lg,
  body[data-page="upload"] .p-lg,
  body[data-page="report"] .p-5,
  body[data-page="result"] .p-md {
    padding: 16px !important;
  }

  body[data-page="upload"] .glass-effect > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    height: auto !important;
  }

  body[data-page="upload"] .glass-effect > div > button {
    width: 100% !important;
  }

  body[data-page="profile"] > main {
    gap: 16px !important;
  }

  body[data-page="profile"] section.grid.grid-cols-2 {
    gap: 12px !important;
  }
}