/* ==========================================================================
   WORLDFEAST 480px 앱 틀 — 시안 A 1단계 (2026-09-17)
   PC 도 가운데 480px 모바일 화면 한 벌 · 양옆은 비워 둠
   base.html · base_logged_in.html 맨 마지막에 불러와서 예전 상단/하단 스타일을 덮는다
   ========================================================================== */
:root {
    --wf-w: 480px;
    --wf-green: #6cc417;
    --wf-green-soft: #eef8e3;
    --wf-ink: #1d1d1f;
    --wf-sub: #8a8f98;
    --wf-line: #eceef1;
    --wf-side: #f2f3f5;
    --wf-top-h: 56px;
    --wf-tabbar-h: 60px;
}

html { background: var(--wf-side); }
body {
    background: var(--wf-side) !important;
    margin: 0;
}

/* 가운데 틀 */
.wf-app {
    position: relative;
    width: 100%;
    max-width: var(--wf-w);
    min-height: 100vh;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, .06);
    padding-bottom: calc(var(--wf-tabbar-h) + env(safe-area-inset-bottom, 0px));
    overflow-x: clip;          /* hidden 은 상단 · 카테고리 줄 붙어 있기(sticky)를 막음 → clip (9/17) */
    container-type: inline-size;
    container-name: wfapp;
}
.wf-app > main { display: block; }

/* ── 한 줄 상단 ── */
.wf-top {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--wf-top-h);
    padding: 0 12px 0 16px;
    background: #fff;
}
.wf-top-logo img { height: 22px; display: block; }
.wf-top-icons { display: flex; align-items: center; gap: 4px; }
.wf-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #333;
    font-size: 19px;
    cursor: pointer;
    text-decoration: none;
}
.wf-icon-btn:hover { background: #f4f5f7; }
.wf-badge {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ff4b4b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-sizing: border-box;
}
.wf-badge:empty, .wf-badge[data-zero="1"] { display: none; }

/* ── 탭 ── */
.wf-tabs {
    display: flex;
    gap: 20px;
    padding: 0 16px;
    border-bottom: 1px solid var(--wf-line);
    overflow-x: auto;
    scrollbar-width: none;
    background: #fff;
}
.wf-tabs::-webkit-scrollbar { display: none; }
.wf-tab {
    flex: none;
    padding: 10px 0 11px;
    font-size: 15px;
    font-weight: 600;
    color: #9aa0a8;
    text-decoration: none;
    white-space: nowrap;
}
.wf-tab:hover { color: var(--wf-ink); }
.wf-tab.on { color: var(--wf-ink); box-shadow: inset 0 -2.5px 0 var(--wf-ink); }

/* ── 검색창 ── */
.wf-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    margin: 12px 16px 4px;
    padding: 0 16px;
    border-radius: 21px;
    background: #f4f5f7;
}
.wf-search i { color: var(--wf-green); font-size: 15px; }
.wf-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--wf-ink);
}
.wf-search input::placeholder { color: #a0a5ad; }
.wf-search:focus-within { box-shadow: 0 0 0 2px var(--wf-green-soft); }

/* ── 하단 탭 바 (틀 폭 안에 고정) ── */
.wf-tabbar {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 950;
    display: flex;
    width: 100%;
    max-width: var(--wf-w);
    height: calc(var(--wf-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid var(--wf-line);
    box-sizing: border-box;
}
.wf-tabbar-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: #9aa0a8;
    font: inherit;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}
.wf-tabbar-item i { font-size: 19px; }
.wf-tabbar-item.on { color: var(--wf-ink); }
.wf-tabbar-item .wf-badge { top: 5px; right: calc(50% - 20px); }

/* ── 왓츠앱 떠 있는 버튼 (탭 바 위 · 틀 오른쪽) ── */
.wf-wa-btn {
    position: fixed;
    bottom: calc(var(--wf-tabbar-h) + 14px + env(safe-area-inset-bottom, 0px));
    right: max(14px, calc((100% - var(--wf-w)) / 2 + 14px));
    z-index: 940;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    cursor: pointer;
}
.wa-chat-widget {
    right: max(10px, calc((100% - var(--wf-w)) / 2 + 10px)) !important;
    bottom: calc(var(--wf-tabbar-h) + 70px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(360px, calc(var(--wf-w) - 20px), calc(100% - 20px)) !important;
}

/* ── 장바구니 패널: 틀 안 오른쪽에서 (PC 도 같은 모양) ── */
.cart-modal {
    top: auto !important;
    bottom: calc(var(--wf-tabbar-h) + 8px + env(safe-area-inset-bottom, 0px)) !important;
    right: max(8px, calc((100% - var(--wf-w)) / 2 + 8px)) !important;
    left: auto !important;
    width: min(340px, calc(var(--wf-w) - 16px), calc(100% - 16px)) !important;
    height: min(72vh, 620px) !important;
}

/* ── 예전 상단 · 하단 검색바 숨김 (새 틀로 대체) ── */
.main-header, .bottom-search-bar { display: none !important; }

/* ── 푸터 — 틀 안 · 작게 ── */
.wf-app .main-footer { margin-top: 28px; }
.wf-app .main-footer .container { max-width: 100%; padding: 16px; box-sizing: border-box; }
.wf-app .footer-links { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: flex-start; }
.wf-app .footer-link { font-size: 11px; }
.wf-app .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
.wf-app .footer-logo img { height: 20px; }
.wf-app .footer-text p { margin: 0; font-size: 11px; }
.wf-app .footer-biz { margin-top: 8px; font-size: 11px; color: #a8adb3; line-height: 1.6; }

/* 장바구니 패널 — PC 슬라이드 방식 끔 (틀 밖 회색 영역에 반쯤 걸려 보이지 않게) · 열 때만 보임 */
.cart-modal { display: none !important; transform: none !important; transition: none !important; }
.cart-modal.active { display: block !important; }

/* 오른쪽 40px 잘림 원인 (2단계 · 9/17 실측) — .container 가 width:100% + 좌우 padding 20px 을 폭에 더해 40px 넘침
   → 틀 안에서는 여백을 폭 안에 포함 */
.wf-app .container { box-sizing: border-box; max-width: 100%; }
/* 같은 원인 — 폭 100% + 여백 (로그인 · 가입) */
.wf-app .login-section, .wf-app .register-section { box-sizing: border-box; max-width: 100%; }
/* 정렬 버튼 · 페이지 번호 — 좁은 폭에서 가로로 밀어 보기 / 줄바꿈 */
.wf-app .sort-options { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.wf-app .sort-options::-webkit-scrollbar { display: none; }
.wf-app .page-numbers { flex-wrap: wrap; max-width: 100%; justify-content: center; }
/* 폭 + 여백 합산으로 넘치는 곳이 화면마다 반복 (.container · 로그인 · 가입 · 정렬 버튼 …) → 틀 안 전체를 border-box 로 */
.wf-app, .wf-app *, .wf-app *::before, .wf-app *::after { box-sizing: border-box; }
.wf-app .sort-buttons { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.wf-app .sort-buttons::-webkit-scrollbar { display: none; }

/* 결제 창(#checkoutModal · body 에 붙음) — PC 에서 화면 오른쪽 끝 300px 로 뜨던 것을 틀 전체 폭으로 (폰과 같게 · 4단계) */
.checkout-modal {
    left: max(0px, calc((100% - var(--wf-w)) / 2)) !important;
    right: auto !important;
    width: min(var(--wf-w), 100%) !important;
}

/* ── 로그인 화면들 (마이 · 주문 · 배송지 · 쿠폰 · 적립 · 프로필 · 탈퇴) — 4단계 ── */
/* 큰 제목(48px · 30px) → 작게 · 왼쪽 */
.wf-app :is(.page-header, .profile-header) { padding: 8px 16px 4px !important; margin: 0 !important; text-align: left !important; background: transparent !important; min-height: 0 !important; }
.wf-app :is(.page-title, .profile-title) { margin: 0 !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: 0 !important; line-height: 1.3 !important; text-align: left !important; color: var(--wf-ink) !important; }
.wf-app :is(.page-header, .profile-header) p { margin: 4px 0 0 !important; font-size: 13px !important; text-align: left !important; color: var(--wf-sub) !important; }
/* 뒤로 · 홈 둥근 버튼 → 뒤로만 작게 (홈은 상단 로고 · 하단 Home 탭이 대신) */
.wf-app .nav-buttons-container { margin: 8px 16px 0 !important; justify-content: flex-start !important; }
.wf-app .nav-btn { width: 32px !important; height: 32px !important; min-width: 0 !important; font-size: 14px !important; box-shadow: none !important; border: 1px solid var(--wf-line) !important; }
.wf-app .nav-btn-home { display: none !important; }
/* 상태 표시 — 50% 둥글기에 넓은 칸이 타원으로 보임 */
.wf-app .order-status { border-radius: 12px !important; }
/* 배송지 카드 버튼 — 삭제 버튼이 폭을 다 가져가 수정 버튼이 왼쪽으로 밀려 잘림 */
.wf-app .address-actions { flex-shrink: 1 !important; min-width: 0; }
.wf-app .address-actions .action-btn { flex: 0 0 auto !important; width: auto !important; min-width: 36px; }

/* ==========================================================================
   테스트 시안 (2026-09-17) — 뒤로가기 · 카테고리 줄
   ========================================================================== */
/* 하위 화면 상단: ← 화면 이름 · Home · 장바구니 */
.wf-top.is-sub { padding: 0 8px 0 4px; border-bottom: 1px solid var(--wf-line); }
.wf-top.is-sub .wf-back { font-size: 18px; color: var(--wf-ink); }
.wf-top-title {
    flex: 1; min-width: 0; margin: 0 4px; font-size: 17px; font-weight: 700; color: var(--wf-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; letter-spacing: 0;
}
.wf-top.is-sub .wf-top-icons { gap: 0; }
/* 하위 화면 — 화면 안의 둥근 뒤로 버튼 · 큰 제목은 상단으로 옮겼으니 숨김 (설명 문구는 남김) */
.wf-app:has(.wf-top.is-sub) .nav-buttons-container { display: none !important; }
.wf-app:has(.wf-top.is-sub) :is(.page-title, .profile-title, .login-title, .register-title) { display: none !important; }
.wf-app:has(.wf-top.is-sub) :is(.page-header, .profile-header) { padding-top: 12px !important; }
.wf-app:has(.wf-top.is-sub) :is(.page-header, .profile-header):not(:has(p)) { display: none !important; }
.wf-app:has(.wf-top.is-sub) .login-subtitle, .wf-app:has(.wf-top.is-sub) .register-subtitle { margin-top: 4px !important; }

/* 카테고리 줄: 알약 버튼 · 로고 줄 아래 붙어 있음 */
.wf-tabs {
    position: sticky; top: var(--wf-top-h); z-index: 899;
    gap: 8px; padding: 6px 16px 10px; border-bottom: 1px solid var(--wf-line);
}
.wf-tab {
    padding: 0 16px; height: 36px; line-height: 36px; border-radius: 18px;
    background: #f4f5f7; color: #4b5563; font-size: 14px; font-weight: 600;
}
.wf-tab:hover { color: var(--wf-ink); background: #eceef1; }
.wf-tab.on { background: var(--wf-green); color: #fff; box-shadow: none; }
/* html · body 의 overflow-x:hidden 이 스크롤 틀을 따로 만들어 상단 · 카테고리 줄 붙어 있기(sticky)가 안 됨 → clip
   (!important 안 씀 — 팝업이 body 에 인라인으로 거는 스크롤 잠금은 그대로 먹게) */
html, body { overflow-x: clip; }

/* ==========================================================================
   테스트 시안 (2026-09-17) — 하단 정리: 탭 바 · 푸터 · 왓츠앱
   ========================================================================== */
/* 하단 탭 바 — 고른 탭 초록 */
.wf-tabbar-item.on { color: var(--wf-green); }
.wf-tabbar-item.on i { color: var(--wf-green); }

/* 푸터 — Home · 상품목록 · 브랜드에서만, 짧게 (링크 한 줄 + 저작권 한 줄) */
.wf-app:has(.wf-top.is-sub) .main-footer { display: none !important; }
.wf-app .main-footer { margin-top: 24px !important; padding: 0 !important; background: #fafafb !important; border-top: 1px solid var(--wf-line); }
.wf-app .main-footer .container { padding: 14px 16px 16px !important; }
.wf-app .main-footer .footer-links { gap: 4px 0 !important; margin: 0 0 6px !important; padding: 0 !important; }
.wf-app .main-footer .footer-link { font-size: 11px !important; color: #6b7280 !important; padding: 0 !important; }
.wf-app .main-footer .footer-link:not(:last-child)::after { content: '·'; margin: 0 7px; color: #c4c8ce; }
.wf-app .main-footer .footer-link:first-child { display: none !important; }
.wf-app .main-footer .footer-bottom { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.wf-app .main-footer .footer-logo { display: none !important; }
.wf-app .main-footer .footer-text p:first-child { display: none !important; }
.wf-app .main-footer .footer-text p { font-size: 10.5px !important; color: #a8adb3 !important; text-align: left !important; }

/* 왓츠앱 — 쇼핑 화면에서만 작게 (하위 화면은 My › Contact Us) */
.wf-app:has(.wf-top.is-sub) .wf-wa-btn { display: none !important; }
.wf-wa-btn { width: 40px !important; height: 40px !important; font-size: 21px !important; bottom: calc(var(--wf-tabbar-h) + 10px + env(safe-area-inset-bottom, 0px)) !important; opacity: .92; }

/* 장바구니 패널 깨짐 수정 (2026-09-17 사용자 "shopping cart가 살짝 깨지는거 같은데")
   원인: 바깥 .cart-modal 의 반투명 검정 배경이 안쪽 흰 판(아래 모서리 각짐 · 12px 짧음) 밖으로 비침
   → 바깥 배경 없앰 · 안쪽 판이 높이를 꽉 채우고 네 모서리 둥글게 · 비우기 버튼 오른쪽 여백 */
.cart-modal { background: transparent !important; }
.cart-modal .cart-modal-content {
    height: 100% !important; max-height: 100% !important; margin: 0 !important;
    display: flex; flex-direction: column;
    border-radius: 16px !important; overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}
.cart-modal .cart-modal-items { flex: 1 1 auto; min-height: 0; }
.cart-modal .cart-modal-footer { flex: 0 0 auto; }
.cart-modal .cart-clear-wrap { padding: 8px 14px 4px !important; }

/* 결제 창 깨짐 수정 (2026-09-17 사용자 "check out도 깨지는거 같은데")
   원인 ① 폰: 회색 막(.checkout-modal-overlay · absolute)이 흰 판(위치 지정 없음) 위에 그려져 내용이 어둡게 덮임
        ② 폰: 결제수단 3칸이 세로 배치 + 폭 0 규칙이 겹쳐 첫 칸만 좁게 찌그러짐
        ③ X 닫기 버튼이 창 맨 위 모서리(1px)에 붙어 제목 줄과 어긋남
   → 폰 · PC 모두 PC 모양(틀 폭 · 전체 높이 한 장)으로 통일 · 결제수단 가로 3칸 · X 는 제목 줄 오른쪽 가운데 */
.checkout-modal {
    top: 0 !important; bottom: 0 !important; height: auto !important;
    display: block !important; background: transparent !important;
}
.checkout-modal .checkout-modal-overlay { display: none !important; }
.checkout-modal .checkout-modal-content {
    position: relative; width: 100% !important; max-width: 100% !important;
    height: 100% !important; max-height: 100% !important; border-radius: 0 !important;
    box-shadow: 0 0 24px rgba(0, 0, 0, .12);
}
.checkout-modal .checkout-header { padding: 18px 48px 14px !important; }
.checkout-modal .checkout-modal-close { top: 13px !important; right: 8px !important; width: 40px !important; height: 40px !important; font-size: 18px; }
.checkout-modal .payment-options { flex-direction: row !important; gap: 8px !important; }

/* 테스트 시안 (2026-09-17 사용자 "카트가 선택되면 하단바 말고는 안보이게") — 장바구니 = 하단 탭 바 위 틀 전체 한 장 */
.cart-modal {
    top: 0 !important;
    bottom: calc(var(--wf-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important;
    left: max(0px, calc((100% - var(--wf-w)) / 2)) !important;
    right: auto !important;
    width: min(var(--wf-w), 100%) !important;
    height: auto !important;
}
.cart-modal .cart-modal-content { border-radius: 0 !important; box-shadow: none !important; }
/* 열려 있는 동안 하단 탭은 Cart 만 초록 */
.wf-app:has(#cartModal.active) .wf-tabbar-item.on,
.wf-app:has(#cartModal.active) .wf-tabbar-item.on i { color: var(--wf-sub) !important; }
.wf-app:has(#cartModal.active) .wf-tabbar [data-wf-cart-open],
.wf-app:has(#cartModal.active) .wf-tabbar [data-wf-cart-open] i { color: var(--wf-green) !important; }
/* 2026-09-17 PC 왼쪽 쏠림 수정 — 위 규칙들의 100vw 를 100% 로 바꿈.
   100vw 는 세로 스크롤바(15px)까지 포함해 장바구니 · 결제 창 · 왓츠앱이 틀보다 7.5px 오른쪽에 섰음 (틀 · 하단 탭 바는 스크롤바 뺀 폭 기준).
   position:fixed 의 % 는 스크롤바 뺀 화면 폭 기준이라 틀과 딱 맞음 */