/* ====== CatFoodLab Mobile Menu (cfl-) ====== */

.cfl-menu{ position:fixed; inset:0; z-index:9999; display:none; }
.cfl-menu.is-open{ display:block; }

/* overlay */
.cfl-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  opacity:0; transition: opacity .18s ease;
}
.cfl-menu.is-open .cfl-overlay{ opacity:1; }

/* right slide panel */
.cfl-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(88vw,420px); max-width:420px;
  background:#fff;
  transform:translateX(100%);
  transition: transform .22s ease;
  display:flex; flex-direction:column;
  box-shadow:-2px 0 12px rgba(0,0,0,.12);
}
.cfl-menu.is-open .cfl-panel{ transform:translateX(0); }

/* header */
.cfl-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px; border-bottom:1px solid #eee;
  font-size:15px; font-weight:600;
}
.cfl-close{ background:none; border:0; font-size:20px; line-height:1; padding:8px; }

/* body */
.cfl-body{ padding:6px 10px 24px; overflow-y:auto; }

/* accordion */
.cfl-acc{ border-bottom:1px solid #f0f0f0; }
.cfl-acc-header{
  width:100%; text-align:left; background:none; border:0;
  padding:14px 8px; display:flex; align-items:center; justify-content:space-between;
  font-size:15px; font-weight:600;
}
.cfl-acc-header i{ transition: transform .18s ease; }
.cfl-acc-header[aria-expanded="true"] i{ transform:rotate(180deg); }

.cfl-acc-panel{
  list-style:none; margin:0; padding:0 8px 10px 8px; display:none;
}
.cfl-acc-panel li a{
  display:block; padding:10px 6px; border-radius:8px;
  font-size:14px; color:#222; text-decoration:none;
}
.cfl-acc-panel li a:active{ background:#f5f5f5; }

/* scroll lock when open */
html.cfl-lock, body.cfl-lock{ overflow:hidden !important; touch-action:none; }

/* desktop too, but width capped */
@media (min-width:481px){
  .cfl-panel{ width:420px; }
}

/* ==== 햄버거 버튼 override ==== */
#btn-hamburger {
  margin-top: 0 !important;
  color: #222 !important;  /* 혹은 #000, 현재 테마에 맞춰 검정 */
}

/* ==== 드로워 닫기 버튼 override ==== */
.cfl-close {
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  color: #222 !important;   /* 어두운 아이콘으로 보이게 */
}

/* ==== 드로워 메뉴 항목 override ==== */
.cfl-acc-panel li a {
  margin-top: 0 !important;
  color: #222 !important;   /* 어두운 기본 텍스트 */
}

/* === CFL 메뉴 헤더 버튼(아코디언) 강제 오버라이드 === */
#cflMenu .cfl-acc-header {
  margin-top: 0 !important;
  color: #222 !important;
  background: transparent !important;
  border: 0 !important;
}

/* 버튼 안의 span / 아이콘까지 전부 강제 색상 적용 */
#cflMenu .cfl-acc-header span,
#cflMenu .cfl-acc-header i,
#cflMenu .cfl-acc-header * {
  color: #222 !important;
}

/* 폰트어썸 일부 테마가 ::before에 색을 주는 경우 대비 */
#cflMenu .cfl-acc-header i::before {
  color: #222 !important;
}


/* ==== 로그인 영역 ==== */
.cfl-login-box {
  text-align: center;
  padding: 16px 8px 20px;
  border-bottom: 1px solid #eee;
}

.cfl-login-msg {
  font-size: 14px;
  color: #333;
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.cfl-naver-btn {
  display: inline-block;
  transform: scale(0.9);
  transform-origin: center;
  margin-bottom: 8px;
}

.cfl-login-sub {
  font-size: 12px;
  color: #888;
  margin: 0;
}

/* ===== 로그인/계정 박스 ===== */
.cfl-login-box{ text-align:center; padding:16px 8px 20px; border-bottom:1px solid #eee; }
.cfl-login-msg{ font-size:14px; color:#333; margin:0 0 12px 0; line-height:1.5; }
.cfl-naver-btn{ display:inline-block; transform:scale(.9); transform-origin:center; margin-bottom:8px; }
.cfl-login-sub{ font-size:12px; color:#888; margin:0; }

/* 계정 카드(로그인 상태) */
.cfl-account-box{ padding:16px 12px 18px; border-bottom:1px solid #eee; }
.cfl-account-top{ display:flex; align-items:center; gap:12px; }
.cfl-avatar{
  width:48px; height:48px; border-radius:50%; object-fit:cover; flex:0 0 48px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.cfl-account-texts{ min-width:0; }
.cfl-account-name{
  font-size:15px; font-weight:700; color:#111 !important;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.cfl-logout-link{
  font-size:12px; font-weight:400; color:#666 !important; text-decoration:none !important;
  border:1px solid #ddd; border-radius:9999px; padding:2px 8px;
}
.cfl-logout-link:active{ background:#f5f5f5; }

/* 마이페이지 CTA 버튼 */
.cfl-mypage-btn{
  display:block; width:100%; margin-top:12px; text-align:center; text-decoration:none !important;
  background:#f4f4f4; color:#111 !important; border:1px solid #e8e8e8; border-radius:10px;
  padding:12px 0; font-size:14px; font-weight:600;
}
.cfl-mypage-btn:active{ background:#eee; }

/* 포인트 캡슐 줄 정렬 */
.cfl-point-wrap{
  margin: 8px 0 4px;
  display:flex; align-items:center; gap:8px;
}
.cfl-point-wrap .point-badge{ margin:0 !important; } /* common과 충돌 방지 */
.cfl-point-link{
  font-size:12px; color:#666 !important; text-decoration:none !important;
}

/* 1행: 닉네임만 보이게 (기존 스타일과 톤 통합) */
.cfl-name-only{
  font-size:15px; font-weight:700; color:#111 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 2행 컨테이너 */
.cfl-account-row{
  display:flex; align-items:center; gap:10px;
  margin:10px 2px 12px;
}

/* 좌측 포인트 배지 영역(넓게 차지) */
.cfl-point-badge-wrap{ flex:1; display:flex; }

/* 드로워 안에서는 포인트 배지 폭을 넓게(공통 max-width 덮어쓰기) */
#cflMenu .point-badge{
  max-width:none !important;
  width:60% !important;       /* 필요시 50~70% 조정 */
  min-width:140px;
  height:28px;                /* 살짝 키워 안정감 */
  padding:0 12px !important;
  display:inline-flex; align-items:center; justify-content:flex-start;
}

/* 우측 로그아웃 버튼 (우측 정렬은 flex로 이미 확보) */
.cfl-logout-link{
  margin-left:auto;           /* 항상 오른쪽 끝으로 */
  font-size:12px; color:#666 !important; text-decoration:none !important;
  border:1px solid #ddd; border-radius:9999px; padding:6px 10px; line-height:1;
  background:#fff;
}
.cfl-logout-link:active{ background:#f5f5f5; }