*{box-sizing:border-box}
html,body{min-height: 100svh;margin:0;padding:0}
body{margin:0;background:var(--color-bg);color:var(--color-fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;line-height:1.5;/* iOS Safari 상태바 영역 처리 */padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
a{color:inherit;text-decoration:none;outline:none}
*:focus{outline:none}
img{max-width:100%;height:auto;display:block}
button,input,textarea{font:inherit}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;background:#000;color:#fff;padding:8px;border-radius:6px}
/* LQIP blur-up */
.img-blur{filter:blur(12px);transform:scale(1.02);transition:filter .35s ease, transform .35s ease}
.img-ready{filter:blur(0);transform:none}

/* Lightbox styles */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lightbox-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  z-index: 10;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 60px 0 80px 0;
  overflow: hidden;
}

.lightbox-slider {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* About Page Styles */
.about-root {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

/* Background Image for About Page */
.about-root .background-image {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;  /* 뷰포트 전체 너비 */
  height: 100vh !important;  /* 뷰포트 전체 높이 */
  z-index: 1;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: opacity 0.8s ease-in-out;
  opacity: 1;
  will-change: opacity;
  /* iOS Safari 상태바 영역까지 확장 - 더 강력한 설정 */
  top: -120px !important;  /* iOS 상태바 위쪽까지 확장 */
  height: calc(100vh + 120px + 34px) !important;  /* 위쪽 확장 + 뷰포트 + 하단 영역 */
  min-height: calc(100vh + 120px + 34px) !important;
  /* 기본 배경색 제거 */
  background-color: transparent !important;
  /* 추가 확장 설정 */
  z-index: -1 !important;  /* 더 뒤쪽으로 */
  /* 뷰포트 전체 커버 */
  left: 50% !important;
  transform: translateX(-50%) translateY(-120px) !important;
  /* 상태바 영역 강제 확장 */
  margin-top: -120px !important;
  padding-top: 120px !important;
}

.about-content {
  position: relative;
  z-index: 2;
  color: white;
  margin: 3rem;
  padding-left: 25rem;
  width: 100%;
}


.about-content h4 {
  font-size: 1.2rem;
  margin: 2rem 0 1rem 0;
  font-weight: 700;
}

.about-content p {
  font-size: 1rem;
  line-height: 1.1;
  margin-bottom: 1rem;
  font-weight: 500;
}

.about-content ul{margin:0;padding:0;list-style:decimal-leading-zero;;padding-inline-start: 1.8em;}
/* News Grid Variation Page Styles */
.news-grid-variation-root {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.news-grid-variation-root .news-grid-container {
  position: relative;
  z-index: 2;
}

/* 슬라이드 애니메이션 */
.lightbox-slider.slide-next .lightbox-image {
  animation: slideInNext 0.3s ease-out;
}

.lightbox-slider.slide-prev .lightbox-image {
  animation: slideInPrev 0.3s ease-out;
}

@keyframes slideInNext {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInPrev {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: none;
}

.lightbox-prev,
.lightbox-next {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  pointer-events: auto;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.contact-content{display:none; margin:var(--header-height) 1rem 0 1rem}
/* 모바일 최적화 */
@media (max-width: 991px) {
  .about-content{padding-left:0;margin:var(--header-height) 1rem 0 ;width:90%;}
.about-content h4 {
  font-size: 1rem;
}

.about-content p {
  font-size: .8rem;
  line-height: 1.5;

}

.about-content ul{
  font-size: .8rem;
  line-height: 1.5;
  padding-inline-start: 1.8em;
}
    .contact-content {
      display: block !important;
      margin: var(--header-height) 1rem 0 1rem;
      padding: 0 !important;
      z-index: 999 !important;
      position: absolute !important;
      bottom: 0 !important;
    }
    .contact-content .nav-item-row{color: #fff !important;}
    .contact-content .nav-item-contact-row{color: #fff !important;}
    .contact-content .nav-item-row .detail{color: #fff !important;}
  .lightbox-content {
    padding: 0;;
  }
  
  .lightbox-close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .lightbox-nav {
    padding: 0 10px;
  }
  
  .lightbox-prev,
  .lightbox-next {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  
  .lightbox-image-container {
    margin: 50px 0 70px 0;
  }
  
  .lightbox-counter {
    bottom: 10px;
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* 터치 디바이스에서 호버 효과 비활성화 */
@media (hover: none) {
  .lightbox-close:hover,
  .lightbox-prev:hover,
  .lightbox-next:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

/* View Transition API 스타일 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
  animation-name: fade-out;
}

::view-transition-new(root) {
  animation-name: fade-in;
}

/* 부드러운 페이드 애니메이션 */
@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* 바텀 네비게이션과 헤더는 전환 시 안정적으로 유지 */
.bottom-navigation {
  view-transition-name: bottom-nav-stable;
}

.header {
  view-transition-name: header-stable;
}

/* 안정 요소들은 전환 애니메이션 없이 유지 */
::view-transition-old(bottom-nav-stable),
::view-transition-new(bottom-nav-stable),
::view-transition-old(header-stable),
::view-transition-new(header-stable) {
  animation: none;
}

/* iOS Safari 전용 body 배경 설정 */
@supports (-webkit-touch-callout: none) {
  body {
    background-position: center top !important;  /* 상단부터 시작 */
    background-size: cover !important;
    background-attachment: fixed !important;
    min-height: calc(100vh + 150px + 34px) !important;
    margin-top: -100px !important;
    padding-top: 100px !important;
    overflow: hidden !important;
    /* 배경 이미지가 상단바 영역부터 표시되도록 추가 설정 */
    background-origin: border-box !important;
    background-clip: border-box !important;
  }
}

/* env() 함수 지원하지 않는 경우 body 대체값 */
@supports not (top: env(safe-area-inset-top)) {
  body {
    background-position: center top !important;  /* 상단부터 시작 */
    background-size: cover !important;
    background-attachment: fixed !important;
    min-height: calc(100vh + 150px + 34px) !important;
    margin-top: -100px !important;
    padding-top: 100px !important;
    overflow: hidden !important;
    /* 배경 이미지가 상단바 영역부터 표시되도록 추가 설정 */
    background-origin: border-box !important;
    background-clip: border-box !important;
  }
}