html,
body {
  margin: 0;
  padding: 0;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* -------------------- Header 기본 스타일 -------------------- */
header {
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

header .nav-wrapper {
  padding: 4px 120px;
  display: flex;
  justify-content: center;
}

header nav {
  max-width: 1800px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .logo {
  width: 300px;
}

header .logo img {
  height: 36px;
  display: block;
}

header nav .nav-container {
  width: 1500px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* -------------------- 메뉴 스타일 -------------------- */
header .menu {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

header .menu li {
  position: relative;
}

header .menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: #333;
  padding: 19px 20px;
  transition: color 0.3s ease;
  font-size: 17px;
}

header .menu li a:hover,
header .menu-btn:hover {
  color: #0344b8;
}

/* -------------------- Mega Menu 전체 -------------------- */
header .mega-menu {
  background: #fff;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 열림 */
header .mega-menu.show {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  opacity: 1;
  position: absolute;
  width: 100%;
  z-index: 5;
}

/* -------------------- Mega Menu Column -------------------- */
header .mega-column-container {
  display: flex;
  flex-direction: row;
  width: 1800px;
  padding: 50px 0;
}

header .mega-column {
  padding-right: 80px;
}

header .mega-column h3 {
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  margin: 0px 0 30px 0;
  padding: 30px 0;
}

header .mega-column h3 a {
  padding: 0;
}

header .mega-column a {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

header .mega-column a:hover {
  color: #0344b8;
}

/* -------------------- Icon 스타일 -------------------- */
.icon-menu {
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}

.icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.icon svg {
  width: 30px;
  height: 30px;
  transition: opacity 0.2s ease;
}

.icon:hover svg path {
  stroke: #0344b8;
}

.icon button {
  background: none;
  border: none;
  cursor: pointer;
}

.lang-menu {
  position: absolute;
  top: 55px;
  background: #fff;
  border: 1px solid #ddd;
  list-style: none;
  padding: 5px 0;
  margin: 0;
  display: none;
  z-index: 10;
}

.lang-menu li {
  padding: 8px 16px;
}

.lang-menu li a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.lang-menu li a:hover {
  color: #0344b8;
}

.lang-menu.show {
  display: block;
}