@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ========================================

   ROOT

======================================== */

:root {

  /* COLOR */

  --color-blue: #0872c9;

  --color-blue-dark: #00243b;

  --color-orange: #f58220;

  --color-black: #000;

  --color-bg: #02050a;

  --color-white: #fff;

  --color-gray: #999;

  --color-gray-dark: #555;

  --color-line: rgba(255, 255, 255, 0.18);

  /* FONT SIZE */

  --font-visual: clamp(40px, 3vw, 48px);

  --font-title: clamp(36px, 2.5vw, 44px);

  --font-title-md: clamp(28px, 2vw, 36px);

  --font-title-sm: clamp(24px, 1.6vw, 28px);

  --font-lg: clamp(20px, 1.2vw, 24px);

  --font-base: clamp(16px, 1vw, 18px);

  --font-sm: clamp(14px, 0.85vw, 16px);

  /* LAYOUT */

  --inner: 1500px;

  --header-height: 80px;
  /* EXTENDED TYPOGRAPHY: small labels and decorative headings */
  --font-xs: clamp(14px, 0.75vw, 15px);
  --font-micro: 10px;
  --font-decorative: clamp(60px, 8vw, 145px);

  /* EXTENDED PALETTE: page accents and surfaces */
  --color-blue-nav: #005bac;
  --color-blue-panel: #00335c;
  --color-blue-bright: #078af4;
  --color-cyan: #61dfff;
  --color-surface: #111;
  --color-surface-raised: #1c1c1c;
  --color-border-dark: #292929;
  --color-gray-light: #ddd;


}

/* ========================================

   RESET

======================================== */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  margin: 0;

  font-family:

    'Pretendard',

    -apple-system,

    BlinkMacSystemFont,

    system-ui,

    sans-serif;

  font-size: var(--font-base);

  font-weight: 400;

  line-height: 1.5;

  color: var(--color-white);

  background: var(--color-bg);

  word-break: keep-all;

  -webkit-font-smoothing: antialiased;

}

a {

  color: inherit;

  text-decoration: none;

}

a:visited {

  color: inherit;

}

ul,

ol,

li {

  list-style: none;

}

button,

input,

select,

textarea {

  font: inherit;

}

button {

  margin: 0;

  padding: 0;

  border: 0;

  color: inherit;

  background: none;

  cursor: pointer;

}

img {

  display: block;

  max-width: 100%;

}

.inner {

  width: calc(100% - 60px);

  max-width: var(--inner);

  margin: 0 auto;

}

/* iOS 자동 링크 */

a[x-apple-data-detectors] {

  color: inherit !important;

  text-decoration: none !important;

  font-family: inherit !important;

  font-size: inherit !important;

  font-weight: inherit !important;

}

/* ========================================

   FIXED HEADER

======================================== */

#header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 9999;

  background: transparent;

  transition: background 0.3s ease;

}

/* 스크롤 시 검정 배경 */

#header.scrolled,

#header.menu-open {

  background: var(--color-black);

}

/* 메뉴 글씨 */

#header .gnb-item > a {

  color: var(--color-white);

}

/* ========================================

   HEADER

======================================== */

.header {

  position: relative;

  z-index: 1000;

  width: 100%;

  height: var(--header-height);

  background: transparent;

  border-bottom:

    1px solid var(--color-line);

}

.header-inner {

  height: 100%;

  display: flex;

  align-items: center;

}

/* ========================================

   LOGO

======================================== */

.logo {

  flex-shrink: 0;

  width: 210px;

}

.logo a {

  display: block;

}

.logo img {

  width: 100%;

}

/* ========================================

   GNB

======================================== */

.gnb {

  margin-left: auto;

  margin-right: clamp(50px, 7vw, 110px);

}

.gnb-list {

  display: flex;

  align-items: center;

  gap: clamp(40px, 5vw, 80px);

}

.gnb-item {

  position: relative;

}

.gnb-item > a {

  position: relative;

  height: var(--header-height);

  display: flex;

  align-items: center;

  font-size: var(--font-base);

  font-weight: 500;

  white-space: nowrap;

}

/* 하단 라인 */

.gnb-item > a::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: -1px;

  width: 0;

  height: 2px;

  background: var(--color-white);

  transition: width 0.25s ease;

}

.gnb-item:hover > a::after,

.gnb-item.active > a::after {

  width: 100%;

}

/* ========================================

   LANGUAGE

======================================== */

.lang-select {

  position: relative;

  z-index: 30;

  flex-shrink: 0;

}

/* 현재 언어 */

.lang-btn {

  min-width: 76px;

  height: 36px;

  padding: 0 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  border:

    1px solid rgba(255, 255, 255, 0.7);

  border-radius: 50px;

  color: var(--color-white);

  background: transparent;

  font-size: var(--font-sm);

  font-weight: 500;

  transition:

    border-color 0.2s ease,

background 0.2s ease;

}

.lang-btn:hover {

  border-color: var(--color-white);

  background:

    rgba(255, 255, 255, 0.08);

}

.lang-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: var(--font-base);

  line-height: 1;

}

/* ========================================

   LANGUAGE OPTIONS

======================================== */

.lang-options {

  position: absolute;

  top: calc(100% + 10px);

  left: 50%;

  min-width: 76px;

  padding: 7px;

  border:

    1px solid rgba(255, 255, 255, 0.18);

  border-radius: 12px;

  background: var(--color-surface);

  box-shadow:

    0 10px 30px rgba(0, 0, 0, 0.3);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:

    translateX(-50%)

    translateY(-8px);

  transition:

    opacity 0.2s ease,

    visibility 0.2s ease,

    transform 0.2s ease;

}

/* OPEN */

.lang-select.open .lang-options {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:

    translateX(-50%)

    translateY(0);

}

/* OPTION */

.lang-options a {

  width: 100%;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 7px;

  color: var(--color-gray-light);

  font-size: var(--font-sm);

  font-weight: 500;

  transition:

    color 0.2s ease,

background 0.2s ease;

}

.lang-options a:hover {

  color: var(--color-white);

  background:

    rgba(255, 255, 255, 0.1);

}

.lang-options a.active {

  color: var(--color-orange);

  background:

    rgba(255, 255, 255, 0.08);

}
.lang-icon img{
    width: 70%;
}

/* ========================================

   MEGA MENU

======================================== */

.mega-menu {

  position: absolute;

  top: var(--header-height);

  left: 0;

  width: 100%;

  background: transparent;

  border-bottom:

    1px solid var(--color-line);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: translateY(-10px);

  transition:

    opacity 0.25s ease,

    visibility 0.25s ease,

    transform 0.25s ease;

}

/* OPEN */

.header.menu-open .mega-menu {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateY(0);

}

/* INNER */

.mega-inner {

  min-height: 240px;

  display: grid;

  grid-template-columns:

    260px

    minmax(300px, 1fr)

    360px;

}

/* TITLE */

.mega-title {

  padding-top: 75px;

  border-right:

    1px solid var(--color-line);

  font-size: var(--font-title-md);

  font-weight: 600;

}

/* LIST */

.mega-list {

  padding: 35px 30px;
  border-right: 1px solid var(--color-line);

}

.mega-list a {

  width: 100%;

  min-height: 42px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: var(--color-white);

  font-size: var(--font-base);

  font-weight: 400;

  transition:

    color 0.2s ease,

    padding 0.2s ease;

}

.mega-list a:hover {

  padding-left: 5px;

  color: var(--color-orange);

}

/* IMAGE */

.mega-image {

  display: flex;

  align-items: center;

  justify-content: flex-end;

}

.mega-image img {

  width: 300px;

  height: 160px;

  object-fit: cover;

  border-radius: 18px;

}

/* ========================================

   MOBILE MENU BUTTON

======================================== */

.mobile-menu-btn {

  display: none;

}

/* ========================================

   FOOTER

======================================== */

.footer {

  padding:

    clamp(50px, 5vw, 65px)

    0

    clamp(45px, 4vw, 55px);

  background: var(--color-black);

}

.footer-inner {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

}

.footer-info {

  color: var(--color-gray-light);

  font-size: var(--font-sm);

  line-height: 1.9;

}

.footer-links {

  display: flex;

  gap: 12px;

  margin-bottom: 8px;

  color: var(--color-white);

}

.footer-links a:hover {

  color: var(--color-orange);

}

.footer-copy {

  margin-top: 12px;

  color: var(--color-gray-dark);

}

.footer-logo {

  width: 200px;

}

/* ========================================

   TABLET

======================================== */

@media (max-width: 1200px) {

  .logo {

    width: 180px;

  }

  .gnb {

    margin-right: 50px;

  }

  .gnb-list {

    gap: 40px;

  }

  .mega-inner {

    grid-template-columns:

      220px

      minmax(280px, 1fr)

      300px;

  }

  .mega-image img {

    width: 260px;

    height: 145px;

  }

}

/* ========================================

   MOBILE

======================================== */

@media (max-width: 1024px) {

  :root {

    --header-height: 70px;

  }

  .inner {

    width: calc(100% - 40px);

  }

  /* LOGO */

  .logo {

    width: 170px;

  }

  /* PC GNB */

  .gnb {

    display: none;

  }

  /* LANGUAGE */

  .lang-select {

    margin-left: auto;

    margin-right: 18px;

  }

  .lang-btn {

    min-width: 68px;

    height: 34px;

    padding: 0 11px;

  }

  .lang-options {

    min-width: 68px;

  }

  /* HAMBURGER */

  .mobile-menu-btn {

    width: 28px;

    height: 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    flex-shrink: 0;

  }

  .mobile-menu-btn span {

    display: block;

    width: 100%;

    height: 2px;

    background: var(--color-white);

    transition:

      transform 0.25s ease,

      opacity 0.25s ease;

  }

  /* MEGA MENU */

  .mega-menu {

    display: none;

  }

  /* FOOTER */

  .footer-inner {

    align-items: flex-start;

    flex-direction: column;

    gap: 40px;

  }

}

/* ========================================

   SMALL MOBILE

======================================== */

@media (max-width: 480px) {

  .inner {

    width: calc(100% - 30px);

  }

  .logo {

    width: 145px;

  }

  .lang-select {

    margin-right: 13px;

  }

  .footer-logo {

    width: 170px;

  }

}

/* ========================================
   MOBILE DRAWER / ACCORDION
   Drawer is moved to body by common.js
======================================== */
@media (max-width: 1024px) {
  body.mobile-menu-open { overflow: hidden; }
  body.mobile-menu-open #header { background: var(--color-black); }
  .mobile-menu-overlay {
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: 10000;
    background: rgba(0, 0, 0, .65);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
  }
  .mobile-menu {
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: min(380px, 88vw);
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    z-index: 10001;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 24px 45px;
    background: var(--color-surface);
    border-left: 1px solid rgba(255,255,255,.15);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s ease, visibility .3s ease;
  }
  body.mobile-menu-open .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  body.mobile-menu-open .mobile-menu {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  .mobile-menu-list { padding: 0; margin: 0; }
  .mobile-menu-item { border-bottom: 1px solid rgba(255,255,255,.15); }
  .mobile-menu-item > a, .mobile-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-height: 64px;
    text-align: left;
    color: var(--color-white);
    font-size: var(--font-lg);
    font-weight: 600;
  }
  .mobile-submenu-toggle span, .mobile-menu-item > a span {
    font-size: var(--font-title-sm);
    font-weight: 300;
  }
  .mobile-submenu-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
  .mobile-submenu[hidden] { display: none !important; }
  .mobile-submenu { padding: 0 0 15px 15px; }
  .mobile-submenu a { display: block; padding: 12px 8px; color: var(--color-gray-light); font-size: var(--font-base); }
  .mobile-submenu a:hover, .mobile-submenu a:focus-visible { color: var(--color-orange); }
  .mobile-menu-btn { position: relative; z-index: 4; }
  body.mobile-menu-open .mobile-menu-btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  body.mobile-menu-open .mobile-menu-btn span:nth-child(2) { opacity: 0; }
  body.mobile-menu-open .mobile-menu-btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}
@media (min-width: 1025px) {
  .mobile-menu, .mobile-menu-overlay { display: none !important; }
}

/* ========================================
   HEADER BACKGROUND FINAL
======================================== */

/* 기본 상태 - 투명 */
body #header.header {
  background: transparent;
}

/* 스크롤 시 - 블랙 */
body #header.header.scrolled {
  background: #000;
}

/* PC 서브메뉴 펼쳐질 때 - 블랙 */
body #header.header.menu-open {
  background: #000;
}

/* 펼쳐진 서브메뉴 영역도 블랙 */
body #header.header .mega-menu {
  background: #000;
}

/* 모바일 메뉴 펼쳐질 때 - 블랙 */
body.mobile-menu-open #header.header {
  background: #000;
}

.spec-lines .spec-label {
  float: left;
  margin-right: 0.35em;
}

.spec-lines .spec-value {
  display: block;
  overflow: hidden;
}

@media (max-width: 767px) {
  .spec-lines .spec-label {
    float: none;
    display: block;
    margin-right: 0;
  }

  .spec-lines .spec-value {
    overflow: visible;
    padding-left: 0.9em;
  }
}