/* =========================================================
   開心Do都更｜手機版修正
   只調整 RWD、間距、字級、按鈕、卡片與表格
   不改內容、不改功能、不改連結
   ========================================================= */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  -webkit-text-size-adjust: 100%;
}

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

@media (max-width: 768px) {
  nav {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .nav-in {
    padding: 10px 14px !important;
    gap: 10px !important;
  }

  .brand {
    gap: 8px !important;
  }

  .brand img, .site-logo, .logo-img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    min-width: 38px !important;
  }

  .brand .zh {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .brand .en {
    font-size: 9px !important;
    letter-spacing: 1.8px !important;
  }

  .nav-links {
    display: none !important;
  }

  .nav-cta {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }

  .hero {
    padding: 48px 18px 78px !important;
  }

  .hero-in {
    display: block !important;
  }

  .crest {
    font-size: 11px !important;
    letter-spacing: 1.4px !important;
    padding: 7px 12px !important;
    margin-bottom: 18px !important;
  }

  .hero h1 {
    font-size: clamp(28px, 9vw, 38px) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 16px !important;
  }

  .hero .lede {
    font-size: 15px !important;
    line-height: 1.85 !important;
    margin-bottom: 24px !important;
  }

  .hero-ctas, .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .btn, .btn-o, .btn-g, .btn-secondary {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }

  .hero-checks {
    gap: 10px 14px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }

  .panels {
    position: relative !important;
    min-height: auto !important;
    margin-top: 28px !important;
    display: grid !important;
    gap: 12px !important;
  }

  .panel, .p1, .p2, .p3 {
    position: static !important;
    width: 100% !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    padding: 18px !important;
  }

  .big-n b {
    font-size: 32px !important;
  }

  .auth-bar {
    margin-top: 0 !important;
  }

  .auth-in {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 28px 18px !important;
  }

  .auth-title {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    padding-right: 0 !important;
    padding-bottom: 16px !important;
  }

  .auth-q {
    gap: 12px !important;
  }

  .auth-q h4 {
    font-size: 15px !important;
  }

  .auth-q p {
    font-size: 13px !important;
  }

  .tcs-in {
    grid-template-columns: 1fr 1fr !important;
    padding: 20px 12px !important;
  }

  .tcs-in > div {
    padding: 14px 8px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ink-200) !important;
  }

  .tcs-in .num {
    font-size: 22px !important;
  }

  .sec {
    padding: 56px 18px !important;
  }

  .sec-head {
    margin-bottom: 32px !important;
  }

  .sec-h, .sec-head h2, .contact h2 {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.35 !important;
  }

  .sec-sub, .sec-head p {
    font-size: 14.5px !important;
    line-height: 1.85 !important;
  }

  .eyebrow {
    font-size: 10.5px !important;
    letter-spacing: 2px !important;
  }

  .tools, .fears, .path, .ref-grid, .values, .hd-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .tool, .fear, .ref, .pstep, .val, .hd-mini-card {
    padding: 22px 18px !important;
    border-radius: 14px !important;
  }

  .tool h3, .fear h3, .ref h3, .pstep h4 {
    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  .tool > p, .fear p, .ref p, .pstep p {
    font-size: 13.5px !important;
    line-height: 1.8 !important;
  }

  .arts {
    grid-template-columns: 1fr !important;
  }

  .acell, .acell.feat {
    min-height: auto !important;
    padding: 22px 18px !important;
  }

  .acell.feat {
    grid-row: auto !important;
  }

  .acell.feat h3 {
    font-size: 22px !important;
  }

  .cat-tabs {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 6px !important;
  }

  .cat-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .about-in, .contact-in, .line-cta-inner {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 28px !important;
    padding: 56px 18px !important;
  }

  .line-cta-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .line-btn {
    width: 100% !important;
  }

  .fin {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  footer {
    padding: 48px 18px 24px !important;
  }

  .fbb {
    flex-direction: column !important;
    gap: 8px !important;
  }

  table {
    min-width: 680px;
  }

  .table-wrap, .table-container, .data-table, .overflow-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  input, select, textarea {
    font-size: 16px !important;
  }

  label {
    line-height: 1.5 !important;
  }

  button, .btn, .nav-cta, .tool, .ref, .acell {
    touch-action: manipulation;
  }

  #lf {
    width: 54px !important;
    height: 54px !important;
    right: 16px !important;
    bottom: 18px !important;
  }
}

@media (max-width: 390px) {
  .hero h1 {
    font-size: 27px !important;
  }

  .hero .lede {
    font-size: 14px !important;
  }

  .sec {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .tool, .fear, .ref, .acell, .pstep {
    padding: 20px 16px !important;
  }
}