/* ============================================================
   추석 캠페인 - 추석에도 한우가 답이다! (Figma 디자인 적용)
   배경: 섹션별 이미지 (assets/sec01~05) + 핫스팟 오버레이
   팔레트: navy #1b1c28 / gold #edbc7f, #c69353 / red #ce3f4f
   ============================================================ */

/* Paperlogy 웹폰트 (팝업 동적 텍스트용) */
@font-face {
    font-family: 'Paperlogy';
    font-weight: 400;
    font-display: swap;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Paperlogy';
    font-weight: 700;
    font-display: swap;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Paperlogy';
    font-weight: 800;
    font-display: swap;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

html, body { overflow-x: hidden; } /* 가로 스크롤 방지 */

body {
    font-family: 'Paperlogy', 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    background: #1b1c28;
    color: #1b1c28;
    line-height: 1.6;
}

.page { width: 100%; max-width: 100%; overflow-x: hidden; }
.sec-bg { max-width: 100%; }

/* ===== 스크롤 시 상단 고정 탭 (Figma 24:1508 — 4개 확장, 전부 텍스트) ===== */
.stab {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(58px, 7.3vw, 140px);
    background: #27272e;
    display: flex;
    justify-content: center;
    z-index: 80;
    transform: translateY(-100%);
    transition: transform .3s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    font-family: 'Paperlogy', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
.stab.show { transform: none; }
.stab-item {
    width: 25%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1px, 0.15vw, 3px);   /* 텍스트 세로 간격 축소 → 위아래 여백 확보 */
    text-decoration: none;
    position: relative;
    padding: 0 1%;
}
.stab-pill, .stab-sub, .stab-title { line-height: 1.15; }
.stab-item.active { background: #101012; }
.stab-item.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(3px, 0.26vw, 5px);
    background: linear-gradient(90deg,
        #ce3f4f 0 33.4%, #5bc3bf 33.4% 66.7%, #678ed7 66.7% 100%);
}
.stab-pill {
    font-size: clamp(9px, 0.94vw, 18px);
    font-weight: 500;
    color: #fff;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: 0.12em 1em;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.stab-item.active .stab-pill { background: #5b569a; border-color: #5b569a; }
.stab-sub {
    font-size: clamp(10px, 1.04vw, 20px);
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.stab-title {
    font-size: clamp(11px, 1.46vw, 28px);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.4em;
}
.stab-item.active .stab-title { color: #d4a872; }
.stab-item.active .stab-title::before,
.stab-item.active .stab-title::after {
    content: '\25C6\25C6'; /* ◆◆ */
    font-size: 0.55em;
    letter-spacing: 0.18em;
    background: linear-gradient(90deg, #ce3f4f 50%, #5bc3bf 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stab-item.active .stab-title::after {
    background: linear-gradient(90deg, #5bc3bf 50%, #ce3f4f 50%);
    -webkit-background-clip: text;
    background-clip: text;
}
.m-br { display: none; } /* 모바일에서만 탭 타이틀 2줄 분리 */
@media (max-width: 640px) {
    .stab { height: 56px; }
    .stab-pill, .stab-sub { display: none; }
    .stab-item { padding: 0 3px; }
    .stab-title {
        display: block;
        font-size: 11px;
        line-height: 1.3;
        white-space: nowrap;      /* 지정된 지점(m-br)에서만 줄바꿈 */
        text-align: center;
    }
    .m-br { display: block; }     /* 모든 탭 타이틀을 일관된 2줄로 */
    .stab-item.active .stab-title::before,
    .stab-item.active .stab-title::after { display: none; }
    .sec { scroll-margin-top: 56px; }
}

/* ===== 섹션 (1920px 기준 배경 이미지 + % 좌표 오버레이) ===== */
.sec {
    position: relative;
    font-size: 0;
    overflow: hidden; /* 오버레이 요소가 화면 밖으로 나가지 않게 클리핑 */
    scroll-margin-top: clamp(58px, 7.3vw, 140px); /* 고정 탭에 가려지지 않게 */
}
.sec picture { display: block; width: 100%; }
.sec-bg { width: 100%; height: auto; display: block; }

/* 이벤트 종료 안내 오버레이 (기간 종료 시 해당 섹션 위에 표시) */
.sec-end-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: rgba(20, 21, 32, 0.82);
    backdrop-filter: blur(2px);
    font-size: initial;
}
.sec-end-overlay[hidden] { display: none; }
.sec-end-card {
    /* 긴 섹션에서도 카드가 화면 중앙에 따라다니도록 sticky 처리 */
    position: sticky;
    top: 50vh;
    transform: translateY(-50%);
    width: fit-content;
    max-width: 90%;
    margin-inline: auto;
    text-align: center;
    background: linear-gradient(180deg, #2b2c3e 0%, #1b1c28 100%);
    border: 2px solid #edbc7f;
    border-radius: 22px;
    padding: clamp(24px, 4vw, 56px) clamp(20px, 5vw, 72px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    font-family: 'Paperlogy', 'Malgun Gothic', sans-serif;
}
.sec-end-badge {
    display: inline-block;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #1b1c28;
    background: #edbc7f;
    border-radius: 999px;
    padding: 5px 16px;
    margin-bottom: clamp(14px, 1.6vw, 22px);
}
.sec-end-title {
    font-size: clamp(20px, 2.6vw, 40px);
    font-weight: 800;
    line-height: 1.35;
    color: #fff;
    letter-spacing: -0.01em;
}
.sec-end-desc {
    margin-top: clamp(10px, 1.4vw, 18px);
    font-size: clamp(13px, 1.5vw, 22px);
    font-weight: 400;
    line-height: 1.5;
    color: #d8cfe8;
    letter-spacing: -0.01em;
}
.sec-end-btn {
    display: inline-block;
    margin-top: clamp(18px, 2vw, 30px);
    font-size: clamp(15px, 1.7vw, 24px);
    font-weight: 800;
    color: #fff;
    background: #ce3f4f;
    border-radius: 999px;
    padding: clamp(12px, 1.3vw, 18px) clamp(28px, 3.5vw, 56px);
    text-decoration: none;
    transition: background .15s, transform .15s;
}
.sec-end-btn:hover { background: #b23343; transform: translateY(-2px); }

/* 섹션 내부 앵커 (스크롤 이동 목적지) */
.sec-anchor {
    position: absolute;
    width: 1px;
    height: 1px;
    scroll-margin-top: clamp(58px, 7.3vw, 140px);
}

/* 투명 핫스팟 (로고 등 — 호버 효과 없음) */
.hs {
    position: absolute;
    display: block;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 5;
}

/* 모바일 전용 투명 핫스팟 (기본 숨김, ≤767px에서만 표시) */
.mhs {
    position: absolute;
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 5;
}

/* 부위별 한우 4종 좌우 슬라이더 (모바일 전용) */
.m-parts {
    position: absolute;
    display: none;
    left: 3%;
    top: 85.6%;
    width: 94%;
    height: 11.2%;
    z-index: 5;
}
.m-parts-track {
    display: flex;
    gap: 12px;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none; /* Firefox */
}
.m-parts-track::-webkit-scrollbar { display: none; }
.m-part {
    flex: 0 0 auto;
    height: 100%;
    scroll-snap-align: start;
    display: block;
}
.m-part img {
    height: 100%;
    width: auto;
    display: block;
}

/* 이미지 버튼 (배경 위 오버레이 — 호버 시 이미지 자체가 커짐) */
.img-btn {
    position: absolute;
    display: block;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 5;
    transition: transform .2s ease, filter .2s ease;
    will-change: transform;
}
.img-btn img { width: 100%; height: auto; display: block; }
@media (hover: hover) {
    /* 배경 컨텍스트 크롭 이미지: 확대만 (그림자/밝기 효과는 사각 테두리가 드러나므로 금지) */
    .img-btn:hover { transform: scale(1.05); }
    /* 투명 PNG(하누랑): 살짝 확대 + 은은한 글로우 */
    .img-btn--big:hover {
        transform: scale(1.02);
        filter: drop-shadow(0 6px 18px rgba(237, 188, 127, .45));
    }
}
.img-btn:active { transform: scale(0.97); }

/* 모바일 전용 하누랑 (기본 숨김; ≤767px에서 표시 + 둥실 애니메이션 + 골드 글로우) */
.m-hanurang {
    display: none;
    animation: hanurang-float 3s ease-in-out infinite;
    filter: drop-shadow(0 8px 18px rgba(237, 188, 127, .45));
}
@keyframes hanurang-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2%); }
}

/* ===== 이벤트2 섹션 레이어 (배경 / 달 / 구름) ===== */
.ev2-moon-img {
    position: absolute;
    left: 17.86%;
    top: 12.84%;
    width: 64.27%;
    z-index: 1;
    pointer-events: none;
}
.ev2-cloud {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}
.ev2-cloud1 {
    left: 4%;
    top: 14%;
    width: 17.3%;
    animation: cloud-drift-a 9s ease-in-out infinite;
}
.ev2-cloud2 {
    left: 74%;
    top: 48%;
    width: 27.66%;
    animation: cloud-drift-b 12s ease-in-out infinite;
}
@keyframes cloud-drift-a {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(1.6vw); }
}
@keyframes cloud-drift-b {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-2vw); }
}

/* ===== 숨은 황금 보름달 (또렷이 보이되 위치로 숨김) ===== */
.hidden-moon {
    position: absolute;
    width: 11.4%;
    min-width: 90px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform .25s, filter .25s, opacity .25s;
    z-index: 6;
    animation: moon-float 3.2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255, 216, 115, .55));
}
.hidden-moon img { width: 100%; height: auto; display: block; }
.hidden-moon:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 12px #ffd873);
}
.hidden-moon.found {
    opacity: 0.3;                 /* 이미 찾은 달은 흐려짐 */
    filter: grayscale(.8);
    cursor: default;
    animation: none;
}
.hidden-moon.pop { animation: moon-pop .5s ease; }
@keyframes moon-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14%); }
}
@keyframes moon-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.8) rotate(15deg); }
    100% { transform: scale(1); }
}

/* ===== 팝업 공통 ===== */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 11, 20, .72);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}
.popup-overlay.active { display: flex; }
.popup-box {
    position: relative;
    background: #fdf6ea;
    border: 3px solid #edbc7f;
    border-radius: 22px;
    width: 100%;
    max-width: 420px;
    padding: 34px 28px 28px;
    animation: popup-in .25s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
@keyframes popup-in {
    from { transform: translateY(16px) scale(.96); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.popup-close {
    position: absolute;
    top: 10px;
    right: 16px;
    background: none;
    border: none;
    font-size: 30px;
    color: #c69353;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
}
.popup-title {
    text-align: center;
    font-size: 21px;
    font-weight: 800;
    color: #1b1c28;
    margin-bottom: 12px;
}
.popup-sub {
    text-align: center;
    font-size: 13px;
    color: #8a6d45;
    margin: -4px 0 18px;
}

/* ===== 이벤트1 룰렛 팝업 (Figma 디자인: 한지 카드 800×900) ===== */
.rpopup, .epopup {
    position: relative;
    width: min(800px, 92vw, 82vh * 8 / 9); /* 세로가 화면을 넘지 않고 상단 X 버튼 공간 확보 */
    container-type: inline-size; /* 텍스트 오버레이(cqw)가 카드 폭 기준으로 스케일 */
}
.rpopup-card, .epopup-card { width: 100%; height: auto; display: block; }

/* ===== 응모 팝업 텍스트 오버레이 (좌표: 카드 800×900 기준 %) =====
   폰트 크기는 cqw(카드 폭 1% 단위) — 디자인 px ÷ 8 = cqw */
.ep-t {
    position: absolute;
    z-index: 2;
    margin: 0;
    font-family: 'Paperlogy', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    font-weight: 400;
    color: #1b1c28;
    white-space: nowrap;
    letter-spacing: -0.01em;
    line-height: 1.2;
    pointer-events: none; /* 클릭은 아래의 인풋/핫스팟이 처리 */
}
.ep-t .red { color: #ce3f4f; }
.ep-t b { font-weight: 700; }
.t20 { font-size: 2.5cqw; }
.t22 { font-size: 2.75cqw; line-height: 1.27; }
.t24 { font-size: 3cqw; }
.t26 { font-size: 3.25cqw; line-height: 1.385; }
.t30 { font-size: 3.75cqw; }
.t32 { font-size: 4cqw; }
.t48 { font-size: 6cqw; line-height: 1.21; }
.teb { font-weight: 800; }
.tb  { font-weight: 700; }
.tsb { font-weight: 600; }
.tm  { font-weight: 500; }
.tw  { color: #fff; }
.tgold { color: #fece7a; }
.o70 { opacity: .7; }
.o60 { opacity: .6; }
.o50 { opacity: .5; }

/* 회전 휠 (616px 투명본, 디자인 원판 614.5px 규격) — 중심 = 카드 (400.5, 552.5) */
.rpopup-wheel {
    position: absolute;
    left: 11.66%;
    top: 27.25%;
    width: 76.8%;
    aspect-ratio: 1;
    border-radius: 50%;
    will-change: transform;
    z-index: 2;
}
/* 중앙 보름달 START (원본 대비 40% 축소 — 중심 유지) */
.rpopup-center {
    position: absolute;
    left: 36.11%;
    top: 48.99%;
    width: 27.9%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    transition: transform .15s;
}
/* 포인터 화살표 (휠 12시 고정, 회전하지 않음) */
.rpopup-arrow {
    position: absolute;
    left: 50.06%;
    top: 24%;
    width: 6.88%;
    transform: translateX(-50%);
    z-index: 4;
    pointer-events: none;
}

/* START 버튼 오버레이 (중앙 달 위) */
.rpopup-start {
    position: absolute;
    left: 50%;
    top: 24%;
    width: 33%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
    transition: opacity .2s;
}
@media (hover: hover) {
    .rpopup-center:hover { transform: scale(1.04); }
}
.rpopup-center-img { width: 100%; height: 100%; display: block; }
.rpopup-sprite {
    position: absolute;
    inset: 8%;
    width: 84%;
    height: 84%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1; /* START 말풍선(z2) 아래 */
}

/* STEP 02: 정답 레이어 — 카드 기준 (100,150) 600px */
.answer-layer {
    position: absolute;
    left: 12.5%;
    top: 16.67%;
    width: 75%;
    aspect-ratio: 1;
    z-index: 5;
    animation: popup-in .3s ease;
}
.answer-layer[hidden] { display: none; }
.answer-card { width: 100%; height: 100%; display: block; }
.answer-title {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 11.5%;
    text-align: center;
    font-family: 'Paperlogy', 'Malgun Gothic', sans-serif;
    font-weight: 800;
    font-size: clamp(17px, 3.3vmin, 34px);
    line-height: 1.25;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.answer-copy {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 59%;
    text-align: center;
    font-family: 'Paperlogy', 'Malgun Gothic', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 2.35vmin, 24px); /* 3줄도 버튼과 겹치지 않게 축소 */
    line-height: 1.26;
    color: #fff;
    letter-spacing: -0.01em;
}
.answer-copy b { font-weight: 700; }

/* 팝업 공통 닫기 (카드 위쪽 우측 상단 원형 X — 모바일에서 잘리지 않게) */
.popup-close-x {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-115%);
    width: 10%;
    max-width: 64px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #1b1c28;
    font-size: clamp(20px, 3.2vmin, 34px);
    line-height: 1;
    cursor: pointer;
    z-index: 6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    transition: transform .15s;
}
.popup-close-x:hover { transform: translateY(-115%) scale(1.08); }

/* ===== 이벤트1 응모 팝업 (STEP 03) ===== */
.ep-input {
    position: absolute;
    border: 1.5px solid #d9cbb6;
    border-radius: 999px;
    background: #fff;
    font-family: 'Paperlogy', 'Malgun Gothic', sans-serif;
    font-size: clamp(14px, 2.2vmin, 22px);
    color: #1b1c28;
    padding: 0 4.2%;
    outline: none;
    z-index: 3;
}
.ep-input:focus { border-color: #ce3f4f; }
.ep-input::placeholder { color: rgba(27, 28, 40, .45); }

.ep-consent {
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 3;
}
.ep-consent input { position: absolute; opacity: 0; pointer-events: none; }
.ep-chk {
    position: absolute;
    left: 0;
    top: 62%;
    transform: translateY(-50%);
    height: 55%;               /* 디자인 서클 25px 규격 */
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid #1b1c28;
    background: #fdf6ea;
    transition: background .15s;
}
.ep-consent input:checked + .ep-chk {
    background: #1b1c28;
}
.ep-consent input:checked + .ep-chk::after {
    content: '';
    position: absolute;
    left: 26%;
    top: 22%;
    width: 42%;
    height: 26%;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}

/* ===== 이벤트2 진행 팝업 (황금 보름달 N개 찾음) ===== */
.mp-title {
    position: absolute;
    left: 9.9%;
    top: 12%;
    font-family: 'Paperlogy', 'Malgun Gothic', sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 4.6vmin, 48px);
    line-height: 1.21;
    color: #1b1c28;
    letter-spacing: -0.01em;
    white-space: nowrap;
    z-index: 3;
}
.mp-title .red { color: #ce3f4f; }
.mp-sub {
    position: absolute;
    left: 9.9%;
    top: 27%;
    font-family: 'Paperlogy', 'Malgun Gothic', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 3.4vmin, 36px);
    color: #1b1c28;
    letter-spacing: -0.01em;
    white-space: nowrap;
    z-index: 3;
}
.mp-sub b { font-weight: 800; }

.mp-moon {
    position: absolute;
    top: 53.6%;
    transform: translate(-50%, -50%);
    width: 25%;               /* 회색 달 (200/800) */
    z-index: 3;
}
.mp-moon.on { width: 34.25%; } /* 골드 달 (274/800, 글로우 포함) */

.mp-label {
    position: absolute;
    top: 65.5%;
    transform: translateX(-50%);
    text-align: center;
    font-family: 'Paperlogy', 'Malgun Gothic', sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 2.5vmin, 26px);
    line-height: 1.35;
    color: #fff;
    z-index: 3;
    white-space: nowrap;
}
.mp-label b { display: block; font-size: 1.54em; font-weight: 700; }
.mp-label.on { color: #fed881; }

/* ===== 이벤트2 결과 팝업 (당첨/꽝) ===== */
.ev2-prize-title {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 65.4%;
    text-align: center;
    font-family: 'Paperlogy', 'Malgun Gothic', sans-serif;
    font-weight: 800;
    font-size: clamp(19px, 3.9vmin, 40px);
    color: #1b1c28;
    letter-spacing: -0.01em;
    white-space: nowrap;
    z-index: 3;
}
.ev2-prize-title .hl { color: #ce3f4f; }
.ev2-result-info {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 73.4%;
    text-align: center;
    font-family: 'Paperlogy', 'Malgun Gothic', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 2.5vmin, 26px);
    line-height: 1.42;
    color: #1b1c28;
    letter-spacing: -0.01em;
    z-index: 3;
}
.ev2-result-info b { font-weight: 700; }

.epopup .consent-detail {
    position: absolute;
    left: 6.25%;
    bottom: 31%;
    width: 87.5%;
    z-index: 7;
    background: #fff;
    border: 2px solid #d9cbb6;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    font-size: clamp(11px, 1.7vmin, 16px);
}

/* ===== 폼 ===== */
.form-field { margin-bottom: 14px; }
.form-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1b1c28;
    margin-bottom: 5px;
}
.form-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #d9c7a8;
    border-radius: 10px;
    font-size: 15px;
    background: #fff;
    outline: none;
}
.form-field input:focus { border-color: #ce3f4f; }
.form-consent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 6px;
    font-size: 13px;
    color: #1b1c28;
}
.form-consent label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.consent-detail-btn {
    background: none;
    border: none;
    font-size: 12px;
    color: #8a6d45;
    text-decoration: underline;
    cursor: pointer;
}
.consent-detail {
    font-size: 12px;
    color: #8a6d45;
    background: #f5e9d2;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.btn-primary {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 14px;
    background: #ce3f4f;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s;
}
.btn-primary:hover { background: #b23343; }
.btn-primary:disabled { background: #d9c7a8; cursor: not-allowed; }

/* ===== 결과 팝업 ===== */
.result-box { text-align: center; }
.result-segment {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #8a6d45;
    background: #f5e9d2;
    border-radius: 20px;
    padding: 5px 16px;
    margin-bottom: 16px;
}
.result-segment::before { content: '🌕 하누랑의 한우 이야기: '; }
.result-congrats {
    font-size: 24px;
    font-weight: 900;
    color: #ce3f4f;
    margin-bottom: 8px;
}
.result-prize-name {
    font-size: 19px;
    font-weight: 800;
    color: #1b1c28;
    margin-bottom: 10px;
}
.result-info { font-size: 13px; color: #6d5a3e; }

/* ===== 토스트 ===== */
.toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.toast {
    background: #ffd873;          /* 보름달 노란색 */
    border: 2px solid #edbc7f;
    color: #1b1c28;               /* 검정 텍스트 */
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
    padding: 18px 32px;
    border-radius: 20px;
    max-width: min(680px, 90vw);
    text-align: center;
    white-space: normal;      /* 긴 안내문 줄바꿈 허용 */
    word-break: keep-all;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: translateY(-8px);
    transition: all .3s;
}
.toast.show { opacity: 1; transform: none; }

/* ===== 모바일 전용 레이아웃 (≤767px) — Figma 모바일 시안(750px) 적용 =====
   섹션 배경은 <picture>로 모바일 이미지 자동 교체.
   PC용 이미지 버튼(.img-btn 앵커)·투명핫스팟(.hs)은 숨기고, 배경에 그려진 버튼 위로
   모바일 좌표의 투명 핫스팟(.mhs)을 노출. JS 버튼(룰렛열기·보름달찾기)은 재배치. */
@media (max-width: 767px) {
    /* PC 오버레이 숨김 */
    .sec > a.img-btn,
    .sec > .hs { display: none !important; }
    .ev2-moon-img, .ev2-cloud { display: none !important; } /* 달/구름은 모바일 배경에 포함 */

    /* 모바일 핫스팟 노출 */
    .mhs { display: block; }
    .m-parts { display: block; }

    /* PC 하누랑 버튼 숨기고, 모바일 전용 애니메이션 하누랑 표시 (배경에서 하누랑 제거됨) */
    #rouletteOpenBtn { display: none !important; }
    .m-hanurang { display: block; }

    /* 황금 보름달 찾으러 가기 버튼 재배치 */
    #moonHuntBtn {
        left: 16% !important;
        top: 73.8% !important;
        width: 74.7% !important;
        height: 8.3% !important;
    }
    #moonHuntBtn img { display: none !important; }

    /* 숨은 보름달 모바일 크기 (기존 대비 약 3배) — 위치는 js/moon.js에서 랜덤 배치 */
    .hidden-moon { width: 39%; min-width: 180px; }
}

/* ===== 모바일 반응형 (팝업/배지/토스트 뷰포트 재조정) ===== */
@media (max-width: 768px) {
    .hidden-moon { min-width: 24px; }

    .popup-overlay { padding: 14px; }
    .popup-box { max-width: 92vw; padding: 26px 18px 20px; border-width: 2px; }
    .popup-title { font-size: 18px; }
    .popup-sub { font-size: 12px; }
    .roulette-box { max-width: 94vw; }
    .roulette-area { width: min(320px, 76vw); }
    .roulette-box .popup-title { font-size: 20px; }

    .form-field input { font-size: 16px; padding: 11px 12px; } /* iOS 자동 확대 방지(16px 이상) */
    .btn-primary { font-size: 15px; padding: 13px; }
    .result-congrats { font-size: 21px; }
    .result-prize-name { font-size: 17px; }

    .toast { font-size: 15px; padding: 14px 20px; white-space: normal; max-width: 88vw; text-align: center; }
}

/* 좁은 화면에서 터치 실수 방지: 이미지 버튼 최소 터치 높이 확보용 여백 */
@media (max-width: 480px) {
    .img-btn { min-width: 44px; }
}