/* ═══════════════════════════════════════════════════
   UBISTORM — main.css
   Animations, fullpage scroll engine, custom properties,
   and component-specific styles.
═══════════════════════════════════════════════════ */

/* 스크롤바 전체 숨김 */
html, body, * { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }

/* ── 공지 바 높이 변수 (닫힘 시 0px) ── */
:root { --announce-h: 48px; }
html.announce-hidden { --announce-h: 0px; }
@media (max-width: 820px) { :root { --announce-h: 0px; } }

/* ── Top Announcement Bar ── */
.announce-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 48px;
  background: var(--us-blue-700);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
}
html.announce-hidden .announce-bar { display: none; }
.announce-bar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--fs-body);
  color: #fff;
}
.announce-bar-more {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 26px;
  padding: 0 12px;
  color: #fff;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background 0.2s;
  background: transparent;
}
.announce-bar-more:hover { background: rgba(255,255,255,0.15); }
.announce-bar-close {
  position: absolute;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 6px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.announce-bar-close:hover { opacity: 1; }
@media (max-width: 820px) { .announce-bar { display: none; } }

html { height: 100%; }
body {
  margin: 0; padding: 0;
  height: 100%;
  font-family: var(--font-en);
  font-weight: 500;
  color: var(--us-ink-900);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow: hidden; /* fullpage가 스크롤 담당 */
}

/* 서브페이지: 뷰포트 스크롤 허용 */
html.subpage {
  overflow: visible;
  height: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) rgba(255,255,255,0.05);
}
body.subpage {
  overflow: visible;
  overflow-x: clip;
  height: auto;
  min-height: 100vh;
  background: var(--bg-deep);
}
html.subpage::-webkit-scrollbar,
body.subpage::-webkit-scrollbar { display: block; width: 6px; }
html.subpage::-webkit-scrollbar-track,
body.subpage::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); }
html.subpage::-webkit-scrollbar-thumb,
body.subpage::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.45); border-radius: 3px; }
html.subpage::-webkit-scrollbar-thumb:hover,
body.subpage::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.7); }

/* ── Fonts shorthand ── */
.font-extralight { font-weight: 500; }

/* ═══════════════════════════════════════════════════
   KEYFRAME DEFINITIONS
═══════════════════════════════════════════════════ */

/* Slogan: bottom → top */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(70px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Subcopy: left → right */
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Slide fade in */
@keyframes slideFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mobile menu slide-in from right */
@keyframes menuSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}



/* ═══════════════════════════════════════════════════
   FULLPAGE SCROLL ENGINE
═══════════════════════════════════════════════════ */
#fullpage-wrapper {
  width: 100%;
  /* JS가 translateY 로 제어 */
  will-change: transform;
  transition: transform 0.85s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.fp-section {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* ── Dot Navigation ── */
#fp-dots {
  position: fixed;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* 기본 숨김: 2번째 섹션부터 .show 로 표시 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#fp-dots.show {
  opacity: 1;
  pointer-events: auto;
}

/* ── 각 도트 버튼: pip ● + label 텍스트 ── */
.fp-dot {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  outline: none;
}

.dot-pip {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
  background: var(--us-ink-300);
  transition: background 0.3s ease, transform 0.3s ease;
}

.dot-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--ls-lg);
  text-transform: uppercase;
  color: var(--us-ink-300);
  white-space: nowrap;
  transition: color 0.3s ease, font-weight 0.3s ease;
  line-height: 1;
}

/* 활성 상태 */
.fp-dot.active .dot-pip {
  background: var(--us-blue-700);
  transform: scale(1.5);
}
.fp-dot.active .dot-label {
  color: var(--us-blue-700);
  font-weight: 500;
}

/* 호버 */
.fp-dot:hover .dot-pip  { background: var(--us-ink-500); }
.fp-dot:hover .dot-label { color: var(--us-ink-500); }

/* dark 테마 섹션 위에 올라올 경우 */
#fp-dots[data-theme="dark"] .dot-pip  { background: rgba(255,255,255,0.35); }
#fp-dots[data-theme="dark"] .dot-label { color: rgba(255,255,255,0.45); }
#fp-dots[data-theme="dark"] .fp-dot.active .dot-pip  { background: var(--us-sky-500); }
#fp-dots[data-theme="dark"] .fp-dot.active .dot-label { color: var(--us-sky-500); }
#fp-dots[data-theme="dark"] .fp-dot:hover .dot-pip  { background: rgba(255,255,255,0.75); }
#fp-dots[data-theme="dark"] .fp-dot:hover .dot-label { color: rgba(255,255,255,0.8); }

/* 1700px 이하 숨김 */
@media (max-width: 1700px) { #fp-dots { display: none; } }

/* 스와이퍼 카드와 겹칠 때 숨김 (JS가 클래스 토글) */
#fp-dots.dots-sw-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.top-gradient {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.30) 60%,
    transparent 100%
  );
  z-index: 5;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   SLIDE CONTAINER & VIDEO
═══════════════════════════════════════════════════ */
#slides-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: heroZoomOut 2s ease forwards;
}

@keyframes heroZoomOut {
  from { opacity: 0; transform: scale(1.52); }
  to   { opacity: 1; transform: scale(1); }
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.52);
  transition: opacity 2.4s ease, transform 2.4s ease;
  will-change: opacity, transform;
}

.slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Video fills the frame */
.slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Luminosity blend creates a desaturated, moody cinematic look.
     The black background underneath absorbs the colour, keeping
     the tone dark and sophisticated (legacy / premium aesthetic). */
  mix-blend-mode: luminosity;
}

/* ── Overlay: rgba(0,0,0,0.60) above the video ── */
.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   HEADER / NAV
═══════════════════════════════════════════════════ */
#site-header {
  position: fixed;          /* hero 밖으로 나왔으니 fixed로 항상 노출 */
  top: var(--announce-h, 0px); left: 0; right: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 15px 60px;
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease, top 0.3s ease;
  /* desk-nav gap: 769px→10px, 1600px→30px (로고 겹침 방지) */
  --desk-nav-gap: clamp(10px, 2.41vw - 8.5px, 30px);
}

/* ── 홈 진입 애니메이션 ── */
@keyframes headerSlideDown {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tabNavSlideUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-home #site-header {
  will-change: transform, opacity;
  animation: headerSlideDown 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-home #tab-nav {
  will-change: transform, opacity;
  animation: tabNavSlideUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* product-section 진입 후: 흰 배경으로 전환 */
#site-header.scrolled {
  /*background: rgba(255, 255, 255, 0.96);*/
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#site-header.scrolled .nav-link    { color: var(--us-ink-800); opacity: 0.7; }
#site-header.scrolled .nav-link:hover { color: var(--us-ink-950); opacity: 1; }
#site-header.scrolled .util-nav {background-color: transparent; border: 1.5px solid var(--border-strong);}
#site-header.scrolled .util-link, #site-header.scrolled .util-sep   { color: var(--us-ink-400); }
#site-header.scrolled .util-link:hover { color: var(--us-ink-950); }
#site-header.scrolled .mob-btn     { color: var(--us-ink-950); }

/* Center nav sits in the middle column */
.desk-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--desk-nav-gap);
  margin: 0 0 0 20px;
}

/* Right cluster: utility links + burger */
.header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Utility nav (기술지원센터 / 뉴스레터) */
.util-nav {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-pill);
  gap: 0;
}

.util-link {
  font-size: clamp(12px, 14/1280*100vw, 14px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 15px;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
  letter-spacing: var(--ls);
}
.util-link:hover {
  color: var(--fg-white);
}
.ext-icon {
  opacity: 0.70;
  flex-shrink: 0;
}

.util-sep {
  color: rgba(255, 255, 255, 0.20);
  font-size: 12px;
  padding: 0 2px;
  user-select: none;
}

/* Logo */
.logo img {
  min-width: 120px;
  height: 18px;
}

.nav-link {
  font-size: var(--fs-body-lg);
  letter-spacing: var(--ls);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-storm), color var(--dur-base) var(--ease-storm);
}
.nav-link:hover {
  color: var(--us-ink-000);
  opacity: 1;
}

/* ─── Nav Item / Sub Menu ─── */
.nav-item {
  position: relative;
}

/* gap 위를 투명하게 채워 hover가 끊기지 않도록 함 */
.nav-item::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  background: var(--us-blue-700);
  border-radius: var(--r-lg);
  z-index: 999;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  min-width: 160px;
  white-space: nowrap;
}

.nav-item:hover .sub-menu {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.sub-menu li a {
  display: block;
  padding: 9px 20px;
  font-size: var(--fs-body-sm);
  color: var(--us-ink-200);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.sub-menu li a:hover {
  color: var(--us-ink-000);
}
/* Mobile hamburger button */
.mob-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-white);
  padding: 4px;
  align-items: center;
  justify-content: center;
}
.mob-btn .icon-close    { display: none; }
.mob-btn.is-active .icon-hamburger { display: none; }
.mob-btn.is-active .icon-close     { display: block; }

/* ═══════════════════════════════════════════════════
   HERO TEXT CONTENT
═══════════════════════════════════════════════════ */
#hero-content {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1440px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 60px 110px;
  pointer-events: none;
}

/* Each slide's text group */
.hero-text-group {
  position: absolute;
  font-family: var(--font-en);
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% - 120px);
  /* Hidden by default; JS adds .is-visible */
  pointer-events: none;
}

/* ── Slogan ── */
.slogan-wrap { margin-bottom: 28px;}

.slogan-line {
  font-size: clamp(38px, 5.56vw, 80px);
  letter-spacing: var(--ls);
  line-height: 1.08;
  color: var(--fg-white);
  margin: 0 0 2px;
  /* Hidden until JS triggers animation */
  opacity: 0;
  transform: translateY(70px);
}

/* Each line staggers via nth-child */
.slogan-wrap .slogan-line:nth-child(1) { transition-delay: 0ms;   }
.slogan-wrap .slogan-line:nth-child(2) { transition-delay: 150ms; }

/* When .anim-slogan is added, play slideUp */
.hero-text-group.anim-slogan .slogan-line {
  animation: slideUp 5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-text-group.anim-slogan .slogan-line:nth-child(1) { animation-delay: 0ms;   }
.hero-text-group.anim-slogan .slogan-line:nth-child(2) { animation-delay: 300ms; }

/* Accent colour — shimmer sweep (슬라이드 4의 "+" 등 span.accent용) */
@keyframes MySuitShimmer {
  from { background-position: 0% center; }
  to   { background-position: -200% center; }
}
.accent {
  background: linear-gradient(
    to right,
    var(--us-sky-500),
    #3677d9,
    #28ff97,
    #28d4ff
  );
  animation: MySuitShimmer 3s linear infinite;
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}


/* ── Sub-copy ── */
.subcopy-wrap { /* lines are hidden until .anim-subcopy */ }

.subcopy-line {
  font-size: var(--fs-h4);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.9;
  margin: 0;
  opacity: 0;
  transform: translateX(-60px);
}

.hero-text-group.anim-subcopy .subcopy-line {
  animation: slideRight 5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-text-group.anim-subcopy .subcopy-line:nth-child(1) { animation-delay: 0ms;   }
.hero-text-group.anim-subcopy .subcopy-line:nth-child(2) { animation-delay: 300ms; }
.hero-text-group.anim-subcopy .subcopy-line:nth-child(3) { animation-delay: 600ms; }

/* ═══════════════════════════════════════════════════
   BOTTOM TAB NAVIGATION
═══════════════════════════════════════════════════ */
#tab-nav {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: stretch;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.70) 0%,
    rgba(0, 0, 0, 0.30) 70%,
    transparent 100%
  );
  /* Subtle track line across full nav top */
  border-top: 2px solid rgba(255, 255, 255, 0.12);
}

.tab-btn {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 28px 22px;
  background: transparent;
  border: none;
  border-top: 2px solid transparent;
  margin-top: -2px;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-base) var(--ease-storm);
  /* overflow: hidden 제거 — ::after가 top:-2px 에서 잘리지 않도록 */
}
.tab-btn:hover { background: rgba(255, 255, 255, 0.05); }

/* Active: 트랙 색 (채워지기 전 배경선) */
.tab-btn.active {
  border-top-color: rgba(40, 212, 255, 0.20);
}

/* ── 프로그래스 채움 선 ──
   JS 가 video.duration 을 읽어 --vid-dur 를 설정한 뒤
   .is-filling 클래스를 추가하면 애니메이션이 시작됩니다.  */
.tab-btn::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--us-sky-500);
  pointer-events: none;
}

.tab-btn.is-filling::after {
  animation: fillProgress var(--vid-dur, 7s) linear forwards;
}

@keyframes fillProgress {
  from { width:   0%; }
  to   { width: 100%; }
}

/* Slide number */
.tab-num {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: var(--ls);
  transition: color var(--dur-base);
}
.tab-btn.active .tab-num,
.tab-btn:hover  .tab-num {
  color: var(--us-sky-500);
}

/* Slide title (desktop only) */
.tab-title {
  width: 100%;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  transition: color var(--dur-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-btn.active .tab-title,
.tab-btn:hover  .tab-title {
  color: rgba(255, 255, 255, 0.88);
}

/* Dividers between tabs */
.tab-btn + .tab-btn::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

/* ═══════════════════════════════════════════════════
   SCROLL DOWN INDICATOR
═══════════════════════════════════════════════════ */
#scroll-down {
  position: absolute;
  bottom: 160px;
  right: 60px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.46);
  pointer-events: none;
  transform: rotate(90deg);
  transform-origin: center center;
  animation: scrollPulse 2.8s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.46; transform: rotate(90deg) translateX(0); }
  50%       { opacity: 0.75; transform: rotate(90deg) translateX(4px); }
}

.scroll-text {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  white-space: nowrap;
}

.scroll-line {
  display: block;
  width: 24px;
  height: 1px;
  background: linear-gradient(to right, rgba(40, 212, 255, 0.8), rgba(40, 212, 255, 0));
  opacity: 1;
}

/* ═══════════════════════════════════════════════════
   MOBILE FULL-SCREEN MENU
═══════════════════════════════════════════════════ */
#mob-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-deep);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none; /* JS toggles to flex */
  align-items: stretch;
}

#mob-menu.is-open {
  display: flex;
  animation: menuSlideIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mob-menu-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 28px 24px 52px;
}

.mob-menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#mob-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-white);
  padding: 4px;
}

.mob-nav {
  display: flex;
  flex-direction: column;
}

.mob-nav-item {
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
}
.mob-nav-item:last-child { border-bottom: none; }

.mob-nav-link {
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
  font-size: clamp(16px, 5.5vw, 18px);
  font-weight: 500;
  color: var(--fg-white);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.18s;
}
.mob-nav-link:hover { color: var(--us-sky-500); }

.mob-arrow {
  color: rgba(255, 255, 255, 0.30);
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.mob-nav-item.is-open .mob-arrow {
  transform: rotate(90deg);
}

.mob-sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.mob-nav-item.is-open .mob-sub-menu {
  max-height: 400px;
}
.mob-sub-menu li a {
  display: block;
  padding: 11px 8px 11px 4px;
  font-size: clamp(15px, 4vw, 18px);
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.mob-sub-menu li:last-child a { padding-bottom: 18px; }
.mob-sub-menu li a:hover { color: var(--us-sky-500); }

.mob-footer {
  margin-top: auto;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: var(--ls);
}

/* ═══════════════════════════════════════════════════
   PRODUCT SECTION
═══════════════════════════════════════════════════ */
#product-section {
  background: var(--bg-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 0 0 0;
}

.prod-inner {
  width: 100%;
}

/* ── 섹션 헤더 ── */
.prod-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1440px;
  margin: 0 auto 50px;
  padding: 0 60px;
}

/* prod-header-left 요소: 초기 숨김 상태 */
.prod-header-left .prod-label,
.prod-header-left .prod-title {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity var(--dur-slower) cubic-bezier(0.16, 1, 0.3, 1),
              transform var(--dur-slower) cubic-bezier(0.16, 1, 0.3, 1);
}

/* fp-active 진입 시 아래→위 순차 등장 */
#product-section.fp-active .prod-header-left .prod-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}
#product-section.fp-active .prod-header-left .prod-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.28s;
}

/* nav 버튼도 함께 */
.prod-nav-wrap {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.44s;
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
#product-section.fp-active .prod-nav-wrap {
  opacity: 1;
  transform: translateY(0);
}

.prod-label {
  font-size: var(--fs-eyebrow);
  color: var(--us-blue-700);
  letter-spacing: var(--ls-lg);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}

.prod-title {
  font-size: var(--fs-section-title);
  font-weight: 600;
  color: var(--us-ink-950);
  line-height: 1.22;
  margin: 0;
  letter-spacing: var(--ls);
}

/* ── 네비게이션 버튼 ── */

.prod-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border-strong);
  background: var(--bg-1);
  color: var(--us-ink-400);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-storm), border-color var(--dur-base) var(--ease-storm), transform var(--dur-fast) var(--ease-storm);
}
.prod-nav-btn:hover {
  background: #eef2ff;
  border-color: var(--us-blue-700);
  color: #3366ff;
  transform: scale(1.06);
}
.prod-nav-btn:active { transform: scale(0.96); }

/* ── Swiper: 첫 카드가 prod-title 과 같은 X 위치에서 시작 ──
   max-width: 1440px + margin: auto + padding: 60px 일 때
   left indent = max(60px, (100vw - 1440px)/2 + 60px)              */
.prod-swiper {
  padding-left: max(60px, calc((100vw - 1440px) / 2 + 60px)) !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

/* ── 4-카드 그리드 모드 ── */
.prod-swiper[data-count="4"] {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 60px !important;
  overflow: visible !important;
}
.prod-swiper[data-count="4"] .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  transform: none !important;
  width: auto !important;
}
.prod-swiper[data-count="4"] .swiper-slide {
  width: auto !important;
  height: auto !important;
}

.prod-swiper[data-count="4"] .prod-card    { height: clamp(360px, 44vh, 480px); }
@media (max-width: 1024px) {
  .prod-swiper[data-count="4"] { padding: 0 40px !important; }
  .prod-swiper[data-count="4"] .swiper-wrapper { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .prod-swiper[data-count="4"] .prod-card { height: 360px; }
}
@media (max-width: 820px) {
  .prod-swiper[data-count="4"] { padding: 0 24px !important; }
}
@media (max-width: 768px) {
  .prod-swiper[data-count="4"] .swiper-wrapper { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .prod-swiper[data-count="4"] .prod-card { height: 340px; }
}
@media (max-width: 480px) {
  .prod-swiper[data-count="4"] .swiper-wrapper { grid-template-columns: 1fr; gap: 16px; }
  .prod-swiper[data-count="4"] .prod-card { height: 320px; }
}

/* ── 제품 카드 ── */
.prod-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.prod-card {
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: clamp(400px, 50vh, 560px);
  cursor: pointer;
  position: relative;
  padding: 2em 30px 2em 30px;
  /* 초기 숨김: stagger left → right */
  opacity: 0;
  transform: translateX(-50px);
  transition: box-shadow 0.34s ease;
}
/* fp-active 진입 시 JS가 .is-visible 추가 → stagger 등장 */
.prod-card.is-visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1.8s cubic-bezier(0.25, 1, 0.5, 1),
              transform 1.8s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.34s ease;
}
.prod-card.is-visible:hover {
  transform: translateY(-10px);
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.36s ease;
  box-shadow: var(--sh-4);
}

/* ── 카드 텍스트 영역 ── */
.card-body {
  padding: 32px 32px 20px;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

.card-name {
  font-size: clamp(26px, 2vw, 30px);
  font-weight: 700;
  color: var(--fg-white);
  line-height: 1.2;
  margin: 0 0 10px;
}
.card-name strong { font-weight: 500; display: block; }

.card-desc {
  font-size: var(--fs-body-lg);
  color: #fff;
  line-height: 1.2;
  margin: 0;
}

/* ── 카드 일러스트 영역 ── */
.card-illust {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
.card-illust svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ── 카드별 배경 컬러 ── */
.card-report {
  background: var(--bg-report);
}
.card-eform {
  background: var(--bg-eform);
}
.card-formplus {
  background: var(--bg-formplue);
}
.card-magellan {
  background: var(--bg-magellan);
}
.card-aiocr {
  background: radial-gradient( circle farthest-corner at 32.7% 49.8%,  rgba(0,99,138,1) 21%, rgba(1,12,56,1) 130.2% );
}
.card-fillament {
  background: var(--us-ink-600);
}

/* ── 카드 상단 글로우 하이라이트 ── */
.card-report::before,
.card-eform::before,
.card-formplus::before,
.card-magellan::before,
.card-aiocr::before,
.card-fillament::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  opacity: 0.5;
}
.card-report::before   { background: linear-gradient(90deg, transparent, #28d4ff, transparent); }
.card-eform::before    { background: linear-gradient(90deg, transparent, #63b3ff, transparent); }
.card-formplus::before { background: linear-gradient(90deg, transparent, #c084fc, transparent); }
.card-magellan::before { background: linear-gradient(90deg, transparent, #a78bfa, transparent); }
.card-aiocr::before    { background: linear-gradient(90deg, transparent, #38bdf8, transparent); }
.card-fillament::before { background: linear-gradient(90deg, transparent, #9ca3af, transparent); }

/* ═══════════════════════════════════════════════════
   PRODUCT SECTION — 카드 텍스트 클래스 정합
   (HTML: card-info / card-badge / card-tagline)
═══════════════════════════════════════════════════ */
.card-info {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

.card-badge {
  display: inline-block;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  margin-bottom: 16px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.80);
}
.card-report   .card-badge { background: #fff;  color: var(--bg-report); }
.card-eform    .card-badge { background: #fff;  color: var(--bg-eform); }
.card-formplus .card-badge { background: #fff; color: var(--bg-formplue); }
.card-magellan .card-badge { background: #fff; color: var(--bg-magellan); }
.card-aiocr    .card-badge { background: #fff;  color: #001259; }
.card-fillament .card-badge { background: #fff; color: var(--us-ink-600); }

/* 제품명 내 em = 굵은 액센트 컬러 */
.card-name em {
  font-style: normal;
  font-weight: 700;
}
.card-report   .card-name em,
.card-eform    .card-name em,
.card-formplus .card-name em,
.card-magellan .card-name em,
.card-aiocr    .card-name em,
.card-fillament .card-name em { color: var(--us-yellow-500); }

/* 하단 태그라인 */
.card-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  position: relative;
  z-index: 2;
}

.card-tagline {
  font-size: clamp(24px, 2.01vw, 27px);
  font-weight: 200;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.08;
  margin: 0;
  letter-spacing: var(--ls);
}

.card-counter {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  background-color: rgba(0, 0, 0, 0.25);
  line-height: 1;
  letter-spacing: 0.06em;
  border-radius: var(--r-pill);
  padding: 8px;
  max-width: 70px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════
   일러스트 공통 요소 *
═══════════════════════════════════════════════════ */
/* ── 카드 01 Report ── */
.card-report-01 {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 50%;
  aspect-ratio: 269 / 288;
  background-image: url('../imgs/main/card-report-01.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
}
.card-report-02 {
  position: absolute;
  left: 11%;
  bottom: 50%;
  width: 48%;
  aspect-ratio: 139 / 96;
  background-image: url('../imgs/main/card-report-02.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.card-report-03 {
  position: absolute;
  left: 21%;
  bottom: 10%;
  width: 40%;
  aspect-ratio: 99 / 69;
  background-image: url('../imgs/main/card-report-03.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

/* ── card-report 02·03 무한 플로팅 ── */
@keyframes float-02 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes float-03 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

.card-report-02,
.card-report-03 {
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.prod-card.is-visible .card-report-02 {
  opacity: 1;
  animation: float-02 2.4s ease-in-out infinite;
  animation-delay: 0.30s;
}
.prod-card.is-visible .card-report-03 {
  opacity: 1;
  animation: float-03 2.8s ease-in-out infinite;
  animation-delay: 0.55s;
}

/* ── 카드 02 e-Form ── */
.card-eform-01 {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 50%;
  aspect-ratio: 275 / 313;
  background-image: url('../imgs/main/card-eform-01.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
}
.card-eform-02 {
  position: absolute;
  left: 49%;
  bottom: 8%;
  width: 26%;
  aspect-ratio: 71 / 41;
  background-image: url('../imgs/main/card-eform-02.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0;
}

/* ── 사인(서명) 등장 애니메이션 ──
   0→45%  : 왼쪽부터 오른쪽으로 서서히 reveal (펜으로 쓰는 느낌)
   45→65% : 완전히 표시된 상태 유지
   65→85% : 서서히 페이드아웃
   85→100%: 숨김 대기 후 재시작 */
@keyframes eform-sign {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0;   }
  5%   { clip-path: inset(0 100% 0 0); opacity: 1;   }
  50%  { clip-path: inset(0   0% 0 0); opacity: 1;   }
  68%  { clip-path: inset(0   0% 0 0); opacity: 1;   }
  84%  { clip-path: inset(0   0% 0 0); opacity: 0;   }
  100% { clip-path: inset(0 100% 0 0); opacity: 0;   }
}

.prod-card.is-visible .card-eform-02 {
  animation: eform-sign 3.6s var(--ease-storm) infinite;
  animation-delay: 1.5s;
}

/* ── 카드 03 Form+ ── */
.card-formplus-01 {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 50%;
  aspect-ratio: 259 / 299;
  background-image: url('../imgs/main/card-formplus-01.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
}
.card-formplus-02 {
  position: absolute;
  left: 19%;
  bottom: 34%;
  width: 74%;
  aspect-ratio: 195 / 64;
  background-image: url('../imgs/main/card-formplus-02.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0;
}

/* ── formplus-02: ① 서명 reveal 1회 → ② 바운스 무한 ──
   두 animation을 분리: sign(1회·forwards) + bounce(무한·delay=sign 종료 시점) */
@keyframes formplus-sign {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
  8%   { clip-path: inset(0 100% 0 0); opacity: 1; }
  100% { clip-path: inset(0   0% 0 0); opacity: 1; }
}
@keyframes formplus-bounce {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-10px); }
}

.prod-card.is-visible .card-formplus-02 {
  animation:
    formplus-sign   2.2s var(--ease-storm) 0.8s 1 forwards,
    formplus-bounce 2.0s ease-in-out             3.0s infinite;
}


/* ── 카드 04 Magellan ── */
.card-magellan-01 {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 50%;
  aspect-ratio: 264 / 268;
  background-image: url('../imgs/main/card-magellan-01.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
}
.card-magellan-02 {
  position: absolute;
  left: 80%;
  bottom: 71%;
  width: 18%;
  aspect-ratio: 24 / 24;
  background-image: url('../imgs/main/card-magellan-02.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.card-magellan-03 {
  position: absolute;
  left: 43%;
  bottom: 9%;
  width: 12%;
  aspect-ratio: 20 / 20;
  background-image: url('../imgs/main/card-magellan-03.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

@keyframes magellan-swing {
  0%, 100% { transform: translateX(-5px);    }
  50%       { transform: translateX(70px); }
}

.prod-card.is-visible .card-magellan-03 {
  animation: magellan-swing 2.8s ease-in-out infinite;
}

/* ── 카드 05 AI OCR ── */
.card-aiocr-01 {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 50%;
  aspect-ratio: 302 / 277;
  background-image: url('../imgs/main/card-aiocr-01.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
}
.card-aiocr-02 {
  position: absolute;
  left: 57%;
  bottom: 44%;
  width: 40%;
  aspect-ratio: 117 / 5;
  background-image: url('../imgs/main/card-aiocr-02.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

@keyframes aiocr-float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-10px); }
}

.prod-card.is-visible .card-aiocr-02 {
  animation: aiocr-float 2.0s ease-in-out infinite;
}

/* ── 카드 06 FillaMent ── */
.card-fillament-01 {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 50%;
  aspect-ratio: 290 / 338;
  background-image: url('../imgs/main/card-fillament-01.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
}
.card-fillament-02 {
  position: absolute;
  left: -14%;
  bottom: 62%;
  width: 40%;
  aspect-ratio: 136 / 50;
  background-image: url('../imgs/main/card-fillament-02.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.card-fillament-03 {
  position: absolute;
  left: 46%;
  bottom: 44%;
  width: 40%;
  aspect-ratio: 136 / 60;
  background-image: url('../imgs/main/card-fillament-03.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
/* ── card-fillament 02·03 무한 플로팅 ── */
@keyframes float-fillament-03 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-30px); }
}

.card-fillament-02,
.card-fillament-03 {
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.prod-card.is-visible .card-fillament-02 {
  opacity: 1;
  animation: float-02 2.4s ease-in-out infinite;
  animation-delay: 0.30s;
}
.prod-card.is-visible .card-fillament-03 {
  opacity: 1;
  animation: float-fillament-03 2.8s ease-in-out infinite;
  animation-delay: 0.55s;
}


/* ═══════════════════════════════════════════════════
   OUR COMPANY SECTION
═══════════════════════════════════════════════════ */
#company-section {
  /* 배경 이미지 + 어두운 오버레이 */
  background-image: url('../imgs/main/co-bg.webp');
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  padding: 150px 0 60px;
}

/* 다크 오버레이 */
#company-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(3, 8, 20, 0.82) 0%,
    rgba(5, 10, 24, 0.72) 50%,
    rgba(4, 10, 22, 0.78) 100%
  );
  z-index: 0;
}

/* ── Particle canvas: 오버레이 위 ── */
#co-particles {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ── 2-column inner layout ── */
.co-inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 60px;
  height: 100%;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 30px;
  align-items: center;
}

/* ══ LEFT COPY AREA ══════════════════════════════ */
.co-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.co-label {
  font-size: var(--fs-eyebrow);
  color: var(--us-sky-500);
  letter-spacing: var(--ls-lg);
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0; /* GSAP 초기 */
}

/* ── co-title: 좌→우 텍스트 색상 채움 애니메이션 ──
   GSAP이 background-position을 100%→0%로 이동시켜
   흰색이 왼쪽부터 오른쪽으로 채워지는 효과를 만든다 */
.co-title {
  font-size: var(--fs-cta-title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ls);
  margin: 0 0 32px;
  /* 2-stop gradient: 왼쪽 밝은 흰, 오른쪽 어두운 흰 */
  background: linear-gradient(to right,
    var(--us-ink-000) 50%,
    rgba(255, 255, 255, 0.18) 50%
  );
  background-size: 200% 100%;
  background-position: 100% 0;   /* 초기: 어두운쪽이 덮음 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0; /* GSAP 초기 */
}

/* co-title 강조 단어: co-title 애니메이션 완료 후 #28d4ff 좌→우 채움 */
.co-hi {
  background: linear-gradient(to right, var(--us-sky-500) 50%, var(--bg-1) 50%);
  background-size: 200% 100%;
  background-position: 100% 0; /* 초기: 흰색 표시 */
  -webkit-background-clip: text;
  background-clip: text;
  white-space:nowrap;
}

.co-desc {
  font-size: var(--fs-body-lg);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin: 0 0 40px;
  opacity: 0;
}

.co-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--fg-white);
  text-decoration: none;
  border: 1.5px solid var(--border-bright);
  border-radius: var(--r-pill);
  padding: 10px 20px;
  transition: background 0.25s ease, border-color 0.25s ease,
              gap 0.25s ease, box-shadow 0.25s ease;
  opacity: 0;
}
.co-btn:hover {
  background: rgba(40, 212, 255, 0.1);
  border-color: var(--us-blue-700);
  gap: 18px;
  color: var(--us-blue-700);
}
.co-dot {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-storm);
  color:var(--us-blue-700);
}
.co-btn:hover .co-dot { transform: translateX(3px); }

/* ══ RIGHT: 4개 개별 STATS CARDS ════════════════════ */

/* 그리드 컨테이너: 2열 align-items:start (높이 자동) */
.co-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 0;
  align-items: start;
}

/* 캐러셀 모드 (JS가 .is-carousel 추가) */
.co-grid.is-carousel {
  display: block;
  position: relative;
  width: 100%;
  /* height는 JS가 원래 그리드 높이로 고정 */
}
.co-grid.is-carousel .co-card {
  will-change: left, top;
  cursor: default;
}

/* ── 개별 카드 ── */
.co-card {
  border: 2px solid rgba(40, 212, 255, 0.23);
  border-radius: var(--r-lg);
  padding: 30px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* 미세한 내부 glow */
  box-shadow: inset 0 0 8px 0 rgba(0, 120, 255, 0.35);
  opacity: 0;           /* GSAP 초기 숨김 */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.co-card:hover {
  border-color: var(--us-sky-500);
  box-shadow:
    0 0 22px rgba(40, 212, 255, 0.14),
    0 6px 30px rgba(0, 0, 0, 0.4);
}

/* 우측 컬럼 (짝수 카드): 이미지처럼 아래로 오프셋 */
.co-card-offset {
  margin-top: 30px;
}

/* ── 카드 내부 텍스트 ── */

/* 소제목 */
.co-card-label {
  font-size: var(--fs-h4);
  color: var(--us-blue-500);
  line-height: 1.5;
  margin: 0 0 2em;
  letter-spacing: var(--ls);
}

/* 숫자 래퍼 */
.co-num-wrap {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 20px;
  line-height: 1;
}

/* 대형 숫자 */
.co-big {
  font-size: var(--fs-cta-title);
  font-weight: 700;
  color: var(--fg-white);
  letter-spacing: var(--ls);
  line-height: 1;
}

/* 단위 (Years, +, /7, st Chice) */
.co-unit-lg {
  font-size: clamp(17px, 1.67vw, 24px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.80);
  letter-spacing: var(--ls);
  align-self: flex-end;
  margin-bottom: 5px;
}

/* 영문 설명 */
.co-card-eng {
  font-size: var(--fs-body-sm);
  color: #fff;
  margin: 0;
}

/* ═══════════════════════════════════════════════════
   NEWS SECTION
═══════════════════════════════════════════════════ */
#news-section {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* 하단 패딩: 푸터가 슬라이드업 될 때 카드와 겹치지 않는 완충 공간 */
  padding: 90px 0 0 0;
}

/* 배경 이미지를 가상요소로 분리해 콘텐츠는 선명하게, 배경만 blur */
#news-section::before {
  content: '';
  position: absolute;
  inset: -40px; /* blur 가장자리 번짐 상쇄 */
  background-image: url('../imgs/main/ne-bg.webp');
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  z-index: 0;
  transition: filter 5s cubic-bezier(0.16, 1, 0.3, 1);
}

#news-section.fp-active::before {
  filter: blur(0px);
}

/* 콘텐츠가 ::before 위에 오도록 */
#news-section > * {
  position: relative;
  z-index: 1;
}

.news-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 60px;
  width: 100%;
}

/* ── fp-auto-height: 100vh 강제 해제 ── */
.fp-section.fp-auto-height {
  height: auto;
  min-height: fit-content;
  overflow: visible;
  /* min-height 보장: 콘텐츠가 적어도 화면 중간에 붕 뜨지 않게 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ── 섹션 헤더 ── */
.news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 50px;
  /* 초기 숨김 — fp:sectionActive 때 JS가 is-visible 추가 */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.3s cubic-bezier(0.16,1,0.3,1),
              transform 1.3s cubic-bezier(0.16,1,0.3,1);
}
#news-section.fp-active .news-header {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
}

.news-label {
  font-size: var(--fs-eyebrow);
  color: var(--us-blue-700);
  letter-spacing: var(--ls-lg);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}

.news-title {
  font-size: var(--fs-section-title);
  font-weight: 700;
  color: var(--us-ink-950);
  margin: 0;
  line-height: 1.2;
  letter-spacing: var(--ls);
}

.news-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--us-ink-400);
  text-decoration: none;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  white-space: nowrap;
  transition: border-color var(--dur-base) var(--ease-storm), color var(--dur-base) var(--ease-storm), background var(--dur-base) var(--ease-storm);
  flex-shrink: 0;
}
.news-more-btn:hover {
  border-color: var(--us-blue-700);
  color: var(--us-blue-700);
  background: rgba(51,102,255,0.05);
}
.news-more-dot {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-storm);
  color:var(--us-blue-700);
}
.news-more-btn:hover .news-more-dot { transform: translateX(3px); }


/* ── 카드 그리드 ── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ── 카드 ── */
.news-card {
  overflow: hidden;
  cursor: pointer;
  /* 초기 숨김: stagger left → right */
  opacity: 0;
  transform: translateX(-50px);
  transition: box-shadow 0.34s ease;
}
.news-card.is-visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1.1s cubic-bezier(0.25,1,0.5,1),
              transform 1.1s cubic-bezier(0.25,1,0.5,1),
              box-shadow 0.34s ease;
}
.news-card.is-visible:hover {
  transform: translateY(-10px);
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.36s ease;
}

/* ── 썸네일 ── */
.news-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
}

/* ── 카드 바디 ── */
.news-card-body {
  padding: 30px 0;
}

.news-badge {
  display: inline-block;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  margin-bottom: 10px;
}
.badge-product { background: var(--us-blue-900); color: #fff; }
.badge-award   { background: var(--us-teal-600); color: #fff; }
.badge-ref     { background: var(--us-blue-700); color: #fff; }

.news-card-title {
  font-size: var(--fs-body-lg);
  font-weight: 500;
  letter-spacing: var(--ls);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 반응형 ── */
@media (max-width: 1200px) {
  .news-grid { gap: 16px; }
}
/* ═══════════════════════════════════════════════════
   FOOTER SECTION (fp-auto-height)
   - 100vh 강제 없음: 콘텐츠 높이만큼만 차지
   - 푸터가 뷰포트 바닥에 스냅되어 슬라이드업으로 등장
═══════════════════════════════════════════════════ */
#footer-section {
  background: var(--bg-deep);
}

/* ── 맨위로 버튼 ── */
.back-to-top {
  position: fixed;
  right: 32px;
  bottom: 40px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(19, 27, 44, 0.72);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--us-blue-700);
  border-color: transparent;
}
@media (max-width: 768px) {
  .back-to-top { right: 20px; bottom: 28px; width: 40px; height: 40px; }
}

.site-footer {
  width: 100%;
  background: var(--bg-deep);
  padding: 48px 60px 40px;
  max-width: 1440px;
  margin: 0 auto;
}

/* ── 상단 라인: 회사명 | 링크 ── */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
}

.footer-company-name {
  font-size: var(--fs-body-lg);
  font-weight: 500;
  color: var(--fg-white);
  letter-spacing: var(--ls);
  margin: 0;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-links a {
  font-size: var(--fs-body-sm);
  color: var(--us-ink-400);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--fg-white); }
.footer-links span {
  font-size: var(--fs-body-sm);
  color: var(--border-on-deep);
  user-select: none;
}

/* ── 사이트맵 ── */
.footer-sitemap {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  padding: 28px 0 32px;
  border-top: 1.5px solid var(--border-on-deep);
  border-bottom: 1.5px solid var(--border-on-deep);
  margin-bottom: 28px;
}

.footer-smap-col { padding-right: 20px; }

.footer-smap-title {
  font-family: var(--font-en);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--us-ink-400);
  margin: 0 0 12px;
}

.footer-smap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-smap-list a {
  font-size: var(--fs-body-sm);
  color: var(--us-ink-400);
  text-decoration: none;
  line-height: var(--lh-caption);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-smap-list a:hover { color: rgba(255,255,255,0.90); }

/* ── 중단 라인: 정보 + QR ── */
.footer-mid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 1.5px solid var(--border-on-deep);
  margin-bottom: 24px;
  gap: 40px;
}

.footer-info { flex: 1; }

.footer-info-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 14px;
  color: var(--us-ink-400);
  line-height: 1.6;
}
.footer-sep { 
  color: var(--border-on-deep); 
  user-select: none; 
}
.footer-tel {
  font-size: var(--fs-body-lg);
  font-weight: 700;
}
.footer-mail {
  color: var(--us-ink-400);
  text-decoration: underline;
  transition: color 0.2s ease;
}
.footer-mail:hover { color: rgba(255,255,255,0.85); }

/* QR 박스 */
.footer-qr { flex-shrink: 0; }
.footer-qr-box {
  width: 84px;
  height: 84px;
  background: var(--bg-1);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.footer-qr-box img { width: 100%; height: 100%; object-fit: contain; }

/* ── 하단 라인: 카피라이트 + 인증 ── */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copy {
  font-size: 14px;
  color: var(--us-ink-400);
  margin: 0;
}

.footer-certs {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cert-item { display: flex; align-items: center; }

.cert-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: default;
}
.cert-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ═══════════════════════════════════════════════════
   SUBPAGE — 공통
═══════════════════════════════════════════════════ */

/* 서브페이지 헤더: 처음부터 solid 배경 */
#site-header[data-nav="product"],
#site-header[data-nav="solution"],
#site-header[data-nav="info"] {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* background: rgba(10, 10, 20, 0.82); */
}
#site-header[data-nav="product"] .nav-link,
#site-header[data-nav="solution"] .nav-link,
#site-header[data-nav="info"] .nav-link {
  color: rgba(255, 255, 255, 0.75);
}
#site-header[data-nav="product"] .nav-link:hover,
#site-header[data-nav="solution"] .nav-link:hover,
#site-header[data-nav="info"] .nav-link:hover {
  color: #fff;
}

/* 서브페이지 헤더: 밝은 섹션 진입 시 light 테마 */
#site-header[data-nav="product"].scrolled,
#site-header[data-nav="solution"].scrolled,
#site-header[data-nav="info"].scrolled {
  background: rgba(255, 255, 255, 0.6);
}
#site-header[data-nav="product"].scrolled .nav-link,
#site-header[data-nav="solution"].scrolled .nav-link,
#site-header[data-nav="info"].scrolled .nav-link {
  color: var(--us-ink-800);
  opacity: 0.7;
}
#site-header[data-nav="product"].scrolled .nav-link:hover,
#site-header[data-nav="solution"].scrolled .nav-link:hover,
#site-header[data-nav="info"].scrolled .nav-link:hover {
  color: var(--us-ink-950);
  opacity: 1;
}
#site-header[data-nav="product"].scrolled .util-link,
#site-header[data-nav="solution"].scrolled .util-link,
#site-header[data-nav="info"].scrolled .util-link,
#site-header[data-nav="product"].scrolled .util-sep,
#site-header[data-nav="solution"].scrolled .util-sep,
#site-header[data-nav="info"].scrolled .util-sep {
  color: var(--us-ink-400);
}
#site-header[data-nav="product"].scrolled .util-link:hover,
#site-header[data-nav="solution"].scrolled .util-link:hover,
#site-header[data-nav="info"].scrolled .util-link:hover,
#site-header[data-nav="product"].scrolled .util-sep:hover,
#site-header[data-nav="solution"].scrolled .util-sep:hover,
#site-header[data-nav="info"].scrolled .util-sep:hover {
  color: var(--us-ink-600);
}
#site-header[data-nav="product"].scrolled .mob-btn,
#site-header[data-nav="solution"].scrolled .mob-btn,
#site-header[data-nav="info"].scrolled .mob-btn {
  color: var(--us-ink-950);
}

/* 서브 메인 영역 */
#sub-main {
  min-height: 100vh;
  padding-top: 80px;
}

/* 서브 히어로 */
.sub-hero {
  background: var(--bg-1);
  padding: 80px 0 60px;
  border-bottom: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
}
.sub-hero-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--us-primary, #00aaff);
  margin-bottom: 12px;
}
.sub-hero-title {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--us-ink-950);
  margin: 0;
}

/* 서브 콘텐츠 */
.sub-content {
  padding: 80px 0;
}

/* 서브 푸터 */
.sub-footer {
  background: var(--bg-1);
  border-top: 1.5px solid var(--border-subtle, rgba(0,0,0,0.08));
  max-width: 100%;
  padding: 48px 60px 40px;
}

/* 서브페이지 footer: QR·인증 이미지 크기 축소 */

/* ── Breadcrumb (공통) ── */
.prod-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--us-ink-000);
  list-style: none;
  padding: 0;
  margin: 0;
  opacity: 0.65;
}
.prod-breadcrumb a { color: inherit; text-decoration: none; }
.prod-breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.prod-breadcrumb-sep { opacity: 0.6; }
.prod-breadcrumb img { width: 15px; height: 15px; margin-bottom: 4px; vertical-align: middle; display: inline-block; }

/* ── Buttons (공통) ── */
.prod-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 22px;
  background: var(--us-blue-700);
  color: var(--us-ink-000);
  border: 1.5px solid var(--us-blue-700);
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}
.prod-btn-primary:hover {
  background: var(--us-blue-800);
  border-color: var(--us-blue-800);
  gap: var(--sp-3);
}

.prod-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 22px;
  background: transparent;
  color: var(--us-ink-000);
  border: 1.5px solid var(--border-bright);
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, gap 0.25s ease, color 0.25s ease;
}
.prod-btn-outline:hover {
  border-color: var(--us-blue-500);
  gap: var(--sp-3);
  color: var(--us-blue-500);
}

.prod-btn-dot {
  display: inline-block;
  font-style: normal;
  transition: transform 0.25s ease;
}
.prod-btn-primary:hover .prod-btn-dot,
.prod-btn-outline:hover .prod-btn-dot { transform: translate(2px, -2px); }

/* ── Typing Title (공통) ── */
@keyframes usBlink {
  50% { opacity: 0; }
}

.us-typing-title::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: currentColor;
  margin-left: 4px;
  vertical-align: middle;
  animation: usBlink 0.5s step-end infinite alternate;
}
.us-typing-title.done::after { display: none; }


/* ═══════════════════════════════════════════════════
   서브페이지 공통 유틸리티
   (about / solution / addon 페이지 공유 — HTML 변경 없이 DRY 적용)
═══════════════════════════════════════════════════ */

/* ① 내부 컨테이너: max 1440px, 좌우 60px */
.ab-inner,
.mg-inner,
.lx-inner,
.pv-inner,
.sub-hero-inner,
.sub-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 60px;
  width: 100%;
  box-sizing: border-box;
}

/* ② Eyebrow label 베이스: 대문자 + 와이드 트래킹 */
.ab-section-label,
.ab-vision-sub-label,
.ab-vision-card-en,
.mg-hero-label,
.mg-label,
.lx-label,
.pv-label {
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-lg);
  text-transform: uppercase;
}

/* ③ 섹션 헤더 하단 여백 */
.mg-section-header,
.lx-section-header,
.pv-section-header { margin-bottom: 80px; }

/* ④ 섹션 타이틀 */
.mg-title,
.lx-title,
.pv-title {
  font-size: var(--fs-section-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tr-h2);
  margin: 0;
}

/* ⑤ 섹션 설명 */
.mg-desc,
.lx-desc,
.pv-desc {
  font-size: var(--fs-body-lg);
  color: var(--us-ink-500);
  letter-spacing: var(--ls);
  margin: 20px 0 0;
}

/* ⑥ 2열 카드 그리드 */
.mg-card-grid,
.lx-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ⑦ 카드 베이스 */
.mg-card,
.lx-card {
  background: var(--us-paper-warm);
  border: 1.5px solid var(--us-ink-150);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.mg-card:hover,
.lx-card:hover { border-color: var(--us-ink-200); }

/* ⑧ 서브페이지 Hero 레이아웃 */
.mg-hero,
.lx-hero,
.pv-hero,
.ref-hero,
.inq-hero,
.board-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: calc(var(--header-h) + 60px) 60px 0;
}
.mg-hero > *,
.lx-hero > *,
.pv-hero > *,
.ref-hero > *,
.inq-hero > *,
.board-hero > * { position: relative; z-index: 1; }

/* ⑨ Hero inner 공통 */
.mg-hero-inner,
.lx-hero-inner,
.pv-hero-inner,
.ref-hero-inner,
.inq-hero-inner,
.board-hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 30px;
  background: #e1e2e4;
  border-radius: var(--r-2xl);
  overflow: hidden;
  animation: subHeroZoomOut 2.0s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.mg-hero-inner::before,
.lx-hero-inner::before,
.pv-hero-inner::before,
.ref-hero-inner::before,
.inq-hero-inner::before,
.board-hero-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to right, transparent 35%, black 70%, black 90%);
  mask-image: linear-gradient(to right, transparent 35%, black 70%, black 90%);
}
.mg-hero-inner .prod-breadcrumb,
.lx-hero-inner .prod-breadcrumb,
.pv-hero-inner .prod-breadcrumb,
.ref-hero-inner .prod-breadcrumb,
.inq-hero-inner .prod-breadcrumb,
.board-hero-inner .prod-breadcrumb { color: var(--us-ink-900); opacity: 1; }

/* ⑩ Hero 타이틀 + 커서 */
.mg-hero-title,
.lx-hero-title,
.pv-hero-title,
.ref-hero-title,
.inq-hero-title {
  font-size: clamp(34px, 5.2vw, 76px);
  font-weight: 600;
  color: var(--us-blue-700);
  letter-spacing: var(--ls);
}
.mg-hero-title::after,
.lx-hero-title::after,
.pv-hero-title::after,
.ref-hero-title::after,
.inq-hero-title::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: var(--us-blue-700);
  margin-left: 4px;
  vertical-align: middle;
  animation: subBlink 0.5s steps(1) infinite alternate;
}
.mg-hero-title.done::after,
.lx-hero-title.done::after,
.pv-hero-title.done::after,
.ref-hero-title.done::after,
.inq-hero-title.done::after { display: none; }

/* ⑪ Hero 설명 & 버튼 */
.mg-hero-desc,
.lx-hero-desc,
.pv-hero-desc,
.ref-hero-desc,
.inq-hero-desc {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--us-ink-500);
  letter-spacing: var(--ls);
  margin: 0;
  animation: subFadeUp 1.0s cubic-bezier(0.16, 1, 0.3, 1) 1.7s both;
  margin-bottom: 20px;
}
.mg-hero-btns,
.lx-hero-btns,
.pv-hero-btns,
.ref-hero-btns,
.inq-hero-btns {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  animation: subFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 2.5s both;
}

/* ⑫ Reveal 애니메이션: solution / addon 공통 */
.mg-reveal,
.lx-reveal,
.pv-reveal,
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.mg-reveal.active,
.lx-reveal.active,
.pv-reveal.active,
.reveal.active { opacity: 1; transform: none; }

.mg-reveal-stagger .mg-reveal:nth-child(1),
.lx-reveal-stagger .lx-reveal:nth-child(1),
.pv-reveal-stagger .pv-reveal:nth-child(1),
.reveal-stagger .reveal:nth-child(1) { transition-delay: 0s;    }
.mg-reveal-stagger .mg-reveal:nth-child(2),
.lx-reveal-stagger .lx-reveal:nth-child(2),
.pv-reveal-stagger .pv-reveal:nth-child(2),
.reveal-stagger .reveal:nth-child(2) { transition-delay: 0.13s; }
.mg-reveal-stagger .mg-reveal:nth-child(3),
.lx-reveal-stagger .lx-reveal:nth-child(3),
.pv-reveal-stagger .pv-reveal:nth-child(3),
.reveal-stagger .reveal:nth-child(3) { transition-delay: 0.26s; }
.mg-reveal-stagger .mg-reveal:nth-child(4),
.lx-reveal-stagger .lx-reveal:nth-child(4),
.pv-reveal-stagger .pv-reveal:nth-child(4),
.reveal-stagger .reveal:nth-child(4) { transition-delay: 0.39s; }
.mg-reveal-stagger .mg-reveal:nth-child(5),
.lx-reveal-stagger .lx-reveal:nth-child(5),
.pv-reveal-stagger .pv-reveal:nth-child(5),
.reveal-stagger .reveal:nth-child(5) { transition-delay: 0.52s; }
.mg-reveal-stagger .mg-reveal:nth-child(6),
.lx-reveal-stagger .lx-reveal:nth-child(6),
.pv-reveal-stagger .pv-reveal:nth-child(6),
.reveal-stagger .reveal:nth-child(6) { transition-delay: 0.65s; }
.mg-reveal-stagger .mg-reveal:nth-child(7),
.lx-reveal-stagger .lx-reveal:nth-child(7),
.reveal-stagger .reveal:nth-child(7) { transition-delay: 0.78s; }

/* ⑬ 공유 Keyframes */
@keyframes subHeroZoomOut {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes subFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes subBlink {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* ── Image Lightbox (모바일 전용) ── */
@media (max-width: 768px) {
  .prod-breadcrumb { display: none; }

  .img-zoom {
    cursor: zoom-in;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.08);
    display: block;
    width: 100%;
  }
  .img-zoom-wrap {
    position: relative;
    display: block;
  }
  .img-zoom-wrap::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background:
      rgba(0, 0, 0, 0.45)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='22' y2='22'/%3E%3C/svg%3E")
      center / 20px no-repeat;
    pointer-events: none;
  }

  .mg-hero-desc,
  .lx-hero-desc,
  .pv-hero-desc,
  .ref-hero-desc,
  .inq-hero-desc { font-size: var(--fs-body-sm); }
}

#img-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.88);
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  overscroll-behavior: none;
  touch-action: none;
}
#img-lightbox.is-open { display: flex; }
#img-lightbox-img {
  max-width: 100%;
  max-height: 90svh;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  cursor: zoom-out;
  touch-action: none;
  will-change: transform;
  transform-origin: center center;
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE — max-width: 1024px  (태블릿)
   · body 스크롤 허용 · fullpage 비활성화
   · 헤더/히어로/탭 · 제품/회사/뉴스/푸터 여백 축소
═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ─ BODY / SCROLL ─ */
  body                  { overflow: auto; }
  html, body            { overflow-x: hidden; max-width: 100%; }

  /* ─ FULLPAGE ENGINE ─ */
  #fullpage-wrapper {
    transform: none !important;
    transition: none !important;
    overflow-x: hidden;
  }
  .fp-section           { height: auto; overflow: hidden; overflow-y: visible; }
  /* 태블릿: 히어로는 전체 높이 유지 */
  #hero                 { height: 100vh; overflow: hidden; }
  .slide.is-active      { opacity: 1; }
  #fp-dots              { display: none; }
  #company-section      { padding: 80px 0 !important; }
  .news-card-body       { padding: 15px 0 30px 0 !important; }

  /* ─ SITE HEADER & HERO ─ */
  #site-header          { padding: 24px 40px; }
  #hero-content         { padding: 100px 40px 100px; }
  .hero-text-group      { width: calc(100% - 80px); }
  .tab-btn              { padding: 16px 20px 20px; }
  #scroll-down          { right: 40px; }

  /* ─ PRODUCT SECTION ─ */
  #product-section      { padding: 90px 0; }
  .prod-header          { padding: 0 40px; margin-bottom: 32px; }
  .prod-swiper          { padding-left: max(40px, calc((100vw - 1440px) / 2 + 40px)) !important; }

  /* ─ OUR COMPANY SECTION ─ */
  .co-inner             { padding: 0 40px; gap: 48px; }
  .co-card              { padding: 24px 20px; }
  .co-card-offset       { margin-top: 44px; }

  /* ─ NEWS SECTION ─ */
  .news-inner           { padding: 0 40px; }
  .news-grid            { grid-template-columns: repeat(2, 1fr); }

  /* ─ FOOTER ─ */
  .site-footer          { padding: 44px 40px 36px; }
  .footer-sitemap       { grid-template-columns: repeat(5, 1fr); gap: 0; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — max-width: 820px  (모바일)
   · 헤더 2열(logo|burger) · 히어로 75vh · 탭 숫자만
   · 제품/회사/뉴스 1열 · GSAP 애니 강제 노출 · 푸터
═══════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* ─ FULLPAGE / HERO ─ */
  #hero                        { height: 75vh; min-height: 0; }
  /* Slide 03: 피사체 우측 편중 → 모바일 크롭 기준 이동 */
  .slide[data-index="2"] video { object-position: 70% center; }

  /* ─ NAV SUB MENU ─ */
  .sub-menu                    { display: none; }

  /* ─ SITE HEADER ─ */
  #site-header {
    grid-template-columns: 1fr auto;
    padding: 18px 24px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  #site-header.scrolled        { padding: 18px 24px; }
  .desk-nav                    { display: none; }
  .util-nav                    { display: none; }
  .mob-btn                     { display: flex; }
  .logo img                    { height: 14px; }

  /* ─ HERO CONTENT ─ */
  #hero-content                { padding: 80px 24px 90px; }
  .hero-text-group             { width: calc(100% - 48px); }
  #scroll-down                 { display: none; }

  /* ─ HERO TAB NAV ─ */
  .tab-btn                     { padding: 14px 0 16px; justify-content: center; align-items: center; }
  .tab-title                   { display: none; }
  .tab-num                     { font-size: 12px; }
  .tab-btn + .tab-btn::before  { top: 10px; bottom: 10px; }

  /* ─ PRODUCT SECTION ─ */
  #product-section             { padding: 80px 0; justify-content: flex-start; }
  .prod-header                 { padding: 0 24px; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
  .prod-swiper                 { padding-left: 24px !important; }
  .prod-card                   { height: 380px; }

  /* ─ OUR COMPANY SECTION ─ */
  .co-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    height: auto;
    overflow-y: auto;
  }
  .co-left br                  { display: none; }
  .co-grid                     { grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 12px; }
  .co-card                     { padding: 20px 16px; }
  .co-card-offset              { margin-top: 0; }
  .co-unit-lg                  { margin-bottom: 5px; }
  .co-title                    { font-size: 24px; }
  .co-card-label br            { display: none; }

  /* ─ NEWS SECTION + GSAP 애니메이션 강제 노출 ─
     goTo() 미호출 환경에서 IO 발동 전 요소들이
     opacity:0 상태로 숨겨지지 않도록 기본 표시 상태로 전환 */
  .prod-header-left .prod-label,
  .prod-header-left .prod-title,
  .prod-nav-wrap               { opacity: 1 !important; transform: none !important; transition: none !important; }
  #news-section                { align-items: flex-start; padding-top: 80px; padding-bottom: 40px; }
  .news-inner                  { padding: 0 24px; }
  .news-header                 { flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
  .news-grid                   { grid-template-columns: repeat(2, 1fr); }
  .fp-section.fp-auto-height   { height: auto; }
  .prod-card                   { opacity: 1 !important; transform: translateY(0) !important; }
  .news-card                   { opacity: 1 !important; transform: translateX(0) !important; }
  .news-header                 { opacity: 1 !important; transform: translateY(0) !important; }
  #co-label, #co-title,
  #co-desc,  #co-btn           { opacity: 1 !important; }
  #co-title                    { background-position: 0% 0 !important; }
  .co-hi                       { background-position: 0% 0 !important; }
  #co-card-0, #co-card-1,
  #co-card-2, #co-card-3       { opacity: 1 !important; transform: translateY(0) !important; }

  /* ─ SUBPAGE COMMON ─ */
  .sub-hero                    { padding: 60px 0 40px; }
  .sub-hero-inner,
  .sub-inner                   { padding: 0 24px; }
  .sub-footer                  { padding: 40px 24px 32px; }

  /* ─ FOOTER ─ */
  .site-footer                 { padding: 44px 24px 36px; text-align: center; }
  .footer-top                  { flex-direction: column; align-items: center; gap: 14px; }
  .footer-links                { justify-content: center; }
  .footer-sitemap              { display: none; }
  .footer-mid                  { flex-direction: column; align-items: center; }
  .footer-info-row             { justify-content: center; }
  .footer-qr                   { margin-left: 0; }
  .footer-bottom               { flex-direction: column; gap: 16px; }
  .footer-certs                { justify-content: center; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — max-width: 480px  (소형 모바일)
   · 탭 번호 축소 · 회사/뉴스 카드 단열
═══════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ─ HERO TAB NAV ─ */
  .tab-num   { font-size: 11px; letter-spacing: var(--ls); }

  /* ─ OUR COMPANY & NEWS ─ */
  .co-grid   { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════
   개인정보처리방침 모달 (전 페이지 공통)
══════════════════════════════════════════════════ */
.inq-modal[hidden] { display: none; }
.inq-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  animation: modalFadeIn 0.22s ease;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.inq-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11,18,32,0.6);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.inq-modal-box {
  position: relative;
  z-index: 1;
  background: var(--bg-1);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 680px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(11,18,32,0.24);
  animation: modalSlideUp 0.25s cubic-bezier(0.22,1,0.36,1);
}
@keyframes modalSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.inq-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 20px;
  border-bottom: 1.5px solid var(--border-1);
  flex-shrink: 0;
}
.inq-modal-title {
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: var(--ls);
  margin: 0;
}
.inq-modal-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--us-ink-400);
  display: flex;
  align-items: center;
  border-radius: var(--r-sm);
  transition: color 0.15s, background 0.15s;
}
.inq-modal-close:hover { color: var(--fg-1); background: var(--bg-2); }
.inq-modal-body {
  overflow-y: auto;
  padding: 24px 28px;
  flex: 1;
  font-size: var(--fs-body-sm);
  color: var(--us-ink-600);
  letter-spacing: var(--ls);
  line-height: 1.75;
}
.inq-modal-body p { margin: 0 0 14px; }
.inq-pp-intro { color: var(--us-ink-700); }
.inq-pp-date  { color: var(--us-ink-500); margin-bottom: 24px !important; }
.inq-pp-h {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: var(--ls);
  margin: 24px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border-1);
}
.inq-pp-h:first-of-type { border-top: none; padding-top: 0; }
.inq-pp-note { color: var(--us-ink-400); font-size: var(--fs-micro); }
.inq-modal-foot {
  padding: 16px 28px 24px;
  border-top: 1.5px solid var(--border-1);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .inq-modal { padding: 0; align-items: flex-end; }
  .inq-modal-box { max-width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 88vh; }
}
.inq-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 48px;
  background: var(--us-blue-700);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: var(--ls);
  cursor: pointer;
  transition: background 0.2s;
}
.inq-submit-btn:hover:not(:disabled) { background: #0040b0; }
.inq-submit-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.inq-submit-spinner { display: none; animation: inqSpin 0.8s linear infinite; }
.inq-submit-btn.is-loading .inq-submit-arrow { display: none; }
.inq-submit-btn.is-loading .inq-submit-spinner { display: block; }
@keyframes inqSpin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════
   그누보드 BOARD 공통 레이아웃
══════════════════════════════════════════════════ */

/* sub-main 패딩 제거 (hero가 header 여백 자체 처리) */
.page-board #sub-main { padding-top: 0; background: var(--bg-1); }

/* hero: inquiry.css와 동일한 배경 이미지 재사용 */
.board-hero-inner { animation: none; gap: 10px; }
.board-hero-inner::before {
  background: url('../imgs/support/hero-bg.webp') right center / cover no-repeat;
  animation: subHeroZoomOut 2.0s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.board-hero-inner .inq-hero-title { color: var(--us-ink-900); font-size: var(--fs-h1); }

/* board 본문 영역 — inner 공통 규칙 준수 */
.board-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 60px 100px;
  box-sizing: border-box;
  font-size: var(--fs-body);
}
#bo_v_box {
  word-break: keep-all;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 그누보드 기본 CSS 보정 */
.board-wrap a { color: var(--us-ink-900); }
.board-wrap input, .board-wrap textarea, .board-wrap select {
  font-family: inherit;
  font-size: inherit;
}
.board-wrap .pg_wrap { float: none; display: flex; justify-content: center; width: 100%; }
.board-wrap .td_num,
.board-wrap .td_datetime { white-space: nowrap; }
#bo_list tbody tr:hover { background: var(--bg-2); }
.board-wrap .pg_current,
.board-wrap .pg_current .btn_list { background: var(--us-blue-700); border-color: var(--us-blue-700); color: #fff; }


@media (max-width: 1024px) {
  .board-wrap { padding: 60px 40px 80px; }
}
@media (max-width: 820px) {
  .board-hero { padding: calc(var(--header-h) + 0px) 0 0; }
  .board-hero-inner { border-radius: var(--r-none); padding: 40px 24px; }
  .board-wrap { padding: 40px 24px 60px; }

  /* 모바일 게시판 목록 — 제목만 표시 */
  #bo_list thead,
  #bo_list .td_chk,
  #bo_list .td_num2,
  #bo_list .td_name,
  #bo_list .td_num,
  #bo_list .td_datetime { display: none; }
  #bo_list .td_subject { width: 100%; }
}

/* ──────────────────────────────────────────────────
   그누보드 스킨 공통 (basic + gallery 공유)
   url() 의존 규칙 3개는 각 스킨 style.css에 유지
────────────────────────────────────────────────── */
#bo_cate {margin:25px 0}
#bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_cate ul {zoom:1}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_cate li {display:inline-block;padding:2px}
#bo_cate a {display:block;line-height:28px;padding:5px 15px;border-radius:30px;border:1px solid #d6e9ff;color:#6794d3}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none;background:#3a8afd;color:#fff}
#bo_cate #bo_cate_on {z-index:2;background:#3a8afd;color:#fff;font-weight:bold;border:1px solid #3a8afd;-webkit-box-shadow:inset 0 2px 5px rgb(33,135,202);-moz-box-shadow:inset 0 2px 5px rgb(33,135,202);box-shadow:inset 0 2px 5px rgb(33,135,202)}
.td_subject img {margin-left:3px}
.selec_chk {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
.chk_box {position:relative}
.chk_box input[type="checkbox"] + label {position:relative;padding-left:20px;color:#676e70;vertical-align:baseline}
.chk_box input[type="checkbox"] + label:hover {color:#2172f8}
.chk_box input[type="checkbox"] + label span {position:absolute;top:10px;left:10px;width:15px;height:15px;display:block;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.write_div .chk_box input[type="checkbox"] + label, .bo_vc_w .chk_box input[type="checkbox"] + label {padding-left:20px}
.write_div .chk_box input[type="checkbox"] + label span, .bo_vc_w .chk_box input[type="checkbox"] + label span {position:absolute;top:2px;left:0;width:15px;height:15px;display:block;margin:0;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.chk_box input[type="checkbox"]:checked + label {color:#000}
.all_chk.chk_box input[type="checkbox"] + label span {top:0;left:0}
#bo_btn_top {margin:10px 0}
#bo_btn_top:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx {margin-bottom:5px;float:right;zoom:1}
.bo_fx:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx ul {margin:0;padding:0;list-style:none}
#bo_list_total {float:left;line-height:34px;font-size:0.92em;color:#4e546f}
.btn_bo_user {float:right;margin:0;padding:0;list-style:none}
.btn_bo_user li {float:left;width:40px;text-align:center;margin-left:5px;background:#fff}
.btn_bo_user > li {position:relative}
.btn_bo_adm {float:left}
.btn_bo_adm li {float:left;margin-right:5px}
.btn_bo_adm input {padding:0 8px;border:0;background:#d4d4d4;color:#666;text-decoration:none;vertical-align:middle}
.bo_notice td {background:#fff6fa !important;border-bottom:1px solid #f8e6ee}
.bo_notice td a {font-weight:bold}
.bo_notice .notice_icon {display:inline-block;line-height:25px;border-radius:5px;font-weight:bold;color:#f9267f}
.more_opt {display:none;position:absolute;top:45px;right:0;background:#fff;border:1px solid #b8bfc4;z-index:999}
.more_opt:before {content:"";position:absolute;top:-8px;right:13px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent}
.more_opt:after {content:"";position:absolute;top:-6px;right:13px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.more_opt li {border-bottom:1px solid #f1f1f1;padding:10px;float:inherit;width:90px;margin:0;color:#6b757c;text-align:left}
.more_opt li:last-child {border-bottom:0}
.more_opt li button, .more_opt li a {width:100%;border:0;background:#fff;color:#6b757c}
.more_opt li:hover a, .more_opt li:hover button {color:#000}
.more_opt li i {float:right;line-height:20px}
.td_num strong {color:#000}
.bo_cate_link {display:inline-block;background:#e2eaf6;color:#3a8afd;font-weight:normal !important;height:20px;line-height:10px;padding:5px 8px;border-radius:5px;font-size:0.95em}
.bo_cate_link:hover {text-decoration:none}
.bo_current {color:#e8180c}
.bo_sch_wrap {display:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999}
.bo_sch {position:absolute;top:50%;left:50%;background:#fff;text-align:left;width:330px;max-height:300px;margin-left:-125px;margin-top:-180px;overflow-y:auto;border-radius:5px;-webkit-box-shadow:1px 1px 18px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 18px rgba(0,0,0,0.2);box-shadow:1px 1px 18px rgba(0,0,0,0.2);border:1px solid #dde7e9;border-radius:3px}
.bo_sch:after {display:block;visibility:hidden;clear:both;content:""}
.bo_sch h3 {padding:15px;border-bottom:1px solid #e8e8e8}
.bo_sch legend {background:red}
.bo_sch form {padding:15px;display:block}
.bo_sch select {border:0;width:100%;height:40px;border:1px solid #d0d3db;border-radius:2px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}
.bo_sch .sch_bar {display:inline-block;width:100%;clear:both;margin-top:15px;border:1px solid #d0d3db;border-radius:2px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}
.bo_sch .sch_input {width:250px;height:38px;border:0;padding:0;background-color:transparent;float:left}
.bo_sch .sch_btn {height:38px;float:right;color:#656565;background:none;border:0;min-width:27px;font-size:15px}
.bo_sch .bo_sch_cls {position:absolute;right:0;top:0;color:#b5b8bb;border:0;padding:12px 15px;font-size:16px;background:#fff}
.bo_sch_bg {background:rgba(0,0,0,0.1);width:100%;height:100%}
#char_count_desc {display:block;margin:0 0 5px;padding:0}
#char_count_wrap {margin:5px 0 0;text-align:right}
#char_count {font-weight:bold}
#autosave_wrapper {position:relative}
#autosave_pop {display:none;z-index:10;position:absolute !important;top:34px;right:0;width:350px;height:auto !important;height:180px;max-height:180px;border:1px solid #565656;background:#fff;-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
#autosave_pop:before {content:"";position:absolute;top:-8px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #000 transparent}
#autosave_pop:after {content:"";position:absolute;top:-7px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
html.no-overflowscrolling #autosave_pop {height:auto;max-height:10000px !important}
#autosave_pop strong {position:absolute;font-size:0;line-height:0;overflow:hidden}
#autosave_pop div {text-align:center;margin:0 !important}
#autosave_pop button {margin:0;padding:0;border:0}
#autosave_pop ul {padding:15px;border-top:1px solid #e9e9e9;list-style:none;overflow-y:scroll;height:130px;border-bottom:1px solid #e8e8e8}
#autosave_pop li {padding:8px 5px;border-bottom:1px solid #fff;background:#eee;zoom:1}
#autosave_pop li:after {display:block;visibility:hidden;clear:both;content:""}
#autosave_pop a {display:block;float:left}
#autosave_pop span {display:block;float:right;font-size:0.92em;font-style:italic;color:#999}
.autosave_close {cursor:pointer;width:100%;height:30px;background:none;color:#888;font-weight:bold;font-size:0.92em}
.autosave_close:hover {background:#f3f3f3;color:#3597d9}
.autosave_content {display:none}
#bo_v {margin-bottom:20px;background:#fff;box-sizing:border-box}
#bo_v p {margin:0}
#bo_v_table {position:absolute;top:0;right:16px;margin:0;padding:0 5px;height:25px;background:#ff3061;color:#fff;font-weight:bold;line-height:2.2em}
#bo_v_title .bo_v_cate {display:inline-block;line-height:20px;background:#e2eaf6;color:#3a8afd;padding:0 10px;border-radius:3px}
#bo_v_title .bo_v_tit {display:block;font-size:var(--fs-h3);margin:5px 0 0;}
#bo_v_info {margin:0;border-bottom:1px solid #f1f1f1;color:#666}
#bo_v_info:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_info h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_info .profile_info {margin:20px 0 10px;display:inline-block;float:left}
#bo_v_info .profile_info .pf_img {float:left;margin-right:10px}
#bo_v_info .profile_info .pf_img img {border-radius:50%;width:50px;height:50px}
#bo_v_info .profile_info .profile_info_ct {float:left;line-height:1.6rem}
#bo_v_info strong {display:inline-block;margin:0 10px 0 0;font-weight:normal}
#bo_v_info .sv_member, #bo_v_info .sv_guest, #bo_v_info .member, #bo_v_info .guest {font-weight:bold}
#bo_v_info .profile_img {display:none}
#bo_v_info .sv_member {color:#000}
#bo_v_info .if_date {margin:0;color:#888}
#bo_v_file h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_file ul, #bo_v_link ul {margin:0;list-style:none}
#bo_v_file li, #bo_v_link li {padding:15px;position:relative;margin:10px 0;border:1px solid #dfdfdf;border-radius:5px;-webkit-box-shadow:1px 1px 5px 0px hsl(232,36%,96%);-moz-box-shadow:1px 1px 5px 0px hsl(232,36%,96%);box-shadow:1px 1px 5px 0px hsl(232,36%,96%)}
#bo_v_file li i, #bo_v_link li i {float:left;color:#b2b2b2;font-size:2.35em;margin-right:20px}
#bo_v_file a, #bo_v_link a {float:left;display:block;text-decoration:none;word-wrap:break-word;color:#000}
#bo_v_file a:focus, #bo_v_file li:hover a, #bo_v_file a:active,
#bo_v_link a:focus, #bo_v_link li:hover a, #bo_v_link a:active {text-decoration:underline;color:#3a8afd}
#bo_v_file img {float:left;margin:0 10px 0 0}
#bo_v_file .bo_v_file_cnt, #bo_v_link .bo_v_link_cnt {color:#b2b2b2;font-size:0.92em}
#bo_v_file li:hover, #bo_v_link li:hover {border-color:#bed4f4;color:#bed4f4}
#bo_v_file li:hover i, #bo_v_link li:hover i {color:#3a8afd}
#bo_v_file li:hover .bo_v_file_cnt, #bo_v_link li:hover .bo_v_link_cnt {color:#99c2fc}
#bo_v_link h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_top {zoom:1}
#bo_v_top:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_top h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_top ul {padding:0;list-style:none;}
#bo_v_bot {zoom:1}
#bo_v_bot:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_bot h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_bot ul {padding:0;list-style:none}
.bo_v_com {margin:20px 0;float:right}
.bo_v_com > li {position:relative;float:left;margin-left:5px}
.bo_v_nb {margin:20px 0;position:relative;clear:both;text-align:left}
.bo_v_nb:after {display:block;visibility:hidden;clear:both;content:""}
.bo_v_nb li {border-top:1px solid #f1f1f1;padding:13px}
.bo_v_nb li:last-child {border-bottom:1px solid #f1f1f1}
.bo_v_nb li:hover {background:#f6f6f6}
.bo_v_nb li i {font-size:13px;color:#b3b3b3}
.bo_v_nb li .nb_tit {display:inline-block;padding-right:20px;color:#b3b3b3}
.bo_v_nb li .nb_date {float:right;color:#b3b3b3}
#bo_v_atc {min-height:200px;height:auto !important;height:200px;margin:0 auto;padding:15px 0}
#bo_v_atc_title {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_img {width:100%;overflow:hidden;zoom:1}
#bo_v_img:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_img a.view_image {display:block}
#bo_v_img img {margin-bottom:20px;max-width:100%;height:auto}
#bo_v_con {margin:10px 0 30px;width:100%;line-height:1.7em;min-height:200px;overflow:hidden}
#bo_v_con a {color:#000;text-decoration:underline}
#bo_v_con img {max-width:100%;height:auto}
@media (max-width:480px) { #bo_v_con > table img {display:none} }
#bo_v_act {margin-bottom:30px;text-align:center}
#bo_v_act .bo_v_act_gng {position:relative}
#bo_v_act a {margin-right:5px;vertical-align:middle;color:#4a5158}
#bo_v_act a:hover {background-color:#fff;color:#ff484f;border-color:#ff484f}
#bo_v_act i {font-size:1.4em;margin-right:5px}
#bo_v_act_good, #bo_v_act_nogood {display:none;position:absolute;top:30px;left:0;z-index:9999;padding:10px 0;width:165px;background:#ff3061;color:#fff;text-align:center}
#bo_v_act .bo_v_good, #bo_v_act .bo_v_nogood {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
#bo_v_sns {padding:0;list-style:none;zoom:1;float:left;display:inline-block}
#bo_v_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_sns li {float:left;width:135px;margin-right:5px;text-align:left}
#bo_v_sns li a {height:35px;line-height:35px;text-align:center;border-radius:5px;color:#fff;font-size:0.95em}
#bo_v_sns li img {vertical-align:middle;margin-right:5px}
#bo_v_sns li .sns_f {display:block;background:#3b5997}
#bo_v_sns li .sns_t {display:block;background:#09aeee}
#bo_v_sns li .sns_g {display:block;background:#ea4026}
#bo_v_sns li .sns_k {display:block;background:#fbe300}
#bo_v_share {position:relative;padding:20px 0}
#bo_v_share:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_share .btn {padding:0 10px;color:#555;font-weight:normal;font-size:1em;width:80px;line-height:35px;height:35px;border-color:#d5d5d5;border-radius:5px}
#bo_v_share .btn:hover {background:#fff}
#bo_v_share .btn i {margin-right:5px;color:#4b5259;vertical-align:middle}
.cmt_btn {width:100%;text-align:left;border:0;border-bottom:1px solid #f0f0f0;background:#fff;font-weight:bold;margin:30px 0 0;padding:0 0 15px}
.cmt_btn span.total {position:relative;display:inline-block;margin-right:5px;font-size:1em;color:#3a8afd}
.cmt_btn b {font-size:1.2em;color:#000}
.cmt_btn span.total:after {position:absolute;bottom:-17px;left:0;display:inline-block;background:#3a8afd;content:"";width:100%;height:2px}
#bo_vc h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc article {margin:20px 0;position:relative;border-bottom:1px solid #f0f0f0}
#bo_vc article:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc article .profile_img img {border-radius:50%}
#bo_vc article .pf_img {float:left;margin-right:10px}
#bo_vc article .pf_img img {border-radius:50%;width:50px;height:50px}
#bo_vc article .cm_wrap {float:left;max-width:870px;width:90%}
#bo_vc header {position:relative;width:100%}
#bo_vc header:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc header .profile_img {display:none}
#bo_vc header .icon_reply {position:absolute;top:15px;left:-20px}
#bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold}
.bo_vc_hdinfo {color:#777}
#bo_vc h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc .cmt_contents {line-height:1.8em;padding:0 0 20px}
#bo_vc p a {text-decoration:underline}
#bo_vc p a.s_cmt {text-decoration:underline;color:#ed6479}
#bo_vc_empty {margin:0;padding:80px 0 !important;color:#777;text-align:center}
#bo_vc #bo_vc_winfo {float:left}
#bo_vc .bo_vl_opt {position:absolute;top:0;right:0}
.bo_vc_act {display:none;position:absolute;right:0;top:40px;width:58px;text-align:right;border:1px solid #b8bfc4;margin:0;list-style:none;background:#fff;zoom:1;z-index:9999}
.bo_vc_act:before {content:"";position:absolute;top:-8px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent}
.bo_vc_act:after {content:"";position:absolute;top:-6px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.bo_vc_act li {border-bottom:1px solid #f0f0f0}
.bo_vc_act li:last-child {border-bottom:0}
.bo_vc_act li a {display:inline-block;padding:10px 15px}
.bo_vc_act li a:hover {color:#3a8afd}
.bo_vc_w {position:relative;margin:10px 0;display:block}
.bo_vc_w:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.bo_vc_w #char_cnt {display:block;margin:0 0 5px}
.bo_vc_w textarea {border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;width:100%;height:120px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)}
.bo_vc_w_info {margin:10px 0;float:left}
.bo_vc_w_info:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w_info .frm_input {float:left;margin-right:5px}
.bo_vc_w_info #captcha {padding-top:10px;display:block;clear:both}
.bo_vc_w .btn_confirm {clear:both;margin-top:10px}
.bo_vc_w .btn_confirm label {display:inline-block;margin-right:10px;border-radius:3px;font-size:1.5em;text-align:center}
.bo_vc_w .btn_submit {height:45px;padding:0 20px;border-radius:3px;font-weight:bold;font-size:1.083em}
.bo_vc_w .btn_confirm .secret_cm label {font-size:1em !important}
.bo_vc_w_wr:after {display:block;visibility:hidden;clear:both;content:""}
.secret_cm {display:inline-block;float:left}
#bo_vc_send_sns {display:inline-block;float:left}
#bo_vc_sns {display:inline-block;margin:0;padding:0;list-style:none;zoom:1}
#bo_vc_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc_sns li {float:left;margin:0 5px 0 0}
#bo_vc_sns .sns_li_f {border-radius:3px;background:#3a589b;height:40px;line-height:40px;padding:0 0 0 10px}
#bo_vc_sns .sns_li_t {border-radius:3px;background:#00aced;height:40px;line-height:40px;padding:0 0 0 10px}
#bo_vc_sns .sns_li_off {background:#bbb}
#bo_vc_sns a {display:inline-block;padding:0 15px 0 5px}
#bo_vc_sns input {margin:0 5px 0 0}
#bo_w .bo_v_option li {display:inline-block;float:left;text-align:left;margin:0 5px 0 0}
#bo_w .bo_v_option li label {vertical-align:baseline}
#bo_w .bo_v_option .chk_box input[type="checkbox"] + label span {margin-left:0;margin-right:5px}
#bo_w .write_div {margin:10px 0;position:relative}
#bo_w .write_div:after {display:block;visibility:hidden;clear:both;content:""}
#bo_w .bo_w_info:after {display:block;visibility:hidden;clear:both;content:""}
#bo_w .bo_w_info .frm_input {float:left;margin-bottom:1%}
#bo_w #wr_password, #bo_w #wr_homepage {margin-left:1%}
#bo_w .wr_content.smarteditor2 iframe {background:#fff}
#bo_w .bo_w_tit {position:relative}
#bo_w .bo_w_tit .frm_input {padding-right:120px}
#bo_w .bo_w_tit #btn_autosave {position:absolute;top:5px;right:5px;line-height:30px;height:30px}
#bo_w .bo_w_link label {position:absolute;top:1px;left:1px;border-radius:3px 0 0 3px;height:38px;line-height:38px;width:40px;font-size:1.2em;text-align:center;color:#b2b2b2}
#bo_w .bo_w_link .frm_input {padding-left:50px}
#bo_w .bo_w_flie .lb_icon {position:absolute;top:0;left:0;border-radius:3px 0 0 3px;height:38px;line-height:38px;width:40px;font-size:1.2em;text-align:center;color:#b2b2b2}
#bo_w .bo_w_flie .frm_file {padding-left:50px;margin-top:3px}
#bo_w .bo_w_flie .file_wr {position:relative;border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;height:40px;margin:0}
#bo_w .bo_w_flie .frm_input {margin:10px 0 0}
#bo_w .bo_w_flie .file_del {position:absolute;top:10px;right:10px;font-size:0.92em;color:#7d7d7d}
#bo_w .bo_w_select select {border:1px solid #d0d3db;width:100%;height:40px;border-radius:3px}
#bo_w .btn_submit {padding:0 20px;font-size:1.167em}
#bo_w .btn_cancel {border-radius:3px;font-size:1.167em}
.btn-white {color:#fff!important;font-size:1.2rem!important;height:auto!important;border:1px solid #fff!important;box-shadow:0px 4px 4px 0px rgba(0,0,0,0.2)!important;transform:translateY(-3px);transition:all 0.4s!important}
.btn-white:hover {border:1px solid #fff!important;color:#fff!important;box-shadow:none!important;transform:none!important}
a.btn,.btn {display:inline-block;font-weight:400;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:0.375rem 0.75rem;font-size:1rem;line-height:1;border-radius:0.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}
@media (max-width: 480px) { li:has(.btn_bo_sch) { visibility: hidden; } }