* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #FFF9EA;
}

body {
  background: #FFF9EA;
  padding-bottom: 100px;
}

.landing {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.landing picture {
  display: block;
  width: 100%;
  line-height: 0;
}

.landing img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.section {
  position: relative;
  width: 100%;
  line-height: 0;
}

/* 클릭 영역 */
.hotspot {
  position: absolute;
  display: block;
  z-index: 10;
  cursor: pointer;
}

/* 1번 CTA */
.inquiry-button {
  left: 42%;
  top: 74.5%;
  width: 16%;
  height: 7%;
}

/* 2번 검색창 타이핑 */
.typing-cover {
  position: absolute;
  left: 33%;
  top: 43.5%;
  width: 21%;
  height: 7%;
  z-index: 5;

  display: flex;
  align-items: center;

  padding-left: 1.4%;
  background: #ffffff;
  color: #111111;

  font-family: Arial, "Noto Sans KR", sans-serif;
  font-size: clamp(24px, 2.3vw, 48px);
  font-weight: 700;
  line-height: 1;
}

.typing-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 5px;

  background: #8e3a31;
  animation: caretBlink 0.75s infinite;
}

@keyframes caretBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* 매출 사례 더보기 */
.sales-more-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 22px 20px;
  background: #FFF9EA;
}

.sales-more-btn {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 12px 24px;
  border: 2px solid #8f3734;
  border-radius: 50px;

  background: #ffffff;
  color: #8f3734;

  font-size: 16px;
  font-weight: 700;
  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.sales-more-icon {
  display: inline-block;
  font-size: 20px;
  transition: transform 0.4s ease;
}

.sales-extra {
  display: grid;
  grid-template-rows: 0fr;
  background: #FFF9EA;
  transition: grid-template-rows 0.6s ease;
}

.sales-extra-inner {
  overflow: hidden;
  background: #FFF9EA;
}

.section-8 {
  background: #FFF9EA;
}

.sales-extra.open {
  grid-template-rows: 1fr;
}

.sales-more-btn.open .sales-more-icon {
  transform: rotate(45deg);
}

/* 13번 공식 채널 링크 */
.blog-link {
  left: 27%;
  top: 88%;
  width: 22%;
  height: 10%;
}

.instagram-link {
  left: 52.5%;
  top: 88%;
  width: 22%;
  height: 10%;
}

/* 1번 첫 화면 등장 */
.section-1 {
  animation: heroReveal 0.9s ease-out both;
}

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: scale(1.025);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================
   하단 고정 창업 문의 폼 - 공통
========================= */
.fixed-inquiry-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 9999;

  background: #873635;
  border-top: 4px solid #e7c79f;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);
}

.fixed-inquiry-form {
  width: min(1440px, 100%);
  min-height: 105px;
  margin: 0 auto;
  padding: 15px 28px;

  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  column-gap: 32px;
  align-items: center;
}

.fixed-inquiry-brand {
  grid-row: 1;

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

  white-space: nowrap;
}

.fixed-inquiry-brand img {
  display: block;
  width: 175px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.fixed-inquiry-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.fixed-inquiry-title span {
  font-size: 15px;
  font-weight: 800;
  color: #f6dfc4;
  letter-spacing: 0.5px;
}

.fixed-inquiry-title strong {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
}

.fixed-inquiry-fields {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(150px, 0.8fr)
    minmax(190px, 1fr)
    minmax(170px, 1fr)
    140px;
  gap: 10px;
  align-items: start;

  max-height: none;
  overflow: visible;
  opacity: 1;
  padding: 0;
  background: transparent;
}

.fixed-inquiry-fields input {
  width: 100%;
  height: 44px;
  padding: 0 14px;

  border: 0;
  border-radius: 5px;
  outline: none;

  background: #ffffff;
  color: #222222;

  font-size: 14px;
}

.fixed-inquiry-fields input:focus {
  box-shadow: 0 0 0 2px #e6c9a3;
}

#inquiry-name {
  grid-column: 1;
  grid-row: 1;
}

#inquiry-area {
  grid-column: 2;
  grid-row: 1;
}

.phone-field-wrap {
  grid-column: 3;
  grid-row: 1;

  display: flex;
  flex-direction: column;
  gap: 5px;
}

.phone-field-wrap #inquiry-phone {
  width: 100%;
}

.fixed-inquiry-agree {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;

  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}

.fixed-inquiry-agree input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #3a211c;
}

.phone-field-wrap .fixed-inquiry-agree {
  margin: 0;
  align-self: flex-end;
}

.fixed-inquiry-submit {
  grid-column: 4;
  grid-row: 1;

  width: 100%;
  height: 44px;

  border: 0;
  border-radius: 5px;

  background: #3a211c;
  color: #ffffff;

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

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.fixed-inquiry-submit:hover {
  background: #241512;
  transform: translateY(-1px);
}

/* PC 오류 메시지 */
.form-error-message {
  display: none;
  position: absolute;
  right: 150px;
  top: 52px;
  z-index: 20;

  width: auto;
  padding: 4px 8px;
  gap: 5px;
  white-space: nowrap;

  border-radius: 5px;
  background: #FFF9EA;
  color: #873635;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.form-error-message span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 15px;
  height: 15px;

  border-radius: 3px;
  background: #873635;
  color: #FFF9EA;

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

.form-error-message.show {
  display: flex;
  align-items: center;
}

/* =========================
   모바일
========================= */
@media (max-width: 768px) {
  body {
    background: #FFF9EA;
    padding-bottom: 0;
    overscroll-behavior-y: none;
  }

  /* 마지막 블로그/인스타 영역이 고정 상담바에 가려지지 않도록 확보 */
  .landing {
    padding-bottom: 96px;
    background: #FFF9EA;
  }

  .inquiry-button {
    left: 32%;
    top: 75%;
    width: 36%;
    height: 6.5%;
  }

  .typing-cover {
    left: 12.5%;
    top: 44.1%;
    width: 57%;
    height: 7%;
    padding-left: 0;
    font-size: 6vw;
  }

  .sales-more-wrap {
    padding: 15px;
  }

  .sales-more-btn {
    padding: 8px 14px;
    font-size: 12px;
  }

  .sales-more-icon {
    font-size: 15px;
  }

  .blog-link {
    left: 4.5%;
    top: 88%;
    width: 40%;
    height: 9%;
  }

  .instagram-link {
    left: 55%;
    top: 88%;
    width: 40%;
    height: 9%;
  }

  .fixed-inquiry-bar {
    background: transparent;
    border-top: 0;

    /* iOS Safari/외부 브라우저 스크롤 시 fixed 요소 리페인트 안정화 */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
  }

  .fixed-inquiry-form {
    min-height: 0;
    padding: 0;
    display: block;
  }

  .fixed-inquiry-brand {
    position: relative;
    margin: 0;
    padding: 24px 22px 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    background: #873635;
    border-radius: 45px 45px 0 0;
    white-space: nowrap;
    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .fixed-inquiry-brand *,
  .fixed-inquiry-submit {
    -webkit-tap-highlight-color: transparent;
  }

  .fixed-inquiry-brand:focus,
  .fixed-inquiry-brand:active {
    background: #873635;
    outline: none;
  }

  .fixed-inquiry-submit:focus,
  .fixed-inquiry-submit:active {
    outline: none;
  }

  .fixed-inquiry-brand::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);

    width: 42px;
    height: 5px;

    border-radius: 999px;
    background: rgba(255, 249, 234, 0.62);
  }

  .fixed-inquiry-brand img {
    width: 105px;
    height: auto;
    filter: brightness(0) invert(1);
    transform: translateY(0);
  }

  .fixed-inquiry-title {
    flex: none;
    margin-left: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    gap: 0;
    line-height: 1;
  }

  .fixed-inquiry-title span {
    display: none;
  }

  .fixed-inquiry-title strong {
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
    color: #FFF9EA;
    transform: translateY(-2px);
  }


  /* PC 그리드 위치값 모바일에서 초기화 */
  #inquiry-name,
  #inquiry-area,
  .phone-field-wrap,
  .fixed-inquiry-submit,
  .form-error-message {
    grid-column: auto;
    grid-row: auto;
  }

  #inquiry-name,
  #inquiry-area,
  .phone-field-wrap,
  .fixed-inquiry-submit {
    width: 100%;
  }

  /* 접힌 상태 */
  .fixed-inquiry-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;

    padding: 0 18px;
    background: #873635;
  }

  /* 펼친 상태 */
  .fixed-inquiry-form.mobile-open {
    background: #873635;
    border-radius: 45px 45px 0 0;
    overflow: hidden;
  }

  .fixed-inquiry-form.mobile-open .fixed-inquiry-brand {
    border-radius: 45px 45px 0 0;
    border-bottom: 0;
  }

  .fixed-inquiry-form.mobile-open .fixed-inquiry-fields {
    max-height: 420px;
    padding: 16px 18px 20px;
    opacity: 1;
  }

  .fixed-inquiry-form.mobile-open .phone-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .fixed-inquiry-form.mobile-open .fixed-inquiry-agree {
    display: flex;
  }

  .fixed-inquiry-agree {
    font-size: 10px;
  }

  .fixed-inquiry-agree input {
    width: 13px;
    height: 13px;
  }

  .fixed-inquiry-submit {
    grid-column: auto;
    grid-row: auto;
  }

  /* 모바일 오류 메시지 */
  .form-error-message {
    position: static;
    display: none;

    width: 100%;
    padding: 7px 10px;
    gap: 6px;
    white-space: normal;

    border-radius: 6px;
    background: #FFF9EA;
    color: #873635;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }

  .form-error-message span {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    font-size: 12px;
  }

  .form-error-message.show {
    display: flex;
  }
}