:root {
  --brand:#0D9488;
  --ink:#111111;
  --bg:#ffffff;
  --bg-alt:#F6FAF9;
  --bg-alt2:#F8FAFC;
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans KR",sans-serif;
  background:var(--bg); color:var(--ink);
}

/* 활성 탭 */
.menu a.is-active,
.menu a[aria-current="page"]{ border-bottom-color: var(--brand); }

/* ===== 헤더 ===== */
.navwrap{
  background:#fff;
  border-bottom:1px solid #eee;
  position:sticky; top:0; z-index:1000;
  transition: box-shadow .2s ease;
}
.navwrap.is-scrolled{ box-shadow:0 6px 16px rgba(0,0,0,.06); }

.navcontainer{ width:100%; margin:0; padding:20px; display:flex; align-items:center; }
.brand{ display:block; line-height:0; }
.logo{ height:42px; width:auto; display:block; }
.right{ margin-left:auto; margin-right:20px; display:flex; align-items:center; gap:40px; }

/* 메뉴 (상위 탭) */
.menu{ list-style:none; display:flex; gap:48px; }
.menu>li{ position:relative; }
.menu a{
  font-size:18px; font-weight:700; text-decoration:none; color:var(--ink);
  padding:6px 0; border-bottom:2px solid transparent;
  transition:border-color .18s ease, color .18s ease;
}
.menu a:hover{ border-bottom-color:var(--brand); }

/* 하위 메뉴 */
.has-sub{ position:relative; }
.has-sub::after{ content:""; position:absolute; left:0; right:0; top:100%; height:10px; }
.submenu{
  position:absolute; left:0; top:calc(100% + 10px);
  min-width:220px; background:#fff; border:1px solid #eee; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:8px; z-index:1100; visibility:hidden; opacity:0; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu{ visibility:visible; opacity:1; transform:translateY(0); }
.submenu li{ list-style:none; }
.submenu a{
  display:block; padding:10px 12px; font-weight:600; font-size:16px; border-radius:8px; border-bottom:none;
  background:#fff; transform:translateX(0); box-shadow:none;
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.submenu a:hover{ background:#f7f7f7; transform:translateX(3px); box-shadow:0 2px 8px rgba(0,0,0,.04); }

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  .menu a, .submenu a{ transition:none; transform:none; }
}

/* CTA 버튼 */
.cta{
  display:inline-block; background:var(--brand); color:#fff;
  padding:10px 18px; border-radius:999px; font-weight:800; font-size:16px; text-decoration:none;
  transition:opacity .15s ease, transform .15s ease;
}
.cta:hover{ opacity:.92; transform:translateY(-1px); }

/* =========================
   히어로
   ========================= */
.hero{
  position:relative; width:100%; min-height:117vh;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.45)),
    url("images/background.jpg") center/cover no-repeat;
  filter:saturate(.95);
}
.hero-inner{
  position:relative; text-align:center; color:#fff; padding:40px 20px; max-width:900px;
  will-change: transform;
}
.hero-inner h1{
  font-size: clamp(28px, 4vw, 56px); letter-spacing:.5px; font-weight:800;
  text-shadow:0 2px 14px rgba(0,0,0,.35); margin-bottom:20px;
}
.hero-desc{
  font-size: clamp(16px, 1.6vw, 20px); line-height:1.9; opacity:.95;
  text-shadow:0 1px 10px rgba(0,0,0,.35); margin-bottom:28px;
}
.hero-download{
  display:inline-block; padding:12px 22px; border-radius:10px; border:1.5px solid rgba(255,255,255,.75);
  color:#fff; background:transparent; font-weight:700; text-decoration:none;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.hero-download:hover{ transform:translateY(-1px); background:var(--brand); border-color:var(--brand); }
@media (max-width:768px){ .hero{ min-height:52vh; } .hero-inner{ padding:36px 16px; } }

/* =========================
   Reveal Animations (opt-in)
   ========================= */
[data-reveal]{ opacity:0; transform: translate3d(0, 8px, 0); transition: opacity .5s ease, transform .5s ease; }
.is-revealed{ opacity:1; transform: translate3d(0, 0, 0); }
[data-reveal="fade-up"]{ transform: translate3d(0, 14px, 0); }
[data-reveal="fade-in"]{ transform: none; opacity:0; }
.is-revealed[data-reveal="fade-in"]{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* =========================
   소개 카드
   ========================= */
.welcome-card{ padding:56px 20px; background:#fff; }
.wc-inner{ max-width:1200px; margin:0 auto; }
.wc-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:36px; padding:28px; }
.wc-text h2{ font-size:clamp(22px,3vw,36px); font-weight:800; color:#2a2a2a; line-height:1.3; margin:6px 0 18px; }
.wc-text p{ font-size:clamp(14px,1.25vw,18px); line-height:1.9; color:#444; margin:12px 0; }
.wc-image{ display:flex; align-items:center; justify-content:center; }
.wc-image img{ width:100%; height:auto; border-radius:10px; object-fit:cover; }
@media (max-width:1024px){ .wc-grid{ grid-template-columns:1fr; } .wc-image{ order:2; } }

/* =========================
   Mission & Vision
   ========================= */
.mv-section{ padding:102px 20px; background:var(--bg-alt); }
.mv-section, .mv-section *{ word-break: keep-all; }
.mv-inner{ max-width:min(1280px, 92vw); margin:0 auto; }
.mv-title{ font-size:clamp(24px,3.2vw,40px); font-weight:800; color:#2a2a2a; margin-bottom:10px; text-align:center; letter-spacing:-0.01em; }
.mv-sub{ text-align:center; color:#51606b; font-size:clamp(14px,1.3vw,18px); margin:8px auto 30px; max-width:980px; line-height:1.9; letter-spacing:-0.005em; }
.mv-card{ background:#fff; border:1px solid #e9f3f1; border-radius:16px; padding:clamp(48px, 2.6vw, 40px); box-shadow:0 10px 26px rgba(13,148,136,.08); }
.mv-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(24px, 3.2vw, 48px); align-items:start; }
.mv-desc{ color:#374151; line-height:1.9; font-size:clamp(16px,1.1vw,18px); letter-spacing:-0.01em; margin:4px 0 0; align-self: center; }
.mv-desc em{ font-style:normal; color:#0f4f47; font-weight:800; }
.mv-list{ list-style:none; margin:0; padding:0; display:grid; grid-auto-rows:min-content; row-gap:14px; }
.mv-list li{ display:grid; grid-template-columns:14px 1fr; column-gap:12px; align-items:start; color:#4b5563; line-height:1.85; margin:0; }
.mv-list li::before{ content:""; width:8px; height:8px; border-radius:999px; background:var(--brand); box-shadow:0 0 0 3px rgba(13,148,136,.12); margin-top:.6em; }
@media (max-width:960px){ .mv-grid{ grid-template-columns:1fr; } .mv-sub{ max-width:100%; } }

/* =========================
   작업 프로세스
   ========================= */
.process{ padding:102px 20px 84px; background:#fff; }
.proc-inner{ max-width:1200px; margin:0 auto; text-align:center; }
.proc-title{ font-size:clamp(24px,3.6vw,40px); font-weight:800; color:#2a2a2a; margin-bottom:10px; }
.proc-sub{ color:#6b7280; font-size:clamp(14px,1.4vw,18px); line-height:1.8; margin-bottom:48px; }
.proc-track{ position:relative; padding:36px 0 14px; }
.proc-track::before{ content:""; position:absolute; left:0; right:0; top:50%; height:3px; background:#1e3a8a20; transform:translateY(-50%); }
.proc-steps{ list-style:none; display:flex; justify-content:space-between; gap:18px; padding:0; margin:0; }
.proc-step{ flex:1 1 0; min-width:120px; }
.proc-step h3{ font-size:clamp(14px,1.4vw,18px); font-weight:800; color:#0f2749; margin-bottom:16px; }
.dot-wrap{ width:76px; height:76px; margin:0 auto 16px; position:relative; display:grid; place-items:center; border-radius:999px; background: radial-gradient(circle at center, #1e3a8a26 0%, #1e3a8a1a 60%, transparent 61%); }
.dot{ width:22px; height:22px; border-radius:999px; background:var(--brand); box-shadow:0 0 0 10px #0f27491f; display:block; }
.desc{ color:#4b5563; font-size:clamp(12px,1.2vw,16px); line-height:1.8; margin:0; }
.proc-step:hover .dot{ transform:scale(1.08); transition:transform .15s ease; }
.proc-step:hover h3{ color:var(--brand); }
@media (max-width:920px){ .proc-track::before{ display:none; } .proc-steps{ flex-wrap:wrap; row-gap:28px; justify-content:center; } .proc-step{ flex:0 1 46%; } }
@media (max-width:540px){ .proc-step{ flex:0 1 100%; } .dot-wrap{ width:66px; height:66px; } .dot{ width:18px; height:18px; } }

/* =========================
   연혁 / 타임라인
   ========================= */
.history{ padding:64px 20px 80px; background:var(--bg-alt2); }
.hist-inner{ max-width:1000px; margin:0 auto; }
.hist-title{ font-size:clamp(20px,2.6vw,28px); font-weight:800; color:#2a2a2a; margin-bottom:22px; text-align:left; }
.timeline{ list-style:none; margin:0; padding:0 0 0 18px; position:relative; border-left:3px solid #dbe2f0; }
.tl-item{ position:relative; padding:12px 0 18px 18px; }
.tl-dot{ position:absolute; left:-9px; top:18px; width:14px; height:14px; background:var(--brand); border-radius:999px; box-shadow:0 0 0 8px rgba(13,148,136,.12); }
.tl-year{ font-weight:800; font-size:14px; color:#0f2749; margin-bottom:6px; }
.tl-body{ background:#fff; border:1px solid #eee; border-radius:10px; padding:14px 16px; box-shadow:0 8px 22px rgba(0,0,0,.04); }
.tl-heading{ font-size:16px; font-weight:800; color:#111; margin:2px 0 6px; }
.tl-desc{ color:#4b5563; line-height:1.85; margin:0; }
@media (max-width:560px){ .timeline{ padding-left:14px; } .tl-item{ padding-left:14px; } .tl-dot{ left:-10px; } }

/* =========================
   회사정보 카드
   ========================= */
.company-info{ padding:56px 20px; background:#fff; }
.ci-inner{ max-width:1000px; margin:0 auto; }
.ci-title{ font-size:clamp(20px,2.6vw,28px); font-weight:800; color:#2a2a2a; margin-bottom:18px; }
.ci-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:16px; line-height:1.7; color:#333; }
.ci-table tr{ border-bottom:1px solid #ececec; }
.ci-table tr:first-child{ border-top:1px solid #ececec; }
.ci-table tr:nth-child(odd) th, .ci-table tr:nth-child(odd) td{ background:#f7f7f7; }
.ci-table th{ width:140px; padding:14px 16px; text-align:left; font-weight:700; color:#4a4a4a; vertical-align:middle; }
.ci-table td{ padding:14px 18px; color:#353535; vertical-align:middle; }
.ci-table a{ color:#111; text-decoration:none; }
.ci-table a:hover{ text-decoration:underline; }

/* =========================
   푸터 (주신 디자인과 동일)
   ========================= */
.site-footer{
  background:#111;
  color:#ccc;
  padding:48px 20px 28px;
  font-size:15px;
  line-height:1.8;
}
.footer-inner{ max-width:1200px; margin:0 auto; }
.footer-top{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.footer-logo{ height:32px; width:auto; display:block; }

/* 본문/링크 톤 */
.footer-info{ color:#aaa; margin-bottom:22px; }
.footer-info a{ color:#aaa; text-decoration:none; }
.footer-info a:hover{ text-decoration:underline; }

/* 구분선 & 하단 영역 */
.site-footer hr{ border:none; border-top:1px solid #333; margin:22px 0; }

.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap;
  gap:12px; color:#777;
}
.footer-links a{ color:#aaa; text-decoration:none; margin:0 4px; }
.footer-links a:hover{ text-decoration:underline; }
.footer-copy{ font-size:14px; }