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

    body {
      font-family: -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
      background: #FFF8F0; color: #333; min-height: 100vh;
    }

    .container { max-width: 440px; margin: 0 auto; padding: 0 20px 40px; }

    .header { text-align: center; padding: 40px 0 24px; }
    .header .icon { font-size: 48px; margin-bottom: 12px; }
    .header h1 { font-size: 24px; font-weight: 800; color: #D4451A; margin-bottom: 6px; }
    .header p { font-size: 14px; color: #888; }

    .card {
      background: #fff; border-radius: 16px; padding: 24px;
      margin-bottom: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }

    .steps {
      display: flex; justify-content: center; gap: 8px;
      margin-bottom: 24px;
    }
    .step-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: #DDD; transition: all 0.3s;
    }
    .step-dot.active { background: #D4451A; width: 28px; border-radius: 5px; }
    .step-dot.done { background: #4CAF50; }

    .screen { display: none; }
    .screen.active { display: block; }

    .center { text-align: center; }
    .big-icon { font-size: 60px; margin-bottom: 16px; }
    .screen-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
    .screen-desc { font-size: 14px; color: #888; margin-bottom: 24px; line-height: 1.6; }

    .kakao-btn {
      display: flex; align-items: center; justify-content: center;
      width: 100%; padding: 16px; gap: 10px;
      background: #FEE500; border: none; border-radius: 12px;
      font-size: 16px; font-weight: 700; color: #3C1E1E; cursor: pointer;
    }
    .kakao-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
    .kakao-btn:active { background: #E6CF00; }

    .primary-btn {
      width: 100%; padding: 16px;
      background: #D4451A; color: #fff;
      border: none; border-radius: 12px;
      font-size: 17px; font-weight: 700;
      cursor: pointer; margin-top: 16px;
    }
    .primary-btn:active { background: #B33A15; transform: scale(0.98); }
    .primary-btn:disabled { background: #CCC; cursor: not-allowed; }

    .skip-btn {
      margin-top: 12px; padding: 10px;
      background: none; border: none;
      font-size: 13px; color: #BBB; cursor: pointer;
      text-decoration: underline;
    }

    .small-note {
      margin-top: 12px; font-size: 13px; color: #999; line-height: 1.6; text-align: center;
    }

    .info-list { list-style: none; }
    .info-list li {
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 0; border-bottom: 1px solid #F0F0F0; font-size: 14px;
    }
    .info-list li:last-child { border-bottom: none; }
    .info-list .label { color: #888; font-weight: 500; }
    .info-list .value { color: #333; font-weight: 600; text-align: right; max-width: 60%; }

    .welcome { text-align: center; padding: 10px 0 20px; }
    .welcome .profile-img {
      width: 64px; height: 64px; border-radius: 50%;
      object-fit: cover; margin-bottom: 12px; border: 3px solid #FEE500;
    }
    .welcome h2 { font-size: 20px; font-weight: 800; }
    .welcome p { font-size: 14px; color: #888; margin-top: 4px; }

    .phone-manual { margin-top: 12px; }
    .phone-manual input {
      width: 100%; padding: 14px 16px;
      border: 2px solid #E5E5E5; border-radius: 12px;
      font-size: 16px; outline: none;
    }
    .phone-manual input:focus { border-color: #D4451A; }
    .phone-manual .hint { font-size: 12px; color: #999; margin-top: 6px; }

    .success-check {
      width: 80px; height: 80px;
      background: #E8F5E9; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 24px; font-size: 40px;
    }
    .success-title { font-size: 22px; font-weight: 800; text-align: center; margin-bottom: 8px; }
    .success-msg { font-size: 15px; color: #888; text-align: center; line-height: 1.6; }
    .existing-msg {
      margin-top: 16px; padding: 16px; text-align: center;
      background: #FFF3E0; border-radius: 12px; font-size: 14px; color: #E65100;
    }

    .error-msg {
      display: none; color: #D4451A; font-size: 13px;
      margin-top: 8px; padding: 8px 12px;
      background: #FEF0ED; border-radius: 8px;
    }
    .error-msg.show { display: block; }

    .consent-list { margin-bottom: 8px; }
    .consent-item {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 0; border-bottom: 1px solid #F0F0F0;
      cursor: pointer; user-select: none;
    }
    .consent-item:last-child { border-bottom: none; }
    .consent-item input[type="checkbox"] {
      width: 20px; height: 20px; accent-color: #D4451A;
      flex-shrink: 0; cursor: pointer;
    }
    .consent-text { flex: 1; font-size: 14px; color: #333; }
    .consent-badge {
      display: inline-block; font-size: 11px; font-weight: 700;
      padding: 2px 6px; border-radius: 4px; margin-right: 4px;
      vertical-align: middle;
    }
    .consent-badge.required { background: #FFEBEE; color: #D4451A; }
    .consent-badge.optional { background: #E8F5E9; color: #2E7D32; }
    .consent-detail-btn {
      background: none; border: 1px solid #DDD; border-radius: 6px;
      padding: 4px 10px; font-size: 12px; color: #888;
      cursor: pointer; flex-shrink: 0;
    }
    .consent-detail-btn:active { background: #F5F5F5; }

    .footer { text-align: center; padding: 24px 0; font-size: 12px; color: #BBB; }