/* [추가] :root 선택자 - 전역 변수 관리 */
:root {
  --point_color01: #561ba2;
  --point_color02: #d8c1f5;
  --point_color03: #9b1ba2;
  --main_color01: #222;
  --main_color02: #d8c1f5;
}

/* =============================================
   Header Styles
============================================= */
header {
  font-weight: 300;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  right: 0;
  --default_color: #fff; 
  --on_color: #222;
  color: var(--default_color);
  transition: background-color 0.3s, color 0.3s;
  /* [삭제] --point_color... 변수를 :root로 이동 */
  z-index: 99;
}
header :where(a, button) {
  color: var(--default_color);
  transition: color 0.3s;
}
/* Default/Scrolled/Mobile Menu Header Background & Text Color */
header,
header.m_menu {
  --default_color: #222;
  --on_color: #fff;
  background-color: var(--on_color);
}
header .hd_top, /* Separator line color matches text */
header.m_menu .hd_top {
  border-bottom: 1px solid #222;
}
/* Logo image visibility */
header .on,
header.m_menu .on {
  opacity: 1;
}
header .basic,
header.m_menu .basic {
  opacity: 0;
}
/* Language button background matches point color */
header .lang_btn,
header.m_menu .lang_btn {
  background-color: var(--point_color01);
}

/* --- Header Top (.hd_top) --- */
.hd_top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Initial transparent border */
  padding: 30px 0;
  transition: padding 0.3s ease; /* Smooth height change */
}
.hd_inner { /* Centering container */
  width: 100%;
  max-width: 1560px;
  padding: 0 20px;
  margin: 0 auto;
}
/* Logo image switch setup */
header .on { /* Scrolled/Hover logo */
  position: relative;
  z-index: 1;
  transition: 0.3s;
}
header .basic { /* Default logo */
  position: absolute;
  inset: 0;
  opacity: 0; /* Initially hidden */
  transition: 0.3s;
  z-index: 2;
}
header :where(a, button):has(.on) { /* Ensure container keeps space */
  position: relative;
}
/* Logo container */
header .logo_box {
  display: flex;
  align-items: center;
  gap: 50px;
}
header .logo_box .logo_item {
  display: flex;
  align-items: center;
}
header .logo_box img {
  max-width: 140px;
  max-height: 50px;
  object-fit: cover;
}
.hd_top .hd_inner { /* Layout for top bar */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Utility buttons container (Search, Lang) */
header .util_box {
  display: flex;
  align-items: center;
  gap: 15px;
}
header .srh_btn { /* Search button */
  display: flex;
  align-items: center;
  justify-content: center;
}
header .srh_btn > i {
  font-size: 21px;
}
header .srh_btn:hover {
  color: var(--point_color02);
}
header .lang_btn { /* Language button */
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--on_color); /* Text color changes with header */
  background-color: var(--point_color01); /* Background set above */
  height: 26px;
  padding: 0 13px;
  border-radius: 13px;
  font-size: 14px;
  margin-left: 10px;
  min-width: 62px;
}
header .lang_btn > i {
  font-size: 11px;
  padding-bottom: 2px;
}
.lang_wrap { /* Language dropdown container */
  position: relative;
}
.lang_list { /* Language dropdown */
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
}

/* --- Header Bottom (.hd_bot) --- */
.hd_bot {
  transition: padding 0.3s ease; /* Smooth height change */
}
.hd_bot .hd_inner { /* Layout for bottom bar (Nav) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 30px;
  transition: height 0.3s ease; /* Smooth height change */
}
/* Main Navigation */
header nav { /* Overall nav container */
  display: flex;
  align-items: center;
  gap: 40px;
}
header .depth01_wrap { /* Nav links list */
  display: flex;
  align-items: center;
  gap: 30px;
}
header .depth01_wrap > li {
  position: relative;
}
header .depth01_title { /* Nav link style */
  transition: color 0.3s;
  padding: 15px 0px 10px;
  white-space: nowrap;
  display: block;
  position: relative;
}
/* Nav link hover underline */
header .depth01_wrap > li::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--point_color03);
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%) scaleX(0);
  transition: 0.3s;
  transform-origin: center;
  z-index: 4;
}
header.default .depth01_wrap > li:hover::before { /* Show underline on hover */
  transform: translateX(-50%) scale(1);
}
header .depth01_title:hover { /* Link color on hover */
  color: var(--point_color03);
}

/* Hamburger Button */
header .ham_btn {
  display: none; /* Hidden on desktop */
  position: relative;
  width: 26px;
  aspect-ratio: 26 / 23;
}
header .ham_btn span { /* Hamburger lines */
  height: 2px;
  width: 100%;
  background-color: var(--default_color); /* Color changes with header */
  position: absolute;
  display: block;
  transition: 0.3s;
}
header .ham_btn span:nth-of-type(1) { top: 0; }
header .ham_btn span:nth-of-type(2) { top: calc(50% - 1px); width: 70%; }
header .ham_btn span:nth-of-type(3) { top: calc(100% - 2px); }

/* Main logo in bottom header (often smaller) */
header .main_logo {
  max-height: 30px;
}

/* --- Sitemap Styles --- */
header.sitemap nav { /* Fullscreen sitemap container */
  position: fixed;
  inset: 0;
  background-color: var(--point_color01);
  z-index: 8;
  padding: 50px 0;
}
header.sitemap .ham_btn { display: none; } /* Hide hamburger in sitemap */
header.sitemap .depth01_wrap { /* Grid layout for sitemap links */
  max-width: 1660px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  width: 100%;
  padding: 0px 20px;
}
header.sitemap .depth01_title { /* Sitemap link style */
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  padding: 20px 0 40px;
  white-space: normal; /* Allow wrapping */
}
header.sitemap .depth01_wrap > li { /* Sitemap column style */
  padding: 0 20px;
  min-height: 500px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
header.sitemap .depth01_wrap > li:first-of-type {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
header.sitemap .depth01_wrap > li:hover .depth01_title {
  /* Optionally add hover effect here if needed */
}
header .sitemap_btn { display: none; } /* Hide close button by default */
header .sitemap_logo { display: none; } /* Hide sitemap logo by default */

header.sitemap .sitemap_logo { /* Sitemap logo positioning */
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  max-height: 50px;
}
header.sitemap .sitemap_logo > img {
  width: auto;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
header.sitemap .sitemap_btn { /* Sitemap close button */
  position: absolute;
  top: 60px;
  right: calc(20px + (100% - 1660px) / 2); /* Adjust based on max-width */
  width: 66px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex; /* Show in sitemap mode */
  align-items: center;
  justify-content: center;
  color: #fff;
}
header .sitemap_btn i {
  font-size: 26px;
}

/* Utility box for Tablet/Mobile (Login/Lang) - Hidden by default */
header .util_box.view_tab {
  display: none;
}
/* [수정] Corrected closing brace location */
} /* End of base header styles before media queries */

/* =============================================
   Responsive Header Styles
============================================= */

/* --- Wider Screens (Sitemap adjustments) --- */
@media screen and (max-width: 1660px) {
  header.sitemap .depth01_title {
    font-size: 18px;
  }
  header.sitemap .depth01_wrap > li {
    padding: 0 15px;
  }
  header.sitemap .sitemap_btn {
    right: 20px; /* Adjust close button position */
  }
  header .depth01_title { /* Adjust nav link size */
    font-size: 14px;
    line-height: 20px;
  }
}

/* --- Tablet View (Switch to Hamburger Menu) --- */
@media screen and (max-width: 1300px) {
  header .depth01_wrap {
    display: none; /* Hide PC nav links */
  }
  header .ham_btn {
    display: block; /* Show hamburger button */
  }
  .hd_bot { /* Add border when nav is hidden */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* Mobile Menu Panel */
  header.m_menu .depth01_wrap {
    position: fixed;
    top: 120px; /* Position below header */
    left: 0;
    right: 0;
    bottom: 0;
    /* height: 100%; Removed, use max-height */
    overflow-y: auto;
    max-height: calc(100vh - 120px); /* Fill remaining viewport */
    background-color: #fff;
    border-top: 1px solid var(--point_color01);
    flex-direction: column; /* Stack links vertically */
    gap: 0;
    display: flex; /* Show when m_menu class is active */
    transition: top 0.3s ease, max-height 0.3s ease; /* Smooth transition */
  }
  header.m_menu .depth01_wrap > li { /* Mobile menu item style */
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #d3d3d3;
  }
  header.m_menu .depth01_title { /* Mobile menu link style */
    padding: 20px;
    line-height: 30px;
    background-size: 15px auto;
    background-position: right 20px center;
    background-repeat: no-repeat;
    font-size: 20px;
  }
  header.m_menu .depth01_title.on { /* Active/Open mobile menu link */
    background-image: url(../img/common/ico_m_depth01_on.png);
    color: var(--point_color01);
  }

  /* Search wrap position (if applicable) */
  .hd_srh_wrap {
    top: 120px;
    transition: top 0.3s ease;
  }
}

/* --- Smaller Tablet / Larger Mobile --- */
@media screen and (max-width: 1024px) {
  /* Adjust header padding (height) */
  .hd_top { padding: 8px 0; }
  .hd_bot { padding: 20px 0; }
  .hd_bot .hd_inner { height: auto; } /* Let height adjust */

  /* Adjust logo gap */
  header .logo_box { gap: 15px; }

  /* Hide Lang/Login from main header */
  header .util_box:not(.view_tab) .lang_wrap,
  header .util_box:not(.view_tab) .login_btn {
    display: none;
  }

  /* Adjust Mobile Menu position based on new header height */
  header.m_menu .depth01_wrap {
    border-top: 1px solid #c4c4c4;
    top: 74px; /* Matches new header height */
    max-height: calc(100vh - 74px);
  }

  /* Show and style the secondary utility bar */
  header.m_menu .util_box.view_tab {
    display: flex; /* Show only when mobile menu is open */
  }
  header .util_box.view_tab {
    position: fixed;
    height: 50px;
    width: 100%;
    left: 0;
    top: 75px; /* Position below header */
    background: #fff;
    border-top: 1px solid var(--point_color01); /* Moved from header */
    z-index: 10;
    transition: top 0.3s ease;
    display: none; /* Hide by default */
  }
  header .util_box.view_tab .item { /* Layout items inside */
    display: flex;
    justify-content: center;
    align-items: center; /* Vertically center */
    flex: 1; /* Equal width */
    position: relative;
  }
  /* Vertical separator */
  header .util_box.view_tab .item:not(:first-of-type)::before {
    content: "";
    display: block;
    width: 1px;
    height: 28px;
    background-color: #d3d3d3;
    position: absolute;
    left: 0;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Center vertically */
  }
  /* Style buttons within this bar */
  header .util_box.view_tab .lang_btn {
    background-color: var(--point_color01);
    color: #fff;
    margin: 0; /* Remove default margin */
  }
  header .util_box.view_tab .login_btn {
    display: flex; /* Ensure it behaves like other items */
    justify-content: center;
    align-items: center; /* Vertically center */
    color: #000;
    flex: 1;
  }

  /* Adjust Search wrap position (if applicable) */
  .hd_srh_wrap {
    top: 125px; /* Below header + util_box.view_tab */
  }
}

/* --- Mobile View --- */
@media screen and (max-width: 768px) {
  header .main_logo { max-height: 30px; } /* Adjust logo size */
  /* .hd_bot { 
    padding: 16px; }  */

  /* Adjust mobile menu position */
  header.m_menu .depth01_wrap {
    top: 62px;
    max-height: calc(100vh - 62px);
  }
  /* Adjust secondary util bar position */
  header .util_box.view_tab {
    top: 62px;
  }
  /* Adjust Search wrap position */
  .hd_srh_wrap {
  }
  /* Adjust mobile menu link font size */
  header.m_menu .depth01_title {
    font-size: 18px;
  }
}

/* --- Small Mobile View --- */
@media screen and (max-width: 550px) {
  header .main_logo { max-height: 30px; } /* Further adjust logo size */
  header .ham_btn {
    position: relative;
  }
  /* Adjust mobile menu position */
  header.m_menu .depth01_wrap {
    top: 60px; /* Adjust based on potentially smaller header */
    max-height: calc(100vh - 60px);
  }
   /* Adjust secondary util bar position */
  header .util_box.view_tab {
    top: 50px;
  }
  /* Adjust Search wrap position */
  .hd_srh_wrap {
    top: 100px; /* Below header + util_box.view_tab */
  }
}

/* =============================================
   Footer Styles (Moved from 550px media query)
============================================= */
.ft_bot {
  padding: 50px 0 20px;
}
.ft_info {
  display: flex; /* Use flex for easier centering */
  justify-content: center; /* Center content horizontally */
  padding-top: 80px;
  text-align: center; /* Center text within */
}
/* Removed .ft_info .left as it's not needed for simple centering */
.ft_info .copyright {
  color: #797979;
  font-size: 11px;
}


/* Footer Responsive (Combine 1024px and 550px rules if identical) */
@media screen and (max-width: 1024px) {
  .ft_info {
    /* flex-direction: column; Not needed if just centering copyright */
    /* align-items: center; */
    gap: 20px; /* Adjust gap if needed */
    padding-top: 40px; /* Reduce top padding */
  }
  /* Removed .ft_info .left styling */
  .ft_nav_list { /* If you have a nav list in footer */
    justify-content: center;
  }
  .ft_bot {
    padding: 30px 0 50px; /* Adjust overall padding */
  }
}

/* =============================================
   Hamburger Button Transformation (X shape)
============================================= */
/* Center lines vertically for easier rotation */
header .ham_btn span {
  left: 0;
  transform: translateY(-50%); /* Base vertical centering */
}
header .ham_btn span:nth-of-type(1) {
  top: 0;
  transform: none; /* Override base centering */
}
header .ham_btn span:nth-of-type(2) {
  top: 50%;
}
header .ham_btn span:nth-of-type(3) {
  top: 100%;
  transform: none; /* Override base centering */
}
/* Transform lines into 'X' when mobile menu is open */
header.m_menu .ham_btn span:nth-of-type(1) {
  top: 50%; /* Move to center */
  transform: rotate(45deg); /* Rotate */
}
header.m_menu .ham_btn span:nth-of-type(2) {
  opacity: 0; /* Hide middle line */
}
header.m_menu .ham_btn span:nth-of-type(3) {
  top: 50%; /* Move to center */
  transform: rotate(-45deg); /* Rotate */
}