/* ==========================================================
   GROWTHWEB Theme
   Digima 다크 스킨(style-dark.css) 위에 그로스웹 브랜드(블랙 + 그린)를 덮어쓴다.
   반드시 style.css, style-dark.css 다음에 로드해야 한다.
   ========================================================== */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap");

/* ---------- 1. Brand Tokens ---------- */
:root {
  --brand-green: #07c42c;
  --brand-green-dark: #04120a;
  --brand-black: #000;
  --brand-surface: #0d0d0d;
  --brand-surface-2: #141414;
  --brand-border: rgba(255, 255, 255, 0.12);
  --brand-text-muted: rgba(255, 255, 255, 0.64);
  --footer-label-width: 96px;

  --theme-color1: #0d0d0d;
  --theme-color2: var(--brand-green);
  --bg-theme-color2: var(--brand-green);
  --border-theme-color2: var(--brand-green);
  --text-color: var(--brand-text-muted);
  --headings-color: #fff;
  --link-hover-color: var(--brand-green);
  --gradient-1: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 65%, var(--brand-green) 100%);
  --gradient-4: linear-gradient(90deg, #000 0%, var(--brand-green) 100%);
  --gradient-3: linear-gradient(-135deg, rgba(0, 0, 0, 0) 50%, var(--brand-green) 100%);

  /* Figtree에는 한글 글리프가 없어서 한글은 Pretendard로 폴백된다 */
  --text-font: "Figtree", "Pretendard", -apple-system, sans-serif;
  --title-font: "Figtree", "Pretendard", -apple-system, sans-serif;

  --dark-color1: var(--brand-black);
  --dark-color2: var(--brand-surface);
  --dark-color3: var(--brand-surface-2);

  --header-height: 100px;
}

html {
  scroll-behavior: smooth;
}

body {
  word-break: keep-all;
  letter-spacing: -0.01em;
}

section[id] {
  scroll-margin-top: var(--header-height);
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.03em;
  word-break: keep-all;
}

.text-accent {
  color: var(--brand-green);
}

/* ---------- 2. Text Logo ---------- */
.brand-logo {
  display: inline-block;
  font-family: var(--title-font);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
}

.brand-logo span {
  color: var(--brand-green);
}

.brand-logo:hover {
  color: #fff;
}

/* ---------- 3. Header ---------- */
.main-header .main-box {
  background-color: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--brand-border);
}

.main-header .logo-box {
  padding-right: 40px;
}

.main-menu .navigation > li > a {
  font-family: var(--title-font);
  letter-spacing: 0.02em;
}

.main-menu .navigation > li.current > a,
.main-menu .navigation > li > a:hover {
  color: var(--brand-green);
}

.main-header .info-btn .icon {
  background-color: var(--brand-green);
  color: #000;
}

.sticky-header.fixed-header {
  background-color: rgba(0, 0, 0, 0.92);
  border-bottom: 1px solid var(--brand-border);
}

/* ☰ 메뉴 안의 로그인 · 회원가입 (관리자 페이지로 이동) */
.auth-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.auth-link:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
}

.auth-link--primary {
  border-color: var(--brand-green);
  background-color: var(--brand-green);
  color: #000;
}

.auth-link--primary:hover {
  background-color: transparent;
}

.auth-links--mobile {
  margin: 24px 25px 0;
}

.auth-links--mobile .auth-link {
  flex: 1;
  justify-content: center;
}

/* ☰ 메뉴 버튼: 템플릿은 1023px 이하에서만 보이지만, PC에서도 사이드 메뉴(로그인·회원가입·연락처)를 열 수 있게 항상 보인다 */
.main-header .mobile-nav-toggler {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: 16px;
  border: 1px solid var(--brand-border);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.main-header .mobile-nav-toggler:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
}

.sticky-header .nav-outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}

/* ☰ 버튼이 자리를 차지해 메뉴가 두 줄로 밀리지 않도록, 좁은 PC 화면에서는 전화번호 글자를 숨기고 아이콘만 남긴다 */
@media (max-width: 1279px) {
  .main-header .outer-box .info-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    background: none;
  }

  .main-header .outer-box .info-btn:before,
  .main-header .outer-box .info-btn .text {
    display: none;
  }

  .header-style-one .main-box .main-menu .navigation > li {
    margin-right: 24px;
  }
}

@media (max-width: 1099px) {
  .header-style-one .main-box .main-menu .navigation > li {
    margin-right: 16px;
  }
}

/* ---------- 4. Buttons ---------- */
.btn-style-one {
  background-color: var(--brand-green);
  color: #000;
}

.btn-style-one .btn-title {
  font-weight: 700;
}

.btn-style-one:before {
  background-color: #fff;
}

.btn-style-one:hover {
  color: #000;
}

.btn-style-one.light-bg {
  background-color: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn-style-one.light-bg:hover {
  color: #000;
}

/* ---------- 5. Main Slider ---------- */
/* 첫 슬라이드는 h1, 나머지는 h2라서 태그 대신 클래스로 같은 모양을 준다 */
.main-slider .slider-title {
  display: block;
  color: #fff;
  font-size: 84px;
  line-height: 1.1em;
  font-weight: 800;
  text-transform: none;
}

.main-slider .slider-eyebrow {
  display: block;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--brand-green);
}

.main-slider .text {
  color: rgba(255, 255, 255, 0.78);
}

.main-slider .social-links li a:hover {
  color: var(--brand-green);
}

/* ---------- 6. Section Titles ---------- */
.sec-title .sub-title {
  color: var(--brand-green);
  letter-spacing: 0.18em;
}

.sec-title h2 {
  text-transform: none;
}

.sec-title .text,
.text {
  color: var(--brand-text-muted);
}

/* ---------- 7. Services ---------- */
.services-section {
  background-color: var(--brand-black);
}

.service-block .inner-box {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
}

.service-block .inner-box:hover {
  border-color: var(--brand-green);
}

.service-block .count,
.service-block .icon {
  color: var(--brand-green);
}

.service-block .title a {
  color: #fff;
}

/* ---------- 8. About ---------- */
.about-section {
  background: radial-gradient(circle at 85% 20%, rgba(7, 196, 44, 0.14), transparent 45%), var(--brand-black);
}

.about-section .sec-title h4 {
  color: var(--brand-green);
  font-size: 20px;
}

.about-section .image-column .image-box .image-1 img,
.about-section .image-column .image-box .image-2 img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.about-section .image-column .image-box .image-1 img {
  aspect-ratio: 4 / 5;
}

.about-section .image-column .image-box .image-2 img {
  aspect-ratio: 1 / 1;
}

.core-competency-list li strong {
  display: inline-block;
  min-width: 80px;
  color: var(--brand-green);
}

.about-section .exp-box .icon,
.about-section .image-column .icon-box {
  color: var(--brand-green);
}

/* 템플릿은 exp-box를 absolute로 띄워서 한글 목록처럼 긴 줄과 겹치므로 버튼 옆 흐름 배치로 바꾼다 */
.about-section .bottom-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
}

.about-section .exp-box {
  position: relative;
  right: auto;
  bottom: auto;
  min-width: 0;
  padding: 20px 30px;
}

.about-section .exp-box .count {
  font-size: 40px;
}

/* ---------- 9. Process (Banner + Steps) ---------- */
.video-section .video-box .content .banner-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--brand-green);
}

.video-section .video-box .content .title {
  text-transform: none;
}

.features-section-two:before {
  background-color: var(--brand-black);
  background-image: linear-gradient(180deg, var(--brand-black) 0%, var(--brand-green-dark) 100%);
}

.feature-block-two .inner-box {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
}

.feature-block-two .inner-box:hover {
  border-color: var(--brand-green);
}

.feature-block-two .title a {
  color: #fff;
}

.feature-block-two .icon {
  color: var(--brand-green);
}

.feature-block-two .step-text {
  position: relative;
  padding: 0 30px 24px;
  font-size: 15px;
  line-height: 1.7em;
  color: var(--brand-text-muted);
}

.feature-block-two .read-more {
  cursor: default;
  color: var(--brand-green);
  letter-spacing: 0.12em;
}

.features-section-two .bottom-box {
  color: var(--brand-text-muted);
}

/* ---------- 10. Projects ---------- */
.projects-section {
  background-color: var(--brand-black);
}

.projects-section .upper-box {
  background-color: var(--brand-surface);
}

.project-block .image-box .image img {
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}

.project-block .caption-box .title a:hover {
  color: var(--brand-green);
}

/* ---------- 11. Testimonials ---------- */
.testimonial-section .bg {
  opacity: 0.55;
}

.testimonial-section .sec-title {
  margin-bottom: 20px;
}

/* 템플릿 따옴표 이미지(shape-1.png)가 주황색이라 브랜드 그린 텍스트 따옴표로 교체 */
.testimonial-section .testimonials::before {
  top: -110px;
  background-image: none;
  font-family: Georgia, serif;
  font-size: 160px;
  line-height: 1;
  color: var(--brand-green);
  content: "\201C";
}

.avatar-initial {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark));
  font-size: 28px;
  font-weight: 800;
  color: #fff;
}

.testimonial-thumb .avatar-initial {
  font-size: 20px;
}

.testimonial-block .name {
  color: #fff;
}

.testimonial-block .name .designation {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-green);
}

/* ---------- 12. Fun Fact ---------- */
.fun-fact-section .outer-box {
  background: linear-gradient(120deg, var(--brand-green-dark) 0%, #06401a 100%);
  border: 1px solid rgba(7, 196, 44, 0.3);
}

/* pattern-5 이미지 모서리에 주황 삼각형이 들어 있어 숨긴다 */
.fun-fact-section .outer-box .bg-pattern-5 {
  display: none;
}

.counter-block .icon,
.counter-block .count-box .count-unit {
  color: var(--brand-green);
}

.counter-block .count-box {
  color: #fff;
}

/* ---------- 13. Pricing ---------- */
.pricing-section {
  position: relative;
  padding: 120px 0 90px;
  background-color: var(--brand-black);
}

.pricing-block .inner-box {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
}

.pricing-block.is-featured .inner-box {
  border-color: var(--brand-green);
  -webkit-box-shadow: 0 0 60px rgba(7, 196, 44, 0.18);
          box-shadow: 0 0 60px rgba(7, 196, 44, 0.18);
}

.pricing-block .price-box {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
}

.pricing-block .price-box .price {
  color: #fff;
}

.pricing-block .price-box .price sub {
  bottom: 0;
  margin-left: 4px;
  font-size: 18px;
  color: var(--brand-text-muted);
}

.pricing-block .price-box .validaty {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
  top: 0;
  margin-left: 0;
  font-size: 14px;
  color: var(--brand-green);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pricing-block .title {
  color: #fff;
}

.pricing-block .features li {
  color: var(--brand-text-muted);
}

/* ---------- 14. FAQ ---------- */
.faq-section {
  position: relative;
  padding: 120px 0;
  background-color: var(--brand-surface);
}

.faq-section .sec-title {
  margin-bottom: 30px;
}

.accordion-box .block {
  background-color: var(--brand-black);
}

.accordion-box .block .acc-btn {
  color: #fff;
}

.accordion-box .block .acc-btn.active {
  color: var(--brand-green);
}

.accordion-box .faq-number {
  margin-right: 12px;
  font-weight: 700;
  color: var(--brand-green);
}

.accordion-box .block .acc-btn {
  padding-left: 24px;
  padding-right: 70px;
}

.accordion-box .block .acc-content .content {
  padding-left: 24px;
  padding-right: 24px;
}

.accordion-box .block .acc-btn .icon {
  right: 20px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 14px;
  background-color: var(--brand-surface-2);
  color: #fff;
}

.accordion-box .block .acc-btn.active .icon {
  background-color: var(--brand-green);
  color: #000;
}

/* ---------- 15. Contact ---------- */
.contact-section {
  background-color: var(--brand-black);
}

.contact-info-block .icon {
  background-color: var(--brand-green);
  color: #000;
}

.contact-info-block .text a:hover {
  color: var(--brand-green);
}

.contact-form .form-group select {
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 0;
  background-color: #0a090f;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2307c42c' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
}

.contact-form .form-group input:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus {
  border-color: var(--brand-green);
  outline: none;
}

.contact-form .form-group .is-invalid {
  border-color: #ff5a5a;
}

.contact-form button[disabled] {
  opacity: 0.6;
  cursor: wait;
}

.contact-form .form-status {
  min-height: 24px;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6em;
}

.contact-form .form-status.is-error {
  color: #ff7a7a;
}

.contact-form .form-status.is-success {
  color: var(--brand-green);
}

/* ---------- 16. Call To Action ---------- */
.call-to-action {
  background: linear-gradient(90deg, var(--brand-surface) 0%, var(--brand-green-dark) 100%);
}

.call-to-action .title {
  color: #fff;
}

/* 템플릿 라인 패턴이 금색이라 무채색으로 바꿔 브랜드 톤에 맞춘다 */
.call-to-action .bg-pattern-7,
.services-section .bg-pattern-1 {
  opacity: 0.35;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

/* ---------- 17. Footer ---------- */
.main-footer {
  background-color: var(--brand-black);
  border-top: 1px solid var(--brand-border);
}

.main-footer .widget-title {
  color: #fff;
}

.main-footer .user-links li a:hover,
.main-footer .contact-info .text a:hover,
.main-footer .contacts-widget .text a:hover {
  color: var(--brand-green);
}

.main-footer .contacts-widget .text a {
  color: var(--brand-green);
}

.main-footer .footer-cta {
  margin-top: 20px;
}

.main-footer .footer-bottom .inner-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.main-footer .policy-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-footer .policy-links a {
  font-size: 14px;
  color: var(--brand-text-muted);
}

.main-footer .policy-links a:hover {
  color: var(--brand-green);
}

.scroll-to-top {
  background-color: var(--brand-green);
  color: #000;
}

/* ---------- 18. Responsive ---------- */
@media (max-width: 1199.98px) {
  .main-slider .slider-title {
    font-size: 64px;
  }
}

@media (max-width: 767.98px) {
  .main-slider .slider-title {
    font-size: 40px;
  }

  .main-slider .slider-eyebrow {
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  .pricing-section,
  .faq-section {
    padding: 80px 0 60px;
  }

  .main-footer .footer-bottom .inner-container {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
  }

  /* 모바일 푸터: 가운데 정렬로 길게 쌓이면 항목 구분이 어려워서, 카테고리는 왼쪽 · 내용은 오른쪽 2단 표 형태로 정리한다 */
  .main-footer .upper-box {
    padding: 36px 0 0;
    border-bottom: 0;
  }

  .main-footer .upper-box .contact-info.logo-box {
    margin-bottom: 20px;
  }

  .main-footer .upper-box .contact-info {
    margin-bottom: 0;
  }

  .main-footer .upper-box .contact-info .inner-box,
  .main-footer .footer-widget {
    display: grid;
    grid-template-columns: var(--footer-label-width) minmax(0, 1fr);
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
    row-gap: 12px;
    align-items: start;
    width: 100%;
    padding: 18px 0;
    border-top: 1px solid var(--brand-border);
    text-align: left !important;
  }

  .main-footer .upper-box .contact-info .title,
  .main-footer .footer-widget .widget-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: var(--brand-green);
    font-size: 13px;
    line-height: 26px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .main-footer .upper-box .contact-info .inner-box > :not(.title),
  .main-footer .footer-widget > :not(.widget-title) {
    grid-column: 2;
    margin: 0;
  }

  .main-footer .upper-box .contact-info .text {
    font-size: 17px;
    line-height: 26px;
    word-break: break-all;
  }

  .main-footer .widgets-section {
    padding: 0 0 24px;
  }

  .main-footer .footer-column,
  .main-footer .footer-column .row > [class*="col-"],
  .main-footer .about-widget {
    margin-bottom: 0;
  }

  .main-footer .footer-widget .text {
    font-size: 14px;
    line-height: 1.75;
  }

  /* 한글이 단어 중간에서 줄바꿈되지 않게 한다 */
  .main-footer .footer-widget .text,
  .main-footer .copyright-text {
    word-break: keep-all;
  }

  .main-footer .user-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2px 18px;
  }

  .main-footer .user-links li {
    font-size: 14px;
    line-height: 26px;
  }

  .main-footer .contacts-widget .social-icon-two {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }

  .main-footer .footer-widget .footer-cta {
    justify-self: start;
    margin-top: 4px;
  }
}