/* ================================================================
     livero-enterprise-contact.html — 신규 페이지.
     Livero 요금제 페이지와 동일한 네이비·코발트·코랄 컬러 시스템 적용.
     JotMe 참고 이미지의 '도입까지의 과정' 8단계 카드 + 문의 폼 구조를 참고하되
     실적·인증마크 등 근거 없는 수치는 사용하지 않음.
     ================================================================ */
  :root {
      --bg: #F7F8FB;
      --card: #FFFFFF;
      --line: #E7EAF0;
      --ink: #14161F;
      --ink-dim: #787E92;
      --navy: #3646E0;
      --navy-deep: #1E2560;
      --navy-soft: #EBEDFC;
      --coral: #FF6B4A;
      --coral-text: #C94A2E;
      --coral-soft: #FFEDE8;
      --green: #2E9E5B;
      --green-soft: #E8F6EE;
      --radius: 22px;
  }

  * {
      box-sizing: border-box;
  }

  html,
  body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
  }

  body {
      font-family: 'Pretendard', -apple-system, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      word-break: keep-all;
  }

  a {
      color: inherit;
      text-decoration: none;
  }

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

  .wrap {
      max-width: 920px;
      margin: 0 auto;
      padding: 0 24px;
  }

  .gnb {
      background: #fff;
      border-bottom: 1.5px solid var(--line);
  }

  .gnb-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
  }

  .logo {
      display: flex;
      align-items: center;
      gap: 2px;
      font-weight: 800;
      font-size: 18px;
      color: var(--navy-deep);
  }

  .logo .pill {
      background: var(--coral);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 8px;
      margin-left: 6px;
  }

  .back-link {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink-dim);
      display: flex;
      align-items: center;
      gap: 6px;
  }

  .hero {
      padding: 56px 0 40px;
      text-align: center;
  }

  .hero .tag {
      display: inline-flex;
      font-size: 12.5px;
      font-weight: 800;
      color: var(--navy);
      background: var(--navy-soft);
      padding: 6px 14px;
      border-radius: 999px;
      margin-bottom: 16px;
  }

  .hero h1 {
      font-size: 32px;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin: 0 0 14px;
      line-height: 1.4;
  }

  .hero p {
      font-size: 15px;
      color: var(--ink-dim);
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.75;
  }

  .sec-h {
      text-align: center;
      margin-bottom: 32px;
  }

  .sec-h .eyebrow {
      font-size: 12px;
      font-weight: 800;
      color: var(--coral-text);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 8px;
  }

  .sec-h h2 {
      font-size: 24px;
      font-weight: 800;
      margin: 0;
  }

  .sec-h p {
      font-size: 14px;
      color: var(--ink-dim);
      margin: 10px 0 0;
  }

  /* 수정: '도입까지의 과정' 삭제, 대신 제공 서비스를 직관적인 카드로 소개 */
  .services {
      padding: 8px 0 60px;
  }

  .service-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
  }

  .service-card {
      background: #fff;
      border: 1.5px solid var(--line);
      border-radius: 18px;
      padding: 26px 22px;
  }

  .service-card .ic {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      background: var(--navy-soft);
      color: var(--navy);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 16px;
  }

  .service-card .t {
      font-size: 15.5px;
      font-weight: 800;
      margin-bottom: 6px;
  }

  .service-card .d {
      font-size: 13px;
      color: var(--ink-dim);
      line-height: 1.65;
  }

  /* 추가: 전화 상담 안내 박스 — 폼 작성 없이도 바로 연결 가능 */
  .phone-box {
      display: flex;
      align-items: center;
      gap: 16px;
      background: var(--navy-deep);
      border-radius: 18px;
      padding: 22px 24px;
      margin-top: 20px;
  }

  .phone-box .pb-ic {
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
  }

  .phone-box .pb-body {
      flex: 1;
      min-width: 0;
  }

  .phone-box .pb-t {
      color: #fff;
      font-size: 14.5px;
      font-weight: 800;
      margin-bottom: 2px;
  }

  .phone-box .pb-d {
      color: #C9CCE8;
      font-size: 12.5px;
  }

  .phone-box .pb-num {
      flex: 0 0 auto;
      color: #fff;
      font-size: 17px;
      font-weight: 800;
      background: rgba(255, 255, 255, .14);
      padding: 10px 18px;
      border-radius: 12px;
      white-space: nowrap;
  }

  .form-sec {
      padding: 12px 0 70px;
  }

  .form-card {
      background: #fff;
      border: 1.5px solid var(--line);
      border-radius: var(--radius);
      padding: 32px;
  }

  .form-card h3 {
      font-size: 19px;
      font-weight: 800;
      margin: 0 0 6px;
  }

  .form-card .sub {
      font-size: 13.5px;
      color: var(--ink-dim);
      margin: 0 0 26px;
  }

  .f-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
  }

  .f-row {
      margin-bottom: 16px;
  }

  .f-row.full {
      grid-column: 1/-1;
  }

  .f-row label {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 13.5px;
      font-weight: 700;
      margin-bottom: 7px;
  }

  .f-row label .req {
      color: var(--coral-text);
      font-weight: 800;
  }

  .f-row label .opt {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--ink-dim);
  }

  .f-row input,
  .f-row select,
  .f-row textarea {
      width: 100%;
      border: 1.5px solid var(--line);
      border-radius: 11px;
      padding: 12px 14px;
      font-size: 14.5px;
      font-family: inherit;
  }

  .f-row textarea {
      min-height: 90px;
      resize: vertical;
  }

  .f-row input:focus,
  .f-row select:focus,
  .f-row textarea:focus {
      outline: none;
      border-color: var(--navy);
  }

  .trust-box {
      background: var(--navy-soft);
      border-radius: 14px;
      padding: 16px 18px;
      font-size: 12.5px;
      color: #3D4155;
      line-height: 1.75;
      margin: 22px 0;
  }

  .trust-box b {
      color: var(--navy);
  }

  .consent-row {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 13px;
      margin: 16px 0 22px;
  }

  .consent-row input {
      width: 18px;
      height: 18px;
      accent-color: var(--navy);
  }

  .consent-row a {
      color: var(--navy);
      font-weight: 700;
      text-decoration: underline;
  }

  .form-actions {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
  }

  .btn-submit {
      background: var(--coral);
      color: #fff;
      border: none;
      font-size: 15px;
      font-weight: 800;
      padding: 14px 32px;
      border-radius: 13px;
  }

  footer {
      padding: 40px 0;
      text-align: center;
      font-size: 12.5px;
      color: var(--ink-dim);
      border-top: 1.5px solid var(--line);
  }

  .toast {
      position: fixed;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%) translateY(20px);
      opacity: 0;
      background: var(--navy-deep);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      padding: 13px 22px;
      border-radius: 999px;
      transition: .2s;
      z-index: 100;
      pointer-events: none;
  }

  .toast.on {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
  }

  @media (max-width:760px) {
      .service-grid {
          grid-template-columns: 1fr;
      }

      .f-grid {
          grid-template-columns: 1fr;
      }

      .hero h1 {
          font-size: 24px;
      }

      .phone-box {
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
      }

      .phone-box .pb-num {
          width: 100%;
          text-align: center;
      }
  }