/* =========================
   🔥 LOADER
========================= */

#loader {
  position: fixed;
  inset: 0;

  background: white;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 99999;

  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;

  /* 로딩 중 클릭 방지 */
  pointer-events: all;
}

/* 숨김 상태 */
#loader.hide {
  opacity: 0;
  visibility: hidden;

  /* 숨겨진 후 클릭 허용 */
  pointer-events: none;
}

/* 회전 스피너 */
.spinner {
  width: 55px;
  height: 55px;

  border: 4px solid #dbe4ec;
  border-top: 4px solid #0D2539;

  border-radius: 50%;

  animation: spin 0.8s linear infinite;
}

/* 회전 애니메이션 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}



/* =========================
   🔥 기본 설정 (전체 사이트 공통)
========================= */

html {
  scroll-behavior: smooth;
}

/* 모든 요소 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 전체 페이지 기본 */
body {
  margin: 0;

  font-family: Arial, sans-serif;

  background: #fff;
  color: #0D2539;

  overflow-x: hidden;
}

/* 한글 줄바꿈 최적화 */
body,
h1,
h2,
h3,
p,
a,
span {
  word-break: keep-all;
}

/* 이미지 반응형 */
img {
  max-width: 100%;
  display: block;
}

/* 버튼 줄바꿈 방지 */
.primary-btn,
.secondary-btn,
.contact a,
.header-btn {
  white-space: nowrap;
}



/* =========================
   🔥 ACTIVE 메뉴 표시
========================= */

nav a.active {
  color: #4da3ff;

  font-weight: 700;

  position: relative;
}

/* active 밑줄 */
nav a.active::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -6px;

  width: 100%;
  height: 2px;

  background: #4da3ff;
}



/* =========================
   🔥 페이지 전환 효과
========================= */

.page-transition {
  opacity: 0;

  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

/* 페이지 등장 */
.page-transition.show {
  opacity: 1;

  transform: none;
}

/* 페이지 사라짐 */
.page-transition.fade-out {
  opacity: 0;
}



/* =========================
   🔥 LOGO STYLE
========================= */

.logo a {
  display: inline-block;
}

.logo a img {
  height: 50px;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* hover 효과 */
.logo a img:hover {
  transform: scale(1.05);
  opacity: 0.9;
}



/* =========================
   🔥 HEADER
========================= */

.header {
  position: fixed;

  width: 100%;

  top: 0;
  left: 0;

  padding: 20px 60px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(13, 37, 57, 0.08);

  z-index: 1000;

  transition:
    background 0.3s ease,
    padding 0.3s ease,
    backdrop-filter 0.3s ease;
}

/* 로고 */
.logo img {
  height: 45px;
}

/* 메뉴 */
nav {
  display: flex;
  gap: 40px;
}

/* 메뉴 링크 */
nav a {
  color: #0D2539;

  text-decoration: none;

  font-size: 18px;
  font-weight: 500;

  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}

/* 메뉴 hover */
nav a:hover {
  opacity: 0.7;
}

/* 문의 버튼 */
.header-btn {
  padding: 12px 25px;

  background: #0D2539;

  border-radius: 30px;

  color: white;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* 버튼 hover */
.header-btn:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}



/* ========================================
   index.html
======================================== */

/* HERO */
.hero {
  min-height: 80svh;

  background:
    linear-gradient(
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0.75)
    ),
    url('https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?q=80&w=2000&auto=format&fit=crop');

  background-size: cover;
  background-position: center;

  display: flex;
  align-items: center;

  padding: 0 8%;
}

.hero-content {
  max-width: 800px;
}

.hero-logo {
  width: 320px;

  margin-bottom: 30px;
}

.hero h1 {
  font-size: 68px;

  line-height: 1.2;
}

.hero p {
  font-size: 24px;

  color: #445566;

  line-height: 1.8;
}

.hero-buttons {
  display: flex;

  gap: 20px;
}

.primary-btn,
.secondary-btn {
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    background 0.25s ease;
}

.primary-btn:hover,
.secondary-btn:hover {
  transform: translateY(-3px);
}

.primary-btn {
  font-size: 17px;

  background: #0D2539;
  color: white;

  padding: 20px 40px;

  border-radius: 12px;

  text-decoration: none;
}

.secondary-btn {
  font-size: 17px;

  border: 1.5px solid #0D2539;

  background: #f7f9fb;
  color: #0D2539;

  padding: 20px 40px;

  border-radius: 12px;

  text-decoration: none;
}



/* SERVICES */
.services {
  padding: 120px 8%;

  background: #f7f9fb;
}

.services h2 {
  text-align: center;

  font-size: 50px;

  margin-bottom: 10px;
}

.services p {
  text-align: center;

  font-size: 20px;

  color: #556677;

  line-height: 1.8;
}

.service-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

  gap: 30px;
}

.service-card {
  background: #ffffff;

  padding: 50px 40px;

  border-radius: 25px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

  border: 1px solid rgba(13, 37, 57, 0.05);
}

.service-card:hover {
  transform: translateY(-4px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.service-card h3 {
  text-align: left;

  font-size: 20px;

  line-height: 3.5;

  color: #556677;
}

.service-detail {
  list-style: none;

  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;

  font-size: 17px;

  color: #556677;

  line-height: 1.7;
}

.service-img {
  margin-top: 25px;

  border-radius: 15px;

  overflow: hidden;
}

.service-img img {
  width: 100%;

  height: 180px;

  object-fit: cover;

  border-radius: 15px;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.service-card:hover .service-img img {
  transform: scale(1.05);
}



/* PORTFOLIO */
.portfolio {
  padding: 120px 8%;

  background: #ffffff;
}

.portfolio h2 {
  text-align: center;

  font-size: 50px;

  margin-bottom: 10px;
}

.portfolio p {
  text-align: center;

  font-size: 20px;

  color: #556677;

  line-height: 1.8;
}

.portfolio-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

  gap: 30px;
}

.portfolio-box {
  height: 260px;

  background: #f7f9fb;

  border-radius: 25px;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

  border: 1px solid rgba(13, 37, 57, 0.05);
}

.portfolio-box:hover {
  transform: translateY(-4px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.portfolio .hero-buttons {
  display: flex;

  justify-content: center;
}



/* CONTACT */
.contact {
  padding: 120px 8%;

  background: #f7f9fb;

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

  text-align: center;

  gap: 40px;
}

.contact-left {
  display: block;
}

.contact-right {
  display: flex;

  gap: 20px;
}

.contact h2 {
  text-align: center;

  font-size: 50px;

  margin-bottom: 10px;
}

.contact p {
  text-align: center;

  font-size: 20px;

  color: #556677;

  line-height: 1.8;
}

.contact a {
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    background 0.25s ease;

  font-size: 17px;

  background: #0D2539;
  color: white;

  padding: 20px 40px;

  border-radius: 12px;

  text-decoration: none;
}

.contact a:hover {
  transform: translateY(-3px);
}



/* FOOTER */
footer {
  padding: 50px 8%;

  background: #0D2539;

  color: white;

  display: flex;
  justify-content: space-between;

  flex-wrap: wrap;

  gap: 40px;
}

.footer-left {
  display: flex;

  gap: 30px;
}

.footer-left img {
  height: 50px;

  filter: brightness(0) invert(1);
}

.company-info p {
  color: rgba(255, 255, 255, 0.8);

  margin-bottom: 10px;

  line-height: 1.7;
}

.sns-icons {
  display: flex;

  gap: 15px;

  margin-top: 15px;
}

.sns-icons a i {
  font-size: 22px;

  color: white;

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

.sns-icons a i:hover {
  color: #4da3ff;

  transform: scale(1.15);
}



/* ========================================
   index.html RESPONSIVE
======================================== */

/* =========================
   TABLET
========================= */
@media (max-width: 900px) {

  /* HEADER */
  .header {
    padding: 18px 25px;
  }

  nav {
    gap: 20px;
  }

  nav a {
    font-size: 16px;
  }

  .header-btn {
    padding: 10px 18px;

    font-size: 15px;
  }

  .logo img {
    height: 38px;
  }



  /* HERO */
  .hero {
    padding:
      180px 8%
      120px;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-logo {
    width: 240px;
  }

  .hero h1 {
    font-size: 42px;

    line-height: 1.3;
  }

  .hero p {
    font-size: 18px;
  }

  .hero-buttons {
    flex-direction: column;

    width: 100%;
  }

  .primary-btn,
  .secondary-btn {
    width: 100%;

    text-align: center;
  }



  /* SERVICES */
  .services {
    padding: 100px 8%;
  }

  .services h2 {
    font-size: 38px;
  }

  .services p {
    font-size: 18px;
  }

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

  .service-card {
    padding: 40px 30px;
  }

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

    line-height: 1.5;
  }

  .service-detail {
    font-size: 16px;
  }

  .service-img img {
    height: 220px;
  }



  /* PORTFOLIO */
  .portfolio {
    padding: 100px 8%;
  }

  .portfolio h2 {
    font-size: 38px;
  }

  .portfolio p {
    font-size: 18px;
  }

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

  .portfolio-box {
    height: 240px;
  }



  /* CONTACT */
  .contact {
    padding: 100px 8%;
  }

  .contact h2 {
    font-size: 38px;
  }

  .contact p {
    font-size: 18px;
  }

  .contact-right {
    width: 100%;

    flex-direction: column;
  }

  .contact a {
    width: 100%;

    text-align: center;
  }



  /* FOOTER */
  footer {
    flex-direction: column;

    gap: 50px;
  }

  .footer-left {
    flex-direction: column;

    gap: 25px;
  }

}



/* =========================
   MOBILE
========================= */
@media (max-width: 480px) {

  /* HEADER */
  .header {
    padding: 16px 20px;

    flex-direction: column;

    gap: 15px;
  }

  nav {
    gap: 15px;

    flex-wrap: wrap;

    justify-content: center;
  }

  .logo img {
    height: 32px;
  }



  /* HERO */
  .hero {
    padding:
      160px 7%
      100px;
  }

  .hero-logo {
    width: 190px;
  }

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

  .hero p {
    font-size: 17px;
  }

  .primary-btn,
  .secondary-btn {
    padding: 18px 25px;

    font-size: 16px;
  }



  /* SERVICES */
  .services h2 {
    font-size: 32px;
  }

  .services p {
    font-size: 17px;
  }

  .service-card {
    padding: 35px 25px;
  }

  .service-card h3 {
    font-size: 22px;
  }

  .service-detail {
    font-size: 15px;

    line-height: 1.8;
  }

  .service-img img {
    height: 180px;
  }



  /* PORTFOLIO */
  .portfolio h2 {
    font-size: 32px;
  }

  .portfolio p {
    font-size: 17px;
  }

  .portfolio-box {
    height: 200px;
  }



  /* CONTACT */
  .contact h2 {
    font-size: 32px;
  }

  .contact p {
    font-size: 17px;
  }

  .contact a {
    padding: 18px 24px;

    font-size: 16px;
  }



  /* FOOTER */
  footer {
    padding: 40px 7%;
  }

  .footer-left img {
    height: 42px;
  }

  .company-info p {
    font-size: 15px;
  }

  .sns-icons a i {
    font-size: 20px;
  }

}



/* ========================================
   COMPANY PAGE
======================================== */

/* HERO */
.company-hero {
  min-height: 80svh;

  background: #f7f9fb;

  display: flex;
  align-items: center;
}

.company-hero-inner {
  width: 100%;

  padding: 0 8%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: center;

  transform: translateY(40px);
}

.company-hero-image {
  display: flex;

  justify-content: center;
  align-items: center;

  height: 100%;
}

.company-hero-image img {
  width: 100%;

  max-width: 450px;

  height: auto;

  border-radius: 25px;

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

.company-hero-text span {
  display: block;

  margin-bottom: 20px;

  color: #4da3ff;

  font-size: 18px;

  letter-spacing: 1px;

  font-weight: 800;
}

.company-hero-text h1 {
  font-size: 64px;

  line-height: 1.2;

  margin-bottom: 10px;
}

.company-hero-text p {
  font-size: 24px;

  line-height: 1.8;

  color: #556677;
}



/* CORE */
.core-service {
  padding: 120px 8%;

  background: #ffffff;
}

.service-badge {
  display: block;

  margin-bottom: 20px;

  color: #4da3ff;

  font-size: 18px;

  letter-spacing: 1px;

  font-weight: 800;
}

.core-top {
  text-align: center;

  margin-bottom: 70px;
}

.core-top h2 {
  font-size: 50px;

  line-height: 1.3;

  margin-bottom: 10px;
}

.core-top p {
  font-size: 20px;

  color: #556677;

  line-height: 1.8;
}

.core-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

  gap: 30px;
}

.core-card {
  background: #f7f9fb;

  padding: 45px 35px;

  border-radius: 25px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

  border: 1px solid rgba(13, 37, 57, 0.05);
}

.core-card:hover {
  transform: translateY(-4px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.core-card h3 {
  font-size: 25px;

  margin-bottom: 10px;
}

.core-card p {
  font-size: 17px;

  line-height: 1.7;

  color: #556677;
}

.core-icon {
  width: 65px;
  height: 65px;

  border-radius: 18px;

  background: #0D2539;

  color: #ffffff;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 24px;

  margin-bottom: 25px;
}



/* WHY */
.why-section {
  padding: 120px 8%;

  background: #f7f9fb;
}

.why-top {
  text-align: center;

  margin-bottom: 70px;
}

.why-badge {
  display: block;

  margin-bottom: 20px;

  color: #4da3ff;

  font-size: 18px;

  letter-spacing: 1px;

  font-weight: 800;
}

.why-top h2 {
  font-size: 50px;

  line-height: 1.2;

  margin-bottom: 10px;
}

.why-top p {
  font-size: 20px;

  line-height: 1.8;

  color: #556677;
}

.why-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

  gap: 30px;
}

.why-card {
  background: #ffffff;

  padding: 45px 35px;

  border-radius: 25px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

  border: 1px solid rgba(13, 37, 57, 0.05);
}

.why-card:hover {
  transform: translateY(-4px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.why-icon {
  width: 65px;
  height: 65px;

  border-radius: 18px;

  background: #0D2539;

  color: #ffffff;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 24px;

  margin-bottom: 25px;
}

.why-card h3 {
  font-size: 25px;

  margin-bottom: 10px;
}

.why-card p {
  font-size: 17px;

  line-height: 1.7;

  color: #556677;
}



/* PROCESS SECTION */
.process-section {
  padding: 120px 8%;

  background: #ffffff;
}

.section-title {
  text-align: center;

  margin-bottom: 70px;
}

.section-badge {
  display: block;

  margin-bottom: 20px;

  color: #4da3ff;

  font-size: 18px;

  letter-spacing: 1px;

  font-weight: 800;
}

.section-title h2 {
  font-size: 50px;

  line-height: 1.2;

  margin-bottom: 10px;
}

.section-title p {
  font-size: 20px;

  line-height: 1.8;

  color: #556677;
}

.process-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

  gap: 30px;
}

.process-card {
  background: #f7f9fb;

  padding: 45px 35px;

  border-radius: 25px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

  border: 1px solid rgba(13, 37, 57, 0.05);
}

.process-card:hover {
  transform: translateY(-4px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.process-icon {
  width: 65px;
  height: 65px;

  border-radius: 18px;

  background: #0d2539;

  color: #ffffff;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 24px;

  margin-bottom: 25px;
}

.step-number {
  font-size: 20px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 10px;
}

.process-card h3 {
  font-size: 25px;

  font-weight: 700;

  margin-bottom: 10px;
}

.process-card p {
  font-size: 17px;

  line-height: 1.7;

  color: #556677;
}



/* ========================================
   company.html RESPONSIVE
======================================== */

/* TABLET */
@media (max-width: 900px) {

  /* HERO */
  .company-hero {
    padding:
      180px 0
      120px;
  }

  .company-hero-inner {
    grid-template-columns: 1fr;

    gap: 60px;

    transform: translateY(0);
  }

  .company-hero-image {
    order: -1;
  }

  .company-hero-image img {
    max-width: 420px;
  }

  .company-hero-text {
    text-align: center;
  }

  .company-hero-text h1 {
    font-size: 46px;

    line-height: 1.3;
  }

  .company-hero-text p {
    font-size: 20px;
  }



  /* CORE */
  .core-service {
    padding: 100px 8%;
  }

  .core-top h2 {
    font-size: 40px;
  }

  .core-top p {
    font-size: 18px;
  }

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

  .core-card {
    padding: 40px 30px;
  }

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



  /* WHY */
  .why-section {
    padding: 100px 8%;
  }

  .why-top h2 {
    font-size: 40px;
  }

  .why-top p {
    font-size: 18px;
  }

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

  .why-card {
    padding: 40px 30px;
  }

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



  /* PROCESS */
  .process-section {
    padding: 100px 8%;
  }

  .section-title h2 {
    font-size: 40px;
  }

  .section-title p {
    font-size: 18px;
  }

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

  .process-card {
    padding: 40px 30px;
  }

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

}



/* MOBILE */
@media (max-width: 480px) {

  /* HERO */
  .company-hero {
    padding:
      160px 0
      100px;
  }

  .company-hero-inner {
    gap: 45px;
  }

  .company-hero-image img {
    max-width: 100%;
  }

  .company-hero-text span {
    font-size: 16px;
  }

  .company-hero-text h1 {
    font-size: 34px;
  }

  .company-hero-text p {
    font-size: 17px;
  }



  /* CORE */
  .core-service {
    padding: 80px 7%;
  }

  .service-badge {
    font-size: 16px;
  }

  .core-top {
    margin-bottom: 50px;
  }

  .core-top h2 {
    font-size: 32px;
  }

  .core-top p {
    font-size: 17px;
  }

  .core-card {
    padding: 35px 25px;
  }

  .core-card h3 {
    font-size: 22px;
  }

  .core-card p {
    font-size: 16px;
  }

  .core-icon {
    width: 58px;
    height: 58px;

    font-size: 22px;
  }



  /* WHY */
  .why-section {
    padding: 80px 7%;
  }

  .why-badge {
    font-size: 16px;
  }

  .why-top {
    margin-bottom: 50px;
  }

  .why-top h2 {
    font-size: 32px;
  }

  .why-top p {
    font-size: 17px;
  }

  .why-card {
    padding: 35px 25px;
  }

  .why-card h3 {
    font-size: 22px;
  }

  .why-card p {
    font-size: 16px;
  }

  .why-icon {
    width: 58px;
    height: 58px;

    font-size: 22px;
  }



  /* PROCESS */
  .process-section {
    padding: 80px 7%;
  }

  .section-badge {
    font-size: 16px;
  }

  .section-title {
    margin-bottom: 50px;
  }

  .section-title h2 {
    font-size: 32px;
  }

  .section-title p {
    font-size: 17px;
  }

  .process-card {
    padding: 35px 25px;
  }

  .step-number {
    font-size: 17px;
  }

  .process-card h3 {
    font-size: 22px;
  }

  .process-card p {
    font-size: 16px;
  }

  .process-icon {
    width: 58px;
    height: 58px;

    font-size: 22px;
  }

}