@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap");
@import url("https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css");

:root {
  --font-latin: "Pretendard", "Noto Sans", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ko: "Pretendard", "Noto Sans", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-num: "Pretendard", "Noto Sans", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --primary: #ff6a00;
  --text: #111111;
  --text-soft: #333333;
  --text-muted: #bbbbbb;
  --text-faint: #eeeeee;
  --line: #eeeeee;
  --surface: #f5f5f5;
  --page: #ffffff;
  --gutter: 100px;
  --header-h: 110px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 1600px) {
  :root { --gutter: 5%; }
}

@media (max-width: 768px) {
  :root { --header-h: 70px; --gutter: 5%; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  /* 가로 넘침 안전장치.
     overflow-x: hidden 은 스크롤 컨테이너를 만들어 position: sticky 를 깨뜨린다
     (about 의 intro-switch, 기술력의 pressure-stage 등이 sticky 를 쓴다).
     clip 은 스크롤 컨테이너를 만들지 않아 sticky 가 그대로 동작한다. */
  overflow-x: clip;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-latin);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.ko,
[data-i18n],
[data-lang="ko"] {
  font-family: var(--font-ko);
}

.en,
[lang="en"] {
  font-family: var(--font-latin);
}

html[lang="en"] .ko,
html[lang="en"] [data-i18n],
html[lang="en"] [data-i18n] * {
  font-family: var(--font-latin);
}

html[lang="ja"] body,
html[lang="ja"] .ko,
html[lang="ja"] [data-i18n],
html[lang="ja"] [data-i18n] * {
  font-family: var(--font-latin);
  line-break: strict;
}

html[lang="de"] body,
html[lang="de"] .ko,
html[lang="de"] [data-i18n],
html[lang="de"] [data-i18n] * {
  font-family: var(--font-latin);
  hyphens: auto;
}

/* 마지막 방어선: 끊을 수 없는 긴 문자열(제품코드/URL/긴 어절)이
   컨테이너를 밀어내지 않도록 필요할 때만 강제로 끊는다.
   기존에는 en/ja/de 에만 걸려 있어 기본 언어인 한국어가 빠져 있었다.
   word-break: keep-all 이 42곳에 쓰이는 만큼 한국어에도 필요하다. */
body {
  /* 한국어는 기본값(word-break: normal)에서 글자 단위로 끊긴다.
     "상하 이중 셀 구조" 가 "상하 이중 셀 구 / 조" 처럼 잘리는 이유다.
     어절(띄어쓰기) 단위로만 끊기도록 전역에 keep-all 을 건다.
     그동안 46곳에 개별로 흩어져 있었는데, 여기서 한 번에 잡는다.
     - 영어/독일어: 원래 공백에서만 끊기므로 변화 없음
     - 일본어: 아래 html[lang="ja"] 규칙이 normal 로 되돌린다
     - 끊을 수 없는 긴 어절/URL 은 overflow-wrap 이 마지막 방어선 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* word-break: keep-all 은 한국어 어절을 붙여두려는 설정이다.
   일본어에 걸리면 문장 전체가 끊을 수 없는 한 덩어리가 되어
   좁은 화면에서 폭을 밀어내고 레이아웃이 깨진다.
   테마 CSS 14개 파일 42곳에 흩어져 있는데 base.css 가 먼저 로드되므로
   일반 우선순위로는 이길 수 없어 언어 차원에서 한 번에 되돌린다. */
html[lang="ja"] * {
  word-break: normal !important;
}

.num,
[data-num] {
  font-family: var(--font-num);
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; object-fit: cover; }
[style*="background-image"]:not([class^="cheditor-"]):not([class*=" cheditor-"]),
.bg-cover {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

@media (max-width: 768px) {
  body { font-size: 16px; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* 크기·여백·글자 크기는 .card__more 와 동일하게 맞춘다. (색상은 각 컨텍스트에서 따로) */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 18px;
  line-height: 26px;
  white-space: nowrap;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.btn-pill:hover { transform: translateY(-1px); }

/* Sitemap submenu motion */
.mobile-menu .sitemap-section {
  --sitemap-panel-gap: 20px;
  gap: 0;
}

.mobile-menu .sitemap-links {
  display: grid;
  grid-template-rows: 0fr;
  gap: 0;
  width: 100%;
  padding-top: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    grid-template-rows .42s cubic-bezier(.22, 1, .36, 1),
    padding-top .42s cubic-bezier(.22, 1, .36, 1),
    opacity .28s ease,
    transform .42s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .42s;
}

.mobile-menu .sitemap-links__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.mobile-menu .sitemap-links__inner > .sitemap-link {
  opacity: 0;
  transform: translateY(-5px);
  transition: color .18s var(--ease), opacity .24s ease, transform .32s var(--ease);
}

.mobile-menu .sitemap-section.is-open .sitemap-links {
  grid-template-rows: 1fr;
  padding-top: var(--sitemap-panel-gap);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.mobile-menu .sitemap-section.is-open .sitemap-links__inner > .sitemap-link {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu .sitemap-section.is-open .sitemap-links__inner > .sitemap-link:nth-child(1) { transition-delay: 0s, .06s, .06s; }
.mobile-menu .sitemap-section.is-open .sitemap-links__inner > .sitemap-link:nth-child(2) { transition-delay: 0s, .09s, .09s; }
.mobile-menu .sitemap-section.is-open .sitemap-links__inner > .sitemap-link:nth-child(3) { transition-delay: 0s, .12s, .12s; }
.mobile-menu .sitemap-section.is-open .sitemap-links__inner > .sitemap-link:nth-child(4) { transition-delay: 0s, .15s, .15s; }
.mobile-menu .sitemap-section.is-open .sitemap-links__inner > .sitemap-link:nth-child(5) { transition-delay: 0s, .18s, .18s; }
.mobile-menu .sitemap-section.is-open .sitemap-links__inner > .sitemap-link:nth-child(6) { transition-delay: 0s, .21s, .21s; }

.mobile-menu .sitemap-section__chevron {
  transition: transform .36s cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 1024px) {
  /* 1024 이하도 .card__more 의 반응형 값과 동일하게 간다. */
  .btn-pill {
    gap: 10px;
    min-height: clamp(32px, 4.2vw, 46px);
    padding: 12px clamp(16px, 1.9vw, 22px);
    font-size: clamp(13px, 1.62vw, 18px);
    line-height: 1.4;
  }

  .site-header .site-header__inner > .site-logo {
    width: clamp(132px, 30vw, 144px) !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0;
  }

  .site-header .site-header__inner > .site-logo::before {
    background-position: left center !important;
    background-size: contain !important;
  }

  .mobile-menu.mobile-menu {
    grid-template-rows: 80px 1fr;
  }

  .mobile-menu .mobile-menu__top {
    width: 100%;
    min-height: 80px;
    padding-inline: var(--gutter);
  }

  .mobile-menu .mobile-menu__top .site-logo {
    width: clamp(132px, 30vw, 144px);
    height: 56px;
    min-height: 56px;
    margin: 0;
    justify-self: start;
  }

  .mobile-menu .mobile-menu__top .site-logo::before {
    background-position: left center;
    background-size: contain;
  }

  .mobile-menu .mobile-menu__top .mobile-menu__actions {
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
  }

  .mobile-menu .mobile-menu__top .mobile-menu__close {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    line-height: 1;
  }

  .mobile-menu .sitemap-section {
    --sitemap-panel-gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu .sitemap-links,
  .mobile-menu .sitemap-links__inner > .sitemap-link,
  .mobile-menu .sitemap-section__chevron {
    transition-duration: .01ms;
    transition-delay: 0s !important;
  }
}

/* ===== 768px 이하: 강제 줄바꿈 해제 =====
   데스크톱 문안 폭에 맞춰 넣은 <br> 이 좁은 화면에서는 엉뚱한 곳을 끊는다.
   주의: br { display: none } 은 줄바꿈만 없애고 그 자리에 공백을 넣어주지 않는다.
   ("for<br>better" -> "forbetter") 그래서 한국어/영어/독일어 문안에는
   <br> 앞에 공백을 미리 넣어 뒀다. 데스크톱에서는 줄 끝 공백이라 보이지 않는다.
   일본어는 단어 사이에 공백을 쓰지 않으므로 그대로 붙는 것이 맞다. */
@media (max-width: 768px) {
  br {
    display: none;
  }

  /* 게시판 본문은 작성자가 직접 넣은 줄바꿈이라 건드리지 않는다.
     (공백 보정이 되어 있지 않아 지우면 단어가 붙는다) */
  .nsbs-resource-view__content br,
  .nsbs-resource-view__body br,
  #bo_v_atc br,
  .view_content br {
    display: inline;
  }
}