/* ==========================================================================
   FEEDUS HEADER — Floating Card Bar (Luminaire Authentik 스펙)
   feedus-global.css의 CSS 변수를 사용합니다.

   바 = 뷰포트 좌우 10px만 남긴 거의 풀폭 카드(높이 50px, radius 5px, 1px 테두리).
   메뉴 패널은 바 하단에 정확히 접합되어 같은 배경 + 아래 모서리만 라운드로
   "하나의 카드"처럼 보인다. 아래 토큰만 바꾸면 바/패널/본문 오프셋이 함께 따라간다.
   ========================================================================== */
  :root {
    --feedus-header-h: 50px;        /* 바 높이 */
    /* 바 바깥 여백 — 상/좌/우/아래(본문까지) 네 방향 모두 이 값 하나로 관리한다.
       아래 간격은 body padding-top(= gap*2 + 헤더높이) 안에 포함되므로
       서브헤더/본문 쪽에 margin-top 을 따로 주지 말 것 (이중 간격 방지). */
    --feedus-header-gap: 10px;      /* 뷰포트 상단 ↔ 바 (공지 배너 있으면 배너 아래로) */
    --feedus-header-side: var(--feedus-header-gap);  /* 바 좌우 여백 = 상단 여백과 동일 */
    /* 배송조회 바(.feedus-subheader) 아래 ↔ 본문 첫 요소 간격. 전 페이지 공통.
       적용은 feedus-pages.css 의 .feedus-subheader 한 곳에서만 한다. */
    --feedus-subheader-gap: 16px;
    --feedus-header-radius: 5px;
    --feedus-header-border: #D9D2C2; /* 배경(#f4f1ea)보다 한 톤 어두운 값 */
    /* WP 관리자 바 보정값. 로그아웃 상태에선 0, 관리자 바가 뜨면 그 높이만큼.
       position:fixed 요소(공지바/헤더/메뉴패널)는 html margin-top 의 영향을
       안 받으므로 이 값을 직접 더해 준다. */
    --feedus-admin-offset: 0px;
  }

  /* 관리자 바 높이: 기본 32px, ≤782px 46px.
     ≤600px 에서는 WP 가 관리자 바를 absolute 로 바꾸고 html margin-top 을
     0 으로 되돌리므로 보정하지 않는다. */
  @media screen and (min-width: 601px) {
    body.admin-bar {
      --feedus-admin-offset: 32px;
    }
  }

  @media screen and (min-width: 601px) and (max-width: 782px) {
    body.admin-bar {
      --feedus-admin-offset: 46px;
    }
  }

  /* ==========================================================================
     결제수단 공지 띠배너 (무통장입금 전용 기간)
     TODO: 카드결제 오픈 시 이 블록 제거
     헤더가 position:fixed 플로팅 필이라, 배너가 떠 있는 동안에는
     헤더 top 과 body padding-top 을 배너 높이(--feedus-notice-h)만큼 민다.
     실제 높이는 feedus-header.js 가 측정해 넣는다 (모바일에서 2줄로 접힐 수 있음).
     ========================================================================== */
  .feedus-notice-bar {
    position: fixed;
    top: var(--feedus-admin-offset);
    left: 0;
    right: 0;
    z-index: calc(var(--feedus-z-header, 1001) + 2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 40px;
    background-color: var(--feedus-bg-beige, #EEECE7);
    color: var(--feedus-black, #1a1a1a);
    font-family: var(--feedus-font-body, sans-serif);
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }

  .feedus-notice-bar__text strong {
    font-weight: 600;
  }

  /* 크기/색은 feedus-global.css 의 `닫기(X) 버튼 공통 베이스` 에서 관리.
     여기서는 배너 안에서의 위치만 잡는다. */
  .feedus-notice-bar__close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }

  body.feedus-has-notice {
    padding-top: calc(var(--feedus-header-gap) * 2 + var(--feedus-header-h) + var(--feedus-notice-h, 34px));
  }

  body.feedus-has-notice .feedus-header {
    top: calc(var(--feedus-header-gap) + var(--feedus-notice-h, 34px) + var(--feedus-admin-offset));
  }

  /* ── 헤더 컨테이너: 플로팅 카드 ── */
  .feedus-header {
    position: fixed;
    top: calc(var(--feedus-header-gap) + var(--feedus-admin-offset));
    left: var(--feedus-header-side);
    right: var(--feedus-header-side);
    width: auto;
    max-width: none;
    transform: none;
    height: var(--feedus-header-h);
    z-index: var(--feedus-z-header, 1001);
    background-color: var(--feedus-bg, #f4f1ea);
    border: 1px solid var(--feedus-header-border);
    border-radius: var(--feedus-header-radius);
    box-shadow: none;
    box-sizing: border-box;
    transition: border-radius 0.2s ease, border-color 0.2s ease;
  }

  /* 메뉴 열림: 바 아래 모서리를 각지게 만들고 하단 테두리를 배경색으로 지워
     아래 패널과 한 덩어리로 보이게 한다. (테두리를 투명으로 두면 페이지 배경이
     1px 새어 나와 이음매가 보인다) */
  body.feedus-menu-open .feedus-header {
    border-radius: var(--feedus-header-radius) var(--feedus-header-radius) 0 0;
    border-bottom-color: var(--feedus-bg, #f4f1ea);
  }

  .feedus-header *,
  .feedus-mobile-menu * {
    margin: 0;
  }

  /* body에 헤더 높이만큼 상단 여백
     = 위 여백(gap) + 헤더 + 아래 여백(gap). 헤더 아래 간격은 여기 한 곳에서만
     만들어진다. */
  body {
    padding-top: calc(var(--feedus-header-gap) * 2 + var(--feedus-header-h));
  }

  /* ── 3분할 inner ── */
  .feedus-header__inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 20px;
    position: relative;
  }

  /* ── 좌측: 햄버거 ── */
  .feedus-header__left {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    min-width: 0;
  }

  /* ── 중앙: 로고 (절대 중앙) ── */
  .feedus-header__logos {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
  }

  .feedus-header__logos a {
    display: flex;
    align-items: center;
    text-decoration: none;
  }

  /* 로고 워드마크: viewBox 217×31 (7:1) — 높이 기준으로 잡아야 바에 맞는다.
     width 80px 로 두면 높이가 11px 밖에 안 나와 50px 바 대비 과소했다. */
  .feedus-header__logos img {
    width: auto;
    height: 22px;
    display: block;
  }

  /* ── 우측: 인증 + 카트 ── */
  .feedus-header__right {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
  }

  /* ── 햄버거 토글 (모든 뷰포트에서 표시) ── */
  .feedus-header__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    color: var(--feedus-black, #1a1a1a);
  }

  /* 데스크톱 아이콘 26×26 — 20px 은 15px 라벨 옆에서 왜소했다.
     viewBox 18 → 26px 로 확대되면 선도 1.44배 굵어지므로 stroke 를 1.5 → 1.1 로
     낮춰 선 두께(≈1.6px)는 기존과 같게 유지한다. (모바일은 아래 @media 에서 별도 스펙) */
  .feedus-header__toggle-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%231a1a1a' stroke-width='1.1' stroke-linecap='round'%3E%3Cline x1='2' y1='4.5' x2='16' y2='4.5'/%3E%3Cline x1='2' y1='9' x2='16' y2='9'/%3E%3Cline x1='2' y1='13.5' x2='16' y2='13.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .feedus-header__toggle.active .feedus-header__toggle-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%231a1a1a' stroke-width='1.1' stroke-linecap='round'%3E%3Cline x1='4' y1='4' x2='14' y2='14'/%3E%3Cline x1='14' y1='4' x2='4' y2='14'/%3E%3C/svg%3E");
  }

  /* 데스크톱: "Menu" / "Close" 텍스트 */
  .feedus-header__toggle-label {
    font-family: var(--feedus-font-body, sans-serif);
    font-size: 15px;                 /* 메뉴명(15px)과 동일 — 모바일은 display:none */
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--feedus-black, #1a1a1a);
    line-height: 1;
  }

  /* 모바일: flat-head.com 모바일 스케일에 맞춘 확대 스펙.
     바 높이 58px, 햄버거 터치영역 40×40 / 아이콘 30×13(1px 선 2개, 간격 12px),
     열림 시 12×12 X. 헤더 높이는 --feedus-header-h 를 통해 바꾸므로
     body padding-top 과 메뉴 패널 top/max-height 가 함께 따라온다.
     (66px 은 터치영역 40px 대비 여백이 과해 58px 로 낮춤 — 40px 토글이
      상하 9px 여백을 갖는 선이라 더 낮추면 답답해진다.) */
  @media screen and (max-width: 767px) {
    :root {
      --feedus-header-h: 58px;
    }

    .feedus-header__toggle-label {
      display: none;
    }

    /* 터치 영역 40×40 — 아이콘은 좌측 정렬해 inner 패딩(15px)에 맞춘다 */
    .feedus-header__toggle {
      width: 40px;
      height: 40px;
      justify-content: flex-start;
      gap: 0;
    }

    /* 가로 30px, 두께 1px 선 2개, 간격 12px (y=0.5 / y=12.5) */
    .feedus-header__toggle-icon {
      width: 30px;
      height: 13px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='13' viewBox='0 0 30 13' fill='none' stroke='%231a1a1a' stroke-width='1'%3E%3Cline x1='0' y1='0.5' x2='30' y2='0.5'/%3E%3Cline x1='0' y1='12.5' x2='30' y2='12.5'/%3E%3C/svg%3E");
      background-size: 30px 13px;
      background-position: left center;
    }

    /* 열림 상태: 12×12 X. 아이콘 박스는 30px 그대로 두고 좌측 정렬을 유지해
       햄버거 ↔ X 전환 시 좌측 기준선이 흔들리지 않는다. */
    .feedus-header__toggle.active .feedus-header__toggle-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231a1a1a' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0.5' y1='0.5' x2='11.5' y2='11.5'/%3E%3Cline x1='11.5' y1='0.5' x2='0.5' y2='11.5'/%3E%3C/svg%3E");
      background-size: 12px 12px;
    }

    /* 로고: 워드마크가 217×31(7:1)이라 폭 고정 대신 높이로 잡는다.
       바(66px)에 비해 폭이 과했던 26px 을 낮춰 20px 선으로 되돌린다.
       절대 중앙 배치라 좁은 화면에서 우측 아이콘과 겹치지 않도록 vw 연동
       (375px→18px≈폭 126px, 320px→15px≈폭 107px). */
    .feedus-header__logos img {
      height: clamp(15px, 4.8vw, 19px);
    }

    .feedus-header__inner {
      padding: 0 15px;
    }

    .feedus-notice-bar {
      font-size: 0.75rem;
      padding: 7px 34px;
    }
  }

  /* ── 카트 아이콘 ── */
  .feedus-header__cart {
    display: flex;
    align-items: center;
    color: var(--feedus-black, #1a1a1a);
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease;
  }

  .feedus-header__cart:hover {
    color: var(--feedus-primary);
  }

  .feedus-header__cart svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  .feedus-header__cart-count {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 50%;
    background-color: var(--feedus-primary);
    color: var(--feedus-white, #fff);
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
    position: absolute;
    top: -4px;
    right: -6px;
  }

  .feedus-header__cart-count.show {
    display: flex;
  }

  /* ── 인증 버튼 (데스크톱: 텍스트, 모바일: 아이콘) ── */
  .feedus-header__auth-text {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    color: var(--feedus-black, #1a1a1a);
    font-family: var(--feedus-font-body, sans-serif);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
    line-height: 1;
  }

  .feedus-header__auth-text:hover {
    color: var(--feedus-primary);
  }

  .feedus-header__auth-icon {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    color: var(--feedus-black, #1a1a1a);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .feedus-header__auth-icon:hover {
    color: var(--feedus-primary);
  }

  .feedus-header__auth-icon svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  /* ── 모바일 헤더 아이콘 스케일 ──
     카트/인증 아이콘 기본 규칙이 위에 오므로, 모바일 확대는 반드시 그 뒤에서
     선언해야 한다(미디어쿼리는 명시도를 올리지 않는다). */
  @media screen and (max-width: 767px) {
    .feedus-header__right {
      gap: 14px;
    }

    .feedus-header__cart svg,
    .feedus-header__auth-icon svg {
      width: 26px;
      height: 26px;
    }

    .feedus-header__cart-count {
      min-width: 17px;
      height: 17px;
      font-size: 0.65rem;
      top: -5px;
      right: -7px;
    }
  }

  /* 소형 단말(≤360px): 우측 아이콘 묶음을 조금 줄여 중앙 로고 자리를 확보 */
  @media screen and (max-width: 360px) {
    .feedus-header__right {
      gap: 12px;
    }

    .feedus-header__cart svg,
    .feedus-header__auth-icon svg {
      width: 24px;
      height: 24px;
    }
  }

  @media screen and (max-width: 768px) {
    .feedus-header__auth-text {
      display: none;
    }
    .feedus-header__auth-icon {
      display: flex;
    }
  }

  /* ==========================================================================
     네비게이션 메뉴 패널 (모든 뷰포트 공용)

     헤더 바 하단에 정확히 접합 — 바와 같은 좌우 여백/배경/테두리를 쓰고
     아래 모서리만 라운드라 열었을 때 바와 한 장의 카드로 보인다.
     마크업은 Bricks 에서 관리(헤더의 형제 요소)라 top:100% 앵커링을 못 쓰므로,
     position:fixed 상태에서 헤더와 동일한 토큰으로 좌표를 맞춘다.
     top = 바 상단 오프셋 + 바 높이 → 틈도 겹침도 0.
     ========================================================================== */
  .feedus-mobile-menu {
    display: block;
    position: fixed;
    top: calc(var(--feedus-header-gap) + var(--feedus-header-h) + var(--feedus-admin-offset));
    left: var(--feedus-header-side);
    right: var(--feedus-header-side);
    width: auto;
    box-sizing: border-box;
    background-color: var(--feedus-bg, #f4f1ea);
    z-index: calc(var(--feedus-z-header, 1001) - 1);
    border: 1px solid var(--feedus-header-border);
    border-top: none;
    border-radius: 0 0 var(--feedus-header-radius) var(--feedus-header-radius);
    max-height: calc(100vh - var(--feedus-header-gap) - var(--feedus-header-h) - var(--feedus-admin-offset) - 20px);
    overflow-y: auto;
    /* 닫힘 상태는 -6px 만 올려둔다. 헤더(z 1001)가 위에 있으므로 그 6px 는
       바 뒤로 숨는다. translateY(-100%) 로 크게 올리면 패널이 바 위로
       빠져나와 배너와 바 사이 틈으로 비친다. */
    transform: translateY(-6px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    pointer-events: none;
  }

  body.feedus-has-notice .feedus-mobile-menu {
    top: calc(var(--feedus-header-gap) + var(--feedus-header-h) + var(--feedus-notice-h, 34px) + var(--feedus-admin-offset));
    max-height: calc(100vh - var(--feedus-header-gap) - var(--feedus-header-h) - var(--feedus-notice-h, 34px) - var(--feedus-admin-offset) - 20px);
  }

  .feedus-mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .feedus-mobile-menu ul {
    list-style: none;
    max-width: none;
    /* 상단 패딩으로 첫 항목이 접합부에 붙지 않게. 좌우는 헤더 inner 와 정렬. */
    margin: 0;
    padding: 8px 20px 12px;
  }

  .feedus-mobile-menu li + li {
    border-top: 1px solid var(--feedus-header-border);
  }

  .feedus-mobile-menu a {
    display: block;
    padding: 14px 0;
    color: var(--feedus-black, #1a1a1a);
    font-family: var(--feedus-font-body, sans-serif);
    font-size: 15px;                 /* 데스크톱 메뉴명 (모바일은 아래 @media 에서 17px) */
    font-weight: 500;
    text-decoration: none;
    letter-spacing: -0.01em;
  }

  .feedus-mobile-menu a:hover {
    color: var(--feedus-primary);
  }

  /* ── 섹션 레이블 (제품 / 안내) ──
     그룹 첫 항목 li 에 ::before 로 주입한다. 링크(a) 가 아니라 li 에 붙여야
     레이블이 탭 타깃에 포함되지 않는다. 앵커 클래스는 마크업
     (parts/feeders-header.php) 에서 관리 — 메뉴 순서가 바뀌면 클래스만 옮긴다.
     전 뷰포트 공통(데스크톱 15px 모드에도 동일 적용). */
  .feedus-mobile-menu .feedus-mi-product-first::before { content: "제품"; }
  .feedus-mobile-menu .feedus-mi-info-first::before    { content: "안내"; }

  .feedus-mobile-menu .feedus-mi-product-first::before,
  .feedus-mobile-menu .feedus-mi-info-first::before {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #5a6068;                  /* 보조 텍스트. 링크보다 튀면 안 되므로 올리브 금지 */
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    pointer-events: none;
  }

  /* 그룹 경계: 헤어라인 없이 여백으로만 분리.
     항목 구분선이 `li + li { border-top }` 이라 "슈퍼밀웜 아래 선" 은
     곧 안내 그룹 첫 항목의 border-top 이다 — 여기서 지운다. */
  .feedus-mobile-menu .feedus-mi-info-first {
    margin-top: 30px;
    border-top: none;
  }

  /* 보조 링크(이용약관·개인정보처리방침): 모바일 전용.
     데스크톱 메뉴 구성은 기존 그대로 두기 위해 기본은 숨긴다. */
  .feedus-mobile-menu__sub {
    display: none;
  }

  @media screen and (max-width: 767px) {
    /* 위/아래 여백: 첫 항목이 바 접합부에, 마지막 항목이 패널 하단에
       달라붙지 않도록 상하 패딩을 준다. */
    .feedus-mobile-menu ul {
      padding: 14px 15px 18px;
    }

    /* 메인 링크: 17px / 400 / line-height 3.8 → 항목당 행높이 ≈ 65px.
       행높이를 line-height 로만 만들어 세로 리듬이 일정하게 유지된다.
       (탭 타깃 권장치 48px 이상 확보. 더 넓히려면 line-height 만 조정한다.)
       자간 -10 (= -0.01em) — 한글 워딩이 늘어져 보이지 않게 살짝 조인다. */
    .feedus-mobile-menu a {
      font-size: 17px;
      font-weight: 400;
      line-height: 3.8;
      letter-spacing: -0.01em;
      padding: 0;
    }

    /* 보조 링크: 12px 로 낮춰 메인 링크와 대비 */
    .feedus-mobile-menu__sub {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 16px;
      padding: 14px 15px 18px;
      border-top: 1px solid var(--feedus-header-border);
      margin: 4px 0 0;
    }

    .feedus-mobile-menu__sub li + li {
      border-top: none;
    }

    .feedus-mobile-menu__sub a {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.6;
      letter-spacing: -0.01em;
      opacity: 0.6;
    }

    .feedus-mobile-menu__sub a:hover {
      opacity: 1;
    }
  }

  /* ── 계정 링크 (패널 최하단) ──
     주메뉴보다 한 단계 낮은 위계 — 데스크톱 14px(메뉴명 15px) / 모바일 15px(메뉴명 17px),
     뮤트 컬러 / 낮은 행높이.
     `.feedus-mobile-menu a` 의 모바일 규칙(line-height 3.8)과 특이도가 같으므로
     반드시 그 @media 블록 뒤에 와야 덮어쓴다. */
  .feedus-mobile-menu__account {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0;
    padding: 8px 20px 14px;
    border-top: 1px solid var(--feedus-header-border);
  }

  /* 주메뉴의 항목 구분선은 계정 링크에 적용하지 않는다 */
  .feedus-mobile-menu__account li + li {
    border-top: none;
  }

  .feedus-mobile-menu__account a {
    display: inline-block;
    padding: 6px 0;
    font-size: 14px;                 /* 데스크톱 (모바일은 아래 @media 에서 15px 유지) */
    font-weight: 400;
    line-height: 1.6;
    color: var(--feedus-text-muted, #6B7280);
    letter-spacing: -0.01em;
  }

  .feedus-mobile-menu__account a:hover {
    color: var(--feedus-primary);
  }

  @media screen and (max-width: 767px) {
    .feedus-mobile-menu__account {
      padding: 8px 15px 16px;   /* 주메뉴 ul 좌우 패딩(15px)에 맞춘다 */
    }

    /* 모바일은 기존 크기 유지 (주메뉴 17px 대비 15px) */
    .feedus-mobile-menu__account a {
      font-size: 15px;
    }
  }

  /* ── 오버레이 ── */
  /* 레퍼런스는 dim 없이 패널만 얹는 방식 — 배경은 투명하게 두고
     바깥 클릭으로 닫는 히트영역 역할만 한다. */
  .feedus-mobile-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: calc(var(--feedus-z-header, 1001) - 2);
    background-color: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .feedus-mobile-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── 로그인/회원가입 모달 ── */
  .feedus-auth-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: calc(var(--feedus-z-header, 1001) + 10);
  }

  .feedus-auth-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .feedus-auth-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .feedus-auth-modal__panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--feedus-white, #fff);
    border-radius: 16px;
    padding: 32px 28px 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    z-index: 1;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* 크기/색은 feedus-global.css 의 `닫기(X) 버튼 공통 베이스` 에서 관리 */
  .feedus-auth-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
  }

  /* 탭 */
  .feedus-auth-modal__tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .feedus-auth-modal__tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    padding: 0 0 12px;
    font-family: var(--feedus-font-body, sans-serif);
    font-size: 15px;
    font-weight: 500;
    color: #999;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .feedus-auth-modal__tab:hover {
    color: var(--feedus-black, #1a1a1a);
  }

  .feedus-auth-modal__tab.is-active {
    color: var(--feedus-black, #1a1a1a);
    border-bottom-color: var(--feedus-black, #1a1a1a);
  }

  /* 폼 */
  .feedus-auth-modal__register-desc {
    font-size: 13px;
    color: #666;
    margin: 0 0 20px;
    line-height: 1.6;
  }

  .feedus-auth-modal__field {
    margin-bottom: 16px;
  }

  .feedus-auth-modal__field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--feedus-black, #1a1a1a);
    margin-bottom: 6px;
  }

  .feedus-auth-modal__field input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--feedus-font-body, sans-serif);
    color: var(--feedus-black, #1a1a1a);
    background: #fafafa;
    transition: border-color 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
    outline: none;
  }

  .feedus-auth-modal__field input:focus {
    border-color: var(--feedus-primary, #007D51);
    background: #fff;
  }

  /* 에러 메시지 */
  .feedus-auth-modal__error {
    font-size: 13px;
    color: #d32f2f;
    margin-bottom: 12px;
    min-height: 0;
  }

  .feedus-auth-modal__error:empty {
    display: none;
  }

  /* 제출 버튼 */
  .feedus-auth-modal__submit {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 10px;
    background-color: var(--feedus-primary, #007D51);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--feedus-font-body, sans-serif);
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .feedus-auth-modal__submit:hover {
    opacity: 0.9;
  }

  .feedus-auth-modal__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* 비밀번호 찾기 링크 */
  .feedus-auth-modal__lost-pw {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: #999;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .feedus-auth-modal__lost-pw:hover {
    color: var(--feedus-primary, #007D51);
  }

  /* 구분선 */
  .feedus-auth-modal__divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 12px;
  }

  .feedus-auth-modal__divider::before,
  .feedus-auth-modal__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
  }

  .feedus-auth-modal__divider span {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
  }

  /* 카카오 버튼 */
  .feedus-auth-modal__kakao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 10px;
    background-color: #FEE500;
    color: #191919;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--feedus-font-body, sans-serif);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .feedus-auth-modal__kakao:hover {
    opacity: 0.9;
  }

  .feedus-auth-modal__kakao svg {
    flex-shrink: 0;
  }

  /* 모바일 모달 — 바텀 시트 스타일 */
  @media screen and (max-width: 768px) {
    .feedus-auth-modal.is-open {
      align-items: flex-end;
    }

    .feedus-auth-modal__panel {
      max-width: 100%;
      border-radius: 16px 16px 0 0;
      padding: 28px 20px 24px;
      max-height: 85vh;
    }
  }

  @keyframes feedus-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(254, 229, 0, 0.35); }
  }