/* 기본 초기화 */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --black: #000000; --white: #ffffff; --gray: #999999; }
body { font-family: 'Pretendard', sans-serif; background-color: var(--white); color: var(--black); line-height: 1.5; display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; transition: opacity 0.3s ease; }
a:hover { opacity: 0.5; }

/* 상단 흐르는 띠 배너 — 고정하여 항상 최상단에 */
.top-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 300; background-color: var(--black); color: var(--white); padding: 10px 0; overflow: hidden; white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; }
.marquee-track { display: inline-block; white-space: nowrap; animation: scrolling 25s linear infinite; }
.marquee-content { display: inline-block; }
.marquee-content span { padding: 0 30px; display: inline-block; }
@keyframes scrolling { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ============ Grain overlay ============ */
.grain {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 1000;
    opacity: 0.04; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============ NAV (novabrew style) ============ */
.ml-nav {
    position: fixed; top: 37px; left: 0; right: 0;
    z-index: 200;
    padding: 22px 48px;
    display: flex; align-items: center; justify-content: space-between;
    opacity: 0; /* GSAP가 인트로에서 fade-in */
}
.ml-logo {
    display: flex; align-items: center; gap: 10px;
    font-family: 'DM Sans', 'Pretendard', sans-serif;
    font-weight: 700; font-size: 15px;
    letter-spacing: 0.2em; color: #141416;
    flex-shrink: 0; white-space: nowrap;
    cursor: pointer;
}

/* ━━ 콘텐츠 보호 — 드래그로 글자 긁어오기(선택 하이라이트) 방지 ━━ */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
input, textarea {
    -webkit-user-select: text;
    user-select: text;
}
img {
    -webkit-user-drag: none;
}
.ml-logo-img {
    width: 30px; height: 30px;
    border-radius: 50%; object-fit: cover;
}
.ml-nav-links {
    list-style: none;
    display: flex; gap: 18px;
    /* ★ 절대위치 중앙고정을 쓰지 않는다 — space-between 플로우에 맡겨야 로고/로그인 공간을 침범(겹침)하지 않는다.
       좁아지면 ≤1100px 미디어쿼리에서 햄버거로 접힌다. */
}
.ml-nav-links a {
    font-family: 'DM Sans', 'Pretendard', sans-serif;
    color: #2b2b30; text-decoration: none;
    font-size: 13px; font-weight: 500;
    position: relative; transition: color 0.3s;
    opacity: 1 !important; /* global a:hover opacity override */
}
.ml-nav-links a:hover { color: #000; opacity: 1 !important; }
.ml-nav-links a::after {
    content: ''; position: absolute;
    left: 0; bottom: -3px; width: 0; height: 1.5px;
    background: currentColor; border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.ml-nav-links a:hover::after { width: 100%; }
.ml-nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ml-nav-cta {
    background: #141416; color: #fafaf7;
    border: none; padding: 11px 20px;
    border-radius: 999px;
    font-family: 'DM Sans', 'Pretendard', sans-serif;
    font-size: 13px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 10px 18px -6px rgba(0,0,0,0.38), 0 4px 8px -2px rgba(0,0,0,0.16),
                inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -2px 4px rgba(0,0,0,0.4);
    transition: transform 0.4s cubic-bezier(0.6,0,0.2,1);
}
.ml-nav-cta:hover { transform: translateY(-2px); opacity: 1; }
.ml-mypage-link {
    font-family: 'DM Sans','Pretendard',sans-serif;
    font-size: 13px; font-weight: 600; color: #141416;
}
/* 모바일 햄버거 */
.ml-hamburger {
    display: none; flex-direction: column; justify-content: center;
    gap: 5px; width: 26px; height: 22px;
    background: none; border: none; padding: 0; cursor: pointer;
}
.ml-hamburger span { display: block; width: 100%; height: 2px; background: #141416; border-radius: 1px; }

/* ============ HERO (novabrew style) ============ */
.ml-hero {
    position: relative;
    min-height: auto; /* ★ 갤러리 위 공간: 100vh → auto 로 해서 콘텐츠 높이만큼만. 숫자 넣으면(ex: 700px) 최소 높이 설정 */
    padding: 200px 32px 80px; /* ★ 위 공간: 이 숫자(200px)를 내리면 Frame it 위로. 마지막 80px=아래 여백 */
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; /* ★ center → flex-start 로 바꿔서 justify 여백 제거 */
    background: #fff; /* ★ 원래: radial-gradient(120% 70% at 50% 0%, #fafafa 0%, #f7f7f7 60%, #f4f4f4 100%) — 돌리고 싶으면 이걸로 복원 */
    overflow: hidden; z-index: 5;
}
/* "Frame it," */
.ml-small-text {
    font-family: 'DM Sans','Pretendard',sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 6.4vw, 92px);
    letter-spacing: -0.035em; line-height: 1;
    color: #141416; text-align: center;
    position: relative; z-index: 4;
}
.ml-word { display: inline-block; overflow: hidden; vertical-align: top; }
.ml-word > span { display: inline-block; transform: translateY(105%); }
/* "MY OBJECT" ghost text */
.ml-big-wrap {
    position: relative; width: 100%;
    margin-top: 8px; display: flex; justify-content: center; z-index: 1;
}
.ml-big-text {
    font-family: 'DM Sans','Pretendard',sans-serif;
    font-style: italic; font-weight: 800;
    font-size: clamp(100px, 19vw, 280px);
    letter-spacing: -0.045em; line-height: 0.85;
    color: #d6d6d6; text-align: center;
    white-space: nowrap; user-select: none; z-index: 1;
}
.ml-letter { display: inline-block; transform-origin: bottom; }
/* 프레임 카드 행 */
.ml-cards-row {
    position: absolute; left: 0; right: 0;
    top: 400px; /* ★ 카드 세로 위치 — 올리면 MY OBJECT와 더 겹침, 내리면 더 아래로 */
    height: 320px; z-index: 3; pointer-events: none;
}
.ml-cards-row > * { pointer-events: auto; }
.ml-card {
    position: absolute;
    cursor: pointer; will-change: transform;
    background: transparent;
}
.ml-card img {
    width: 100%; height: 100%;
    object-fit: contain; display: block;
}
.ml-card:hover { filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18)); }
.ml-card-1 { width: 120px; height: 165px; left: 11%;  top: 35px; z-index: 1; }
.ml-card-2 { width: 148px; height: 205px; left: 19%;  top: 55px; z-index: 2; }
.ml-card-3 { width: 185px; height: 255px; left: 29%;  top: 22px; z-index: 4; }
.ml-card-4 { width: 140px; height: 190px; left: 42%;  top: 72px; z-index: 3; }
.ml-card-5 { width: 215px; height: 295px; left: 51%;  top: 2px;  z-index: 5; }
.ml-card-6 { width: 148px; height: 200px; left: 66%;  top: 58px; z-index: 3; }
/* card-7 삭제됨 */
.ml-card-8 { width: 122px; height: 165px; left: 80%;  top: 52px; z-index: 2; }
/* 하단 서브라인 */
.ml-subline { margin-top: 260px; text-align: center; z-index: 4; position: relative; }
/* ★ margin-top 이 값을 올리면 서브라인 텍스트가 더 아래로, 내리면 위로 */
.ml-arrow-pill {
    display: inline-flex; align-items: center; gap: 10px;
    background: #141416; color: #fafaf7;
    border: none; padding: 12px 20px 12px 24px; border-radius: 999px;
    font-family: 'DM Sans','Pretendard',sans-serif;
    font-size: 14px; font-weight: 500; cursor: pointer;
    box-shadow: 0 12px 22px -7px rgba(0,0,0,0.38), 0 5px 10px -2px rgba(0,0,0,0.18),
                inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -2px 4px rgba(0,0,0,0.4);
    transition: transform 0.4s cubic-bezier(0.6,0,0.2,1);
}
.ml-arrow-pill:hover { transform: translateY(-2px); opacity: 1; }
.ml-ar {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(180deg, #2a2a2a, #555);
    display: flex; align-items: center; justify-content: center; color: #fff;
    transition: transform 0.4s cubic-bezier(0.6,0,0.2,1);
}
.ml-arrow-pill:hover .ml-ar { transform: rotate(45deg); }
.ml-subline-text {
    font-size: 12px; color: #787878;
    letter-spacing: 0.06em;
    font-family: 'DM Sans','Pretendard',sans-serif;
    font-weight: 400;
}

/* --- ★ 마이 아카이브 (로그인한 손님이 자기 촬영 기록을 보는 영역) --- */
/* .hero 와 같은 자리(가운데 영역)를 차지하며 서로 토글된다 */
.archive-section { flex: 1; display: none; flex-direction: column; align-items: center; width: 100%; max-width: 720px; margin: 0 auto; padding: 180px 50px 100px; }
.archive-back { align-self: flex-start; background: none; border: none; color: var(--gray); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; padding: 0; margin-bottom: 40px; }
.archive-back:hover { color: var(--black); }
.archive-greeting { text-align: center; margin-bottom: 50px; }
.archive-hello { font-size: 12px; color: var(--gray); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; }
.archive-title { font-size: 26px; font-weight: 800; margin-bottom: 16px; }
.archive-desc { font-size: 13px; color: var(--gray); line-height: 1.7; }
.archive-gallery { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.archive-card { border: 1px solid #eeeeee; overflow: hidden; cursor: pointer; transition: opacity 0.3s ease; }
.archive-card:hover { opacity: 0.6; }
.archive-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.archive-card .archive-date { font-size: 11px; color: var(--gray); padding: 10px; text-align: center; }
.archive-empty { grid-column: 1 / -1; font-size: 13px; color: var(--gray); text-align: center; line-height: 1.7; padding: 60px 0; }
.archive-logout { margin-top: 60px; background: none; border: 1px solid #ddd; color: var(--gray); padding: 12px 34px; border-radius: 30px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all 0.2s ease; }
.archive-logout:hover { border-color: var(--black); color: var(--black); }

@media (max-width: 768px) {
    .archive-section { padding: 140px 20px 60px; }
}

/* --- 사진 스티커 공통 스타일 (테두리 두껍게, 안쪽 선 얇게) --- */
.photo-sticker {
    position: absolute;
    background-color: var(--black); 
    padding: 7px; /* 겉 테두리 4면을 약간 도톰하게(10px) 변경 */
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.15);
    cursor: grab;
    user-select: none;
    border: 1px solid #222;
    transform-origin: center center;
    gap: 3px; /* 안쪽 사진 사이의 간격을 기존보다 얇게(3px) 변경 */
}
.photo-sticker:active { cursor: grabbing; }
.frame-cut { background-color: var(--white); width: 100%; }

/* --- 사장님이 마음에 들어하신 완벽한 비율 유지 --- */
/* 1. 세로 스트랩 (4컷, 3컷, 2컷 공통) */
.layout-strip { display: flex; flex-direction: column; width: 75px; } /* 테두리가 두꺼워진 만큼 전체 너비 살짝 조정 */
.layout-strip .frame-cut { aspect-ratio: 3 / 2; } /* 비율 그대로 유지 (가로가 살짝 긴 직사각형) */

/* 2. 2x2 격자 (4컷) */
.layout-grid { display: grid; grid-template-columns: 1fr 1fr; width: 130px; }
.layout-grid .frame-cut { aspect-ratio: 3 / 4; } /* 비율 그대로 유지 */

/* 3. 1컷 기본 (세로형) */
.layout-single { display: flex; width: 80px; }
.layout-single .frame-cut { aspect-ratio: 2 / 3; } /* 비율 그대로 유지 */

/* 4. 1컷 폴라로이드 (다시 추가!) */
.layout-polaroid { display: flex; flex-direction: column; width: 80px; padding-bottom: 20px; } /* 하단만 여백을 더 넓게 */
.layout-polaroid .frame-cut { aspect-ratio: 3 / 4; }

/* 하단 중앙 휴지통 영역 */
.trash-zone { position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; background-color: rgba(0, 0, 0, 0.7); color: var(--white); border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s, transform 0.2s; }
.trash-zone.show { bottom: 30px; }
.trash-zone.hovered { background-color: #ff3b30; transform: translateX(-50%) scale(1.2); }

/* 로그인 모달 */
.login-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); display: none; justify-content: center; align-items: center; z-index: 10000; }
.login-modal { background-color: var(--white); padding: 40px; width: 90%; max-width: 400px; border-radius: 12px; position: relative; text-align: left; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
/* ★ X 닫기 버튼 — 배경 투명(뒤 배경색과 동일) + 원형 테두리 링만. (흰 모달 위라 선은 회색→검정, 흰선은 안 보이므로) */
.btn-close { position: absolute; top: 16px; right: 16px; background: transparent; border: 1.5px solid var(--gray); color: var(--gray); font-size: 16px; line-height: 1; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.2s ease; }
.btn-close:hover { color: var(--black); border-color: var(--black); background: transparent; }
.modal-title { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.modal-desc { font-size: 14px; color: var(--gray); margin-bottom: 22px; }
/* ★ 12시간 보관 안내 카피 — 은은한 카드 형태 */
.login-note { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 26px; padding: 14px 16px; background: #f6f5f2; border-radius: 14px; }
.login-note-icon { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.login-note-text { font-size: 12.5px; line-height: 1.55; color: var(--black); margin: 0; }
.login-note-text b { font-weight: 800; }
/* ★ 소셜 로그인 버튼 공통 — 구글/카카오 동일한 알약형 규격 */
.btn-social { display: flex; align-items: center; justify-content: center; gap: 8px; width: 280px; height: 46px; margin: 0 auto; padding: 0 16px; border: none; border-radius: 999px; font-size: 14.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: filter 0.15s ease, background 0.15s ease; }
.btn-social .social-symbol { display: inline-flex; }
/* 구글 버튼 — 흰 배경 + 얇은 테두리 (커스텀 디자인) */
.btn-google-login { background: #fff; color: #3c4043; border: 1px solid #dcdad3; }
/* 카카오 버튼 — 브랜드 노란색 */
.btn-kakao-login { background: #FEE500; color: rgba(0,0,0,0.85); }
.btn-kakao-login:hover { filter: brightness(0.96); }
/* ★ 구글 로그인 오버레이 구조 — 보이는 커스텀 버튼 위에 진짜 구글 버튼을 투명하게 덮어 클릭만 받는다 */
.google-btn-container { position: relative; width: 280px; height: 46px; margin: 0 auto 10px; }
.google-btn-container .btn-google-login { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.google-btn-container:hover .btn-google-login { background: #f7f6f3; }
.google-btn-raw { position: absolute; inset: 0; z-index: 2; opacity: 0.001; overflow: hidden; }
.google-btn-raw > div, .google-btn-raw iframe { width: 100% !important; height: 100% !important; }
.login-fineprint { font-size: 11px; color: var(--gray); text-align: center; margin-top: 16px; }
/* ★ 아카이브 카드 — 사라지기까지 남은 시간 뱃지 */
.archive-timeleft { position: absolute; top: 10px; left: 10px; padding: 4px 9px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.55); border-radius: 999px; backdrop-filter: blur(2px); pointer-events: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SHOP 페이지 — 스위스/에디토리얼 미니멀 (초대형 타이포 + 선 기반 리스트)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.shop-section { flex: 1; display: none; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; max-width: 1240px; margin: 0 auto; padding: 180px 60px 130px; background: #fff; }

/* 상단 작은 대문자 라벨 줄 */
.shop-topbar { display: flex; align-items: baseline; gap: 48px; padding-bottom: 22px; border-bottom: 1px solid #111; font-family: 'DM Sans', 'Pretendard', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #111; }
.shop-topbar-id { font-weight: 700; }
.shop-topbar-id sup { font-size: 7px; }
.shop-topbar-section { color: var(--gray); }
.shop-topbar-num { margin-left: auto; color: var(--gray); }

/* 초대형 헤드라인 */
/* KEYCAP과 동일한 글씨체 — 두께 900 + 외곽선으로 통통하게 + 세로로 살짝 찌부 */
.shop-headline {
    font-family: 'DM Sans', 'Pretendard', sans-serif; font-weight: 900;
    font-size: clamp(72px, 16vw, 210px); line-height: 0.92; letter-spacing: -0.05em; margin: 44px 0 0;
    -webkit-text-stroke-width: 1.2px;        /* 색은 currentColor → 본문 검정, 마침표는 그레이 유지 */
    transform: scaleY(0.88); transform-origin: left bottom;
}
.shop-dot { color: var(--gray); }   /* 마침표 — 은은한 그레이 포인트 */

/* 타이틀 아래 카피 — 메인(볼드) + 서브(얇게), 행간 좁게 한 덩어리처럼 */
.shop-intro { margin-top: 36px; max-width: 640px; }
.shop-intro-main { font-family: 'DM Sans', 'Pretendard', sans-serif; font-size: clamp(18px, 1.9vw, 24px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; color: #111; }
.shop-intro-sub { margin-top: 14px; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--gray); }

/* 얇은 선으로 연결한 라벨 쌍 (레퍼런스의 "Sample size ——— 14 Competitors" 느낌) */
.shop-subline { display: flex; align-items: baseline; gap: 28px; margin: 18px 0 70px; }
.shop-subline-left { font-size: 14px; color: var(--gray); white-space: nowrap; }
.shop-subline-rule { flex: 1; height: 1px; background: #ddd; transform: translateY(-4px); }
.shop-subline-right { font-family: 'DM Sans', 'Pretendard', sans-serif; font-size: clamp(24px, 3vw, 40px); font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.shop-subline-right small { display: block; font-size: 12px; font-weight: 400; color: var(--gray); letter-spacing: 0; margin-top: 2px; }

/* 스토어 리스트 — 카드/그림자 없이 얇은 선으로만 구분 */
.shop-list { list-style: none; border-top: 1px solid #111; }
.shop-list li { border-bottom: 1px solid #e2e2e2; }
.shop-list li:last-child { border-bottom: 1px solid #111; }
.shop-row { display: grid; grid-template-columns: 56px 44px 1fr auto 56px; align-items: center; gap: 24px; padding: 34px 8px; text-decoration: none; color: #111; transition: padding 0.3s cubic-bezier(0.22,1,0.36,1), background 0.3s; }
.shop-row:hover { background: #fafafa; padding-left: 24px; padding-right: 24px; }
.shop-row-idx { font-family: 'DM Sans', 'Pretendard', sans-serif; font-size: 13px; font-weight: 600; color: var(--gray); letter-spacing: 1px; }

/* 동그란 국기 아이콘 (작게) */
.shop-row-flag { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; background: #fff; }
.shop-row-flag img { width: 100%; height: 100%; object-fit: cover; }
.shop-row-flag--globe { color: #555; padding: 8px; }
.shop-row-flag--globe svg { width: 100%; height: 100%; }
/* 일본 국기 — 빨간 원이 커 보여 살짝 축소 */
.shop-row-flag--jp img { transform: scale(0.78); }

.shop-row-name { font-family: 'DM Sans', 'Pretendard', sans-serif; font-size: clamp(20px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.shop-row:hover .shop-row-name { transform: translateX(6px); }
.shop-row-meta { text-align: right; line-height: 1.4; }
.shop-row-region { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #111; }
.shop-row-url { display: block; font-size: 13px; color: var(--gray); }
.shop-row-arrow { justify-self: end; font-size: 26px; color: #111; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.shop-row:hover .shop-row-arrow { transform: translateX(8px); }

@media (max-width: 768px) {
    .shop-section { padding: 140px 22px 80px; }
    .shop-topbar { gap: 18px; font-size: 9px; letter-spacing: 0.8px; }
    .shop-headline { margin-top: 30px; }
    .shop-subline { margin: 28px 0 50px; }
    .shop-row { grid-template-columns: 30px 34px 1fr auto; gap: 14px; padding: 24px 4px; }
    .shop-row:hover { padding-left: 8px; padding-right: 8px; }
    .shop-row-flag { width: 34px; height: 34px; }
    .shop-row-arrow { display: none; }   /* 모바일은 화살표 숨기고 메타만 */
    .shop-row-meta { text-align: right; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   굿즈 갤러리 섹션 (특별한 나만의 네컷 굿즈)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.collab-section {
    display: grid;
    grid-template-columns: 360px 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    padding: 80px 0 80px 50px;
    overflow: hidden;
    border-top: 1px solid #f0f0f0;
}
.collab-left {
    width: 360px;
    padding-right: 60px;
    grid-column: 1;
    grid-row: 1;
}
.collab-actions {
    padding-right: 60px;
    grid-column: 1;
    grid-row: 2;
}
.collab-title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}
.collab-desc {
    font-size: 13px;
    color: var(--gray);
    line-height: 1.85;
    margin-bottom: 28px;
    word-break: keep-all;
}
.collab-insta-link {
    display: inline-block;
    padding: 11px 22px;
    border: 1px solid var(--black);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--black);
    transition: background 0.25s ease, color 0.25s ease;
    margin-bottom: 30px;
    opacity: 1;
}
.collab-insta-link:hover {
    background-color: var(--black);
    color: var(--white);
    opacity: 1;
}
.collab-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pause-bars { display: flex; gap: 3px; align-items: center; justify-content: center; }
.pause-bars i { display: block; width: 2px; height: 11px; background: currentColor; border-radius: 1px; font-style: normal; }
.collab-nav button {
    background: none;
    border: 1px solid #e0e0e0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    line-height: 1;
    padding: 0;
}
.collab-nav button:hover {
    border-color: var(--black);
    background: var(--black);
    color: var(--white);
}
.collab-slider-outer {
    min-width: 0;
    overflow: hidden;
    align-self: stretch;
    display: flex;
    align-items: center;
    grid-column: 2;
    grid-row: 1 / 3;
}
.collab-slider-track {
    display: flex;
    gap: 20px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.collab-card {
    flex-shrink: 0;
    width: 380px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #f0f0f0;
    border-radius: 6px;
    position: relative;
}
.collab-card a {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 1;
}
.collab-card a:hover { opacity: 0.88; }
.collab-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.collab-card--placeholder::after {
    content: '이미지 준비 중';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #bbb;
    pointer-events: none;
    display: flex;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   인스타그램 피드 섹션 (LightWidget)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.insta-feed-section {
    padding: 80px 50px;
    border-top: 1px solid #f0f0f0;
}
.insta-feed-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
}
.insta-feed-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.insta-feed-link {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--gray);
    transition: color 0.2s ease;
    opacity: 1;
}
.insta-feed-link:hover { color: var(--black); opacity: 1; }
.insta-feed-widget { width: 100%; }

/* 하단바 & 모바일 */
.footer { display: flex; justify-content: space-between; align-items: center; padding: 40px 50px; font-size: 11px; font-weight: 500; color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px; border-top: 1px solid #f0f0f0; }
.footer-links { display: flex; gap: 30px; }
/* ── nav: 메뉴 8개 + 긴 로고가 겹치기 전에 미리(≤1100px) 햄버거로 접는다 ── */
@media (max-width: 1100px) {
    .ml-hamburger { display: flex; }
    .ml-nav-links {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: center; gap: 16px;
        background: #fff;
        padding: 24px 0; z-index: 199;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    }
    .ml-nav.menu-open .ml-nav-links { display: flex; }
}

@media (max-width: 768px) {
    /* ── 새 nav 모바일 (더 작은 화면에서 여백·로고 축소) ── */
    .ml-nav { padding: 16px 20px; background: transparent; }
    .ml-logo { font-size: 13px; letter-spacing: 0.2em; }

    /* ── 새 hero 모바일 ── */
    /* ★ 모바일 글자 위치: 첫 숫자(140px) 올리면 Frame it 더 아래로 */
    .ml-hero { padding: 140px 16px 85px; min-height: auto; }
    .ml-big-text { font-size: 20vw; }
    /* ★ 모바일 카드 위치: top 숫자 올리면 아래로 */
    .ml-cards-row { height: 170px; top: 209px; }

    /* 모바일: card-3, card-8 숨김 → card-1 표시, 5개 카드 */
    .ml-card-3 { display: none; }
    .ml-card-8 { display: none; }
    /* 5개 카드 위치 (2컷 제거, 4컷격자→2번째, 4컷긴거→4번째) */
    .ml-card-2 { width: 68px;  height: 102px; left: 6%;  top: 30px; z-index: 1; }
    .ml-card-5 { width: 86px;  height: 118px; left: 20%; top: 22px; z-index: 2; }
    .ml-card-4 { width: 76px;  height: 105px; left: 42%; top: 42px; z-index: 3; }
    .ml-card-1 { display: block; width: 82px; height: 120px; left: 57%; top: 2px;  z-index: 4; }
    .ml-card-6 { width: 72px;  height: 108px; left: 74%; top: 24px; z-index: 2; }
    /* ★ 모바일 서브라인 위치: margin-top 올리면 더 아래로 */
    .ml-subline { margin-top: 130px; }
    .ml-subline-text { text-align: center; line-height: 1.7; }

    .footer { flex-direction: column; gap: 15px; padding: 20px; text-align: center; }

    /* 인스타그램 피드 모바일 */
    .insta-feed-section { padding: 50px 20px; }

    /* 굿즈 갤러리 섹션 모바일 */
    .collab-section { display: flex; flex-direction: column; padding: 50px 20px 50px; gap: 28px; overflow: hidden; }
    .collab-left { width: 100%; padding-right: 0; order: 1; }
    .collab-slider-outer { width: 100%; align-self: auto; order: 2; grid-column: unset; grid-row: unset; }
    .collab-actions { order: 3; padding-right: 0; }
    .collab-title { font-size: 22px; }
    .collab-card { width: 260px; }
}

/* --- 카메라 모달 (팝업창) 디자인 --- */
.camera-modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.85); /* 시크한 반투명 블랙 배경 */
  display: none; /* 평소엔 숨김 */
  justify-content: center; align-items: center;
  z-index: 20000;
}
.camera-modal-content {
  width: 95%; max-width: 1200px;
  height: 90vh;
  /* ★ iframe(카메라) 기본 테마와 같은 다크로 — 하단/모서리에 흰색 줄이 비치던 문제 제거 */
  background-color: #2b2b2e;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.camera-frame {
  width: 100%; height: 100%;
  border: none;
  display: block;
  /* ★ iframe 자체도 같은 다크 배경 — 하단 서브픽셀 틈으로 흰 줄이 비치지 않게 */
  background-color: #2b2b2e;
}
.btn-close-camera {
  position: absolute;
  top: 14px; right: 14px;          /* ★ 모서리에 딱 붙게 (기존 20px → 14px) */
  color: #ffffff;                  /* ★ 흰 X */
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  background: transparent;         /* ★ 배경색과 동일(투명) — 흰 원 테두리만 남음 */
  border: 1.5px solid #ffffff;     /* ★ 하얀 선 원모양 */
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  z-index: 10;
  box-shadow: none;                /* ★ 그림자 제거 */
  transition: all 0.2s ease;
}
.btn-close-camera:hover {
  background: rgba(255,255,255,0.12);
  transform: scale(1.05);
}

/* ---- Exit Confirmation Overlay (카메라 나가기 확인창) ---- */
.exit-confirm-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: #ebebeb;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 40px 56px;
  box-sizing: border-box;
  border-radius: 16px;
}
.exit-confirm-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 520px;
  position: relative;
  flex: 1;
  justify-content: center;
}
.exit-confirm-heading {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  text-align: center;
  color: #111;
  margin: 0 0 18px;
  line-height: 1.25;
  letter-spacing: 0.04em;
}
.exit-confirm-sub {
  font-size: clamp(12px, 1.4vw, 14px);
  text-align: center;
  color: #666;
  margin: 0 0 48px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.exit-confirm-btn-back {
  border: 2px solid #111;
  background: transparent;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 18px 48px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
  border-radius: 2px;
}
.exit-confirm-btn-back:hover {
  background: #111;
  color: #fff;
}
.exit-confirm-btn-discard {
  position: absolute;
  bottom: 28px;
  right: 36px;
  background: none;
  border: none;
  color: #999;
  font-size: 12px;
  cursor: pointer;
  padding: 8px 4px;
  text-decoration: underline;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.exit-confirm-btn-discard:hover {
  color: #444;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   포토부스 쇼케이스 (스크롤 시 실버 번쩍임 + 커튼 열림)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.booth-showcase {
    display: flex;
    justify-content: center;
    padding: 290px 24px 220px; /* PC: 위 여백을 더 줘서 부스가 아래로 내려오게 */
    background: #fff;
}
.booth-stage {
    position: relative;
    width: min(500px, 80vw);
    cursor: pointer;
}
/* 투명 PNG라서 drop-shadow가 포토부스 실루엣을 따라 그림자를 만든다 */
.booth-img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 28px 36px rgba(0,0,0,0.28));
}

/* 가짜 커튼 — 사진 속 출입구를 덮고 있다가 스크롤하면 오른쪽으로 접히며 열린다 */
.booth-curtain {
    position: absolute;
    left: 41%;
    top: 27.7%;
    width: 36.6%;
    height: 36%;
    transform-origin: right center;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 18%, rgba(0,0,0,0.22) 100%),
        repeating-linear-gradient(90deg,
            #46464a 0px, #76767c 9px, #94949a 14px, #5c5c62 22px, #3e3e44 30px);
    border-radius: 0 0 6px 6px;
    box-shadow: inset 0 7px 9px rgba(0,0,0,0.45), -6px 5px 16px rgba(0,0,0,0.32);
    will-change: transform, opacity;
}

/* 전광판 점등 — 사진 속 간판 영역만 그대로 복제한 레이어에 brightness를 줘서
   검은 글자는 그대로 두고 흰 배경(백라이트)만 형광등처럼 번쩍이게 한다 */
.booth-sign-glow {
    position: absolute;
    left: 16%;
    top: 0;
    width: 59.5%;
    height: 22%;
    background-image: url('assets/photobooth-main.png');
    background-size: 168.1% auto;
    background-position: 39.5% 0;
    background-repeat: no-repeat;
    pointer-events: none;
    will-change: filter;
    animation: boothSignFlash 6s linear infinite;
}
@keyframes boothSignFlash {
    /* 파파팟 점화 → 대부분의 시간 환하게 켜짐 → 잠깐 흔들림 → 아주 짧게 꺼졌다 재점화 */
    0%       { filter: brightness(0.72) drop-shadow(0 0 0 rgba(255,255,255,0)); }
    2%       { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255,255,255,0.55)); }
    4%       { filter: brightness(0.78) drop-shadow(0 0 0 rgba(255,255,255,0)); }
    7%       { filter: brightness(1.35) drop-shadow(0 0 14px rgba(255,255,255,0.7)); }
    10%      { filter: brightness(0.95) drop-shadow(0 0 4px rgba(255,255,255,0.2)); }
    13%, 86% { filter: brightness(1.18) drop-shadow(0 0 12px rgba(255,255,255,0.6)); }
    88%      { filter: brightness(0.9) drop-shadow(0 0 3px rgba(255,255,255,0.15)); }
    90%      { filter: brightness(1.18) drop-shadow(0 0 12px rgba(255,255,255,0.6)); }
    95%, 100% { filter: brightness(0.72) drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

/* 실버 광택 스윕 — 스크롤 진행에 따라 빛줄기가 부스를 가로질러 지나간다 */
.booth-shine {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
}
.booth-shine-bar {
    position: absolute;
    top: -12%;
    bottom: -12%;
    left: 0;
    width: 26%;
    transform: translateX(-200%) skewX(-16deg);
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.45) 42%,
        rgba(255,255,255,0.75) 50%,
        rgba(255,255,255,0.45) 58%,
        rgba(255,255,255,0) 100%);
    filter: blur(6px);
    opacity: 0.55;
    will-change: transform;
}

@media (max-width: 768px) {
    .booth-showcase { padding: 185px 16px 130px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   모니터 키캡 3D 뷰어 (실물 6면 사진 박스, 드래그 회전)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.keycap3d-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
    padding: 30px 24px 200px;
    background: #fff;
}
.keycap3d-caption {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #b5b5b5;
}
/* 실측 비율: 가로 0.75 : 세로 1 : 깊이 0.70
   --kchin: 앞면 아래 계단(턱) 높이 / --kstep: 턱이 들어간 깊이 / --ksd: 앞면 껍데기 두께 */
.keycap3d-scene {
    --kw: 174px;
    --kh: 232px;
    --kd: 162px;
    --kchin: calc(var(--kh) * 0.29);
    --kstep: calc(var(--kd) * 0.12);
    --ksd: 14px;
    width: var(--kw);
    height: var(--kh);
    perspective: 1100px;
    cursor: grab;
    touch-action: none;
}
.keycap3d-scene:active { cursor: grabbing; }
.keycap3d-cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(-10deg) rotateY(0deg); /* 정면 시작 */
}
.kc-face {
    position: absolute;
    left: 50%; top: 50%;
    background-size: 100% 100%;
    background-color: #cbc6bd; /* 키캡 베이지 — 둥근 모서리 틈을 메꾸는 바탕색 */
    backface-visibility: hidden;
    border-radius: 10px;
}

/* ── 베이지 코어 — 둥근 모서리 틈 사이로 흰 배경 대신 키캡 색이 보이게 하는 속채움 ── */
.kc-core {
    position: absolute;
    left: 50%; top: 50%;
    background: #cbc6bd;
    backface-visibility: hidden;
}
/* 코어는 파인 앞면(z = kd/2 - kstep)보다 항상 뒤에 있어야 본체 앞면을 가리지 않는다 */
.kc-core-front  { width: calc(var(--kw) - 14px); height: calc(var(--kh) - 14px); transform: translate(-50%,-50%) translateZ(calc(var(--kd) / 2 - var(--kstep) - 2px)); }
.kc-core-back   { width: calc(var(--kw) - 14px); height: calc(var(--kh) - 14px); transform: translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--kd) / 2 - 7px)); }
.kc-core-left   { width: calc(var(--kd) - var(--kstep) - 9px); height: calc(var(--kh) - 14px); transform: translate(-50%,-50%) translateZ(calc((5px - var(--kstep)) / 2)) rotateY(-90deg) translateZ(calc(var(--kw) / 2 - 7px)); }
.kc-core-right  { width: calc(var(--kd) - var(--kstep) - 9px); height: calc(var(--kh) - 14px); transform: translate(-50%,-50%) translateZ(calc((5px - var(--kstep)) / 2)) rotateY(90deg) translateZ(calc(var(--kw) / 2 - 7px)); }
.kc-core-top    { width: calc(var(--kw) - 14px); height: calc(var(--kd) - var(--kstep) - 9px); transform: translate(-50%,-50%) translateZ(calc((5px - var(--kstep)) / 2)) rotateX(90deg) translateZ(calc(var(--kh) / 2 - 7px)); }
.kc-core-bottom { width: calc(var(--kw) - 14px); height: calc(var(--kd) - var(--kstep) - 9px); transform: translate(-50%,-50%) translateZ(calc((5px - var(--kstep)) / 2)) rotateX(-90deg) translateZ(calc(var(--kh) / 2 - 7px)); }

/* ── 본체: 윗부분(스크린부)이 안쪽으로 파이고, 아래 기둥(턱)이 앞으로 튀어나온 계단 구조 ── */
.kc-front-upper {
    width: var(--kw); height: calc(var(--kh) * 0.71);
    background-image: url('assets/keycap/front.jpg');
    background-size: var(--kw) var(--kh);
    background-position: top center;
    border-radius: 10px 10px 0 0;
    transform: translateX(-50%) translateY(calc(var(--kh) / -2)) translateZ(calc(var(--kd) / 2 - var(--kstep)));
    transform-style: preserve-3d; /* 안쪽 사진이 빠져나올 때 3D로 떠오르게 */
}
.kc-front-chin {
    width: var(--kw); height: var(--kchin);
    background-image: url('assets/keycap/front.jpg');
    background-size: var(--kw) var(--kh);
    background-position: bottom center;
    border-radius: 0 0 10px 10px;
    transform: translateX(-50%) translateY(calc(var(--kh) / 2 - var(--kchin))) translateZ(calc(var(--kd) / 2));
}
/* 튀어나온 기둥의 윗면 (위를 보는 선반) */
.kc-ledge {
    width: var(--kw); height: var(--kstep);
    background: #cbc6bd;
    backface-visibility: visible;
    border-radius: 0;
    transform: translate(-50%, -50%) translateY(calc(var(--kh) / 2 - var(--kchin))) translateZ(calc(var(--kd) / 2 - var(--kstep) / 2)) rotateX(90deg);
}
/* ── 안쪽 커스텀 사진 3장 — 겹쳐 있고, 클릭/드래그로 한 장씩 옆으로 빼낼 수 있음 ── */
.kc-photo-stack {
    position: absolute;
    left: 24%; top: 20%;
    width: 57.5%; height: 50.7%;
    transform-style: preserve-3d;
}
.kc-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.55s cubic-bezier(0.3, 1.3, 0.45, 1);
}
.kc-photo-1 { background-image: url('assets/keycap/inner1.png'); }
.kc-photo-2 { background-image: url('assets/keycap/inner2.png'); }
.kc-photo-3 { background-image: url('assets/keycap/inner3.png'); }
/* 스택 내 순서 — JS가 부여. 되돌아온 사진이 맨 위(z3)로 온다 */
.kc-photo.kc-z3 { transform: translateZ(3px); }
.kc-photo.kc-z2 { transform: translateZ(2px) rotate(0.6deg); }
.kc-photo.kc-z1 { transform: translateZ(1px) rotate(-0.6deg); }
/* 빼냈을 때 — 모니터 오른쪽 옆으로 부채꼴처럼 나와서 떠 있음 */
.kc-photo-1.kc-out { transform: translateZ(34px) translateX(140%) translateY(-12%) rotate(7deg); }
.kc-photo-2.kc-out { transform: translateZ(30px) translateX(165%) translateY(38%) rotate(-6deg); }
.kc-photo-3.kc-out { transform: translateZ(26px) translateX(190%) translateY(86%) rotate(5deg); }

.kc-back   { width: var(--kw); height: var(--kh); background-image: url('assets/keycap/back.jpg');   transform: translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--kd) / 2)); }
/* 옆면: 앞-위 모서리를 클립으로 파내서 계단 실루엣 (아래 기둥이 앞으로 나온 모양) */
.kc-left   {
    width: var(--kd); height: var(--kh); background-image: url('assets/keycap/left.jpg');
    transform: translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--kw) / 2));
    clip-path: polygon(0 0, 88% 0, 88% 71%, 100% 71%, 100% 100%, 0 100%);
}
.kc-right  {
    width: var(--kd); height: var(--kh); background-image: url('assets/keycap/right.jpg');
    transform: translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--kw) / 2));
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 71%, 12% 71%);
}
/* 윗면: 윗부분이 파인 만큼 깊이가 짧고 뒤로 밀려 있음 */
.kc-top    {
    width: var(--kw); height: calc(var(--kd) - var(--kstep));
    background-image: url('assets/keycap/top.jpg');
    transform: translate(-50%,-50%) translateZ(calc(var(--kstep) / -2)) rotateX(90deg) translateZ(calc(var(--kh) / 2));
}
.kc-bottom { width: var(--kw); height: var(--kd); background-image: url('assets/keycap/bottom.jpg'); transform: translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--kh) / 2)); }

/* ── 앞면 껍데기: 자석으로 붙는 얇은 판 — 클릭/드래그로 분리 ── */
.kc-shell {
    position: absolute;
    left: 50%; top: 50%;
    width: var(--kw); height: var(--kh);
    margin-left: calc(var(--kw) / -2);
    margin-top: calc(var(--kh) / -2);
    transform-style: preserve-3d;
    /* 파인 윗부분 안에 쏙 들어가 앉아서 튀어나온 턱과 거의 평평하게 맞춰짐.
       (구멍 위치는 텍스처를 좌우로 늘리고 줄여서 본체 창과 맞춰놓음) */
    transform: translateZ(calc(var(--kd) / 2 - var(--ksd) / 2 + 1px));
    transition: transform 0.65s cubic-bezier(0.3, 1.5, 0.45, 1); /* 자석 착 — 살짝 튕기며 붙는 곡선 */
    cursor: pointer;
}
.keycap3d-cube.kc-open .kc-shell {
    transform: translateZ(calc(var(--kd) / 2 + 70px)) translateX(calc(var(--kw) * -1.2)) rotateY(24deg);
}
.kcs-face { background-color: #cbc6bd; }
.kcs-face {
    position: absolute;
    left: 50%; top: 50%;
    background-size: 100% 100%;
    backface-visibility: hidden;
}
.kcs-front  { width: var(--kw); height: var(--kh); background-color: transparent; background-image: url('assets/keycap/shell-front.png'); border-radius: 12px; transform: translate(-50%,-50%) translateZ(calc(var(--ksd) / 2)); }
.kcs-back   { width: var(--kw); height: var(--kh); border-radius: 12px; transform: translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--ksd) / 2)); }
.kcs-left   { width: var(--ksd); height: var(--kh); transform: translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--kw) / 2)); }
.kcs-right  { width: var(--ksd); height: var(--kh); transform: translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--kw) / 2)); }
.kcs-top    { width: var(--kw); height: var(--ksd); transform: translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--kh) / 2)); }
.kcs-bottom { width: var(--kw); height: var(--ksd); transform: translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--kh) / 2)); }

.keycap3d-labels {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.keycap3d-labels .keycap3d-caption { margin-top: 7px; }
.keycap3d-hint {
    font-size: 11px;
    color: #c2c2c2;
    letter-spacing: 0.04em;
}

@media (max-width: 768px) {
    .keycap3d-section { padding: 10px 16px 140px; }
    /* 사진이 옆으로 빠져나와도 화면 밖으로 안 나가게 살짝 작게 */
    .keycap3d-scene { --kw: 108px; --kh: 144px; --kd: 101px; --ksd: 9px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   포토 키링 3D (랍스터 고리 + O링 + 알루미늄 사진판)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.keyring3d-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    padding: 30px 24px 250px;
    background: #fff;
}
/* 두 키링을 가운데 정렬로 나란히 */
.keyring3d-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 70px;
}
.keyring3d-scene {
    width: 220px;
    height: 336px;
    perspective: 950px;
    cursor: grab;
    touch-action: none;
}
/* ── 키링 2: 긴 스트립 판 (3컷/4컷) — 고리는 공용, 판 크기만 다름 ── */
.kr-keyring2 { height: 372px; }
.kr-keyring2 .kr-plate {
    width: 100px; height: 243px;
    margin-left: -50px;
}
.kr-keyring2 .krp-front  { width: 100px; height: 243px; background-image: url('assets/keyring/plate2-front.jpg'); }
.kr-keyring2 .krp-back   { width: 100px; height: 243px; background-image: url('assets/keyring/plate2-back.jpg'); }
.kr-keyring2 .krp-left   { height: 237px; transform: translate(-50%,-50%) rotateY(-90deg) translateZ(50px); }
.kr-keyring2 .krp-right  { height: 237px; transform: translate(-50%,-50%) rotateY(90deg) translateZ(50px); }
.kr-keyring2 .krp-top    { width: 96px; transform: translate(-50%,-50%) rotateX(90deg) translateZ(121.5px); }
.kr-keyring2 .krp-bottom { width: 96px; transform: translate(-50%,-50%) rotateX(-90deg) translateZ(121.5px); }
.keyring3d-scene:active { cursor: grabbing; }
.keyring3d-bouncer { width: 100%; height: 100%; }
.keyring3d-pivot {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}
/* 랍스터 고리 — 실물 사진. 3겹 레이어로 두께감(뽕긋).
   사진이 왼쪽으로 기울어 있어서 O링 중심을 기준으로 돌려 똑바로 세움 */
.kr-clasp {
    position: absolute;
    top: 0; left: 50%;
    width: 122px; height: 130px;  /* 사진 비율 0.935 */
    margin-left: -61px;
    transform-style: preserve-3d;
    transform: rotate(14deg);
    transform-origin: 57.5% 84%;  /* O링 중심 */
}
.krc-body {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
/* 게이트 — 피벗(핀) 기준 회전. 아래로 당기면 -30도까지 열린다 */
.krc-gate {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    transform-origin: 59% 55%;
    transform: translateZ(4px) rotate(0deg);
    transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); /* 놓으면 스프링처럼 탁 */
    cursor: grab;
    touch-action: none;
}
.krc-gate:active { cursor: grabbing; }
/* 알루미늄 사진판 — 두께 6px, 단면은 실버 */
.kr-plate {
    position: absolute;
    top: 122px; left: 50%;
    width: 116px; height: 192px;
    margin-left: -58px;
    transform-style: preserve-3d;
}
.krp-face {
    position: absolute;
    left: 50%; top: 50%;
    backface-visibility: hidden;
    background-size: 100% 100%;
}
.krp-front {
    width: 116px; height: 192px;
    background-image: url('assets/keyring/plate-front.jpg');
    border-radius: 9px;
    transform: translate(-50%,-50%) translateZ(3px);
}
.krp-back {
    width: 116px; height: 192px;
    background-image: url('assets/keyring/plate-back.jpg');
    border-radius: 9px;
    transform: translate(-50%,-50%) rotateY(180deg) translateZ(3px);
}
.krp-left   { width: 6px; height: 186px; background: linear-gradient(180deg,#e6e8eb,#a8acb3,#888c93); transform: translate(-50%,-50%) rotateY(-90deg) translateZ(58px); }
.krp-right  { width: 6px; height: 186px; background: linear-gradient(180deg,#e6e8eb,#a8acb3,#888c93); transform: translate(-50%,-50%) rotateY(90deg) translateZ(58px); }
.krp-top    { width: 112px; height: 6px; background: linear-gradient(90deg,#d6d9dd,#f0f2f4,#b9bdc3); transform: translate(-50%,-50%) rotateX(90deg) translateZ(96px); }
.krp-bottom { width: 112px; height: 6px; background: linear-gradient(90deg,#b9bdc3,#e6e8eb,#9a9ea5); transform: translate(-50%,-50%) rotateX(-90deg) translateZ(96px); }

@media (max-width: 768px) {
    .keyring3d-section { padding: 16px 10px 120px; }
    /* 모바일: 둘이 나란히 들어가게 폭을 줄이고 살짝 축소 */
    .keyring3d-row { gap: 6px; }
    .keyring3d-scene { width: 172px; transform: scale(0.82); transform-origin: top center; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   마이 아카이브 — 여러 장 선택 주문 + 주문서 모달
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.archive-card { position: relative; cursor: pointer; }
.archive-check {
    position: absolute; top: 10px; right: 10px;
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid #fff; background: rgba(0,0,0,0.35);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
    transition: background 0.15s;
}
.archive-card.selected .archive-check { background: #000; }
.archive-card.selected .archive-check::after {
    content: '✓'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 800;
}
.archive-card.selected img { outline: 3px solid #000; outline-offset: -3px; }

.archive-order-bar { display: flex; justify-content: center; margin-top: 30px; }
.btn-archive-order {
    background: #000; color: #fff; border: none; border-radius: 999px;
    padding: 15px 38px; font-size: 13px; font-weight: 700;
    letter-spacing: 0.04em; cursor: pointer; transition: opacity 0.2s;
}
.btn-archive-order:disabled { opacity: 0.3; cursor: not-allowed; }

.order-modal-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.45);
    display: none; align-items: center; justify-content: center;
}
.order-modal {
    background: #fff; width: 92%; max-width: 420px;
    border-radius: 14px; padding: 32px 28px;
    position: relative; max-height: 85vh; overflow-y: auto;
    text-align: left;
}
.order-title { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.order-sub { font-size: 13px; color: #888; margin-bottom: 20px; }
.order-field {
    display: block; font-size: 12px; font-weight: 700; color: #555;
    margin-bottom: 14px;
}
.order-field select, .order-field input, .order-field textarea {
    display: block; width: 100%; margin-top: 6px;
    padding: 11px 12px; font-size: 14px; font-weight: 400;
    border: 1px solid #ddd; border-radius: 8px;
    font-family: inherit; background: #fff;
}
.order-field textarea { resize: vertical; }
.btn-order-submit {
    width: 100%; margin-top: 8px;
    background: #000; color: #fff; border: none; border-radius: 999px;
    padding: 15px 0; font-size: 13px; font-weight: 700; cursor: pointer;
}
.btn-order-submit:disabled { opacity: 0.5; cursor: wait; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   키캡 시뮬레이터 (사진 업로드 → 편집 → 3D 키캡 미리보기)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 팝업이 아니라 본문 섹션 — 고정 헤더/띠배너 아래에 위치 (포토부스 자리쯤) */
.kcsim-section {
    flex-direction: column;
    align-items: center; justify-content: flex-start;
    background: #ffffff;
    padding: 220px 60px 120px;   /* 위: 고정 헤더 + 약간 더 아래로 (덜렁임 방지) */
    min-height: 100vh;
    overflow-x: clip;            /* 100vw 풀블리드 선이 가로 스크롤 만들지 않게 */
}
/* 에디토리얼 마크 헤더 — HD™ 스타일 (큰 모노그램 + 교차선 + 양쪽 라벨) */
.kcsim-head { width: 100%; max-width: 1100px; margin: 0 auto 70px; }
.kc-mark { position: relative; width: 100%; height: 420px; margin: 0 auto; }
/* 선은 컨테이너를 벗어나 화면 양끝까지 — 100vw 풀블리드 */
.kc-mark-lines { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; overflow: visible; }
.kc-mark-lines line { stroke: #111; stroke-width: 1; vector-effect: non-scaling-stroke; }
/* KEYCAP과 하단 라벨들을 하나로 묶어 너비를 글자 크기에 맞춤 */
.kc-mark-content {
    position: absolute; left: 50%; top: 44%; /* 로고와 라벨이 묶였으므로 중앙값을 새로 잡음 */
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content; /* KEYCAP 글씨의 가로 너비에 딱 맞춤 */
}

/* KEYCAP 글자 (두껍게 + 세로로 살짝 눌러 찌부) */
.kc-mark-logo {
    font-family: 'DM Sans', 'Pretendard', sans-serif; font-weight: 900;
    font-size: clamp(60px, 9vw, 128px); letter-spacing: -0.05em; line-height: 1; color: #111; white-space: nowrap;
    -webkit-text-stroke: 1.2px #111;
    display: block;
    transform: scaleY(0.88);        /* 세로로 약간 눌러 통통하게 — 1에 가까울수록 덜 눌림 */
    transform-origin: center bottom; /* 아래를 기준으로 눌러서 밑 문장과 간격 유지 */
}

/* 양쪽 문장 라벨 */
.kc-mark-labels {
    display: flex;
    justify-content: space-between; /* 양 끝(K의 왼쪽, P의 오른쪽)으로 완벽하게 밀어냄 */
    width: 100%; /* 래퍼 너비(=KEYCAP 너비)에 꽉 차게 설정 */
    margin-top: 8px; /* KEYCAP 로고와 아래 설명글 사이의 간격 — 더 가깝게 */
}
.kc-mark-col { width: 150px; }
.kc-mark-col--l { text-align: left; }
.kc-mark-col--r { text-align: right; }

/* 문장 간격(줄바꿈) 좁힘 */
.kc-mark-small { font-size: 11px; line-height: 1.15; letter-spacing: 0.4px; text-transform: uppercase; color: var(--gray); }

/* 굵은 글씨 행 간격 좁힘 */
.kc-mark-bold { margin-top: 6px; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.4px; text-transform: uppercase; color: #111; }
.kcsim-content { position: relative; width: 100%; max-width: 1080px; text-align: center; margin: 0 auto; }
.kcsim-title { font-size: 22px; font-weight: 800; letter-spacing: 0.06em; }
.kcsim-subtitle { font-size: 13px; color: #999; margin-top: 8px; margin-bottom: 44px; }

/* --- 투웨이 오브제 설명 텍스트 (제미나이 카피) --- */
.kc-feature-title {
    font-family: 'DM Sans', 'Pretendard', sans-serif;
    font-size: 27px; font-weight: 900; letter-spacing: 0.3px;
    color: #111; margin-bottom: 12px; line-height: 1.15;
    -webkit-text-stroke: 0.4px #111;   /* 더 두껍게 */
}
.kc-feature-desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px; font-weight: 300; color: #333;
    line-height: 1.6; letter-spacing: -0.2px;
}
/* [옵션 A] 3D 뷰어 우측 텍스트 — 모니터가 위쪽 오른쪽으로 열리므로 아래쪽에 배치해 가림 방지 */
.kc-feature-a { text-align: left; align-self: flex-end; max-width: 240px; margin: 0 0 24px 24px; position: relative; top: 0; }
/* [옵션 B] 하단 중앙 브릿지 텍스트 (가운데 정렬) */
.kc-feature-b { text-align: center; margin: 80px auto 60px; width: 100%; }

/* ★★ '사진 선택하기' 버튼 ↔ '2-WAY CUSTOM OBJECT' 제목 수평 맞춤 손잡이 ★★
   (데스크탑 3열 가로배치에서만 적용 — 모바일은 영향 없음)
   top 숫자 키우면 → 제목이 아래로,  음수(-10px 등)면 → 위로.  버튼과 딱 맞을 때까지 조절하세요. */
@media (min-width: 769px) {
    .kc-feature-a { top: 30px; }
}

.kcsim-body {
    display: flex; justify-content: center; align-items: flex-start;
    gap: 60px; flex-wrap: wrap;
}
.kcsim-editor { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* 편집 프레임 — 키캡 화면과 같은 가로 4:3 직사각형 */
.kcsim-frame {
    position: relative; width: 300px; height: 225px;
    background: #f0f0f0; border-radius: 8px; overflow: hidden;
    cursor: grab; touch-action: none;
    box-shadow: inset 0 0 0 1px #e2e2e2;
}
.kcsim-frame:active { cursor: grabbing; }
.kcsim-img {
    position: absolute; left: 50%; top: 50%;
    transform-origin: center; display: none;
    will-change: transform; user-select: none; -webkit-user-drag: none;
}
.kcsim-frame-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; color: #bbb; pointer-events: none;
}
.kcsim-frame-empty span { font-size: 40px; font-weight: 300; line-height: 1; }
.kcsim-frame-empty p { font-size: 13px; }
/* 가운데 가이드(키캡 화면 영역 표시) — 프레임 전체가 화면이라 테두리만 살짝 */
.kcsim-frame-guide {
    position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06); border-radius: 8px;
}

.kcsim-controls { width: 300px; }

/* ── 시뮬레이터 전용: 사진은 면들과 분리된 독립 레이어로 화면 위치에 띄움 (색 필터 영향 X) ── */
#keycapSimSection .kcsim-photo-layer {
    position: absolute; left: 50%; top: 50%;
    width: calc(var(--kw) * 0.56);
    height: calc(var(--kh) * 0.3152);
    transform: translate(-50%, -50%) translateY(calc(var(--kh) * -0.1805)) translateZ(calc(var(--kd) / 2 - var(--kstep) + 1px));
    transform-style: preserve-3d;
}
#keycapSimSection .kcsim-photo-layer .kc-photo { transform: none; }
/* 기본 샘플 사진은 흐리게 (업로드하면 JS가 kcsim-sample 제거) */
#kcsimInnerPhoto.kcsim-sample { filter: blur(2.5px) brightness(0.9); }
/* 모니터 화면 위 "사진을 업로드 해보세요" 안내 — 같은 3D 평면에 올림 */
.kcsim-upload-prompt {
    position: absolute; inset: 0; transform: translateZ(2px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; line-height: 1.3;
    font-family: 'Pretendard', sans-serif; font-size: 8.5px; font-weight: 800;
    color: #fff; letter-spacing: 0.3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.65);
    pointer-events: none;
}
/* 껍데기는 오른쪽으로 열림 */
#keycapSimSection .keycap3d-cube.kc-open .kc-shell {
    transform: translateZ(calc(var(--kd) / 2 + 70px)) translateX(calc(var(--kw) * 1.2)) rotateY(-24deg);
}
/* 시뮬레이터 키캡은 처음부터 비스듬히 — 3D임이 한눈에 보이게 (JS 로드 전 깜빡임 방지) */
#keycapSimCube { transform: rotateX(-14deg) rotateY(26deg); }

/* ── 키캡 색상 변형 — 베이지 텍스처/단색면에 필터를 입혀 색만 바꾼다 (윤곽·3D 그대로) ──
   사진(.kcsim-photo-layer)은 면들과 분리돼 있어 색이 입혀지지 않는다 */
#keycapSimCube.kc-color-white .kc-face,
#keycapSimCube.kc-color-white .kc-core,
#keycapSimCube.kc-color-white .kc-ledge,
#keycapSimCube.kc-color-white .kcs-face {
    filter: brightness(1.22) saturate(0.18);
}
#keycapSimCube.kc-color-black .kc-face,
#keycapSimCube.kc-color-black .kc-core,
#keycapSimCube.kc-color-black .kc-ledge,
#keycapSimCube.kc-color-black .kcs-face {
    filter: brightness(0.3) saturate(0.45) contrast(1.08);
}
#keycapSimCube.kc-color-pink .kc-face,
#keycapSimCube.kc-color-pink .kc-core,
#keycapSimCube.kc-color-pink .kc-ledge,
#keycapSimCube.kc-color-pink .kcs-face {
    filter: sepia(0.32) saturate(1.5) hue-rotate(298deg) brightness(1.13);
}

/* ── 색상 선택 스와치 ── */
.kcsim-colors { margin-top: 22px; }
.kcsim-colors-label { display: block; font-size: 12px; font-weight: 700; color: #555; margin-bottom: 10px; }
.kcsim-swatch-row { display: flex; gap: 12px; justify-content: center; }
.kcsim-swatch {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid #ddd; cursor: pointer; padding: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    transition: transform 0.15s, box-shadow 0.15s;
}
.kcsim-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; transform: scale(1.05); }
#keycapSimSection .keycap3d-cube.kc-open .kc-shell {
    transform: translateZ(calc(var(--kd) / 2 + 70px)) translateX(calc(var(--kw) * 1.2)) rotateY(-24deg);
}
.kcsim-zoom-label { display: block; font-size: 12px; font-weight: 700; color: #555; text-align: left; }
.kcsim-zoom-label input { width: 100%; margin-top: 8px; accent-color: #000; }
.kcsim-hint { font-size: 11px; color: #aaa; margin-top: 8px; }

.kcsim-upload-btn {
    background: #000; color: #fff; border: none; border-radius: 999px;
    padding: 14px 36px; font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: inherit; letter-spacing: 0.03em;
}

.kcsim-preview { display: flex; flex-direction: column; align-items: center; gap: 30px; padding-top: 20px; }
.kcsim-preview-hint { font-size: 11px; color: #c2c2c2; letter-spacing: 0.04em; margin-top: 34px; }   /* 모니터 밑으로 더 내림 */

@media (max-width: 768px) {
    .kcsim-section { padding: 150px 22px 60px; }
    .kcsim-head { margin-bottom: 40px; }
    .kc-mark { height: 320px; }
    .kc-mark-content { top: 44%; }                       /* ★ PC와 동일 (기존 48%) */
    .kc-mark-labels { margin-top: 8px; }                 /* ★ PC와 동일 — KEYCAP↔문장 간격 (기존 16px) */
    .kc-mark-col { width: 130px; }                       /* 폭은 모바일용 유지 (글자 작아 그대로) */
    .kc-mark-small { font-size: 9.5px; line-height: 1.15; } /* 글자 크기는 모바일용 유지 */
    .kc-mark-bold { font-size: 10.5px; margin-top: 6px; }   /* ★ margin-top PC와 동일 (기존 5px) */
    .kcsim-body { gap: 36px; }
    .kcsim-subtitle { margin-bottom: 30px; }
}

/* ══ 커스텀 확인/알림 모달 — 브라우저 기본 alert/confirm 대체 (블랙&화이트 무드) ══ */
.mani-dialog-overlay {
    position: fixed; inset: 0; z-index: 12000;          /* 로그인 모달(10000)보다 위 */
    background: rgba(0, 0, 0, 0.55);
    display: none; justify-content: center; align-items: center;
    padding: 24px;
}
.mani-dialog-overlay.show { display: flex; }
.mani-dialog {
    background: #fff; color: #111;
    width: 100%; max-width: 380px;
    border-radius: 14px;
    padding: 38px 30px 30px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    animation: maniDialogIn 0.22s ease;
}
@keyframes maniDialogIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
.mani-dialog-brand {
    font-size: 10px; font-weight: 800; letter-spacing: 0.32em;
    color: #b5b5b5; text-transform: uppercase; margin-bottom: 16px;
}
.mani-dialog-msg {
    font-size: 15px; font-weight: 600; line-height: 1.65; color: #111;
    margin: 0 0 26px; word-break: keep-all; white-space: pre-line;
}
.mani-dialog-btns { display: flex; gap: 10px; justify-content: center; }
.mani-dialog-btn {
    min-width: 108px; padding: 13px 22px;
    border-radius: 999px; font-size: 13px; font-weight: 700;
    letter-spacing: 0.06em; cursor: pointer; font-family: inherit;
    transition: all 0.2s ease;
    -webkit-appearance: none; appearance: none;
}
.mani-dialog-ok { background: #111; color: #fff; border: 1.5px solid #111; }
.mani-dialog-ok:hover { background: #fff; color: #111; }
.mani-dialog-cancel { background: #fff; color: #111; border: 1.5px solid #111; }
.mani-dialog-cancel:hover { background: #111; color: #fff; }

/* ══ SHIPPING — 해외배송비 안내 (shipping.js) · 블랙&화이트 에디토리얼 ══ */
.ship-section {
    display: none; flex-direction: column; align-items: center;
    padding: 170px 24px 140px; min-height: 80vh; width: 100%;
}
.ship-head { text-align: center; margin-bottom: 40px; }
.ship-title {
    font-family: 'DM Sans', 'Pretendard', sans-serif; font-weight: 900;
    font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.01em; color: #111;
    -webkit-text-stroke: 0.7px #111; transform: scaleY(0.92); transform-origin: center bottom;
}
.ship-sub { font-size: 13px; color: #888; margin-top: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
/* 친절 설명문 */
.ship-intro { width: 100%; max-width: 620px; border: 1px solid #111; padding: 26px 28px; margin-bottom: 40px; }
.ship-intro-lead { font-size: 16px; font-weight: 800; line-height: 1.5; margin-bottom: 16px; color: #111; }
.ship-notes { list-style: none; padding: 0; margin: 0; }
.ship-notes li { position: relative; padding-left: 16px; font-size: 12.5px; color: #444; line-height: 1.75; }
.ship-notes li::before { content: '—'; position: absolute; left: 0; color: #bbb; }
.ship-notes b { color: #111; }
/* 나라 선택 */
.ship-app { width: 100%; max-width: 720px; }
.ship-search {
    width: 100%; height: 46px; padding: 0 18px; font-size: 14px; font-family: inherit;
    border: 1px solid #ccc; border-radius: 0; outline: none; margin-bottom: 18px; background: #fff;
}
.ship-search:focus { border-color: #111; }
.ship-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ship-country {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 14px 8px; background: #fff; border: 1px solid #e4e4e4; cursor: pointer;
    font-family: inherit; transition: all 0.15s;
}
.ship-country:hover { border-color: #111; transform: translateY(-2px); }
/* 선택 시 — 검정 배경 대신 두꺼운 검정 테두리 (국기가 그대로 보이게) */
.ship-country.on { background: #fafafa; border: 2px solid #111; padding: 13px 7px; }
.ship-flag { width: 30px; height: 20px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); display: block; }
.ship-cname { font-size: 13px; font-weight: 800; color: #111; }
.ship-cen { font-size: 10px; color: #999; letter-spacing: 0.04em; }
.ship-empty { grid-column: 1/-1; text-align: center; color: #999; font-size: 13px; padding: 24px 0; }
/* 결과 표 */
.ship-result { margin-top: 34px; }
.ship-res-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid #111; margin-bottom: 8px; flex-wrap: wrap; }
.ship-flag.big { width: 46px; height: 31px; }
.ship-res-name { font-size: 22px; font-weight: 900; color: #111; }
.ship-res-name b { font-weight: 500; color: #999; font-size: 15px; margin-left: 4px; }
/* 통화 토글 (₩ / $) */
.ship-cur-toggle { margin-left: auto; display: flex; border: 1px solid #111; border-radius: 999px; overflow: hidden; }
.ship-cur { background: #fff; color: #111; border: none; padding: 8px 16px; font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; }
.ship-cur.on { background: #111; color: #fff; }
.ship-cur-note { display: block; font-size: 11.5px; color: #999; margin-bottom: 12px; }
.ship-weight-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.ship-weight-in label { font-size: 13px; font-weight: 700; color: #111; display: flex; align-items: center; gap: 8px; }
.ship-weight-in input { width: 90px; height: 38px; padding: 0 12px; font-size: 14px; font-family: inherit; border: 1px solid #ccc; outline: none; }
.ship-weight-in input:focus { border-color: #111; }
.ship-weight-hint { font-size: 12px; color: #888; }
.ship-weight-hint b { color: #111; }
.ship-table-wrap { border: 1px solid #e4e4e4; max-height: 460px; overflow-y: auto; }
.ship-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ship-table th { position: sticky; top: 0; background: #111; color: #fff; text-align: left; font-size: 11px; letter-spacing: 0.1em; padding: 11px 16px; font-weight: 700; }
.ship-table td { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; color: #333; }
.ship-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: #111; }
.ship-table tr:last-child td { border-bottom: none; }
.ship-table tr.hit td { background: #111; color: #fff; font-weight: 800; }
/* 배송 전 안내 (구매자용) */
.ship-detail { width: 100%; max-width: 720px; margin: 60px auto 0; }
.ship-detail-title { font-size: 18px; font-weight: 900; color: #111; padding-bottom: 14px; border-bottom: 2px solid #111; margin-bottom: 8px; letter-spacing: -0.01em; }
.ship-detail-item { padding: 18px 2px; border-bottom: 1px solid #eee; }
.ship-detail-item h4 { font-size: 14px; font-weight: 800; color: #111; margin-bottom: 7px; }
.ship-detail-item p { font-size: 13px; color: #555; line-height: 1.75; }
.ship-detail-item b { color: #111; font-weight: 700; }
.ship-detail-en { margin-top: 22px; background: #111; color: #fff; padding: 22px 24px; }
.ship-detail-en h4 { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.ship-detail-en ul { list-style: none; padding: 0; margin: 0; }
.ship-detail-en li { position: relative; padding-left: 15px; font-size: 12.5px; line-height: 1.7; color: #ddd; margin-bottom: 8px; }
.ship-detail-en li::before { content: '·'; position: absolute; left: 2px; color: #888; font-weight: 900; }
.ship-detail-en b { color: #fff; }

@media (max-width: 768px) {
    .ship-section { padding: 150px 16px 90px; }
    .ship-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ══ CHARM — 주렁주렁 포도키링 체험 (charm-demo.js) ══ */
.charm-section {
    display: none; flex-direction: column; align-items: center;
    padding: 170px 24px 230px; min-height: 80vh;   /* 아래 여백 — 맨 아래 고리의 긴 판이 잘리지 않게 */
}
.charm-head { text-align: center; }
/* 메인 페이지용 주렁주렁 섹션 (키캡 3D 밑 · Frame it 위) — Charm 탭과 같은 데모를 그대로 사용
   ★ 아래 여백 230px + z-index: 맨 아래 고리에 45mm 긴 판을 걸면 체인보다 아래로 달랑거리는데,
     다음 섹션(Frame it 히어로)이 흰 배경으로 덮어서 잘려 보이던 문제 방지 */
.charm-home-section { display: flex; flex-direction: column; align-items: center; padding: 30px 24px 230px; position: relative; z-index: 6; }
.charm-home-section .charm-title { font-size: clamp(34px, 4.6vw, 56px); }
.charm-title {
    font-family: 'DM Sans', 'Pretendard', sans-serif; font-weight: 900;
    font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.02em; color: #111;
    -webkit-text-stroke: 0.8px #111;
    transform: scaleY(0.9); transform-origin: center bottom;   /* KEYCAP과 같은 찌부 느낌 */
}
.charm-sub { font-size: 13px; color: #777; margin-top: 10px; letter-spacing: 0.02em; }
.charm-body { display: flex; gap: 80px; align-items: flex-start; justify-content: center; margin-top: 44px; }
.charm-stage { position: relative; width: 340px; display: flex; justify-content: center; }
.charm-chain-wrap { position: relative; }
.charm-chain { height: 560px; display: block; user-select: none; -webkit-user-drag: none; transition: filter 0.2s, transform 0.2s; }
/* 드래그 중 체인 위에 올라오면 살짝 반응 (여기 놓으면 걸려요) */
.charm-stage.charm-over .charm-chain { filter: brightness(1.1) drop-shadow(0 0 16px rgba(0,0,0,0.28)); transform: scale(1.02); }
/* 빈 고리 자리 — 은은히 깜빡이는 링 (여기에 걸 수 있어요 표시) */
.charm-hook {
    position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px;
    border: 2px dashed #999; border-radius: 50%;
    animation: charmPulse 1.6s ease-in-out infinite;
    pointer-events: none;
}
.charm-hook-near {
    border: 2.5px solid #111; background: rgba(0,0,0,0.07);
    animation: none; transform: scale(1.3);
}
@keyframes charmPulse {
    0%, 100% { transform: scale(1); opacity: 0.45; }
    50% { transform: scale(1.18); opacity: 0.9; }
}
/* 오른쪽 판 보관함 — 체인과 같은 높이로 고정해서, 키링이 빠져나가도 CTA 버튼 위치가 안 움직임 */
.charm-tray { display: flex; flex-direction: column; gap: 24px; align-items: center; padding-top: 26px; min-height: 560px; }
.charm-tray .charm-cta-wrap { margin-top: auto; }   /* CTA는 항상 트레이 맨 아래 고정 */
.charm-tray-hint { font-size: 13px; font-weight: 600; color: #666; text-align: center; line-height: 1.65; }
.charm-item { cursor: grab; touch-action: none; transition: transform 0.2s; display: flex; flex-direction: column; align-items: center; }
.charm-item:hover { transform: translateY(-4px); }
.charm-item:active { cursor: grabbing; }
.charm-item img { pointer-events: none; }
.charm-item-clasp { display: block; height: 30px; margin-bottom: -5px; position: relative; z-index: 2; }   /* 판 위에 달린 랍스터 고리 */
.charm-item-plate { display: block; border-radius: 3px; box-shadow: 0 8px 18px rgba(0,0,0,0.18); }
.charm-item.charm-lift { opacity: 0.25; }
/* 손에 들려 따라다니는 키링 */
.charm-ghost {
    position: fixed; z-index: 12000; pointer-events: none;
    transform: translate(-50%, -50%) rotate(-4deg) scale(0.98);
    display: flex; flex-direction: column; align-items: center;
}
.charm-ghost .charm-item-plate { box-shadow: 0 18px 34px rgba(0,0,0,0.3); }
/* 걸린 판 — 바깥: 최종 기울기 / 안쪽: 반동 스윙. 클릭하면 도로 빠짐 */
.charm-hung { position: absolute; transform-origin: 50% 0; margin-top: -4px; cursor: pointer; }
.charm-hung:hover img { filter: brightness(0.95); }
.charm-swing, .charm-still { transform-origin: 50% 0; }
.charm-swing { animation: charmSwing 1.15s ease-out; }
.charm-swing img, .charm-still img { display: block; border-radius: 3px; box-shadow: 0 10px 22px rgba(0,0,0,0.22); }
@keyframes charmSwing {
    0%   { transform: rotate(18deg); }
    28%  { transform: rotate(-11deg); }
    54%  { transform: rotate(6deg); }
    78%  { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}
/* 하나라도 걸면 뿅 나타나는 CTA — 트레이(사진키링들) 아래에 세로로 배치 */
.charm-cta-wrap {
    margin-top: 28px; display: flex; flex-direction: column; gap: 12px; align-items: center;
    opacity: 0; transform: scale(0.85); pointer-events: none;
}
.charm-cta-wrap.show { animation: charmPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; pointer-events: auto; }
@keyframes charmPop { to { opacity: 1; transform: scale(1); } }
.charm-cta {
    background: #111; color: #fff; border: 1.5px solid #111; border-radius: 999px;
    padding: 14px 26px; font-size: 13.5px; font-weight: 800; letter-spacing: 0.02em;
    font-family: inherit; cursor: pointer; transition: all 0.2s;
    white-space: nowrap;
}
.charm-cta:hover { background: #fff; color: #111; }
.charm-reset { background: none; border: none; color: #999; font-size: 12px; cursor: pointer; text-decoration: underline; font-family: inherit; }
@media (max-width: 768px) {
    .charm-section { padding: 150px 18px 90px; }
    .charm-body { flex-direction: column; align-items: center; gap: 34px; }
    .charm-chain { height: 440px; }
    /* ★ 맨 아래 고리에 긴 판(45mm)을 걸면 체인보다 ~185px 아래로 달랑거림 —
       그만큼 아래 간격을 확보해서 안내문/버튼과 안 겹치게 (CHARM 제목과 체인 간격 느낌으로 넉넉히) */
    .charm-stage { margin-bottom: 200px; }
    .charm-tray { flex-direction: row; flex-wrap: wrap; justify-content: center; padding-top: 0; gap: 16px; min-height: 0; }
    .charm-tray-hint { width: 100%; }
    .charm-tray .charm-cta-wrap { margin-top: 14px; flex-basis: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   [폰트 실험 2026-07-07] DM Sans → Pretendard 통일
   장평/자간을 공들여 맞춘 메인 로고 4개만 DM Sans 유지:
     .ml-logo(헤더 MANI LABORATORY) · .kc-mark-logo(KEYCAP 대형)
     .shop-headline(Shop. 초대형 — KEYCAP과 세트) · .ml-big-text(MY OBJECT 고스트)
   ★ 전체 되돌리기: 이 블록을 통째로 삭제하면 100% 원상복구 ★
   ★ 특정 항목만 되돌리기: 아래 목록에서 그 선택자 한 줄만 삭제 ★
   ══════════════════════════════════════════════════════════════════ */
.ml-nav-links a,
.ml-nav-cta,
.ml-mypage-link,
.ml-small-text,
.ml-arrow-pill,
.ml-subline-text,
.shop-topbar,
.shop-intro-main,
.shop-subline-right,
.shop-row-idx,
.shop-row-name,
.kc-feature-title {
    font-family: 'Pretendard', sans-serif;
}