:root{
  --font: "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --cta-bg: #1a2d8c;
  --cta-hover: #299cd8;
  --grid-bg: #f5f6fa;

  --hero-g1: #00051f;
  --hero-g2: #0f25c3;
  --hero-g3: #ffffff;

  --text: #111;
  --muted: rgba(0,0,0,0.58);

  --container: 1200px; /* 1440 기준 */
  --gutter: 24px;

  --header-h: 76px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

/* 모든 폰트 Noto Sans KR 강제 */
body,
button, input, textarea, select,
::placeholder,
*::before, *::after{
  font-family: var(--font);
}

body{
  margin: 0;
  color: var(--text);
  background: #fff;
}

a{ color: inherit; text-decoration: none; }
img{ display: block; max-width: 100%; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ========== HEADER (fixed) ========== */
.site-header{
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 1000;
  background: transparent;
  transition: background-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
}

.header-inner{
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 메뉴를 CTA 왼쪽으로 붙이기 */
  gap: 18px;
}

.brand{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}

.brand-logo{
  height: 30px;
  width: auto;
}

/* 로고 전환 */
.logo-dark{ display: none; }
.logo-light{ display: block; }
body.is-scrolled .logo-light{ display: none; }
body.is-scrolled .logo-dark{ display: block; }

.gnb{
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto; /* brand 이후 공간을 밀고, CTA 바로 왼쪽 정렬 */
}

/* 스크롤 전 메뉴 기본 */
.gnb-link{
  font-weight: 300;
  font-size: 14px;
  color: #ffffff;
  opacity: 0.95;
  transition: color .15s ease, font-weight .15s ease, opacity .15s ease;
}

/* 스크롤 전 hover -> 흰색 + 500 */
.gnb-link:hover{
  color: #ffffff;
  font-weight: 500;
  opacity: 1;
}

/* CTA 버튼 기본(스크롤 전) : 그라디언트 + 테두리/광택으로 대비 강화 */
.header-cta{
  font-weight: 500;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;

  background: linear-gradient(90deg, #1a2d8c 0%, #299cd8 100%);
  border: 1px solid rgba(255,255,255,0.35);

  box-shadow:
    0 14px 26px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);

  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.header-cta:hover{
  background: var(--cta-hover);
  border-color: rgba(255,255,255,0.45);
}
.header-cta:active{
  transform: translateY(1px);
}

/* 스크롤 후: 헤더 흰 배경 + 메뉴 검정 */
body.is-scrolled .site-header{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

/* 스크롤 후 메뉴 기본 */
body.is-scrolled .gnb-link{
  color: rgba(0,0,0,0.78);
  opacity: 1;
}

/* 스크롤 후 hover -> #1a2d8c + 500 */
body.is-scrolled .gnb-link:hover{
  color: #1a2d8c;
  font-weight: 500;
}

/* 스크롤 후 CTA: 흰 배경에서 대비 재조정 */
body.is-scrolled .header-cta{
  color: #ffffff;
  border: 1px solid rgba(26,45,140,0.22);
  box-shadow:
    0 10px 20px rgba(26,45,140,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
body.is-scrolled .header-cta:hover{
  background: var(--cta-hover);
  border-color: rgba(41,156,216,0.35);
}

/* ========== HERO ========== */
.hero{
  height: 720px;
  background: linear-gradient(180deg, var(--hero-g1) 0%, var(--hero-g2) 46.9865%, var(--hero-g3) 100%);
  position: relative;
  padding-top: var(--header-h); /* fixed header 공간 확보 */
}

.hero-inner{
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(72px);
  width: 100%;
  padding: 0 var(--gutter);
}

.hero-title{
  margin: 0;
  font-weight: 700;
  color: #ffffff;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.hero-subtitle{
  margin: 14px auto 22px;
  font-weight: 300;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.65;
  max-width: 720px;
  opacity: 0.95;
}

.hero-actions{
  display: inline-flex !important;
  gap: 18px;
}

/* Hero 애니메이션 지연 */
.hero-subtitle.animate-on-scroll{
  transition-delay: 0.1s;
}
.hero-actions.animate-on-scroll{
  transition-delay: 0.2s;
}

/* ========== BUTTONS ========== */
.btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
  font-family: var(--font);
}

a.btn{
  text-decoration: none;
}

.btn-primary{
  background: var(--cta-bg);
  color: #ffffff !important;
  font-weight: 300;
  box-shadow: 0 4px 12px rgba(26,45,140,0.2);
}

a.btn.btn-primary,
button.btn.btn-primary{
  color: #ffffff !important;
}

.btn-primary:hover{
  background: var(--cta-hover);
  box-shadow: 0 6px 16px rgba(41,156,216,0.25);
}

.btn-primary:active{
  transform: translateY(1px);
}

/* 접근성: 키보드 포커스 */
.btn:focus-visible,
.gnb-link:focus-visible,
.header-cta:focus-visible,
.footer-link:focus-visible,
.social:focus-visible{
  outline: 2px solid rgba(41,156,216,0.9);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ========== SECTIONS (공통) ========== */
.section{ padding: 86px 0 140px; }

.section-title{
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.section-desc{
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

/* "Products" 같은 센터 타이틀(요청 반영된 32/500 유지) */
.section-center-title{
  margin: 0 0 32px;
  text-align: center;
  font-size: 32px;
  font-weight: 500;
}

/* ========== WHAT WE DO (기본 구조) ========== */
.what-grid{
  margin-top: 54px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: start;
}

.what-divider{
  width: 1px;
  height: 150px;
  background: rgba(0,0,0,0.12);
  justify-self: center;
}

.what-item{
  text-align: center;
  padding: 0 22px;
}

/* PNG pictograms */
.what-icon{
  width: 38px;
  height: 38px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
}
.what-icon img{
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}

.what-title{
  margin: 0;
  font-weight: 700;
  font-size: 13px;
}

.what-text{
  margin: 12px auto 0;
  max-width: 270px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--muted);
}

/* =========================================================
   INTRO 섹션(에이스바디는 무엇을 하는 회사인가요?) 전용
   - 타이포: 32/24/24/18
   - 상하 여백 확대
   ========================================================= */
.section-intro{
  padding-top: 140px;
  padding-bottom: 140px;
}

.section-intro .section-title{
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.section-intro .section-desc{
  margin-top: 18px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(0,0,0,0.58);
}

.section-intro .what-grid{
  margin-top: 70px;
}

.section-intro .what-divider{
  height: 240px;
  background: rgba(0,0,0,0.12);
}

.section-intro .what-item{
  padding: 0 26px;
}

.section-intro .what-icon{
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
}
.section-intro .what-icon img{
  width: 44px;
  height: 44px;
}

.section-intro .what-title{
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.section-intro .what-text{
  margin: 16px auto 0;
  max-width: 420px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(0,0,0,0.58);
}

/* ========== PRODUCTS SLIDER (이미지 카드) ========== */
.section-products{ 
  padding-top: 72px; 
  padding-bottom: 140px; /* 하단 여백 추가 */
}
.section-products .section-center-title{ margin-bottom: 34px; }

.products-carousel{ position: relative; }
.products-viewport{
  position: relative;
  overflow: hidden;
  padding: 0 20px 20px; /* 좌우 상단 여백 추가로 그림자 공간 확보 */
  margin: 0 -20px -20px; /* 여백만큼 마진으로 보정 */
}

.products-track{
  display: flex;
  gap: 34px;
  transition: transform .42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  padding: 0; /* track 내부 padding 제거 */
}

/* 데스크톱: 3장 보이기 */
.product-card{
  flex: 0 0 calc((100% - 34px * 2) / 3);
  border-radius: 22px;
  overflow: hidden; /* 라운드 영역 밖 정리 */
  background: var(--grid-bg); /* 투명 PNG도 깔끔하게 보이도록 */
  box-shadow: 0 14px 26px rgba(0,0,0,0.06);
  margin-bottom: 20px; /* 하단 여백 추가로 그림자가 잘리지 않도록 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 24px 34px; /* 예시처럼 상/하 여백 확보 */
  text-align: center;
}

.product-card-media{
  width: 100%;
  height: clamp(220px, 22vw, 360px); /* 이미지 영역 높이 통일 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 기본: (3,4,8 제외) 나머지는 현재 대비 20% 확대 = 0.7 * 1.2 = 0.84 */
  --product-card-img-scale: 0.84;
}

.product-card-media.is-exempt{
  /* 3,4,8번 이미지는 확대 제외(기존 70% 유지) */
  --product-card-img-scale: 0.7;
}

.product-card-media.is-long{
  /* 한 변이 다른 변보다 3배 이상 긴 이미지는 제외(원래 크기 유지) */
  --product-card-img-scale: 1;
}

.product-card-media.is-exempt.is-long{
  /* 예외(3,4,8)가 최우선 */
  --product-card-img-scale: 0.7;
}

.product-card-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* 비율 유지 + 잘림 방지 */
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0) scale(var(--product-card-img-scale));
  border-radius: 0; /* 프레임은 카드가 담당 */
}

.product-card-text{
  width: 100%;
  margin-top: 18px; /* 이미지 ↔ 텍스트 간격 */
}

.product-card-name{
  margin: 0;
  font-size: 25px; /* 36px의 70% 수준 */
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #111111;
  line-height: 1.15;
}

.product-card-desc{
  margin-top: 14px;
  font-size: 18px;
  font-weight: 300;
  color: rgba(0,0,0,0.55);
  line-height: 1.35;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

/* 화살표: 배경 없이 화살표만 / hover는 색만 */
.products-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  padding: 14px 16px;
  width: auto;
  height: auto;

  cursor: pointer;
  z-index: 2;

  font-size: 68px;
  line-height: 1;
  color: rgba(0,0,0,0.35);

  transition: color .15s ease, opacity .15s ease, transform .15s ease;
}

.products-prev{ left: -12px; } /* viewport padding 고려하여 위치 조정 */
.products-next{ right: -12px; } /* viewport padding 고려하여 위치 조정 */

.products-nav:hover{
  background: transparent !important;
  color: #299cd8;
}

.products-nav:active{
  transform: translateY(-50%) translateY(1px);
}

.products-nav.is-hidden{
  opacity: 0;
  pointer-events: none;
}

/* ========== STATEMENT + WATERMARK LOGO ========== */
.statement{ 
  padding: 100px 0 160px; 
  position: relative;
}

.statement-inner{
  position: relative;
  min-height: 200px;
  text-align: center;
}

.statement-text{
  margin: 14px auto 0;
  text-align: center;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(0,0,0,0.58);
  max-width: 700px;
  position: relative;
  z-index: 1;
  word-break: keep-all;
  white-space: normal;
}

.statement-text::after{
  content: '';
  display: inline;
}

.watermark-logo{
  position: absolute;
  right: 0;
  top: 0%;
  transform: translateY(-50%);
  width: 400px;
  max-width: 50%;
  opacity: 0.285 !important;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.watermark-logo.animate-on-scroll{
  opacity: 0.285 !important;
}

.watermark-logo.animate-on-scroll.is-visible{
  opacity: 0.285 !important;
}

/* ========== TARGETS (적용 대상) - Expand Cards ========== */
.section-targets{
  background: var(--grid-bg);
  padding: 78px 0 86px;
}
.section-targets .section-center-title{
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
}
.section-targets .section-desc{
  margin-top: 14px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(0,0,0,0.58);
}

/* 4개 카드 그리드 */
.section-targets .targets{
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 242px);
  gap: 20px;
  justify-content: center;
}

/* 카드: 기본 242×235 / 확장 242×352 */
.section-targets .target-card{
  width: 242px;
  height: 235px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 22px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 32px 24px 56px;
  transition: height .28s ease, box-shadow .28s ease, transform .28s ease;
}
.section-targets .target-card.is-open{
  height: 352px;
}

/* 타이틀 - 항상 보이도록 (body 밖으로 분리) */
.section-targets .target-card-title{
  margin: 0 0 20px;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: rgba(0,0,0,0.88);
  opacity: 1;
  visibility: visible;
}

/* 펼침 콘텐츠(설명 + CTA) - 접혀있을 때는 숨김 */
.section-targets .target-card-body{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;

  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  margin-top: 0;
  transform: translateY(6px);
  transition:
    opacity .22s ease,
    transform .22s ease,
    max-height .28s ease,
    margin-top .22s ease;
}
.section-targets .target-card.is-open .target-card-body{
  opacity: 1;
  max-height: 220px;
  pointer-events: auto;
  margin-top: 18px;
  transform: translateY(0);
}

/* 설명: 네 카드 모두 같은 높이(버튼 y축 맞추기) */
.section-targets .target-card-desc{
  margin: 0;
  max-width: 200px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(0,0,0,0.55);
  text-align: center;

  min-height: 80px;              /* 설명 박스 고정 높이 */
  display: flex;
  align-items: center;           /* 설명 텍스트 자체는 박스 안에서 세로 가운데 */
  justify-content: center;
}

/* CTA 버튼: 네 카드 동일 폭·높이 */
.section-targets .target-card-cta{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 168px;                  /* 버튼 폭 고정 */
  height: 36px;                  /* 버튼 높이 고정 */
  padding: 0 18px;
  border-radius: 999px;
  border: none;

  background: #1a2d8c;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;

  box-shadow: 0 4px 12px rgba(26,45,140,0.2);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.section-targets .target-card-cta:hover{
  background: #299cd8;
  box-shadow: 0 6px 16px rgba(41,156,216,0.25);
}
.section-targets .target-card-cta:active{
  transform: translateY(1px);
}

/* 토글(화살표): 테두리 제거 + 펼침 시 회전 */
.section-targets .target-card-toggle{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);

  width: 32px;
  height: 22px;
  display: grid;
  place-items: center;

  border: none;                  /* 테두리 제거 */
  background: transparent;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity .15s ease, transform .15s ease;
}
.section-targets .target-card-toggle:hover{
  opacity: 1;
}
.section-targets .target-card-toggle:active{
  transform: translateX(-50%) translateY(1px);
}

/* 화살표 아이콘 회전 */
.section-targets .target-card-arrow{
  display: block;
  transition: transform .18s ease;
}
.section-targets .target-card.is-open .target-card-arrow{
  transform: rotate(180deg);
}

/* 반응형: 2열 / 1열 */
@media (max-width: 1100px){
  .section-targets .targets{
    grid-template-columns: repeat(2, 242px);
  }
}
@media (max-width: 560px){
  .section-targets .targets{
    grid-template-columns: 242px;
  }
}


/* ========== SETUP (제품 세팅 현황) ========== */
.section-setup{ padding: 86px 0 94px; }

.setup{
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  align-items: center;
  gap: 40px;
}

/* 타이틀/서브타이틀 (요청: 32/500, 24/300) */
.setup-title{
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
}

.setup-desc{
  margin: 12px 0 10px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(0,0,0,0.65);
}

.setup-more{
  font-size: 13px;
  font-weight: 500;
  color: #1a2d8c;
  text-decoration: none;
}

/* 마우스 올렸을 때 */
.setup-more :hover{
  color: #299cd8;
}

.setup-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.setup-thumb{
  height: 152px;
  border-radius: 12px;
  background: #f4f6fa; 
  overflow: hidden;
}

.setup-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ========== FINAL CTA ========== */
.section-final{ padding: 72px 0 140px; }

.final-cta{ text-align: center; }

.final-title{
  margin: 0 0 18px;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Home - statement & final CTA: mobile typography */
@media (max-width: 768px){
  .statement{
    padding: 72px 0 110px;
  }
  .statement-text{
    font-size: 16px;
    line-height: 1.75;
  }

  .section-final{
    padding: 56px 0 96px;
  }
  .final-title{
    font-size: 20px;
    line-height: 1.45;
  }
}

@media (max-width: 420px){
  .statement-text{
    font-size: 15px;
  }
  .final-title{
    font-size: 18px;
  }
}

.final-actions{
  display: inline-flex !important;
  gap: 18px;
}

/* ========== FOOTER ========== */
.site-footer{
  background: #3f4143;              /* 어두운 그레이 */
  color: rgba(255,255,255,0.9);
  padding: 60px 0 44px;
}

.site-footer .container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 상단 4컬럼 */
.footer-cols{
  display: grid;
  grid-template-columns: 1.1fr 2.2fr 1.1fr 1.1fr;  /* 제품소개 컬럼을 조금 더 넓게 */
  gap: 40px;
}

.footer-col{
  min-width: 0;
}

.footer-head{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 18px;
  opacity: 0.95;
}

.footer-link{
  display: block;
  font-size: 12px;
  font-weight: 300;
  padding: 5px 0;
  opacity: 0.86;
  text-decoration: none;
}

/* 제품소개 2열 레이아웃 */
.footer-col-products .footer-products-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  column-gap: 48px;
}

.footer-products-col .footer-link{
  padding: 3px 0;
}

/* 하단 메타 + SNS 아이콘 */
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: 40px;
  padding-top: 0px;
}

.footer-meta{
  font-size: 11px;
  line-height: 1.8;
  opacity: 0.8;
  max-width: 760px;
}

/* SNS 아이콘 */
.footer-social{
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
}

.footer-sns{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.footer-sns img{
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain; /* 비율 유지: 유튜브 로고 찌그러짐 방지 */
}

/* ========== FLOATING SOCIAL WIDGET ========== */
.floating-social-widget{
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.floating-social-link{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    background-size 0.2s ease;
  text-decoration: none;
  position: relative;
}

.floating-social-link:hover{
  /* Use background-color only so background-size doesn't reset */
  background-color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  /* keep icon unchanged; only move the white circle slightly */
  transform: translateY(-2px);
}

.floating-social-link::after{
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  white-space: nowrap;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-50%) translateX(-4px);
}

.floating-social-link::before{
  content: '';
  position: absolute;
  right: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid rgba(0, 0, 0, 0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.floating-social-link:hover::after{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.floating-social-link:hover::before{
  opacity: 1;
}

.floating-social-link img{
  width: 24px;
  height: 24px;
  display: block;
}

/* Floating widget icon override (use new logos) */
.floating-social-link{
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}
.floating-social-link[href*="blog.naver.com"]{
  background-image: url("images/widget-blog.png");
}
.floating-social-link[href*="instagram.com"]{
  background-image: url("images/widget-instagram.png");
}
.floating-social-link[href*="youtube.com"]{
  background-image: url("images/widget-youtube.png");
  /* youtube 로고 비율 유지 (정사각 강제 시 찌그러짐 방지) */
  background-size: 22px auto;
}
.floating-social-link[href*="kakao.com"]{
  background-image: url("images/widget-kakaotalk.png");
}
.floating-social-link img{
  opacity: 0;
}

/* 모바일: 오른쪽 하단에 배치 */
@media (max-width: 1024px){
  .floating-social-widget{
    top: auto;
    bottom: 20px;
    right: 20px;
    transform: none;
  }
  
  .floating-social-link{
    width: 44px;
    height: 44px;
  }

  .floating-social-link{
    background-size: 20px 20px;
  }

  /* 모바일: youtube 로고만 비율 유지 + 약간 축소 */
  .floating-social-link[href*="youtube.com"]{
    background-size: 18px auto;
  }
  
  .floating-social-link::after{
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    font-size: 12px;
    padding: 6px 10px;
  }
  
  .floating-social-link::before{
    right: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    border-left-width: 5px;
    border-top-width: 5px;
    border-bottom-width: 5px;
  }
  
  .floating-social-link:hover::after{
    transform: translateY(-50%) translateX(0);
  }
  
  .floating-social-link img{
    width: 22px;
    height: 22px;
  }
}

/* 제품 상세페이지: 빠른 이동 메뉴 반응형(4*n 그리드) */
@media (max-width: 1024px){
  .product-detail-topbar{
    flex-wrap: wrap;
    gap: 8px;
  }
  .product-detail-quicknav{
    max-width: 100%;
  }
  .product-detail-quicknav-list{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .product-detail-topbar{
    margin-bottom: 36px; /* 기존 18px의 2배 */
  }
  .product-detail-quicknav-list{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 카피라이트 */
.footer-copy{
  margin-top: 18px;                                  /* 선과 copy 사이 여백 */
  padding-top: 12px;                                 /* 선과 글자 사이 여백 */
  border-top: 1px solid rgba(255,255,255,0.18);      /* 가로선 위치를 여기로 이동 */
  font-size: 11px;
  opacity: 0.7;
}

/* ========== 1440에서 좌우 여백 정밀 고정 ========== */
@media (min-width: 1440px){
  .container{
    max-width: 1200px;
    padding: 0;
  }
  .hero-inner{ padding: 0; }
}

/* ========== 반응형 ========== */
@media (max-width: 1024px){
  .gnb{ display: none; }
  
  /* 헤더 레이아웃 조정 */
  .header-inner{
    justify-content: flex-start;
    gap: 8px;
  }
  
  /* 브랜드 로고는 왼쪽에 고정 */
  .brand{
    order: 1;
    flex-shrink: 0;
  }
  
  /* 오른쪽 그룹: 햄버거 버튼 + CTA */
  .menu-toggle{ order: 2; margin-left: auto; margin-right: 0; }
  .header-cta{ order: 3; }

  /* 1024px 이하에서 햄버거 버튼 표시 */
  .menu-toggle{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1001;
    color: #ffffff;
    margin-right: 0;
    position: relative;
  }
  .menu-toggle span{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 2px;
    background: currentColor !important;
    margin: 6px 0;
    width: 100%;
    border-radius: 1px;
  }
  
  /* CTA 버튼을 햄버거 버튼 오른쪽에 배치 */
  .header-cta{
    flex-shrink: 0;
  }
  
  /* 스크롤 후/서브페이지에서 햄버거 버튼 색상 반전 */
  /* index 페이지: Hero 버튼과 같은 색 (#1a2d8c) */
  body.is-scrolled .menu-toggle{
    color: var(--cta-bg) !important; /* #1a2d8c - Hero 버튼과 같은 색 */
  }
  /* 서브페이지에서는 검정색 */
  body.about-page .menu-toggle,
  body.product-page .menu-toggle,
  body.setting-page .menu-toggle,
  body.support-page .menu-toggle,
  body.product-detail-page .menu-toggle{
    color: #111111 !important;
  }
  
  /* 모바일 드롭다운 네비게이션 (1024px 이하) */
  .header-inner{
    position: relative;
  }
  .gnb{
    position: absolute;
    top: var(--header-h);
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    padding: 14px var(--gutter) 12px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
  }
  .gnb-link{
    padding: 12px 4px;
    font-size: 15px;
    color: rgba(0,0,0,0.88);
    opacity: 1;
  }
  .gnb-link:hover{
    color: #1a2d8c;
    font-weight: 500;
  }
  
  /* 메뉴 열림 상태 */
  body.is-menu-open .gnb{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  body.is-menu-open .menu-toggle span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  body.is-menu-open .menu-toggle span:nth-child(2){
    opacity: 0;
  }
  body.is-menu-open .menu-toggle span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
  
  .hero{ height: 640px; }
  .hero-inner{ transform: translate(-50%, -50%) translateY(40px); }

  .targets{ grid-template-columns: repeat(2, 1fr); }
  .setup{ grid-template-columns: 1fr; }

  /* INTRO 태블릿 축소 */
  .section-intro{
    padding-top: 110px;
    padding-bottom: 110px;
  }
  .section-intro .section-title{ font-size: 26px; }
  .section-intro .section-desc{ font-size: 18px; }
  .section-intro .what-title{ font-size: 18px; }
  .section-intro .what-text{ font-size: 14px; }
  .section-intro .what-divider{ height: 200px; }

  /* Products: 1장 */
  .products-track{ gap: 18px; }
  .product-card{ flex: 0 0 100%; }
  .products-prev{ left: 8px; }
  .products-next{ right: 8px; }
}

/* 모바일: Products 카드 2장 보이기 */
@media (max-width: 768px){
  .products-track{ gap: 16px; }
  .product-card{ flex: 0 0 calc((100% - 16px) / 2); }
}

@media (max-width: 520px){
  :root{ --gutter: 16px; }

  .hero{ height: 560px; }
  .hero-title{ font-size: 28px; }
  .hero-subtitle{ font-size: 12px; }

  .what-grid{ grid-template-columns: 1fr; gap: 18px; }
  .what-divider{ display: none; }

  .footer-cols{ grid-template-columns: 1fr 1fr; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }

  .watermark-logo{ width: 260px; max-width: 60%; }

  /* Products 카드: 모바일 타이포/여백 */
  .product-card{
    padding: 34px 20px 28px;
  }
  .product-card-media{
    height: 280px;
  }
  .product-card-name{
    font-size: 21px; /* 30px의 70% 수준 */
    font-weight: 500;
  }
  .product-card-desc{
    margin-top: 12px;
    font-size: 16px;
  }
	
@media (max-width: 1024px){
  .section-gridbg .section-title{ font-size: 26px; }
  .section-gridbg .section-desc{ font-size: 18px; }

  .setup-title{ font-size: 26px; }
  .setup-desc{ font-size: 18px; }
}

@media (max-width: 520px){
  .section-gridbg .section-title{ font-size: 20px; }
  .section-gridbg .section-desc{ font-size: 14px; }

  .setup-title{ font-size: 20px; }
  .setup-desc{ font-size: 14px; }
}


  /* INTRO 모바일 축소 */
  .section-intro{
    padding-top: 86px;
    padding-bottom: 140px;
  }
  .section-intro .section-title{ font-size: 20px; }
  .section-intro .section-desc{ font-size: 14px; }
  .section-intro .what-title{ font-size: 14px; }
  .section-intro .what-text{ font-size: 12px; }
}

/* ===== TARGETS: 펼침 후 여백/타이포 보정 + 화살표 테두리 제거(override) ===== */

/* 1) 펼쳐진 상태에서 내용이 위에 붙어 보이지 않게: 상단 여백 늘리기 */
.section-targets .target-card.is-open{
  padding-top: 58px; /* 기존 44px보다 늘려서 전체를 아래로 내림 */
}

/* 2) 펼쳐진 상태에서 본문(설명+버튼) 시작 위치를 조금 더 아래로 */
.section-targets .target-card.is-open .target-card-body{
  margin-top: 30px; /* 기존 24px보다 약간 늘림 */
}

/* 3) 펼쳐진 상태에서 폰트 사이즈 줄이기(원하면 수치만 조절) */
.section-targets .target-card.is-open .target-card-desc{
  font-size: 16px;   /* 기존 18px -> 16px */
  line-height: 1.55; /* 줄간격도 살짝 타이트하게 */
}

/* (선택) CTA 버튼도 조금 더 컴팩트하게 하고 싶을 때 */
.section-targets .target-card.is-open .target-card-cta{
  height: 32px;     /* 기존 34px -> 32px */
  padding: 0 16px;  /* 좌우 패딩 약간 축소 */
}

/* 4) 화살표 버튼 테두리/배경 완전 제거 */
.section-targets .target-card-toggle{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* 5) 클릭/포커스 시 생기는 외곽선까지 완전 제거(테두리처럼 보이는 경우 대응) */
.section-targets .target-card-toggle:focus,
.section-targets .target-card-toggle:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ===== TARGETS 카드 정렬/여백 재조정 ===== */

/* 카드 전체를 제목-내용-버튼 묶음 기준으로 세로 가운데 정렬 */
.section-targets .target-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 40px 24px 64px; /* 위/옆/아래 여백: 아래는 화살표 공간 확보 */
}

/* 펼쳐진 상태도 같은 정렬 유지 (높이는 기존 값 사용) */
.section-targets .target-card.is-open{
  height: 352px;
}

/* 제목끼리 같은 y축 위치에 오도록 간격 통일 */
.section-targets .target-card-title{
  margin-bottom: 20px;
}

/* 내용+버튼 묶음을 하나의 컬럼으로 잡고 간격만 줌 */
.section-targets .target-card-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;         /* 설명 ↔ 버튼 간 간격 */
  margin-top: 0;     /* 이전 override에서 준 margin-top 있으면 덮어쓰기 */
}

/* 설명 영역 높이를 고정해서 버튼이 네 카드에서 같은 높이에 위치하도록 */
.section-targets .target-card-desc{
  min-height: 72px;  /* 설명이 2~3줄 들어가도 버튼 시작 y축이 맞도록 */
  display: flex;
  align-items: center;  /* 설명 텍스트를 자신의 박스 안에서 세로 가운데 */
  text-align: center;
}

/* =========================
   ABOUT PAGE 공통 설정
   ========================= */

/* about 페이지에서는 항상 흰 배경 헤더 + 파란 로고 */
.about-page .site-header{
  background: #ffffff;
  backdrop-filter: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.about-page .logo-light{ display: none; }
.about-page .logo-dark{ display: block; }

.about-page .gnb-link{
  color: rgba(0,0,0,0.78);
  opacity: 1;
}

.about-page .gnb-link.is-active{
  color: #1a2d8c;
  font-weight: 500;
}

/* =========================
   ABOUT PAGE 레이아웃
   ========================= */

.about-main{
  background: #ffffff;
  padding-top: var(--header-h);
}

/* ========== ABOUT HERO ========== */
.about-hero{
  padding: 200px 0 120px;      /* 헤더 밑 여백 + 아래 여백 */
  background: #ffffff;
}

.about-hero-inner{
  text-align: center;
}

/* 그라디언트 리본 박스 */
.about-ribbon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 80px 350px;         /* 박스 높이·가로 길이 느낌 조절 */
  border-radius: 24px;

  background: linear-gradient(90deg, #1a2d8c 0%, #299cd8 100%);

  font-size: 32px;             /* 요청: 32px */
  font-weight: 500;            /* 요청: 500 */
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1;

  margin: 0 auto 100px;         /* 중앙 정렬 + 아래 여백 */
  white-space: nowrap;        /* 텍스트 줄바꿈 방지 */
}



/* 메인 타이틀 / 본문 (기존 값이 있으면 이 값으로 교체) */
.about-main-title{
  margin: 0 0 28px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.about-main-text{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(0,0,0,0.72);
}

/* 모바일에서는 리본 크기만 조금 줄이기 */
@media (max-width: 768px){
  .about-hero{
    padding: 110px 0 90px;
  }
  .about-ribbon{
    display: flex;
    width: 100%;
    max-width: 100%;
    padding: 40px 24px;
    font-size: 20px;
    border-radius: 18px;
    white-space: normal;
  }
  .about-hero .about-ribbon{
    width: 100%;
    max-width: 100%;
    padding: 40px 24px;
    gap: 16px;
  }
  .about-main-title{
    font-size: 22px;
    margin-bottom: 18px;
  }
  .about-main-text{
    font-size: 12px;
  }
}


.about-banner{
  max-width: 720px;
  height: 96px;
  margin: 0 auto 80px;
  border-radius: 24px;
  background: linear-gradient(90deg, #1a2d8c 0%, #299cd8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.about-main-title{
  margin: 0 0 32px;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  color: #111111;
  letter-spacing: -0.02em;
}

.about-main-text{
  margin: 0 auto 8px;
  max-width: 820px;
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}

/* WHAT WE DO / VISION 공통 섹션 */
.about-section{
  text-align: center;
  padding: 80px 0;
  background: #ffffff;
}

.about-section-inner{
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.about-tag{
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #1a2d8c;
}

.about-section-title{
  margin: 0 0 22px;
	text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111111;
}

.about-section-text{
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}

/* VISION 카드 영역 */
.about-section-vision{
  padding-bottom: 140px;
}

.about-cards{
  margin-top: 56px;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.about-card{
  width: 190px;
  height: 190px;
  border-radius: 26px;
  background: #f5f6fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-card-label{
  font-size: 18px;
  font-weight: 500;
  color: rgba(0,0,0,0.75);
}

/* ABOUT 반응형 */
@media (max-width: 1024px){
  .about-hero{
    padding-top: 120px;
    padding-bottom: 80px;
  }
  .about-banner{
    height: 82px;
    margin-bottom: 60px;
  }
}

@media (max-width: 768px){
  .about-main-title{
    font-size: 26px;
  }
  .about-main-text,
  .about-section-text{
    font-size: 13px;
  }
  .about-cards{
    flex-direction: column;
    align-items: center;
  }
  .about-card{
    width: 200px;
    height: 200px;
  }
}

/* ===============================
   ABOUT PAGE - 헤더 항상 흰 배경
   =============================== */
body.about-page .site-header{
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

/* 메뉴 색상: 항상 진한 회색 계열 */
body.about-page .gnb-link{
  color: rgba(0,0,0,0.78);
  opacity: 1;
}
body.about-page .gnb-link:hover{
  color: #1a2d8c;
  font-weight: 500;
}

/* CTA 버튼은 스크롤된 상태와 동일하게 */
body.about-page .header-cta{
  background: linear-gradient(90deg, #1a2d8c 0%, #299cd8 100%);
  color: #ffffff;
  border: 1px solid rgba(26,45,140,0.22);
  box-shadow:
    0 10px 20px rgba(26,45,140,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

/* 회사소개 페이지에서는 항상 파란 로고 사용 */
body.about-page .logo-light{ display: none; }
body.about-page .logo-dark{ display: block; }

/* ========== MOBILE MENU TOGGLE ========== */
/* 기본: 데스크톱에서는 숨김 */
.menu-toggle{
  display: none;
  width: 38px;
  height: 38px;
  padding: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 1001;
  position: relative;
}
.menu-toggle span{
  display: block;
  height: 2px;
  background: currentColor;
  margin: 6px 0;
  transition: transform .18s ease, opacity .18s ease;
  width: 100%;
  border-radius: 1px;
}

/* 모바일에서 강제 표시 (1024px 이하) */
@media (max-width: 1024px){
  .menu-toggle{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .menu-toggle span{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 768px){
  /* 모바일 헤더 레이아웃: brand | menu-toggle + header-cta */
  .header-inner{
    justify-content: flex-start;
    position: relative;
    gap: 8px;
  }

  /* 브랜드 로고는 왼쪽에 고정 */
  .brand{
    order: 1;
    flex-shrink: 0;
  }

  /* 오른쪽 그룹: 햄버거 버튼 + CTA */
  .menu-toggle{ order: 2; margin-left: auto; margin-right: 0; }
  .header-cta{ order: 3; }

  /* 햄버거 버튼 표시 및 스타일 (768px 이하) */
  .menu-toggle{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1001;
    color: #ffffff;
    margin-right: 0;
    position: relative;
  }
  .menu-toggle span{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 2px;
    background: currentColor !important;
    margin: 6px 0;
    width: 100%;
    border-radius: 1px;
  }

  /* 스크롤 후/서브페이지에서 색상 반전 */
  /* index 페이지: Hero 버튼과 같은 색 (#1a2d8c) */
  body.is-scrolled .menu-toggle{
    color: var(--cta-bg) !important; /* #1a2d8c - Hero 버튼과 같은 색 */
  }
  /* 서브페이지에서는 검정색 */
  body.about-page .menu-toggle,
  body.product-page .menu-toggle,
  body.setting-page .menu-toggle,
  body.support-page .menu-toggle,
  body.product-detail-page .menu-toggle{
    color: #111111 !important;
  }

  /* CTA 버튼을 햄버거 버튼 오른쪽에 배치 */
  .header-cta{
    font-size: 12px;
    padding: 8px 14px;
    flex-shrink: 0;
  }

  /* 모바일 드롭다운 네비게이션 */
  .gnb{
    position: absolute;
    top: var(--header-h);
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    padding: 14px var(--gutter) 12px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
  }
  .gnb-link{
    padding: 12px 4px;
    font-size: 15px;
    color: rgba(0,0,0,0.88);
    opacity: 1;
  }
  .gnb-link:hover{
    color: #1a2d8c;
    font-weight: 500;
  }

  /* 메뉴 열림 상태 */
  body.is-menu-open .gnb{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  body.is-menu-open .menu-toggle span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  body.is-menu-open .menu-toggle span:nth-child(2){
    opacity: 0;
  }
  body.is-menu-open .menu-toggle span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
}

@media (min-width: 769px){
  .menu-toggle{ display: none; }
}

/* =========================
   PRODUCT PAGE 스타일
   ========================= */

/* 제품 페이지 헤더 스타일 (about-page와 동일) */
body.product-page .site-header,
body.product-detail-page .site-header{
  background: #ffffff;
  backdrop-filter: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

body.product-page .logo-light,
body.product-detail-page .logo-light{ display: none; }
body.product-page .logo-dark,
body.product-detail-page .logo-dark{ display: block; }

body.product-page .gnb-link,
body.product-detail-page .gnb-link{
  color: rgba(0,0,0,0.78);
  opacity: 1;
}
body.product-page .gnb-link:hover,
body.product-detail-page .gnb-link:hover{
  color: #1a2d8c;
  font-weight: 500;
}
body.product-page .gnb-link.is-active,
body.product-detail-page .gnb-link.is-active{
  color: #1a2d8c;
  font-weight: 500;
}

body.product-page .header-cta,
body.product-detail-page .header-cta{
  background: linear-gradient(90deg, #1a2d8c 0%, #299cd8 100%);
  color: #ffffff;
  border: 1px solid rgba(26,45,140,0.22);
  box-shadow:
    0 10px 20px rgba(26,45,140,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

body.product-page .menu-toggle,
body.product-detail-page .menu-toggle{
  color: #111111;
}

/* 제품 목록 페이지 */
.product-main{
  background: #ffffff;
  padding-top: var(--header-h);
}

/* 제품소개 hero는 about-hero 스타일 재사용 */
.product-hero{
  padding: 140px 0 120px;
  background: #ffffff;
}

.product-hero-inner{
  text-align: center;
}

/* 제품소개 hero의 about-ribbon 내부 텍스트를 박스 안으로 */
.product-hero .about-ribbon{
  flex-direction: column;
  gap: 24px;
  white-space: normal;
  padding: 80px 350px;
  margin: 0 auto;
}

.product-hero .about-ribbon-label{
  font-size: 32px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1;
}

.product-hero .about-main-title{
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #ffffff;
}

.product-hero .about-main-text{
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  text-align: center;
  color: #ffffff;
}

.product-list-section{
  padding-top: 0;
  padding-bottom: 140px;
}

.product-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  column-gap: 32px;
  row-gap: 48px; /* 행(세로) 간격 확대 */
  margin-top: 60px;
}

.product-item{
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease;
}

.product-item:hover{
  transform: translateY(-4px);
}

.product-item-image{
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 22px;
  overflow: hidden;
  background: var(--grid-bg);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  margin-bottom: 18px;
  padding: 31px; /* 10% 추가 축소(여백 +10%) */
}

.product-item-image img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(var(--product-list-img-scale, 1));
  transform-origin: center;
}

/* 제품소개 페이지: 특정 제품 이미지 크기 미세 조정 */
.product-grid a[href="products/towerpully.html"] .product-item-image{ --product-list-img-scale: 1.2; } /* 1번: +20% */
.product-grid a[href="products/biotone.html"] .product-item-image{ --product-list-img-scale: 1.2; }    /* 6번: +20% */
.product-grid a[href="products/balancegun.html"] .product-item-image{ --product-list-img-scale: 0.9; } /* 11번: -10% */
.product-grid a[href="products/fascialex.html"] .product-item-image{ --product-list-img-scale: 0.9; }  /* 12번: -10% */
.product-grid a[href="products/zerobityboard.html"] .product-item-image{ --product-list-img-scale: 0.9; } /* 14번: -10% */
.product-grid a[href="products/gateboard.html"] .product-item-image{ --product-list-img-scale: 0.9; }     /* 15번: -10% */

.product-item-title{
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #111111;
  text-align: center;
}

/* 제품 상세 페이지 */
.product-detail-main{
  background: #ffffff;
  padding-top: var(--header-h);
}

.product-detail-hero{
  padding: 60px 0 100px;
  background: #ffffff;
}

.product-detail-back{
  display: inline-block;
  margin: 0;
  font-size: 12px; /* 메뉴 텍스트와 동일 */
  color: rgba(0,0,0,0.6);
  text-decoration: none;
  transition: color .15s ease;
}

.product-detail-back:hover{
  color: #1a2d8c;
}

.product-detail-content{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.product-detail-image{
  width: 100%;
  aspect-ratio: 4/3; /* 제품 상세페이지 최상단 이미지 박스 크기 통일 */
  border-radius: 22px;
  overflow: hidden;
  background: var(--grid-bg);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.product-detail-image img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-detail-info{
  padding-top: 20px;
}

.product-detail-title{
  margin: 0 0 24px;
  font-size: 32px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.02em;
}

/* 제품 상세페이지: 상단(제품목록 링크 영역) 제품 바로가기 메뉴 */
.product-detail-topbar{
  display: flex;
  flex-direction: column;
  align-items: center; /* 화면 가운데 정렬 */
  gap: 6px; /* 제품목록 ↔ 메뉴 간격 축소 */
  width: 100%;
  margin-bottom: 44px; /* 상/하 여백(하단 기준) */
}
.product-detail-topbar .product-detail-back{
  display: block;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  text-align: left; /* 메뉴(520px) 좌측 라인에 맞춤 */
}

/* 제품 상세페이지: hero 내 제품 바로가기 메뉴 */
.product-detail-quicknav{
  margin: 0;
  max-width: 520px; /* 영역을 더 좁게 */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 0 24px; /* 상단 여백 줄여 메뉴와 간격 축소 */
}
.product-detail-quicknav-list{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5열 */
  gap: 8px;
  /* 전체 메뉴: 테두리 대신 상/하 직선만 */
  background: transparent;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.12);
  border-bottom: 1px solid rgba(0,0,0,0.12);
  border-radius: 0;
  padding: 12px 0;
}
.product-detail-quicknav-link{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  border-radius: 10px;
  background: transparent;
  color: rgba(0,0,0,0.70);
  font-size: 14px;
  font-weight: 400; /* 기본(비선택) 볼드 해제 */
  letter-spacing: -0.01em;
  text-decoration: none;
  border: none; /* 메뉴 개별 박스/테두리 제거 */
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-detail-quicknav-link:hover{
  background: rgba(26,45,140,0.07);
  color: #1a2d8c;
}
.product-detail-quicknav-link.is-active{
  /* 선택된 메뉴: 볼드 + 남색 */
  font-weight: 700;
  color: #1a2d8c;
  background: transparent;
  border: none; /* 선택된 메뉴 박스치지 않음 */
}

.product-detail-desc{
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(0,0,0,0.78);
  word-break: keep-all;
  max-width: 62ch;
}

.product-detail-actions{
  display: flex;
  gap: 12px;
}

.product-detail-summary{
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 500;
  color: rgba(0,0,0,0.85);
  letter-spacing: -0.01em;
  line-height: 1.6;
}

.product-detail-subtitle{
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 500;
  color: #299cd8;
  letter-spacing: -0.01em;
}

.product-detail-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}

.product-tag{
  display: inline-block;
  padding: 6px 12px;
  background: #f0f4ff;
  color: #1a2d8c;
  font-size: 13px;
  font-weight: 500;
  border-radius: 20px;
  white-space: nowrap;
}

/* 제품 상세 페이지 추가 섹션 */
.product-features,
.product-comparison,
.product-benefits,
.product-accessories,
.product-specs{
  padding: 80px 0;
  background: #ffffff;
}

.product-section-title{
  margin: 0 0 56px;
  font-size: 32px;
  font-weight: 700;
  color: #111111;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.4;
}

.product-feature-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}

.product-feature-item{
  padding: 36px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-feature-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.product-feature-title{
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
  color: #1a2d8c;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.product-feature-desc{
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(0,0,0,0.78);
  word-break: keep-all;
}

.product-comparison-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto 32px;
}

.product-comparison-item{
  padding: 24px;
  background: #f8f9fa;
  border-radius: 12px;
  text-align: center;
}

.product-comparison-title{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #111111;
}

.product-comparison-desc{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(0,0,0,0.7);
}

.product-comparison-summary{
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0,0,0,0.8);
  line-height: 1.8;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.product-benefits-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.product-benefit-item{
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: rgba(0,0,0,0.8);
  line-height: 1.7;
}

.product-accessories-desc{
  margin: 0 0 32px;
  text-align: center;
  font-size: 14px;
  color: rgba(0,0,0,0.6);
}

.product-accessories-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
  justify-items: center;
}

.product-accessory-item{
  padding: 36px;
  background: #f8f9fa;
  border-radius: 12px;
  text-align: center;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-accessory-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.product-accessory-name{
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0,0,0,0.8);
}

.product-specs-table{
  max-width: 900px;
  margin: 0 auto;
  background: #f8f9fa;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.product-spec-row{
  display: grid;
  grid-template-columns: 220px 1fr;
  padding: 22px 28px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  align-items: center;
}

.product-spec-row:last-child{
  border-bottom: none;
}

.product-spec-row:hover{
  background: rgba(26, 45, 140, 0.02);
}

.product-spec-label{
  font-size: 15px;
  font-weight: 600;
  color: #111111;
  letter-spacing: -0.01em;
}

.product-spec-value{
  font-size: 15px;
  color: rgba(0,0,0,0.75);
  line-height: 1.6;
  word-break: keep-all;
}

/* Canopy9 RSA 전용 스타일 */
.product-purpose,
.product-values,
.product-perspectives,
.product-report,
.product-suitable,
.product-indicators,
.product-consultation,
.product-components{
  padding: 80px 0;
  background: #ffffff;
}

.product-purpose-content{
  max-width: 900px;
  margin: 0 auto;
}

.product-purpose-desc{
  margin: 0;
  font-size: 17px;
  line-height: 1.9;
  color: rgba(0,0,0,0.85);
  text-align: center;
  word-break: keep-all;
}

.product-values-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
}

.product-value-item{
  padding: 32px;
  background: #f8f9fa;
  border-radius: 12px;
}

.product-value-title{
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #1a2d8c;
}

.product-value-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(0,0,0,0.78);
  word-break: keep-all;
}

.product-perspectives-intro{
  margin: 0 0 32px;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0,0,0,0.7);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.product-perspectives-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
  justify-items: center;
}

.product-perspective-item{
  padding: 36px;
  background: #f8f9fa;
  border-radius: 12px;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-perspective-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.product-perspective-title{
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: #1a2d8c;
}

.product-perspective-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(0,0,0,0.8);
}

.product-report-desc{
  margin: 0 0 48px;
  text-align: center;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(0,0,0,0.8);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.product-report-usage{
  max-width: 1000px;
  margin: 0 auto;
}

.product-report-usage-title{
  margin: 0 0 32px;
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  text-align: center;
}

.product-report-usage-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.product-report-usage-item{
  padding: 24px;
  background: #f8f9fa;
  border-radius: 12px;
}

.product-report-usage-item-title{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #1a2d8c;
}

.product-report-usage-item-desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(0,0,0,0.7);
}

.product-suitable-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
  justify-items: stretch;
}

.product-suitable-item{
  padding: 36px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-suitable-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.product-suitable-title{
  margin: 0 0 20px;
  font-size: 19px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.product-suitable-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(0,0,0,0.75);
  word-break: keep-all;
}

.product-indicators-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.product-indicators-intro{
  margin: 0 0 32px;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0,0,0,0.7);
}

.product-indicators-content{
  max-width: 900px;
  margin: 0 auto;
}

.product-indicators-desc{
  margin: 0;
  font-size: 17px;
  line-height: 1.95;
  color: rgba(0,0,0,0.85);
  text-align: center;
  word-break: keep-all;
}

.product-indicators-list{
  margin: 0;
  padding-left: 24px;
  list-style-type: disc;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.product-indicators-list li{
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(0,0,0,0.8);
}

.product-indicators-list li:last-child{
  margin-bottom: 0;
}

.product-indicator-item{
  padding: 28px;
  background: #f8f9fa;
  border-radius: 12px;
}

.product-indicator-title{
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: #1a2d8c;
}

.product-indicator-desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(0,0,0,0.7);
}

.product-consultation{
  background: linear-gradient(135deg, #1a2d8c 0%, #299cd8 100%);
  color: #ffffff;
}

.product-consultation-content{
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.product-consultation-title{
  margin: 0 0 24px;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
}

.product-consultation-desc{
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255,255,255,0.95);
}

.product-consultation-action{
  display: flex;
  justify-content: center;
}

/* 알파스팀 전용 스타일 */
.product-values-content{
  max-width: 900px;
  margin: 0 auto;
}

.product-values-desc{
  margin: 0;
  font-size: 17px;
  line-height: 1.95;
  color: rgba(0,0,0,0.85);
  text-align: center;
  word-break: keep-all;
}

.product-components-content{
  max-width: 900px;
  margin: 0 auto;
}

.product-components-desc{
  margin: 0;
  font-size: 17px;
  line-height: 1.95;
  color: rgba(0,0,0,0.85);
  text-align: center;
  word-break: keep-all;
}

.product-components-list{
  margin: 0;
  padding-left: 24px;
  list-style-type: disc;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.product-components-list li{
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(0,0,0,0.8);
}

.product-components-list li:last-child{
  margin-bottom: 0;
}

.product-perspectives-note{
  margin: 32px auto 0;
  padding: 20px;
  background: #f0f4ff;
  border-left: 4px solid #1a2d8c;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(0,0,0,0.8);
  max-width: 1000px;
}

.product-models,
.product-protocol,
.product-safety,
.product-faq{
  padding: 80px 0;
  background: #ffffff;
}

.product-models-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto 32px;
  justify-items: center;
}

.product-model-item{
  padding: 36px;
  background: #f8f9fa;
  border-radius: 12px;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-model-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.product-model-title{
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: #1a2d8c;
}

.product-model-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(0,0,0,0.8);
}

.product-models-summary{
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0,0,0,0.8);
  line-height: 1.8;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.product-protocol-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto 32px;
  justify-items: center;
}

.product-protocol-item{
  padding: 36px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-protocol-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.product-protocol-title{
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
  color: #1a2d8c;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.product-protocol-content{
  max-width: 900px;
  margin: 0 auto;
}

.product-protocol-desc{
  margin: 0;
  font-size: 17px;
  line-height: 1.95;
  color: rgba(0,0,0,0.85);
  text-align: center;
  word-break: keep-all;
}

.product-protocol-note{
  margin: 0;
  padding: 20px;
  background: #f0f4ff;
  border-left: 4px solid #1a2d8c;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(0,0,0,0.8);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.product-safety-content{
  max-width: 1000px;
  margin: 0 auto;
}

.product-safety-list{
  margin-bottom: 32px;
}

.product-safety-list:last-child{
  margin-bottom: 0;
}

.product-safety-list-title{
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #111111;
}

.product-safety-items{
  margin: 0;
  padding-left: 24px;
  list-style-type: disc;
}

.product-safety-items li{
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(0,0,0,0.8);
}

.product-safety-items li:last-child{
  margin-bottom: 0;
}

.product-accessory-list{
  margin: 16px 0 0;
  padding-left: 24px;
  list-style-type: disc;
}

.product-accessory-list li{
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(0,0,0,0.7);
}

.product-accessory-list li:last-child{
  margin-bottom: 0;
}

.product-faq-list{
  max-width: 900px;
  margin: 0 auto;
}

.product-faq-item{
  margin-bottom: 24px;
  padding: 32px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-faq-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.product-faq-item:last-child{
  margin-bottom: 0;
}

.product-faq-question{
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #1a2d8c;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.product-faq-answer{
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(0,0,0,0.8);
  word-break: keep-all;
}

/* 액티브 포스2 전용 스타일 */
.product-measurements,
.product-workflow{
  padding: 80px 0;
  background: #ffffff;
}

.product-measurements-intro{
  margin: 0 0 32px;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0,0,0,0.7);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.product-measurements-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
}

.product-measurement-item{
  padding: 32px;
  background: #f8f9fa;
  border-radius: 12px;
}

.product-measurement-title{
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: #1a2d8c;
}

.product-measurement-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(0,0,0,0.8);
}

.product-workflow-intro{
  margin: 0 0 48px;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0,0,0,0.7);
}

.product-workflow-steps{
  max-width: 900px;
  margin: 0 auto;
}

.product-workflow-step{
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  padding: 32px;
  background: #f8f9fa;
  border-radius: 12px;
}

.product-workflow-step:last-child{
  margin-bottom: 0;
}

.product-workflow-number{
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a2d8c;
  color: #ffffff;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
}

.product-workflow-content{
  flex: 1;
}

.product-workflow-title{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #111111;
}

.product-workflow-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(0,0,0,0.8);
}

/* 소노콤비 전용 스타일 */
.product-combination,
.product-modes,
.product-convenience,
.product-bnr{
  padding: 80px 0;
  background: #ffffff;
}

.product-combination-content{
  max-width: 900px;
  margin: 0 auto;
}

.product-combination-desc{
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(0,0,0,0.8);
  text-align: center;
}

.product-modes-intro{
  margin: 0 0 32px;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0,0,0,0.7);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.product-modes-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto 32px;
}

.product-mode-item{
  padding: 16px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0,0,0,0.8);
}

.product-modes-note{
  margin: 0;
  padding: 20px;
  background: #f0f4ff;
  border-left: 4px solid #1a2d8c;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(0,0,0,0.8);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.product-convenience-intro{
  margin: 0 0 32px;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0,0,0,0.7);
}

.product-convenience-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.product-convenience-item{
  padding: 28px;
  background: #f8f9fa;
  border-radius: 12px;
}

.product-convenience-title{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #1a2d8c;
}

.product-convenience-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(0,0,0,0.8);
}

.product-bnr-content{
  max-width: 900px;
  margin: 0 auto;
}

.product-bnr-desc{
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(0,0,0,0.8);
  text-align: center;
}

/* 제품 페이지 반응형 */
@media (max-width: 768px){
  .product-hero{
    padding: 110px 0 90px;
  }
  .product-hero .about-ribbon{
    width: 100%;
    max-width: 100%;
    padding: 40px 24px;
    gap: 20px; /* 큰 제목 ↔ 설명 간격 */
  }
  .product-hero .about-ribbon-label{
    font-size: 20px;
  }
  .product-hero .about-main-title{
    font-size: 22px;
  }
  .product-hero .about-main-text{
    font-size: 12px;
  }
  
  .product-grid{
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    column-gap: 20px;
    row-gap: 32px; /* 행(세로) 간격 확대 */
    margin-top: 40px;
  }

  /* 제품소개 카드 이미지: 모바일에서는 여백 과도 방지 */
  .product-item-image{
    padding: 24px; /* 10% 추가 축소(여백 +10%) */
  }
  
  .product-detail-content{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .product-detail-title{
    font-size: 26px;
  }
  
  .product-detail-summary{
    font-size: 15px;
    margin-bottom: 10px;
  }
  
  .product-detail-subtitle{
    font-size: 16px;
  }

  .product-detail-desc{
    font-size: 15px;
    line-height: 1.85;
  }
  
  .product-features,
  .product-comparison,
  .product-benefits,
  .product-accessories,
  .product-specs{
    padding: 60px 0;
  }
  
  .product-section-title{
    font-size: 24px;
    margin-bottom: 40px;
    line-height: 1.4;
    text-align: center;
  }
  
  .product-feature-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .product-feature-item{
    padding: 28px;
  }
  
  .product-feature-title{
    font-size: 18px;
    margin-bottom: 16px;
  }
  
  .product-feature-desc{
    font-size: 15px;
  }
  
  .product-comparison-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .product-benefits-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .product-accessories-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .product-spec-row{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 20px;
  }
  
  .product-spec-label{
    font-size: 14px;
    margin-bottom: 6px;
    font-weight: 600;
  }
  
  .product-spec-value{
    font-size: 14px;
    line-height: 1.6;
  }
  
  .product-values-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .product-perspectives-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .product-perspective-item{
    padding: 28px;
  }
  
  .product-perspective-title{
    font-size: 18px;
  }
  
  .product-perspective-desc{
    font-size: 14px;
  }
  
  .product-report-usage-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .product-suitable-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .product-indicators-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .product-perspectives-grid{
    grid-template-columns: 1fr;
  }
  
  .product-consultation-title{
    font-size: 24px;
  }
  
  .product-consultation-desc{
    font-size: 15px;
  }
  
  .product-models-grid,
  .product-protocol-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .product-faq-item{
    padding: 24px;
  }
  
  .product-faq-question{
    font-size: 17px;
    margin-bottom: 12px;
  }
  
  .product-faq-answer{
    font-size: 15px;
    line-height: 1.8;
  }
  
  .product-measurements-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .product-workflow-step{
    flex-direction: column;
    gap: 16px;
    padding: 24px;
  }
  
  .product-workflow-number{
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .product-modes-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .product-convenience-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .product-indicators-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 360px){
  .product-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================
   ABOUT PAGE 애니메이션
   ========================= */

/* 초기 상태: 숨김 */
.animate-on-scroll{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 애니메이션 활성화 상태 */
.animate-on-scroll.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* 고객지원 페이지: 가장 얌전한(부드러운) 애니메이션 */
body.support-page .animate-on-scroll{
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body.support-page .animate-on-scroll.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* 카드 애니메이션 지연 */
.about-card.animate-on-scroll:nth-child(1){
  transition-delay: 0s;
}
.about-card.animate-on-scroll:nth-child(2){
  transition-delay: 0.15s;
}
.about-card.animate-on-scroll:nth-child(3){
  transition-delay: 0.3s;
}

/* 텍스트 애니메이션 지연 */
.about-main-text.animate-on-scroll:nth-of-type(1){
  transition-delay: 0.1s;
}
.about-main-text.animate-on-scroll:nth-of-type(2){
  transition-delay: 0.2s;
}

.about-section-text.animate-on-scroll:nth-of-type(1){
  transition-delay: 0.1s;
}
.about-section-text.animate-on-scroll:nth-of-type(2){
  transition-delay: 0.2s;
}

/* =========================
   SETTING PAGE 스타일
   ========================= */

/* 세팅 페이지 헤더 스타일 (about-page와 동일) */
body.setting-page .site-header{
  background: #ffffff;
  backdrop-filter: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

body.setting-page .logo-light{ display: none; }
body.setting-page .logo-dark{ display: block; }

body.setting-page .gnb-link{
  color: rgba(0,0,0,0.78);
  opacity: 1;
}
body.setting-page .gnb-link:hover{
  color: #1a2d8c;
  font-weight: 500;
}
body.setting-page .gnb-link.is-active{
  color: #1a2d8c;
  font-weight: 500;
}

body.setting-page .header-cta{
  background: linear-gradient(90deg, #1a2d8c 0%, #299cd8 100%);
  color: #ffffff;
  border: 1px solid rgba(26,45,140,0.22);
  box-shadow:
    0 10px 20px rgba(26,45,140,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

body.setting-page .menu-toggle{
  color: #111111;
}

/* 세팅 페이지 메인 */
.setting-main{
  background: #ffffff;
  padding-top: var(--header-h);
}

/* 납품현황 hero는 about-hero 스타일 재사용 */
.setting-hero{
  padding: 140px 0 120px;
  background: #ffffff;
}

.setting-hero-inner{
  text-align: center;
}

/* 납품현황 hero의 about-ribbon 내부 텍스트를 박스 안으로 */
.setting-hero .about-ribbon{
  flex-direction: column;
  gap: 24px;
  white-space: normal;
  padding: 80px 350px;
  margin: 0 auto;
}

.setting-hero .about-ribbon-label{
  font-size: 32px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1;
}

.setting-hero .about-main-title{
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #ffffff;
}

.setting-hero .about-main-text{
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  text-align: center;
  color: #ffffff;
}

/* 세팅 포스트 섹션 */
.setting-posts-section{
  padding-top: 0;
  padding-bottom: 140px;
}

.setting-posts-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
  margin-top: 60px;
}

/* 포스트 카드 */
.setting-post-card{
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.setting-post-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}

.setting-post-link{
  display: block;
  text-decoration: none;
  color: inherit;
}

.setting-post-image{
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: var(--grid-bg);
}

.setting-post-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.setting-post-card:hover .setting-post-image img{
  transform: scale(1.05);
}

.setting-post-content{
  padding: 24px;
}

.setting-post-meta{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 12px;
}

.setting-post-date{
  color: rgba(0,0,0,0.5);
}

.setting-post-category{
  display: inline-block;
  padding: 4px 10px;
  background: rgba(26,45,140,0.1);
  color: #1a2d8c;
  border-radius: 12px;
  font-weight: 500;
  font-size: 11px;
}

.setting-post-title{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: #111111;
  line-height: 1.5;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.setting-post-desc{
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 페이지네이션 */
.setting-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 60px;
}

.pagination-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0,0,0,0.6);
  text-decoration: none;
  border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}

.pagination-link:hover{
  background: rgba(0,0,0,0.05);
  color: #1a2d8c;
}

.pagination-link-active{
  background: #1a2d8c;
  color: #ffffff;
  font-weight: 500;
}

.pagination-link-active:hover{
  background: #299cd8;
  color: #ffffff;
}

.pagination-prev,
.pagination-next{
  margin: 0 4px;
  padding: 0 16px;
}

/* 세팅 포스트 상세 페이지 */
.setting-detail-page .site-header{
  background: #ffffff;
  backdrop-filter: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.setting-detail-page .logo-light{ display: none; }
.setting-detail-page .logo-dark{ display: block; }

.setting-detail-page .gnb-link{
  color: rgba(0,0,0,0.78);
  opacity: 1;
}
.setting-detail-page .gnb-link:hover{
  color: #1a2d8c;
  font-weight: 500;
}
.setting-detail-page .gnb-link.is-active{
  color: #1a2d8c;
  font-weight: 500;
}

.setting-detail-page .header-cta{
  background: linear-gradient(90deg, #1a2d8c 0%, #299cd8 100%);
  color: #ffffff;
  border: 1px solid rgba(26,45,140,0.22);
  box-shadow:
    0 10px 20px rgba(26,45,140,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.setting-detail-page .menu-toggle{
  color: #111111;
}

.setting-detail-main{
  background: #ffffff;
  padding-top: var(--header-h);
}

.setting-detail-hero{
  padding: 100px 0 80px;
  background: #ffffff;
}

.setting-detail-back{
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: rgba(0,0,0,0.6);
  text-decoration: none;
  margin-bottom: 40px;
  transition: color .15s ease;
}

.setting-detail-back:hover{
  color: #1a2d8c;
}

.setting-detail-content{
  max-width: 900px;
  margin: 0 auto;
}

.setting-detail-image{
  width: 100%;
  margin-bottom: 40px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--grid-bg);
}

.setting-detail-image img{
  width: 100%;
  height: auto;
  display: block;
}

.setting-detail-info{
  text-align: left;
}

.setting-detail-meta{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 14px;
}

.setting-detail-date{
  color: rgba(0,0,0,0.5);
}

.setting-detail-category{
  display: inline-block;
  padding: 6px 14px;
  background: rgba(26,45,140,0.1);
  color: #1a2d8c;
  border-radius: 12px;
  font-weight: 500;
  font-size: 12px;
}

.setting-detail-title{
  margin: 0 0 32px;
  font-size: 36px;
  font-weight: 700;
  color: #111111;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.setting-detail-text{
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0,0,0,0.78);
}

.setting-detail-text p{
  margin: 0 0 24px;
}

.setting-detail-text p:last-child{
  margin-bottom: 0;
}

/* 세팅 페이지 반응형 */
@media (max-width: 768px){
  .setting-hero{
    padding: 110px 0 90px;
  }
  .setting-hero .about-ribbon{
    width: 100%;
    max-width: 100%;
    padding: 40px 24px;
    gap: 20px; /* 큰 제목 ↔ 설명 간격 */
  }
  .setting-hero .about-ribbon-label{
    font-size: 20px;
  }
  .setting-hero .about-main-title{
    font-size: 22px;
  }
  .setting-hero .about-main-text{
    font-size: 12px;
  }
  
  .setting-posts-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
  }
  
  .setting-post-image{
    height: 160px;
  }
  
  .setting-post-content{
    padding: 16px;
  }
  
  .setting-post-title{
    font-size: 15px;
  }
  
  .setting-post-desc{
    font-size: 12px;
  }
}

@media (max-width: 360px){
  .setting-posts-grid{
    gap: 12px;
  }
  
  .setting-post-image{
    height: 132px;
  }
  
  .setting-pagination{
    gap: 6px;
    margin-top: 40px;
  }
  
  .pagination-link{
    min-width: 36px;
    height: 36px;
    font-size: 13px;
  }
  
  .setting-detail-hero{
    padding: 80px 0 60px;
  }
  
  .setting-detail-back{
    font-size: 13px;
    margin-bottom: 30px;
  }
  
  .setting-detail-title{
    font-size: 24px;
    margin-bottom: 24px;
  }
  
  .setting-detail-text{
    font-size: 14px;
    line-height: 1.7;
  }
  
  .setting-detail-text p{
    margin-bottom: 20px;
  }
}

/* =========================
   SUPPORT PAGE (고객지원 게시판)
   ========================= */

/* 고객지원 페이지 헤더 스타일 */
body.support-page .site-header{
  background: #ffffff;
  backdrop-filter: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

body.support-page .logo-light{ display: none; }
body.support-page .logo-dark{ display: block; }

body.support-page .gnb-link{
  color: rgba(0,0,0,0.78);
  opacity: 1;
}
body.support-page .gnb-link:hover{
  color: #1a2d8c;
  font-weight: 500;
}
body.support-page .gnb-link.is-active{
  color: #1a2d8c;
  font-weight: 500;
}

body.support-page .header-cta{
  background: linear-gradient(90deg, #1a2d8c 0%, #299cd8 100%);
  color: #ffffff;
  border: 1px solid rgba(26,45,140,0.22);
  box-shadow:
    0 10px 20px rgba(26,45,140,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

body.support-page .menu-toggle{
  color: #111111;
}

/* 고객지원 메인 */
.support-main{
  background: #ffffff;
  padding-top: var(--header-h);
}

/* 고객지원 HERO */
.support-hero{
  padding: 140px 0 120px;
  background: #ffffff;
}

.support-hero-inner{
  text-align: center;
}

/* 고객지원 hero의 about-ribbon 내부 텍스트를 박스 안으로 */
.support-hero .about-ribbon{
  flex-direction: column;
  gap: 24px;
  white-space: normal;
  padding: 80px 350px;
  margin: 0 auto;
}

.support-hero .about-ribbon-label{
  font-size: 32px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1;
}

.support-hero .about-main-title{
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #ffffff;
}

.support-hero .about-main-text{
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  text-align: center;
  color: #ffffff;
}

/* 게시판 섹션 */
.support-board-section{
  padding-top: 0;
  padding-bottom: 140px;
}

/* 게시판 헤더 (검색 + 글쓰기) */
.support-board-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  gap: 16px;
}

.support-header-right{
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-search{
  display: flex;
  gap: 8px;
  flex: 1;
  max-width: 400px;
}

.support-search-input{
  flex: 1;
  height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font-size: 14px;
  color: #111111;
  background: #ffffff;
  transition: border-color .15s ease;
}

.support-search-input:focus{
  outline: none;
  border-color: #1a2d8c;
}

.support-search-input::placeholder{
  color: rgba(0,0,0,0.4);
}

.support-search-btn{
  height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: #1a2d8c;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease;
}

.support-search-btn:hover{
  background: #299cd8;
}

.support-write-btn{
  flex-shrink: 0;
}

/* 게시판 테이블 */
.support-board-table{
  width: 100%;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.support-board-table table{
  width: 100%;
  border-collapse: collapse;
}

.support-board-table thead{
  background: #f5f6fa;
}

.support-board-table th{
  padding: 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0,0,0,0.7);
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.support-board-table tbody tr{
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background-color .15s ease;
}

.support-board-table tbody tr:hover{
  background: rgba(26,45,140,0.02);
}

.support-board-table tbody tr:last-child{
  border-bottom: 0;
}

.support-board-table td{
  padding: 18px 16px;
  font-size: 14px;
  color: rgba(0,0,0,0.78);
  vertical-align: middle;
}

.support-col-num{
  width: 80px;
  text-align: center;
  color: rgba(0,0,0,0.5);
}

.support-col-category{
  width: 100px;
}

.support-col-title{
  min-width: 0;
}

.support-col-author{
  width: 120px;
  text-align: center;
  color: rgba(0,0,0,0.6);
}

.support-col-date{
  width: 120px;
  text-align: center;
  color: rgba(0,0,0,0.5);
}

.support-col-views{
  width: 80px;
  text-align: center;
  color: rgba(0,0,0,0.5);
}

.support-title-link{
  color: rgba(0,0,0,0.88);
  text-decoration: none;
  transition: color .15s ease;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-title-link:hover{
  color: #1a2d8c;
}

/* 카테고리 뱃지 */
.support-category{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.support-category-notice{
  background: rgba(26,45,140,0.1);
  color: #1a2d8c;
}

.support-category-inquiry{
  background: rgba(41,156,216,0.1);
  color: #299cd8;
}

.support-category-as{
  background: rgba(255,152,0,0.1);
  color: #ff9800;
}

/* 고객지원 페이지네이션 */
.support-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 60px;
}

/* 고객지원 페이지 반응형 */
@media (max-width: 768px){
  .support-hero{
    padding: 110px 0 90px;
  }
  .support-hero .about-ribbon{
    width: 100%;
    max-width: 100%;
    padding: 40px 24px;
    gap: 20px; /* 큰 제목 ↔ 설명 간격 */
  }
  .support-hero .about-ribbon-label{
    font-size: 20px;
  }
  .support-hero .about-main-title{
    font-size: 22px;
  }
  .support-hero .about-main-text{
    font-size: 12px;
  }
  
  .support-board-header{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .support-search{
    max-width: 100%;
  }
  
  .support-header-right{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .support-admin-bar{
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(26,45,140,0.05);
    border: 1px solid rgba(26,45,140,0.1);
    border-radius: 8px;
  }
  
  .support-write-btn,
  .support-login-btn{
    width: 100%;
    justify-content: center;
  }
  
  .support-logout-btn{
    width: auto;
  }
  
  .support-board-table{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .support-board-table table{
    min-width: 600px;
  }
  
  .support-board-table th,
  .support-board-table td{
    padding: 12px 8px;
    font-size: 12px;
  }
  
  .support-col-num{
    width: 50px;
  }
  
  .support-col-category{
    width: 70px;
  }
  
  .support-col-author{
    width: 80px;
  }
  
  .support-col-date{
    width: 90px;
  }
  
  .support-col-views{
    width: 50px;
  }
  
  .support-pagination{
    gap: 6px;
    margin-top: 40px;
  }
  
  .pagination-link{
    min-width: 36px;
    height: 36px;
    font-size: 13px;
  }
}

/* =========================
   LOGIN PAGE (로그인 페이지)
   ========================= */

.login-page{
  background: linear-gradient(135deg, #1a2d8c 0%, #299cd8 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.login-container{
  width: 100%;
  max-width: 440px;
}

.login-box{
  background: #ffffff;
  border-radius: 24px;
  padding: 48px 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.login-header{
  text-align: center;
  margin-bottom: 40px;
}

.login-logo{
  display: inline-block;
  margin-bottom: 24px;
}

.login-logo img{
  height: 40px;
  width: auto;
}

.login-title{
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.02em;
}

.login-desc{
  margin: 0;
  font-size: 14px;
  color: rgba(0,0,0,0.6);
  line-height: 1.6;
}

.login-form{
  margin-bottom: 24px;
}

.login-form-group{
  margin-bottom: 24px;
}

.login-label{
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #111111;
}

.login-input{
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font-size: 14px;
  color: #111111;
  background: #ffffff;
  transition: border-color .15s ease;
  box-sizing: border-box;
}

.login-input:focus{
  outline: none;
  border-color: #1a2d8c;
}

.login-input::placeholder{
  color: rgba(0,0,0,0.4);
}

.login-error{
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(244,67,54,0.1);
  border: 1px solid rgba(244,67,54,0.2);
  border-radius: 8px;
  font-size: 13px;
  color: #f44336;
  text-align: center;
}

.login-submit{
  width: 100%;
  height: 48px;
  font-size: 15px;
  font-weight: 500;
}

.login-footer{
  text-align: center;
}

.login-back{
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: rgba(0,0,0,0.6);
  text-decoration: none;
  transition: color .15s ease;
}

.login-back:hover{
  color: #1a2d8c;
}

/* 관리자 바 */
.support-admin-bar{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
}

.support-admin-info{
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-admin-badge{
  display: inline-block;
  padding: 6px 12px;
  background: #1a2d8c;
  color: #ffffff;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.support-admin-name{
  font-size: 14px;
  color: rgba(0,0,0,0.78);
  font-weight: 500;
}

.support-logout-btn{
  height: 36px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.7);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease;
}

.support-logout-btn:hover{
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.25);
  color: #111111;
}

.support-login-btn{
  height: 44px;
  padding: 0 20px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.7);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}

.support-login-btn:hover{
  background: rgba(26,45,140,0.05);
  border-color: #1a2d8c;
  color: #1a2d8c;
}

/* 로그인 페이지 반응형 */
@media (max-width: 768px){
  .login-box{
    padding: 36px 28px;
  }
  
  .login-title{
    font-size: 24px;
  }
  
  .support-admin-bar{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .support-logout-btn{
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   ADMIN PAGE (관리자 페이지)
   ========================= */

/* 관리자 페이지 헤더 */
body.admin-page .site-header{
  background: #ffffff;
  backdrop-filter: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

body.admin-page .logo-light{ display: none; }
body.admin-page .logo-dark{ display: block; }

body.admin-page .gnb-link{
  color: rgba(0,0,0,0.78);
  opacity: 1;
}

body.admin-page .gnb-link:hover{
  color: #1a2d8c;
  font-weight: 500;
}

body.admin-page .header-cta{
  display: none;
}

body.admin-page .menu-toggle{
  color: #111111;
}

.admin-header-right{
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-header-name{
  font-size: 14px;
  color: rgba(0,0,0,0.7);
  font-weight: 500;
}

.admin-logout-btn{
  height: 36px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.7);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease;
}

.admin-logout-btn:hover{
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.25);
  color: #111111;
}

.admin-back-link{
  font-size: 14px;
  color: rgba(0,0,0,0.7);
  text-decoration: none;
  transition: color .15s ease;
}

.admin-back-link:hover{
  color: #1a2d8c;
}

/* 관리자 메인 */
.admin-main{
  background: #ffffff;
  padding-top: var(--header-h);
}

/* 관리자 HERO */
.admin-hero{
  padding: 100px 0 60px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.admin-hero-inner{
  text-align: center;
}

.admin-hero-title{
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.02em;
}

.admin-hero-desc{
  margin: 0;
  font-size: 14px;
  color: rgba(0,0,0,0.6);
  line-height: 1.6;
}

/* 관리자 메뉴 그리드 */
.admin-menu-section{
  padding-top: 80px;
  padding-bottom: 100px;
}

.admin-menu-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
}

.admin-menu-card{
  display: block;
  padding: 40px 32px;
  background: #ffffff;
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  transition: all .2s ease;
  text-align: center;
}

.admin-menu-card:hover{
  border-color: #1a2d8c;
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(26,45,140,0.12);
}

.admin-menu-icon{
  font-size: 48px;
  margin-bottom: 20px;
}

.admin-menu-title{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
  color: #111111;
}

.admin-menu-desc{
  margin: 0;
  font-size: 14px;
  color: rgba(0,0,0,0.6);
  line-height: 1.6;
}

/* 관리자 콘텐츠 섹션 */
.admin-content-section{
  padding-top: 60px;
  padding-bottom: 100px;
}

.admin-content-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.admin-content-title{
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #111111;
}

/* 관리자 목록 테이블 */
.admin-list-table{
  width: 100%;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  margin-bottom: 40px;
}

.admin-list-table table{
  width: 100%;
  border-collapse: collapse;
}

.admin-list-table thead{
  background: #f5f6fa;
}

.admin-list-table th{
  padding: 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0,0,0,0.7);
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.admin-list-table tbody tr{
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background-color .15s ease;
}

.admin-list-table tbody tr:hover{
  background: rgba(26,45,140,0.02);
}

.admin-list-table tbody tr:last-child{
  border-bottom: 0;
}

.admin-list-table td{
  padding: 18px 16px;
  font-size: 14px;
  color: rgba(0,0,0,0.78);
  vertical-align: middle;
}

.admin-col-num{
  width: 80px;
  text-align: center;
  color: rgba(0,0,0,0.5);
}

.admin-col-title{
  min-width: 0;
}

.admin-col-category{
  width: 120px;
}

.admin-col-author{
  width: 120px;
  text-align: center;
  color: rgba(0,0,0,0.6);
}

.admin-col-date{
  width: 120px;
  text-align: center;
  color: rgba(0,0,0,0.5);
}

.admin-col-views{
  width: 80px;
  text-align: center;
  color: rgba(0,0,0,0.5);
}

.admin-col-actions{
  width: 140px;
  text-align: center;
}

.admin-category-badge{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.admin-category-notice{
  background: rgba(26,45,140,0.1);
  color: #1a2d8c;
}

.admin-category-inquiry{
  background: rgba(41,156,216,0.1);
  color: #299cd8;
}

.admin-category-as{
  background: rgba(255,152,0,0.1);
  color: #ff9800;
}

.admin-action-btn{
  display: inline-block;
  padding: 6px 12px;
  margin: 0 2px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: all .15s ease;
}

.admin-action-edit{
  background: rgba(26,45,140,0.1);
  color: #1a2d8c;
}

.admin-action-edit:hover{
  background: rgba(26,45,140,0.2);
}

.admin-action-delete{
  background: rgba(244,67,54,0.1);
  color: #f44336;
}

.admin-action-delete:hover{
  background: rgba(244,67,54,0.2);
}

.admin-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* 관리자 폼 */
.admin-form-section{
  padding-top: 60px;
  padding-bottom: 100px;
}

.admin-form{
  max-width: 800px;
  margin: 0 auto;
}

.admin-form-group{
  margin-bottom: 24px;
}

.admin-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.admin-form-label{
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #111111;
}

.admin-form-required{
  color: #f44336;
}

.admin-form-input,
.admin-form-select,
.admin-form-textarea{
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font-size: 14px;
  color: #111111;
  background: #ffffff;
  transition: border-color .15s ease;
  box-sizing: border-box;
  font-family: inherit;
}

.admin-form-input:focus,
.admin-form-select:focus,
.admin-form-textarea:focus{
  outline: none;
  border-color: #1a2d8c;
}

.admin-form-textarea{
  resize: vertical;
  min-height: 300px;
}

.admin-form-file{
  width: 100%;
  padding: 8px;
  border: 1px dashed rgba(0,0,0,0.2);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.admin-form-help{
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(0,0,0,0.5);
}

.admin-form-actions{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.admin-form-cancel{
  height: 44px;
  padding: 0 24px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.7);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}

.admin-form-cancel:hover{
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.25);
  color: #111111;
}

/* 관리자 페이지 반응형 */
@media (max-width: 768px){
  .admin-header-right{
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
  }
  
  .admin-hero{
    padding: 80px 0 40px;
  }
  
  .admin-hero-title{
    font-size: 24px;
  }
  
  .admin-menu-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .admin-content-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .admin-content-title{
    font-size: 20px;
  }
  
  .admin-list-table{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .admin-list-table table{
    min-width: 700px;
  }
  
  .admin-form-row{
    grid-template-columns: 1fr;
  }
  
  .admin-form-actions{
    flex-direction: column-reverse;
  }
  
  .admin-form-cancel,
  .admin-form-actions .btn{
    width: 100%;
  }
}


/* =========================================================
   MOBILE HAMBURGER ICON COLOR RULES (AceBody)
   요구사항:
   - 홈(index): 스크롤 맨 위(헤로 구간) = 흰색, 스크롤 후 = #1a2d8c
   - 서브페이지: 항상 #1a2d8c
   주의: 기존 중복/!important 규칙을 확실히 이기기 위해 파일 맨 아래에서 오버라이드합니다.
   ========================================================= */
@media (max-width: 1024px){
  /* 기본(홈 상단 포함): 흰색 */
  .menu-toggle{
    /* Force hamburger visible on all mobile pages */
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1001;
    position: relative;
    color: #ffffff;
  }
  .menu-toggle span{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    height: 2px;
    margin: 6px 0;
    border-radius: 1px;
    background: currentColor !important;
  }

  /* 홈에서 스크롤 후: #1a2d8c */
  body.is-scrolled .menu-toggle{
    color: #1a2d8c !important;
  }

  /* 서브페이지: 항상 #1a2d8c (스크롤 여부 무관) */
  body.about-page .menu-toggle,
  body.product-page .menu-toggle,
  body.product-detail-page .menu-toggle,
  body.setting-page .menu-toggle,
  body.support-page .menu-toggle{
    color: #1a2d8c !important;
  }
}

/* ==============================
   MOBILE HAMBURGER + GNB OVERRIDES
   (Paste this at the very bottom of styles.css)
   ============================== */

/* 기본: PC에서는 숨김 */
.menu-toggle{ display:none !important; }

/* 모바일/태블릿(1024 이하)에서는 표시 */
@media (max-width: 1024px){
  .menu-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    width:44px;
    height:44px;
    background:transparent;
    border:0;
    padding:0;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
    z-index:1002;
  }

  .menu-toggle span{
    display:block;
    width:22px;
    height:2px;
    margin:3px 0;
    background:currentColor;
    border-radius:1px;
  }

  /* 홈(index): 히어로 구간(스크롤 전) = 흰색 */
  body.home-page .menu-toggle{
    color:#ffffff !important;
  }

  /* 홈(index): 히어로 지나 스크롤 후(헤더 흰 배경) = 남색 */
  body.home-page.is-scrolled .menu-toggle{
    color:var(--cta-bg) !important; /* #1a2d8c */
  }

  /* 서브페이지: 남색 고정 */
  body.about-page .menu-toggle,
  body.product-page .menu-toggle,
  body.setting-page .menu-toggle,
  body.support-page .menu-toggle,
  body.product-detail-page .menu-toggle{
    color:var(--cta-bg) !important;
  }

  /* 모바일 메뉴 열림/닫힘 상태 (CSS가 이미 있더라도 안전하게 보강) */
  .gnb{
    pointer-events:none;
  }
  body.is-menu-open .gnb{
    pointer-events:auto;
  }
}

/* ========== CONSULTATION POPUP ========== */
.consultation-popup-overlay{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.consultation-popup-overlay.is-open{
  display: flex;
}

.consultation-popup-overlay.is-visible{
  opacity: 1;
}

.consultation-popup{
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.consultation-popup-overlay.is-visible .consultation-popup{
  transform: scale(1);
}

.consultation-popup-header{
  padding: 24px 24px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.consultation-popup-title{
  font-size: 20px;
  font-weight: 700;
  color: #111;
  margin: 0;
}

.consultation-popup-close{
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  padding: 0;
}

.consultation-popup-close:hover{
  background: #f3f4f6;
}

.consultation-popup-close::before,
.consultation-popup-close::after{
  content: '';
  position: absolute;
  width: 18px;
  height: 2px;
  background: #6b7280;
  border-radius: 1px;
}

.consultation-popup-close::before{
  transform: rotate(45deg);
}

.consultation-popup-close::after{
  transform: rotate(-45deg);
}

.consultation-popup-body{
  padding: 24px;
}

.consultation-form-group{
  margin-bottom: 20px;
}

.consultation-form-label{
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.consultation-form-label .required{
  color: #ef4444;
  margin-left: 2px;
}

.consultation-form-input,
.consultation-form-select,
.consultation-form-textarea{
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font);
  color: #111;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.consultation-form-input:focus,
.consultation-form-select:focus,
.consultation-form-textarea:focus{
  outline: none;
  border-color: #1a2d8c;
  box-shadow: 0 0 0 3px rgba(26, 45, 140, 0.1);
}

.consultation-form-textarea{
  min-height: 120px;
  resize: vertical;
  font-family: var(--font);
}

.consultation-form-privacy{
  margin-top: 24px;
  margin-bottom: 20px;
}

.consultation-form-privacy-toggle{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  user-select: none;
}

.consultation-form-privacy-toggle input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  pointer-events: auto;
}

.consultation-form-privacy-toggle-text,
.consultation-form-privacy-toggle-icon{
  cursor: pointer;
  pointer-events: auto;
}

.consultation-form-privacy-toggle-text:hover,
.consultation-form-privacy-toggle-icon:hover{
  opacity: 0.7;
}

.consultation-form-privacy-toggle-icon{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: #6b7280;
}

.consultation-form-privacy-toggle-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

.consultation-form-privacy.is-expanded .consultation-form-privacy-toggle-icon{
  transform: rotate(180deg);
}

.consultation-form-privacy-toggle-text{
  font-size: 13px;
  font-weight: 500;
  color: #111;
  flex: 1;
}

.consultation-form-privacy-details{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 24px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.consultation-form-privacy.is-expanded .consultation-form-privacy-details{
  max-height: 400px;
  padding: 16px 24px;
  margin-top: 8px;
  overflow-y: auto;
}

.consultation-form-privacy-title{
  font-size: 14px;
  font-weight: 600;
  color: #111;
  margin-bottom: 12px;
}

.consultation-form-privacy-content{
  font-size: 12px;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 16px;
}

.consultation-form-privacy-content p{
  margin: 0 0 8px 0;
}

.consultation-form-privacy-content strong{
  font-weight: 600;
  color: #111;
}

.consultation-form-privacy-checkbox{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  margin-top: 12px;
}

.consultation-form-privacy-checkbox-wrapper{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  margin-top: 12px;
}

.consultation-form-privacy-checkbox-wrapper input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.consultation-form-privacy-checkbox-wrapper label{
  font-size: 13px;
  font-weight: 500;
  color: #111;
  cursor: pointer;
  line-height: 1.5;
  user-select: none;
}

.consultation-form-privacy-checkbox-wrapper input[type="checkbox"]:not(:checked) + label{
  color: #6b7280;
}

.consultation-form-privacy-checkbox input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.consultation-form-privacy-checkbox label{
  font-size: 13px;
  font-weight: 500;
  color: #111;
  cursor: pointer;
  line-height: 1.5;
  user-select: none;
}

.consultation-form-privacy-checkbox input[type="checkbox"]:not(:checked) + label{
  color: #6b7280;
}

.consultation-form-actions{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.consultation-form-submit{
  padding: 14px 48px;
  background: linear-gradient(90deg, #1a2d8c 0%, #299cd8 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: var(--font);
}

.consultation-form-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 45, 140, 0.3);
}

.consultation-form-submit:active{
  transform: translateY(0);
}


@media (max-width: 560px){
  .consultation-popup{
    max-width: 100%;
    border-radius: 12px 12px 0 0;
    max-height: 95vh;
  }
  
  .consultation-popup-header{
    padding: 20px 20px 16px;
  }
  
  .consultation-popup-title{
    font-size: 18px;
  }
  
  .consultation-popup-body{
    padding: 20px;
  }
  
  .consultation-form-privacy-toggle{
    padding: 10px 0;
  }
  
  .consultation-form-privacy-toggle-text{
    font-size: 12px;
  }
  
  .consultation-form-privacy-details{
    padding: 0 16px;
  }
  
  .consultation-form-privacy.is-expanded .consultation-form-privacy-details{
    max-height: 300px;
    padding: 12px 16px;
  }
  
  .consultation-form-privacy-title{
    font-size: 13px;
  }
  
  .consultation-form-privacy-content{
    font-size: 11px;
  }
  
  .consultation-form-actions{
    justify-content: center;
  }
  
  .consultation-form-submit{
    width: 100%;
    padding: 14px 24px;
  }
}