/* ====== WonderKing GER Pre-Order – Landing (메인 페이지) ====== */
/* design/landing-prototype 시안을 JSP에 이식. 에셋 경로는 /img/landing/ 으로 서빙. */
:root{
    --navy:#08111a;
    --navy-2:#0b1626;
    --gold:#e8b94a;
    --gold-line:rgba(232,185,74,.55);
    --text-soft:#cdd6e4;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    background:var(--navy);
    color:#fff;
    overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
.container{width:100%;max-width:1040px;margin:0 auto;padding:0 24px;}

/* SEO/스크린리더 전용 (화면에는 숨김) */
.seo-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- HEADER ---------- */
/* 헤더를 flow에서 빼서(hero가 화면 최상단까지 올라옴) 배너 이미지 상단의 navy 마진 밴드(0~177px) 위에 겹치게 함
   → '헤더 + 이미지 navy밴드'가 이중으로 쌓이던 여백 제거 */
.site-header{
    position:fixed;top:0;left:0;right:0;z-index:50;
    /* 고정(스크롤 따라옴) + 오버레이(아트가 image 177부터 시작). 배경은 솔리드 유지(투명 X) —
       이미지의 navy 헤더밴드 색과 맞춰 이음매 없이 단단한 바 형태 */
    background:rgba(6,12,20,.94);
    backdrop-filter:blur(6px);
    border-bottom:none;
}
/* 고정 헤더가 덮는 만큼 앵커 착지 위치를 내린다(헤더 62px + 여백 10px).
   JS 없이 해시로 바로 들어온 경우의 기본값이고, 메뉴 클릭은 landing.js 가 실제 헤더 높이로 정확히 맞춘다.
   모바일(<=700px)은 헤더가 흐름 배치라 덮지 않으므로 0 (아래 미디어쿼리) — '헤더가 가리는 만큼만 비운다'는 원칙은 동일 */
html{scroll-padding-top:72px;}
.header-inner{
    max-width:1040px;margin:0 auto;padding:10px 24px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo img{height:42px;width:auto;}
.main-nav{display:flex;align-items:center;gap:40px;}
.main-nav a{position:relative;display:block;}
.main-nav a img{height:18px;width:auto;opacity:.9;transition:opacity .2s,transform .2s,filter .2s;}
.main-nav a:hover img{opacity:1;transform:translateY(-1px);}
/* 현재 화면에 보이는 섹션 표시. 메뉴가 이미지라 '활성' 시안이 따로 없으므로 밑줄 + 발광으로 대신한다.
   밑줄은 음수 offset 으로 띄워 활성/비활성 전환 시 헤더 높이가 변하지 않게 한다 */
.main-nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;
    background:var(--gold);opacity:0;transform:scaleX(.3);
    transition:opacity .2s,transform .2s;
}
.main-nav a.is-active::after{opacity:1;transform:none;}
.main-nav a.is-active img{opacity:1;filter:drop-shadow(0 0 6px rgba(232,185,74,.5));}
.steam-cta img{height:40px;width:auto;transition:transform .2s,filter .2s;}
.steam-cta:hover img{transform:none;}

/* ---------- 리전(언어) 전환 ---------- */
.header-right{display:flex;align-items:center;gap:12px;}
.lang-switch{position:relative;}
/* 스팀 버튼(img height:40px)과 세로 높이를 맞춘 1:1 정사각형. 시안이 이미
   모서리·배경까지 그려진 이미지라 버튼 자체는 배경 없이 이미지만 얹는다. */
.lang-btn{
    width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;
    display:block;
}
.lang-btn img{width:100%;height:100%;}
.lang-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:8px;}
.lang-menu{
    display:none;
    /* 지구본이 스팀 버튼 왼쪽에 있으므로 버튼 왼쪽 모서리에 맞춰 오른쪽으로 펼친다
       (모바일은 지구본이 화면 우측 끝이라 아래 미디어쿼리에서 오른쪽 정렬로 뒤집는다) */
    position:absolute;top:calc(100% + 8px);left:0;z-index:60;
    margin:0;padding:6px;list-style:none;min-width:176px;
    /* 배경은 전달받은 시안(BACK GROUND.png) 색. 단색 한 가지뿐이라 이미지 대신 색으로 넣는다 */
    background:#040c17;border:1px solid var(--gold-line);border-radius:10px;
    box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.lang-switch.is-open .lang-menu{display:block;}
.lang-menu a,.lang-menu .is-current{
    display:flex;align-items:center;gap:10px;padding:7px 12px 7px 8px;border-radius:7px;
    text-decoration:none;white-space:nowrap;
}
/* 시안의 '미설정'(흰 글씨) = 평상시, '설정'(검은 글씨) = 노란 바탕 위.
   현재 보고 있는 리전은 항상 '설정', 나머지는 마우스를 올렸을 때 '설정'이 된다. */
.lang-menu a:hover,.lang-menu a:focus-visible,.lang-menu .is-current{background:var(--gold);}
.lang-menu .is-current{cursor:default;}
/* 줄끼리 붙어 있어 강조 바탕이 맞닿는다. 사이에만 살짝 띄운다
   (목록 위아래 여백은 .lang-menu 의 padding 이 이미 담당) */
.lang-menu li + li{margin-top:5px;}
.lang-flag{flex:0 0 auto;width:22px;height:22px;}
.lang-label,.lang-label-on{height:13px;width:auto;}
.lang-label-on{display:none;}
.lang-menu a:hover .lang-label,.lang-menu a:focus-visible .lang-label,
.lang-menu .is-current .lang-label{display:none;}
.lang-menu a:hover .lang-label-on,.lang-menu a:focus-visible .lang-label-on,
.lang-menu .is-current .lang-label-on{display:block;}

/* 목록에 커서가 있는 동안에는 강조가 커서를 따라간다.
   (현재 리전 고정 강조를 끄지 않으면 노란 줄이 두 개가 된다) */
.lang-menu:hover .is-current{background:none;}
.lang-menu:hover .is-current .lang-label{display:block;}
.lang-menu:hover .is-current .lang-label-on{display:none;}
/* 현재 리전 줄 자체에 올렸을 때는 그대로 강조 */
.lang-menu:hover .is-current:hover{background:var(--gold);}
.lang-menu:hover .is-current:hover .lang-label{display:none;}
.lang-menu:hover .is-current:hover .lang-label-on{display:block;}

/* ---------- HERO ---------- */
.hero{
    position:relative;
    /* 좌우 마진 + 중앙 컬럼 폭으로 제한 → 가운데로 모아 컴팩트하게 */
    width:calc(100% - 48px);
    max-width:1040px;
    margin:0 auto;
    /* 하단 navy 여백밴드(원본 y=1653~1779)는 cover로 잘라내고 장면만 노출 */
    /* aspect-ratio는 콘텐츠가 커져도 박스를 안 늘리고(min-height까지 무시) 좁은 폭에서 글이 hero 밖으로 흘러 #rewards와 겹쳤다.
       → 같은 비율 높이를 폭에 비례한 min-height(1040 기준 562px 상한)로 줘서, 넓은 폭 이미지 크롭은 유지하되 콘텐츠가 더 크면 박스가 정상적으로 늘어나게 함 */
    min-height:min(calc((100vw - 48px) * 1653 / 3059), 562px);
    /* 가장자리를 배경색(navy)으로 점점 페이드 → 뚝 잘리지 않고 자연스럽게 배경에 녹아듦
       (좌: 텍스트 가독 겸 페이드 / 우·하: 가장자리 페이드) */
    background:
        linear-gradient(90deg, var(--navy) 0%, rgba(8,17,26,.5) 18%, rgba(8,17,26,0) 48%),
        linear-gradient(270deg, var(--navy) 0%, rgba(8,17,26,0) 12%),
        linear-gradient(to top, var(--navy) 0%, rgba(8,17,26,0) 12%),
        url('/img/landing/hero_banner-18dde65a7b47e4bce64ec3585c7f119b.webp') center top/cover no-repeat,
        var(--navy);
    /* 고정 헤더가 상단을 덮으므로 상단 패딩으로 헤더 높이를 비워 제목 잘림 방지(콘텐츠는 항상 패딩 아래에서 시작).
       박스가 콘텐츠보다 크면 가운데 정렬 유지(넓은 폭), 작아지면 박스가 늘어나 #rewards와 안 겹침 */
    display:flex;align-items:center;
    padding:84px 0 28px;
}
/* hero::after(별도 navy 페이드) 제거 — 이미지 자체의 하단 마진밴드(image y=1653~1779, navy)가 페이드 역할을 하므로
   이중 마진/슬라임 과다 어두움 방지. 대신 다음 섹션(#rewards)을 1653 라인까지 끌어올려 정렬(아래 #rewards 규칙). */
/* 히어로 내부는 .container 규칙(max-width:1200, 좌우 24px)을 그대로 사용 → 다른 섹션과 동일 폭 */
.hero-inner{position:relative;z-index:2;}
.hero-copy{max-width:560px;}
/* aspect-ratio + 확정 폭 → 이미지가 로드되기 전에도 같은 크기를 차지한다(STARTSEITE 착지 위치 고정) */
.hero-text{width:min(520px,90%);aspect-ratio:1227/660;height:auto;
    object-fit:cover;object-position:top;margin-bottom:14px;
    scroll-margin-top:72px;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.6));}
.hero-actions{display:flex;gap:16px;align-items:center;margin-bottom:22px;flex-wrap:wrap;}
.img-btn{background:none;border:none;padding:0;cursor:pointer;}
.img-btn img{height:54px;width:auto;transition:transform .15s,filter .15s;}
/* 히어로 디스코드/스팀 버튼: 원본 비율이 3% 달라 크기가 어긋나므로 동일 박스로 통일 */
.hero-actions .img-btn img{width:146px;height:54px;}
/* 이미지 버튼(디스코드/스팀/등록): 커서 올렸을 때 위로 올라가는 효과 없음 — 누름 상태 이미지로만 표현 */
.img-btn:hover img{transform:none;}

/* email form */
.reg-form{display:flex;gap:12px;align-items:stretch;max-width:520px;margin-bottom:16px;flex-wrap:wrap;}
.reg-form input[type=email]{
    flex:1 1 240px;min-width:0;
    height:56px;padding:0 20px;
    border:none;border-radius:10px;
    background:#f4f5f7;color:#2a2f3a;
    font-size:16px;font-family:inherit;
    box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.reg-form input[type=email]::placeholder{color:#8a90a0;}
.reg-form input[type=email]:focus{outline:2px solid var(--gold);}
.reg-btn{background:none;border:none;padding:0;cursor:pointer;}
.reg-btn img{height:56px;}

/* consent (Checkbox links vom Text, oben ausgerichtet) */
.consent{position:relative;display:flex;align-items:flex-start;gap:12px;max-width:540px;cursor:pointer;}
/* 체크는 커스텀 이미지(.cb-box)로 그리지만 실물 input 은 그 위에 같은 크기로 겹쳐 둔다.
   0x0 으로 숨기면 브라우저가 "focusable 하지 않다"며 required 검증 말풍선을 띄우지 못한 채
   제출만 조용히 막는다 — JS 가 죽었을 때 남는 유일한 안내 수단이라 살려둬야 한다. */
.consent input{position:absolute;left:0;top:2px;width:30px;height:30px;margin:0;opacity:0;cursor:pointer;}
/* 이미지로 그린 체크박스에도 키보드 포커스 링을 준다(.consent-legal 과 동일 규칙) */
.consent input:focus-visible ~ .cb-box{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;}
.consent-text{flex:1;font-size:12.5px;line-height:1.5;color:var(--text-soft);}
.cb-box{
    flex:0 0 auto;order:-1;width:30px;height:30px;margin-top:2px;
    background:url('/img/landing/checkbox-902bac75aa498a21d07fb7e671178850.webp') center/contain no-repeat;
    transition:transform .12s;
}
.consent:hover .cb-box{transform:scale(1.05);}
.consent input:checked ~ .cb-box{background-image:url('/img/landing/checkbox_on-3418e6d7ad7d340e37d7c021a700dd5f.webp');}
/* 동의 문구 끝에 붙는 약관 링크. 문장 흐름에 이어지도록 inline 으로 두고,
   폰트는 동의 문구(12.5px)를 그대로 상속받아 크기가 튀지 않게 한다 */
.consent-legal{
    display:inline;background:none;border:0;padding:0;margin-left:4px;
    font:inherit;color:var(--gold);cursor:pointer;
    text-decoration:underline;text-underline-offset:2px;
}
.consent-legal:hover{filter:brightness(1.15);}
.consent-legal:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px;}
/* Fehler-Hinweis am Formular */
.form-msg{max-width:520px;margin:-4px 0 12px;font-size:13px;min-height:18px;color:#ff8e8e;}
/* Hinweis: Checkbox aktivieren (während E-Mail-Eingabe, wenn nicht angehakt) */
/* display 토글 대신 항상 자리를 차지하게 두고 visibility/opacity만 전환 → 체크 on/off 시 위 요소가 밀려 올라갔다 내려오는 레이아웃 점프 제거 */
.consent-hint{visibility:hidden;opacity:0;max-width:540px;margin-top:8px;font-size:12px;line-height:1.45;color:var(--gold);transition:opacity .15s;}
.consent-hint.show{visibility:visible;opacity:1;}

/* ---------- SECTION HEAD ---------- */
/* 고정 헤더에 가려지지 않도록 앵커 착지 위치 보정 (html scroll-padding-top 과 같은 값) */
.section{padding:6px 0;scroll-margin-top:72px;}
/* hero에서 하단 밴드를 이미 잘라냈으므로 끌어올림 불필요 → 일반 간격 사용 */
#rewards{position:relative;}
.section-head{
    display:flex;align-items:center;justify-content:center;gap:22px;
    max-width:950px;margin:0 auto 22px;padding:0 24px;
    /* 제목/장식 이미지가 로드되기 전에도 같은 높이를 차지하게 미리 확보한다.
       (제목 이미지는 width/height 가 모두 auto 라 로딩 전엔 높이 0 으로 접혔고,
        그만큼 아래 섹션 위치가 밀려 메뉴 이동 위치가 로딩 전후로 달라졌다)
       값은 .section-title 의 max-height 와 일치시킬 것 */
    min-height:30px;
    /* 메뉴가 실제로 착지하는 지점 = 섹션 제목 줄 */
    scroll-margin-top:72px;
}
.section-head .deco{flex:0 1 200px;min-width:0;height:auto;opacity:.95;}
.section-head .deco:first-child{margin-top:0;}
.section-title{flex:0 0 auto;height:auto;max-height:30px;width:auto;max-width:100%;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));}
.section-sub{margin:-10px auto 16px;max-width:900px;padding:0 24px;text-align:center;
    color:var(--text-soft);opacity:.78;font-size:clamp(13px,1.1vw,15px);line-height:1.4;}

/* ---------- CARD ROWS ---------- */
/* 4열 고정 그리드(기본). flex-wrap의 3-1/불규칙 배치 대신 항상 정해진 열 수 → 좁아지면 2열(아래 미디어쿼리) */
.card-row{display:grid;grid-template-columns:repeat(4,minmax(0,262px));gap:18px;align-items:start;justify-content:center;}
.card-row img{width:100%;height:auto;transition:transform .2s,filter .2s;cursor:pointer;}
.card-row img:hover{transform:translateY(-6px);filter:brightness(1.06);}

/* ---------- GALLERY ---------- */
.gallery{
    display:flex;gap:18px;flex-wrap:nowrap;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    padding-top:4px;padding-bottom:10px;
    scrollbar-width:none;-ms-overflow-style:none;
    cursor:grab;
}
.gallery.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;}
.gallery::-webkit-scrollbar{display:none;}
.frame{position:relative;flex:0 0 300px;aspect-ratio:779/531;scroll-snap-align:start;}
.gallery img{-webkit-user-drag:none;user-select:none;}
.frame .shot{position:absolute;inset:5.5% 4.5%;width:91%;height:89%;
    object-fit:cover;border-radius:6px;}
.frame .frame-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.dots{display:flex;gap:10px;justify-content:center;margin-top:16px;}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(232,185,74,.3);transition:background .2s;cursor:pointer;}
.dot.active{background:var(--gold);}

/* 메뉴 착지용 스크롤 여유(높이는 landing.js 가 필요한 만큼만 지정). JS 미동작 시 0 이라 아무 영향 없음 */
.nav-scroll-slack{height:0;pointer-events:none;}

/* ---------- FOOTER ---------- */
.site-footer {
    position: relative;
    margin-top: 8px;

    /* 콘텐츠 폭(=뷰포트−스크롤바)에 정확히 맞춰 좌우 끝까지. dvw/vw의 스크롤바 오차 제거 */
    width: 100%;

    /* 풍경 원본 비율(3059:675)에 박스를 맞춰 강·등불까지 전체 이미지가 잘리지 않고 노출 */
    aspect-ratio: 3059 / 440;
    min-height: 220px;
    background: url('/img/landing/footer_scenery-6b8ae67e34e1c41bc42e5db9e400dd94.webp') center/cover no-repeat, var(--navy);

    display: flex;
    flex-direction: column;       /* 하단 정렬을 위해 축 변경 */
    justify-content: flex-end;
    align-items: center;
    scroll-margin-top: 72px;
}
/* 위(갤러리 섹션과 블렌딩)·아래(약관/로고 가독성)만 살짝 어둡게 → 가운데 강·등불은 그대로 노출 */
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(8,17,26,0.85) 0%, rgba(8,17,26,0) 20%,
        rgba(8,17,26,0) 56%, rgba(8,17,26,0.72) 100%);
    z-index: 1;
}
.footer-inner {
    position: relative;
    z-index: 2;
    width: 100%;                  /* 부모의 100%를 다 쓰도록 선언 */
    max-width: 100%;              /* 혹시 모를 최대폭 제한 해제 */
    padding: 40px 24px 28px;      /* 상하좌우 여백을 주어 답답함 해소 */

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
/* 푸터 하단 바: 배경 이미지 + 로고 + 실제 텍스트(모바일 가독성 확보) */
.footer-bar{
    position:relative;z-index:2;width:100%;
    background:url('/img/landing/footer_bar-e8491d07ac7d791b9f119f8b2b3afbac.webp') center/cover no-repeat, var(--navy);
    padding:18px 40px 16px;
    display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
}
.footer-bar-main{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 28px;}
.footer-logo{height:30px;width:auto;flex:none;opacity:.9;}
.footer-company{color:var(--text-soft);opacity:.85;text-align:left;line-height:1.55;}
.footer-company p{margin:0;font-size:clamp(11px,.8vw,12px);}
.footer-copy{margin:0;color:var(--text-soft);opacity:.55;font-size:clamp(11px,.85vw,13px);}
.footer-cookie-link{margin:0;padding:0;background:none;border:0;cursor:pointer;color:var(--text-soft);opacity:.55;font-family:inherit;font-size:clamp(11px,.85vw,13px);text-decoration:underline;}
.footer-cookie-link:hover{opacity:.9;}
.copyright{font-size:12px;color:var(--text-soft);opacity:.8;}
.footer-legal{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center;}
.footer-legal .clauseBtn{
    background:none;border:none;cursor:pointer;font:inherit;
    font-size:clamp(18px,2.3vw,26px);color:var(--text-soft);opacity:.85;
    text-decoration:underline;text-underline-offset:4px;transition:color .2s,opacity .2s;
}
.footer-legal .clauseBtn:hover{color:var(--gold);opacity:1;}

/* ---------- MODALS (Bild-Modals) ---------- */
.modal-backdrop{
    position:fixed;inset:0;z-index:100;display:none;
    align-items:center;justify-content:center;padding:24px;
    background:rgba(3,6,12,.78);backdrop-filter:blur(3px);
}
.modal-backdrop.open{display:flex;animation:fade .2s ease;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{position:relative;animation:pop .25s ease;}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
#noticeModal .modal-img{width:min(460px,92vw);height:auto;}
#popupModal .modal-img{width:min(560px,92vw);height:auto;}
/* 팝업 이미지에 그려진 FERTIG 버튼 위 투명 클릭 영역. 실제 버튼(가로29~68.5%·세로82.6~92.8%)을
   여유있게 덮어 가장자리 클릭도 적중하도록 설정 (가로26~72%, 세로80~95%) */
.popup-done{position:absolute;left:26%;top:80%;width:46%;height:15%;background:none;border:none;padding:0;cursor:pointer;border-radius:8px;}
.popup-done:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.modal-close{position:absolute;top:-14px;right:-14px;background:none;border:none;cursor:pointer;}
.modal-close img{width:44px;height:44px;transition:transform .15s;}
.modal-close:hover img{transform:scale(1.1);}

/* ---------- QUEST-POPUPS (Vorregistrierungs-Mission, 33 % → 66 % → 100 %) ---------- */
/* .modal-figure = 팝업 이미지 전용 좌표 기준. 퀘스트 팝업은 .modal 안에 게이지·CTA·건너뛰기가
   함께 쌓이므로, X 버튼이 .modal 상단(=게이지)이 아니라 이미지 우상단에 붙도록 이미지만 감싼다. */
.modal-figure{position:relative;display:block;width:100%;}
.modal.quest{display:flex;flex-direction:column;align-items:center;gap:14px;}
.modal.quest .modal-img{display:block;width:100%;height:auto;}
/* 신규 퀘스트 팝업은 1486×1486 정사각이라 가로뿐 아니라 세로도 제한해야 노트북에서 넘치지 않는다 */
.quest-modal .modal.quest{width:min(560px,92vw,68vh);}

/* 게이지: 트랙(785×42) 위에 채움(772×25)을 겹치고 채움의 폭만 --p(0~1)로 늘린다.
   채움 img 는 height:100% + width:auto 이므로 고유비율에 따라 폭이 트랙의 98.34%로 맞아떨어진다. */
.quest-gauge{position:relative;width:52.83%;line-height:0;}
.quest-gauge-track{display:block;width:100%;height:auto;}
.quest-gauge-fill{
    position:absolute;left:.83%;top:50%;transform:translateY(-50%);
    height:59.52%;width:calc(var(--p,0) * 98.34%);overflow:hidden;
    transition:width .9s cubic-bezier(.34,.82,.28,1);   /* landing.js GAUGE_MS 와 일치시킬 것 */
}
.quest-gauge-fill img{display:block;height:100%;width:auto;max-width:none;}
@media(prefers-reduced-motion:reduce){.quest-gauge-fill{transition-duration:.01s;}}

/* CTA: 버튼도 별도 이미지로 와서 본체 대비 고유 폭 비율(788/1486, 762/1486)을 유지한다.
   normal/active/bright 3종 변형 이미지가 아직 없어 hover 는 CSS 필터로 대신한다. */
.quest-cta{display:block;width:53.03%;line-height:0;position:relative;z-index:2;transition:filter .15s,transform .15s;}
#questSteamModal .quest-cta{width:51.28%;}
/* CTA 를 팝업 프레임 안쪽 '하단 테두리 가까이' 붙인다.
   여백 중앙에 두면 바로 위 문구와 붙어 답답해지므로, 아래로 내려 위쪽 간격을 확보한다.
   본체가 정사각(1:1)이라 세로 위치를 모달 폭 기준 %로 주면 크기와 무관하게 유지된다.
   버튼 하단을 프레임 아래 테두리에서 살짝 띄운다 (약 97.5% 지점) */
#questDiscordModal .quest-cta{margin-top:calc(-11.4% - 14px);}
#questSteamModal .quest-cta{margin-top:calc(-10.9% - 14px);}
.quest-cta img{display:block;width:100%;height:auto;}
.quest-cta:hover{filter:brightness(1.12);}
.quest-cta:active{filter:brightness(.88);transform:translateY(1px);}
.quest-cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px;}
/* 퀘스트 팝업 간 전환(.switching): 배경 오버레이는 그대로 두고 내용물만 갈아끼운다.
   배경 fade 를 재실행하면 오버레이가 투명해졌다 돌아오며 화면 전체가 깜빡이기 때문. */
.modal-backdrop.open.switching{animation:none;}
.modal-backdrop.open.switching .modal{animation:questSwap .3s ease;}
@keyframes questSwap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.modal-backdrop.open.switching .modal{animation-duration:.01s;}}

/* ---------- RECHTLICHE HINWEISE (Impressum/Datenschutz/Teilnahme) ---------- */
.clausePopArt{
    position:fixed;inset:0;z-index:120;display:none;
    align-items:center;justify-content:center;padding:24px;
    background:rgba(3,6,12,.82);backdrop-filter:blur(3px);
}
.clausePopBox{
    width:min(720px,94vw);max-height:86vh;
    background:var(--navy-2);
    border:1px solid var(--gold-line);
    border-radius:14px;
    box-shadow:0 18px 50px rgba(0,0,0,.6);
    overflow:hidden;display:flex;flex-direction:column;
}
.clausePopInner{display:flex;flex-direction:column;min-height:0;}
.clausePopTop{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 18px;border-bottom:1px solid var(--gold-line);
}
.clausePopCate{display:flex;flex-wrap:wrap;gap:6px;list-style:none;}
.clausePopCate li{
    padding:7px 12px;border-radius:8px;cursor:pointer;
    font-size:13px;color:var(--text-soft);
    border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;
}
.clausePopCate li:hover{color:#fff;background:rgba(232,185,74,.12);}
.clausePopCate li.on{color:#1a1305;background:var(--gold);border-color:var(--gold);font-weight:600;}
.clauseClose{cursor:pointer;flex:0 0 auto;line-height:0;}
.clauseClose img{width:26px;height:26px;}
.clausePopContent{padding:6px 8px 8px;overflow:hidden;}
.clauseText{
    display:none;padding:14px 18px 20px;
    max-height:64vh;overflow-y:auto;line-height:1.6;color:var(--text-soft);font-size:13.5px;
}
.clauseText.clauseOn{display:block;}
.clauseText h3{color:var(--gold);font-size:14.5px;margin-bottom:4px;}
.clauseText p{margin:0;}
/* 약관 맨 끝의 시행일 문구 — 본문과 구분되게 살짝 흐리게 */
.clauseText p.clause-effective{color:var(--text-soft);opacity:.75;}
.clauseText::-webkit-scrollbar{width:8px;}
.clauseText::-webkit-scrollbar-thumb{background:var(--gold-line);border-radius:8px;}

/* ---------- COOKIE-EINWILLIGUNG ---------- */
.cookieAgreeDiv{
    position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
    padding:16px;
    background:rgba(7,12,20,.96);
    border-top:1px solid var(--gold-line);
    backdrop-filter:blur(6px);
}
.cookieAgreeBox{
    max-width:1100px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:nowrap;
}
.cookieAgreeText{flex:1 1 320px;min-width:0;}
.cookieAgrTit{font-size:15px;font-weight:700;color:var(--gold);margin-bottom:4px;}
.cookieAgrTxt{font-size:12.5px;line-height:1.5;color:var(--text-soft);}
.cookieAgreeBtns{display:flex;gap:12px;flex-wrap:nowrap;flex-shrink:0;}
/* div → button 으로 바뀌었다. 버튼은 폰트를 상속하지 않으므로(시스템 기본 폰트로 튄다)
   font-family/line-height 를 명시해 기존 모양을 그대로 유지한다. */
.cookieAgrBtnNur,.cookieAgrAlles{
    cursor:pointer;border-radius:8px;padding:11px 20px;
    font-family:inherit;line-height:normal;
    font-size:13px;white-space:nowrap;transition:transform .15s,filter .15s;
}
.cookieAgrBtnNur:focus-visible,.cookieAgrAlles:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.cookieAgrBtnNur{background:transparent;border:1px solid var(--gold-line);color:var(--text-soft);}
.cookieAgrBtnNur:hover{color:#fff;filter:brightness(1.1);}
.cookieAgrAlles{background:var(--gold);border:1px solid var(--gold);color:#1a1305;font-weight:700;}
.cookieAgrBtnNur:hover,.cookieAgrAlles:hover{transform:translateY(-1px);}

/* ---------- RESPONSIVE ---------- */
/* 700~1088px는 JS(zoom)로 데스크탑 구조 그대로 축소 → 재배치는 폰(<=700px)에서만 */
@media(max-width:700px){
    .section-head .deco{display:none;}
    /* 헤더를 흐름 배치로 → 배너가 헤더 아래 온전히 노출(가려짐 해소). 컴팩트 2줄 중앙정렬 */
    /* 흐름 배치는 그대로 두되(relative 는 오프셋이 없으면 static 과 배치가 같다)
       z-index 를 줄 수 있게 한다. 헤더는 backdrop-filter 로 이미 쌓임 맥락을
       만들므로, static 이면 뒤에 오는 히어로가 위로 올라와 지구본 드롭다운을 덮는다. */
    .site-header{position:relative;z-index:60;}
    /* 헤더가 고정이 아니라 콘텐츠를 덮지 않으므로 비워둘 여백도 없다.
       데스크톱과 같은 원칙(= 헤더가 가리는 높이만큼만 내린다)의 모바일 적용값 */
    html{scroll-padding-top:0;}
    .section,.section-head,.hero-text,.site-footer{scroll-margin-top:0;}
    .header-inner{flex-direction:column;align-items:center;gap:8px;padding:12px 16px 10px;}
    .main-nav{gap:18px;justify-content:center;}
    .steam-cta{display:none;}                /* 헤더 스팀버튼은 히어로에 이미 있어 모바일선 숨김 */
    /* 헤더가 2줄 중앙정렬로 바뀌어도 지구본은 '우측 상단' 자리를 지킨다.
       흐름에 두면 줄이 하나 더 생겨 헤더가 높아진다. */
    .header-inner{position:relative;}
    .header-right{position:absolute;top:10px;right:12px;gap:0;}
    /* 화면 우측 끝이라 왼쪽 정렬이면 드롭다운이 화면 밖으로 나간다 */
    .lang-menu{left:auto;right:0;}
    .hero{width:auto;max-width:none;margin:0;border-radius:0;box-shadow:none;border:none;aspect-ratio:auto;min-height:auto;display:block;text-align:center;padding:19vw 0 38px;background:linear-gradient(to bottom,rgba(8,17,26,0) 6%,rgba(8,17,26,.3) 24%,rgba(8,17,26,.55) 46%,rgba(8,17,26,.82) 74%,var(--navy) 98%) center top/100% 64vw no-repeat,url('/img/landing/hero_banner_mobile-9ab4d397d2f9662e84a12bf9387f3877.webp') center top/100% 64vw no-repeat,var(--navy);}
    .hero-copy{margin:0 auto;}
    .reg-form,.consent,.hero-actions{justify-content:center;margin-left:auto;margin-right:auto;}
    .card-row{grid-template-columns:repeat(2,minmax(0,262px));gap:14px;}
    #rewards{margin-top:0;}
    .frame{flex-basis:78vw;}
    /* 모바일: column 전환 시 텍스트의 flex-basis(320px)가 '높이'로 작용해 거대 여백 생기던 것 차단 */
    .cookieAgreeBox{flex-direction:column;align-items:stretch;gap:12px;justify-content:flex-start;}
    .cookieAgreeText{flex:0 0 auto;}
    .cookieAgreeBtns{justify-content:center;}
    .footer-bar{padding:16px 16px;gap:10px;}
    .footer-bar-main{flex-direction:column;gap:10px;}
    .footer-company{text-align:center;}
    .footer-logo{height:24px;}
    /* 팝업: 좁은 화면에선 배경 여백을 줄여 본체 폭을 최대한 확보한다.
       ※ 그래도 1486×1486 정사각 시안이 360px 폰에서 약 22%로 축소되어 인쇄된 본문이 작다.
          모바일 전용(세로형) 시안을 받으면 여기서 <picture>/src 교체로 대응할 것. */
    .modal-backdrop{padding:10px;}
    .quest-modal .modal.quest{width:min(560px,94vw,72vh);gap:10px;}
    /* 좁은 화면에서는 X 버튼의 음수 오프셋(-14px)이 뷰포트 밖으로 삐져나가 잘린다.
       (기존 안내/보상 팝업에도 있던 문제) 프레임 안쪽으로 넣어 해소한다 */
    .modal-close{top:2px;right:2px;}
    .modal-close img{width:38px;height:38px;}
}