/* seoaglobal-web - imweb 원본 복제 스타일 */

:root {
  --beige: #dec8bb;
  --gray: #dfdfdf;
  --text: #212121;
  --accent-red: #e00;
  --card-border: #7fa8e0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--text);
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; }

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

section[id] { scroll-margin-top: 96px; }

h1, h2, h3 { margin: 0; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--beige);
  transition: background-color 0.3s, box-shadow 0.3s;
}

.site-header.scrolled {
  background: #fff;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

.site-header.scrolled #site-nav { background: #fff; }

.header-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 96px;
}

.logo { flex-shrink: 0; }

.logo img { display: block; width: 202px; height: 82px; }

#site-nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#site-nav a {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  padding: 4px 0;
  white-space: nowrap;
}

#site-nav a:hover,
#site-nav a.active { text-decoration: underline; text-underline-offset: 6px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #1a4b8b;
  outline-offset: 2px;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--text);
}

/* ---------- hero ---------- */

.hero {
  background: var(--beige) url("../img/0a4e58c130e4f.jpg") center bottom / cover no-repeat;
  min-height: 52vw;
  text-align: center;
}

.hero h1 {
  padding-top: 70px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
}

.hero-logo { width: 520px; margin-top: 56px; }

.hero p { margin: 24px 0 0; font-size: 20px; line-height: 1.7; }

.hero-logo-en { width: 474px; margin-top: 80px; }

.hero-title-en { margin-top: 40px; font-size: 32px; font-weight: 700; }

/* ---------- vision (gray) ---------- */

.vision {
  background: var(--gray);
  padding: 120px 0 110px;
  text-align: center;
}

.label {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
}

.vision h2, .people h2, .contact h2, .svc-banner h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
}

.vision-body { margin-top: 56px; text-align: left; font-size: 16px; line-height: 1.8; }

.vision-body.center { text-align: center; }

.vision-body p { margin: 0 0 28px; }

.core-sub { margin: 48px 0 0; font-size: 26px; font-weight: 700; }

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 380px;
  padding: 100px 22px 40px;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  color: #fff;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.55));
}

.card h3, .card p { position: relative; }

.card h3 { font-size: 30px; font-weight: 700; }

.card p { margin: 18px 0 0; font-size: 16px; font-weight: 700; line-height: 1.75; }

.card-light { color: #3d3d3d; }

.card-light::before { content: none; }

/* ---------- services ---------- */

.svc-banner {
  background: url("../img/14664875c57d4.jpg") center / cover no-repeat;
  height: 830px;
  padding-top: 48px;
  text-align: center;
}

.label-white { color: #fff; }

.svc-banner h2 { margin-top: 300px; }

.svc-banner-en { padding-top: 0; }

.svc-banner-en h2 { margin: 0; padding-top: 380px; }

.svc-list { padding: 95px 20px 0; }

.svc { margin: 0 0 340px; }

#en-services .svc { margin-bottom: 240px; }

#kr-services .svc:last-child { margin-bottom: 120px; }

.svc-cols {
  display: grid;
  grid-template-columns: 1fr 357px;
  gap: 60px;
  align-items: start;
}

.svc-label { margin: 0 0 10px; font-size: 18px; font-weight: 700; }

.svc h3 { font-size: 30px; font-weight: 700; }

.svc-title-en { font-size: 26px; }

.svc-sub-en { margin: 4px 0 0; font-size: 19px; }

.svc-body { margin: 32px 0 0; font-size: 16px; line-height: 1.8; }

.svc-visit a { color: inherit; }

.svc-img-travel { display: block; margin-top: 44px; max-width: min(988px, 100%); }

.svc-img-cosme { display: block; margin: 44px auto 0; max-width: min(950px, 100%); }

.svc-img-wide { display: block; margin-top: 44px; width: 100%; }

/* ---------- people / employees ---------- */

.people {
  background: url("../img/9b6144397429d.jpg") center / cover no-repeat;
  padding: 110px 0 300px;
  text-align: center;
}

.people-body { margin: 56px 0 0; font-size: 16px; line-height: 1.8; }

.people-sub { margin: 64px 0 0; font-size: 26px; font-weight: 700; }

.values {
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
  max-width: 430px;
}

.values li {
  padding: 16px 0 14px;
  border-bottom: 1px solid #8a8a8a;
  font-size: 15px;
  font-weight: 700;
}

.people-en { padding-bottom: 260px; }

.emp-body { margin-top: 56px; font-size: 15px; line-height: 1.8; text-align: justify; }

.emp-body p { margin: 0 0 26px; }

.emp-sub { margin: 40px 0 0; font-size: 26px; font-weight: 700; text-align: left; }

.emp-sub2 { margin: 36px 0 0; font-size: 21px; text-align: left; }

.emp-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
}

.band { height: 48px; background: #000; }

/* ---------- contact ---------- */

.contact { padding: 100px 0 90px; text-align: center; }

.contact-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 90px;
  text-align: left;
}

.contact-intro { margin: 6px 0 0; font-size: 15px; font-weight: 700; line-height: 1.9; }

.field { margin-bottom: 26px; }

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #757575;
}

.req { color: var(--accent-red); }

.field input,
.field textarea {
  width: 100%;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 16px; /* 16px 미만이면 iOS 포커스 시 자동 줌 */
  color: var(--text);
}

.field textarea { resize: vertical; }

.phone-row { display: flex; align-items: center; gap: 10px; }

.phone-row input { flex: 1 1 0; min-width: 0; max-width: 92px; text-align: center; }

.contact-form button {
  display: block;
  margin: 34px auto 0;
  padding: 10px 24px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 30px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text);
  cursor: pointer;
}

.contact-form button:hover { background: rgba(0, 0, 0, 0.05); }

/* ---------- divider / footer ---------- */

.divider {
  max-width: 1120px;
  margin: 0 auto;
  border: 0;
  border-top: 2px solid #111;
}

footer { padding: 26px 0 60px; }

footer .container { border-top: 2px solid #111; padding-top: 34px; }

footer p { margin: 0 0 22px; font-size: 16px; line-height: 1.9; }

.f-name { margin-bottom: 2px; font-weight: 700; }

.copyright {
  padding-top: 16px;
  border-top: 1px solid #ccc;
  font-size: 11px;
  color: #8a8a8a;
}

/* ---------- tablet nav (데스크톱 내비 최소 필요 폭 ~1060px → 햄버거 전환) ---------- */

@media (max-width: 1120px) {
  .nav-toggle { display: block; }

  /* ponytail: 오버레이 메뉴 - 클릭 대상 밀어내기 금지 */
  #site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--beige);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s;
  }

  #site-nav.open { display: block; }

  #site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; }

  #site-nav a { display: block; padding: 12px 24px; }
}

/* ---------- mobile ---------- */

@media (max-width: 767px) {
  section[id] { scroll-margin-top: 72px; }

  .header-inner { min-height: 72px; }

  .logo img { width: 148px; height: 60px; }

  .hero { min-height: 0; padding-bottom: 46vw; }

  .hero h1 { padding-top: 44px; font-size: 30px; }

  .hero-logo { width: 72%; margin-top: 36px; }

  .hero p { font-size: 16px; padding: 0 4px; }

  .hero-logo-en { margin-top: 48px; }

  .hero-title-en { font-size: 26px; }

  .vision { padding: 70px 0; }

  .vision h2, .people h2, .contact h2, .svc-banner h2 { font-size: 30px; }

  .vision-body { margin-top: 36px; }

  .cards { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }

  .card { min-height: 300px; padding: 60px 16px 28px; }

  .card h3 { font-size: 24px; }

  .card p { font-size: 14px; }

  .svc-banner { height: 360px; }

  .svc-banner h2 { margin-top: 100px; }

  .svc-banner-en h2 { padding-top: 150px; }

  .svc-list { padding-top: 56px; }

  .svc { margin-bottom: 110px; }

  #en-services .svc { margin-bottom: 90px; }

  #kr-services .svc:last-child { margin-bottom: 70px; }

  .svc-cols { grid-template-columns: 1fr; gap: 28px; }

  .svc-cols img { width: 100%; height: auto; }

  .svc h3 { font-size: 24px; }

  .people { padding: 70px 0 160px; }

  .people-sub, .emp-sub, .core-sub { font-size: 22px; }

  .contact { padding: 70px 0; }

  .contact-cols { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }

  footer p { font-size: 14px; }
}

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

/* ---------- scroll reveal (JS가 .reveal 부여 - JS 미로드 시 항상 노출) ---------- */

@media screen and (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .reveal.in { opacity: 1; transform: none; }

  .cards .reveal:nth-child(2) { transition-delay: 0.08s; }
  .cards .reveal:nth-child(3) { transition-delay: 0.16s; }
  .cards .reveal:nth-child(4) { transition-delay: 0.24s; }
}