:root {
  --cp-header-h: 80px;
  --cp-x-pad: 0px;
  --cp-color: #63625f;
}

/* 리빌더 CSS 덮어쓰기 */
#container_title {font-size: 30px; padding: 30px 0; color: #000; display:none;}

/* ===== Header wrapper (transparent) ===== */
#cp-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: transparent;
  color: var(--cp-color);
  z-index: 999;
  transition: transform 500ms ease, background-color 180ms ease, box-shadow 180ms ease;
  transform: translateY(0);
}

/* 스크롤되었거나(nav hover)면 흰 배경 */
#cp-header.is-solid,
#cp-header.is-hover {
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(15px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
#cp-header.is-solid .cp-nav a,
#cp-header.is-hover .cp-nav a { color: #222; opacity: 0.9; }
#cp-header.is-solid .cp-nav a:hover,
#cp-header.is-hover .cp-nav a:hover { opacity: 1; }
#cp-header.is-solid .cp-burger,
#cp-header.is-hover .cp-burger { color: #222; }
#cp-header.is-autohide-hidden {
  transform: translateY(-100%);
}

.cp-header-inner {
  width: var(--rb-header-width);
  height: var(--cp-header-h);
  margin: 0 auto;
  padding: 0 var(--cp-x-pad);
  display: grid;
  grid-template-columns: auto 1fr auto; /* 좌 / 중앙 / 우 */
  align-items: center;
  gap: 100px;
}

/* ===== Left: Logo ===== */
.cp-logo img { max-width: 220px; }

/* ===== Center: Nav ===== */
.cp-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;               /* 헤더 높이에 맞춰 늘어남 */
  gap: 30px;
}
.cp-nav > ul > li {
  height: var(--cp-header-h);         /* 헤더 높이와 동일 */
  display: flex;
  align-items: center;                /* 수직 가운데 정렬 */
}
.cp-nav > ul > li > a {
  display: flex;
  align-items: center;                /* 텍스트 수직 가운데 */
  height: 100%;                       /* 전체 높이 클릭/hover 영역 */
  box-sizing: border-box;
  padding: 10px 20px;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 16px;
  opacity: 0.9;
}
.cp-nav a:hover { opacity: 1; }

/* ===== Right: Actions ===== */
.cp-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.cp-burger {
  width: 32px; height: 32px; padding: 0; border: 0; background: none;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  cursor: pointer; color: #fff;
}
.cp-burger-line { width: 18px; height: 2px; background: currentColor; display: block; }

/* ===== A11y: Focus ring ===== */
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ===== Dropdown (기본 위치 지정) ===== */
.cp-nav li { position: static; }

/* ===== 풀폭 2차 메뉴: 슬라이드 다운/업 애니메이션 ===== */
.cp-nav .cp-sub {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--cp-header-h);
  z-index: 998;

  /* 항상 렌더링하되 보이지 않게 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  width: 100vw;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(15px);
  border-top: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 12px calc((100vw - var(--rb-header-width))/2 + var(--cp-x-pad));
  padding-left: calc(
    (100vw - var(--rb-header-width))/2 + var(--cp-x-pad) + var(--cp-sub-extra-pad-left, 0px)
  );

  opacity: 0;
  visibility: hidden;          /* 스크린리더/탭 이동 방지 */
  transform: translateY(-12px);
  pointer-events: none;        /* 아래 요소 클릭 가능 */

  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    opacity   .20s ease,
    visibility 0s linear .28s;
  will-change: transform, opacity;
  transform-origin: 50% 0;
}

/* 열림 상태: hover/포커스/서브 유지 */
.cp-nav > ul > li:hover > .cp-sub,
.cp-nav > ul > li:focus-within > .cp-sub,
.cp-nav .cp-sub:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    opacity   .20s ease,
    visibility 0s;
}

/* 항목 스타일 */
.cp-nav .cp-sub li { list-style: none; margin: 0; }
.cp-nav .cp-sub a {
  display: inline-block;
  padding: 8px 12px;
  font-size: 14px;
  color: #222;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color .15s ease, opacity .15s ease;
  opacity: .95;
}
.cp-nav .cp-sub a:hover { background: rgba(0,0,0,.04); opacity: 1; }

/* 모바일: 드롭다운 숨김 */
@media (max-width: 960px) {
  .cp-header-inner { padding: 0 20px; gap: 0; }
  .cp-nav { display: none; }
  .cp-actions { justify-content: flex-end; }
  .cp-nav .cp-sub { display: none !important; }
}

/* 접근성: 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
  .cp-nav .cp-sub { transition: none; }
}