/*
 * fx chrome — 헤더·푸터(template-parts/fx/header.php · footer.php).
 * 응축(.is-scrolled 880×56)과 알약 뼈대는 motion.css, 여기는 색·내용 배치.
 * 알약은 어느 면 위에서도 같은 어두운 색(--fx-s1)이다. 면 변수(--fx-bg 등)를 쓰지 않는다.
 * 모바일 우선, 1024px 부터 가로 메뉴.
 */

/* ===== 헤더 ===== */
.fx-hdr{--fx-ring:var(--fx-t1);--h-fg:var(--fx-t1);--h-fg2:var(--fx-t2);--h-fg3:var(--fx-t3);--h-edge:var(--fx-edge-ink-strong);color:var(--h-fg)}
.fx-hdr__pill{background:var(--fx-s1);gap:var(--fx-sp-2);padding-right:6px}
.fx-hdr__logo{display:flex;align-items:center;min-height:44px;flex:none}
.fx-hdr__logo img{height:22px;width:auto}
.fx-hdr__nav{display:none}
.fx-hdr__right{display:flex;align-items:center;gap:var(--fx-sp-1);margin-left:auto}
.fx-hdr__sup,.fx-hdr__login{display:none}
.fx-hdr__demo{display:none}
.fx-hdr__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;color:var(--h-fg2);background:transparent;border:0;cursor:pointer;transition:color .2s,background-color .2s}
.fx-hdr__icon:hover{color:var(--h-fg);background:rgba(255,255,255,.08)}
.fx-hdr__bell{display:none;color:var(--h-fg2)}
/* 우측 아이콘 한 세트: 44px 원형 버튼 · 20px 선 아이콘(stroke 1.6, 둥근 끝) · 같은 색·호버·포커스링 · 개수 배지는 버튼 우상단 */
.fx-hdr__icon svg,.fx-hdr__bell .fhc-bell__svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fx-hdr__bell .fhc-bell{display:block}
.fx-hdr__bell .fhc-bell__btn{width:44px;height:44px;border-radius:50%;background:transparent;color:inherit;box-shadow:none;transition:color .2s,background-color .2s}
.fx-hdr__bell .fhc-bell__btn:hover{transform:none;background:rgba(255,255,255,.08);color:var(--h-fg)}
.fx-hdr .fx-hdr__icon:focus-visible,.fx-hdr .fx-hdr__bell .fhc-bell__btn:focus-visible,.fx-hdr .fx-hdr__burger:focus-visible,.fx-hdr .fx-hdr__login:focus-visible{outline:2px solid var(--fx-ring);outline-offset:2px}
.fx-hdr .fx-hdr__icon:focus-visible,.fx-hdr .fx-hdr__bell .fhc-bell__btn:focus-visible,.fx-hdr .fx-hdr__burger:focus-visible{border-radius:50%}
.fx-hdr .fx-hdr__login:focus-visible,.fx-hdr .fx-hdr__demo:focus-visible{border-radius:var(--fx-radius-pill)}
.fx-hdr .fx-hdr__demo:focus-visible{outline:2px solid var(--fx-ring);outline-offset:2px}
.fx-hdr__dot,.fx-hdr__bell .fhc-bell__badge{position:absolute;top:0;right:0;box-sizing:border-box;min-width:16px;height:16px;padding:0 3px;border-radius:var(--fx-radius-pill);background:var(--fx-brand);color:var(--fx-brand-ink);font-size:10px;font-weight:700;line-height:16px;text-align:center;font-variant-numeric:tabular-nums}
.fx-hdr__dot{display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* 관리자 로그인 상태의 워드프레스 관리 막대 아래로 */
.admin-bar .fx-hdr{top:58px}
@media (min-width:783px){.admin-bar .fx-hdr{top:44px}}

/* 햄버거 */
.fx-hdr__burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--h-fg2);cursor:pointer;transition:color .2s,background-color .2s}
.fx-hdr__burger:hover{color:var(--h-fg);background:rgba(255,255,255,.08)}
.fx-hdr__burger span,.fx-hdr__burger span::before,.fx-hdr__burger span::after{display:block;width:20px;height:1.6px;border-radius:1px;background:currentColor}
.fx-hdr__burger span{position:relative;transition:background-color .2s}
.fx-hdr__burger span::before,.fx-hdr__burger span::after{content:"";position:absolute;left:0;transition:transform .3s var(--fx-ease-std)}
.fx-hdr__burger span::before{top:-6px}
.fx-hdr__burger span::after{top:6px}
.fx-hdr__burger[aria-expanded=true] span{background:transparent}
.fx-hdr__burger[aria-expanded=true] span::before{transform:translateY(6px) rotate(45deg)}
.fx-hdr__burger[aria-expanded=true] span::after{transform:translateY(-6px) rotate(-45deg)}

/* 모바일 메뉴 */
.fx-hdr__mnav{
  position:absolute;top:calc(100% + 8px);left:0;right:0;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;
  padding:12px;border-radius:var(--fx-radius-l);background:var(--fx-s2);
  box-shadow:inset 0 0 0 1px var(--h-edge),0 24px 60px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--fx-ease-std),transform .25s var(--fx-ease-std),visibility .25s;
}
.fx-hdr__mnav.is-open{opacity:1;visibility:visible;transform:none}
.fx-hdr__mhead{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 16px;border-radius:var(--fx-radius-m);font-size:16px;font-weight:600;color:var(--h-fg);cursor:pointer;list-style:none}
.fx-hdr__mhead::-webkit-details-marker{display:none}
.fx-hdr__mhead:hover{background:var(--fx-s3)}
.fx-hdr__mpm{position:relative;width:14px;height:14px;flex:none}
.fx-hdr__mpm::before,.fx-hdr__mpm::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;border-radius:1px;background:var(--h-fg3);transition:transform .25s var(--fx-ease-std)}
.fx-hdr__mpm::after{transform:rotate(90deg)}
.fx-hdr__mgroup[open]>.fx-hdr__mhead .fx-hdr__mpm::after{transform:rotate(0)}
.fx-hdr__mbody{padding:4px 8px 12px 16px}
.fx-hdr__gtitle{margin:0;padding:12px 8px 4px;font-size:var(--fx-size-min);font-weight:600;letter-spacing:.01em;color:var(--h-fg3)}
.fx-hdr__mlink{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;border-radius:var(--fx-radius-s);font-size:15px;color:var(--h-fg2)}
.fx-hdr__mlink:hover,.fx-hdr__mlink[aria-current]{color:var(--h-fg);background:var(--fx-s3)}
.fx-hdr__mlink--foot{color:var(--h-fg)}
/* 묶음별 「더 보기」: 일반 항목보다 작고 가벼운 링크형(설명 없음, 우측 화살표). 44px 터치 타겟 유지 */
.fx-hdr__mlink--more{justify-content:space-between;font-size:14px;color:var(--h-fg3)}
.fx-hdr__mlink--more:hover,.fx-hdr__mlink--more:focus-visible{color:var(--h-fg);background:var(--fx-s3)}
.fx-hdr__mlink--more:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
.fx-hdr__arr{display:inline-block;transition:transform .2s ease}
.fx-hdr__mlink--more:hover .fx-hdr__arr,.fx-hdr__mlink--more:focus-visible .fx-hdr__arr{transform:translateX(3px)}
.fx-hdr__mtri{display:flex;align-items:center;gap:4px;margin:12px 0 8px;padding-top:8px;border-top:1px solid var(--h-edge)}
.fx-hdr__mtri a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;padding:0 12px;border-radius:var(--fx-radius-s);font-size:14px;font-weight:500;color:var(--h-fg2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.fx-hdr__mtri a:hover{color:var(--h-fg);background:var(--fx-s3)}
.fx-hdr__mdot{color:var(--h-fg3);font-size:14px}
.fx-hdr__mlogout{display:flex;align-items:center;justify-content:center;min-height:44px;margin-bottom:8px;font-size:15px;color:var(--h-fg3)}
.fx-hdr__mlogout:hover{color:var(--h-fg)}
.fx-hdr__mnav .fx-button{width:100%}

/* 모바일 메뉴 맨 위 「최근 문의」 한 줄 롤링(상자·색 띠 없이 아래 구분선 1개). 항목은 쌓아 두고 하나만 보인다 */
.fx-hdr__mtick{margin:0 0 4px;padding:4px 16px 0;border-bottom:1px solid var(--h-edge)}
.fx-hdr__mtick-label{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:600;line-height:20px;color:var(--h-fg2)}
.fx-hdr__mtick-dot{position:relative;flex:none;width:6px;height:6px;border-radius:50%;background:var(--fx-brand)}
.fx-hdr__mtick-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--fx-brand);opacity:0;animation:fx-mtick-pulse 2s ease-out infinite}
.fx-hdr__mnav:not(.is-open) .fx-hdr__mtick-dot::after{animation-play-state:paused}
@keyframes fx-mtick-pulse{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.fx-hdr__mtick-sum{min-width:0;overflow:hidden;font-weight:400;color:var(--h-fg3);white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.fx-hdr__mtick-stage{position:relative;height:44px;margin:0 -8px;overflow:hidden}
.fx-hdr__mtick-item{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:0 8px;border-radius:var(--fx-radius-s);color:var(--h-fg);opacity:0;visibility:hidden;transform:translateY(100%);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
.fx-hdr__mtick-item.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease,visibility 0s}
.fx-hdr__mtick-item.is-out{opacity:0;visibility:visible;transform:translateY(-100%)}
.fx-hdr__mtick-item:focus-visible{outline:2px solid var(--fx-ring);outline-offset:-2px}
.fx-hdr__mtick-txt{flex:1 1 auto;min-width:0;overflow:hidden;font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;text-overflow:ellipsis}
.fx-hdr__mtick-type{font-weight:500;color:var(--h-fg2)}
a.fx-hdr__mtick-item:hover .fx-hdr__mtick-txt{text-decoration:underline;text-decoration-color:var(--h-fg3);text-underline-offset:.2em}
.fx-hdr__mtick-meta{flex:none;font-size:12px;line-height:1.4;color:var(--h-fg2);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.fx-hdr__mtick-dot::after{animation:none}.fx-hdr__mtick-item,.fx-hdr__mtick-item.is-on,.fx-hdr__mtick-item.is-out{transition:none;transform:none}}

/* 배지 */
.fx-hdr__badge{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;border-radius:var(--fx-radius-pill);background:var(--fx-s3);color:var(--h-fg2);font-size:var(--fx-size-min);font-weight:600;line-height:1}
.fx-hdr__badge--sold{background:var(--fx-brand);color:var(--fx-brand-ink)}

/* ===== 1024+ 가로 메뉴 ===== */
@media (min-width:1024px){
  .fx-hdr__burger,.fx-hdr__mnav{display:none}
  .fx-hdr__nav{display:flex;align-items:center;justify-content:center;flex:1;gap:0}
  .fx-hdr__item{position:relative}
  .fx-hdr__link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:var(--fx-radius-pill);background:transparent;font:inherit;font-size:15px;font-weight:500;color:var(--h-fg2);cursor:pointer;white-space:nowrap;transition:color .2s,background-color .2s}
  .fx-hdr__link:hover,.fx-hdr__item.is-open>.fx-hdr__link{color:var(--h-fg);background:rgba(255,255,255,.08)}
  .fx-hdr__link svg{transition:transform .25s var(--fx-ease-std)}
  .fx-hdr__item.is-open>.fx-hdr__link svg{transform:rotate(180deg)}
  .fx-hdr__sup,.fx-hdr__login{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--fx-radius-pill);font-size:15px;color:var(--h-fg2);white-space:nowrap;transition:color .2s,background-color .2s}
  .fx-hdr__sup:hover,.fx-hdr__login:hover{color:var(--h-fg);background:rgba(255,255,255,.08)}
  .fx-hdr__demo{display:inline-flex;white-space:nowrap;padding:0 18px;font-size:15px}
  .fx-hdr__bell{display:inline-flex}
  .fx-hdr__right{margin-left:0}

  /* 펼침 패널: 알약 가운데 아래 */
  .fx-hdr__pill{position:relative}
  .fx-hdr__panel{
    position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(calc(-50% + var(--fx-shift,0px)));z-index:5;
    width:calc(var(--fx-cols,1) * 248px + 32px);max-width:calc(100vw - 32px);padding:16px;border-radius:var(--fx-radius-l);
    background:var(--fx-s2);box-shadow:inset 0 0 0 1px var(--h-edge),0 24px 60px rgba(0,0,0,.6);
  }
  .fx-hdr__panel[hidden]{display:none}
  .fx-hdr__panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px}
  .fx-hdr__panel--acct{left:auto;right:0;transform:none;width:280px;max-width:none;padding:8px}
  .fx-hdr__item--acct{position:relative}
  .fx-hdr__item--acct .fx-hdr__panel{top:calc(100% + 16px)}
  .fx-hdr__mega{display:grid;grid-template-columns:repeat(var(--fx-cols,1),minmax(0,1fr));gap:0 8px}
  .fx-hdr__group{min-width:0}
  .fx-hdr__gtitle{padding:4px 12px 8px}
  .fx-hdr__plink{display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:8px 12px;border-radius:var(--fx-radius-m);color:var(--h-fg);transition:background-color .2s}
  .fx-hdr__plink:hover{background:var(--fx-s3)}
  .fx-hdr__plink:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
  .fx-hdr__plink[aria-current]{background:var(--fx-s3)}
  .fx-hdr__plink--one{min-height:44px;font-size:15px;color:var(--h-fg2)}
  .fx-hdr__plink--one:hover{color:var(--h-fg)}
  .fx-hdr__pname{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
  .fx-hdr__pdesc{margin-top:2px;font-size:var(--fx-size-small);color:var(--h-fg3)}
  .fx-hdr__plink--more{min-height:44px;padding-top:0;padding-bottom:0}
  .fx-hdr__plink--more .fx-hdr__pname{justify-content:space-between;font-size:14px;font-weight:500;color:var(--h-fg3)}
  .fx-hdr__plink--more:hover .fx-hdr__pname,.fx-hdr__plink--more:focus-visible .fx-hdr__pname{color:var(--h-fg)}
  .fx-hdr__plink--more:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
  .fx-hdr__plink--more:hover .fx-hdr__arr,.fx-hdr__plink--more:focus-visible .fx-hdr__arr{transform:translateX(3px)}
  .fx-hdr__flat{display:grid;gap:2px}
  .fx-hdr__foot{display:flex;flex-wrap:wrap;gap:0 8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--fx-edge-ink)}
  .fx-hdr__foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--fx-radius-pill);font-size:15px;font-weight:600;color:var(--h-fg)}
  .fx-hdr__foot a:hover{background:var(--fx-s3)}
  .fx-hdr__who{display:grid;gap:2px;padding:12px;margin-bottom:4px;border-bottom:1px solid var(--fx-edge-ink)}
  .fx-hdr__who b{font-size:15px;color:var(--h-fg)}
  .fx-hdr__who span{font-size:var(--fx-size-small);color:var(--h-fg3);overflow-wrap:anywhere}
}
@media (max-width:1023.98px){
  .fx-hdr__panel{display:none}
  /* 모바일 프로필 메뉴만: 알약 바로 아래 오른쪽 정렬 드롭다운 (데스크톱 항목 패널은 계속 숨김) */
  .fx-hdr__pill>.fx-hdr__right{position:static}
  .fx-hdr__panel--acct:not([hidden]){display:block;position:absolute;top:calc(100% + 8px);right:0;left:auto;z-index:5;width:min(280px,calc(100vw - 32px));max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain;padding:8px;border-radius:var(--fx-radius-l);background:var(--fx-s2);box-shadow:inset 0 0 0 1px var(--h-edge),0 24px 60px rgba(0,0,0,.6)}
  .fx-hdr__panel--acct .fx-hdr__plink{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:var(--fx-radius-m);font-size:15px;color:var(--h-fg2);transition:background-color .2s,color .2s}
  .fx-hdr__panel--acct .fx-hdr__plink:hover{background:var(--fx-s3);color:var(--h-fg)}
  .fx-hdr__panel--acct .fx-hdr__plink:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
}
/* 좁은 데스크톱(1024~1279): 고객센터·로그인 글자 링크는 줄여 알약 안에 맞춘다 */
@media (min-width:1024px) and (max-width:1279.98px){
  .fx-hdr__link,.fx-hdr__sup,.fx-hdr__login{padding:0 8px;font-size:14px}
  .fx-hdr__demo{padding:0 14px;font-size:14px}
}
@media (min-width:1024px){
  .fx-hdr.is-scrolled .fx-hdr__link,.fx-hdr.is-scrolled .fx-hdr__sup,.fx-hdr.is-scrolled .fx-hdr__login{padding:0 8px;font-size:14px}
  .fx-hdr.is-scrolled .fx-hdr__demo{padding:0 14px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .fx-hdr__mnav,.fx-hdr__burger span::before,.fx-hdr__burger span::after,.fx-hdr__link svg{transition:none}
}

/* ===== 푸터 ===== */
.fx-ftr{padding:var(--fx-sp-12) 0 var(--fx-sp-16);border-top:1px solid var(--fx-edge-ink)}
.fx-ftr__in{display:grid;gap:var(--fx-sp-12)}
.fx-ftr__brand{display:grid;gap:var(--fx-sp-4);align-content:start}
.fx-ftr__logo{display:inline-flex;align-items:center;min-height:44px}
.fx-ftr__logo img{height:24px;width:auto}
.fx-ftr__legal{max-width:52ch;font-size:var(--fx-size-small);line-height:1.8;color:var(--fx-t2);overflow-wrap:anywhere}
.fx-ftr__operator{display:block;margin-bottom:var(--fx-sp-1);font-weight:600;color:var(--fx-t1)}
.fx-ftr__copy{font-size:var(--fx-size-min);color:var(--fx-t3)}
.fx-ftr__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--fx-sp-8) var(--fx-sp-6)}
.fx-ftr__col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.fx-ftr__coltitle{margin-bottom:var(--fx-sp-2);font-size:var(--fx-size-min);font-weight:600;letter-spacing:.02em;color:var(--fx-t3)}
.fx-ftr__col a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:15px;color:var(--fx-t2);transition:color .2s}
.fx-ftr__col a:hover{color:var(--fx-t1);text-decoration:underline;text-underline-offset:4px}
.fx-ftr__logo:hover{opacity:.85}

/* 카카오 채널 버튼 */
.fx-kfab{position:fixed;right:var(--fx-gut);bottom:84px;z-index:50;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--fx-radius-pill);background:var(--fx-s2);color:var(--fx-t1);font-size:14px;font-weight:600;box-shadow:inset 0 0 0 1px var(--fx-edge-ink-strong),var(--fx-shadow-s);transition:background-color .2s}
.fx-kfab:hover{background:var(--fx-s3)}

@media (min-width:768px){
  .fx-ftr__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fx-ftr__cols--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .fx-ftr__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--fx-sp-16)}
  .fx-ftr__cols--wide{grid-template-columns:repeat(var(--fx-ftr-cols),minmax(0,1fr));gap:var(--fx-sp-8) var(--fx-sp-4)}
  .fx-ftr__in:has(.fx-ftr__cols--wide){grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
}
/* 외부 프로필(sameAs) - 아이콘 + 이름, 터치 44px */
.fx-ftr__social{display:flex;flex-wrap:wrap;gap:0 var(--fx-sp-4);margin:var(--fx-sp-2) 0 0;padding:0;list-style:none}
.fx-ftr__soc{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--fx-t2);transition:color .2s}
.fx-ftr__soc svg{flex:none}
.fx-ftr__soc:hover{color:var(--fx-t1);text-decoration:underline;text-underline-offset:4px}