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

    body {
      min-height: 100dvh;
      overflow-x: hidden;
    }

    *, *::before, *::after {
      min-width: 0;
    }

    .phone {
      width: min(100%, 430px);
      min-height: 100dvh;
      overflow-x: hidden;
      overflow-y: visible;
    }

    .phone.landing-mode {
      height: 100dvh;
      min-height: 0;
      max-height: none;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    #appShell {
      min-height: 100dvh;
    }

    .landing,
    #advancedGatewayScreen .landing {
      position: relative !important;
      inset: auto !important;
      min-height: 100dvh;
      height: auto !important;
      justify-content: flex-start !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      gap: clamp(10px, 2.5dvh, 18px);
      padding: clamp(16px, 5vw, 28px) clamp(14px, 5vw, 22px) calc(24px + env(safe-area-inset-bottom)) !important;
      -webkit-overflow-scrolling: touch;
    }

    .landing h1,
    .title h1,
    .card h2,
    .card h3,
    .quiz-question,
    .landing-brand-text strong,
    .copyright-title {
      letter-spacing: 0 !important;
      overflow-wrap: anywhere;
    }

    .landing h1 {
      font-size: clamp(1.75rem, 8vw, 2.125rem);
      line-height: 1.22;
    }

    .landing-copy {
      margin-top: 0;
      font-size: 1rem;
      line-height: 1.72;
      overflow-wrap: anywhere;
    }

    #landingScreen {
      height: auto !important;
      min-height: 100dvh !important;
      max-height: none !important;
      justify-content: center !important;
      gap: clamp(6px, 1.2dvh, 10px) !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      padding: clamp(12px, 2.5dvh, 20px) clamp(12px, 4vw, 18px) calc(20px + env(safe-area-inset-bottom)) !important;
    }

    #landingScreen h1 {
      font-size: clamp(1.65rem, 7vw, 2.05rem) !important;
      line-height: 1.12;
    }

    #landingScreen .landing-copy {
      font-size: clamp(0.7rem, 3.15vw, 0.94rem) !important;
      line-height: 1.5;
      margin: 0;
    }

    #landingScreen .card {
      margin: 0 auto !important;
      padding: 6px 10px !important;
    }

    #landingScreen .card span {
      font-size: clamp(0.75rem, 3.3vw, 0.95rem) !important;
      line-height: 1.18 !important;
    }

    #landingScreen .landing-menu-container {
      margin: 0 !important;
      gap: 8px;
    }

    #landingScreen .landing-menu-item {
      min-height: 58px;
      padding: 6px 4px !important;
      gap: 3px;
      border-radius: 14px;
    }

    #landingScreen .landing-menu-icon {
      font-size: clamp(1.25rem, 5.8vw, 1.7rem);
    }

    #landingScreen .landing-menu-text {
      font-size: clamp(0.72rem, 3.4vw, 0.9rem);
      line-height: 1.15;
    }

    #landingScreen > button {
      min-height: 64px !important;
      height: 64px !important;
      margin: 4px 0 !important;
      padding: 14px 0 !important;
    }

    #landingScreen > button span {
      font-size: clamp(0.95rem, 4.2vw, 1.15rem) !important;
      font-weight: 900 !important;
    }

    #landingScreen #startAppBtnBrand {
      min-height: 82px !important;
      padding: 8px 14px !important;
      margin: 0 !important;
      gap: 10px !important;
    }

    #landingScreen #startAppBtnBrand .landing-logo-wrap {
      width: clamp(48px, 14vw, 60px) !important;
      height: clamp(48px, 14vw, 60px) !important;
    }

    .landing-brand,
    .advanced-brand-btn {
      flex-wrap: wrap;
      width: 100% !important;
      height: auto !important;
      min-height: 72px;
      margin-top: 0 !important;
      padding: 12px 14px !important;
      row-gap: 8px;
    }

    .landing-brand-text strong,
    .landing-brand span,
    #myRightTurnSignCustom,
    #scenario8-success-msg {
      white-space: normal !important;
      overflow-wrap: anywhere;
    }

    .landing-logo-wrap {
      width: clamp(52px, 16vw, 84px) !important;
      height: clamp(52px, 16vw, 84px) !important;
      flex: 0 0 auto;
    }

    .row,
    .quiz-nav,
    .modal-actions,
    .pedals {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-menu-container {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .tabs {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #startAppBtnBrand {
      flex-wrap: nowrap !important;
      min-height: 100px;
      align-items: center !important;
      justify-content: center !important;
    }

    #startAppBtnBrand > div:last-child {
      flex: 1 1 auto;
      min-width: 0;
      align-items: center !important;
      text-align: center;
    }

    #startAppBtnBrand .landing-brand-text strong {
      font-size: clamp(1.45rem, 7vw, 1.875rem) !important;
      line-height: 1.12;
      text-align: center;
      white-space: nowrap !important;
      overflow-wrap: normal !important;
    }

    #startAppBtnBrand span {
      display: block;
      max-width: 100%;
      text-align: center;
      font-size: clamp(0.86rem, 3.8vw, 1rem) !important;
      line-height: 1.25;
      white-space: nowrap !important;
      overflow-wrap: normal !important;
    }

    .tab-btn,
    .btn,
    .landing button,
    .nav-btn,
    .option,
    .copyright-btn,
    .countdown-start-btn,
    #advancedGatewayScreen button.btn {
      height: auto !important;
      min-height: 48px;
      white-space: normal !important;
      line-height: 1.35;
      overflow-wrap: anywhere;
      word-break: keep-all;
    }

    .tab-btn,
    .nav-btn {
      min-height: 45px !important; /* 버튼 높이 (기본값 약 48px -> 원하는 높이로 숫자 변경) */
      padding: 6px 6px; /* 버튼 글자 위아래 여백 (숫자가 작을수록 얇아짐) */
    }

    #startAppBtnBrand .landing-brand-text,
    #startAppBtnBrand > div:last-child {
      max-width: 100%;
    }

    .landing-menu-text,
    .tab-btn,
    .nav-btn,
    #quizStep,
    #practiceScenarioText,
    .drive-dashboard .speed-box,
    #stop-timer,
    #police-banner,
    #myRightTurnSignCustom,
    #scenario8-success-msg,
    .countdown-title,
    .countdown-box-title,
    .landing > button span,
    #btn-gate-confirm {
      white-space: nowrap !important;
      overflow-wrap: normal !important;
      word-break: keep-all;
      overflow: hidden;
      text-overflow: clip;
    }

    .fit-line {
      display: inline-block;
      max-width: 100%;
      white-space: nowrap !important;
      overflow: hidden;
      text-overflow: clip;
      vertical-align: middle;
    }

    #btn-gate-confirm,
    .landing > button {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0.25em;
    }

    .countdown-start-btn {
      display: flex !important;
      flex-direction: column;
      align-items: center !important;
      justify-content: center !important;
      gap: 3px;
    }

    .landing > button span,
    #btn-gate-confirm .fit-line,
    #btn-gate-confirm .fit-line span,
    .countdown-start-btn .fit-line {
      flex: 0 1 auto;
      min-width: 0;
    }

    .countdown-start-btn br {
      display: none;
    }

    .countdown-box-detail,
    .countdown-box-detail > *,
    .edu-table-left,
    .edu-table-right-cell {
      max-width: 100%;
      min-width: 0;
    }

    .countdown-box-detail > * {
      margin-inline: auto;
      overflow-wrap: anywhere;
      word-break: keep-all;
    }

    .modal-card,
    .modal-card *,
    .result-list,
    .result-list li,
    .result-list li * {
      max-width: 100%;
    }

    .modal-card p,
    .result-list li,
    .result-list li *,
    #resultMessage,
    #resultMessage * {
      white-space: normal !important;
      overflow-wrap: anywhere;
      word-break: keep-all;
      line-height: 1.48 !important;
    }

    #resultMessage > div,
    .result-list li > div,
    .result-list li span {
      font-size: clamp(0.78rem, 3.55vw, 1rem) !important;
    }

    .result-list li {
      padding: clamp(9px, 3.4vw, 12px);
    }

    .penalty-summary {
      background: #f59e0b;
      color: #111827;
      border-radius: 8px;
      padding: 10px;
      font-weight: 900;
      text-align: center;
      font-size: clamp(0.78rem, 3.55vw, 0.98rem) !important;
      line-height: 1.45 !important;
      overflow-wrap: anywhere;
      word-break: keep-all;
    }

    .modal-readable {
      display: block;
      width: 100%;
      font-size: clamp(0.78rem, 3.55vw, 0.98rem) !important;
      line-height: 1.5 !important;
      overflow-wrap: anywhere;
      word-break: keep-all;
    }

    .pedal {
      min-height: clamp(72px, 22vw, 90px);
    }

    #actual-drive-area.drive-wrap {
      display: flex;
      flex-direction: column;
      max-height: none;
      overflow: visible;
    }

    #actual-drive-area .drive-head,
    #actual-drive-area .drive-dashboard,
    #actual-drive-area .tutorial,
    #actual-drive-area .pedals {
      flex: 0 0 auto;
    }

    #actual-drive-area .drive-head {
      padding-block: 6px;
    }

    #actual-drive-area .drive-map {
      flex: 0 0 350px;
      height: 350px !important;
      min-height: 350px !important;
    }

    #actual-drive-area .drive-dashboard {
      gap: 4px;
      padding: 6px 8px;
    }

    #actual-drive-area .drive-dashboard .speed-box,
    #actual-drive-area #stop-timer {
      min-width: 0;
      max-width: 100%;
    }

    #actual-drive-area #stop-timer {
      justify-self: start;
      text-align: left;
    }

    #actual-drive-area .tutorial {
      margin: 6px 8px;
      padding: 7px 8px;
      font-size: clamp(0.72rem, 3.1vw, 0.82rem);
      line-height: 1.35;
    }

    #actual-drive-area .pedals {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px;
      padding: 0 8px 8px;
    }

    #actual-drive-area .pedal {
      min-height: clamp(52px, 18vw, 78px);
    }

    #actual-drive-area .pedal::before,
    #actual-drive-area .pedal::after {
      content: none !important;
      display: none !important;
    }

    .pedal-image {
      object-fit: contain;
    }

    #advancedGatewayScreen button.btn {
      align-items: flex-start !important;
      gap: 8px;
      min-height: 56px !important;
      padding: 12px !important;
      font-size: clamp(0.95rem, 4.2vw, 1.05rem) !important;
    }

    #advancedGatewayScreen button.btn span:first-child {
      flex: 1 1 auto;
      overflow-wrap: anywhere;
    }

    .screen {
      padding-inline: clamp(10px, 4vw, 12px);
      padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }

    .card,
    .watch-item,
    .option,
    .feedback,
    .result-list li,
    .tutorial,
    .copyright-content,
    .countdown-scenario-box {
      overflow-wrap: anywhere;
    }

    .watch-item {
      white-space: nowrap !important;
      overflow: hidden;
      text-overflow: clip;
    }

    .watch-item span {
      font-size: inherit !important;
    }

    #screen-quiz .card,
    .edu-table-row {
      overflow: visible !important;
    }

    .quiz-image {
      width: 100%;
      height: 230px;
      max-height: none;
      aspect-ratio: auto;
      object-fit: fill;
    }

    .drive-head {
      flex-wrap: nowrap !important;
      align-items: center !important;
    }

    #quizStep,
    #practiceScenarioText {
      flex: 1 1 auto;
      min-width: 0;
      line-height: 1.2;
      white-space: nowrap !important;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }

    .drive-map {
      height: clamp(280px, 82vw, 350px);
    }

    #countdown-overlay {
      inset: 0 !important;
      top: 0 !important;
      height: 100% !important;
      justify-content: center !important;
      overflow: hidden !important;
      padding: 8px 12px !important;
      background: rgba(11, 18, 32, 0.0) !important;
    }

    #countdown-overlay .countdown-scenario-box {
      margin: 12px 0 !important;
      width: 100%;
    }

    .modal,
    .copyright-overlay,
    #eduEndScreen {
      position: fixed !important;
      inset: 0 !important;
      align-items: center !important;
      justify-content: center !important;
      overflow-x: hidden;
      overflow-y: auto;
      padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)) !important;
      -webkit-overflow-scrolling: touch;
    }

    /* 팝업 안내창을 화면 중앙에서 살짝 위쪽으로 자연스럽게 배치 */
    .modal-card {
      transform: translateY(-8%) !important;
    }

    .modal-card,
    .copyright-card {
      width: min(100%, 430px);
      max-height: none;
      margin: 0;
    }

    #eduEndScreen {
      min-height: 100dvh;
      justify-content: flex-start !important;
    }

    #eduEndScreen > * {
      max-width: min(100%, 430px);
    }

    .edu-table-row {
      grid-template-columns: minmax(72px, 28%) minmax(0, 1fr) !important;
    }

    .edu-table-left,
    .edu-table-right-cell {
      overflow-wrap: anywhere;
    }

    @media (max-width: 360px) {
      .row,
      .quiz-nav,
      .modal-actions,
      .edu-table-row {
        grid-template-columns: 1fr !important;
      }

      #actual-drive-area .drive-dashboard {
        display: flex !important;
        justify-content: flex-start !important;
        gap: 6px !important;
      }

      #actual-drive-area .drive-dashboard .speed-box,
      #actual-drive-area #stop-timer {
        justify-self: start !important;
        text-align: left !important;
      }

      .edu-table-left {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      }

      .landing h1 {
        font-size: 1.65rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
      }
    }