* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --accent: #E53935;
      --accent-dark: #C62828;
      --accent-soft: #FDECEC;
      --text-main: #111827;
      --text-sub: #6B7280;
      --border: #EEEEEE;
      --bg: #F7F8FA;
      --white: #FFFFFF;
      --yellow: #FEE500;
      --yellow-text: #191919;
      --header-offset: 76px;
    }

    body {
      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Pretendard",
        "Noto Sans KR",
        sans-serif;

      background: var(--bg);
      color: var(--text-main);
      min-height: 100vh;
    }

    .app {
      width: 100%;
      max-width: 480px;
      margin: 0 auto;

      min-height: 100vh;
      background: var(--bg);

      /* Reserved space for the fixed bottom-support bar lives on .app (not
         body): the app's own background fills it, so scrolling to the end
         never exposes a bare body-colored gap below the app's box. */
      padding-bottom: calc(145px + env(safe-area-inset-bottom));
    }

    .header {
      background: var(--white);

      padding:
        calc(16px + env(safe-area-inset-top))
        20px
        16px;

      border-bottom: 1px solid var(--border);

      display: flex;
      justify-content: space-between;
      align-items: center;

      position: sticky;
      top: 0;
      z-index: 100;
    }

    .logo {
      font-size: 20px;
      font-weight: 900;
      color: #222222;
      letter-spacing: 0.2px;
    }

    .logo span {
      color: var(--accent);
    }

    .support-small {
      text-decoration: none;
      color: var(--text-sub);
      font-size: 13px;
      font-weight: 700;
    }


    main {
      padding: 28px 18px;
    }

    .badge {
      display: inline-block;
      background: var(--accent-soft);
      color: var(--accent);
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 14px;
    }

    .title {
      font-size: 27px;
      line-height: 1.35;
      font-weight: 900;
      margin-bottom: 10px;
      color: #171717;
    }

    .subtitle {
      color: var(--text-sub);
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 28px;
    }

    .card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 22px 18px;
      margin-bottom: 14px;

      /* Keeps the card title clear of the sticky .header instead of scrolling
         it fully underneath. --header-offset is measured from the header's
         actual rendered height (customer.js), so it stays correct across
         safe-area insets and viewport width. */
      scroll-margin-top: var(--header-offset);
    }

    .card-title {
      font-size: 17px;
      font-weight: 800;
      margin-bottom: 7px;
      color: #222222;
    }

    .card-desc {
      color: var(--text-sub);
      font-size: 13px;
      line-height: 1.65;
      margin-bottom: 18px;
    }

    .input {
      width: 100%;
      height: 56px;

      border: 1px solid #D1D5DB;
      border-radius: 14px;

      padding: 0 16px;

      font-size: 16px;
      outline: none;

      margin-bottom: 10px;
      background: #FFFFFF;
    }

    .input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.08);
    }

    .code-input {
      font-weight: 700;
      text-transform: uppercase;
    }

    .email-field {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 120px;
      gap: 8px;
      margin-bottom: 10px;
    }

    .email-field .email-input {
      width: 100%;
      min-width: 0;
      margin-bottom: 0;
    }

    .email-field .domain-select {
      width: 100%;
      min-width: 0;
      margin-bottom: 0;
      padding: 0 8px;
      cursor: pointer;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    button {
      border: 0;
      cursor: pointer;
      font-family: inherit;
    }

    .primary-btn {
      width: 100%;
      height: 56px;

      border-radius: 14px;

      background: var(--accent);
      color: var(--white);

      font-size: 16px;
      font-weight: 800;

      transition: 0.15s ease;
    }

    .primary-btn:hover {
      background: var(--accent-dark);
    }

    .primary-btn:active {
      transform: scale(0.99);
      background: var(--accent-dark);
    }

    .secondary-btn {
      width: 100%;
      height: 52px;

      border-radius: 14px;

      background: #F3F4F6;
      color: #374151;

      font-size: 15px;
      font-weight: 800;

      margin-top: 9px;
    }

    .message {
      display: none;

      padding: 14px;
      margin-top: 12px;

      border-radius: 12px;

      font-size: 13px;
      line-height: 1.6;
    }

    .message.success {
      display: block;

      background: #ECFDF5;
      color: #047857;

      border: 1px solid #A7F3D0;
    }

    .message.error {
      display: block;

      background: #FEF2F2;
      color: #B91C1C;

      border: 1px solid #FECACA;
    }

    .hidden {
      display: none;
    }

    .plan-box {
      background: #FAFAFA;
      border: 1px solid #F1F1F1;
      border-radius: 14px;
      padding: 16px;
      margin-bottom: 18px;
    }

    .plan-label {
      color: var(--text-sub);
      font-size: 12px;
      margin-bottom: 5px;
    }

    .plan-value {
      font-size: 21px;
      font-weight: 900;
      color: #171717;
    }

    .email-preview {
      background: #FAFAFA;

      border: 1px solid #E5E7EB;
      border-radius: 14px;

      padding: 18px;

      text-align: center;

      font-size: 16px;
      font-weight: 800;

      margin-bottom: 15px;

      word-break: break-all;
      color: #171717;
    }

    .privacy {
      display: flex;
      gap: 9px;

      margin: 10px 0 18px;

      font-size: 12px;
      line-height: 1.6;

      color: var(--text-sub);
    }

    .privacy input {
      margin-top: 3px;
      accent-color: var(--accent);
    }

    .guide-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 9px;
      margin-bottom: 12px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      font-size: 11px;
      font-weight: 900;
    }

    .guide-title {
      font-size: 18px;
      font-weight: 900;
      line-height: 1.45;
      color: #222222;
      margin-bottom: 8px;
    }

    .guide-desc {
      color: var(--text-sub);
      font-size: 13px;
      line-height: 1.7;
      margin-bottom: 16px;
      white-space: pre-line;
    }

    .reason-box {
      padding: 14px;
      border-radius: 14px;
      background: #FFF6F5;
      border: 1px solid #F8D5D2;
      margin-bottom: 16px;
    }

    .reason-box strong {
      display: block;
      color: #A12824;
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 5px;
    }

    .reason-box p {
      color: #7A4A48;
      font-size: 12px;
      line-height: 1.7;
    }

    .cta-panel {
      padding: 14px;
      border-radius: 16px;
      background: linear-gradient(180deg, #FFF6F5 0%, #FFFFFF 100%);
      border: 1.5px solid rgba(229, 57, 53, 0.25);
      margin-bottom: 18px;
      box-shadow: 0 8px 20px rgba(229, 57, 53, 0.06);
    }

    .cta-panel-top {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 9px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 900;
    }

    .cta-panel-title {
      color: #1F2937;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.5;
      margin-bottom: 10px;
    }

    .profile-link {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 54px;
      border-radius: 14px;
      background: var(--accent);
      color: #FFFFFF;
      text-decoration: none;
      font-size: 15px;
      font-weight: 900;
      box-shadow: 0 10px 18px rgba(229, 57, 53, 0.17);
    }

    .profile-link:active {
      background: var(--accent-dark);
    }

    .profile-link-note {
      margin-top: 9px;
      text-align: center;
      color: #7B8490;
      font-size: 11px;
      line-height: 1.55;
    }

    .step-cards {
      display: grid;
      gap: 10px;
      margin-bottom: 18px;
    }

    .step-card {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 13px;
      border: 1px solid #EEEEEE;
      background: #FBFBFC;
      border-radius: 14px;
    }

    .step-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: var(--accent-soft);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 900;
    }

    .step-copy strong {
      display: block;
      color: #2B2F36;
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 4px;
    }

    .step-copy span {
      display: block;
      color: var(--text-sub);
      font-size: 12px;
      line-height: 1.6;
    }

    .step-inline-note {
      margin-top: 5px;
      color: #9A4E20 !important;
      font-weight: 700;
    }

    .profile-warning {
      padding: 14px;
      border: 1.5px solid rgba(229, 57, 53, 0.45);
      border-radius: 14px;
      background: var(--accent-soft);
      word-break: keep-all;
    }

    .profile-warning strong {
      display: block;
      color: var(--accent-dark);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.6;
    }

    .profile-warning p {
      margin: 4px 0 0;
      color: #A12824;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.7;
    }

    .mid-alert {
      margin: 0 0 10px;
      padding: 12px;
      border-radius: 14px;
      background: #FFF5F5;
      border: 1px solid #FED6D5;
    }

    .mid-alert strong {
      display: block;
      color: #AE2013;
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 6px;
    }

    .mid-alert p {
      color: #6B3030;
      font-size: 12px;
      line-height: 1.7;
      margin: 0;
      white-space: pre-line;
    }

    .support-warning {
      margin: 0 0 14px;
      padding: 14px;
      border: 1px solid #FED6D5;
      border-radius: 14px;
      background: #FFF5F5;
    }

    .support-warning strong {
      display: block;
      color: #AE2013;
      font-size: 13px;
      font-weight: 900;
    }

    .support-warning p {
      margin: 6px 0 0;
      color: #4F4F4F;
      font-size: 12px;
      line-height: 1.7;
    }

    .mid-alert-check {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      color: #5F5026;
      font-size: 12px;
      line-height: 1.6;
      margin: 0 0 18px;
    }

    .mid-alert-check input {
      width: auto;
      height: auto;
      margin: 2px 0 0;
      flex: 0 0 auto;
      accent-color: var(--accent);
    }

    .usage-agree {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      min-height: 56px;
      margin: 16px 0 18px;
      padding: 13px 12px;
      border: 1px solid #F1F1F1;
      border-radius: 14px;
      color: var(--text-main);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.55;
      cursor: pointer;
    }

    .usage-agree input {
      width: 22px;
      height: 22px;
      margin: 0;
      flex: 0 0 auto;
      accent-color: var(--accent);
    }

    .service-btn {
      display: block;

      width: 100%;

      padding: 17px;

      border-radius: 14px;

      background: #1F2937;
      color: var(--white);

      text-align: center;
      text-decoration: none;

      font-size: 15px;
      font-weight: 800;
    }

    .complete-icon {
      width: 56px;
      height: 56px;

      border-radius: 50%;

      background: var(--accent-soft);
      color: var(--accent);

      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 26px;
      font-weight: 900;

      margin-bottom: 16px;
    }

    #completeSection {
      text-align: center;
    }

    #completeSection .complete-icon {
      margin-left: auto;
      margin-right: auto;
    }

    .section-title {
      font-size: 18px;
      font-weight: 900;

      margin: 30px 4px 14px;
      color: #171717;
    }

    details {
      background: var(--white);

      border: 1px solid var(--border);
      border-radius: 14px;

      padding: 17px;

      margin-bottom: 9px;
    }

    summary {
      cursor: pointer;

      list-style: none;

      font-size: 14px;
      font-weight: 800;

      position: relative;
      padding-right: 24px;
      color: #222222;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: "";

      position: absolute;
      top: 50%;
      right: 2px;
      width: 12px;
      height: 12px;
      transform: translateY(-50%);

      background:
        linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
      color: #9CA3AF;
    }

    details[open] summary::after {
      background:
        linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
    }

    details p {
      color: var(--text-sub);

      font-size: 13px;
      line-height: 1.7;

      margin-top: 13px;
    }

    #faqList p {
      white-space: pre-line;
    }

    /* Anchored inside #bottomSupport (position:fixed) instead of the page,
       positioned absolute above its own box, so it can never render behind
       the bar it is pointing at. */
    .support-guide {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(100% + 8px);
      z-index: 199;

      background: #FFFFFF;
      border: 1px solid #E5E7EB;
      border-radius: 999px;

      padding: 7px 13px;

      box-shadow: 0 4px 15px rgba(0,0,0,0.08);

      display: flex;
      align-items: center;
      gap: 5px;

      font-size: 11px;
      font-weight: 800;
      color: #4B5563;

      white-space: nowrap;
      pointer-events: none;
    }

    .guide-arrow {
      color: var(--accent);
      font-size: 14px;
      font-weight: 900;
      animation: arrowMove 1.1s ease-in-out infinite;
    }

    @keyframes arrowMove {
      0%, 100% {
        transform: translateY(-1px);
      }
      50% {
        transform: translateY(3px);
      }
    }

    .bottom-support {
      position: fixed;

      left: 50%;
      bottom: 0;

      transform: translateX(-50%);

      width: 100%;
      max-width: 480px;

      background: rgba(255,255,255,.97);

      border-top: 1px solid var(--border);

      padding:
        11px
        16px
        calc(10px + env(safe-area-inset-bottom));

      z-index: 200;

      box-shadow: 0 -5px 20px rgba(0,0,0,.04);
    }

    .bottom-support a {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      width: 100%;

      background: var(--yellow);
      color: var(--yellow-text);

      border-radius: 14px;

      padding: 14px;

      text-decoration: none;
      text-align: center;

      font-size: 15px;
      font-weight: 900;
    }

    .support-icon {
      width: 18px;
      height: 18px;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .support-note {
      margin-top: 7px;

      text-align: center;

      color: var(--text-sub);

      font-size: 10.5px;
      line-height: 1.45;
    }

    footer {
      padding: 25px 15px;

      text-align: center;

      color: #9CA3AF;

      font-size: 11px;
      line-height: 1.6;
    }

    @media (min-width: 700px) {
      body {
        background: #ECEFF3;
      }

      .app {
        box-shadow: 0 0 40px rgba(0,0,0,.05);
      }
    }

/* Functional additions on top of the literal original styles above (kept
   unchanged below 960px). No sh-* redesign, design-system import or token
   substitution. A CEO-authorized exception adds a desktop (>=960px) two-column
   layout and a centered FAQ indicator mark below — attribute-based hooks
   otherwise remain framework agnostic. */

.customer-intro,
.customer-flow,
.customer-help {
  display: contents;
}

@media (min-width: 960px) {
  .app {
    max-width: 1120px;
    padding-bottom: 0;
  }

  main.customer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 32px;
    padding: 40px;
  }

  .customer-intro,
  .customer-flow,
  .customer-help {
    display: block;
    min-width: 0;
  }

  .customer-intro {
    grid-column: 1 / -1;
  }

  .customer-flow {
    grid-column: 1;
  }

  .customer-help {
    grid-column: 2;
  }

  .customer-help .section-title {
    margin: 0 4px 14px;
  }

  .title {
    font-size: 34px;
  }

  .subtitle {
    max-width: 46ch;
  }

  .support-guide {
    display: none;
  }

  .bottom-support {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    max-width: none;

    margin-top: 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: none;
  }
}

[hidden] {
  display: none !important;
}

.input:disabled,
button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

[aria-busy="true"] {
  opacity: .75;
  cursor: progress;
}

.input[aria-invalid="true"] {
  border-color: #dc2626;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}