/* ====== 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;
}
/* 고정 헤더 높이만큼 앵커 점프 시 섹션이 가리지 않도록 */
html{scroll-padding-top:64px;}
.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 img{height:18px;width:auto;opacity:.9;transition:opacity .2s,transform .2s;}
.main-nav a:hover img{opacity:1;transform:translateY(-1px);}
.steam-cta img{height:40px;width:auto;transition:transform .2s,filter .2s;}
.steam-cta:hover img{transform:none;}

/* ---------- 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;}
.hero-text{width:min(520px,90%);aspect-ratio:1227/660;height:auto;
    object-fit:cover;object-position:top;margin-bottom:14px;
    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{display:flex;align-items:flex-start;gap:12px;max-width:540px;cursor:pointer;}
.consent input{position:absolute;opacity:0;width:0;height:0;}
.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');}
/* 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 ---------- */
/* sticky 헤더에 가려지지 않도록 앵커 착지 위치 보정 */
.section{padding:6px 0;scroll-margin-top:80px;}
/* 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;
}
.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);}

/* ---------- 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: 80px;
}
/* 위(갤러리 섹션과 블렌딩)·아래(약관/로고 가독성)만 살짝 어둡게 → 가운데 강·등불은 그대로 노출 */
.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);}
.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);}

/* ---------- 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::-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;}
.cookieAgrBtnNur,.cookieAgrAlles{
    cursor:pointer;border-radius:8px;padding:11px 20px;
    font-size:13px;white-space:nowrap;transition:transform .15s,filter .15s;
}
.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줄 중앙정렬 */
    .site-header{position:static;}
    .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;}                /* 헤더 스팀버튼은 히어로에 이미 있어 모바일선 숨김 */
    .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;}
}