piratezon_new/app/assets/scss/admin.scss

@charset "UTF-8";
@use "sass:math";


// Utility classes for padding and margin (1-100)
@for $i from 1 through 200 {

  // Padding
  .pt--#{$i} {
    padding-top: #{$i}px !important;
  }

  .pr--#{$i} {
    padding-right: #{$i}px !important;
  }

  .pb--#{$i} {
    padding-bottom: #{$i}px !important;
  }

  .pl--#{$i} {
    padding-left: #{$i}px !important;
  }

  .p--#{$i} {
    padding: #{$i}px !important;
  }

  // Margin
  .mt--#{$i} {
    margin-top: #{$i}px !important;
  }

  .mr--#{$i} {
    margin-right: #{$i}px !important;
  }

  .mb--#{$i} {
    margin-bottom: #{$i}px !important;
  }

  .ml--#{$i} {
    margin-left: #{$i}px !important;
  }

  .m--#{$i} {
    margin: #{$i}px !important;
  }

  @media (max-width: 720px) {
    .pt--#{$i} {
      padding-top: #{math.div($i, 2)}px !important;
    }

    .pr--#{$i} {
      padding-right: #{math.div($i, 2)}px !important;
    }

    .pb--#{$i} {
      padding-bottom: #{math.div($i, 2)}px !important;
    }

    .pl--#{$i} {
      padding-left: #{math.div($i, 2)}px !important;
    }

    .p--#{$i} {
      padding: #{math.div($i, 2)}px !important;
    }

    .mt--#{$i} {
      margin-top: #{math.div($i, 2)}px !important;
    }

    .mr--#{$i} {
      margin-right: #{math.div($i, 2)}px !important;
    }

    .mb--#{$i} {
      margin-bottom: #{math.div($i, 2)}px !important;
    }

    .ml--#{$i} {
      margin-left: #{math.div($i, 2)}px !important;
    }

    .m--#{$i} {
      margin: #{math.div($i, 2)}px !important;
    }
  }
}

@for $i from 12 through 40 {
  .ft--#{$i} {
    font-size : #{$i}px !important;
  }
}

html {
  scroll-behavior: smooth;
}

:root {
  --max-content-width: 1920px;
  --page-margin: 16px;

  @media (min-width: 375px) {
    --page-margin: 28px;
  }

  @media (min-width: 768px) {
    --page-margin: 40px;
  }

  @media (min-width: 1024px) {
    --page-margin: 60px;
  }

  @media (min-width: 1440px) {
    --page-margin: 96px;
  }

  @media (min-width: 1920px) {
    --page-margin: 96px;
  }

  @property --gradient-start {
    syntax: '<color>';
    initial-value: transparent;
    inherits: false;
  }

  @property --gradient-end {
    syntax: '<color>';
    initial-value: transparent;
    inherits: false;
  }

  --spacing-relative-2xs: 4px;
  --spacing-relative-xs: 8px;
  --spacing-relative-sm: 12px;
  --spacing-relative-md: 16px;
  --spacing-relative-lg: 24px;
  --spacing-relative-xl: 28px;
  --spacing-relative-2xl: 36px;
  --spacing-relative-3xl: 40px;
  --spacing-relative-4xl: 48px;
  --spacing-relative-5xl: 64px;
  --spacing-relative-6xl: 80px;
  --spacing-relative-7xl: 96px;
  --spacing-relative-8xl: 120px;

  @media (min-width: 768px) {
    --spacing-relative-3xl: 48px;
    --spacing-relative-4xl: 64px;
    --spacing-relative-5xl: 72px;
    --spacing-relative-6xl: 88px;
    --spacing-relative-7xl: 104px;
    --spacing-relative-8xl: 136px;
  }

  @media (min-width: 1024px) {
    --spacing-relative-2xl: 40px;
    --spacing-relative-3xl: 56px;
    --spacing-relative-4xl: 72px;
    --spacing-relative-5xl: 88px;
    --spacing-relative-6xl: 104px;
    --spacing-relative-7xl: 128px;
    --spacing-relative-8xl: 168px;
  }

  @media (min-width: 1440px) {
    --spacing-relative-xl: 32px;
    --spacing-relative-2xl: 56px;
    --spacing-relative-3xl: 72px;
    --spacing-relative-4xl: 88px;
    --spacing-relative-5xl: 104px;
    --spacing-relative-6xl: 120px;
    --spacing-relative-7xl: 160px;
    --spacing-relative-8xl: 216px;
  }

  @media (min-width: 1920px) {
    --spacing-relative-xl: 40px;
    --spacing-relative-2xl: 72px;
    --spacing-relative-3xl: 88px;
    --spacing-relative-4xl: 104px;
    --spacing-relative-5xl: 120px;
    --spacing-relative-6xl: 136px;
    --spacing-relative-7xl: 176px;
    --spacing-relative-8xl: 248px;
  }
}



/*=================================================
|컴포넌트 별 css
|START
=================================================*/







/*=================================================
|컴포넌트 별 css
|END
=================================================*/

.radius--img--wrap {
  overflow: hidden;
  border-radius: 20px;
}

// 딜러 검색 드롭다운 스타일
.dealer--search--section {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 80px 96px;
  background-color: hsla(216, 23%, 8%, 1);
}

.dealer--search--container {
  display: flex;
  flex-direction: column;
  gap: 48px;
  border-top: 1px solid rgba(252, 252, 253, 0.15);
}

.dealer--category--wrap {
  display: flex;
  flex-direction: column;
}

.dealer--category--title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 24px 0;
  color: rgb(252, 252, 253);
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(252, 252, 253, 0.3);
}

.dealer--region--item {
  border-bottom: 1px solid rgba(252, 252, 253, 0.15);


}

.dealer--region--header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background-color: transparent;
  border: none;
  color: rgb(252, 252, 253);
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background-color: rgba(252, 252, 253, 0.05);
  }

  &.active {
    background-color: rgba(252, 252, 253, 0.08);
  }
}

.dealer--region--name {
  font-size: 18px;
  font-weight: 500;
}

.dealer--toggle--icon {
  font-size: 28px;
  line-height: 1;
  transition: transform 0.3s ease;
}

.dealer--list--content {
  padding: 0 24px 24px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dealer--list {
  list-style: none;
  padding: 0;
  padding-left: 10px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0px;

  li {
    margin: 0;
    position: relative;

    &:before {
      content: '>';
      font-size: 12px;
      margin-right: 10px;
    }

    a {
      text-decoration: underline;
    }

  }
}

.dealer--link {
  display: inline-block;
  color: rgba(252, 252, 253, 0.7);
  text-decoration: none;
  font-size: 16px;
  transition: all 0.2s ease;
  padding: 8px 0;

  &:hover {
    color: rgb(252, 252, 253);
    text-decoration: underline;
  }
}

// 반응형 처리
@media (max-width: 1024px) {
  .dealer--search--section {
    padding: 60px 48px;
  }

  .dealer--search--container {
    gap: 40px;
  }

  .dealer--category--title {
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 12px;
  }

  .dealer--region--header {
    padding: 16px 20px;
  }

  .dealer--region--name {
    font-size: 16px;
  }

  .dealer--list--content {
    padding: 0 20px 20px;
  }

  .dealer--list {
    gap: 6px;
  }
}

@media (max-width: 768px) {
  .dealer--search--section {
    padding: 40px 24px;
  }

  .dealer--search--container {
    gap: 32px;
  }

  .dealer--category--title {
    font-size: 20px;
    margin-bottom: 16px;
    padding-bottom: 10px;
  }

  .dealer--region--header {
    padding: 14px 16px;
  }

  .dealer--region--name {
    font-size: 15px;
  }

  .dealer--toggle--icon {
    font-size: 24px;
  }

  .dealer--list--content {
    padding: 0 16px 16px;
  }

  .dealer--list {
    gap: 6px;
  }

  .dealer--link {
    font-size: 14px;
    padding: 6px 0;
  }
}



// 딜러 검색 페이지 스타일
.dealer--search--section {
  padding: 64px 96px;

  .dealer--search--container {
    margin: 0 auto;
  }

  .dealer--category--wrap {
    display: flex;
    flex-direction: column;
    //gap: 16px;
  }

  .dealer--region--item {
    border-bottom: 1px solid rgba(252, 252, 253, 0.1);
  }

  .dealer--region--header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    background: transparent;
    border: none;
    color: #fcfcfd;
    font-size: 24px;
    font-weight: 400;
    transition: all 0.3s;

    &:hover {
      color: rgba(252, 252, 253, 0.7);
    }

    &.active {
      color: #fcfcfd;
    }
  }

  .dealer--region--name {
    font-size: 24px;
  }

  .dealer--toggle--icon {
    font-size: 32px;
    line-height: 1;
    font-weight: 300;
  }

  .dealer--list--content {
    padding-bottom: 24px;
  }

  .dealer--list {
    display: flex;
    flex-direction: column;
    gap: 16px;

    >li {
      list-style: none;
    }
  }

  .dealer--link {
    display: inline-block;
    color: rgba(252, 252, 253, 0.7);
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: all 0.3s;
    background: transparent;
    border: none;
    font-weight: 400;
    padding: 0;
    cursor: pointer;

    &:hover {
      color: #fcfcfd;
    }
  }
}

// 딜러 팝업 스타일
.dealer--popup--overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

.dealer--popup--container {
  position: relative;
  background-color: #ffffff;
  border-radius: 20px;
  max-width: 1024px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;

    &:hover {
      background: rgba(0, 0, 0, 0.3);
    }
  }

  @media (min-width: 320px) {
    padding: 16px;
  }

  @media (min-width: 375px) {
    padding: 28px;
  }

  @media (min-width: 768px) {
    padding: 48px;
  }

  @media (min-width: 1024px) {
    padding: 56px;
  }

  @media (min-width: 1440px) {
    padding: 64px;
  }
}

.dealer--popup--close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: all 0.3s;

  &:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .close--icon {
    width: 24px;
    height: 24px;
    position: relative;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 2px;
      background-color: #333333;
    }

    &::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    &::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }
}

.dealer--popup--content {
  margin: auto;
  max-width: var(--max-content-width);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "media" "textarea";
  padding: var(--spacing-relative-xl) var(--spacing-relative-md);


  @media (min-width: 1024px) {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "media textarea";
  }

  @media (min-width: 1440px) {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "media textarea";
  }



  .dealer--thumb--wrap {
    border-radius: 20px;
    overflow: hidden;
  }

  .dealer--infos--wrap {
    grid-area: textarea;
    align-self: center;

    @media screen and (min-width: 320px) {
      padding-block-start: var(--spacing-relative-lg);
    }

    @media screen and (min-width: 1024px) {
      display: flex;
      flex-direction: column;
      -webkit-box-pack: center;
      justify-content: center;
      align-items: flex-start;
      padding-inline-start: var(--spacing-relative-2xl);
      padding-inline-end: var(--spacing-relative-2xl);
      padding-block-start: 0px;
    }


  }
}

.dealer--popup--header {
  .dealer--name {
    margin: 0px;
    color: #1a1a1a;
    letter-spacing: 0px;
    font-weight: 400;
    text-decoration: none;
    font-size: 24px;
    line-height: 36px;
    font-stretch: 130%;

    @media (min-width: 1024px) {
      font-size: 28px;
      line-height: 40px;
    }

    @media (min-width: 1440px) {
      font-size: 32px;
      line-height: 44px;
    }

    @media (min-width: 1920px) {
      font-size: 36px;
      line-height: 52px;
    }


  }

  .dealer--type {
    display: inline-block;
    font-size: 14px;
    color: #666666;
    padding: 4px 12px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 100px;
  }
}

.dealer--popup--body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

.dealer--info--section {
  display: flex;
  flex-direction: column;
  gap: 8px;

  .info--label {
    margin: 0px;
    color: #666666;
    letter-spacing: 0px;
    font-weight: 400;
    text-decoration: none;
    font-size: 16px;
    line-height: 24px;
    font-stretch: 105%;

    a {
      word-break: break-all;
    }
  }

  .phone--link,
  .email--link,
  .website--link {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: all 0.3s;

    &:hover {
      color: #1d4ed8;
    }
  }

  .business--hours--item {
    line-height: 1.8;
  }
}

.dealer--popup--footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: center;
}

.dealer--popup--empty {
  padding: 80px 48px;
  text-align: center;

  >p {
    font-size: 16px;
    color: #666666;
  }
}

// 팝업 페이드 애니메이션
.dealer--popup--fade-enter-active,
.dealer--popup--fade-leave-active {
  transition: opacity 0.3s ease;

  .dealer--popup--container {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
}

.dealer--popup--fade-enter-from,
.dealer--popup--fade-leave-to {
  opacity: 0;

  .dealer--popup--container {
    transform: scale(0.95);
    opacity: 0;
  }
}

.dealer--popup--fade-enter-to,
.dealer--popup--fade-leave-from {
  opacity: 1;

  .dealer--popup--container {
    transform: scale(1);
    opacity: 1;
  }
}





/*=================================================
|버튼 리스트 css
|end
=================================================*/


header {
  position: sticky;
  top: 0px;
  z-index: 1000;
  background-color: #ffffff;
  border-bottom: 1px solid #E9E9E9;

  .header--wrap {
    max-width: 1440px;
    // padding:25px 0px;
    background-color: #fff;
    align-items: center;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1001;

    nav {
      display: flex;
      align-items: center;

      >ul {
        display: flex;
        align-items: center;

        >li {
          width: 200px;
          white-space: nowrap;
          height: 90px;
          display: flex;
          position: relative;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          >a {
            width: 100%;
            color: #222;
            text-align: center;
            // padding: 0 60px;
            display: inline-block;
            font-size: 16px;
            font-style: normal;
            font-weight: 700 !important;
            text-transform: uppercase;
            transition: color 0.3s;

            &:hover {
              color: #076FED;
            }
          }


          &:hover {
            .sub--menu--wrap {
              max-height: 550px;
            }
          }

          .sub--menu--wrap {
            max-height: 0px;
            overflow: hidden;
            transition: max-height 0.3s;
            background-color: #fff;
            top: 90.5px;

            &.sub1 {
              position: fixed;
              border-bottom-left-radius: 30px;
              border-bottom-right-radius: 30px;
              max-width: 1440px;
              left: 50%;
              transform: translateX(-50%);
              width: 100%;

              >div {
                padding: 60px 0;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 70px;

                &.active {
                  max-height: 300px;
                }

                li {
                  a {
                    display: flex;
                    gap: 25px;
                    flex-direction: column;
                    max-width: 180px;
                    text-align: center;
                    color: #000;
                    font-size: 16px;
                    font-weight: 500;
                    text-transform: uppercase;

                    img {
                      transition: all 0.3s;
                    }

                    &:hover {
                      color: #076fed;

                      img {
                        transform: scale(1.1);
                      }
                    }
                  }
                }
              }
            }

            &.sub2 {
              position: absolute;
              border-bottom-left-radius: 20px;
              border-bottom-right-radius: 20px;
              width: 280px;
              left: calc(50% - 140px);

              >div {
                padding: 20px 40px;
                display: flex;
                flex-direction: column;
                //height: 550px;
                line-height: 1;

                li {
                  a {
                    cursor: pointer;
                    color: #000;
                    padding: 20px 0;
                    font-size: 16px;
                    font-weight: 500;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    transition: color 0.3s;

                    &:hover {
                      color: #076fed;
                    }
                  }
                }
              }
            }

            &.sub3 {
              position: absolute;
              border-bottom-left-radius: 20px;
              border-bottom-right-radius: 20px;
              width: 280px;
              left: calc(50% - 140px);
              //left: -32px;
              transition: all 0.3s;

              &:has(.active) {
                width: 630px;
              }

              &.h--200 {
                >div {
                  height: 320px;
                }
              }

              &.h--400 {
                >div {
                  height: 432px;
                }
              }

              >div {
                height: 375px;
                // max-height: 550px;
                background-color: #fff;
                position: relative;

                .sub--menu--left {
                  width: 280px;
                  padding: 20px 40px;
                  line-height: 1;

                  li {
                    padding: 20px 0;
                    cursor: pointer;
                    color: #000;
                    font-size: 16px;
                    font-weight: 500;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    transition: color 0.3s;

                    &:hover,
                    &.active {
                      color: #076fed;

                      .ico {
                        background-image: url(/img/ico--header--arrow--blue.svg);
                      }
                    }

                    .ico {
                      width: 18px;
                      background-image: url(/img/ico--header--arrow.svg);
                      height: 18px;
                    }
                  }
                }

                .sub--menu--right {
                  position: absolute;
                  left: 280px;
                  border-left: 1px solid #E5E5E5;
                  width: 350px;
                  padding: 40px 35px;
                  height: 100%;
                  top: 0;

                  >div {
                    opacity: 0;
                    transition: opacity 0.3s;
                    display: none;
                    pointer-events: none;
                    flex-direction: column;
                    gap: 40px;

                    li {
                      line-height: 1;

                      a {
                        display: inline-block;
                        color: #333;
                        font-size: 16px;
                        font-weight: 400;
                        width: 100%;
                        transition: all 0.3s;

                        &:hover {
                          color: #076fed;
                        }
                      }
                    }

                    &.active {
                      display: flex;
                      pointer-events: all;
                      opacity: 1;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

}

footer {
  width: 100%;
  //--one-footer-color-black: hsla(216, 26%, 1%, 1);
  --one-footer-color-white: hsla(216, 33%, 99%, 1);
  --one-footer-neutral-5: hsla(216, 26%, 1%, 0.6);
  --one-footer-neutral-10: hsla(216, 17%, 26%, 1);
  --one-footer-neutral-20: hsla(216, 14%, 35%, 1);
  --one-footer-neutral-70: hsla(216, 33%, 99%, 0.6);
  --one-footer-side-spacing: 16px;
  --one-footer-space-xs: var(--spacing-relative-xs);
  --one-footer-space-s: var(--spacing-relative-sm);
  --one-footer-space-m: var(--spacing-relative-md);
  --one-footer-space-l: var(--spacing-relative-lg);
  --one-footer-space-xl: var(--spacing-relative-xl);
  --one-footer-space-xxl: var(--spacing-relative-2xl);
  --one-footer-space-xxxl: var(--spacing-relative-3xl);
  background: var(--one-footer-color-black);
  box-sizing: border-box;
  color: var(--one-footer-color-white);


  @media (min-width: 375px) {
    --one-footer-side-spacing: 28px;
  }

  @media (min-width: 768px) {
    --one-footer-side-spacing: 40px;
  }

  @media (min-width: 1024px) {
    --one-footer-side-spacing: 60px;
  }

  .footer--wrap {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    .footer--site--map {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 70px 0px 40px;

      >ul {
        display: block;
        list-style: none;
        row-gap: 40px;
        padding: 0px;
        width: 100%;

        @media (min-width: 768px) {
          display: flex;
          flex-flow: wrap;
          width: 100%;
        }
        >li {
          margin-bottom: -1px;


          @media (min-width: 768px) {
            //margin: 0px 24px 40px 0px;            
            width: calc(33.333%);


            &:first-of-type {
              margin-top: 0px;
            }

            >h2 {
              border: none !important;
            }

            >ul {
              >h3 {
                color: #E9E9E9;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 100%;
                /* 14px */
                text-transform: uppercase;
                display: flex;
              }

              >li {
                padding-left: 0;
                padding-right: 0;
                margin-bottom: 25px;

                a {
                  color: #E9E9E9;
                  font-size: 14px;
                  font-style: normal;
                  font-weight: 500;
                  line-height: 100%;
                  /* 14px */
                  text-transform: uppercase;
                  display: flex;
                }
              }
            }
          }


          @media (min-width: 1440px) {
            width: calc(100% / 6);
          }

          >h2 {
            color: var(--one-footer-color-white);
            display: flex;
            flex-flow: row;
            -webkit-box-pack: justify;
            justify-content: space-between;
            padding: var(--one-footer-space-m) 20px;
            width: 100%;
            margin: 0px;
            color: #FFF;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 100%;
            /* 18px */
            text-transform: uppercase;
            text-decoration: none;
            border-top: 1px solid #4A4A4A;
            border-bottom: 1px solid #4A4A4A;


            @media (min-width: 768px) {
              padding: 0px;
              width: auto;
              margin-bottom: 30px;
            }


            @media (min-width: 1440px) {
              font-size: 18px;
              line-height: 28px;
            }

            @media (min-width: 1920px) {
              font-size: 20px;
              line-height: 32px;
            }
          }

        }
      }
    }
  }
}

// ============================================
// Admin Panel Dark Theme Styles
// ============================================

// Light Theme Color Variables
:root {
  --admin-yellow: #e8b546;
  --admin-red: #E85D3F;
  --admin-blue: #3c80f2;
  --admin-bg-navy: #1a2332;
  --admin-bg-primary: rgba(246, 247, 248, 1);
  --admin-bg-secondary: #ffffff;
  --admin-bg-tertiary: #f6f7f8;
  --admin-text-primary: #181d29;
  --admin-text-secondary: #666b75;
  --admin-text-muted: #a8adb8;
  --admin-border-color: #e0e0e0;
  --admin-accent-primary: #1A2332;
  --admin-accent-hover: #1A2332;
  --admin-success: #10b981;
  --admin-warning: #f59e0b;
  --admin-error: #ef4444;
  --admin-shadow: rgba(0, 0, 0, 0.1);
}

// Admin Login Page
.admin--login {
  min-height: 100vh;
  width: 100%;
  min-width: 1680px;
  background: var(--admin-bg-primary);

  .login--container {
    display: flex;
    width: 100%;
    min-width: 1680px;
    min-height: 100vh;
  }

  // 왼쪽 영역 (50%) - 로고 + 설명
  .login--layout {
    flex: 0 0 50%;
    max-width: 50%;
    min-height: 100vh;
    background: #1A2332;
    color: #fcfcfd;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 96px;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: -200px;
      right: -200px;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      opacity: 0.08;
      background: var(--admin-yellow);
      pointer-events: none;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 100px;
      left: 80px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: #e85c3f;
      opacity: 0.08;
      pointer-events: none;
    }

    .login--layout-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 560px;
      display: flex;
      flex-direction: column;
      gap: 48px;
    }

    .login--brand {
      display: flex;
      gap: 16px;
      align-items: center;
      .login--brand--logo{
        width: 56px;
        height: 56px;
        border-radius: 12px;
        background-color: var(--admin-yellow);
        font-size: 28px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .login--brand-title {
        font-size: 22px;
        font-weight: 600;
        color: #fcfcfd;
        letter-spacing: -0.11px;
      }

      .login--brand-tagline {
        font-size: 10px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--admin-yellow);
        margin: 0;
        font-weight: 500;
      }
    }

    .login--deco--line{
      position: relative;
      width: 240px;
      height: 240px;
      margin: 0 auto;
      .circle1{
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1.5px solid var(--admin-yellow);
        opacity: 0.3;
      }
      .circle2{
        position: absolute;
        width: 160px;
        height: 160px;
        top: calc(50% - 80px);
        left: calc(50% - 80px);
        border-radius: 50%;
        border: 1px solid var(--admin-yellow);
        opacity: 0.3;
      }
      .circle3{
        font-size: 100px;
        width: 160px;
        height: 160px;
        position: absolute;
        top: calc(50% - 80px);
        left: calc(50% - 80px);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .login--intro {
      .login--intro-title {
        font-size: 36px;
        font-weight: 600;
        color: #fff;
      }

      .login--intro-desc {
        font-size: 14px;
        letter-spacing: 2.1px;
        line-height: 1.7;
        margin-bottom: 15px;
        color: var(--admin-yellow);
      }

      .login--intro-list {
        color: #b2bdcc;
        font-size: 13px;
        font-weight: 400;
      }
    }

    .login--copyright {
      font-size: 13px;
      color: rgba(252, 252, 253, 0.4);
      letter-spacing: 0.5px;
    }
  }

  // 오른쪽 영역 (50%) - 로그인 폼
  .login--panel {
    flex: 0 0 50%;
    max-width: 50%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 96px;
    background: var(--admin-bg-secondary);
  }

  .login--box {
    width: 100%;
    max-width: 480px;
    background: var(--admin-bg-secondary);
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  .login--logo {
    margin-bottom: 48px;

    > span{
      color: var(--admin-yellow);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.96px;
    }

    h1 {
      font-size: 40px;
      font-weight: 700;
      color: var(--admin-text-primary);
      margin: 0 0 8px 0;
    }

    .subtitle {
      font-size: 14px;
      color: var(--admin-text-secondary);
      margin: 0;
    }
  }

  .login--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--admin-error);
    color: var(--admin-error);
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
  }

  .login--form {
    .form--group {
      margin-bottom: 20px;
    }

    .form--input {
      width: 100%;
      padding: 14px 16px;
      background: var(--admin-bg-tertiary);
      border: 1px solid var(--admin-border-color);
      border-radius: 6px;
      color: var(--admin-text-primary);
      font-size: 14px;
      transition: all 0.3s ease;

      &:focus {
        outline: none;
        border-color: var(--admin-accent-primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
      }

      &::placeholder {
        color: var(--admin-text-muted);
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }

    .form--options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;

      .checkbox--label {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 14px;
        color: var(--admin-text-secondary);

        input[type="checkbox"] {
          margin-right: 8px;
          cursor: pointer;
        }
      }

      .forgot--password {
        font-size: 14px;
        color: var(--admin-accent-primary);
        text-decoration: none;
        transition: color 0.3s ease;

        &:hover {
          color: var(--admin-accent-hover);
        }
      }
    }

    .login--button {
      width: 100%;
      height: 56px;
      line-height: 56px;
      background: var(--admin-accent-primary);
      color: var(--admin-yellow);
      border: none;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover:not(:disabled) {
        background: var(--admin-accent-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
      }

      &:active:not(:disabled) {
        transform: translateY(0);
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    }
  }

  .login--footer {
    margin-top: 32px;
    text-align: center;

    p {
      font-size: 12px;
      color: var(--admin-text-muted);
      margin: 0;
    }
  }
}

// Admin Layout
.admin--layout {
  background: var(--admin-bg-primary);
}

// Admin Header
.admin--header {
  position: fixed;
  top: 0;
  left: 240px;
  right: 0;
  height: 64px;
  background: var(--admin-bg-secondary);
  border-bottom: 1px solid var(--admin-border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  z-index: 1000;

  .admin--header-left {
    display: flex;
    flex-direction: column;
    h1 {
      font-size: 18px;
      font-weight: 700;
      color: var(--admin-text-primary);
      margin: 0;
    }
  }

  .admin--header-right {
    display: flex;
    gap: 12px;
  }

  .admin--header-btn {
    padding: 8px 20px;
    background: var(--admin-bg-tertiary);
    color: var(--admin-text-primary);
    border: 1px solid var(--admin-border-color);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: var(--admin-bg-primary);
      border-color: var(--admin-accent-primary);
    }

    &.admin--header-btn-logout {
      background: var(--admin-accent-primary);
      border-color: var(--admin-accent-primary);
      color: #ffffff !important;

      &:hover {
        background: var(--admin-accent-hover);
        border-color: var(--admin-accent-hover);
        color: #ffffff !important;
      }
    }
  }
}

// Admin Content Wrapper
.admin--content--wrapper {
  display: flex;
  margin-top: 64px;
  min-height: calc(100vh - 64px);
}

// Admin Sidebar
.admin--sidebar {
  width: 240px;
  position: fixed;
  left: 0;
  top: 0px;
  bottom: 0;
  overflow-y: auto;
  background-color: var(--admin-bg-navy);
  padding: 24px 16px;
  .admin--brand{
    display: flex;
    gap: 12px;
    align-items: center;
    .brand--logo{
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background-color: var(--admin-yellow);
    }
    .brand--title{
      color: #fff;
      font-size: 15px;
      display: flex;
      flex-direction: column;
      font-weight: 700;
      span{
        color: var(--admin-yellow);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1.2px;
      }
    }
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: var(--admin-bg-primary);
  }

  &::-webkit-scrollbar-thumb {
    background: var(--admin-border-color);
    border-radius: 3px;

    &:hover {
      background: var(--admin-text-muted);
    }
  }
}

// Admin GNB
.admin--gnb {
  margin-top: 28px;
  .admin--gnb-group {
    margin-bottom: 8px;
  }

  .admin--gnb-title {
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 400;
    color: var(--admin-text-muted);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    user-select: none;
    font-weight: 400;

    &:has(.admin--gnb-arrow.is-open){
      color: #fff;
      font-weight: 600;
    }

    &:hover {
      color: #fff;
    }

    .admin--gnb-arrow {
      font-size: 10px;
      transition: transform 0.3s ease;

      &.is-open {
        transform: rotate(-180deg);
      }
    }
  }

  // children 없는 단일 링크 메뉴
  .admin--gnb-title-link {
    position: relative;
    border-radius: 6px;
    color: var(--admin-text-muted);
    font-size: 13px;
    font-weight: 400;
    &.is-active {
      color: #fff;
      background: #262f40;
      font-weight: 600;
      &::before{
        content: '';
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 3px;
        border-radius: 6px;
        background-color: var(--admin-yellow);
      }
    }
  }

  .admin--gnb-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .admin--gnb-item {
    position: relative;
    border-radius: 6px;
    color: var(--admin-text-muted);
    font-size: 13px;
    font-weight: 400;
    &.is-active {
      .admin--gnb-link {
        color: #fff;
        background: #262f40;
        font-weight: 600;
        &::before{
          content: '';
          display: inline-block;
          position: absolute;
          top: 0;
          left: 20px;
          height: 100%;
          width: 3px;
          border-radius: 6px;
          background-color: var(--admin-yellow);
        }
      }
    }
  }

  .admin--gnb-link {
    display: block;
    margin-left: 20px;
    padding: 12px 24px;
    font-size: 13px;
    color: #78808c;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    &:hover {
      color: #fff;
      background: #262f40;
    }
  }
}

// Submenu Animation
.admin--submenu-enter-active,
.admin--submenu-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.admin--submenu-enter-from,
.admin--submenu-leave-to {
  opacity: 0;
  max-height: 0;
}

.admin--submenu-enter-to,
.admin--submenu-leave-from {
  opacity: 1;
  max-height: 500px;
}

// Admin Main Content
.admin--main {
  flex: 1;
  margin-left: 240px;
  padding: 32px;
  background: var(--admin-bg-primary);
}

// Admin Page Header
.admin--page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin--page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--admin-text-primary);
  margin: 0;
}

// Admin Breadcrumb
.admin--breadcrumb {
  display: flex;
  align-items: center;
  font-size: 12px;

  .admin--breadcrumb-link {
    color: var(--admin-text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;

    &:hover {
      color: var(--admin-accent-primary);
    }
  }

  .admin--breadcrumb-current {
    color: #666b75;
    font-weight: 400;
  }

  .admin--breadcrumb-separator {
    color: #666b75;
    font-weight: 400;
  }
}

// Admin Page Content
.admin--page-content {
  background: var(--admin-bg-secondary);
  border-radius: 8px;
  padding: 24px;
  border: 1px solid var(--admin-border-color);
}

// Admin Dashboard
.admin--dashboard {
  .admin--dashboard-welcome {
    margin-bottom: 32px;

    h3 {
      font-size: 24px;
      color: var(--admin-text-primary);
      margin: 0 0 8px 0;
    }

    p {
      font-size: 14px;
      color: var(--admin-text-secondary);
      margin: 0;
    }
  }

  .admin--dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
  }

  .admin--stat-card {
    background: var(--admin-bg-tertiary);
    border: 1px solid var(--admin-border-color);
    border-radius: 8px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;

    &:hover {
      border-color: var(--admin-accent-primary);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px var(--admin-shadow);
    }

    .admin--stat-icon {
      font-size: 36px;
    }

    .admin--stat-content {
      flex: 1;

      h4 {
        font-size: 14px;
        color: var(--admin-text-secondary);
        margin: 0 0 8px 0;
        font-weight: 500;
      }

      .admin--stat-number {
        font-size: 28px;
        color: var(--admin-text-primary);
        margin: 0;
        font-weight: 700;
      }
    }
  }

  .admin--dashboard-recent {
    h4 {
      font-size: 18px;
      color: var(--admin-text-primary);
      margin: 0 0 16px 0;
    }

    .admin--recent-list {
      background: var(--admin-bg-tertiary);
      border: 1px solid var(--admin-border-color);
      border-radius: 8px;
      padding: 24px;

      .admin--no-data {
        text-align: center;
        color: var(--admin-text-muted);
        margin: 0;
      }
    }
  }
}

// Admin Form Styles
.admin--form {

  .admin--form-group {
    margin-bottom: 24px;
  }

  .admin--form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--admin-text-primary);
    margin-bottom: 8px;

    .admin--required {
      color: var(--admin-error);
      margin-left: 4px;
    }
  }

  .admin--form-input,
  .admin--form-textarea,
  .admin--form-select {
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--admin-border-color);
    border-radius: 6px;
    color: var(--admin-text-primary);
    font-size: 13px;
    transition: all 0.3s ease;

    &:focus {
      // outline: none;
      // border-color: var(--admin-accent-primary);
      // box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    &::placeholder {
      color: var(--admin-text-muted);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background-color: var(--admin-bg-tertiary);
    }
  }

  .admin--form-textarea {
    min-height: 120px;
    resize: vertical;
  }

  .admin--form-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666B75' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }

  // 다중 입력 필드
  .admin--multi-input-wrapper {
    .admin--multi-input-item {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
      align-items: flex-start;

      .admin--sender-row {
        display: flex;
        gap: 10px;
        flex: 1;
      }

      .admin--form-input {
        flex: 1;
      }

      .admin--btn-remove {
        padding: 12px 20px;
        background: var(--admin-error);
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;

        &:hover {
          background: #dc2626;
        }
      }
    }

    .admin--btn-add {
      padding: 10px 20px;
      background: var(--admin-bg-tertiary);
      color: var(--admin-text-secondary);
      border: 1px dashed var(--admin-border-color);
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: var(--admin-bg-primary);
        border-color: var(--admin-accent-primary);
        color: var(--admin-text-primary);
      }
    }
  }

  // 폼 액션 버튼
  .admin--form-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--admin-border-color);
  }

  .admin--btn {
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
    color: #666b75;
    border: 1px solid #e8eaef;

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .ml--auto{
    margin-left: auto;
  }
  .mr--auto{
    margin-right: auto;
  }

  .admin--btn-red{
    background-color: #e85d3f;
    color: #fff;
  }

  .admin--btn-blue{
    background-color: #3c80f2;
    color: #fff;
  }

  .admin--btn-red-border{
    border-color: #e85d3f;
    color: #e85d3f;
  }

  .admin--btn-primary {
    background: var(--admin-accent-primary);
    color: #ffffff;

    &:hover:not(:disabled) {
      background: var(--admin-accent-hover);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    }
  }

  .admin--btn-secondary {
    background: var(--admin-bg-tertiary);
    color: var(--admin-text-primary);
    border: 1px solid var(--admin-border-color);

    &:hover:not(:disabled) {
      background: var(--admin-bg-primary);
      border-color: var(--admin-accent-primary);
    }
  }

  // 알림 메시지
  .admin--alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 20px;
    font-size: 14px;
  }

  .admin--alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--admin-success);
    color: var(--admin-success);
  }

  .admin--alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--admin-error);
    color: var(--admin-error);
  }

  .admin--alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--admin-warning);
    color: var(--admin-warning);
  }
}

// 로딩
.admin--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--admin-text-secondary);
  font-size: 16px;
}

// 전역 로딩 오버레이
.admin--loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

// 스피너
.admin--spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: admin-spin 0.8s linear infinite;
}

@keyframes admin-spin {
  to {
    transform: rotate(360deg);
  }
}

// 검색 박스
.admin--search-box {
  background: var(--admin-bg-secondary);
  border: 1px solid var(--admin-border-color);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  &.type2{
    flex-direction: column;
    align-items: start;
    gap: 8px;
  }

  .admin--search--inner--box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
  }

  .admin--search-form {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 1;
    .admin--quick-range{
      display: flex;
      gap: 8px;
      .range--btn{
        width: 60px;
        font-weight: 400;
        min-width: 60px;
        padding: 12px 0;
        color: #1a2b4a;
        
      }
    }
  }

  // 검색 박스 내 모든 select, input 통일된 스타일
  .admin--search-select,
  .admin--form-select,
  .admin--form-input,
  .admin--search-input {
    border: 1px solid #e8eaef !important;
    border-radius: 4px;
    padding: 12px;
    font-size: 13px !important;
    background-color: #fff;
    line-height: normal;
    &::placeholder{
      color: #a8adb8;
    }
  }

  .admin--form-select{
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666B75' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }

  .admin--search-select,
  .admin--form-select {
    width: 140px;
  }

  .admin--form-input,
  .admin--search-input {
    flex: 1;
    max-width: 400px;
  }

  .admin--btn-add{
    width: 140px;
    background-color: #e85d3f;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 12px;
    cursor: pointer;
  }
}

// 날짜 입력 필드
.admin--date-input {
  cursor: pointer;

  &::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;

    &:hover {
      opacity: 1;
    }
  }
}

// 날짜 범위
.admin--date-range {
  display: flex;
  align-items: center;
  gap: 12px;

  .admin--date-separator {
    color: var(--admin-text-secondary);
    font-size: 14px;
  }

  .admin--form-input {
    flex: 1;
    max-width: 200px;
  }
}

// 테이블
.admin--table-wrapper {
  background: var(--admin-bg-secondary);
  border: 1px solid var(--admin-border-color);
  border-radius: 8px;
  overflow-x: auto;
}

.admin--table {
  width: 100%;
  border-collapse: collapse;

  thead {
    background: #F8F9FB;
    border-bottom: 1px solid #E8EAEF;

    th {
      padding: 14px 16px;
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      color: #666b75;
      white-space: nowrap;
      letter-spacing: 0.36px;
    }
  }

  tbody {
    tr {
      border-bottom: 1px solid #E8EAEF;
      transition: background 0.3s ease;

      &:hover {
        background: var(--admin-bg-tertiary);
      }

      &:last-child {
        border-bottom: none;
      }

      &.admin--table-row-clickable {
        cursor: pointer;

        &:hover {
          background: var(--admin-bg-primary);
        }
      }
    }

    td {
      padding: 14px 16px;
      font-size: 13px;
      font-weight: 500;
      color: #1a2b4a;
      vertical-align: middle;
      text-align: center;
      &.left{
        text-align: left;
      }
      &.color--yellow{
        color: var(--admin-yellow);
        font-weight: 700;
      }
      &.date{
        color: #666b75;
        font-size: 12px;
        font-weight: 400;
      }
    }

    .admin--table-title {
      color: var(--admin-text-primary);
      font-weight: 500;
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .admin--table-loading,
    .admin--table-empty {
      text-align: center;
      padding: 60px 20px;
      color: var(--admin-text-muted);
    }
  }

  .admin--table-actions {
    display: flex;
    gap: 8px;
    .admin--btn-blue{
      background-color: #3c80f2;
      color: #fff;
      font-size: 12px;
    }
  }
}

// 배지
.admin--badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;

  &.admin--badge-html {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
  }

  &.admin--badge-image {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
  }

  &.admin--badge-active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--admin-success);
  }

  &.admin--badge-scheduled {
    background: rgba(245, 158, 11, 0.1);
    color: var(--admin-warning);
  }

  &.admin--badge-ended {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
  }
}

// 작은 버튼
.admin--btn-small {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  line-height: normal;
  min-width: 100px;

  &.admin--btn-small-primary {
    background: var(--admin-accent-primary);
    color: #fff;

    &:hover {
      background: var(--admin-accent-hover);
    }
  }

  &.admin--btn-small-danger {
    background: var(--admin-error);
    color: #fff;

    &:hover {
      background: #dc2626;
    }
  }
}

// 페이지네이션
.admin--pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 24px;

  .admin--pagination-btn {
    min-width: 32px;
    height: 32px;
    max-width: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #fff;
    border: 1px solid #e8eaef;
    font-size: 11px;
    font-weight: 400;
    color: #666b75;

    &.is-active {
      color: #fff;
      font-weight: 700;
      background-color: var(--admin-blue);
      pointer-events: none;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

// 라디오 그룹
.admin--radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.admin--radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #666b75;
  transition: color 0.3s ease;

  input[type="radio"] {
    cursor: pointer;
    margin: 0;
  }

  &:hover {
    color: var(--admin-text-primary);
  }
}

// 날짜 범위
.admin--date-range {
  display: flex;
  align-items: center;
  gap: 12px;

  .admin--date-separator {
    color: var(--admin-text-secondary);
    font-weight: 500;
  }
}

// 시간 입력 그룹 (AM/PM + 시 + 분)
.admin--time-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;

  .admin--time-input {
    width: 80px;
    text-align: center;
  }
}

.admin--hint {
  margin-left: 6px;
  color: var(--admin-text-secondary);
  font-size: 12px;
  font-weight: 400;
}

// 사이즈 그룹
.admin--size-group {
  display: flex;
  gap: 20px;

  .admin--size-item {
    display: flex;
    align-items: center;
    gap: 8px;

    label {
      font-size: 14px;
      color: var(--admin-text-secondary);
      min-width: 40px;
    }

    .admin--form-input {
      max-width: 120px;
    }

    span {
      font-size: 14px;
      color: var(--admin-text-secondary);
    }
  }
}

// 파일 입력
.admin--form-file {
  width: 100%;
  padding: 12px 16px;
  background: var(--admin-bg-tertiary);
  border: 1px solid var(--admin-border-color);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;

  &::-webkit-file-upload-button {
    padding: 8px 16px;
    background: var(--admin-accent-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 12px;
  }
}

// 이미지 미리보기
.admin--image-preview {
  margin-top: 16px;
  position: relative;
  display: inline-block;
  max-width: 400px;

  img {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--admin-border-color);
    display: block;
  }

  .admin--btn-remove-image {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 8px 16px;
    background: var(--admin-error);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: #dc2626;
    }
  }
}

// 비밀번호 입력 래퍼
.admin--password-input-wrapper {
  position: relative;

  .admin--form-input {
    padding-right: 50px;
  }

  .admin--password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: opacity 0.3s ease;

    &:hover {
      opacity: 0.7;
    }
  }
}

// 폼 도움말
.admin--form-help {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: var(--admin-text-muted);
  font-style: italic;
}

// 폼 경고 (좌표 미검출 등)
.admin--form-warning {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: var(--admin-red);
}

// 검색 박스 (큰 버전 - 여러 필터)
.admin--search-box-large {
  .admin--search-filters {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;

    .admin--filter-row {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;

      .admin--filter-label {
        font-size: 14px;
        color: var(--admin-text-secondary);
        min-width: 60px;
      }

      .admin--form-select,
      .admin--form-input {
        flex: 1;
        min-width: 150px;
      }
    }
  }
}

// 테이블 사진
.admin--table-photo {
  width: 80px;
  height: 120px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-bg-tertiary);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .admin--table-photo-empty {
    font-size: 11px;
    color: var(--admin-text-muted);
    text-align: center;
  }
}

// 테이블 액션 (세로 배치)
.admin--table-actions-col {
  flex-direction: column;
  gap: 6px;

  .admin--btn-small {
    width: 100%;
  }
}

// 작은 버튼 (secondary 추가)
.admin--btn-small{
  &.admin--btn-small-secondary {
    border-radius: 6px;
    border: 1px solid #E8EAEF;
    background: #FFF;
    &:hover{
      border: 1px solid #e8eaef!important;
    }
  }
}

// 엑셀 버튼 (녹색 배경)
.admin--btn-small-excel {
  background: #217346;
  color: #ffffff;
  border: 1px solid #1a5c37;

  &:hover {
    background: #185c37;
    border-color: #144d2d;
  }
}

// Responsive
@media (max-width: 1024px) {
  .admin--sidebar {
    width: 220px;
  }

  .admin--main {
    margin-left: 220px;
  }
}

@media (max-width: 768px) {
  .admin--header {
    padding: 0 16px;
  }

  .admin--sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;

    &.is-open {
      transform: translateX(0);
    }
  }

  .admin--main {
    margin-left: 0;
    padding: 16px;
  }

  .admin--page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .admin--form {
    .admin--form-actions {
      flex-direction: column;

      .admin--btn {
        width: 100%;
      }
    }

    .admin--multi-input-wrapper {
      .admin--multi-input-item {
        flex-direction: column;

        .admin--btn-remove {
          width: 100%;
        }
      }
    }
  }
}

// File Attachment Styles
.admin--form-file-hidden {
  display: none;
}

.admin--file-list {
  margin-bottom: 12px;
  border: 1px solid var(--admin-border-color);
  border-radius: 4px;
  background-color: var(--admin-bg-secondary);
}

.admin--file-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--admin-border-color);

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background-color: rgba(255, 255, 255, 0.03);
  }
}

.admin--file-name {
  flex: 1;
  color: var(--admin-text-primary);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;

  &:hover {
    text-decoration: underline;
  }
}

.admin--file-size {
  color: var(--admin-text-secondary);
  font-size: 13px;
  margin-right: 12px;
  white-space: nowrap;
}

.admin--btn-remove-file {
  padding: 4px 12px;
  background-color: transparent;
  color: var(--admin-danger-color);
  border: 1px solid var(--admin-danger-color);
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;

  &:hover {
    background-color: var(--admin-danger-color);
    color: white;
  }
}

// Checkbox Group Styles
.admin--checkbox-group {
  display: flex;
  gap: 20px;
}

.admin--checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--admin-text-primary);
  font-size: 14px;
  cursor: pointer;

  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--admin-accent-primary);
  }

  span {
    user-select: none;
  }

  &:hover {
    opacity: 0.8;
  }
}

// Admin Footer
.admin--footer {
  margin-top: 64px;
  padding: 24px 0;
  border-top: 1px solid var(--admin-border-color);
  text-align: center;

  p {
    color: var(--admin-text-muted);
    font-size: 14px;
    margin: 0;
  }
}

// IMPORTANT: Force display admin header and footer
.admin--header {
  display: flex !important;
  min-height: 64px !important;
  background: #ffffff !important;
  visibility: visible !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.admin--footer {
  display: block !important;
  min-height: 60px !important;
  background: #ffffff !important;
  visibility: visible !important;
}

// Alert Modal Styles
.admin--modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin--alert-modal {
  background: #ffffff;
  padding: 0;
  border-radius: 8px;
  min-width: 400px;
  max-width: 500px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.admin--alert-modal .admin--modal-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
  }
}

.admin--alert-modal .admin--modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  line-height: 1;
  transition: color 0.2s;

  &:hover {
    color: #333;
  }
}

.admin--alert-modal .admin--modal-body {
  padding: 30px 20px;

  .admin--alert-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #333333;
  }
}

.admin--alert-modal .admin--modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.admin--alert-modal .admin--btn-secondary {
  padding: 8px 20px;
  border: 1px solid #e0e0e0;
  background: #f5f5f5;
  color: #333333;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;

  &:hover {
    background: #eeeeee;
  }
}

.admin--alert-modal .admin--btn-primary {
  padding: 8px 20px;
  border: none;
  background: var(--admin-accent-primary);
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;

  &:hover {
    background: var(--admin-accent-hover);
  }
}

// Modal Animation
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-fade-enter-active {
  transition: opacity 0.3s ease;

  .admin--alert-modal {
    animation: slideUp 0.3s ease-out;
  }
}

.modal-fade-leave-active {
  transition: opacity 0.2s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}



// ScrollCanvasAnimation Component Styles
.scroll--canvas--animation {
  position: relative;
  width: 100%;

  // 가상 스크롤 공간 (보이지 않음, 스크롤 영역만 확보)
  .scroll--spacer {
    width: 100%;
    pointer-events: none;
  }

  // 고정될 캔버스 영역 (100vh)
  .scroll--canvas--sticky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    transition: background-color 0.3s ease;

    // 고정 상태일 때
    &.is--fixed {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
    }

    // 완료 상태일 때
    &.is--completed {
      position: absolute;
      top: auto;
      bottom: 0;
    }
  }

  // 헤드라인 컨테이너
  .headline--container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    pointer-events: none;
    transition: opacity 0.3s ease;

    .content--container {
      text-align: left;
      padding: 0 var(--spacing-relative-3xl);
      width: 100%;
    }

    .headline--text {
      font-size: clamp(32px, 5vw, 64px);
      font-weight: 700;
      line-height: 1.2;
      margin: 0 0 20px 0;
      letter-spacing: -0.02em;
      animation: fadeInUp 0.8s cubic-bezier(0.15, 0, 0.25, 1) forwards;
      opacity: 0;


      color: rgb(252, 252, 253);
      letter-spacing: 0px;
      font-weight: 400;
      text-decoration: none;
      font-size: 36px;
      line-height: 52px;
      font-stretch: 130%;


      @media (min-width: 768px) {
        font-size: 44px;
        line-height: 60px;
      }

      @media (min-width: 1024px) {
        font-size: 52px;
        line-height: 76px;
      }

      @media (min-width: 1440px) {
        font-size: 60px;
        line-height: 84px;
      }

      @media (min-width: 1920px) {
        font-size: 72px;
        line-height: 100px;
      }
    }

    .subheadline--text {
      font-size: clamp(16px, 2.5vw, 24px);
      font-weight: 400;
      line-height: 1.5;
      margin: 0;
      color: rgba(252, 252, 253, 0.8);
      animation: fadeInUp 0.8s cubic-bezier(0.15, 0, 0.25, 1) 0.2s forwards;
      opacity: 0;
    }
  }

  // 이미지 컨테이너
  .scroll--images--container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // 캔버스
  .scroll--canvas {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }
}

// 페이드인 애니메이션
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 반응형 스타일
@media (max-width: 1024px) {
  .scroll--canvas--animation {
    .headline--container {
      padding: 30px 15px;

      .headline--text {
        margin-bottom: 15px;
      }
    }
  }
}

@media (max-width: 768px) {
  .scroll--canvas--animation {
    .headline--container {
      padding: 20px 15px;

      .headline--text {
        margin-bottom: 12px;
      }
    }
  }
}

@media (max-width: 480px) {
  .scroll--canvas--animation {
    .headline--container {
      padding: 15px 10px;

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





.iframe--wrapper {
  position: relative;
  padding-top: 55.6%;

  iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
  }
}


.sign--wrapper {
  display: flex;
  align-items: center;
  gap: 30px;
  width: 100%;
  justify-content: flex-end;
}

// 중복 체크 버튼 스타일
.admin--input-with-button {
  display: flex;
  gap: 8px;
  align-items: stretch;

  .admin--form-input {
    flex: 1;
  }

  .admin--btn {
    flex-shrink: 0;
    white-space: nowrap;
    height: auto;
  }
}

.admin--btn-check {
  background: #2563eb !important;
  color: #ffffff !important;
  border: none;
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover:not(:disabled) {
    background: #1d4ed8 !important;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.admin--form-help {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #999;
}

.admin--text-success {
  color: #4caf50 !important;
}

.admin--text-error {
  color: #f44336 !important;
}


.file--item {
  display: flex;
  align-items: center;
}





footer {
  position: relative;
  background: #252525;

  .footer--wrap {

    //position: relative;
    .footer--btn--wrap {
      display: flex;
      flex-direction: column;
      position: fixed;
      bottom: 120px;
      //left: calc(100% + 60px);
      right: 110px;
      gap: 12px;
      opacity: 0;
      z-index: 10;
      pointer-events: none;
      transition: all 0.3s;

      &.active {
        pointer-events: all;
        opacity: 1;
      }

      .quick--wrap {
        position: fixed;
        right: 49px;
        border-radius: 20px;
        background: #F5FAFF;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
        width: 192px;
        overflow: hidden;
        transition: all 0.3s;
        border: 1px solid rgba(7, 111, 237, 0.50);
        opacity: 0;
        bottom: 330px;
        pointer-events: none;

        &.active {
          pointer-events: all;
          opacity: 1;
          bottom: 317px;
        }

        .inner--wrap {
          padding: 5px 30px;
          display: flex;
          flex-direction: column;

          li {
            text-align: center;
            display: flex;

            a {
              width: 100%;
              color: #333;
              white-space: nowrap;
              padding: 12.5px 0;
              font-size: 13px;
              text-transform: uppercase;
              font-weight: 500;
              transition: all 0.3s;
              line-height: 1;

              &:hover {
                color: #076FED;
                text-decoration-line: underline;
                text-decoration-style: solid;
                text-decoration-skip-ink: auto;
                text-decoration-thickness: auto;
                text-underline-offset: auto;
                text-underline-position: from-font;
                font-weight: 700;
              }
            }
          }
        }
      }

      .quick--menu {
        display: flex;
        flex-direction: column;
        background-color: #076fed;
        border-radius: 100px;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
        align-items: center;
        justify-content: center;
        width: 70px;
        height: 100px;
        gap: 10px;
        font-size: 12px;
        font-weight: 700;
        color: #fff;

        &.active {
          .ico {
            background-image: url(/img/ico--quick--close.svg);
          }
        }

        .ico {
          width: 24px;
          height: 24px;
          background-image: url(/img/ico--quick.svg);
        }
      }

      .scroll--to--top {
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: #282828;
        gap: 2px;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        align-items: center;

        .ico {
          width: 24px;
          height: 24px;
          background-image: url(/img/ico--top--arrow.svg);
        }
      }
    }

    .footer--site--map {

      >ul {
        >li {
          >ul {

            >h3,
            >a {
              position: relative;
              padding-left: 13px;
              margin-bottom: 15px;
              text-transform: capitalize;
              display: block;

              &:before {
                content: '';
                width: 3px;
                height: 3px;
                position: absolute;
                display: block;
                background: #E9E9E9;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
              }
            }

            >li {
              position: relative;
              padding-left: 13px;

              &:before {
                content: '';
                width: 3px;
                height: 3px;
                position: absolute;
                display: block;
                background: #E9E9E9;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
              }

              >a {
                color: #E9E9E9;
                font-size: 14px;
              }

              &.inner--style {
                margin-bottom: 15px;

                &:last-child {
                  margin-bottom: 30px;
                }

                &:before {
                  display: none;
                }

                a {
                  color: #B7B7B7;
                  font-size: 14px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: 100%;
                  /* 14px */
                  text-transform: capitalize;
                }
              }
            }
          }
        }
      }
    }
  }

  .footer--info--wrapper {
    background: #161616;

    .footer--info--wrap {
      position: relative;

      .sns--wrap {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 12px;
        gap: 15px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0px;

        >a {
          width: 40px;
          height: 40px;
          display: inline-block;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          cursor: pointer;
          box-sizing: border-box;
          background: #fff;
        }
      }

      .copy--wrap {
        font-size: 14px;
        color: #fcfcfdb2;
        max-width: 1440px;
        margin: 0 auto;
        padding: 30px 0px;
        position: relative;

        .link--list {
          display: flex;
          flex-wrap: wrap;
          gap: 37px;

          >li {
            position: relative;

            &::after {
              content: '';
              height: 15px;
              width: 1px;
              background: rgba(255, 255, 255, 0.50);
              display: block;
              position: absolute;
              right: -18px;
              top: 50%;
              transform: translateY(-50%);
            }

            &:last-child {
              &::after {
                display: none;
              }
            }

            >a {
              display: inline-block;
              color: rgb(252, 252, 253);
              transition: all 0.3s;
              color: #FFF;
              font-size: 15px;
              font-style: normal;
              font-weight: 700;
              line-height: 100%;
              /* 15px */
              letter-spacing: -0.3px;
              text-transform: capitalize;

              &:hover {
                opacity: 0.7;
              }
            }
          }
        }

        >p {
          //margin-top: 25px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .footer--wrap {
      .footer--site--map {
        >ul {
          >li {
            >h2 {
              cursor: pointer;
              user-select: none;
              position: relative;
              padding-right: 20px;

              &::after {
                content: '';
                position: absolute;
                right: 20px;
                background-image: url(/img/ico--footer.svg);
                width: 18px;
                min-width: 18px;
                margin-left: 20px;
                height: 18px;
                transition: transform 0.3s ease;
              }
            }

            >ul {
              max-height: 0;
              overflow: hidden;
              transition: max-height 0.3s ease;

              &.active {
                max-height: 1000px;
              }
            }
          }
        }
      }
    }
  }
}



.swiper--banner--wrapper {
  width: 100%;
  overflow: hidden;

  .swiper--banner--container {
    position: relative;

    .swiper-button-next,
    .swiper-button-prev {
      display: flex;
      width: 65px;
      height: 65px;
      padding: 21px 20px 20px 21px;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      position: absolute;
      top: 50%;
      background: none;
      border-radius: 1000px;
      border: 1px solid #FFF;
      z-index: 9;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(0, 0, 0, 0.5);
      }

      &::after {
        display: none; // Swiper 기본 화살표 숨김
      }

      svg {
        width: 24px;
        height: 24px;
        fill: none;
        pointer-events: none; // SVG가 클릭을 방해하지 않도록
      }
    }

    .swiper-button-next {
      right: 50%;
      transform: translate(calc(1440px / 2), -50%);
    }

    .swiper-button-prev {
      left: 50%;
      transform: translate(calc(-1440px / 2), -50%);
    }

    // Pagination wrapper with progress and fractions
    .swiper--pagination--wrapper {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;

      .swiper-pagination {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;

        .swiper-pagination-bullet {
          opacity: 1;
          width: 12px;
          height: 12px;
          background: rgba(255, 255, 255, 0.5);
          transition: all 0.3s ease;

          &.swiper-pagination-bullet-active {
            background: #fff;
          }
        }
      }

      .swiper--fraction {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #fff;
        font-size: 16px;
        font-weight: 600;

        .separator {
          opacity: 0.7;
        }

        .total {
          opacity: 0.7;
        }
      }

      .swiper--progressbar {
        width: 200px;
        height: 3px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        overflow: hidden;

        .swiper--progressbar-fill {
          height: 100%;
          background: #fff;
          transition: width 0.3s ease;
          border-radius: 10px;
        }
      }
    }

    // 기존 pagination (호환성 유지)
    .swiper-pagination {
      position: absolute;
      bottom: 20px;
      z-index: 8;

      .swiper-pagination-bullet {
        opacity: 1;

        &.swiper-pagination-bullet-active {
          background: #FFF;
        }

        width:12px;
        height:12px;
        background: rgba(255, 255, 255, 0.50);
      }
    }

    .swiper--banner--section {
      .swiper--container {
        .swiper-wrapper {
          .slide--image {
            height: 550px;
            position: relative;

            img {
              margin: 0 auto;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            // 확대 버튼
            .zoom--btn {
              position: absolute;
              top: 20px;
              right: 20px;
              width: 50px;
              height: 50px;
              background: rgba(0, 0, 0, 0.5);
              border: 1px solid rgba(255, 255, 255, 0.3);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              z-index: 10;
              transition: all 0.3s ease;

              &:hover {
                background: rgba(0, 0, 0, 0.7);
                border-color: rgba(255, 255, 255, 0.6);
                transform: scale(1.1);
              }

              svg {
                width: 24px;
                height: 24px;
              }
            }

            .desc--wrapper {
              position: absolute;
              top: 100px;
              left: 50%;
              transform: translateX(-50%);
              width: 100%;
              display: flex;
              align-items: center;
              flex-direction: column;

              h2 {
                color: #FFF;
                text-align: center;
                font-size: 45px;
                font-style: normal;
                font-weight: 700;
                line-height: 1.2;
                text-transform: uppercase;
              }

              h3 {
                color: #FFF;
                text-align: center;
                font-size: 20px;
                font-style: normal;
                font-weight: 400;
                //line-height: 100%; /* 20px */
                text-transform: uppercase;
                margin-top: 25px;
              }

              .more--detail--href {
                border-radius: 100px;
                border: 1px solid #FFF;

                color: #FFF;
                text-align: center;
                font-size: 15px;
                font-style: normal;
                font-weight: 700;
                line-height: 100%;
                /* 15px */
                letter-spacing: -0.3px;
                text-transform: uppercase;
                padding: 18px 20px;
                min-width: 150px;
              }
            }
          }
        }
      }
    }
  }
}


.swiper--banner--wrapper2 {
  width: 100%;
  overflow: hidden;
  border-radius: 30px;
  max-height: 600px;

  .swiper--banner--container {
    position: relative;

    .type--connection {
      position: absolute;
      top: 45px;
      right: 45px;
      z-index: 10;

      &.exterior {
        color: #FFF;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        /* 14px */
        text-transform: uppercase;
        border-radius: 1000px;
        background: #076FED;
        padding: 15px 20px;
        gap: 10px;
        display: flex;
        align-items: center;
      }

      &.interior {
        color: #FFF;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        /* 14px */
        text-transform: uppercase;
        border-radius: 1000px;
        background: #0AF;
        padding: 15px 20px;
        gap: 10px;
        display: flex;
        align-items: center;

      }
    }

    // Pagination wrapper with progress and fractions
    .swiper--pagination--wrapper {
      position: absolute;
      bottom: 65px;
      right: 45px;
      z-index: 9;
      display: flex;
      align-items: center;
      gap: 12px;

      .swiper-pagination {
        display: none;
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;

        .swiper-pagination-bullet {
          opacity: 1;
          width: 12px;
          height: 12px;
          background: rgba(255, 255, 255, 0.5);
          transition: all 0.3s ease;

          &.swiper-pagination-bullet-active {
            background: #fff;
          }
        }
      }

      .swiper--fraction {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;

        .separator {
          color: rgba(255, 255, 255, 0.60);
          font-weight: 400;
        }

        .total {
          color: rgba(255, 255, 255, 0.60);
          font-weight: 400;
        }
      }

      .swiper--progressbar {
        width: 200px;
        height: 3px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        overflow: hidden;

        .swiper--progressbar-fill {
          height: 100%;
          background: #fff;
          transition: width 0.3s ease;
          border-radius: 10px;
        }
      }
    }

    .swiper--banner--section {
      .swiper--container {
        .swiper-wrapper {
          .slide--image {
            position: relative;
            z-index: 1;
            padding-top: 56.5%;
            min-height: 600px;

            >img {
              position: absolute;
              top: 0px;
              width: 100%;
              height: 100%;
              z-index: 1;
              object-fit: cover;
            }

            // 확대 버튼
            .zoom--btn {
              position: absolute;
              bottom: 45px;
              left: 45px;

              display: flex;
              height: 60px;
              padding: 20px 25px;
              justify-content: center;
              align-items: center;
              gap: 10px;

              cursor: pointer;
              z-index: 10;
              transition: all 0.3s ease;
              border-radius: 1000px;
              border: 1px solid #FFF;

              color: #FFF;
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: 100%;
              /* 14px */
              text-transform: capitalize;



              svg {
                width: 12px;
                height: 12px;
              }
            }

            .desc--wrapper {
              position: absolute;
              top: 0px;
              left: 0px;
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;

              h2 {
                color: #FFF;
                text-align: center;
                font-size: 45px;
                font-style: normal;
                font-weight: 700;
                line-height: 100%;
                /* 45px */
                text-transform: uppercase;
              }

              h3 {
                color: #FFF;
                text-align: center;
                font-size: 20px;
                font-style: normal;
                font-weight: 400;
                line-height: 100%;
                /* 20px */
                text-transform: uppercase;
                margin-top: 25px;
              }

              .more--detail--href {
                border-radius: 100px;
                border: 1px solid #FFF;

                color: #FFF;
                text-align: center;
                font-size: 15px;
                font-style: normal;
                font-weight: 700;
                line-height: 100%;
                /* 15px */
                letter-spacing: -0.3px;
                text-transform: uppercase;
                padding: 18px 20px;
                min-width: 150px;
              }
            }
          }
        }
      }
    }
  }
}


.swiper--banner--wrapper3 {
  width: 100%;
  overflow: hidden;
  background: #111;

  .top--text--wrap {
    padding: 80px 0px;

    h2 {
      color: #FFF;
      text-align: center;
      font-size: 40px;
      font-style: normal;
      font-weight: 500;
      line-height: 100%;
      /* 40px */
      text-transform: capitalize;
    }

    >div {
      color: #FFF;
      text-align: center;
      font-size: 18px;
      font-style: normal;
      font-weight: 300;
      line-height: 1.7;
      text-transform: uppercase;
    }
  }

  .swiper--banner--container {
    position: relative;


    .btn--actions {
      display: flex;
      position: absolute;
      top: -27.5px;
      right: 25px;
      height: 55px;
      justify-content: flex-end;
      gap: 15px;
      z-index: 10;

      .swiper-button-next,
      .swiper-button-prev {
        margin-top: 0;
        display: flex;
        width: 55px;
        height: 55px;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        background: none;
        border-radius: 1000px;
        border: 0px;
        background: #fff;
        cursor: pointer;
        transition: all 0.3s ease;
        position: static;

        &:hover {
          background: rgba(0, 0, 0, 0.5);
        }

        &::after {
          display: none; // Swiper 기본 화살표 숨김
        }

        svg {
          width: 24px;
          height: 24px;
          fill: none;
          pointer-events: none; // SVG가 클릭을 방해하지 않도록
        }
      }

    }

    // Pagination wrapper with progress and fractions
    .swiper--pagination--wrapper {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;

      .swiper-pagination {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;

        .swiper-pagination-bullet {
          opacity: 1;
          width: 12px;
          height: 12px;
          background: rgba(255, 255, 255, 0.5);
          transition: all 0.3s ease;

          &.swiper-pagination-bullet-active {
            background: #fff;
          }
        }
      }



    }

    // 기존 pagination (호환성 유지)
    .swiper-pagination {
      position: absolute;
      bottom: 20px;
      z-index: 9;
      display: none;

      .swiper-pagination-bullet {
        opacity: 1;

        &.swiper-pagination-bullet-active {
          background: #FFF;
        }

        width:12px;
        height:12px;
        background: rgba(255, 255, 255, 0.50);
      }
    }

    .swiper--banner--section {
      .swiper--container {
        .swiper-wrapper {
          .slide--image {
            position: relative;

            img {
              width: 100%;
              margin: 0 auto;
              object-fit: cover;
            }


            .desc--wrapper {
              position: absolute;
              bottom: 0;
              width: 100%;
              max-width: 1440px;
              margin: 0 auto;
              left: 50%;
              transform: translateX(-50%);
              background: rgba(0, 0, 0, 0.50);

              .desc--wrap {
                padding: 50px 60px;
                align-self: stretch;
                gap: 25px;
                flex-direction: column;
                display: flex;
                position: relative;
                height: 100%;
                width: 100%;
              }

              h2 {
                color: #FFF;
                font-size: 22px;
                font-style: normal;
                font-weight: 500;
                line-height: 100%;
                /* 22px */
                text-transform: uppercase;
              }

              h4 {
                color: #FFF;
                font-size: 17px;
                font-style: normal;
                font-weight: 400;
                line-height: 1.9;
              }

            }
          }
        }
      }
    }
  }
}

/* 차량 상세 정보 스팩 */
.trim--spec--wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;

  ul {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 0px;
    border-radius: 30px;
    background: #F9F9F9;

    li {
      width: calc(100% / 3);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-right: 1px solid #DEDEDE;
      padding: 15px 20px;

      &:last-child {
        border-right: 0px;
      }

      >span {
        color: #000;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        /* 16px */
        text-transform: uppercase;
      }

      >div {
        color: #000;
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        text-align: center;
        //line-height: 100%; /* 22px */
        flex-wrap: wrap;
        //text-transform: uppercase;
        justify-content: center;
        display: flex;
        align-items: center;
        margin-top: 25px;

        >u {
          text-decoration: none;
          color: #000;
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
          line-height: 1.3;
          text-align: left;
          width: 90px;
          margin-right: 20px;
          display: flex;
          align-items: center;
        }

        >i {
          margin: 0 5px;
          text-transform: lowercase;
          color: #000;
          text-align: center;
          font-size: 22px;
          font-style: normal;
          font-weight: 700;
          line-height: 100%;
          /* 22px */
        }

        span {
          display: inline-flex;
          width: 1px;
          height: 18px;
          background: #CACACA;
          margin: 0 10px;
        }

        em {
          font-style: normal;
          color: #000;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 100%;
          /* 16px */
          text-transform: uppercase;
          margin-left: 5px;
          position: relative;

          i {
            font-style: normal;
            color: #076FED;
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            line-height: 100%;
            /* 12px */
            text-transform: uppercase;
            position: absolute;
            top: -1px;
            right: -10px;
          }
        }
      }
    }
  }
}

.title--visual {
  margin-top: 120px;

  &.dark--type {
    background: #FAFAFA;
    margin-top: 0px;
    padding: 80px 0px;
  }

  h2 {
    color: #000;
    text-align: center;
    font-size: 45px;
    font-style: normal;
    font-weight: 500;
    //line-height: 100%; /* 45px */
    text-transform: capitalize;

    span {
      font-weight: 400;
    }

    &.side--title {
      color: #111;
      text-align: center;
      font-size: 35px;
      font-style: normal;
      font-weight: 500;
      //line-height: 100%; /* 30px */
      text-transform: uppercase;
    }

    &.side--title2 {
      color: #111;
      text-align: center;
      font-size: 25px;
      font-style: normal;
      font-weight: 500;
      line-height: 100%;
      /* 25px */
      letter-spacing: -0.5px;
      text-transform: uppercase;
    }

    &.side--title3 {
      color: #000;
      font-size: 30px;
      font-weight: 700;
    }
  }

  .middle--title {
    color: #00095B;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    //line-height: 100%; /* 20px */
    text-transform: uppercase;
    margin-top: 40px;
  }

  .sub--title {
    margin-top: 45px;
    color: #222;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.7;
    // text-transform: uppercase;
  }

  .sub--title2 {
    margin-top: 40px;
    text-align: center;
    color: #111;
    font-size: 25px;
    font-weight: 700;

    @media(max-width: 1024px) {
      margin-top: 20px;
      font-size: 20px;
    }
  }
}

.models--visual--01 {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  position: relative;
  aspect-ratio: 1440 / 530; // 비율 유지

  &.type--5 {
    aspect-ratio: 1440 / 650; // 비율 유지

    .thumb--wrap {
      top: 0%;
    }
  }

  &.type--4 {
    aspect-ratio: 1440 / 530; // 비율 유지

    .thumb--wrap {
      top: 0%;

      img {
        width: 100%;
        height: 100%;
        max-height: 530px;
      }
    }
  }

  &.type--3 {
    aspect-ratio: 1440 / 530; // 비율 유지

    .thumb--wrap {
      top: 0%;

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

  &.type--2 {

    //aspect-ratio: 1440 / 650; // 비율 유지
    .thumb--wrap {
      top: -20%;

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

  .thumb--wrap {
    width: 100%;
    height: 150%; // 높이를 늘려서 여유 공간 확보
    position: relative;
    top: -50%; // 위로 이동

    img {
      object-fit: cover;
      object-position: center top; // 이미지 상단 기준으로 정렬
      width: 100%;
      height: 100%;
    }
  }
}


.car--price--small--pic--wrap {
  >div {
    h2 {
      color: #000;
      text-align: center;
      font-size: 30px;
      font-style: normal;
      font-weight: 500;
      line-height: 1.4;
      text-transform: capitalize;
    }

    .car--list--wrap {
      padding-top: 60px;
      ;

      ul {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 100px;

        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          text-align: center;

          .desc--wrap {
            padding-top: 30px;

            h2 {
              color: #00095B;
              text-align: center;
              font-size: 22px;
              font-style: normal;
              font-weight: 500;
              //line-height: 100%; /* 22px */
              text-transform: capitalize;

              .trim--desc {
                color: #00095B;
                font-weight: 500;
                font-size: 16px;
              }

              &.black {
                color: #22292B;
                font-weight: 700;
              }
            }

            .price--wrap {
              color: #000;
              text-align: center;
              font-size: 18px;
              font-style: normal;
              font-weight: 300;
              // line-height: 100%; /* 18px */
              text-transform: uppercase;
              position: relative;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              align-items: center;
              margin-top: 25px;

              &.flex--column {
                flex-direction: column;
              }

              em {
                color: #000;
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                line-height: 100%;
                text-transform: uppercase;
                position: relative;
                margin-left: 3px;

                i {
                  position: absolute;
                  top: -1px;
                  right: -10px;
                  color: #1700F4;
                  text-align: center;
                  font-size: 12px;
                  font-style: normal;
                  font-weight: 500;
                  line-height: 100%;
                  /* 12px */
                  text-transform: uppercase;
                }
              }
            }
          }
        }
      }
    }
  }
}

// Lightbox Styles
.lightbox--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  .lightbox--close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: rotate(90deg);
    }

    svg {
      width: 32px;
      height: 32px;
    }
  }

  .lightbox--prev,
  .lightbox--next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-50%) scale(1.1);
    }

    &:disabled {
      opacity: 0.3;
      cursor: not-allowed;

      &:hover {
        transform: translateY(-50%);
      }
    }

    svg {
      width: 40px;
      height: 40px;
    }
  }

  .lightbox--prev {
    left: 20px;
  }

  .lightbox--next {
    right: 20px;
  }

  .lightbox--content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .lightbox--swiper {
      width: 100%;
      height: 100%;
      max-width: 90vw;
      max-height: 90vh;

      .swiper-wrapper {
        .swiper-slide {
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            max-width: 100%;
            max-height: 90vh;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 8px;
          }
        }
      }
    }

    .lightbox--info {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10001;

      .lightbox--fraction {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 30px;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        backdrop-filter: blur(10px);
      }
    }
  }
}

// Lightbox Animation
.lightbox-fade-enter-active,
.lightbox-fade-leave-active {
  transition: opacity 0.3s ease;
}

.lightbox-fade-enter-from,
.lightbox-fade-leave-to {
  opacity: 0;
}


.caution--text--foot {
  display: flex;
  width: 100%;
  gap: 10px;
  background: #F7F7F7;
  padding: 70px 0px;

  .caution--text {
    max-width: 1440px;
    margin: 0 auto;
    color: #000;
    font-size: 17px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: -0.34px;
    text-transform: uppercase;
  }
}

// 반응형
@media (max-width: 768px) {
  .swiper--banner--wrapper {
    .swiper--banner--container {
      .swiper--pagination--wrapper {
        .swiper--progressbar {
          width: 150px;
        }

        .swiper--fraction {
          font-size: 14px;
        }
      }

      .zoom--btn {
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;

        svg {
          width: 20px;
          height: 20px;
        }
      }
    }
  }

  .lightbox--overlay {

    .lightbox--prev,
    .lightbox--next {
      width: 50px;
      height: 50px;

      svg {
        width: 30px;
        height: 30px;
      }
    }

    .lightbox--prev {
      left: 10px;
    }

    .lightbox--next {
      right: 10px;
    }

    .lightbox--content {
      .lightbox--info {
        bottom: 20px;

        .lightbox--fraction {
          font-size: 16px;
          padding: 10px 20px;
        }
      }
    }
  }
}

.theme--wrap {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1440px;
  align-items: center;
  justify-content: center;
  gap: 120px;

  .theme--img {
    >p {
      margin-bottom: 35px;
      color: #000;
      font-size: 19px;
      font-weight: 400;
      text-align: center;
      text-transform: capitalize;

      @media(max-width: 500px) {
        margin-bottom: 10px;
      }
    }

    .img--wrap {
      border-radius: 20px;
      overflow: hidden;

      img {
        width: 100%;
      }
    }
  }

  .theme--top {
    display: flex;
    gap: 40px;
  }

  .theme--bot {
    gap: 30px;
    display: flex;

    .theme--img {
      border-radius: 20px;
      overflow: hidden;

      img {
        width: 100%;
      }
    }
  }
}

.gallery--wrap {
  margin: 0 auto;
  max-width: 1440px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .thumb--wrap {
    // width:calc(50% - 20px);
    width: 100%;

    .slide--image {
      padding-top: 0px !important;
    }
  }
}


.models--visual--grid {
  width: 100%;

  ul {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;

    li {
      width: calc((100% - 60px) / 3);

      .desc--wrap {
        padding-top: 50px;

        h2 {
          color: #111;
          text-align: center;
          font-size: 25px;
          font-style: normal;
          font-weight: 500;
          line-height: 1.3;
          //text-transform: uppercase;
        }

        .captions {
          color: #222;
          text-align: center;
          font-size: 17px;
          font-style: normal;
          font-weight: 300;
          line-height: 1.7;
          //text-transform: uppercase;
          margin-top: 40px;
        }
      }

      .thumb--wrap {
        position: relative;
        aspect-ratio: 46/35;
        overflow: hidden;
        border-radius: 20px;

        img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          object-fit: cover;
        }
      }

    }
  }
}


.ovwner--wrapper {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-bottom: 120px;

  &.type--2 {
    max-width: 100%;

    .inner--wrap {
      max-width: 1440px;
      margin: 0 auto;
    }
  }

  .title--visual {
    text-align: center;

    .desc {
      color: #333;
      text-align: center;
      font-size: 18px;
      font-style: normal;
      font-weight: 300;
      line-height: 1.7;
      /* 18px */
      letter-spacing: -0.36px;
      text-transform: uppercase;

      &.type2 {
        color: #00095b;
        margin-top: 50px;
        font-weight: 500;
        font-size: 22px;
        letter-spacing: -0.44px;
      }
    }
  }

  .nav--desc--wrap {
    margin-top: 80px;
    margin-bottom: 240px;

    @media(max-width: 1024px) {
      margin-bottom: 120px;
    }

    p {
      color: #333;
      font-size: 22px;
      font-weight: 400;

      @media(max-width: 1024px) {
        font-size: 18px;
      }

      b {
        font-weight: 700;
        color: #00095b;
      }
    }
  }

  .contact--wrap {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    text-align: center;
    margin-top: 100px;

    .contact {
      background-color: #fafafa;
      padding: 60px 20px 80px;
      width: 33%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .quick--more {
        border-radius: 10px;
        border: 1px solid rgba(0, 9, 91, 0.50);
        display: inline-flex;
        padding: 20px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        color: #00095B;
        text-align: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        /* 14px */
        letter-spacing: -0.28px;
        text-transform: uppercase;
      }

      .mailto--type {
        font-size: 20px;
        font-weight: 400;
        color: #00095B;

        @media(max-width: 768px) {
          font-size: 18px;
        }
      }

      .ico {
        margin-bottom: 40px;
        width: 100px;
        height: 100px;
        background-color: #f3f3f3;
        border-radius: 50%;
        background-image: url(/img/ico--contact1.svg);
      }

      &:nth-of-type(2) {
        .ico {
          background-image: url(/img/ico--contact2.svg);
        }
      }

      &:nth-of-type(3) {
        .ico {
          background-image: url(/img/ico--contact4.svg);
        }
      }
    }

    h3 {
      color: #000;
      font-size: 18px;
      letter-spacing: -0.36px;
      margin-bottom: 30px;
      font-weight: 500;
    }

    span {
      margin-bottom: 30px;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: -0.4px;
      color: #00095b;
    }

    p {
      color: #333;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: -0.32px;
    }
  }

  .contact--wrap2 {
    margin-top: 100px;
    display: flex;
    gap: 50px;

    .contact {
      width: 33%;
      display: flex;
      padding: 60px 35px;
      align-items: center;
      background-color: #fafafa;
      gap: 30px;
      border-radius: 30px;

      .ico {
        min-width: 120px;
        width: 120px;
        height: 120px;
        background-color: #fff;
        border-radius: 50%;
        background-image: url(/img/owner/ico--contact1.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 55px 55px;
      }

      &:nth-child(2) {
        .ico {
          background-image: url(/img/owner/ico--contact2.svg);
        }
      }

      &:nth-child(3) {
        .ico {
          background-image: url(/img/owner/ico--contact4.svg);
        }
      }

      .info--wrap {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .quick--more {
          border-radius: 10px;
          border: 1px solid rgba(34, 41, 43, 0.50);
          display: inline-flex;
          padding: 20px 25px;
          justify-content: center;
          align-items: center;
          gap: 10px;
          color: #22292B;
          text-align: center;
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: 100%;
          /* 14px */
          letter-spacing: -0.28px;
          text-transform: uppercase;
        }

        .mailto--type {
          font-size: 16px;
          color: #222;
        }

        >h3 {
          color: #111;
          font-size: 17px;
          font-weight: 400;
          line-height: 1;
        }

        >span {
          font-size: 28px;
          font-weight: 700;
          color: #111;
          line-height: 1;
        }

        >p {
          color: #444;
          font-size: 17px;
          font-weight: 400;
        }
      }
    }
  }

  .text--tab--layout {
    position: sticky;
    top: 0px;
    z-index: 20;


    ul {
      display: flex;
      align-items: center;
      overflow-x: auto;
      justify-content: flex-start;
      gap: 15px;

      li {
        cursor: pointer;

        &.actv {
          a {
            background-color: #000;
            border-color: #000;
            color: #fff;
          }
        }

        a {
          border-radius: 100px;
          border: 1px solid #E8E8E8;
          background: #FFF;
          display: flex;
          padding: 22px 30px;
          align-items: center;
          justify-content: center;
          color: #444;
          white-space: nowrap;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 100%;
          /* 16px */
          letter-spacing: -0.32px;
          text-transform: uppercase;
        }
      }
    }
  }

  .owner--inner--content {
    .thumb {
      img {
        width: 100%;
        object-fit: contain;
      }
    }

    .desc--wrapper {

      >h2 {
        color: #111;
        font-size: 30px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: -0.6px;
        text-transform: uppercase;
      }

      >h3 {
        color: #111;
        font-size: 19px;
        font-weight: 500;
        letter-spacing: -0.38px;
      }

      .captions {
        padding-top: 40px;
        color: #333;
        font-size: 18px;
        font-style: normal;
        font-weight: 300;
        line-height: 1.7;
        /* 18px */
        letter-spacing: -0.36px;
        text-transform: uppercase;

        &.fz--17 {
          font-size: 17px;
        }

        >h3 {
          color: #111;
          font-size: 18px;
          font-style: normal;
          font-weight: 400;
          letter-spacing: -0.36px;
          text-transform: uppercase;
        }

        >ul {
          padding-top: 60px;

          li {
            position: relative;
            color: #111;
            font-size: 17px;
            font-style: normal;
            font-weight: 400;
            //line-height: 100%; /* 17px */
            line-height: 1.4;
            letter-spacing: -0.34px;
            text-transform: uppercase;
            padding-left: 20px;
            margin-bottom: 15px;

            &:before {
              content: '';
              display: block;
              width: 3px;
              height: 3px;
              background: #111;
              position: absolute;
              left: 10px;
              top: 9px;
            }
          }
        }

        .add--text {
          color: #333;
          font-size: 18px;
          font-style: normal;
          font-weight: 300;
          letter-spacing: -0.36px;
          text-transform: uppercase;
          padding-top: 60px;
        }
      }
    }
  }

  .owner--part--wrap {
    display: flex;
    flex-direction: column;
    margin-top: 150px;
    gap: 50px;

    .owner--part {
      padding: 120px 100px;
      background-color: #252525;
      display: flex;
      align-items: center;
      gap: 100px;

      .ico {
        width: 200px;
        background-size: 70px 70px;
        min-width: 200px;
        border-radius: 100px;
        background-color: #fff;
        height: 200px;
        background-image: url(/img/owner/ico--parts1.svg);
      }

      &:nth-of-type(2) {
        .ico {
          background-image: url(/img/owner/ico--parts2.svg);
        }
      }

      .part--content {
        >h3 {
          margin-bottom: 40px;
          color: #fff;
          font-size: 30px;
          font-weight: 500;
          letter-spacing: -0.6px;
        }

        >p {
          color: #fff;
          font-size: 17px;
          font-weight: 300;
          letter-spacing: -0.34px;
          line-height: 1.7;
        }
      }
    }
  }
}

.nav--dis--wrap {
  &.active {
    .dis--cont {
      max-height: 1000px;
    }

    .dis--btn {
      .ico {
        transform: rotate(0deg);
      }
    }
  }

  .dis--btn {
    border-top: 1px solid #D3D3D3;
    border-bottom: 1px solid #D3D3D3;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #076fed;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    text-transform: uppercase;
    padding: 30px;
    line-height: 1;

    .ico {
      width: 20px;
      height: 20px;
      transition: all 0.3s;
      transform: rotate(180deg);
      background-image: url(/img/owner/ico--arrow--blue.svg);
    }
  }

  .dis--cont {
    background-color: #f9f9f9;
    color: #111;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
    font-size: 16px;
    font-weight: 300;

    p {
      padding: 60px 0;
    }
  }
}

.consumable--parts--wrap {
  .prm--service {
    >h2 {
      color: #111;
      text-align: center;
      font-size: 30px;
      font-style: normal;
      margin-bottom: 40px;
      font-weight: 500;
      //line-height: 100%; /* 30px */
      letter-spacing: -0.6px;
      text-transform: capitalize;
    }

    .sub--title {
      color: #333;
      text-align: center;
      font-size: 18px;
      font-style: normal;
      font-weight: 300;
      line-height: 1.7;
      text-transform: uppercase;
    }

    .sub--list {
      gap: 15px;
      flex-direction: column;
      align-items: center;
      max-width: 1024px;
      margin: 0 auto 70px;

      >li {
        width: 100%;
        text-align: left;
        color: #111;
        align-items: start;
        font-size: 17px;
        font-weight: 300;
        letter-spacing: -0.34px;
        position: relative;
        padding-left: 15px;

        &::before {
          position: absolute;
          top: 10px;
          left: 0;
          background-color: #111;
          content: '';
          width: 3px;
          height: 3px;
          display: inline-block;

        }
      }
    }

    >ul {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 70px;

      >li {
        width: calc(100% / 3);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .thumb {
          width: 150px;
          height: 150px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 1000px;
          background: #F6F6F6;
        }

        .captions {
          color: #000;
          text-align: center;
          font-size: 17px;
          font-style: normal;
          font-weight: 300;
          line-height: 1.7;
          padding-top: 35px;
          text-transform: uppercase;
        }
      }
    }
  }

  .dbl--contents {
    >ul {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 50px;

      li {
        width: calc(50% - 25px);

        .thumb {
          overflow: hidden;
          border-radius: 30px;
        }

        .desc--wrap {

          h2 {
            text-align: left;
            color: #000;
            font-size: 20px;
            font-style: normal;
            font-weight: 500;
            //line-height: 100%; /* 20px */
            text-transform: uppercase;
          }

          >ul {
            width: 100%;
            padding-top: 30px;

            li {
              position: relative;
              text-align: left;
              padding-left: 20px;
              width: 100%;
              margin-bottom: 10px;
              color: #222;
              font-size: 17px;
              font-style: normal;
              font-weight: 300;
              line-height: 1.7;
              /* 17px */
              text-transform: uppercase;

              &:before {
                content: '';
                display: block;
                width: 3px;
                height: 3px;
                background-color: #000;
                position: absolute;
                left: 10px;
                top: 12px;
              }
            }
          }
        }
      }
    }
  }

  .essential--maintenace--wrap {
    background: #FAFAFA;

    .inner--wrap {
      .title--visual {
        >h2 {
          color: #111;
          text-align: center;
          font-size: 30px;
          font-style: normal;
          font-weight: 500;
          //line-height: 100%; /* 30px */
          letter-spacing: -0.6px;
          text-transform: capitalize;
        }

        >.captions {
          color: #333;
          text-align: center;
          font-size: 18px;
          font-style: normal;
          font-weight: 300;
          line-height: 1.7;
          text-transform: uppercase;
        }
      }
    }

    .columb--thume--3 {
      >ul {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 50px;

        >li {
          width: calc((100% - 100px) / 3);
          text-align: center;

          .thumb {
            overflow: hidden;
            border-radius: 30px;
          }

          .captions {
            padding-top: 30px;
            color: #000;
            text-align: center;
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            //line-height: 100%; /* 18px */
            text-transform: uppercase;
          }
        }
      }
    }

    .column--3 {
      >ul {
        display: flex;
        align-items: flex-start;
        justify-content: center;

        >li {
          width: calc(100% / 3);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          .thumb {
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 1000px;
            background: #F3F3F3;
          }

          .caption {
            padding-top: 35px;
            color: #000;
            text-align: center;
            font-size: 17px;
            font-style: normal;
            font-weight: 300;
            //line-height: 100%; /* 17px */
          }
        }
      }
    }
  }

  .used--essential--wrap {
    width: 100%;
    margin: 0 auto;
    max-width: 1440px;
    padding-bottom: 150px;

    .title--visual {
      >h2 {
        color: #111;
        text-align: center;
        font-size: 30px;
        font-style: normal;
        font-weight: 500;
        //line-height: 100%; /* 30px */
        letter-spacing: -0.6px;
        text-transform: capitalize;
      }

      .captions {
        color: #333;
        text-align: center;
        font-size: 18px;
        font-style: normal;
        font-weight: 300;
        line-height: 1.7;
        /* 18px */
        text-transform: uppercase;
        padding-top: 40px;
      }
    }

    .column--3 {
      padding-top: 70px;

      >ul {
        display: flex;
        align-items: flex-start;
        justify-content: center;

        >li {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          text-align: center;
          width: calc(100% / 3);

          .thumb {
            width: 150px;
            height: 150px;
            border-radius: 1000px;
            background: #F6F6F6;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .caption {
            padding-top: 35px;
            color: #000;
            text-align: center;
            font-size: 17px;
            font-style: normal;
            font-weight: 300;
            line-height: 1.7;
            /* 17px */
            text-transform: uppercase;
          }
        }
      }
    }
  }


  .column--4 {
    >h2 {
      color: #111;
      text-align: center;
      font-size: 30px;
      font-style: normal;
      font-weight: 700;
      //line-height: 100%; /* 30px */
      text-transform: uppercase;
    }

    >ul {
      padding-top: 70px;
      display: flex;
      gap: 20px;

      li {
        width: calc((100% - 60px) / 3);
        border-radius: 30px;
        border: 1px solid #E0E0E0;
        background: #FFF;
        padding: 45px;

        .thumb {
          width: 56px;
          height: 56px;
        }

        >h2 {
          padding-top: 50px;
          color: #000;
          font-size: 20px;
          font-style: normal;
          font-weight: 500;
          line-height: 1.7;
          /* 20px */
          letter-spacing: -0.4px;
          text-transform: uppercase;
          margin-bottom: 30px;
        }

        >div {
          color: #000;
          font-size: 16px;
          font-style: normal;
          font-weight: 300;
          line-height: 1.7;
          /* 16px */
          letter-spacing: -0.32px;
          text-transform: uppercase;
        }
      }
    }
  }
}

.service--card--wrap {
  display: flex;
  gap: 100px;
  align-items: center;

  .img--wrap {
    width: 50%;
  }

  .desc--wrap {
    width: 50%;

    >h3 {
      margin-bottom: 25px;
      color: #000;
      font-size: 30px;
      font-weight: 500;
    }

    >p {
      color: #000;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: -0.36px;
      margin-bottom: 25px;
    }

    >ul {
      display: flex;
      flex-direction: column;
      gap: 25px;

      >li {
        color: #222;
        font-size: 17px;
        font-weight: 300;
        position: relative;
        padding-left: 13px;

        &::before {
          top: 10px;
          left: 0;
          position: absolute;
          content: '';
          width: 3px;
          height: 3px;
          background-color: #595959;
          display: inline-block;
        }
      }
    }
  }
}

.dbl--info--cont {
  >ul {
    display: flex;
    gap: 50px;

    >li {
      background: #FAFAFA;
      border-radius: 30px;
      width: 100%;
      max-width: calc((100% - 25px) / 2);
      padding: 50px 70px;
      display: flex;
      align-items: center;
      gap: 50px;

      .thumb {
        width: 100px;
        height: 100px;
        min-width: 100px;
        border-radius: 100px;
        background: #0AF;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .desc {
        >h2 {
          color: #111;
          font-size: 20px;
          font-style: normal;
          font-weight: 700;
          //line-height: 100%; /* 20px */
          letter-spacing: -0.4px;
          text-transform: uppercase;
          margin-bottom: 24px;
        }

        .phone {
          color: #00095B;
          font-size: 20px;
          font-style: normal;
          font-weight: 700;
          //line-height: 100%; /* 20px */
          letter-spacing: -0.4px;
          text-transform: uppercase;
        }
      }
    }
  }
}

.tfs--drop--menus {
  >ul {
    >li {
      .title {
        margin-top: -1px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-weight: 700;
        border-top: 1px solid #DBDBDB;
        border-bottom: 1px solid #DBDBDB;
        background: #F8F8F8;
        padding: 32px 25px;
        position: relative;
        cursor: pointer;

        &:after {
          content: '';
          display: block;
          width: 24px;
          height: 24px;
          background: url(/img/ico--chv--down.svg) no-repeat center;
          position: absolute;
          top: 50%;
          transform: translateY(-50%) rotate(180deg);
          right: 25px;
        }
      }

      &.open {
        .title {
          &:after {
            transform: translateY(-50%) rotate(0deg);
          }
        }

        .drop--contents {
          display: block;
        }
      }

      .drop--contents {
        padding: 50px 25px;
        display: none;

        &.type2 {
          padding: 50px;
        }

        h2 {
          color: #111;
          font-size: 18px;
          font-style: normal;
          font-weight: 500;
          line-height: 100%;
          /* 18px */
          letter-spacing: -0.36px;
          text-transform: uppercase;
          margin-bottom: 20px;
          position: relative;
          padding-left: 20px;

          &::before {
            content: '';
            display: block;
            width: 3px;
            height: 3px;
            background-color: #111;
            position: absolute;
            top: 7px;
            left: 10px;
          }
        }

        h3 {
          color: #111;
          font-size: 18px;
          font-style: normal;
          font-weight: 500;
          //line-height: 100%; /* 18px */
          letter-spacing: -0.36px;
          text-transform: uppercase;
          margin-bottom: 20px;
        }

        ul {
          >li {
            color: #333;
            font-size: 17px;
            font-style: normal;
            font-weight: 300;
            //line-height: 100%; /* 17px */
            letter-spacing: -0.34px;
            text-transform: lowercase;
            margin-bottom: 20px;
            position: relative;
            padding-left: 20px;

            &:before {
              content: '';
              display: block;
              width: 3px;
              height: 3px;
              background-color: #333;
              position: absolute;
              top: 10px;
              left: 10px;
            }

            &:last-child {
              margin-bottom: 0px;
            }
          }
        }

        div {
          color: #333;
          font-size: 17px;
          font-style: normal;
          font-weight: 300;
          line-height: 1.7;
          /* 17px */
          letter-spacing: -0.34px;
          text-transform: lowercase;
          margin-bottom: 55px;
          padding-left: 20px;

          &.solo {
            margin-bottom: 0px;
            padding-left: 0px;
          }
        }

        p {
          color: #333;
          font-size: 17px;
          font-style: normal;
          font-weight: 300;
          line-height: 1.7;
          letter-spacing: -0.34px;
          text-transform: lowercase;
          position: relative;
          padding-left: 25px;

          &:before {
            content: '*';
            display: block;
            position: absolute;
            left: 10px;
            top: 2px;
          }
        }

        .drop--part--wrap {
          padding: 0;
          margin-bottom: 0;
          align-items: center;
          display: flex;
          gap: 55px;

          .img--wrap {
            width: 258px;
            min-width: 258px;
            padding: 0;
            margin: 0;
          }

          .desc--wrap {
            padding: 0;
            margin: 0;

            ul {
              li {
                color: #111;
                line-height: 1.7;

                &::before {
                  top: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
}


/* 버튼 리스트 */
.location--btn {
  color: #111;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  /* 15px */
  letter-spacing: -0.3px;
  text-transform: uppercase;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.50);
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  justify-content: center;
  padding: 13px 18px;
  gap: 7px;
}


.sticky--banner {
  position: sticky;
  top: 0px;
  z-index: 1;
}

.outer--wrapper {
  position: relative;
  z-index: 2;
  background-color: #fff;
  padding-top: 100px;

  @media (max-width: 768px) {
    padding-top: 50px;
  }

}

.about--wrap {

  .visual--banner--02 {
    .thumb--wrap {
      width: 100%;
      display: flex;
      align-items: flex-start;
      gap: 50px;
      row-gap: 120px;
      flex-wrap: wrap;

      @media (max-width: 768px) {
        row-gap: 50px;
      }

      .thumb--item {
        width: calc(50% - 25px);

        @media (max-width: 768px) {
          width: 100%;
        }

        .desc {
          .t--title {
            color: #000;
            font-size: 20px;
            font-style: normal;
            font-weight: 500;
            line-height: 100%;
            /* 20px */
            text-transform: uppercase;
            padding-top: 30px;
          }

          .captions {
            margin-top: 30px;
            color: #222;
            font-size: 17px;
            font-style: normal;
            font-weight: 300;
            line-height: 1.7;
            text-transform: uppercase;

          }
        }

        .thumb {
          border-radius: 30px;
          overflow: hidden;
          width: 100%;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }

  .our--vision {
    background: #FAFAFA;
    padding-bottom: 150px;

    @media (max-width:768px) {
      padding-bottom: 50px;
    }

    .vision--wrap {
      padding-top: 70px;

      >ul {
        max-width: 1440px;
        display: flex;
        margin: 0 auto;
        gap: 50px;
        row-gap: 50px;

        li {
          width: calc((100% - 150px) / 4);

          @media(max-width:1440px) {
            width: calc((100% - 50px) / 2);
          }

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

          .thumb {
            border-radius: 1000px;
            background: #F3F3F3;
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;

          }

          .desc {
            padding-top: 40px;

            h2 {
              color: #000;
              text-align: center;
              font-size: 19px;
              font-style: normal;
              font-weight: 500;
              line-height: 100%;
              /* 19px */
              text-transform: uppercase;
            }

            .captions {
              color: #333;
              text-align: center;
              font-size: 16px;
              font-style: normal;
              font-weight: 300;
              line-height: 1.7;
              padding-top: 30px;
            }
          }
        }
      }
    }
  }

  .strong--business {
    text-align: center;
    padding-bottom: 150px;

    @media(max-width:768px) {
      padding-bottom: 50px;
    }

    .invest--more--btn {
      color: #FFF;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 100%;
      /* 16px */
      text-transform: capitalize;
      display: inline-flex;
      padding: 23px 40px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      border-radius: 100px;
      background: #0AF;
      margin-top: 70px;

      @media(max-width:768px) {
        margin-top: 35px;
      }
    }
  }
}

.grid--list--items {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;

  .grid--items {
    width: calc((100% - 120px) / 3);
    border: 1px solid #E5E5E5;
    background: #FFF;
    display: flex;
    padding: 70px 50px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    align-self: stretch;

    .thumb {
      border-radius: 1000px;
      background: #F3F3F3;
      width: 110px;
      height: 110px;
      border-radius: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .desc {
      >h2 {
        color: #000;
        text-align: center;
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        /* 22px */
        letter-spacing: -0.44px;
        text-transform: capitalize;
      }

      >div {
        color: #444;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.7;
        letter-spacing: -0.32px;
        text-transform: capitalize;
        margin-top: 25px;
      }
    }
  }
}

.grid--banner--wrapper {
  &.type--2 {
    padding: 95px 60px;

    .grid--items {
      padding: 0px;
    }
  }

  .grid--items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    padding-top: 80px;
    padding-bottom: 110px;
    width: 100%;

    @media(max-width:1024px) {
      flex-direction: column;

      .grid--desc {
        max-width: 100% !important;
      }

      .grid--banner {
        max-width: 100% !important;
        min-width: 100% !important;

        img {
          width: 100%;
        }
      }
    }

    @media(max-width:1440px) {
      padding-left: 0px;
      padding-right: 0px;
    }

    &.dark {
      background: #FAFAFA;
    }

    &.revers {
      flex-direction: row-reverse;

      @media(max-width:1024px) {
        flex-direction: column;
      }
    }

    @media(max-width:768px) {
      gap: 40px;
    }

    .grid--banner {
      max-width: 650px;
      min-width: 650px;
    }

    .grid--desc {
      max-width: 710px;

      h2 {
        color: #000;
        font-size: 30px;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        /* 30px */
        text-transform: uppercase;
        margin-bottom: 35px;
      }

      .captions {
        color: #000;
        font-size: 18px;
        font-style: normal;
        font-weight: 300;
        line-height: 1.7;
        white-space: normal;
        text-transform: uppercase;

        >ul {
          >li {
            color: #333;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            //line-height: 100%; /* 18px */
            text-transform: uppercase;
            position: relative;
            padding-left: 10px;
            margin-bottom: 15px;

            &.not--sq {
              li {
                color: #444;
                font-size: 17px;
                font-style: normal;
                font-weight: 400;
                //line-height: 100%; /* 17px */
                text-transform: uppercase;
              }

              &::before {
                display: none;
              }
            }

            &:before {
              content: '';
              display: inline-flex;
              width: 3px;
              height: 3px;
              background: #595959;
              position: absolute;
              left: 0px;
              top: 10px;
            }
          }
        }
      }

      .list--content {
        >ul {
          >li {
            color: #444;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5;
            text-transform: lowercase;
            margin-bottom: 10px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 10px;

            &:before {
              content: '';
              display: inline-flex;
              width: 3px;
              height: 3px;
              background: #595959;
              position: absolute;
              left: 0px;
              top: 12px;
            }

            &:last-child {
              margin-bottom: 0px;
            }
          }
        }
      }
    }

  }
}

.g-layout {
  &.active {
    position: relative;
    z-index: 1100;
  }
}


.owner--service {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 65px;
  padding: 60px;
  background: #FAFAFA;

  .thumb {}

  ;

  .desc {
    max-width: 580px;

    h2 {
      color: #111;
      font-size: 30px;
      font-style: normal;
      font-weight: 700;
      line-height: 100%;
      /* 30px */
      letter-spacing: -0.6px;
      text-transform: uppercase;
    }

    >div {
      color: #444;
      font-size: 17px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.7;
      letter-spacing: -0.34px;
      margin-top: 20px;
    }
  }
}

.owner--list--content {
  .title {
    display: flex;
    align-items: center;
    justify-content: center;

    h2 {
      color: #222;
      text-align: center;
      font-size: 35px;
      font-style: normal;
      font-weight: 700;
      //line-height: 100%; /* 35px */
      letter-spacing: -0.7px;
      text-transform: uppercase;
    }
  }

  .list--content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 70px;
    gap: 80px;

    >ul {
      width: calc((100% - 160px) / 3);

      @media(max-width:1024px) {
        width: 100%;
      }

      >li {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0px;
        }

        &:before {
          content: '';
          width: 3px;
          height: 3px;
          display: inline-flex;
          background: #595959;
        }
      }
    }
  }
}


.outer--desc {
  padding-top: 70px;

  >ul {
    >li {
      position: relative;
      color: #444;
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      //line-height: 100%; /* 18px */
      text-transform: lowercase;
      padding-left: 10px;
      margin-bottom: 40px;

      &:last-child {
        margin-bottom: 0px;
      }

      &:before {
        content: '';
        display: inline-flex;
        width: 3px;
        height: 3px;
        background: #595959;
        position: absolute;
        top: 8px;
        left: 0px;
      }
    }
  }
}


.column--caption3 {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  >ul {
    width: calc((100% - 160px) / 3);

    >li {
      position: relative;
      padding-left: 12px;
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0px;
      }

      &.not--sq {
        padding-left: 10px;

        &::before {
          display: none;
        }

        >ul {
          li {
            padding-left: 12px;
            color: #444;
            font-size: 17px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.7;
            text-transform: uppercase;
            position: relative;

            &:before {
              content: '-';
              position: absolute;
              top: -1px;
              left: 0px;
            }
          }
        }
      }

      &:before {
        content: '';
        display: block;
        width: 3px;
        height: 3px;
        background: #595959;
        position: absolute;
        top: 9px;
        left: 0px;
      }
    }
  }
}

.inner--dbl--content {
  padding-top: 50px;

  >ul {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;

    li {
      .thumb {
        border-radius: 20px;
        border-radius: 20px;
        border: 1px solid #D9D9D9;
        background: #FFF;
        overflow: hidden;
      }

      a {
        margin-top: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        padding: 15px 20px;
        justify-content: center;
        align-items: center;
        gap: 5px;
        border-radius: 100px;
        background: #111;
        color: #FFF;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        /* 14px */
        text-transform: capitalize;
      }
    }
  }
}

// 전체 메뉴 (사이트맵)
.all--menu--wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 1002;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
  overflow-y: auto;

  &.active {
    transform: translateY(0);
  }

  .close--btn {
    position: absolute;
    top: 25px;
    right: 0px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .all--menu--inner {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    padding: 35px 0 100px;

    .main--menu--list {
      display: flex;
      gap: 60px;

      li {
        width: 20%;

        h3 {
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 50px;
          line-height: 1;
          color: #00095B;
          text-transform: uppercase;
        }
      }
    }

    .sitemap--list {
      display: flex;
      gap: 60px;
      max-height: 60vh;
      overflow-y: auto;

      >ul {
        width: 20%;
        display: flex;
        flex-direction: column;
        gap: 20px;

        li {
          width: 100%;
          display: flex;

          &:first-child {
            a {
              padding-top: 0;

              &::before {
                top: 10px;
              }
            }
          }

          a {
            padding-top: 15px;
            color: #000;
            font-size: 16px;
            padding-left: 20px;
            width: 100%;
            font-weight: 500;
            position: relative;

            &::before {
              position: absolute;
              content: '';
              display: inline-block;
              width: 5px;
              height: 5px;
              background-color: #333;
              top: 25px;
              left: 0;
            }

            &.sub--type {
              color: #444;
              font-size: 15px;
              padding: 0 20px;
              font-weight: 400;

              &::before {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}

// 햄버거 버튼 active 상태 (X 모양)
.hmb--btn {
  position: relative;
  z-index: 1002;

  svg line {
    transition: all 0.3s ease;
  }

  &.active {
    svg {
      line:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
        transform-origin: 20px 8px;
      }

      line:nth-child(2) {
        opacity: 0;
      }

      line:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
        transform-origin: 20px 30px;
      }
    }
  }
}

// 모바일 메뉴
.mobile--menu--wrapper {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.4s ease;
  overflow-y: auto;

  &.active {
    transform: translateX(0);
  }

  .mobile--menu--inner {
    padding: 72px 20px 60px;

    .mobile--menu--list {
      >li {

        &.active {
          .menu--title {
            span {
              color: #076FED;
            }

            .arrow {
              background-image: url(/img/ico--minus.svg);
            }
          }

          .mobile--sub--menu {
            max-height: 1000px;
            padding: 25px 0;
            border-bottom: 1px solid #b2b2b2;
          }
        }

        .menu--title {
          border-bottom: 1px solid #b2b2b2;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 30px 0;
          cursor: pointer;

          span {
            font-size: 15px;
            font-weight: 700;
            color: #000;
            text-transform: uppercase;
          }

          .arrow {
            width: 22px;
            height: 22px;
            transition: all 0.3s;
            background-image: url(/img/ico--plus.svg);
          }
        }

        .mobile--sub--menu {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease, padding 0.3s ease;
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 15px;

          &.car--menu {
            text-align: center;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 15px;

            li {
              width: calc((100% - 30px) / 3);

              a {
                display: flex;
                flex-direction: column;
                gap: 15px;
                font-size: 14px;
                color: #000;
                font-weight: 400;
                padding: 0;
              }
            }
          }

          li {
            display: flex;
            width: 100%;

            &:first-child {
              h4 {
                margin-top: 0;
              }
            }

            h4 {
              padding-left: 20px;
              position: relative;
              font-size: 16px;
              font-weight: 500;
              margin-bottom: 5px;
              margin-top: 20px;

              >a {
                color: #000;
                font-size: 16px;
                font-weight: 500;
              }

              &::before {
                content: '';
                position: absolute;
                width: 5px;
                top: 8px;
                left: 0;
                height: 5px;
                background-color: #333;
              }
            }

            a {
              font-size: 15px;
              width: 100%;
              padding-left: 20px;
              color: #444;
              font-weight: 400;

              &:hover {}
            }
          }
        }
      }
    }
  }
}


.text--justify--left {
  text-align: left !important;
}

.text--center {
  text-align: center !important;
}


.service--center--ford {
  td {
    text-align: left !important;
    padding-left: 20px !important;

    &.text--center,
    &:last-child {
      text-align: center !important;

      &.text--justify--left {
        text-align: left !important;
      }
    }
  }

  a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: #076FED;
    color: #FFF;
    height: 30px;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.26px;
    text-transform: uppercase;
    padding: 0 16px;
    gap: 9px;

    &:before {
      content: "";
      width: 15px;
      min-width: 15px;
      height: 14px;
      display: inline-flex;
      background: url(/img/ico--res--service.svg);
      background-size: contain;
      position: relative;
      top: -1px;
    }
  }
}

.admin--form--table{
  width: 100%;
  color: #666b75;
  font-weight: 400;
  font-size: 12px;
  p{
    color: #666b75;
    font-weight: 400;
    font-size: 12px;
  }
  tr{
    border-top: 1px solid #F0F2F6;
    &:last-child{
      border-bottom: 1px solid #F0F2F6;
    }
  }
  th{
    padding: 20px 16px;
    text-align: left;
    color: #1a2b4a;
    font-weight: 700;
    font-size: 13px;
    background-color: #F8f9fb;
    .admin--required{
      color: var(--admin-red);
    }
  }
  td{
    padding: 12px 16px;
    .input--wrap{
      display: flex;
      align-items: center;
      gap: 12px;
      input, select{
        width: 320px;
        &[type=radio]{
          width: auto;
        }
        &.w--full{
          width: 100%;
        }
        &.w--120{
          width: 120px;
        }
        &.w--160{
          width: 160px;
        }
        &.w--200{
          width: 200px;
        }
        &.w--240{
          width: 240px;
        }
        &.w--300{
          width: 300px;
        }
      }
    }
  }
}

.admin--form-section-title{
  font-size: 15px;
  font-weight: 700;
  color: #1a2b4a;
  margin: 28px 0 12px;
  &:first-child{
    margin-top: 0;
  }
}

.admin--info--box,
.admin--inf--box{
  background-color: #fff8de;
  border-radius: 6px;
  margin-top: 32px;
  padding: 20px;
  h3{
    color: #e8b547;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.55px;
    margin-bottom: 10px;
  }
  ul{
    li{
      position: relative;
      color: #1a2b4a;
      font-size: 13px;
      font-weight: 400;
      padding-left: 14px;
      &::before{
        content: '';
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #1a2b4a;
        left: 4px;
        top: 8px;
      }
    }
  }
}
.admin--inf--box{
  margin-top: 16px;
  background-color: #F8F9FB;
  h3{
    color: #666B75;
  }
}

// 선상 & 낚시터 사진 추가
.onboard--photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.onboard--photo-item {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8eaef;
}

.onboard--photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.onboard--photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  &::before{
    content: '×';
    top: -1px;
    right: 6.5px;
    position: absolute;
    font-size: 15px;
    color: #fff;
  }
}

.onboard--photo-remove:hover {
  background: rgba(0, 0, 0, 0.85);
}

.onboard--photo-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--admin-red);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}