/* 고객 주문앱 공통 — Pretendard + 모바일 가독성 (페이지 <style> 뒤에 link) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('/css/mobile-native.css');

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --hj-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
    --hj-gold: #e8c96a;
    --hj-gold-deep: #c7a43a;
    --hj-gold-text: #f0d98a;
    --hj-bg: #080808;
    --hj-surface: #121212;
    --hj-muted: #a1a1aa;
    --hj-text: #f4f4f5;
    --hj-text-soft: #f5edd2;
    --hj-fw-body: 500;
    --hj-fw-label: 600;
    --hj-fw-title: 700;
    --hj-fw-price: 800;
    --hj-fw-cta: 800;
    --hj-text-base: 17px;
    --hj-text-sm: 15px;
    --hj-text-xs: 13px;
    --hj-text-lg: 19px;
    --hj-text-xl: 22px;
    --hj-text-2xl: 26px;
    --hj-radius: 14px;
    --hj-radius-lg: 18px;
    --hj-touch: 48px;
}

html {
    scrollbar-color: #d4af37 #111;
    scrollbar-width: thin;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    margin: 0;
}

html.hj-native-app {
    overflow-x: hidden;
    scrollbar-width: none;
}

body.hj-customer {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(900px 480px at 50% -8%, rgba(212, 175, 55, 0.14), transparent 60%),
        radial-gradient(700px 400px at 100% 0%, rgba(212, 175, 55, 0.06), transparent 55%),
        var(--hj-bg);
    color: var(--hj-text);
    font-family: var(--hj-font);
    font-size: var(--hj-text-base);
    font-weight: var(--hj-fw-body);
    line-height: 1.5;
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.hj-customer button,
body.hj-customer input,
body.hj-customer textarea,
body.hj-customer select {
    font-family: inherit;
}

/* 제목·메뉴명 */
body.hj-customer .brand,
body.hj-customer .brand-name,
body.hj-customer .title,
body.hj-customer .sheet-title,
body.hj-customer .category-title,
body.hj-customer .card-head,
body.hj-customer .section-title,
body.hj-customer .hello,
body.hj-customer .menu-name,
body.hj-customer .item-name,
body.hj-customer .order-name,
body.hj-customer .name,
body.hj-customer h1 {
    font-weight: var(--hj-fw-title);
    letter-spacing: -0.035em;
}

/* 가격·합계·스탬프 숫자 */
body.hj-customer .price,
body.hj-customer .cart-total,
body.hj-customer .total-value,
body.hj-customer .item-price,
body.hj-customer .stamp-count,
body.hj-customer .value,
body.hj-customer .order-num,
body.hj-customer .status-text {
    font-weight: var(--hj-fw-price);
    letter-spacing: -0.03em;
}

body.hj-customer .store-title,
body.hj-customer .header-title,
body.hj-customer .timeline-title {
    font-weight: var(--hj-fw-title);
}

/* 버튼·탭·CTA */
body.hj-customer .btn,
body.hj-customer .tab,
body.hj-customer .change-btn,
body.hj-customer .back,
body.hj-customer .close,
body.hj-customer .qty-btn,
body.hj-customer .remove {
    font-weight: var(--hj-fw-cta);
    min-height: 44px;
}

body.hj-customer .btn.gold,
body.hj-customer .btn-gold {
    background: linear-gradient(180deg, var(--hj-gold) 0%, var(--hj-gold-deep) 100%);
    color: #1a1200;
    box-shadow: 0 8px 22px rgba(212, 175, 55, 0.22);
}

/* 보조 텍스트 */
body.hj-customer .menu-desc,
body.hj-customer .store-meta,
body.hj-customer .brand-sub,
body.hj-customer .desc,
body.hj-customer .hint,
body.hj-customer .label,
body.hj-customer .order-meta,
body.hj-customer .item-options,
body.hj-customer .notice,
body.hj-customer .empty,
body.hj-customer .sub,
body.hj-customer .phone,
body.hj-customer .order-date,
body.hj-customer .loading-sub {
    font-weight: var(--hj-fw-label);
    color: var(--hj-muted);
}

/* 입력 — iOS 줌 방지 16px+ */
body.hj-customer .input,
body.hj-customer .textarea,
body.hj-customer .select,
body.hj-customer input[type='text'],
body.hj-customer input[type='tel'],
body.hj-customer input[type='password'],
body.hj-customer input[type='number'] {
    font-size: max(16px, var(--hj-text-base));
    font-weight: var(--hj-fw-label);
    line-height: 1.4;
}

body.hj-customer .input:focus,
body.hj-customer .textarea:focus,
body.hj-customer .select:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

/* 카드 터치 영역 */
body.hj-customer .menu-card,
body.hj-customer .option-item,
body.hj-customer .order,
body.hj-customer .item {
    transition: border-color 0.15s ease, transform 0.12s ease;
}

body.hj-customer .menu-card:active:not(.soldout) {
    transform: scale(0.985);
}

/* 브랜드 */
.brand-penguin {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    object-fit: cover;
    border: 2px solid rgba(212, 175, 55, 0.35);
    background: #0a0a0a;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 28px rgba(212, 175, 55, 0.12);
}

.brand-penguin.sm { width: 56px; height: 56px; border-radius: 16px; }
.brand-penguin.lg { width: 108px; height: 108px; border-radius: 26px; }

.brand-name {
    color: var(--hj-gold-text);
    font-size: var(--hj-text-2xl);
    font-weight: var(--hj-fw-title);
    letter-spacing: -0.05em;
    line-height: 1.15;
}

.brand-name.md { font-size: var(--hj-text-xl); }

.brand-sub {
    margin-top: 6px;
    color: var(--hj-muted);
    font-size: var(--hj-text-sm);
    font-weight: var(--hj-fw-label);
}

@media (max-width: 560px) {
    body.hj-customer {
        font-size: 17px;
    }

    body.hj-customer .brand-name.md {
        font-size: clamp(28px, 7vw, 34px);
    }

    body.hj-customer .menu-name {
        font-size: 18px;
    }

    body.hj-customer .btn.gold,
    body.hj-customer .btn-gold {
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 17px;
    }
}