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;
  }
}

@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
=================================================*/

.txt--error{
  color: var(--admin-error)!important;
}

.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
=================================================*/

// ============================================
// 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);
  z-index: 10;
  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--sub--table--title{
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    color: #1a2b4a;
    font-size: 16px;
    font-weight: 700;
    align-items: center;
    .sub--table--info{
      display: flex;
      gap: 10px;
      span{
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        background-color: #E8F0FE;
        color: #3c80f2;
        &:last-child{
          background-color: rgba(16, 185, 129, 0.1);
          color: var(--admin-success);
        }
      }
    }
  }
}


// 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--table--middle--title{
    font-size: 13px;
    color: #1a2b4a;
    font-weight: 700;
    margin-top: 20px;
  }
  .admin--table--middle--desc{
    margin-top: 8px;
    color: #666b75;
    font-size: 13px;
    margin-bottom: 20px;
  }
  
  .admin--round--box--wrap{
    padding: 16px 20px;
    border-radius: 8px;
    border: 1px solid #eaecf0;
    .admin--round--title{
      display: flex;
      align-items: center;
      gap: 40px;
      color: #1a2b4a;
      font-size: 13px;
      font-weight: 700;
      flex-wrap: wrap;
      @media(max-width: 768px){
        // flex-direction: column;
        // align-items: flex-start;
        gap: 12px;
      }
      span{
        border-radius: 6px;
        background-color: #f1f3f5;
        padding: 5px 20px;
        color: #666b75;
        font-size: 12px;
        font-weight: 400;
        &.closed--txt{
          margin-left: auto;
          background-color: var(--admin-red);
          color: #fff;
        }
      }
      button{
        padding: 8px 16px;
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        color: #fff;
        margin-left: auto;
        background-color: var(--admin-red);
        border-radius: 4px;
        &.place--remove--btn{
          background-color: transparent;
          color: #9aa0aa;
          font-size: 14px;
          font-weight: 400;
          padding: 6px;
        }
      }
    }
    .admin--round--box{
      // margin-top: 16px;
      display: flex;
      flex-direction: column;
      .input--wrap{
        display: flex;
        gap: 12px;
        .admin--round--radio{
          cursor: pointer;
          display: flex;
          align-items: center;
          width: 50%;
          gap: 5px;
          max-width: 360px;
          border-radius: 6px;
          border: 1px solid #c8d5e6;
          padding: 10px 16px;
          color: #666b75;
          font-size: 13px;
          font-weight: 400;
          &:has(input:checked){
            background-color: #ebf7fa;
            border: 2px solid #17a2b8;
            color: #17a2b8;
            font-weight: 600;
          }
          input[type=radio]{
            appearance: none;
            width: 8px;
            height: 8px;
            border: 1px solid #666b75;
            border-radius: 50%;
            &:checked{
              background-color: #17a2b8;
              border-color: #17a2b8;
            }
          }
        }
      }
      p{
        color: #666b75;
        font-size: 12px;
        font-weight: 400;
      }
      .qual--wrap{
        .input--wrap{
          align-items: center;
          input{
            height: 40px;
          }
          .w--120{
            width: 120px;
          }
          span{
            color: #666b75;
            font-size: 12px;
            font-weight: 400;
          }
        }
      }
      .round--place--wrap{
        border-radius: 6px;
        border: 1px solid #eaecf0;
        display: flex;
        flex-direction: column;
        background-color: #f7f8fa;
        margin-top: 16px;
        padding: 16px;
      }
      .place--add--btn{
        margin-top: 16px;
        text-align: center;
        border-radius: 6px;
        border: 1px dashed #c8d5e6;
        background-color: #fff;
        padding: 8px;
        color: #666b75;
        font-size: 14px;
        cursor: pointer;
        font-weight: 400;
      }
    }
  }
  //  챌린지 등록, 퀘스트 등록에서 공통 사용 : S
  .place--select--wrap{
    .input--wrap{
      flex-wrap: wrap;
      .admin--form-select{
        height: 40px;
        min-width: 120px;
        width: fit-content;
        line-height: 1;
        text-align: left;
      }
    }
    input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 18px;
      height: 18px;
      margin: 0;
      border: 1.5px solid #cbd5e0;
      border-radius: 4px;
      background-color: #fff;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 12px 12px;
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      transition: background-color 0.15s ease, border-color 0.15s ease;
      flex-shrink: 0;

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

      &:focus-visible {
        outline: 2px solid rgba(26, 35, 50, 0.25);
        outline-offset: 1px;
      }

      &:checked {
        background-color: #fff;
        border-color: var(--admin-accent-primary);
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8L6.75 11.25L12.5 5.25' stroke='%231A2332' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }
    }
    .place--select--btn--wrap{
      display: flex;
      flex-direction: column;
      .all--place--wrap{
        margin-top: 12px;
        width: 460px;
        background-color: #fff;
        border: 1px solid #c8d5e6;
        border-radius: 8px;
        .place--top{
          padding: 8px 12px;
          .all--place{
            p{
              text-align: left;
            }
            .group--header{
              color: #374151;
              font-weight: 600;
              display: flex;
              justify-content: space-between;
              padding: 16px 0 6px;
              button{
                cursor: pointer;
                color: #125ea6;
                font-weight: 400;
              }
            }
          }
          .search--wrap{
            margin-bottom: 6px;
            input{
              border-radius: 6px;
              border: 1px solid #eaecf0;
              background-color: #f7f8fa;
              width: 100%;
              padding: 8px 12px;
              color: #9aa0aa;
              font-size: 13px;
              font-weight: 400;
            }
          }
          .check--wrap{
            margin-bottom: 10px;
            label{
              cursor: pointer;
              border-radius: 6px;
              background-color: #edf5fc;
              padding: 8px 12px;
              color: #125ea6;
              font-weight: 600;
              font-size: 13px;
              display: flex;
              gap: 10px;
              span{
                font-weight: 400;
              }
            }
          }
          .all--place{
            .all--place--list{
              min-height: 100px;
              max-height: 480px;
              overflow-y: auto;
              li{
                label{
                  padding: 6px 0;
                  cursor: pointer;
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  color: #1a2b4a;
                  font-size: 13px;
                  font-weight: 600;
                  span{
                    &:nth-of-type(1){
                      flex: 1;
                    }
                  }
                  .off{
                    width: 50px;
                    min-width: 50px;
                    border-radius: 4px;
                    background-color: #f0f2f5;
                    padding: 4px;
                    text-align: center;
                    color: #666b75;
                    font-size: 12px;
                    font-weight: 600;
                  }
                  .on{
                    width: 50px;
                    min-width: 50px;
                    border-radius: 4px;
                    padding: 4px;
                    text-align: center;
                    font-size: 12px;
                    font-weight: 600;
                    background-color: #EDF5FC;
                    color: #125ea6;
                  }
                  p {
                    width: 200px;
                    min-width: 200px;
                  }
                }
              }
            }
          }
        }
        .place--bot{
          display: flex;
          justify-content: space-between;
          padding: 8px 12px;
          align-items: center;
          border-top: 1px solid #eaecf0;
          button{
            font-weight: 600;
            cursor: pointer;
            color: #fff;
            background-color: #17a2b8;
            border-radius: 4px;
            padding: 4px 20px;
            font-size: 12px;
          }
        }
      }
      div{
        &.admin--form-select{
          display: flex;
          gap: 8px;
          width: 100%;
          max-width: 460px;
          .place--selected{
            border-radius: 5px;
            background-color: #edf5fc;
            padding: 6px 12px;
            color: #125ea6;
            font-size: 12px;
            font-weight: 600;
            button{
              color: #7394c2;
              font-weight: 400;
              cursor: pointer;
              padding-left: 10px;
            }
          }
        }
      }
    }

    // 지역별 그룹 묶음 (detail 페이지)
    .area--group--wrap{
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .area--group{
      &__name{
        font-size: 13px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 6px;
        padding-bottom: 4px;
      }
    }

    .item--selected--wrap{
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      .item--selected{
        border-radius: 5px;
        padding: 6px 12px;
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
        font-size: 12px;
        font-weight: 600;
        transition: all 0.15s ease;

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

        // "○○ 전체" 그룹 칩 — 보라색
        &.is-group{
          background: rgba(139, 92, 246, 0.12);
          color: #7c3aed;
          font-weight: 700;
        }

        // "○○ 접기" 액션 칩 — 회색 + 점선
        &.is-collapse{
          background: #f3f4f6;
          color: #6b7280;
          border: 1px dashed #d1d5db;
          // font-style: italic;
        }

        // 클릭 가능 (group / collapse) — 호버 효과
        &.is-clickable{
          cursor: pointer;
          &:hover{
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
          }
        }
      }
    }
  }
  .item--select--wrap{
    .item--select--btn--wrap{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      button{
        padding: 8px 16px;
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        color: #fff;
        background-color: #17a2b8;
        border-radius: 4px;
      }
    }
    .item--selected--wrap{
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      .item--selected{
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 140px;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 400;
        color: #374151;
        border: 1px solid #eaecf0;
        background-color: #f3f4f6;
        button{
          color: #9aa0aa;
          cursor: pointer;
          font-size: 10px;
        }
      }
    }
  }
  //  챌린지 등록, 퀘스트 등록에서 공통 사용 : E
  .round--add--btn{
    text-align: center;
    margin-top: 16px;
    border-radius: 6px;
    width: 100%;
    border: 1px dashed #17a2b8;
    padding: 12px;
    color: #17a2b8;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
  }

  .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);
  }

  .txt--btn{
    color: #3c80f2;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
  }

  .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-actions{
    display: flex;
    margin-left: auto;
    gap: 12px;
  }

  .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;

      }
    }
    .admin--filter-radio{
      display: flex;
      gap: 6px;
      .filter--btn{
        width: 64px;
        font-weight: 400;
        min-width: 60px;
        padding: 12px 0;
        color: #1a2b4a;
        transition: all 0.15s ease;
        &.is-active{
          background: var(--admin-accent-primary);
          color: #fff;
          border-color: var(--admin-accent-primary);
        }
      }
    }
  }

  // 검색 박스 내 모든 select, input 통일된 스타일
  .admin--search-select,
  .admin--form-select,
  .admin--form-input,
  .admin--search-input {
    border: 1px solid #e8eaef !important;
    min-width: 140px;
    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--top--text{
  color: #666b75;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
}

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

.admin--table--count{
  color: #666b75;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 20px;
}

.admin--table {
  &.fish--table{
    // 챌린지&퀘스트 어종관리 테이블
    // 인라인 수정 콘텐츠가 많아 패딩 간격 줄임
    th, td{
      padding: 14px 8px!important;
    }
  }
  // 테이블 안 체크박스 — SVG 체크/대시
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #cbd5e0;
    border-radius: 4px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;

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

    &:focus-visible {
      outline: 2px solid rgba(26, 35, 50, 0.25);
      outline-offset: 1px;
    }

    &:checked {
      background-color: #fff;
      border-color: var(--admin-accent-primary);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8L6.75 11.25L12.5 5.25' stroke='%231A2332' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    &:indeterminate {
      background-color: #fff;
      border-color: var(--admin-accent-primary);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8h8' stroke='%231A2332' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    }

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

  width: 100%;
  border-collapse: collapse;

  .input--wrap{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  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);
        }
      }

      &.admin--table-row-new {
        background: #fffbe6;
        td {
          padding: 8px!important;
        }
        .admin--range-cell{
          gap: 8px;
          display: flex;
          align-items: center;
          color: #a8adb8;
          font-size: 11px;
          font-weight: 400;
          input{
            text-align: center;
          }
        }
      }
    }

    // 인라인 input (테이블 셀 안에서 편집)
    .admin--inline-input {
      width: 100%;
      color: #333;
      padding: 12px 8px;
      font-size: 13px;
      font-weight: 500;
      border: 1px solid #e8eaef;
      border-radius: 4px;
      background: #fff;
      &.center{
        text-align: center;
      }
      &:focus {
        outline: none;
        border-color: var(--admin-accent-primary) !important;
      }
      // number 입력 spinner(증감 화살표) 제거
      &[type="number"] {
        -moz-appearance: textfield;
        appearance: textfield;
        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
      }
      &.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;
      }
    }

    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;
      }
      &.point{
        color: #e85d3f;
        font-weight: 700;
      }
    }

    .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;
    }
  }

  input[type=checkbox]{
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 1px solid #c8d5e6;
    border-radius: 3px;
    background-color: #fff;
    appearance: none;
    &:checked{
      
    }
  }
}

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

  &.admin--badge-sus{
    background-color: #fff0ec;
    color: var(--admin-red);
  }

  &.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--badge-hidden {
    color: #fff;
    background-color: #6b7280;
  }

  &.admin--badge-recruiting{
    background-color: #FFF0EC;
    color: #e85c3f;
  }

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

  // 슈퍼 관리자 전용 — 진한 살구/골드 톤 + 진한 글씨
  &.admin--badge-super {
    color: #fff;
    background-color: var(--admin-accent-primary);
  }

  // 메뉴 권한 칩 (관리자 list — admin/field/fishing 등)
  &.admin--badge-perm {
    background: #eef2ff;
    color: #4f46e5;
    border: 1px solid #e0e7ff;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
  }

  // 권한 칩 +N 더보기
  &.admin--badge-more {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 700;
  }

  &.item--ticket{
    background-color: #E8F0FE;
    color: #3c80f2;
  }

  &.item--point{
    color: #e85d3f;
    background-color: #FFF8DE;
  }

  &.item--badge{
    color: #2DB672;
    background-color: #E8F7ED;
  }
}

// 작은 버튼
.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;

  &.mw--0{
    min-width: 0;
  }

  &.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;

  &:hover {
    background: #185c37;
  }
}

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

  .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;
      border-top: none;
      margin-top: 0;
      .admin--btn {
        width: 100%;
      }
    }

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

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

    .admin--form--table{
      tr{
        &:first-child{
          border-top: none;
          th{
            padding-top: 0;
          }
        }
        &:last-child{
          border-bottom: none;
        }
      }
      th{
        padding: 24px 0 0 0;
      }
      td{
        padding: 12px 0 24px 0;
      }
    }
  }
  .admin--search-box{
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px;
  }
}

// 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: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--admin-text-primary);
  font-size: 14px;
  cursor: pointer;

  // 테이블 체크박스와 동일한 SVG 스타일
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px!important;
    height: 18px!important;
    margin: 0;
    border: 1.5px solid #cbd5e0;
    border-radius: 4px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;

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

    &:focus-visible {
      outline: 2px solid rgba(26, 35, 50, 0.25);
      outline-offset: 1px;
    }

    &:checked {
      background-color: #fff;
      border-color: var(--admin-accent-primary);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8L6.75 11.25L12.5 5.25' stroke='%231A2332' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    &:indeterminate {
      background-color: #fff;
      border-color: var(--admin-accent-primary);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8h8' stroke='%231A2332' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    }

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

  span {
    user-select: none;
  }

  &:hover {
    opacity: 0.8;
  }
}

// 메뉴 권한 체크박스 그리드 — 페이지에 가득 차게 배치
.admin--permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 24px;
  padding: 16px;
  background: #F8F9FB;
  border: 1px solid #E8EAEF;
  border-radius: 6px;
}

// 마진 유틸리티
.mb--8  { margin-bottom: 8px; }
.mb--16 { margin-bottom: 16px; }

// 권한 칩 가로 정렬 (한 줄 고정, 넘침 방지)
.admin--perm-list {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  align-items: center;
}

// 비활성/안내 유틸
.is-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
}
.txt--muted {
  color: var(--admin-text-muted, #8a93a3);
  font-size: 13px;
}

// 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;
}

// 다른 모달 위에 떠야 하는 알림/확인 (AdminAlertModal 전용)
.admin--alert-overlay {
  z-index: 10010;
}

.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;
  }
}

// 폼 형식 모달 (비밀번호 변경 등) — 헤더 primary, 본문 form input
.admin--form-modal {
  min-width: 440px;
  max-width: 520px;
  overflow: hidden;
  border-radius: 10px;

  .admin--modal-header {
    background: var(--admin-accent-primary);
    border-bottom: none;
    padding: 18px 22px;

    h4 {
      color: var(--admin-yellow, #ffd84d);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.2px;
      margin: 0;
    }
  }

  .admin--modal-close {
    color: var(--admin-yellow, #ffd84d);
    font-size: 26px;
    line-height: 1;
    opacity: 0.9;

    &:hover {
      color: #fff;
      opacity: 1;
    }
  }

  .admin--modal-body {
    padding: 24px 22px 8px;

    .admin--modal-target {
      margin: 0 0 18px;
      padding: 12px 14px;
      background: #f6f7fb;
      border-radius: 6px;
      font-size: 13px;
      color: #555;

      strong {
        margin-left: 8px;
        color: var(--admin-accent-primary);
        font-weight: 700;
      }
    }

    .admin--form-field {
      margin-bottom: 16px;
    }

    .admin--form-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #333;
      margin-bottom: 6px;
    }

    .admin--form-input {
      width: 100%;
      padding: 12px 14px;
      font-size: 14px;
      border: 1px solid #e2e5ec;
      border-radius: 6px;
      background: #fff;
      color: #333;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;

      &::placeholder {
        color: #b2b6bd;
      }

      &:focus {
        outline: none;
        border-color: var(--admin-accent-primary);
        box-shadow: 0 0 0 3px rgba(26, 35, 50, 0.08);
      }
    }
  }

  .admin--modal-footer {
    padding: 16px 22px 22px;
    border-top: none;
    gap: 8px;
    display: flex;
    align-items: center;

    // 모달 안 버튼 — 글로벌 .admin--btn 정의가 .admin--form 안에 nested돼있어 여기서 별도 정의
    .admin--btn {
      padding: 10px 22px;
      min-width: 96px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      background: #fff;
      border: 1px solid #d8dce4;
      color: #555b66;
      transition: all 0.18s ease;

      &:hover:not(:disabled) {
        background: #f4f6f9;
        border-color: #b9bfc9;
        color: #333;
      }

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

    // 강조 버튼 (확인/저장/변경 등)
    .admin--btn-red,
    .admin--btn-primary-fill {
      background: var(--admin-accent-primary);
      border-color: var(--admin-accent-primary);
      color: var(--admin-yellow, #ffd84d);

      &:hover:not(:disabled) {
        background: var(--admin-accent-hover, #0f1a2c);
        border-color: var(--admin-accent-hover, #0f1a2c);
        color: #fff;
      }
    }

    // 위험 액션용 (실제 삭제 같은 거)
    .admin--btn-danger {
      background: #e85d3f;
      border-color: #e85d3f;
      color: #fff;

      &:hover:not(:disabled) {
        background: #d24a2c;
        border-color: #d24a2c;
      }
    }
  }

  // alert/confirm 용 텍스트 박스
  .admin--alert-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #333;
    text-align: left;
    white-space: pre-line; // \n 줄바꿈 표시
  }
}

.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;
}

.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--quest--tab--wrap{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
  .tab--wrap {
    position: relative;
    display: inline-flex;
    padding: 4px;
    background: #f8f9fb;
    border-radius: 8px;
    border: 1px solid #e8eaef;
    user-select: none;
  
    // 슬라이드 인디케이터 — 활성 탭 배경
    .quest--tab__indicator {
      position: absolute;
      top: 4px;
      bottom: 4px;
      left: 4px;
      background-color: #fff;
      width: calc(50% - 4px);
      border: 1px solid #e8eaef;
      border-radius: 6px;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); // bouncy easing
      z-index: 0;
    }
  
    // 우측으로 이동 (챌린지 연동 활성)
    &.is-right .quest--tab__indicator {
      transform: translateX(100%);
    }
  
    .quest--tab {
      position: relative;
      z-index: 1;
      padding: 10px 28px;
      min-width: 140px;
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      color: #666b75;
      transition: color 0.25s ease;
      text-align: center;
  
      &.is-active {
        font-weight: 700;
        color: #1a2b4a;
      }
    }
  }
  >p{
    display: flex;
    gap: 8px;
    align-items: center;
    color: #666b75;
    font-size: 13px;
    span{
      display: inline-flex;
      line-height: 1;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background-color: #e8f0fe;
    }
  }
}

.admin--form--table{
  width: 100%;
  color: #666b75;
  font-weight: 400;
  font-size: 12px;
  p{
    color: #666b75;
    font-weight: 400;
    font-size: 12px;
    &.yellow--desc{
      border-radius: 4px;
      width: fit-content;
      padding: 4px 12px;
      color: #1a2b4a;
      background-color: #fff8de;
    }
    &.green--desc{
      padding: 4px 12px;
      background-color: #E8F7ED;
      color: #2db672;
      font-weight: 600;
      width: fit-content;
    }
  }
  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--60{
          width: 60px;
        }
        &.w--120{
          width: 120px;
        }
        &.w--160{
          width: 160px;
        }
        &.w--200{
          width: 200px;
        }
        &.w--240{
          width: 240px;
        }
        &.w--300{
          width: 300px;
        }
        &.center{
          text-align: center;
        }
      }
      input[type=radio]{
        appearance: none;
        width: 18px;
        height: 18px;
        border: 1.5px solid #c8d5e6;
        border-radius: 50%;
        &:checked{
          border: 5px solid #3C80F2;
        }
      }
    }
  }

  // 테이블 내 테이블 (퀘스트 등록)
  .admin--inner--table--wrap{
    margin-top: 12px;
    margin-bottom: 12px;
    .quest--step--wrap{
      display: flex;
      justify-content: center;
      gap: 6px;
      align-items: center;
      button{
        width: 40px;
        height: 32px;
        color: #666b75;
        font-size: 12px;
        font-weight: 400;
        border-radius: 4px;
        border: 1px solid #c8d5e6;
        &.active{
          background-color: #3c80f2;
          color: #fff;
          font-weight: 700;
        }
      }
    }
    .item--select--wrap{
      .item--select--btn--wrap{
        justify-content: center;
        gap: 12px;
        align-items: center;
      }
    }
    .quest--add--btn{
      button{
        text-align: center;
        width: 100%;
        margin-top: 6px;
        border-radius: 4px;
        border: 1px dashed #c8d5e6;
        background-color: #f8f9fb;
        padding: 12px 0;
        color: #3c80f2;
        font-size: 13px;
        cursor: pointer;
        font-weight: 600;
      }
    }
    .place--select--wrap{
      .place--select--btn--wrap{
        position: relative;
        .all--place--wrap{
          position: absolute;
          z-index: 8;
          margin-top: 0;
          top: 52px;
          left: 0;
        }
      }
    }
  }
  .admin--quest--table{
    width: 100%;
    tr{
      th, td{
        padding: 14px 8px;
        text-align: center;
        .admin--form-select{
          height: 40px;
          line-height: 1;
          width: 120px;
          &.place--select{
            height: auto;
          }
        }
      }
    }
  }
}

.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;
      }
    }
  }
  &.bg--white{
    background-color: #fff;
    border: 1px solid var(--admin-border-color);
    h3{
      color: #1a2b4a;
      margin-bottom: 15px;
      padding-bottom: 13px;
      border-bottom: 1px solid var(--admin-border-color);
    }
  }
  .item--info--box{
    display: flex;
    gap: 24px;
    justify-content: space-between;
    .item--info{
      display: flex;
      flex-direction: column;
      width: 33.3333%;
      .item--badge{
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        width: fit-content;
        line-height: 1;
        background-color: #E8F0FE;
        border-radius: 12px;
        color: #3c80f2;
      }
      p{
        margin: 8px 0;
        color: #666b75;
        font-size: 12px;
        font-weight: 400;
      }
      span{
        color: #3c80f2;
        font-weight: 600;
        font-size: 12px;
        font-weight: 600;
      }
      &:nth-child(2){
        .item--badge{
          color: #e85d3f;
          background-color: #FFF8DE;
        }
        span{
          color: #e85d3f;
        }
      }
      &:nth-child(3){
        .item--badge{
          color: #2DB672;
          background-color: #E8F7ED;
        }
        span{
          color: #2DB672;
        }
      }
    }
  }
}
.admin--inf--box{
  margin-top: 16px;
  background-color: #F8F9FB;
  h3{
    color: #666B75;
  }
}

.item--thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e8eaef;
  margin: 0 auto;
}
.item--thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

// 선상 & 낚시터 사진 추가
.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;
}

// ============================================
// Toast (어드민 공통 하단 중앙 알림)
// ============================================
.admin--toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 480px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #ecfdf5;
  color: #166534;
  border: 1px solid #86efac;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;

  &.is-error {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fca5a5;
  }

  .admin--toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: currentColor;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    &::before { content: '✓'; }
  }
  &.is-error .admin--toast-icon::before { content: '!'; }

  .admin--toast-msg {
    flex: 1;
    color: inherit;
  }

  .admin--toast-close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    padding: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
    &:hover { opacity: 1; }
  }
}

.admin--toast-enter-active,
.admin--toast-leave-active {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.admin--toast-enter-from,
.admin--toast-leave-to {
  transform: translate(-50%, 140%);
  opacity: 0;
}
.admin--toast-enter-to,
.admin--toast-leave-from {
  transform: translate(-50%, 0);
  opacity: 1;
}

.admin--place--btn--wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  .admin--pagination{
    margin-top: 0;
  }
  .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;
    }
  }
}


// ===========================================
// 반응형 정책
//   * 1601px 이상: 자연스러운 레이아웃
//   * 769px ~ 1600px: 1600px 고정 → 가로 스크롤
//   * 768px 이하: 모바일 (사이드바 햄버거 토글)
// ===========================================

// 햄버거 메뉴 토글 (기본 데스크탑에선 숨김)
.admin--mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--admin-text-primary);
  padding: 6px 10px;
  margin-right: 6px;
  line-height: 1;
}

// 모바일 사이드바 백드롭 (기본 숨김)
.admin--sidebar-backdrop {
  display: none;
}

// ============================================
// number input spinner (증감 화살표) 전역 제거
// ============================================
.admin--form-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;

  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

// ============================================
// 챌린지 디테일 - 메인 탭 (챌린지/신청자/참가자 관리)
// ============================================
.admin--main-tabs {
  display: flex;
  gap: 0;
  border-bottom: 3px solid var(--admin-accent-primary);
  margin-bottom: 24px;

  button {
    padding: 14px 32px;
    border-bottom: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin-right: -1px;
    border-radius: 8px 8px 0 0;
    transition: all 0.15s ease;

    &:hover {
      background: #fff;
      color: #1f2937;
    }

    &.is-active {
      background: var(--admin-accent-primary, #bb0a30);
      color: #fff;
      border-color: var(--admin-accent-primary, #bb0a30);
      position: relative;
      z-index: 1;
    }
  }
}

.admin--placeholder {
  padding: 80px 24px;
  text-align: center;
  font-size: 16px;
  color: #4b5563;
  background: #fff;
  border: 1px dashed #d1d5db;
  border-radius: 12px;

  p:first-child {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
  }
}

// ============================================
// 챌린지 디테일 - 라운드 탭
// ============================================
.admin--round--tabs {
  display: flex;
  border-bottom: 2px solid #eaecf0;
  margin-bottom: 12px;
}

.admin--round--tab {
  position: relative;
  padding: 12px 22px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #808791;
  display: inline-flex;
  align-items: center;
  transition: all 0.15s ease;

  &:hover {
    color: #000;
    font-weight: 600;
  }

  &.is-active {
    color: #000;
    font-weight: 600;
    border-bottom-color: #17A2B8;
  }

  .admin--round--tab__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: #9ca3af;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
  }
}

// ============================================
// 챌린지 등록 - 아이템 선택 모달
// ============================================
.admin--item-modal {
  min-width: 640px !important;
  max-width: 820px !important;
  width: 90vw;

  .admin--modal-body {
    padding: 20px 22px;
    max-height: 65vh;
    overflow-y: auto;
  }

  &__search {
    input {
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid #d1d5db;
      font-size: 14px;

      &:focus {
        outline: none;
        border-color: var(--admin-accent-primary, #bb0a30);
        box-shadow: 0 0 0 3px rgba(187, 10, 48, 0.1);
      }
    }
  }

  &__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }

  &__card {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.15s ease;
    cursor: pointer;
    position: relative;

    &:hover {
      border-color: #9ca3af;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    &.is-selected {
      border-color: var(--admin-accent-primary, #bb0a30);
      background: rgba(187, 10, 48, 0.04);
      box-shadow: 0 4px 12px rgba(187, 10, 48, 0.15);

      .admin--item-modal__name {
        color: var(--admin-accent-primary, #bb0a30);
      }
    }

    label {
      display: block;
      padding: 12px 12px 14px;
      cursor: pointer;
      margin: 0;
    }

    input[type="checkbox"] {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: var(--admin-accent-primary, #bb0a30);
      z-index: 2;
    }
  }

  &__thumb {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

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

  &__no-img {
    font-size: 36px;
    opacity: 0.35;
    line-height: 1;
  }

  &__name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    text-align: center;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  &__type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
  }

  &__point {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(187, 10, 48, 0.1);
    color: var(--admin-accent-primary, #bb0a30);
    font-size: 12px;
    font-weight: 700;
  }

  &__empty {
    padding: 60px 20px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
  }

  &__count {
    font-size: 13px;
    color: #4b5563;
    font-weight: 600;

    &::before {
      content: '✓ ';
      color: var(--admin-accent-primary, #bb0a30);
    }
  }
}

// 모바일 대응
@media (max-width: 768px) {
  .admin--item-modal {
    min-width: 0 !important;
    width: 95vw;

    &__grid {
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 8px;
    }

    &__card label {
      padding: 8px 8px 10px;
    }

    &__name {
      font-size: 13px;
    }
  }
}

// 1600px 이하 — 가로 스크롤 (어드민 영역에만 적용)
@media (max-width: 1600px) and (min-width: 769px) {
  .admin--layout {
    min-width: 1600px;
  }
  .admin--main{
    margin-left: 0;
  }
  .admin--header{
    position: absolute;
    width: 1360px;
  }
  .admin--sidebar{
    position: static;
    margin-top: -64px;
  }
}

// 768px 이하 — 모바일
@media (max-width: 768px) {
  body {
    min-width: 0;
    overflow-x: hidden;
  }



  .admin--layout {
    min-width: 0;
  }

  .admin--mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  // 헤더 — 사이드바 너비 무시, 풀폭
  .admin--header {
    left: 0 !important;
    padding: 0 12px;
    height: 56px;

    .admin--header-left {
      display: flex;
      align-items: center;
      flex-direction: row;
      gap: 4px;

      h1 {
        font-size: 16px;
      }
    }

    .admin--breadcrumb {
      display: none;
    }
  }

  // 사이드바 — 슬라이드 인 패널
  .admin--sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 9001;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);

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

  // 백드롭 (사이드바 열렸을 때 본문 클릭으로 닫기)
  .admin--sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9000;
  }

  .admin--main {
    margin-left: 0 !important;
    padding: 16px 12px 80px 12px;
    min-width: 0; // flex item이 자식 따라 늘어나지 않게 → wrapper의 overflow-x가 동작
  }

  .admin--search-box{
    .admin--search-form{
      .admin--filter-radio{
        width: 100%;
        button{
          flex: 1;
          width: calc(100% / 4);
          min-width: 0;
        }
      }
    }
  }

  // 검색/액션 줄바꿈
  .admin--search-form,
  .admin--search-actions,
  .admin--search--inner--box {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .admin--search--inner--box{
    flex-direction: column-reverse;
    flex-wrap: wrap;
    gap: 12px!important;
    align-items: start!important;
  }
  .admin--datepicker{
    flex: 1;
    input:read-only{
      min-width: 0;
      width: 100%;
    }
  }

  .admin--quick-range{
    width: 100%;
    .range--btn{
      min-width: 0!important;
      width: calc(100% / 6)!important;
      flex: 1;
    }
  }

  // 테이블 — 가로 스크롤
  .admin--table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin--table {
    min-width: 900px;
    &.fishing--table{
      min-width: 1200px;
    }
    &.fish--table{
      min-width: 1200px;
      tbody{
        tr{
          td{
            padding: 14px 4px!important;
            &:first-child{
              padding-left: 8px!important;
            }
            &:last-child{
              padding-right: 8px!important;
            }
            .admin--range-cell{
              gap: 4px;
            }
          }
          &.admin--table-row-new{
            .admin--range-cell{
              gap: 4px;
            }
            td{
              padding: 14px 4px!important;
              &:first-child{
                padding-left: 8px!important;
              }
              &:last-child{
                padding-right: 8px!important;
              }
            }
          }
        }
      }
    }
  }

  // 폼 테이블 — 셀 stack
  .admin--form--table {
    th,
    td {
      display: block;
      width: 100% !important;
      box-sizing: border-box;
    }
    th {
      padding-bottom: 4px;
      background: transparent;
    }
    td {
      min-width: 0;          // flex 자식이 부모 넘지 않게
      overflow: hidden;

      .input--wrap {
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;

        input,
        select,
        textarea,
        .admin--form-input,
        .admin--form-select,
        .admin--form-textarea {
          width: 100%;
          max-width: 100%;
          box-sizing: border-box;
        }
      }

      // 고정 width 클래스(w--280, w--160 등) 무력화 — 모바일에선 풀폭
      .w--80,
      .w--100,
      .w--120,
      .w--140,
      .w--160,
      .w--200,
      .w--280 {
        width: 100% !important;
        max-width: 100%;
        flex: 1 1 100%;
      }
    }
  }

  // 모달 가로폭
  .admin--alert-modal {
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 16px;
  }

  // 페이지네이션
  .admin--pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}