@charset "utf-8";

/* 이벤트(프로모션) 페이지 — 사이트 공통 CSS를 쓰지 않는 독립 랜딩 */

:root {
    --pm-navy: #00114e;
    --pm-gold: #b99b70;
    --pm-tit: #1d1d1d;
    --pm-gray: #8e8e8e;
    --pm-bg: #f0f0f0;
    --pm-border: #e4e4e4;
    --pm-accent: #4a79f1;
    --pm-page: #f5f7fa;
    --pm-line: #ececef;
    --pm-max: 680px;
    --pm-header-h: 62px;
    --pm-bar-h: 74px;
    --pm-safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

.pm-body {
    margin: 0;
    background: var(--pm-page);
    color: var(--pm-tit);
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
}

/* 이 파일은 프로모션 페이지에서만 로드된다. 컴포넌트 클래스가 항상 이기도록 요소 선택자로 둔다 */
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p, h2, h3 { margin: 0; }

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: 2px;
}

/* 스킵 링크로 이동한 본문은 포커스 링을 그리지 않는다 (프로그램 포커스라 늘 떠 버린다) */
.pm-list:focus { outline: none; }

/* 화면에서만 감추고 스크린리더에는 읽힌다 */
.pm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pm-skip {
    position: fixed;
    top: -80px;
    inset-inline-start: 8px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 0 0 6px 6px;
    background: var(--pm-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    transition: top .15s ease;
}

.pm-skip:focus { top: 0; }

/* ── header ───────────────────────────────── */
/* 경계선을 border 가 아니라 inset shadow 로 그린다 — 헤더 높이가 --pm-header-h 와 어긋나면
   sticky 탭의 top 계산이 1px 밀린다 */
.pm-header {
    max-width: var(--pm-max);
    margin: 0 auto;
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--pm-border);
}

.pm-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--pm-header-h);
    padding: 12px 16px;
}

.pm-header__logo img {  height: 16px; }

.pm-header__btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pm-header__home,
.pm-lang__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 36px;
    padding: 9px;
    border: 1px solid var(--pm-border);
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.24px;
    color: var(--pm-tit);
    white-space: nowrap;
}

.pm-lang { position: relative; }
.pm-lang__icon { width: 14px; height: 14px; }
.pm-lang__arrow { width: 12px; height: 12px; transition: transform .2s; }
.pm-lang.is-open .pm-lang__arrow { transform: rotate(180deg); }

.pm-lang__list {
    overflow: hidden;
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-end: 0;
    z-index: 20;
    min-width: 100%;
    border-radius: 6px;
    border:1px solid #E4E4E4;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.pm-lang.is-open .pm-lang__list { display: block; }
.pm-lang__list li+li{
    border-top: 1px solid #E4E4E4;
}
.pm-lang__list a {
    text-align: center;
    display: block;
    padding: 7px 10px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: -0.24px;
    white-space: nowrap;
    color:var(--pm-gray);
}

.pm-lang__list a:hover,
.pm-lang__list [aria-current="true"] { background: var(--pm-bg); color: var(--pm-tit); font-weight: 500;}

/* ── main ─────────────────────────────────── */
.pm-main {
    max-width: var(--pm-max);
    margin: 0 auto;
    padding-bottom: calc(var(--pm-bar-h) + var(--pm-safe-b));
}

/* ── banner ───────────────────────────────── */
.pm-banner {
    position: relative;
    overflow: hidden;
    background: var(--pm-bg);
    aspect-ratio: 680 / 399;
    /* 가로 스와이프는 스크립트가 처리하고 세로 스크롤은 브라우저에 맡긴다 */
    touch-action: pan-y;
    cursor: grab;
}

.pm-banner:active { cursor: grabbing; }

.pm-banner__track {
    display: flex;
    height: 100%;
    transition: transform .5s ease;
}

.pm-banner__slide {
    flex: 0 0 100%;
    height: 100%;
}

.pm-banner__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

/* 시안에 없는 요소라 평소에는 감춰 두고 키보드 포커스에만 드러낸다 */
.pm-banner__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
}

.pm-banner__nav:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.pm-banner__nav::before {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
}

.pm-banner__prev { inset-inline-start: 8px; }
.pm-banner__next { inset-inline-end: 8px; }
.pm-banner__prev::before { transform: rotate(-45deg) translate(1px, 1px); }
.pm-banner__next::before { transform: rotate(135deg) translate(1px, 1px); }

.pm-banner__indicator {
    position: absolute;
    inset-inline-end: 16px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 100px;
    background: rgba(0, 0, 0, .5);
    font-size: 12px;
    letter-spacing: -0.24px;
}

.pm-banner__current { padding: 5px 1px; font-weight: 500; color: #fff; }
.pm-banner__total { padding: 5px 1px; font-weight: 400; color: var(--pm-gray); }
.pm-banner__sep { width: 1px; height: 10px; background: var(--pm-gray); }

/* ── tab ──────────────────────────────────── */
.pm-tab {
    position: sticky;
    top: 0;
    z-index: 10;
}

.pm-tab__depth1,
.pm-tab__depth2 {
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;
    background: #fff;
    overflow-x: auto;
    scrollbar-width: none;
}

.pm-tab__depth1::-webkit-scrollbar,
.pm-tab__depth2::-webkit-scrollbar { display: none; }

.pm-tab__depth1.is-dragging,
.pm-tab__depth2.is-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.pm-tab__depth1 {
    gap: 20px;
    border-bottom: 1px solid var(--pm-border);
}

.pm-tab__d1 {
    padding: 12px 0;
    border-bottom: 2px solid transparent;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.3px;
    color: var(--pm-gray);
    white-space: nowrap;
}

.pm-tab__d1.is-on {
    border-bottom-color: var(--pm-navy);
    color: var(--pm-navy);
}

.pm-tab__depth2 {
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pm-tab__d2 {
    padding: 5px 11px;
    border-radius: 50px;
    background: var(--pm-bg);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
    color: var(--pm-gray);
    white-space: nowrap;
}

.pm-tab__d2.is-on {
    background: var(--pm-navy);
    color: #fff;
}

/* ── list ─────────────────────────────────── */
.pm-list { background: #fff; }

/* sticky 탭에 제목이 가리지 않도록 — 실측값은 JS가 --pm-sticky 로 넣는다 */
.pm-group { scroll-margin-top: var(--pm-sticky, 98px); }

.pm-group__tit {
    padding: 25px 16px 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.36px;
    color: var(--pm-gray);
}

.pm-item {
    padding: 22px 0;
    border-bottom: 1px solid var(--pm-line);
}

.pm-item__txt { padding: 0 16px 12px; }

.pm-item__badge {
    display: flex;
    align-items: center;
    gap: 3px;
    max-width: 420px;
    padding-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.24px;
    color: var(--pm-accent);
}

.pm-item__badge img { width: 14px; height: 14px; }

.pm-item__name {
    max-width: 420px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.32px;
    color: var(--pm-tit);
}

.pm-item__desc {
    max-width: 420px;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.28px;
    color: var(--pm-gray);
}

.pm-item__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 16px;
}

.pm-item__origin {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: -0.24px;
    color: var(--pm-gray);
}

.pm-item__origin del { text-decoration: line-through; }

.pm-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--pm-gray);
}

.pm-item__sale {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.4px;
}

.pm-item__sale em { font-style: normal; color: var(--pm-gold); }
.pm-item__sale strong { font-weight: 600; color: var(--pm-tit); }

.pm-empty {
    padding: 60px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--pm-gray);
}

/* ── notice ───────────────────────────────── */
.pm-notice { padding: 24px 16px 32px; }

.pm-notice__tit {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pm-gray);
}

.pm-notice li {
    position: relative;
    padding-inline-start: 10px;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: -0.24px;
    color: var(--pm-gray);
}

.pm-notice li::before {
    content: "";
    position: absolute;
    top: 8px;
    inset-inline-start: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--pm-gray);
}

/* ── quick (PC) ───────────────────────────── */
.pm-quick {
    display: none;
    position: fixed;
    /* 브라우저 우측이 아니라 본문(--pm-max) 바깥 30px 지점.
       창이 좁아 그 자리가 화면을 넘으면 우측 24px 여백으로 물러난다 */
    inset-inline-start: min(calc(50% + var(--pm-max) / 2 + 30px), calc(100% - 80px));
    bottom: 24px;
    z-index: 30;
    flex-direction: column;
    gap: 8px;
}

.pm-quick__btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 56px;
    height: 56px;
    padding: 17px;
    border: 1px solid var(--pm-border);
    border-radius: 100px;
    background: #fff;
    overflow: hidden;
    transition: width .25s ease;
}

.pm-quick__btn img { flex: 0 0 20px; width: 20px; height: 20px; }

.pm-quick__label {
    margin-inline-start: 8px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .2s ease;
}

/* 확장 폭은 버튼마다 라벨 길이에 맞춘 고정값 — 라벨이 번역으로 길어져도 시안 폭을 지킨다 */
.pm-quick__naver:hover,
.pm-quick__naver:focus-visible { width: 129px; }

.pm-quick__kakao:hover,
.pm-quick__kakao:focus-visible { width: 116px; }

.pm-quick__btn:hover .pm-quick__label,
.pm-quick__btn:focus-visible .pm-quick__label { opacity: 1; }

.pm-quick__top {
    justify-content: center;
    border-color: var(--pm-navy);
}

.pm-quick__top img { width: 18px; height: 19px; flex-basis: 18px; }

/* ── bottom bar (mobile) ──────────────────── */
.pm-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: var(--pm-max);
    margin: 0 auto;
    /* iOS 홈 인디케이터가 버튼을 덮지 않도록 */
    padding: 12px 16px calc(12px + var(--pm-safe-b));
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
}

.pm-bar__call {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    height: 50px;
    border: 1px solid var(--pm-navy);
    border-radius: 5px;
}

.pm-bar__call img { width: 18px; height: 18px; }

.pm-bar__kakao,
.pm-bar__naver {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1 1 0;
    height: 50px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.15px;
}

.pm-bar__kakao img,
.pm-bar__naver img { width: 20px; height: 20px; }

.pm-bar__kakao { background: #fae100; color: #0b1e45; }
.pm-bar__naver { background: #00ce6c; color: #fff; }

.pm-only-pc { display: none; }

/* ── RTL (ar) ─────────────────────────────── */
/* 음수 자간은 아랍문자의 연결형을 끊는다. Pretendard 에는 아랍문자 자체가 없어 폰트도 되돌린다 */
[dir="rtl"] .pm-body,
[dir="rtl"] .pm-body * {
    letter-spacing: normal;
}

[dir="rtl"] .pm-body {
    font-family: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
}

[dir="rtl"] .pm-banner__nav { transform: translateY(-50%) scaleX(-1); }

/* ── PC ───────────────────────────────────── */
@media (min-width: 681px) {
    .pm-header {
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .pm-tab { top: var(--pm-header-h); }

    .pm-main { padding-bottom: 0; }

    .pm-bar { display: none; }
    .pm-quick { display: flex; }

    .pm-only-pc { display: inline; }
    .pm-only-mo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pm-banner__track,
    .pm-lang__arrow,
    .pm-quick__btn,
    .pm-quick__label,
    .pm-skip {
        transition-duration: .01ms;
    }
}