/* soriai.co.kr 첫 화면 — soriai.css(원본 그대로) 위에 덮어쓰는 것만.
   원본은 더마그넷 사이트 헤더(fixed) 아래에 깔리도록 짜여 있어, 그 자리를 걷고 SORI AI 띠를 헤더로 쓴다. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: #FFFFFF; }
img { max-width: 100%; height: auto; }

/* 더마그넷 헤더가 없으니 위 여백·띠 위치를 0으로 */
.sori-page { padding-top: 0; }
.sori-page .sori-bar { top: 0; z-index: 50; }
@media (min-width: 640px) { .sori-page .sori-bar { top: 0; } }
.sori-page .sori-bar-inner { flex-wrap: nowrap; position: relative; }

/* 오른쪽 묶음: 로그인 · 무료 진단 신청 · (좁을 때) 메뉴 단추 */
.sori-page .sori-bar-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.sori-page .sori-bar-login {
  text-decoration: none; color: #132043; font-size: 14.5px; font-weight: 700;
  padding: 10px 16px; border: 1px solid #D4DEEE; border-radius: 10px; min-height: 44px;
  display: inline-flex; align-items: center; background: #FFFFFF; white-space: nowrap;
}
.sori-page .sori-bar-login:hover { border-color: #132043; color: #132043; }
.sori-page .sori-bar-cta { white-space: nowrap; }
.sori-page .sori-topnav a { white-space: nowrap; }

.sori-page .sori-menu-btn {
  display: none; width: 44px; height: 44px; border: 1px solid #D4DEEE; border-radius: 10px; background: #FFFFFF;
  cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.sori-page .sori-menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #132043; transition: transform .2s, opacity .2s; }
.sori-page .sori-bar.is-open .sori-menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sori-page .sori-bar.is-open .sori-menu-btn span:nth-child(2) { opacity: 0; }
.sori-page .sori-bar.is-open .sori-menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 앵커 메뉴가 한 줄에 다 안 들어가는 폭부터 햄버거로 접는다(원본은 760px에서 숨기기만 했다).
   실측 — 로고 96 + 메뉴 471 + 로그인 73 + 신청 124 + 사이 72 + 좌우 48 = 약 884px */
@media (max-width: 920px) {
  .sori-page .sori-topnav { display: none !important; }
  .sori-page .sori-bar-actions { margin-left: auto; }
  .sori-page .sori-bar-cta { margin-left: 0; }
  .sori-page .sori-menu-btn { display: inline-flex; }
  .sori-page .sori-bar.is-open .sori-topnav {
    display: flex !important; flex-direction: column; gap: 0; margin: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #FFFFFF; border-bottom: 1px solid #DEE6F2; box-shadow: 0 12px 24px -12px rgba(19, 32, 67, .25);
    padding: 4px 24px 12px;
  }
  .sori-page .sori-bar.is-open .sori-topnav a { padding: 12px 0; border-bottom: 1px solid #EEF2F8; font-size: 15.5px; }
  .sori-page .sori-bar.is-open .sori-topnav a:last-child { border-bottom: 0; }
}
@media (max-width: 480px) {
  .sori-page .sori-bar-inner { padding: 8px 12px; gap: 8px; }
  .sori-page .sori-bar-actions { gap: 6px; }
  .sori-page .sori-brand { gap: 6px; }
  .sori-page .sori-brand svg { width: 20px; height: 20px; }
  .sori-page .sori-brand-name { font-size: 16px; }
  .sori-page .sori-bar-login { padding: 8px 10px; font-size: 13.5px; min-height: 40px; }
  .sori-page .sori-bar-cta { padding: 8px 12px; font-size: 13.5px; min-height: 40px; }
  .sori-page .sori-menu-btn { width: 40px; height: 40px; }
  .sori-page .sori-bar.is-open .sori-topnav { padding: 4px 16px 12px; }
}
@media (max-width: 340px) {
  .sori-page .sori-brand svg { display: none; }
}

/* 신청 폼 — 보내는 중 · 필드별 오류 */
.sori-page .sori-submit[disabled] { opacity: .6; cursor: progress; }
.sori-page .sori-form-msgs:empty { display: none; }
.sori-page .sori-consent[aria-invalid="true"] span,
.sori-page .sori-types[aria-invalid="true"] label { color: #A50034; }

/* 푸터 — 운영사 정보만 */
.home-footer {
  background: #FFFFFF; border-top: 1px solid #DEE6F2; padding: 40px 0 48px;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #6B6B6B; word-break: keep-all;
}
.home-footer-inner { max-width: 1248px; margin: 0 auto; padding: 0 24px; }
.home-footer p { margin: 0; }
.home-footer-name { font-size: 15px; font-weight: 700; color: #132043; margin-bottom: 12px !important; }
.home-footer-line { font-size: 13px; line-height: 1.9; }
.home-footer-line a { color: #334666; font-weight: 600; }
.home-footer-copy { font-size: 12px; line-height: 1.7; margin-top: 16px !important; }
@media (max-width: 600px) { .home-footer-line { line-height: 1.7; } }