html, body {
      height: 100%;
      background: #f7fafc;
      margin: 0;
      padding: 0;
      font-family: 'Pretendard', 'SUIT', 'Noto Sans KR', sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    body {
      min-height: 100vh;
    }
    .main-wrap {
      width: 100%;
      max-width: 580px;
      min-width: 320px;
      margin: 0 auto;
      background: #f7fafc;
      padding: 0 10px 100px 10px;
      box-sizing: border-box;
    }
    .section {padding:36px 0 20px 0; text-align:center; position: relative;}
      .agent-btns {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin-top: 10px;
}

.agent-login-btn,
.agent-join-btn {
  font-size: 0.93em;
  padding: 7px 18px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  background: #e2ebfa;
  color: #1a3f87;
  transition: background 0.2s;
  display: inline-block;
}

.agent-login-btn:hover,
.agent-join-btn:hover {
  background: #d0dcf2;
}
.agent-join-btn {
  background: #f7ecff;
  color: #7d32b8;
}
.agent-join-btn:hover {
  background: #e1ccfc;
}
    .section-title {font-size:1.22em; color:#2051a4; font-weight:800; margin-bottom:7px;}
    .logo-title {font-size:2.25em; font-weight:900; color:#2261d5; line-height:1.08; letter-spacing:2px;}
    .slogan {font-size:1.02em; color:#1a3f87; margin:7px 0 3px 0; font-weight:700;}
    .desc1 {font-size:1.1em; color:#2b2b2b; font-weight:500; margin: 22px 0 12px 0;}
    .divider {
      width: 80px;
      max-width: 32vw;
      height: 0;
      border-top: 2.2px solid #e0e5f4;
      margin: 22px auto 18px auto;
      background: none;
    }
    .explain-flow {margin: 32px 0 0 0; display:flex; flex-direction:column; gap:15px;}
    .flow-title {font-size:1.08em; color:#1d2b5c; font-weight:600; margin-bottom:7px;}
    .flow-box {background:#fff; border-radius:13px; box-shadow:0 2px 16px rgba(50,80,160,0.07); padding:17px 15px 9px 15px; margin-bottom:12px;}
    .flow-step {display:flex;align-items:center; gap:13px; font-size:1em; color:#274079; margin:7px 0;}
    .flow-step .step-icon {font-size:1.34em;}
    .vs {font-size:1.5em; color:#13449a; margin: 18px 0 10px 0; font-weight:700;}
    .highlight {color:#13449a; font-weight:700;}
    .highlight1 {color:#2b7cff; font-weight:700;}
    .cta-btn {
      display: block;
      width: 100%; max-width:340px;
      background:#2261d5; color:#fff;
      font-size:1.17em; font-weight:700;
      border:none; border-radius:13px;
      padding:19px 0; margin: 33px auto 0 auto;
      letter-spacing:0.7px; box-shadow:0 4px 20px rgba(70,110,230,0.10);
      cursor:pointer; transition:background 0.16s;
    }
    .cta-btn:active {background:#1948b7;}
    .my-property-btn {
      margin: 24px auto 40px auto; display: block;
      background: #e8f1fa; color: #2261d5; border:none; border-radius:13px;
      font-weight:700; font-size:1.07em; padding:14px 0;
      width: 100%; max-width:320px; box-shadow:0 2px 12px #dbeafe33;
      transition: background 0.13s;
      cursor:pointer;
    }
    .my-property-btn:active { background: #c4daf5;}
    .my-property-wrap { background: #fff; border-radius:17px; border:1.2px solid #e0e5f4; padding:26px 14px 18px 14px; margin: 42px 0 0 0;}
    .my-property-wrap h3 { color:#2051a4; margin-top:0;}
    .property-card {
      border:1.2px solid #e0e5f4; border-radius:12px;margin-bottom:12px;padding:13px 11px;text-align:left;background:#f9fbfe;
      box-shadow:0 2px 8px #e0e5f422;
    }
    .property-card .info-title {font-weight:700;color:#2261d5;margin-bottom:2px;}
    .property-card .info-location {color:#3956a3; font-size:0.97em;}
    .property-card .interest {color:#2b7cff; font-weight:700; margin-top:7px;}
    .reg-form-wrap {max-width: 540px; margin:0 auto; overflow:hidden; transition: max-height 0.45s cubic-bezier(.5,0,.2,1), opacity 0.35s; max-height:0; opacity:0;}
    .reg-form-wrap.open {max-height:3000px; opacity:1;}
    .form-bg {
      background: linear-gradient(180deg,#e8f1fa 0,#f6f9fc 100%);
      display: flex; align-items: flex-start; justify-content: center;
      padding-top: 2vw; padding-bottom: 6vw;
    }
    .form-container {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity 0.85s cubic-bezier(.45,0,.36,1), transform 0.85s cubic-bezier(.45,0,.36,1);
      will-change: opacity, transform;
      max-width: 540px; width: 100%;
      margin: 0 auto; box-sizing: border-box;
      padding: 0 2vw;
    }
    body.loaded .form-container { opacity: 1; transform: none;}
    .reg-form {
      background: #fff;
      border-radius: 22px;
      box-shadow: 0 7px 32px rgba(80,130,220,0.11);
      padding: 38px 5vw 26px 5vw;
      margin-bottom: 18px;
      margin-top: 0;
      box-sizing: border-box;
      border: 1.1px solid #e0e5f4;
      width: 100%;
      min-width: 250px;
      max-width: 100%;
    }
    .reg-form label {
      display: block;
      margin-bottom: 5px;
      margin-top: 16px;
      font-weight: 600;
      color: #185cc0;
      font-size: 1em;
      line-height: 1.2;
    }
    .reg-form input[type="text"],
    .reg-form input[type="tel"],
    .reg-form input[type="number"],
    .reg-form input[type="password"],
    .reg-form textarea,
    .reg-form select {
      width: 100%;
      box-sizing: border-box;
      padding: 13px 13px;
      border: 1.3px solid #d2d9eb;
      border-radius: 10px;
      font-size: 1.09em;
      margin-bottom: 8px; /* 간격 줄임 */
      margin-top: 1px;
      background: #f8fafd;
      outline: none;
      transition: border 0.16s;
    }
    .reg-form textarea { min-height: 56px; resize: vertical; }
    .reg-form input[type="text"]:focus,
    .reg-form input[type="tel"]:focus,
    .reg-form input[type="number"]:focus,
    .reg-form input[type="password"]:focus,
    .reg-form textarea:focus,
    .reg-form select:focus {
      border: 1.7px solid #2771f6;
      background: #f4f9ff;
    }
    .reg-form select { cursor: pointer; }
    .reg-form .address-group { display: flex; gap: 9px;}
    .reg-form .address-group input { flex: 1; min-width: 0;}
    .reg-form .address-group button {
      padding:12px 15px; border-radius:9px; border:none;
      background:#c9e2ff; color:#1c4696; font-weight:600;
      cursor:pointer; font-size: 1em; margin-top: 0; height: 43px;
      transition: background 0.18s;
    }
    .reg-form .address-group button:hover { background: #a9d0f8;}
    .reg-form .type-group { display: flex; gap: 19px; margin: 9px 0 7px 0;}
    .reg-form .type-group label { margin: 0; font-weight: 500; color: #244a8d; font-size: 1.01em; cursor: pointer; user-select: none;}
    .reg-form .type-group input[type="checkbox"] { margin-right: 7px; accent-color: #2b7cff;}
    .reg-form .row-group { display: flex; gap: 9px; align-items: center; margin-top: 11px;}
    .reg-form .row-group select { flex: 1;}
    .reg-form .row-group label { margin-bottom: 0; margin-top: 0;}
    .reg-form .row-group-single {
      margin-top: 8px;
      display: block;
      width: 100%;
    }
    .reg-form .row-group-single input {
      width: 100%;
      margin-bottom: 0;
      margin-top: 0;
      font-size: 1.03em;
    }
    /* 칩 wrap 및 스타일 개선 */
    .option-section, .info-section {
      background: #f5f8fb;
      border-radius: 12px;
      padding: 12px 8px 8px 8px;
      margin: 11px 0 7px 0;
      box-shadow: 0 1px 9px rgba(130,140,170,0.09);
      border: 1px solid #e5e9f2;
    }
    .option-title { font-weight: 700; color: #2462c5; margin-bottom: 7px; font-size: 0.98em;}
    .option-wrap, .info-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      margin-bottom: 5px;
    }
    .option-chip, .info-chip {
      min-width: 78px;
      max-width: 124px;
      flex: 1 1 23%;
      padding: 8px 10px;
      margin-bottom: 4px;
      text-align: center;
      background: #f6f9ff;
      border: 1.3px solid #d6e4f6;
      color: #2560ae;
      border-radius: 10px;
      font-size: 0.98em;
      cursor: pointer;
      box-sizing: border-box;
      font-weight: 500;
      transition: background 0.13s, border 0.13s, color 0.13s, transform 0.1s cubic-bezier(.5,1.6,.5,1);
      user-select: none;
    }
    .option-chip.selected, .info-chip.selected {
      background: #2b7cff;
      border: 1.5px solid #2368bc;
      color: #fff;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(43,124,255,0.08);
    }
    .option-chip:active, .info-chip:active { transform: scale(0.93);}
    .option-chip:hover, .info-chip:hover { background: #e2eeff; color: #2771f6;}
    .reg-form .manage-fee-group { display: flex; gap: 12px; align-items: center; margin-top: 2px;}
    .reg-form .manage-fee-group input[type="number"] { flex: 1;}
    .reg-form .file-thumb {
      margin-top: 8px;
      width: 54px; height: 54px; object-fit: cover; border-radius: 8px; background: #eee; display: block;
      box-shadow: 0 1px 8px rgba(20,40,90,0.10);
    }
    .reg-form .submit-btn {
      width: 100%; padding: 12px; background: #2b7cff; color: #fff; border: none; border-radius: 10px;
      font-size: 1.08em; font-weight: 700; margin-top: 20px; cursor: pointer; transition: background 0.16s; letter-spacing: 0.4px; position: relative;
    }
    .reg-form .submit-btn.shake { animation: shakeX 0.32s cubic-bezier(.36,.07,.19,.97) 1;}
    @keyframes shakeX {
      10%, 90% { transform: translateX(-2px);}
      20%, 80% { transform: translateX(3px);}
      30%, 50%, 70% { transform: translateX(-4px);}
      40%, 60% { transform: translateX(4px);}
      100% { transform: none;}
    }
    /* 옵션/추가정보는 기본 숨김 */
    #selectOptions {
      transition: max-height 0.33s cubic-bezier(.4,0,.2,1), opacity 0.26s;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      margin-bottom: 0;
    }
    #selectOptions.active {
      max-height: 480px;
      opacity: 1;
      pointer-events: all;
      margin-bottom: 8px;
    }
    .form-note { font-size: 0.97em; color: #888; margin-top: 15px; text-align: center; line-height: 1.5;}
    .price-kor { color:#888; font-size:0.96em; margin-bottom:0; margin-top: -4px; margin-left: 2px; line-height: 1.4;}
    /* PC: 넓고, 옵션칩도 시원하게 */
    @media (min-width: 900px) {
      .main-wrap {
        max-width: 900px;
        padding: 0 0 140px 0;
      }
      .reg-form-wrap, .form-bg, .form-container, .reg-form {
        max-width: 900px !important;
        width: 100% !important;
        margin-left: auto;
        margin-right: auto;
      }
      .reg-form {
        padding: 48px 60px 44px 60px;
        min-width: 400px;
      }
      .option-wrap, .info-wrap {
        gap: 18px 32px;
      }
      .option-chip, .info-chip {
        flex-basis: 16%;
        min-width: 100px;
        max-width: 180px;
        font-size: 1.07em;
        padding: 12px 0;
      }
    }
    @media (max-width: 600px) {
      .main-wrap, .form-container, .reg-form {
        padding-left: 2vw;
        padding-right: 2vw;
        max-width: 99vw;
      }
      .reg-form label, .reg-form input, .reg-form textarea, .reg-form select {
        font-size: 0.98em;
        margin-bottom: 8px;
      }
      .option-chip, .info-chip {
        min-width: 48px;
        font-size: 0.91em;
        padding: 7px 5px;
        max-width: 97px;
      }
      .option-wrap, .info-wrap {
        gap: 8px 6px;
      }
      .reg-form textarea { min-height: 44px; }
      .my-property-btn {padding:11px 0;}
      .my-property-wrap {padding:18px 6px 12px 6px;}
    }
    .agent-footer-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 28px auto 2px auto;
  padding: 0;
  border: none;
}
.agent-footer-btn {
  font-size: 0.93em;
  background: #e8f1fa;
  color: #2051a4;
  border-radius: 9px;
  padding: 6px 17px;
  text-decoration: none;
  margin: 0;
  font-weight: 600;
  box-shadow: 0 1px 7px #dbeafe55;
  transition: background 0.18s, color 0.18s;
  border: none;
  display: inline-block;
  letter-spacing: 0.1px;
}
.agent-footer-btn:hover {
  background: #d1e3fb;
  color: #194896;
}
@media (max-width:600px) {
  .agent-footer-btn { font-size: 0.85em; padding: 6px 9px; }
  .agent-footer-wrap { margin: 18px 0 2px 0; }
}
.my-btn {
  width: 100%;
  max-width: 320px;
  font-size: 1.07em;
  padding: 14px 0;
  border-radius: 13px;
  box-sizing: border-box;
  margin: 0 auto 10px auto;
  display: block;
  font-weight: 700;
  letter-spacing: 0.7px;
}

@media (max-width:600px) {
  .my-btn {
    max-width: 99vw;
    font-size: 0.98em;
    padding: 12px 0;
  }
}