/* Bault Common CSS — 전 페이지 공용만 둔다.
 *
 * 여기 남는 것: 리셋/타이포, .container, GNB 헤더·햄버거·메뉴패널, 공용 캐러셀 코어(.js-carousel),
 * 공용 뒤로가기(.detail-back), 전역 바텀시트(게스트/로그인/비회원조회), site-footer,
 * 범용 컴포넌트(.section · .btn-* · .form-* · .card · .snackbar · .soldout), 유틸리티(.tl · .hide · .mt* 등)
 *
 * 특정 화면 전용 스타일은 style.css 로 간다. 로드 순서는 common.css → style.css 이며(header.php),
 * 페이지 스타일이 공용을 덮어쓰는 방향이라 순서를 바꾸면 안 된다.
 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scrollbar-gutter: stable; }
body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; color: #E8EBED; background: #121212; min-width: 360px; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; vertical-align: middle; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
main { min-height: calc(100vh - 409px);}
input[type="text"]:focus { border-color: #000; background-color: #f5f5f5; outline: none;}
/* Layout */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* GNB Header (mobile) */
.gnb-header { position: sticky; top: 0; z-index: 100; height: 64px; padding: 12px max(16px, calc((100% - 480px) / 2)); background: #121212; display: flex; align-items: center; justify-content: space-between; }
.gnb-header .gnb-logo img { height: 15px; display: block; }
.gnb-header .gnb-icons { display: flex; align-items: center; gap: 16px; }
.gnb-header .gnb-lang { width: 28px; height: 28px; border-radius: 50%; background: #393C41; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.gnb-header .gnb-ico { width: 28px; height: 28px; position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; cursor: pointer; }
.gnb-header .gnb-ico img { width: 28px; height: 28px; display: block; }
.gnb-header .gnb-cart-badge { position: absolute; top: 4px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #C00023; }

/* 햄버거 ↔ X 토글 */
.gnb-menu .ico-menu { width: 28px; height: 28px; display: block; }
.gnb-menu .ico-close { display: none; position: relative; width: 18px; height: 18px; }
.gnb-menu .ico-close::before, .gnb-menu .ico-close::after { content: ''; position: absolute; top: 8px; left: 0; width: 18px; height: 2px; background: #fff; }
.gnb-menu .ico-close::before { transform: rotate(45deg); }
.gnb-menu .ico-close::after { transform: rotate(-45deg); }
body.menu-open .gnb-menu .ico-menu { display: none; }
body.menu-open .gnb-menu .ico-close { display: block; }

/* 메뉴 드롭다운 패널 */
.gnb-menu-panel { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: calc(100vh - 64px); z-index: 99; padding: 40px 16px; background: rgba(18,18,18,0.8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: none; flex-direction: column; gap: 24px; }
body.menu-open .gnb-menu-panel { display: flex; }
.gnb-menu-panel a { color: #fff; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: -0.36px; text-transform: uppercase; text-align: right; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.1); }

/* 공용 캐러셀 트랙 */
.js-carousel { position: relative; overflow: hidden; }
.js-carousel .carousel-track { display: flex; transition: transform 0.3s ease; user-select: none; -webkit-user-select: none; }
.js-carousel .carousel-track img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.js-carousel .carousel-slide { flex: 0 0 100%; min-width: 0; position: relative; }
.js-carousel.single .carousel-dots { display: none; }
.detail-back { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center;  }
.detail-back svg { display: block; }
/* ===== 로그인 유도 바텀시트 (게스트) ===== */
.guest-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.8); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 90; }
.guest-scrim.open { opacity: 1; pointer-events: auto; }
.guest-sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%); width: 100%; max-width: 480px; z-index: 95; background: #1D1D1D; border-radius: 16px 16px 0 0; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 40px; transition: transform 0.3s ease; }
.guest-sheet.open { transform: translateX(-50%) translateY(0); }
.guest-handle { width: 48px; height: 4px; border-radius: 2px; background: #454C53; align-self: center; }
.guest-body { display: flex; flex-direction: column; gap: 24px; }
.guest-section { font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: -0.32px; color: #fff; opacity: 0.5; }
.guest-member { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid #393C41; }
.guest-socials { display: flex; flex-direction: column; gap: 8px; }
.guest-actions { display: flex; flex-direction: column; gap: 16px; }
.guest-actions.hide { display: none; }
.guest-buy { height: 40px; border: none; border-radius: 60px; background: #00FF84; color: #1B1D1F; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; cursor: pointer; }
.guest-sheet .btn-social { height: 48px; padding: 14px 16px; gap: 10px; border: none; border-radius: 40px; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; }
.guest-sheet .btn-social.google { background: #FFFFFF; color: #1B1D1F; }
.guest-sheet .btn-social.naver  { background: #03A94D; color: #FFFFFF; }
.guest-sheet .btn-social.kakao  { background: #FFE812; color: #1B1D1F; }
.guest-sheet .btn-social .social-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; }
.guest-sheet .btn-social .social-icon img { display: block; width: 24px; height: 24px; object-fit: contain; }

/* ===== 로그인 모달 (햄버거 메뉴 → 로그인, 구매 시점 게스트 시트와 별개) ===== */
.login-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.8); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 90; }
.login-scrim.open { opacity: 1; pointer-events: auto; }
.login-sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%); width: 100%; max-width: 480px; z-index: 95; background: #1D1D1D; border-radius: 16px 16px 0 0; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 40px; transition: transform 0.3s ease; }
.login-sheet.open { transform: translateX(-50%) translateY(0); }
.login-handle { width: 48px; height: 4px; border-radius: 2px; background: #454C53; align-self: center; }
.login-body { display: flex; flex-direction: column; gap: 24px; }
.login-member { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid #393C41; }
.login-welcome { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.login-welcome-title { font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: -0.36px; color: #fff; }
.login-welcome-sub { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #fff; }
.login-socials { display: flex; flex-direction: column; gap: 8px; }
.login-sheet .btn-social { height: 48px; padding: 14px 16px; gap: 10px; border: none; border-radius: 40px; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; }
.login-sheet .btn-social.google { background: #FFFFFF; color: #1B1D1F; }
.login-sheet .btn-social.naver  { background: #03A94D; color: #FFFFFF; }
.login-sheet .btn-social.kakao  { background: #FFE812; color: #1B1D1F; }
.login-sheet .btn-social .social-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; }
.login-sheet .btn-social .social-icon img { display: block; width: 24px; height: 24px; object-fit: contain; }
.btn-order-lookup { height: 48px; border: none; border-radius: 40px; background: #393C41; color: #C9CDD2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; cursor: pointer; }

/* ===== 비회원 주문조회 모달 (바텀시트) ===== */
.lookup-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.8); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 90; }
.lookup-scrim.open { opacity: 1; pointer-events: auto; }
.lookup-sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%); width: 100%; max-width: 480px; z-index: 95; background: #1D1D1D; border-radius: 16px 16px 0 0; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 40px; transition: transform 0.3s ease; }
.lookup-sheet.open { transform: translateX(-50%) translateY(0); }
.lookup-handle { width: 48px; height: 4px; border-radius: 2px; background: #454C53; align-self: center; }
.lookup-body { display: flex; flex-direction: column; gap: 24px; }
.lookup-fields { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid #393C41; }
.lookup-field { display: flex; flex-direction: column; gap: 8px; }
.lookup-label { font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; color: #fff; }
.lookup-input { width: 100%; height: 40px; padding: 0 16px; border: 1px solid #C9CDD3; border-radius: 48px; background: #F7F8F9; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -0.14px; color: #1B1D1F; outline: none; }
.lookup-input::placeholder { color: #9EA4AA; }
.lookup-error { display: none; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: -0.12px; color: #FF4949; }
.lookup-error.show { display: block; }
.btn-lookup-confirm { height: 48px; border: none; border-radius: 40px; background: #00FF83; color: #1B1D1F; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -0.14px; cursor: pointer; }

/* Site Footer (mobile) */
.site-footer { padding: 40px max(16px, calc((100% - 480px) / 2)) 80px; background: #121212; display: flex; flex-direction: column; gap: 16px; }
.site-footer .foot-brand { display: flex; flex-direction: column; gap: 8px; }
.site-footer .foot-logo img { height: 15px; display: block; }
.site-footer .foot-links { display: flex; align-items: center; gap: 12px; }
.site-footer .foot-link { font-size: 12px; line-height: 16px; color: #999; text-decoration: none; }
.site-footer .foot-link-alt { color: #9ea4aa; }
.site-footer .foot-link-div { width: 1px; height: 8px; background: #393c41; }
.site-footer .foot-biz { display: flex; flex-direction: column; gap: 4px; }
.site-footer .foot-biz-line { font-size: 12px; line-height: 16px; letter-spacing: -0.01em; color: #808080; }
.site-footer .foot-copyright { font-size: 12px; line-height: 14px; color: #808080; }

/* Page */
.section { margin-bottom: 36px; }
.section-title { font-size: 17px; font-weight: 700; margin-bottom: 16px; }

/* Buttons */
.btn { display: inline-block; padding: 11px 24px; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; text-align: center; }
.btn:hover { opacity: 0.85; }
.btn-primary { background: #1B1D1F; color: #fff; }
.btn-secondary { background: #fff; color: #1B1D1F; border: 1px solid #D1D6DB; }
.btn-danger { background: #FF4949; color: #fff; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Form */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #6B7684; }
.form-input { width: 100%; padding: 10px 14px; border: 1px solid #D1D6DB; border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: #fff; }
.form-input:focus { border-color: #1B1D1F; }
.form-input.error { border-color: #FF4949; }
.form-error-msg { color: #FF4949; font-size: 12px; margin-top: 4px; display: none; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
textarea.form-input { resize: vertical; min-height: 60px; }

/* Card */
.card { background: #fff; border: 1px solid #E8EBED; border-radius: 10px; padding: 24px; }

/* Snackbar */
.snackbar { position: fixed; bottom: 32px; left: 50%; width: 328px; max-width: calc(100% - 32px); transform: translateX(-50%) translateY(100px); background: rgba(0, 0, 0, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; padding: 13px 16px; border-radius: 40px; text-align: center; font-size: 14px; font-weight: 400; letter-spacing: -0.14px; z-index: 9999; opacity: 0; transition: all 0.3s ease; pointer-events: none; }
.snackbar.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Soldout */
.soldout { opacity: 0.5; pointer-events: none; position: relative; }
.soldout::after { content: '품절'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.6); color: #fff; padding: 6px 16px; border-radius: 4px; font-size: 13px; font-weight: 700; pointer-events: none; }

/* Utility */
.tl { text-align: left; }
.tc { text-align: center; }
.tr { text-align: right; }
.bold { font-weight: 700; }
.hide { display: none !important; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; }
.mb16 { margin-bottom: 16px; }

@media (min-width: 1024px) {
    .detail-back svg {width:22px; height: 22px;}
}