// -----------------------------------------------------------------------------
// Header styles - Modern & Responsive Design
// -----------------------------------------------------------------------------

// CSS Variables for modern header styling
:root {
  // Enhanced color palette from design
  --primary-blue: #4B9BFF;
  --secondary-blue: #2E7FF7;
  --accent-cyan: #00D4FF;
  --accent-yellow: #FFD93D;
  --accent-orange: #FF6B6B;
  --accent-green: #6BCF7F;
  --accent-purple: #A78BFA;

  // Base colors
  --text-dark: #1A1A2E;
  --text-gray: #64748B;
  --text-light: #94A3B8;
  --white: #FFFFFF;
  --gray-bg: #F8FAFC;
  --light-bg: #EFF6FF;
  --border-gray: #E2E8F0;

  // Shadows
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(75, 155, 255, 0.1);
  --shadow-lg: 0 8px 24px rgba(75, 155, 255, 0.15);
  --shadow-xl: 0 16px 40px rgba(75, 155, 255, 0.2);
}

// Blind text for screen readers
.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

// ===========================
// Modern Header Structure
// ===========================
.global-header {
  position: relative;
  background-color: #ffffff;
  z-index: $z-index-header;
  height: 112px;
  transition: all 0.3s ease;
  border-bottom: 1px solid #dddddd;

  // Index page header with light blue background
  &.index-header {
    background-color: #E5F8FF;
  }
  .container {
    height: 100%;

    .header-content {
      height: 100%;
    }
  }
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 20px;
}

// ===========================
// Header Layout Components
// ===========================

// Header Left Section
.header-left {
  display: flex;
  align-items: center;

  .logo {
    height: 22px;
    width: 114px;
  }
}

// Logo Wrapper
.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

// Logo with modern styling
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 22px;
  z-index: 10;

  a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    text-decoration: none;
  }

  img {
    height: 22px;
    width: 114px;
  }
}

.logo-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;

  // When logo-text is a link
  &:hover {
    color: var(--primary-blue);
  }

  &:visited {
    color: var(--text-dark);
  }
}

// Logo link styles
.logo-link,
.mobile-logo-link,
.drawer-logo-link {
  display: inline-block;
  text-decoration: none;
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.05);
  }

  img {
    display: block;
  }
}

// Header Right Section
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

// Search Button
.search-btn {
  width: 40px;
  height: 40px;
  background: var(--gray-bg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-gray);
  transition: all 0.3s ease;

  &:hover {
    background: var(--light-bg);
    color: var(--primary-blue);
    transform: scale(1.1);
  }
}

// ===========================
// Desktop/Mobile Layout Control
// ===========================
.desktop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  @media (max-width: 768px) {
    display: none;
  }
}

.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  @media (max-width: 768px) {
    display: flex;
  }
}

// ===========================
// Mobile Header Components (Figma Design)
// 375px 기준 반응형 - clamp() 사용하여 화면 크기에 비례
// ===========================
.mobile-left {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.13vw, 12px);

  .mobile-logo-link {
    display: flex;
    align-items: center;
  }

  .mobile-logo {
    // Figma: 로고 이미지 - 375px 기준 16px
    // 16/375*100 ≈ 4.27vw, 범위: 16px ~ 24px
    height: clamp(16px, 4.27vw, 24px);
    width: auto;
    object-fit: contain;
  }

  .mobile-logo-text {
    font-family: $font-family-primary;
    font-size: clamp(14px, 3.73vw, 18px);
    font-weight: 700;
    color: #212529;
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      color: #0049B4;
    }
  }
}

.mobile-center {
  // Figma: API Portal 텍스트 숨김 (로고에 포함)
  display: none;

  .mobile-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
  }
}

.mobile-right {
  display: flex;
  align-items: center;

  .mobile-menu-btn {
    // Figma: 24x24px 터치 영역, 16x16px 아이콘
    // 375px 기준 반응형 - clamp() 사용
    // 24/375*100 ≈ 6.4vw, 범위: 24px ~ 32px
    width: clamp(24px, 6.4vw, 32px);
    height: clamp(24px, 6.4vw, 32px);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // 3/375*100 ≈ 0.8vw, 범위: 3px ~ 5px
    gap: clamp(3px, 0.8vw, 5px);
    // 4/375*100 ≈ 1.07vw, 범위: 4px ~ 6px
    padding: clamp(4px, 1.07vw, 6px);
    border-radius: 4px;
    transition: background-color 0.3s ease;

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

    .hamburger-line {
      // Figma: 햄버거 라인 스타일 - 375px 기준 16px
      // 16/375*100 ≈ 4.27vw, 범위: 16px ~ 22px
      width: clamp(16px, 4.27vw, 22px);
      height: 2px;
      background: #515961;
      transition: all 0.3s ease;
      border-radius: 1px;
    }

    &.active {
      .hamburger-line {
        &:nth-child(1) {
          transform: rotate(45deg) translateY(5px);
        }
        &:nth-child(2) {
          opacity: 0;
        }
        &:nth-child(3) {
          transform: rotate(-45deg) translateY(-5px);
        }
      }
    }
  }
}

// ===========================
// Mobile Drawer/Modal (Figma Design)
// ===========================
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;

  &.active {
    visibility: visible;
    opacity: 1;

    .drawer-content {
      transform: translateY(0);
    }
  }

  .drawer-overlay {
    display: none;
  }

  .drawer-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  // Figma: 헤더 바 44px (로고 + 홈/닫기 버튼)
  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    min-height: 44px;
    padding: 0 16px 0 20px;
    background: #ffffff;

    .drawer-header-left {
      display: flex;
      align-items: center;
      gap: clamp(8px, 2.13vw, 12px);

      .drawer-logo-link {
        display: flex;
        align-items: center;
      }

      .drawer-logo {
        height: clamp(16px, 4.27vw, 24px);
        width: auto;
        object-fit: contain;
      }

      .drawer-logo-text {
        font-family: $font-family-primary;
        font-size: clamp(14px, 3.73vw, 18px);
        font-weight: 700;
        color: #212529;
        text-decoration: none;
        white-space: nowrap;
      }
    }

    .drawer-header-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .drawer-home-btn {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;

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

      &:hover {
        opacity: 0.7;
      }
    }

    .drawer-close {
      width: 24px;
      height: 24px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;

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

      &:hover {
        opacity: 0.7;
      }
    }
  }

  // Figma: 환영 영역 (비로그인: 214px, 로그인: 138px), 배경 #ebfbff
  .drawer-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 214px;
    padding: 40px 20px;
    background: #ebfbff;
    border-bottom: 1px solid #dadada;

    // Figma: 유저 아이콘 (비로그인: 기존, 로그인: 56px)
    .welcome-user-icon {
      margin-bottom: 12px;

      img {
        width: 56px;
        height: 56px;
      }
    }

    // 비로그인: 로그인 해 주세요 텍스트
    .welcome-login-prompt {
      font-family: $font-family-primary;
      font-size: 16px;
      font-weight: 700;
      color: #212529;
      line-height: 26px;
      margin: 0 0 8px 0;
      text-align: center;
    }

    .welcome-text {
      font-family: $font-family-primary;
      font-size: 14px;
      font-weight: 400;
      color: #212529;
      line-height: 26px;
      margin: 0 0 24px 0;
      text-align: center;
    }

    .welcome-buttons {
      display: flex;
      gap: 21px;
      width: 100%;
      max-width: 309px;
    }

    // Figma: 회원가입 버튼 - #e5e7eb 배경, #5f666c 텍스트
    .btn-drawer-signup {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      background: #e5e7eb;
      color: #5f666c;
      font-family: $font-family-primary;
      font-size: 14px;
      font-weight: 700;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.3s ease;

      &:hover {
        background: #d1d5db;
      }
    }

    // Figma: 로그인 버튼 - #0049b4 배경, 흰색 텍스트
    .btn-drawer-login {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      background: #0049b4;
      color: #ffffff;
      font-family: $font-family-primary;
      font-size: 14px;
      font-weight: 700;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.3s ease;

      &:hover {
        background: darken(#0049b4, 10%);
      }
    }

    // Figma: 로그인 상태 환영 영역 - 138px, 가로 정렬
    &.authenticated {
      flex-direction: row;
      min-height: 138px;
      padding: 40px 54px;
      gap: 16px;
      justify-content: flex-start;

      .welcome-user-icon {
        margin-bottom: 0;
        flex-shrink: 0;
      }

      .welcome-user-info {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      // Figma: 회원명 16px Bold
      .welcome-user-name {
        font-family: $font-family-primary;
        font-size: 16px;
        font-weight: 700;
        color: #212529;
        line-height: 22px;
        margin: 0;
      }

      .welcome-text {
        margin: 0;
        text-align: left;
      }
    }
  }

  // Figma: 하단 로그아웃 버튼 영역
  .drawer-footer {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    background: #ffffff;
    border-top: 1px solid #dadada;

    .drawer-logout-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 10px;
      background: transparent;
      border: none;
      cursor: pointer;
      text-decoration: none;

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

      span {
        font-family: $font-family-primary;
        font-size: 14px;
        font-weight: 500;
        color: #0049b4;
        line-height: 18px;
      }

      &:hover {
        opacity: 0.8;
      }
    }
  }

  // Figma: 메뉴 리스트 (아코디언)
  .drawer-nav {
    flex: 1;
    padding: 0 20px;
    background: #ffffff;

    .drawer-menu-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .drawer-menu-item {
      border-bottom: 1px solid #dadada;

      // Figma: 메뉴 버튼 56px 높이
      .drawer-menu-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 56px;
        padding: 0 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        font-family: $font-family-primary;
        font-size: 16px;
        font-weight: 500;
        color: #212529;
        text-align: left;

        .accordion-icon {
          transition: transform 0.3s ease;
        }
      }

      // Figma: 서브메뉴 - 배경 #fafafa
      .drawer-submenu {
        display: none;
        list-style: none;
        margin: 0;
        padding: 12px 0;
        background: #fafafa;

        li {
          a {
            display: block;
            padding: 8px 16px 8px 57px;
            font-family: $font-family-primary;
            font-size: 14px;
            font-weight: 500;
            color: #212529;
            text-decoration: none;
            line-height: 28px;
            transition: color 0.3s ease;

            &:hover {
              color: #0049b4;
            }
          }

          // 두 번째 항목부터 Regular
          &:not(:first-child) a {
            font-weight: 400;
            color: #515151;
          }
        }
      }

      // 열린 상태
      &.open {
        .drawer-menu-btn {
          font-weight: 700;

          .accordion-icon {
            transform: rotate(180deg);
          }
        }

        .drawer-submenu {
          display: block;
        }
      }
    }
  }
}

.btn-mobilemenu {
  position: absolute;
  right: $spacing-md;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: $z-index-modal + 1; // Above the nav

  span {
    display: block;
    width: 24px;
    height: 2px;
    background: $text-dark;
    position: relative;
    transition: all $transition-fast;
    text-indent: -9999px;

    &::before,
    &::after {
      content: '';
      position: absolute;
      left: 0;
      width: 24px;
      height: 2px;
      background: $text-dark;
      transition: all $transition-fast;
    }

    &::before { top: -8px; }
    &::after { top: 8px; }
  }

  &.on span {
    background: transparent;
    &::before { top: 0; transform: rotate(45deg); }
    &::after { top: 0; transform: rotate(-45deg); }
  }
}

// ===========================
// Unified Navigation (Mobile-First)
// ===========================
.main-nav.m-nav {
  // Mobile: Off-canvas menu
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: $white;
  z-index: $z-index-modal;
  right: -100%; // Initial state for JS animation
  transition: none; // JS handles animation
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  // The JS will directly manipulate the 'right' property, not toggle a class for this element.
  // So, no .active or .on state here for the main nav panel.

  .nav-header {
    padding: $spacing-lg;
    background: $gray-bg;
    border-bottom: 1px solid $border-gray;
  }

  .nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex-grow: 1;

    .nav-item {
      border-bottom: 1px solid $border-gray;

      > a {
        display: flex;
        align-items: center;
        padding: $spacing-lg;
        color: $text-dark;
        font-size: $font-size-md;
        font-weight: $font-weight-medium;
        text-decoration: none;
        position: relative;
      }

      &.has-submenu > a::after {
        content: '';
        position: absolute;
        right: $spacing-lg;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid $text-gray;
        border-bottom: 2px solid $text-gray;
        transform: translateY(-50%) rotate(45deg);
        transition: transform $transition-fast;
      }

      &.expanded > a::after {
        transform: translateY(-25%) rotate(-135deg);
      }

      .sub-menu {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        background: $gray-bg;

        a {
          display: block;
          padding: $spacing-md $spacing-lg $spacing-md ($spacing-lg * 2);
          color: $text-gray;
          font-size: $font-size-sm;
          text-decoration: none;

          &:hover {
            background: $white;
            color: $primary-blue;
          }
        }
      }

      &.expanded .sub-menu {
        display: block;
      }
    }
  }

  .info_wrap {
    padding: $spacing-xl $spacing-lg;
    background: $white;
    border-top: 1px solid $border-gray;
    margin-top: auto;
    // styles for tit1, tit2...
  }
}

// ===========================
// Modern Navigation Menu
// ===========================
.nav-menu {
  display: flex;
  list-style: none;
  gap: 8px;
  margin: 0;
  padding: 0;

  // Navigation item with submenu
  > li {
    position: relative;

    &.submenu-open {
      > .nav-link {
        background: var(--light-bg);
        color: var(--primary-blue);
      }

      .sub-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
      }
    }

    .sub-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 200px;
      background: var(--white);
      border: 1px solid var(--border-gray);
      border-radius: $border-radius-lg;
      box-shadow: var(--shadow-xl);
      padding: $spacing-sm 0;
      visibility: hidden;
      opacity: 0;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: $z-index-dropdown;
      list-style: none;
      margin: 0;

      li {
        margin: 0;

        a {
          display: block;
          padding: $spacing-sm $spacing-lg;
          color: var(--text-dark);
          text-decoration: none;
          font-size: $font-size-sm;
          font-weight: $font-weight-medium;
          transition: all 0.3s ease;

          &:hover {
            background: var(--light-bg);
            color: var(--primary-blue);
          }
        }
      }
    }
  }
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  font-size: 18px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;

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

.nav-icon {
  font-size: 18px;
}

.signup-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--white);
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
}

// ===========================
// Desktop Navigation Styles
// ===========================
@include respond-to('desktop') {
  .m-only { display: none !important; }
  .pc-only { display: block !important; }

  .btn-mobilemenu { display: none; }

  .main-nav.m-nav {
    position: static;
    right: auto;
    transition: none;
    flex-direction: row;
    align-items: center;
    overflow: visible;
    background: transparent;
    height: 100%;
    flex: 1;

    .nav-header { display: none; }
    .info_wrap { display: none; }

    .nav-list {
      display: flex;
      height: 100%;
      flex-grow: 1;

      .nav-item {
        border-bottom: none;
        position: relative;
        height: 100%;

        > a {
          height: 100%;
          padding: 0 24px;
          color: var(--text-dark);
          font-weight: 500;
          font-size: 15px;
          transition: all 0.3s ease;

          &:hover {
            color: var(--primary-blue);
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 24px;
              right: 24px;
              height: 3px;
              background: var(--primary-blue);
              border-radius: 2px;
            }
          }
        }

        &.has-submenu > a::after { display: none; }
      }
    }
  }
}

// ===========================
// Body Layout Compensation
// ===========================
// body padding-top removed - header is no longer fixed on PC

// ===========================
// Mobile Responsive Design
// 375px 기준 반응형 - clamp() 사용하여 화면 크기에 비례
// ===========================
@media (max-width: 768px) {
  .global-header {
    // Figma: 44px 높이, 반투명 배경
    // 375px 기준 44px → 44/375*100 ≈ 11.73vw, 범위: 44px ~ 60px
    height: clamp(44px, 11.73vw, 60px);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: none;

    .container {
      padding: 0;
      max-width: 100%;
      background-color: #FEFEFE;
    }

    .container .header-content {
      // Figma: 좌 20px, 우 16px 패딩
      // 20/375*100 ≈ 5.33vw, 범위: 20px ~ 28px
      // 16/375*100 ≈ 4.27vw, 범위: 16px ~ 24px
      padding: 0 clamp(16px, 4.27vw, 24px) 0 clamp(20px, 5.33vw, 28px);
      height: clamp(44px, 11.73vw, 60px);
      margin-top: 0;
    }
  }

  // body padding-top removed - header is no longer fixed
}

// ===========================
// Header User Info (Authenticated State)
// ===========================
.header-user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;

  .user-identity {
    display: flex;
    align-items: center;
    gap: 2px;

    .user-icon {
      width: 16px;
      height: 18px;
      display: block;
    }

    .user-name {
      font-family: $font-family-primary;
      font-size: 16px;
      font-weight: 400;
      color: #515961;
      white-space: nowrap;
    }
  }

  .divider {
    font-size: 8px;
    color: var(--text-gray);
    line-height: 1;
  }

  .header-link {
    font-family: $font-family-primary;
    font-size: 16px;
    font-weight: 400;
    color: #515961;
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.3s ease;

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

  .mypage-dropdown {
    position: relative;

    .mypage-toggle {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .mypage-dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 200px;
      background: var(--white);
      border: 1px solid var(--border-gray);
      border-radius: $border-radius-lg;
      box-shadow: var(--shadow-xl);
      padding: $spacing-sm 0;
      visibility: hidden;
      opacity: 0;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: $z-index-dropdown;

      .mypage-menu-list {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          margin: 0;

          a {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: $spacing-sm $spacing-lg;
            color: var(--text-dark);
            text-decoration: none;
            font-size: $font-size-sm;
            font-weight: $font-weight-medium;
            transition: all 0.3s ease;

            i {
              font-size: 14px;
              width: 16px;
              text-align: center;
            }

            &:hover {
              background: var(--light-bg);
              color: var(--primary-blue);
            }
          }
        }
      }
    }

    &.active .mypage-dropdown-menu {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }
  }
}

// Mobile responsive
@media (max-width: 768px) {
  .header-user-info {
    display: none; // Hide on mobile, use drawer instead
  }
}