/* September 30 PSD revision: three navigation items, mission locks and world events. */
.site-header nav{flex:0 1 740px;max-width:740px}
.mission-grid{align-items:start}
.mission-card{container-type:inline-size;display:block;min-height:0;padding:28px 25px 24px;border-color:#b8a575}
.mission-content{transition:filter .6s,opacity .6s}
.mission-card .step{left:50%;transform:translateX(-50%);min-width:108px;padding:5px 24px;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);text-align:center}
.mission-card h3{font-size:clamp(30px,12.8cqw,51px);line-height:1.3}
.mission-card .card-subtitle{font-size:clamp(12px,4cqw,16px);margin:5px 0 18px;line-height:1.6}
.mission-card .gold-button{min-height:0;height:86px;font-size:clamp(23px,9.3cqw,37px)}
.decorated-button:before,.decorated-button:after{content:'';width:18%;max-width:77px;height:12px;background:url('assets/button-ornament.webp?v=4e6b134f') center/contain no-repeat;opacity:.7;flex-shrink:1}
.decorated-button:before{transform:rotate(180deg)}
.decorated-button{gap:8px;padding-left:10px;padding-right:10px}
.mission-card.locked{border-color:#777}
.mission-card.locked .mission-content{filter:grayscale(1) brightness(.42)}
.mission-card.locked .step{background:#8c8c8c}
.mission-card.locked .gold-button{font-size:clamp(23px,9.3cqw,37px)}
.mission-lock{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;transition:opacity .65s}
.lock-chains{position:absolute;top:33%;left:-3%;width:106%;max-width:none;transition:transform .65s,opacity .5s}
.padlock{position:absolute;left:50%;top:34%;width:16%;height:auto;transform:translateX(-50%);filter:drop-shadow(0 10px 12px #000);transform-origin:50% 20%;transition:transform .65s,opacity .55s}
.mission-lock p{position:absolute;top:54%;left:7%;right:7%;font-size:clamp(17px,7cqw,28px);filter:drop-shadow(0 2px 8px #000)}
.mission-card.unlocking{animation:card-awaken 1s ease-out}
.mission-card.unlocking .mission-lock{opacity:0}
.mission-card.unlocking .lock-chains{transform:translateX(-20%) rotate(-8deg);opacity:0}
.mission-card.unlocking .padlock{transform:translate(-50%,50px) rotate(24deg);opacity:0}
.mission-complete{position:absolute;top:13px;right:14px;font-size:11px;color:#f7e6ac;padding:5px 7px;background:#131713e8;border:1px solid #9b8857}
.mission-complete[hidden]{display:none}
.mission-card.completed .gold-button{font-family:'Gmarket Sans',sans-serif;font-size:24px;opacity:1;background:#3c4333;border-color:#a69a6b;box-shadow:inset 0 0 12px #c5af7640}
.mission-status{margin:25px auto 0;text-align:center;min-height:20px;font-size:13px;line-height:1.6;color:#d3c29a}
@keyframes card-awaken{0%{box-shadow:0 0 0 #edce7800}35%{box-shadow:0 0 35px #edce7888}100%{box-shadow:0 12px 35px #0003}}
.world .section-heading{margin-bottom:54px}
.world-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:954px;margin:0 auto;align-items:start}
.world-event{position:relative;min-width:0}
.world-card{padding:34px 18px 34px;container-type:inline-size}
.world-card h3{font-size:clamp(31px,11.9cqw,51px);white-space:nowrap}
.world-card .card-subtitle{font-size:clamp(12px,3.74cqw,16px);margin:10px 0 35px;min-height:24px;line-height:1.6}
.world-preview{width:100%;height:auto;aspect-ratio:428/240;object-fit:cover}
.world-reward{position:absolute;top:115px;width:183px;text-align:center}
.nickname-event .world-reward{right:calc(100% + 27px)}
.guild-event .world-reward{left:calc(100% + 27px)}
.world-reward>img{width:100%;height:auto;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.world-reward:before{content:'';position:absolute;top:68px;border-top:10px solid transparent;border-bottom:10px solid transparent}
.nickname-event .world-reward:before{right:-22px;border-right:16px solid #c5af76}
.guild-event .world-reward:before{left:-22px;border-left:16px solid #c5af76}
.world-reward p{font-size:16px;line-height:1.3;margin:7px 0 0}
#download-game{max-width:454px;margin:60px auto 0;min-height:86px;font-size:37px}
.world-note{margin-top:12px;font-size:14px;line-height:1.4}
.world-note p+p{margin-top:3px}
.world-note .type-label{row-gap:.5em}
#mission-dialog{width:min(660px,calc(100% - 28px));padding:30px;max-height:90dvh}
#mission-dialog h2{font-family:'Gmarket Sans',sans-serif;font-size:25px;margin-bottom:20px;line-height:1.5}
.mission-modal-intro{font-size:14px;line-height:1.85;color:#c5c5b9}
.mission-modal-progress{font-size:12px;letter-spacing:.1em;color:#c5af76;margin:0 0 12px}
.mission-modal-button{font-family:'Gmarket Sans',sans-serif;font-size:17px;min-height:50px;margin-top:20px}
.quiz-question{border:0;padding:0;margin:0}
.quiz-question legend{font-size:19px;color:#f1e8cb;line-height:1.7;margin:10px 0 20px}
.quiz-option{position:relative;display:flex;align-items:center;gap:12px;padding:15px;border:1px solid #66614f;background:#0d0f10;margin-bottom:10px;font-size:14px;line-height:1.6;cursor:pointer}
.quiz-option:has(input:checked){border-color:#d3b66e;background:#4e422d60}
.quiz-option input{accent-color:#c5af76;flex-shrink:0}
.quiz-option input[type=radio]{width:18px;height:18px;padding:0;margin:0}
.mission-feedback{min-height:24px;margin:15px 0 0;font-size:13px;line-height:1.8;color:#e9cb86}
.mission-success{padding:15px 0 5px;text-align:center}
.mission-success-mark{display:block;font-size:46px;color:#dfc484;margin-bottom:15px}
.puzzle-board{position:relative;isolation:isolate;aspect-ratio:16/9;margin:28px 12px 18px;background:#030505;border:1px solid #7e7356}
.puzzle-piece{position:absolute;width:33.3334%;height:33.3334%;border:0;padding:0;background:transparent;z-index:1;touch-action:manipulation;opacity:1}
.puzzle-piece svg{position:absolute;left:-20%;top:-20%;width:140%;height:140%;max-width:none;overflow:visible;filter:drop-shadow(0 2px 2px #0008)}
.puzzle-piece .piece-outline{fill:none;stroke:#d8c08c;stroke-width:.012;pointer-events:none}
.puzzle-piece[aria-pressed=true]{z-index:5}
.puzzle-piece[aria-pressed=true] svg{filter:brightness(1.35) drop-shadow(0 0 6px #f8df92)}
.puzzle-piece:focus-visible{z-index:6;outline:3px solid #ffe5a0}
.puzzle-piece:disabled{cursor:default;opacity:1}
.puzzle-reference{margin:18px 0;font-size:12px;color:#c5af76}
.puzzle-reference summary{cursor:pointer;padding:5px 0;width:fit-content}
.puzzle-reference img{margin-top:10px;max-height:170px;border:1px solid #8c7b53}
.puzzle-helper{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:12px;line-height:1.7;color:#c2bdaa}

/* ---------- Firebase 로그인 ---------- */
/* 로그인 전에도 왼쪽 칸이 비어 보이지 않도록, 완료 카드와 같은 형태로 채운다.
   :not([hidden]) 없이 display 를 주면 hidden 속성이 무시되므로 반드시 붙인다. */
.registration-panel form:has(#login-gate:not([hidden])){display:flex;flex-direction:column}
#login-gate:not([hidden]){flex:1;display:flex}
.gate-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:38px 28px;border:1px solid #7e7356;border-radius:10px;background:rgba(11,13,10,.6)}
.gate-mark{color:var(--gold);font-size:22px;line-height:1}
.gate-title{font-family:var(--serif);font-size:clamp(22px,1.9vw,30px);font-weight:700;line-height:1.4;color:var(--cream)}
/* 한국어는 기본 줄바꿈 규칙에서 단어 중간이 잘린다("사전예/약", "동의합/니다").
   본문 성격의 텍스트는 어절 단위로만 끊도록 keep-all 을 준다. */
.check span,.reward figcaption,.done-rewards,.gate-steps,.mission-modal-intro,.card-subtitle,
.gate-title,.done-title,.done-phone,.game-guide,.puzzle-task,.mission-feedback,#mission-status,.world-note{word-break:keep-all}
.gate-desc{max-width:400px;font-size:13.5px;line-height:1.7;color:#b8b4a6;margin:-4px 0 4px;word-break:keep-all}
.gate-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:8px 0 0;padding:14px 0 0;border-top:1px solid #4a4536;list-style:none;width:100%;max-width:400px;font-size:12.5px}
.gate-steps li{display:flex;align-items:center;gap:6px;color:#a9a497}
.gate-steps b{display:grid;place-items:center;width:19px;height:19px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-size:11px;font-weight:700}
.gate-agreements{width:100%;max-width:400px;display:grid;gap:8px;text-align:left;padding:14px 16px;border:1px solid #4a4536;border-radius:8px;background:rgba(3,5,5,.5)}
.gate-agreements .check{font-size:12.5px;line-height:1.55}
.gate-agreements .policy-link{margin:2px 0 0;font-size:11.5px}
.login-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:400px}
.login-button:disabled{opacity:.45;cursor:not-allowed}
.login-button{flex:1;min-width:180px;min-height:48px;border-radius:6px;font:500 15px/1 'Malgun Gothic',Roboto,Arial,sans-serif;display:flex;align-items:center;justify-content:center;gap:10px;letter-spacing:0}
.login-icon{width:18px;height:18px;flex-shrink:0}
.login-google{background:#fff;color:#3c4043;border:1px solid #dadce0}
.login-google:hover{background:#f8f9fa;filter:none}
.login-apple{background:#000;color:#fff;border:1px solid #000}
.login-apple:hover{background:#1a1a1a;filter:none}
.login-info:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding:10px 16px;border:1px solid #6d6348;border-radius:7px;background:linear-gradient(#12140f,#0b0d0a);font-size:13.5px;color:#e9dcbb}
#login-user-label{display:flex;align-items:center;gap:8px}
#login-user-label:before{content:"✦";color:var(--gold);font-size:12px}
/* 기본 .text-button(밝은 회색 알약)은 이 페이지의 어두운 금장 톤과 어울리지 않아 따로 맞춘다. */
#btn-logout{height:auto;padding:7px 16px;border:1px solid #6d6348;border-radius:999px;background:transparent;color:#cfc3a0;font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:.03em;transition:border-color .2s,color .2s,background .2s}
#btn-logout:hover{border-color:var(--gold);color:var(--cream);background:rgba(197,175,118,.14)}

/* ---------- 미션 3 직소 퍼즐 (signup-minigames 의 startJigsaw 이식) ---------- */
.mission-feedback.good{color:#dfc484}
.mission-feedback.error{color:#ef9b91}
.game-guide{margin:0 0 16px;padding-left:18px;color:#c5c5b9;font-size:.9rem;line-height:1.6}
.game-guide li{margin-bottom:4px}
.game-guide strong{color:#f3dda0}
.game-stats{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px;padding:10px 12px;border:1px solid #4a4536;border-radius:7px;background:#0b0d0a;font-size:.88rem;color:#c2bdaa}
.game-stats strong{color:#f3dda0;font-size:1rem}
.game-stats strong.warn{color:#ef9b91;animation:jigsaw-blink .6s steps(2) infinite}
.game-actions{display:flex;flex-wrap:wrap;gap:8px}
.game-actions button{min-height:44px;padding:8px 14px;font-size:.9rem;border-radius:7px;border:1px solid #7e7356;background:#131713;color:#e9dcbb;cursor:pointer}
.game-actions button:hover{border-color:#d8b462}
.jigsaw{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;width:100%}
.jigsaw-board{position:relative;width:min(100%,460px);aspect-ratio:1;border:1px solid #7e7356;border-radius:6px;background:rgba(3,5,5,.9);box-shadow:0 16px 40px rgba(0,0,0,.5);margin:0 auto}
.jigsaw-hint{position:absolute;inset:0;background:center/cover no-repeat;opacity:.14;filter:grayscale(.4);pointer-events:none}
.jigsaw-slot{position:absolute}
.jigsaw-cut{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.jigsaw-cut path{fill:rgba(8,10,13,.35);stroke:rgba(243,221,160,.7);stroke-width:1.6;stroke-dasharray:5 4;stroke-linejoin:round;transition:fill .15s ease}
.jigsaw-cut path.over{fill:rgba(216,180,98,.45);stroke:#fff;stroke-dasharray:none}
.jigsaw-cut path.locked{display:none}
.jigsaw-tray{position:relative;flex:none;overflow:hidden;border:1px solid #4a4536;border-radius:8px;background:rgba(3,5,5,.85) radial-gradient(circle at 50% 40%,rgba(216,180,98,.06),transparent 65%)}
.jp{position:absolute;z-index:2;cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.75));transition:filter .15s ease}
.jp.in-tray{position:absolute;width:var(--jp-size,170px);height:var(--jp-size,170px);transform:rotate(var(--rot,0deg))}
.jp.in-tray.selected,.jp.in-tray:hover{transform:rotate(var(--rot,0deg)) scale(1.04)}
.jp:hover{filter:drop-shadow(0 6px 10px rgba(0,0,0,.8)) brightness(1.08)}
.jp.selected{z-index:50;filter:drop-shadow(0 0 2px #ffe9a8) drop-shadow(0 0 12px rgba(243,221,160,.85)) brightness(1.12)}
.jp.dragging{opacity:.25}
.jp.locked{z-index:1;cursor:default;filter:none}
.jp-inner{width:100%;height:100%;background-repeat:no-repeat}
.jp-ghost{position:fixed;left:0;top:0;z-index:100;pointer-events:none;width:var(--jp-size,170px);height:var(--jp-size,170px);filter:drop-shadow(0 0 2px #ffe9a8) drop-shadow(0 0 14px rgba(243,221,160,.7)) drop-shadow(0 18px 26px rgba(0,0,0,.85))}
.jp-ghost .jp-inner{position:absolute;left:0;top:0}
.jp-outline{position:absolute;inset:0;width:100%;height:100%;display:none;overflow:visible;pointer-events:none}
.jp-outline path{fill:none;stroke:#ffe9a8;stroke-width:2.5;stroke-linejoin:round;paint-order:stroke}
.jp.selected .jp-outline,.jp-ghost .jp-outline,.jp.wrong .jp-outline{display:block}
.jp.wrong{z-index:3;filter:drop-shadow(0 0 2px #ef9b91) drop-shadow(0 0 10px rgba(239,155,145,.8))}
.jp.wrong .jp-outline path{stroke:#ef9b91;stroke-dasharray:6 4}
.jp.snap{animation:jigsaw-snap .45s cubic-bezier(.2,.9,.3,1.4);filter:drop-shadow(0 0 10px #f3dda0) brightness(1.3)}
.jigsaw-preview{position:absolute;inset:14px;z-index:5;border:2px solid #d8b462;border-radius:8px;background:#000 center/contain no-repeat;box-shadow:0 0 60px rgba(0,0,0,.8);pointer-events:none}
.jigsaw-board.complete .jigsaw-hint{opacity:0}
.jigsaw-board.complete{box-shadow:0 0 0 2px #d8b462,0 0 60px rgba(216,180,98,.55);overflow:hidden}
.jigsaw-board.complete::after{content:"";position:absolute;inset:0;z-index:4;background:linear-gradient(115deg,transparent 30%,rgba(255,245,214,.55) 50%,transparent 70%);transform:translateX(-100%);animation:jigsaw-shine .9s ease .15s forwards;pointer-events:none}
.game-overlay{position:absolute;inset:0;z-index:6;display:grid;place-content:center;gap:16px;text-align:center;background:rgba(4,6,8,.72);backdrop-filter:blur(4px)}
.game-overlay .defense-msg{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:900;color:#ef9b91;text-shadow:0 3px 16px #000}
.game-overlay .primary{min-height:48px;padding:10px 22px;border-radius:8px;border:1px solid #d8b462;background:#d8b462;color:#1c1608;font-weight:700;cursor:pointer}
.is-hidden{display:none!important}
@keyframes jigsaw-blink{to{opacity:.35}}
@keyframes jigsaw-snap{0%{transform:scale(1.12)}60%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes jigsaw-shine{to{transform:translateX(100%)}}
@media(max-width:900px){.jigsaw-board{width:min(100%,340px)}.jigsaw{height:auto}}
/* 이미 사전예약한 사용자에게 보여주는 완료 카드 (가입 폼 자리를 대신 채운다) */
/* 완료 카드만 보일 때는 오른쪽 보상 영역과 아래 끝이 맞도록 세로로 꽉 채운다. */
.registration-panel form:has(#already-registered:not([hidden])){display:flex;flex-direction:column}
/* :not([hidden]) 없이 display를 주면 hidden 속성(UA의 display:none)을 덮어써서 숨겨지지 않는다. */
#already-registered:not([hidden]){flex:1;display:flex}
.done-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:38px 28px;border:1px solid #7e7356;border-radius:10px;background:rgba(11,13,10,.6)}
.done-mark{display:grid;place-items:center;width:62px;height:62px;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font-size:30px;line-height:1;box-shadow:0 0 24px rgba(197,175,118,.35)}
.done-title{font-family:var(--serif);font-size:clamp(24px,2vw,32px);font-weight:700;color:var(--cream)}
.done-phone{font-size:15px;color:#c5c5b9}
.done-phone strong{color:#f3dda0;font-size:18px;letter-spacing:.04em;margin-left:4px}
.done-rewards{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:7px;font-size:13.5px;line-height:1.6;color:#b8b4a6}
.done-rewards li:before{content:"✦";color:var(--gold);margin-right:7px}
.done-cta{margin-top:10px;min-height:62px;font-size:clamp(20px,1.6vw,27px);text-decoration:none}
#mission-dialog{overflow-y:auto}
@media(min-width:860px){#mission-dialog.jigsaw-active{width:min(1536px,calc(100% - 32px))}}
/* 퍼즐 화면: 왼쪽 = 그림 위의 판+트레이, 오른쪽 = 설명/진행/버튼 패널 (원본 signup-minigames 구성) */
#puzzle-stage{display:grid;gap:20px;align-items:start}
@media(min-width:860px){#puzzle-stage{grid-template-columns:minmax(0,1fr) minmax(324px,396px)}
  /* 판과 트레이가 같은 크기의 정사각형으로 나란히 놓이도록 판을 가로의 절반으로 */
  #puzzle-mount .jigsaw-board{width:min(calc(50% - 6px),552px)}}
#puzzle-mount{position:relative;padding:14px;border:1px solid #4a4536;border-radius:10px;background:#121419 center/cover no-repeat;box-shadow:0 18px 50px rgba(0,0,0,.45)}
#puzzle-mount:before{content:"";position:absolute;inset:0;border-radius:10px;background:rgba(4,6,8,.62);pointer-events:none}
#puzzle-mount .jigsaw{position:relative;z-index:1}
#puzzle-panel{display:flex;flex-direction:column;padding:22px;border:1px solid #4a4536;border-radius:10px;background:rgba(11,13,10,.75)}
#puzzle-panel .mission-modal-progress{margin:0 0 6px}
.puzzle-task{margin:0 0 16px;font-family:'Gmarket Sans','Malgun Gothic',sans-serif;font-size:1.15rem;line-height:1.45;color:var(--cream)}
#puzzle-panel .game-stats{flex-wrap:wrap}

body:has(dialog[open]){overflow:hidden}
@media(min-width:1500px){.mission-card{padding-top:29px}.world{min-height:1000px}}
@media(max-width:1450px) and (min-width:801px){.world-grid{max-width:calc(100% - 300px)}.world-reward{width:128px;top:115px}.nickname-event .world-reward{right:calc(100% + 18px)}.guild-event .world-reward{left:calc(100% + 18px)}.world-reward:before{top:45px}.world-reward p{font-size:13px}.world-card{padding:28px 14px}.world-card h3{font-size:10.5cqw}.world-card .card-subtitle{font-size:13px;min-height:65px;margin-bottom:20px}.world-card .card-subtitle .type-label{gap:8px 0}}
@media(max-width:1200px) and (min-width:801px){.mission-card{padding:24px 16px 18px}.mission-card .gold-button{height:65px}.mission-card h3{font-size:12.8cqw}.mission-art{margin-bottom:15px}.mission-card .card-subtitle{margin-bottom:14px}.mission-card .step{min-width:94px;font-size:18px}.mission-complete{top:6px;font-size:9px}}
@media(max-width:800px){.site-header nav{max-width:none}.mission-grid{max-width:450px;gap:64px}.mission-card{padding:28px 25px 24px}.mission-card h3{font-size:12.8cqw}.world-grid{grid-template-columns:1fr;max-width:470px;gap:45px}.world-event{display:flex;flex-direction:column;align-items:center}.world-card{width:100%}.world-reward{position:relative;top:auto;width:155px;margin:20px 0 0}.nickname-event .world-reward,.guild-event .world-reward{left:auto;right:auto}.world-reward:before{display:none}.world-reward p{font-size:14px}.world-card h3{font-size:11.9cqw}.world-card .card-subtitle{margin-bottom:24px;font-size:15px;line-height:1.7}.world-card .type-nickname-copy,.world-card .type-guild-copy{gap:8px 0}.world .section-heading{margin-bottom:35px}#download-game{margin-top:35px;font-size:30px;min-height:78px}.world-note{font-size:13px;margin-top:20px;line-height:1.8}.world-note p+p{margin-top:12px}.mission-status{max-width:450px}.mission-card .gold-button{height:78px}}
@media(max-width:420px){.mission-card{padding:26px 18px 20px}.mission-card .card-subtitle{margin-bottom:14px}.mission-art{margin-bottom:18px}.mission-card .gold-button{height:64px}.mission-card .step{font-size:18px;min-width:98px}.mission-lock p{font-size:7cqw}.mission-complete{font-size:9px;top:5px;right:6px}#mission-dialog{padding:24px 17px}#mission-dialog h2{font-size:22px}.quiz-question legend{font-size:17px}.quiz-option{font-size:13px;padding:12px}.puzzle-board{margin-left:8px;margin-right:8px}.world-card{padding:26px 12px}.world-card .card-subtitle{font-size:13px}.world-note{font-size:12px}#download-game{font-size:27px}.mission-card.completed .gold-button{font-size:20px}}
@media(prefers-reduced-motion:reduce){.mission-card.unlocking{animation:none}.mission-lock,.lock-chains,.padlock,.mission-content{transition:none}}
.mission-card .mission-art,#mission-3 .mission-art{width:calc(100% - 20px);height:auto;aspect-ratio:auto;margin:0 auto 22px;max-width:100%}
.mission-preview{width:100%;height:auto;aspect-ratio:368/201;object-fit:cover}
.mission-art .rewards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.mission-art .reward{font-size:clamp(9px,3cqw,12px);line-height:1.4}
.mission-card .mission-art .reward:last-child{grid-column:auto}
#missions .rewards .reward:last-child{grid-column:auto}
.mission-art .reward img{height:auto;width:100%;aspect-ratio:1.1;max-height:none;object-fit:contain;margin:0 auto 6px}
#mission-2 .mission-preview{aspect-ratio:368/112}
#mission-2 .rewards{width:80%;margin:16px auto 0;gap:8px 5px}
#mission-2 .reward img{aspect-ratio:1.15}
#mission-2 .reward{font-size:clamp(9px,2.9cqw,11.5px)}
.mission-content{display:flex;flex-direction:column;min-height:575px}
.mission-content .gold-button{margin-top:auto}
@media(min-width:801px) and (max-width:1200px){.mission-content{min-height:440px}.mission-art .rewards{gap:4px;margin-top:10px}#mission-2 .rewards{width:100%;margin-top:10px}.mission-card .mission-art,#mission-3 .mission-art{width:100%;margin-bottom:15px}.mission-art .reward{font-size:10px}}
@media(max-width:800px){.mission-content{min-height:0}.mission-art .rewards{min-height:130px}}
@media(max-width:420px){.mission-card .mission-art,#mission-3 .mission-art{width:100%;margin-bottom:20px}.mission-art .rewards{min-height:110px;margin-top:16px;gap:6px}.mission-art .reward{font-size:10px}#mission-2 .rewards{width:95%}.mission-card .card-subtitle{font-size:12px}}
.missions{background-image:linear-gradient(#0003,#0003),url('assets/background-3.webp?v=98d73087')}
.mission-card.locked .mission-content{filter:grayscale(.7) brightness(.3)}
.mission-lock p{filter:drop-shadow(0 2px 5px #000) drop-shadow(0 0 8px #000)}
@media(min-width:1201px){.missions .section-heading{margin-bottom:51px}.mission-card{padding-top:22px}.mission-card .mission-art,#mission-3 .mission-art{margin-bottom:12px}#mission-2 .reward img{aspect-ratio:1.27}}

/* ===== 1001 시안: PC 클라이언트 / 정식 PC 버전 안내 / 월드 오픈 D-DAY ===== */
/* PC 다운로드 배지: 스토어 줄의 5번째 항목 */
.hero .stores{max-width:none}
.hero .stores button{flex:1 1 0;min-width:0}
@media(max-width:800px){.hero .stores{max-width:400px;margin:0 auto}}
.stores button[data-link="pc"]{border-color:#8a7443}
.hero .stores button[data-link="pc"]{grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
@media(min-width:801px){.hero .stores button[data-link="pc"]{width:auto}}
@media(min-width:1201px){.hero-bottom{width:min(1060px,94%)}.hero .stores{flex-wrap:nowrap}.hero .stores button[data-link="pc"]{flex:0 1 186px}}
/* 사전예약 박스 안의 스토어 배지는 4개(PC 제외) — PC 는 아래 안내 패널에서 다룬다 */
.registration-rewards .stores button[data-link="pc"]{display:none}

/* 월드 오픈 D-DAY 카운트다운 (worldOpenAt 이 비어 있으면 Coming soon) */
.world .section-heading{margin-bottom:24px}
.open-countdown{position:relative;z-index:1;text-align:center;font-family:var(--serif);color:#f1e8cb;margin:0 auto 44px;max-width:1690px}
.oc-date{font-size:clamp(22px,2.1vw,36px);font-weight:700;letter-spacing:.02em;margin:0 0 26px;text-shadow:0 3px 8px #0009}
.oc-band{position:relative;padding:28px 16px 12px;border-top:1px solid #a48c56;border-bottom:1px solid #a48c56;background:linear-gradient(90deg,transparent,#000a 14%,#000a 86%,transparent)}
.oc-label{position:absolute;left:50%;top:0;transform:translate(-50%,-52%);padding:0 14px;background:#080808;font-size:16px;font-weight:700;color:#d8ceb4;white-space:nowrap}
.oc-time{display:block;font-variant-numeric:tabular-nums;font-size:clamp(34px,3.8vw,64px);font-weight:700;line-height:1.2;color:#f3ede0;text-shadow:0 4px 10px #000a;word-spacing:.12em}
.oc-time i{font-style:normal;font-size:.5em;margin-left:.08em}
/* 날짜 비공개 상태: 띠와 글자 모두 디자이너가 준 이미지를 그대로 쓴다(판포유_UI/04_남자비공개).
   띠는 양 끝이 투명하게 사라지는 그림이라 CSS 그라데이션으로는 같은 모양이 안 나온다. */
/* 높이는 글자 + 여백으로 정하고 띠 그림이 거기에 맞춰 늘어나게 둔다.
   aspect-ratio 로 높이를 잡으면 좁은 화면에서 브라우저가 역으로 폭을 키워 가로 넘침이 생긴다. */
.oc-soon{display:none;margin:0;padding:clamp(12px,2.2vw,26px) 10px;
  background:url('assets/world-open-band.png?v=fb7fdcc8') center/100% 100% no-repeat;place-items:center}
.oc-soon img{width:36.5%;min-width:min(240px,88%);max-width:90%;height:auto}   /* 시안의 띠 대비 글자 비율 */
/* 일시를 서버에서 읽어오는 동안에는 둘 다 감춰 둔다(값이 바뀌며 깜빡이지 않게) */
.open-countdown[data-state=loading] .oc-date,.open-countdown[data-state=loading] .oc-band{visibility:hidden}
.open-countdown[data-state=soon] .oc-date,.open-countdown[data-state=soon] .oc-band{display:none}
.open-countdown[data-state=soon] .oc-soon{display:grid}
.open-countdown[data-state=ended] .oc-band{display:none}
@media(max-width:800px){.open-countdown{margin-bottom:30px}.oc-label{font-size:13px}.oc-time{font-size:clamp(26px,8vw,40px)}}

/* 닉네임·길드 카드 아래 안내 문구 (제목 영역에서 이동) */
.world-lede{text-align:center;margin:30px auto;font:700 clamp(18px,1.65vw,32px)/1.6 var(--serif)}
.world-lede .type-label{margin:0 auto}
@media(max-width:800px){.world-lede{font-size:19px;max-width:530px}}

/* 길드 보상 조건: 시안대로 카드 안쪽 아래에 한 줄로 둔다(종전에는 보상 메달 아래 두 줄) */
/* 시안에서는 두 카드의 아래 끝이 맞는다. 길드 카드만 한 줄 길어지므로 양쪽을 같은 높이로 늘린다. */
.world-grid{align-items:stretch}
.world-event{display:flex}
/* 내용은 위에서부터 그대로 쌓고, 남는 공간은 아래에 둔다(시안도 닉네임 카드 아래가 조금 비어 있다).
   예전처럼 그림을 아래로 밀면(margin-top:auto) 설명글과 그림 사이가 벌어져 시안과 달라진다. */
.world-event .world-card{flex:1}
/* 글자색은 이미지 자체에 들어 있다(시안과 같은 #e2c68f). 아래 color 는 이미지를 못 읽을 때의 대비용. */
.world-condition{margin:16px 0 0;font-size:clamp(12px,3.6cqw,17px);color:#e2c68f;line-height:1.5}
@media(max-width:800px){.world-condition{margin-top:14px;font-size:15px}}

/* 1001 시안 대조: 설명글 아래 여백을 줄이고 카드 세로 여백을 좁혀, 게임 화면이 카드에서
   차지하는 비중을 시안만큼 키운다(기존 35px/34px 는 시안보다 헐거웠다). */
.world-card{padding:30px 16px 26px}
.world-card .card-subtitle{margin:10px 0 20px}
/* 시안에서 잰 카드 폭(1920 캔버스 기준 좌 449 ~ 우 1451 = 1002px)에 맞춘다. 종전 954px 는 조금 좁았다. */
.world-grid{max-width:1002px}

/* ===== 사전예약 하단 '정식 PC 버전 제공 예정' — 디자이너 UI 이미지(판포유_UI/02) 기준 =====
   글자를 CSS 로 흉내 내지 않고 시안에서 뽑은 이미지를 그대로 쓴다.
   크기는 전부 % 라서 박스가 줄면 통째로 같은 비율로 줄어든다(시안 02_v2 에서 잰 값). */
.registration .pc-teaser{
  display:grid;grid-template-columns:31.4% 1fr;gap:2%;align-items:start;
  max-width:1480px;margin:28px auto 0;position:relative;z-index:1;padding:33px 52px;text-align:left}
/* 위 사전예약 박스가 1700px 이상에서 워리어 그림을 피해 30px 왼쪽으로 밀린다. 같이 밀어야 세로 선이 맞는다. */
@media(min-width:1700px){.registration .pc-teaser{transform:translateX(-30px)}}
.pc-teaser-art{width:100%;height:auto;border:1px solid #897b55;box-shadow:0 8px 22px #0008}
.pc-teaser-body>*{margin:0}
.pc-teaser-body img{width:100%;height:auto}
.pc-teaser h3{width:48.8%;margin-bottom:1.3%}
.pc-teaser-copy{width:65.4%;margin-bottom:2%}
.pc-teaser-cta{display:grid;place-items:center;width:48.6%;aspect-ratio:448/58;margin-bottom:1.9%;
  background:url('assets/pc-cta-bg.png?v=260660bf') center/100% 100% no-repeat;transition:filter .2s}
.pc-teaser-cta:hover{filter:brightness(1.12)}
.pc-teaser-cta img{width:74.1%}            /* 332/448 — 버튼 배경 대비 글자 비율 */
.pc-teaser-note{width:55.6%}
.pc-teaser-body p.pc-teaser-done{display:none;margin:0 0 1.9%;font:16px/1.75 var(--serif);color:#f3d991;word-break:keep-all}
.pc-teaser.registered .pc-teaser-cta{display:none}
.pc-teaser.registered .pc-teaser-body p.pc-teaser-done{display:block}
/* PC 배지에서 넘어왔을 때 잠깐 반짝이는 표시 */
.pc-teaser{outline:2px solid transparent;outline-offset:6px}
.pc-teaser:focus{outline-color:transparent}
.pc-teaser.pulse{animation:pcPulse 1.8s ease-out 1}
@keyframes pcPulse{0%,55%{outline-color:#f3d991;outline-offset:6px}100%{outline-color:transparent;outline-offset:16px}}
@media(prefers-reduced-motion:reduce){.pc-teaser.pulse{animation:none;outline-color:#f3d991}}
/* 좁은 화면: 세로로 쌓고, 글자가 너무 작아지지 않게 폭을 키운다 */
@media(max-width:800px){
  .registration .pc-teaser{grid-template-columns:1fr;gap:18px;margin-top:40px;padding:24px 20px;max-width:480px;justify-items:center;text-align:center}
  .pc-teaser-body{width:100%}
  .pc-teaser h3{width:72%;margin:0 auto 3%}
  .pc-teaser-copy{width:100%;margin:0 auto 4%}
  .pc-teaser-cta{width:86%;margin:0 auto 4%}
  .pc-teaser-note{width:100%;margin:0 auto}
  .pc-teaser-body p.pc-teaser-done{font-size:14px;margin-bottom:4%}
}

/* 팝업이 열리면 body:has(dialog[open]){overflow:hidden} 로 스크롤바가 사라지고,
   그 폭(약 15px)만큼 화면이 넓어져 가운데 정렬된 내용이 오른쪽으로 밀렸다.
   스크롤바 자리를 항상 비워 두면, 바가 사라져도 폭이 그대로라 밀리지 않는다.
   (스크롤바는 그대로 보인다 — 4~5화면짜리 페이지라 지금 위치를 알려주는 역할을 한다) */
html{scrollbar-gutter:stable}

/* ===== 2026-10-02 구조 변경: 전화번호 먼저, 계정 연동은 그 다음 ===== */
/* 1단계 안내(1 휴대폰 인증 → 2 사전예약 완료 → 3 로그인 후 미션) */
.entry-steps{border-top:0;border-bottom:1px solid #4a4536;margin:0 0 18px;padding:0 0 14px;max-width:none}
/* 완료 카드 안의 계정 연동 영역 */
.link-box{width:100%;max-width:420px;margin:4px auto 0;padding:16px 0 0;border-top:1px solid #4a4536;text-align:center}
.link-title{font-family:var(--serif);font-size:clamp(16px,1.3vw,20px);font-weight:700;color:var(--cream);margin:0 0 4px;word-break:keep-all}
.link-desc{font-size:12.5px;line-height:1.65;color:#a9a497;margin:0 0 12px;word-break:keep-all}
.link-status{min-height:18px;margin:8px 0 0;font-size:12.5px;line-height:1.6;color:#ecd69b;word-break:keep-all}
/* 연동이 끝나면 버튼은 비활성 상태로 남고(숨기지 않는다) 이 문구가 붙는다 */
.link-done{margin:10px 0 0;font-size:13px;font-weight:700;color:#f3d991}
.link-done[hidden]{display:none}
.link-box .login-button:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(1)}
#btn-logout{margin:14px auto 0;display:block}
.consent-lead{font-size:12.5px;line-height:1.6;color:#b8b4a6;margin:0 0 8px;word-break:keep-all}
#send-code:disabled{opacity:.5;cursor:not-allowed}

/* 미션 카드가 3장 → 2장이 되면서 3칸 그리드의 빈 칸 때문에 왼쪽으로 쏠렸다. 2칸으로 맞춘다. */
.mission-grid{grid-template-columns:repeat(2,1fr);max-width:1000px}
@media(max-width:800px){.mission-grid{grid-template-columns:1fr;max-width:450px}}

/* 푸터 회사 표기. 글자를 빼고 로고만 남겼으므로 혼자서도 읽히도록 조금 키운다. */
footer .company{display:inline-flex;align-items:center}
footer .gni-logo{height:17px;width:auto;flex-shrink:0}
@media(max-width:800px){footer .gni-logo{height:15px}}

/* 사전예약(모험가 등록소)과 월드 오픈의 배경을 서로 맞바꿨다.
   파일명은 그대로 두고 참조만 바꾼다 — 파일을 서로 덮어쓰면 다음 교체 때 헷갈린다. */
.registration{background-image:url('assets/background-4.webp?v=3da63bf0')}
.world{background-image:url('assets/background-2.webp?v=6880e2cb')}

/* 히어로 문구가 한 줄 글씨에서 키아트(아치·달 포함)로 바뀌었다.
   디자이너 시안(2026-10-06 캡처)을 실측해 맞췄다 —
   아트 폭은 화면 너비의 63%, 윗변은 히어로 높이의 12.3% 지점이었다.
   아트가 세기말2 로 바뀌면서 캔버스의 여백 비율이 달라졌다(붉은 글자가 캔버스의 57.7%→75.8%).
   시안 캡처에서 "붉은 영역"(아치 글로우 + 세기말 글자)이 놓인 자리를 직접 재서 맞췄다.
   캡처에 헤더가 없어 윗변 기준이 없는데, 재생 버튼으로 역산하려다 회색 글자까지 밝은 영역으로
   잡혀 42px 틀렸었다. 지금은 배경(hero.webp)이 양쪽에서 같다는 점을 이용해 겹쳐서 구했다 —
   왼쪽·오른쪽·아래 세 영역이 모두 "캡처 윗변 = 히어로 윗변 + 62.25px" 로 일치한다.
   그 기준에서 시안의 붉은 영역은 히어로 좌표로 x 603~1293(폭 690), y 115.8~354.8 이고,
   아트가 바뀔 때마다 캔버스 여백 비율이 달라지므로 그때마다 다시 환산한다.
   지금 아트(2252x837)의 붉은 영역은 캔버스의 x 7.7~92.1%, y 16.9~73.5% 라 폭 42.8vw, 윗변 6.0% 였고,
   거기서 10% 키워 47.1vw 로 쓴다(사용자 요청).
   글자용 --part-ratio(em 기준 + clamp)로는 넓은 화면에서 비율이 깨져 vw 로 직접 잡는다. */
.hero h1{top:6%}
.type-hero-copy>img{width:47.1vw}
@media(max-width:800px){.hero h1{top:18%}}
/* 폭을 꽉 채우는 건 폰에서만. 태블릿(768px 등)까지 적용하니 타이틀이 537px 로 커져
   재생 버튼·이벤트 마름모와 겹쳤다. 그 위 구간은 데스크톱과 같은 47.6vw 를 쓴다. */
@media(max-width:560px){.type-hero-copy>img{width:100%}}

/* Windows 클라이언트 배지는 이미지에 테두리·둥근 모서리가 이미 그려져 있다.
   버튼 테두리까지 그리면 선이 두 겹으로 보이므로 평소에는 숨기고, 마우스를 올렸을 때만 보인다
   (테두리 1px 자리는 그대로 둬서 다른 배지와 크기가 어긋나지 않게 한다). */
.stores button[data-link=pc]{border-color:transparent}
.stores button[data-link=pc]:hover{border-color:var(--gold)}

/* 모바일 히어로 겹침 정리 (2026-10-07)
   히어로 높이는 760px 로 고정인데 스토어 배지가 5개(2열 -> 3줄)로 늘면서 아래가 빽빽해졌다.
   ① 이벤트 바로가기 마름모가 '사전예약 진행중' 버튼 위에 68x70px 겹쳐 글자가 서로 깨졌다.
      타이틀 아래 ~ 사전예약 버튼 위의 빈 띠(약 190px)로 올린다. 재생 버튼은 가운데라
      가로로 겹치지 않으므로 세로 제약이 아니다. 띠의 한가운데에 두면 위아래로 40px 쯤 남는다.
   ② 폭이 넓은 기기(414px 등)에서는 재생 버튼과 사전예약 버튼도 6px 겹쳤다.
      버튼·스토어 사이 간격을 줄여 아래 묶음을 내리면 떨어진다. */
/* 1201~1400px 구간: 스토어 배지가 4개에서 5개(Windows 클라이언트)로 늘면서 배지 줄이 양쪽으로
   92px 씩 넓어져, 140px 짜리 마름모가 마지막 배지를 26px 파고들었다.
   이 구간도 1200px 이하와 같은 95px 로 줄여 떨어뜨린다. */
@media(max-width:1400px){.event-shortcut{width:95px;height:95px;right:2%;bottom:13%}}
/* 마름모에 글자가 들어가려면 (글자폭 + 글자높이) < 한 변 x 1.414 여야 한다.
   95px 변의 한계는 134 인데 22px 글자는 89+47=136 이라 테두리를 스쳤다(기존부터). */
@media(max-width:1400px){.event-shortcut span{font-size:20px}}
@media(max-width:800px){
  /* 배경이 세로로 92% 까지 확대돼 책이 화면을 꽉 채우는 바람에, 사전예약 버튼이 책 한가운데를
     가로지르고 배지도 책 위에 얹혔다. 74% 로 줄이면 책이 올라가 버튼·배지가 책 아래로 빠진다. */
  /* 책 아래끝(배경 그림의 0.744 지점)보다 '사전예약 진행중' 버튼 윗변이 위에 있어
     버튼이 책 표지 위로 올라탔다. 배경을 74 -> 70% 로 살짝 줄여 책을 올리고,
     아래 묶음을 5% -> 3.5% 로 내려 모든 폭에서 책 밖으로 뺀다. */
  .hero{background-size:auto 70%}
  /* 이벤트 바로가기 마름모는 모바일에서 뺀다 (사용자 선택).
     좁은 화면에서는 오른쪽 꼭짓점이 화면 끝에서 2~4px 밖에 안 떨어지고 책 모서리와 겹쳐
     어느 크기로 줄여도 균형이 잡히지 않았다. 미션 진입은 상단 내비의 '미션' 이 담당한다. */
  .event-shortcut{display:none}
  .hero-bottom{gap:20px;bottom:3.5%}
}

/* 푸터 회사 정보 (2026-10-07 시안)
   등급 안내 아래에 FANTASY FOR YOU 마크 + 사업자 정보 + 저작권을 세로로 쌓는다.
   통신판매업 신고번호·사업자등록번호는 전자상거래법상 표시 의무가 있어 또렷하게 읽혀야 한다. */
footer{flex-direction:column;gap:0;padding:26px 24px 34px;text-align:center}
.age-notice{max-width:950px}
.company-info{margin-top:24px;font-size:13px;line-height:1.85;color:#8a90a4;max-width:720px}
.ff-mark{margin-bottom:16px}
.ff-mark img{width:200px;height:auto;margin:0 auto;opacity:.8}
.ff-mark span{display:block;margin-top:3px;font:11px/1 var(--serif);letter-spacing:.44em;text-indent:.44em;color:#7b8194}
.company-info address{font-style:normal}
.company-info a{text-decoration:none}
.company-info i{font-style:normal;color:#4e5362;margin:0 4px}   /* 구분선 '|' 은 조금 더 흐리게 */
.copyright{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.copyright .gni-logo{height:16px;width:auto;flex-shrink:0}
@media(max-width:800px){
  footer{padding:22px 18px 28px}
  .company-info{font-size:12px;line-height:1.9;word-break:keep-all}
  .ff-mark img{width:168px}
  .ff-mark span{font-size:10px;letter-spacing:.36em;text-indent:.36em}
  .copyright .gni-logo{height:14px}
}

/* 좁은 폰(<=420px)에서 히어로를 760px 로 줄이는 규칙이 styles.css 에 있다.
   스토어 배지가 4개였을 때는 맞았지만 5개(3줄)가 되면서 40px 가 모자라, 갤럭시 S24 울트라(412px)
   같은 폭에서 재생 버튼과 '사전예약 진행중' 버튼이 맞닿았다. 414px 는 800px 라 멀쩡했던 탓에
   폭 네 개만 보던 검사에서 걸러지지 않았다. 모바일 전 구간을 800px 로 통일한다. */
@media(max-width:420px){.hero{height:800px}}


/* 푸터 로고를 게임 로고(LAND OF FEAR 포함 한 장)로 교체 — 글자로 넣던 LAND OF FEAR 는 뺀다. */
.ff-mark img{width:230px}
/* 좁은 화면에서는 '지엔아이소프트(주) | 서울특별시 …' 가 아무 데서나 접혀
   주소가 두 줄로 쪼개지고 '2004-01645' 같은 번호까지 끊겼다.
   구분선을 숨기고 항목마다 한 줄씩 준다. */
@media(max-width:560px){
  .company-info address span{display:block}
  .company-info address i,.company-info address br{display:none}
  .company-info address span+span{margin-top:2px}
  .copyright{flex-direction:column;gap:7px}
}
@media(max-width:800px){.ff-mark img{width:190px}}
/* 아주 좁은 폰에서는 주소 끝의 우편번호와 Copyright 꼬리가 한 줄씩 더 넘어간다. 조금 줄여 한 줄에 넣는다. */
@media(max-width:400px){.company-info{font-size:11px}}


/* 길드 조건 문구가 바뀌었다. 이미지로 구워져 있던 것(guild-condition.png)을 글자로 바꾼다.
   새 문구는 전보다 길어 이미지로는 줄바꿈이 안 되고, 글자면 폭에 맞춰 접힌다.
   .world-condition 에 이미 같은 색(#e2c68f)·크기 규칙이 있어 생김새는 유지된다. */
/* 'ㄱㅂ' 한 단어만 다음 줄로 떨어지지 않게 두 줄을 고르게 나눈다(미지원 브라우저는 평소대로 접힘). */
.world-condition{font-family:var(--serif);word-break:keep-all;text-wrap:balance}

/* 히어로 배경 영상 (f4u.co.kr 과 같은 방식).
   .hero 의 배경 이미지는 그대로 두고 그 위에 깐다 — 영상을 못 틀면 이미지가 그대로 보인다.
   쌓는 순서: 배경 이미지 → 영상(0) → 어둡게 깔리는 그라데이션(1) → 글자·버튼(2) */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
  z-index:0;pointer-events:none;border:0;background:transparent}
.hero:before{z-index:1}
.hero h1,.hero .hero-logo,.hero .hero-bottom,.hero .event-shortcut{z-index:2}
/* 모션 줄이기(prefers-reduced-motion)에서 영상을 숨기는 규칙은 뺐다.
   접근성 권고를 따른 것이었지만, Windows 의 '애니메이션 효과' 를 끈 사람이 꽤 많고
   (대개 접근성 때문이 아니라 성능 때문이다) 그 사람들에게 배경 영상이 통째로 안 보였다.
   실제로 이 프로젝트 담당자 PC 가 그 상태라 "영상이 안 나온다" 로 드러났다.
   홍보용 히어로 영상이라 보이는 쪽을 택한다. */
/* 영상이 밝은 장면으로 넘어가면 금색 글자(타이틀·사전예약 버튼)가 묻힌다.
   43초 내내 어떤 장면이 와도 읽히도록 영상 위에 어두운 막을 한 겹 깐다.
   막은 글자 아래(z-index 1), 영상 위(0)에 놓는다. */
.hero:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:1;pointer-events:none}

/* 마켓 사전예약 배지를 f4u.co.kr 본 사이트와 같은 모양으로 맞춘다.
   배지 이미지(구글/애플/원스토어/갤럭시/PC)에는 이미 둥근 테두리가 그려져 있는데,
   버튼에 1px 테두리를 또 줘서 액자가 두 겹으로 보였다. 본 사이트는 테두리 없이
   이미지만 얹고(.f4u-store-badge--img{border:0;background:none;border-radius:10px}),
   마우스를 올리면 살짝 밝아지며 떠오른다. 같은 규칙을 그대로 쓴다. */
.stores button{border:0;border-radius:10px;transition:filter .15s,transform .15s}
.stores button:hover{border-color:transparent;filter:brightness(1.18);transform:translateY(-2px)}

/* 히어로의 소개 영상 재생 버튼을 빼고, 그 자리에 게임 로고(판포유로고.png)를 넣는다.

   [크기] 배경 영상 끝(34~42.7초)에 뜨는 로고와 같은 크기로 맞춘다.
   영상 1281x630 안에서 로고(글로우 포함)는 x 197~1097, y 190~326 이다.
   .hero-video 는 object-fit:cover + object-position:center top 이고, 보통 화면에서는
   세로가 기준이 된다(히어로 높이 56.25vw > 630/1281). 그래서 배율 = 히어로높이/630 이고
     로고 폭 = 901 * 히어로높이/630 = 히어로높이의 1.4302배
   vw 로 쓰면 스크롤바 폭(15px)만큼 어긋나므로 **히어로 높이 기준 %** 로 적고,
   폭은 height + aspect-ratio 로 역산한다(그림 1800x281).
   아주 넓은 화면(≈2440px 이상)에서는 히어로 높이가 1200px 로 묶여 영상이 가로 기준으로
   확대되므로, 그때 쓰일 vw 값(140.66/1281)을 max() 로 함께 적어 둔다.

   [세로 자리] '세기말 다크 판타지의 귀환' 아랫변과 '사전예약 진행중' 윗변의 한가운데
   (사용자 요청 2026-10-07 21:38 — 타이틀에 너무 붙어 있었다).
   그 한가운데는 화면 폭에 따라 히어로 높이의 38.4%~45.0% 로 움직인다(타이틀·로고는 vw 로
   커지는데 버튼 높이는 거의 고정이라 그렇다). 고정값 하나로는 안 맞아서 app.js 의
   히어로로고가운데() 가 실제로 재서 --hero-logo-top 에 넣는다.
   아래 값은 그 전에 쓰이는 기본값이자, JS 가 안 돌 때의 대비값이다(폭 구간별 평균). */
.hero-logo{position:absolute;left:50%;top:var(--hero-logo-top,41%);transform:translateX(-50%);margin:0;
  height:max(22.33%,10.98vw);width:auto;aspect-ratio:1800/281;pointer-events:none}
.hero-logo img{width:100%;height:100%}
/* 영상이 자기 로고를 띄우는 34~43초에는 정적 로고를 감춘다(app.js 히어로로고교대).
   클래스가 붙지 않으면 늘 보인다 — 영상이 안 돌 때도 로고는 남는다.
   클래스 이름에 is-hidden 을 쓰면 안 된다: 이 파일에 이미 .is-hidden{display:none!important}
   가 있어서 요소가 통째로 사라지고, 자리까지 없어진다(2026-10-07 실제로 겪음). */
.hero-logo{transition:opacity .6s ease}
.hero-logo.video-logo-on{opacity:0}
@media(prefers-reduced-motion:reduce){.hero-logo{transition:none}}
/* 1150px 아래로는 히어로 높이가 760px 로 고정돼 영상이 가로로 크게 잘린다.
   영상 속 로고가 화면 밖으로 밀려나므로 거기 맞추지 않고 화면 폭에 맞춘다. */
@media(max-width:1150px){.hero-logo{height:auto;width:90%;top:var(--hero-logo-top,39%)}}
@media(max-width:560px){.hero-logo{width:92%;top:var(--hero-logo-top,43%)}}

/* 히어로 아래쪽 검은 그라데이션(.hero:before)은 styles.css 에서 inset:70% 0 12% 라
   바닥에서 12% 위에 끊긴다. 배경이 정지 이미지였을 때는 그 아래가 원래 까매서 안 보였는데,
   배경 영상이 들어오면서 끊기는 자리에 가로 경계선이 생겼다(1994px 창 기준 y=987).
   영상은 히어로를 꽉 채우므로 그라데이션도 바닥까지 내려 경계를 없앤다. */
.hero:before{inset:70% 0 0}