/* 메이플 리버스 홈페이지 — ★ 2026-09-30(62차 이어서 (17)) 키컬러 · 두 가지 바탕 · 그림 · 메이플 말풍선
   사용자 원문(요지 — 전문 = UserRule 「62차 이어서 (17)」): 키컬러를 하나 넣어 달라(메이플 아이템 · 캐릭터에서 · 원색 계열) · 이미지를 더 많이 · 문구는 직관적으로 ·
   붙여 넣은 브랜딩 의견 = 「메인페이지만 검정색 배경 · 나머지는 흰색 배경 + 이미지 · 메이플 UI · 귀엽고 캐주얼」 · 「슬라임 → 형광 초록 = 메인 키컬러 · 서브 = 노랑~주황」 ·
   「엘리니아 st」 · 「메이플의 아이콘 · 말풍선」.
   · 색은 :root 토큰에서만 정한다. 메인 페이지(.home-page) = 어두운 바탕 · 다른 쪽(.board-page) = 흰 바탕 — 같은 규칙이 바탕 토큰만 바꿔 두 테마로 그려진다.
   · 키컬러 = 슬라임 형광 초록(--key) · 보조 = 노랑(--sub) · 주황(--sub-2). 흰 바탕 위 초록 글자는 진한 초록(--key-deep · 대비 5.5:1)을 쓴다.
   · 첫 화면 배경 = 검정 + 유튜브 영상(js/bg-video.js) · 로딩 화면(.page-loader) 스타일은 index.html 머리에 있다(CSS 를 받기 전에도 보이게). */
@font-face{font-family:Pretendard;src:url('../assets/fonts/PretendardVariable.subset.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--key:#5CF03B;--key-hi:#86FF6A;--key-deep:#1E7A18;--key-ink:#0B2A09;--key-soft:#EEFFE6;--sub:#FFC93C;--sub-2:#FF8A1F;--sub-soft:#FFF6D8;--sub-deep:#9A5B00;
  /* ★★ 63차 이어서 (45) 공지사항 배너(사용자 시안) 변형 색 — notice 시안 그대로 · letter · note · release · check(점검 · 이슈) */
  --nb-notice:linear-gradient(108deg,#78c5df 0%,#83b6ed 42%,#8795fa 100%);--nb-notice-ink:#626bdd;--nb-notice-pill:#b0e5ff;--nb-notice-glow:#a7ebf4;--nb-notice-tint:#869eef;--nb-notice-spark:#d9f9ff;--nb-notice-brand:#a1b3ff66;
  --nb-letter:linear-gradient(108deg,#f4ad94 0%,#ee98ae 46%,#c79aef 100%);--nb-letter-ink:#b84a74;--nb-letter-pill:#ffd9e2;--nb-letter-glow:#ffd0c2;--nb-letter-tint:#e58fb8;--nb-letter-spark:#fff0f4;--nb-letter-brand:#ffc2d866;
  --nb-note:linear-gradient(108deg,#f6be6e 0%,#f3a26c 46%,#e98f86 100%);--nb-note-ink:#a85a18;--nb-note-pill:#ffe6b8;--nb-note-glow:#ffe0a8;--nb-note-tint:#f09a6e;--nb-note-spark:#fff4dc;--nb-note-brand:#ffd49066;
  --nb-release:linear-gradient(108deg,#6fd4a6 0%,#58c3c6 46%,#6ea7ef 100%);--nb-release-ink:#1d7f6e;--nb-release-pill:#c9fbe3;--nb-release-glow:#b6f3dc;--nb-release-tint:#5ab3d8;--nb-release-spark:#e4fff3;--nb-release-brand:#a6f0d866;
  --nb-check:linear-gradient(108deg,#a3b4c9 0%,#90a2bf 46%,#8292b6 100%);--nb-check-ink:#3f5175;--nb-check-pill:#dbe5f2;--nb-check-glow:#cfdcec;--nb-check-tint:#7f90b8;--nb-check-spark:#eef3fa;--nb-check-brand:#c4d2e666;
  --nb-title-shadow:#5279ad22;
  --font:Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;--header:76px;--radius:16px;
  --bg:#000;--panel:rgba(10,13,10,.9);--surface:#0e110e;--surface-2:#161b16;--line:#212821;--line-2:#323b32;--text:#f3f6f1;--text-2:#adb6ab;--text-3:#818c7f;--link:var(--key);--head:rgba(0,0,0,.86);--tag-bg:rgba(92,240,59,.14);--tag-ink:var(--key);color-scheme:dark}
.board-page{--bg:#fff;--panel:#fff;--surface:#f7fbf4;--surface-2:#eef8e8;--line:#e3ebde;--line-2:#cfdcc7;--text:#18231a;--text-2:#4a5a4c;--text-3:#66756a;--link:var(--key-deep);--head:rgba(255,255,255,.94);--tag-bg:var(--key-soft);--tag-ink:var(--key-deep);color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header);scrollbar-gutter:stable}
body{margin:0;color:var(--text);font-family:var(--font);font-size:16px;line-height:1.65;background:var(--bg);-webkit-font-smoothing:antialiased;word-break:keep-all}
::selection{background:var(--key);color:var(--key-ink)}
a{color:inherit;text-decoration:none}
button,select{font:inherit}
button,a,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit;border:0;background:none}
:focus-visible{outline:2px solid var(--key);outline-offset:4px}
.board-page :focus-visible{outline-color:var(--key-deep)}
img{max-width:100%}
h1,h2,h3,p{margin:0}
.wrap{width:min(1200px,calc(100% - 96px));margin-inline:auto}
.skip-link{position:fixed;top:-100px;left:20px;z-index:200;background:var(--key);color:var(--key-ink);padding:10px 14px;border-radius:10px}
.skip-link:focus{top:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.noscript{text-align:center;background:var(--surface-2);color:var(--text-2);padding:20px}

/* 머리글 */
.header{position:sticky;top:0;z-index:30;height:var(--header);background:var(--head);border-bottom:1px solid var(--line)}
.header-inner{height:100%;max-width:1440px;margin:auto;padding:0 48px;display:flex;align-items:center;gap:48px}
.brand{display:flex;align-items:center;gap:10px;line-height:1;font-size:21px;font-weight:800;letter-spacing:.04em;color:var(--text)}
.brand img{width:32px;height:32px;image-rendering:pixelated}
.brand img.brand-slime{width:auto;height:32px;image-rendering:auto}
@media(max-width:720px){.brand img.brand-slime{width:auto;height:28px}}
.brand small{display:block;margin-bottom:5px;font-size:9px;font-weight:700;letter-spacing:.42em;color:var(--link)}
.header nav{display:flex;gap:32px;margin:auto}
.header nav a{padding:10px 0;font-size:15px;font-weight:600;color:var(--text-2);transition:color .2s}
.header nav a:hover,.header nav [aria-current=page]{color:var(--text)}
.header nav [aria-current=page]{box-shadow:inset 0 -3px 0 var(--key)}
.header-start{white-space:nowrap;padding:9px 18px;border-radius:12px;background:var(--key);font-size:14px;font-weight:800;color:var(--key-ink);transition:transform .2s,box-shadow .2s}
.header-start:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(92,240,59,.35)}
.header-start span{margin-left:10px}
.menu-toggle,.nav-start{display:none}

/* 버튼 · 표식 · 말풍선(메이플 대화창 모양) */
.start-button{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 40px;border-radius:14px;background:var(--key);color:var(--key-ink);font-size:17px;font-weight:800;letter-spacing:.02em;box-shadow:0 4px 0 var(--key-deep);transition:transform .15s,box-shadow .15s,background .2s}
.start-button:hover{background:var(--key-hi);transform:translateY(-2px);box-shadow:0 6px 0 var(--key-deep),0 10px 28px rgba(92,240,59,.35)}
.start-button:active{transform:translateY(2px);box-shadow:0 2px 0 var(--key-deep)}
.pill{display:inline-block;white-space:nowrap;padding:3px 11px;border-radius:999px;background:var(--tag-bg);color:var(--tag-ink);font-size:12px;font-weight:700}
.pill-sub{background:rgba(255,201,60,.16);color:var(--sub)}
.board-page .pill-sub{background:var(--sub-soft);color:var(--sub-deep)}
.bubble{position:relative;display:inline-block;padding:10px 16px;border:2px solid #18231a;border-radius:16px;background:#fff;color:#18231a;font-size:14px;font-weight:700;line-height:1.45;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.bubble::after{content:"";position:absolute;left:24px;bottom:-9px;width:14px;height:14px;background:#fff;border-right:2px solid #18231a;border-bottom:2px solid #18231a;transform:rotate(45deg)}
.mascot{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mascot img{width:96px;height:auto}
@media(prefers-reduced-motion:no-preference){.mascot img{animation:slime-bob 2.6s ease-in-out infinite}@keyframes slime-bob{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-8px) scale(.97,1.03)}60%{transform:translateY(0) scale(1.05,.95)}}}

/* 첫 화면 — 바탕은 투명(뒤의 고정 배경 층 = 검정 + 영상) · 가운데 어두운 그림자가 글자 대비를 낸다 */
.hero{position:relative;display:flex;align-items:center;height:calc(100svh - var(--header));min-height:640px;color:#fff;overflow:hidden}
.hero-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,.08) 75%),linear-gradient(0deg,rgba(0,0,0,.85),transparent 24%)}
.hero-content{position:relative;width:min(820px,calc(100% - 40px));margin-inline:auto;padding-bottom:12px;text-align:center}
.hero-badge{display:inline-block;margin-bottom:22px;padding:6px 14px;border:1px solid rgba(92,240,59,.55);border-radius:999px;background:rgba(0,0,0,.45);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--key)}
.hero h1{font-size:62px;font-weight:800;line-height:1.14;letter-spacing:-.04em;text-shadow:0 4px 18px rgba(0,0,0,.45)}
.hero h1 em{font-style:normal;color:var(--key)}
.hero p{margin:22px 0 34px;font-size:18px;font-weight:500;line-height:1.7;color:#e6ebe4;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.hero-letter{display:block;width:max-content;max-width:100%;margin:20px auto 0;font-size:15px;font-weight:600;color:#e6ebe4;text-decoration:underline;text-underline-offset:6px;text-shadow:0 2px 8px rgba(0,0,0,.5);transition:color .2s}.hero-letter:hover{color:var(--key)}
.hero-bottom{position:absolute;left:0;right:0;bottom:26px;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;letter-spacing:.08em;color:#c5ccc3}
.hero-bottom a{color:#e6ebe4;transition:color .2s}
.hero-bottom a:hover{color:var(--key)}
.hero-bottom a span{margin-left:10px}

/* 고정 배경 층(화면 전체 · 가장 뒤 · 제자리) — 검정 위에 유튜브 영상(js/bg-video.js 가 넣는다 · 재생이 시작되면 .is-playing 에서 보인다).
   영상 = 16:9 를 화면에 덮은 뒤 1.2배로 키워 가장자리(플레이어 제목 줄 · 로고)를 화면 밖으로 보낸다 — 그래서 재생 직후 바로 보여도 된다.
   ⚠ html 요소에 바탕색을 주지 않는다 — 그러면 body 바탕이 캔버스로 올라가지 않고 z-index -1 배경 층 위를 덮는다. */
.home-page{background:var(--bg)}
.page-bg{position:fixed;inset:0;height:100vh;height:100lvh;z-index:-1;overflow:hidden;background:#000;pointer-events:none}
.bg-video{position:absolute;inset:0;overflow:hidden}
.bg-video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-width:177.78vh;min-height:100vh;border:0;opacity:0;transform:translate(-50%,-50%) scale(1.2);transition:opacity .8s ease;pointer-events:none}
@supports (height:100lvh){.bg-video iframe{min-width:177.78lvh;min-height:100lvh}}
.page-bg.is-playing .bg-video iframe{opacity:1}

/* 알림 띠 */
.announcement{background:rgba(0,0,0,.9);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.announcement .wrap{display:flex;gap:14px;align-items:center;min-height:56px;font-size:15px;font-weight:600;color:#e6ebe4}
.announcement a{transition:color .2s}
.announcement a:hover{color:var(--key)}
.small-tag{white-space:nowrap;padding:3px 10px;border-radius:999px;background:var(--tag-bg);font-size:12px;font-weight:700;color:var(--tag-ink)}
.announcement-tail{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--sub)}

/* 구역 공통 */
.section{padding:76px 0}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
.kicker{display:block;margin-bottom:10px;font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--sub)}
.board-page .kicker{color:var(--sub-deep)}
h2{font-size:32px;font-weight:800;line-height:1.3;letter-spacing:-.035em;color:var(--text)}
h2 em{font-style:normal;color:var(--link)}
.section-link{white-space:nowrap;padding-bottom:3px;border-bottom:2px solid var(--line-2);font-size:14px;font-weight:700;color:var(--text-2);transition:color .2s,border-color .2s}
.section-link:hover{color:var(--link);border-color:var(--link)}
.section-link span{margin-left:6px}
.demo-label{font-size:13px;color:var(--text-3)}
.home-page .news-section,.home-page .world-section,.home-page .events-section,.home-page .rates-teaser,.home-page .closing{margin-top:40px;margin-bottom:40px}
.home-page .news-section,.home-page .world-section>.wrap,.home-page .events-section,.home-page .rates-teaser,.home-page .closing{background:var(--panel);border:1px solid var(--line);border-radius:24px}
.home-page .news-section,.home-page .events-section,.home-page .world-section>.wrap{padding:52px 44px}
.home-page .world-section{padding:0;background:none;border:0}
.home-page .closing{width:min(1200px,calc(100% - 96px));margin-left:auto;margin-right:auto;margin-bottom:64px;padding:64px 24px}

/* 자유 스킬 — 그림 한 장을 넓게 깔고 한 줄로 알린다(사용자 「직업 대신 취향을 고르세요 … 풀화면으로」) */
.showcase{position:relative;overflow:hidden;min-height:560px;display:flex;align-items:center;color:#fff}
.showcase-media{position:absolute;inset:0}
.showcase-media img{width:100%;height:100%;object-fit:cover;object-position:60% 85%}
.showcase::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.12) 100%),linear-gradient(0deg,rgba(0,0,0,.6),transparent 30%)}
.showcase-inner{position:relative;z-index:2;padding:80px 0}
.showcase h2{font-size:56px;line-height:1.15;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.45)}
.showcase h2 em{color:var(--key)}
.showcase p{max-width:560px;margin-top:18px;font-size:19px;font-weight:600;line-height:1.65;color:#eef2ec}
.skill-chips{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0;padding:0;list-style:none}
.skill-chips li{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:14px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);font-size:15px;font-weight:700}
.skill-chips img{width:40px;height:40px;border-radius:10px;image-rendering:pixelated;background:rgba(255,255,255,.08)}
.skill-chips .plus{padding:0;background:none;border:0;font-size:22px;color:var(--key)}

/* 공지 */
.news-grid{display:grid;grid-template-columns:1.75fr 1fr;gap:28px}
.notice-board{border-top:3px solid var(--key)}
.board-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:16px 0;border-bottom:1px solid var(--line)}
.board-top h3{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;color:var(--text)}
.board-top h3 img{width:32px;height:32px}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tabs button{white-space:nowrap;padding:6px 14px;border-radius:999px;border:1px solid var(--line-2);font-size:13px;font-weight:600;color:var(--text-2);transition:background .2s,color .2s,border-color .2s}
.tabs button:hover{border-color:var(--link);color:var(--link)}
.tabs button.active{background:var(--key);border-color:var(--key);color:var(--key-ink)}
.notice-row{display:flex;align-items:center;gap:14px;width:100%;min-height:66px;padding:20px 8px;border-bottom:1px solid var(--line);font-size:15px;color:var(--text);text-align:left;transition:background .2s}
.notice-row:hover{background:var(--surface-2)}
.notice-type{flex-shrink:0;min-width:62px;padding:2px 10px;border-radius:999px;background:var(--tag-bg);font-size:12px;font-weight:700;text-align:center;color:var(--tag-ink)}
.notice-row strong{font-weight:600}
.notice-date,.board-date{margin-left:auto;white-space:nowrap;font-size:12px;color:var(--text-3)}
.board-empty{padding:32px 8px;border-bottom:1px solid var(--line);text-align:center;font-size:14px;color:var(--text-3)}
.board-guide-link{margin-top:14px;font-size:14px;text-align:right}
.board-guide-link a{padding-bottom:2px;border-bottom:2px solid var(--line-2);font-weight:700;color:var(--text-2);transition:color .2s,border-color .2s}
.board-guide-link a:hover{color:var(--link);border-color:var(--link)}
.world-invite{position:relative;display:flex;flex-direction:column;overflow:hidden;min-height:306px;padding:26px 28px;border-radius:20px;background:linear-gradient(160deg,#173d12 0%,#0e1f0c 70%);border:1px solid rgba(92,240,59,.35);transition:transform .2s,border-color .2s}
.world-invite:hover{transform:translateY(-3px);border-color:var(--key)}
.world-invite h3{margin-top:10px;font-size:24px;font-weight:800;line-height:1.35;letter-spacing:-.03em;color:#fff}
.world-invite p{margin-top:10px;font-size:14px;color:#cfe0c9}
.world-invite .mascot{margin-top:auto;padding-top:18px;gap:10px}
.world-invite .mascot img{width:74px}
.world-invite .bubble{font-size:13px}
.invite-bottom{display:flex;justify-content:space-between;margin-top:18px;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);font-size:14px;font-weight:700;color:var(--key)}

/* 이런 게 달라요 — 그림 카드 */
.world-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:32px}
.world-heading p{font-size:16px;color:var(--text-2)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature{overflow:hidden;border-radius:20px;background:var(--surface);border:1px solid var(--line-2);transition:transform .2s,border-color .2s}
.feature:hover{transform:translateY(-4px);border-color:var(--key)}
.feature-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.feature-body{padding:22px 24px 26px}
.feature h3{margin-top:10px;font-size:22px;font-weight:800;line-height:1.4;letter-spacing:-.03em;color:var(--text)}
.feature p{margin-top:8px;font-size:15px;line-height:1.75;color:var(--text-2)}
.lore{margin-top:32px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.lore summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:24px 0;cursor:pointer}
.lore summary::-webkit-details-marker{display:none}
.lore summary .kicker{margin-bottom:6px;font-size:11px}
.lore strong{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.details-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--tag-bg);font-size:22px;font-weight:700;color:var(--tag-ink);transition:transform .2s}
.lore[open] .details-mark{transform:rotate(45deg)}
.lore-body{max-width:780px;padding:4px 0 30px;color:var(--text-2)}
.lore-body p{margin-bottom:18px}

/* 빅토리아 아일랜드 지역 그림 */
.regions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.region{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line-2)}
.region img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s}
.region:hover img{transform:scale(1.05)}
.region span{position:absolute;left:10px;bottom:10px;padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.72);font-size:13px;font-weight:700;color:#fff}

/* 이벤트 — 메이플 아이콘 + 한눈에 알 수 있는 이름 */
.event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.event-card{position:relative;display:flex;flex-direction:column;gap:14px;min-height:220px;padding:24px;border-radius:20px;background:var(--surface);border:1px solid var(--line-2);color:var(--text);text-align:left;transition:border-color .2s,transform .2s}
.event-card:hover{border-color:var(--key);transform:translateY(-3px)}
.event-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.event-top img{width:44px;height:44px;object-fit:contain}
.event-status{display:inline-block;padding:2px 10px;border-radius:999px;background:rgba(255,201,60,.14);font-size:12px;font-weight:700;color:var(--sub)}
.event-card h3{font-size:21px;font-weight:800;line-height:1.35;letter-spacing:-.03em}
.event-card p{margin-top:-4px;padding-right:24px;font-size:14px;color:var(--text-2)}
.event-arrow{position:absolute;right:22px;bottom:18px;font-size:20px;color:var(--text-3);transition:color .2s}
.event-card:hover .event-arrow{color:var(--key)}

/* 확률 정보로 가는 칸 · 마무리 · 바닥글 */
.rates-teaser{display:flex;align-items:center;gap:30px;padding:40px 44px}
.rates-teaser>img{width:56px;height:56px}
.rates-teaser-text{flex:1;min-width:0}
.rates-teaser-text p{margin-top:10px;font-size:15px;color:var(--text-2)}
.rates-teaser-link{flex-shrink:0;display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:14px;border:2px solid var(--key);font-size:15px;font-weight:800;color:var(--key);transition:background .2s,color .2s}
.rates-teaser-link:hover{background:var(--key);color:var(--key-ink)}
.closing{display:flex;flex-direction:column;align-items:center;padding:68px 24px;text-align:center}
.closing .mascot{align-items:center;margin-bottom:18px}
.closing .bubble::after{left:calc(50% - 7px)}
.closing h2{font-size:34px}
.closing p{margin-top:10px;font-size:16px;color:var(--text-2)}
.closing .start-button{margin-top:28px}
.closing-top{display:block;width:max-content;margin:22px auto 0;padding-bottom:3px;border-bottom:2px solid var(--line-2);font-size:14px;font-weight:600;color:var(--text-2);transition:color .2s,border-color .2s}
.closing-top:hover{color:var(--link);border-color:var(--link)}
footer{padding:36px 0 24px;background:var(--surface);border-top:1px solid var(--line);color:var(--text-2)}
.home-page footer{background:#000}
.footer-inner{display:flex;gap:28px;align-items:center}
.footer-inner .brand{font-size:18px}
.footer-inner .brand img{width:28px;height:28px}
.footer-inner>div{margin-right:auto}
.footer-inner p{font-size:14px;font-weight:600;color:var(--text)}
.footer-inner small{font-size:11px;letter-spacing:.16em;color:var(--text-3)}
.footer-inner>a:not(.brand),.text-button{font-size:13px;color:var(--text-2);transition:color .2s}
.footer-inner>a:not(.brand):hover,.text-button:hover{color:var(--link)}
.text-button{padding:0}
.preview-note{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3)}

/* 상세 창(이벤트) */
dialog{width:min(620px,calc(100% - 36px));max-height:85dvh;overflow:auto;padding:30px;border-radius:22px;background:#0f140f;color:var(--text);border:2px solid var(--key-deep);box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(0,0,0,.7)}
.dialog-top{display:flex;justify-content:space-between;align-items:center}
.dialog-top .kicker{margin:0}
.dialog-close{padding:4px 10px;font-size:28px;font-weight:300;line-height:1;color:var(--text-2)}
.dialog-close:hover{color:var(--key)}
dialog h2{margin:14px 0 20px;font-size:26px}
#dialog-body p{margin:14px 0;font-size:15px;color:var(--text-2)}
.dialog-confirm{display:block;margin:26px 0 0 auto;padding:11px 30px;border-radius:12px;background:var(--key);color:var(--key-ink);font-weight:800;box-shadow:0 3px 0 var(--key-deep);transition:background .2s}
.dialog-confirm:hover{background:var(--key-hi)}

/* 본문 블록(소제목 · 목록 · 표 · 보충 설명 · 링크) — js/blocks.js */
table{width:100%;margin-top:20px;border-collapse:collapse;font-size:13px;text-align:left}
th{padding:10px;border-bottom:1px solid var(--line-2);background:var(--surface-2);font-weight:700;white-space:nowrap;color:var(--text)}
.block-heading{margin:26px 0 10px;font-size:18px;font-weight:800;line-height:1.45;letter-spacing:-.02em;color:var(--text)}
.block-heading::before{content:"";display:inline-block;width:8px;height:8px;margin:0 10px 3px 0;border-radius:50%;background:var(--key)}
.block-list{margin:12px 0;padding-left:20px}
.block-list li+li{margin-top:6px}
.block-list li::marker{color:var(--link)}
.block-note{margin-top:10px;padding:10px 14px;border-radius:12px;background:var(--surface-2);font-size:13px;line-height:1.75;color:var(--text-2)}
.block-table{overflow-x:auto;margin:12px 0 4px;border:1px solid var(--line-2);border-radius:14px;background:var(--panel)}
.block-table table{margin:0;font-size:13px;line-height:1.6}
.block-table thead th{padding:10px 12px}
.block-table tbody th,.block-table tbody td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;color:var(--text-2)}
.block-table tbody th{min-width:88px;background:none;font-weight:700;white-space:normal;color:var(--text)}
.block-table tbody tr:last-child th,.block-table tbody tr:last-child td{border-bottom:0}
.block-link a{border-bottom:2px solid var(--line-2);font-weight:700;color:var(--link);transition:border-color .2s}
.block-link a:hover{border-color:var(--link)}
.article-body .block-heading{margin:42px 0 12px;font-size:21px}
.article-body .block-heading:first-child{margin-top:0}
.article-body .block-list{font-size:16px;line-height:1.85}
.article-body .block-table{margin:16px 0 6px}
.article-body .block-table table{font-size:14px}
.article-body .block-note{margin-top:12px;font-size:14px}
.article-body .block-table+p,.article-body .block-list+p,.article-body .block-note+p{margin-top:22px}
#dialog-body .block-heading{margin:24px 0 8px;font-size:16px}
#dialog-body .block-list{font-size:15px;line-height:1.75;color:var(--text-2)}
#dialog-body .block-note{margin:10px 0;font-size:13px}

/* 게시판 페이지(공지 · 가이드북 · 확률 정보 · 약관 세 쪽) — 흰 바탕 · 엘리니아 그림 · 말풍선 */
.board-page{display:flex;flex-direction:column;min-height:100vh}
.board-page footer{margin-top:auto}
.board-banner{position:relative;overflow:hidden;padding:52px 0 48px;background:linear-gradient(120deg,var(--key-soft) 0%,#fbfff6 55%,var(--sub-soft) 100%);border-bottom:1px solid var(--line)}
.board-banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px}
.board-banner h1{font-size:40px;font-weight:800;letter-spacing:-.04em;color:var(--text)}
.board-banner p{margin-top:10px;font-size:16px;color:var(--text-2)}
.banner-art{position:relative;flex-shrink:0;width:min(420px,40%)}
.banner-art>img:first-child{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px;border:3px solid #fff;box-shadow:0 14px 34px rgba(30,122,24,.18)}
.banner-art .banner-slime{position:absolute;left:-26px;bottom:-18px;width:78px}
.board-main{min-height:55vh;padding:26px 0 90px}
.board-breadcrumb{display:flex;gap:12px;margin-bottom:32px;font-size:13px;color:var(--text-3)}
.board-breadcrumb a{transition:color .2s}
.board-breadcrumb a:hover{color:var(--link)}
.board-list-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
.board-list-heading h2{font-size:28px}
.board-list-heading .tabs{justify-content:flex-end}
.full-notice-list{border-top:3px solid var(--key)}
.full-notice-list .notice-row{padding:22px 14px}
.notice-article{padding:40px 60px;border-radius:24px;background:var(--panel);border:1px solid var(--line-2);box-shadow:0 10px 30px rgba(30,122,24,.07)}
.article-heading{padding-bottom:26px;border-bottom:1px solid var(--line-2)}
.article-heading h2{margin:16px 0 10px;font-size:30px;line-height:1.4;overflow-wrap:anywhere}
.article-meta{font-size:13px;color:var(--text-3)}
.article-body{max-width:860px;min-height:300px;margin:0 auto;padding:34px 0 44px;font-size:17px;line-height:1.95;color:var(--text-2);overflow-wrap:anywhere}
.article-body p+p{margin-top:24px}
.adjacent-posts{margin-top:28px;border-top:1px solid var(--line-2)}
.adjacent-link{display:flex;align-items:baseline;gap:24px;padding:17px 12px;border-bottom:1px solid var(--line);font-size:14px;color:var(--text);transition:background .2s,color .2s}
.adjacent-link span{flex-shrink:0;font-weight:700;color:var(--link)}
.adjacent-link strong{font-weight:600;overflow-wrap:anywhere}
.adjacent-link:hover{background:var(--surface-2)}
.board-back{display:inline-block;margin-top:30px;padding:11px 24px;border-radius:12px;background:var(--key);font-size:14px;font-weight:800;color:var(--key-ink);box-shadow:0 3px 0 var(--key-deep);transition:background .2s}
.board-back:hover{background:var(--key-hi)}
.board-missing{margin-top:20px;color:var(--text-2)}
.legal-doc{max-width:820px;margin:0 auto;padding:8px 0 32px;color:var(--text-2)}
.legal-doc h2{margin:28px 0 12px;font-size:1.35rem}
.legal-doc h3{margin:26px 0 8px;font-size:1.05rem;font-weight:700;color:var(--text)}
.legal-doc p{margin:6px 0;line-height:1.8}
.legal-doc p.legal-sub{margin:4px 0 4px 18px}
.legal-version{display:inline-block;margin:0 0 8px;padding:4px 12px;border-radius:999px;background:var(--tag-bg);font-size:.85rem;font-weight:700;color:var(--tag-ink)}

/* 확률 정보(rates.html · js/rates-page.js) — 분류 표식 = CSS 그림(상자 = 노랑 · 강화 = 초록 · 변경 = 주황) */
.rate-heading{flex-wrap:wrap}
.rate-heading h2{white-space:nowrap}
.rate-lead{margin:-6px 0 4px;font-size:15px;line-height:1.75;color:var(--text-2)}
.rate-base{margin-bottom:30px}
.rate-group+.rate-group{margin-top:44px}
.rate-group-title{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:3px solid var(--key);font-size:20px;font-weight:800;line-height:1.4;letter-spacing:-.02em;color:var(--text)}
.rate-group-count{margin-left:auto;white-space:nowrap;font-size:13px;font-weight:600;color:var(--text-3)}
.rate-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.rate-row{display:flex;align-items:center;gap:14px;min-width:0;padding:16px 10px;border-bottom:1px solid var(--line);transition:background .2s}
.rate-row:hover{background:var(--surface-2)}
.rate-row-text{display:flex;flex-direction:column;flex:1;min-width:0}
.rate-row-text strong{font-size:15px;font-weight:700;line-height:1.5;color:var(--text);overflow-wrap:anywhere}
.rate-row-summary{margin-top:3px;font-size:12.5px;line-height:1.6;color:var(--text-3);overflow-wrap:anywhere}
.rate-row-arrow{flex-shrink:0;color:var(--text-3);transition:color .2s}
.rate-row:hover .rate-row-arrow{color:var(--link)}
.rate-mark{position:relative;display:inline-block;flex-shrink:0;width:34px;height:34px;border-radius:10px;background:var(--surface-2)}
.rate-mark::before,.rate-mark::after{content:"";position:absolute;box-sizing:border-box}
.rate-mark-box::before{left:7px;top:14px;width:20px;height:14px;border-radius:3px;background:linear-gradient(90deg,transparent 40%,#fff6cf 40% 60%,transparent 60%),var(--sub);border:2px solid var(--sub-deep)}
.rate-mark-box::after{left:5px;top:8px;width:24px;height:8px;border-radius:3px;background:linear-gradient(90deg,transparent 40%,#fff6cf 40% 60%,transparent 60%),#FFD766;border:2px solid var(--sub-deep)}
.rate-mark-upgrade::before{left:8px;top:8px;width:18px;height:18px;border-radius:4px;background:linear-gradient(135deg,var(--key-hi),var(--key));border:2px solid var(--key-deep);transform:rotate(45deg)}
.rate-mark-change::before{left:8px;top:9px;width:18px;height:18px;border-radius:0 50% 50% 50%;background:radial-gradient(circle at 40% 60%,#ffe2c9 0 16%,var(--sub-2) 24%);border:2px solid #A4480A;transform:rotate(45deg)}
.rate-summary-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:24px;padding:12px 16px;border-radius:14px;background:var(--surface-2);font-size:15px;line-height:1.6;color:var(--text);overflow-wrap:anywhere}
.rate-summary-label{flex-shrink:0;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--link)}
.rate-summary-line>span+span{flex:1 1 220px;min-width:0}

/* 화면 폭 */
@media(min-width:1600px){.hero h1{font-size:68px}}
@media(max-width:1050px){.header-inner{padding:0 28px;gap:20px}.header nav{gap:22px;margin-left:auto;margin-right:0}.header-start{display:none}.header nav .nav-start{display:inline-block;font-weight:800;color:var(--link)}.wrap{width:calc(100% - 56px)}.news-grid{grid-template-columns:1.6fr 1fr}.feature-body{padding:18px 18px 22px}.feature h3{font-size:19px}.event-grid{grid-template-columns:repeat(2,1fr)}.regions{grid-template-columns:repeat(2,1fr)}.showcase h2{font-size:46px}.home-page .news-section,.home-page .events-section,.home-page .world-section>.wrap{padding:40px 24px}.home-page .closing{width:calc(100% - 56px)}.rates-teaser{padding:34px 24px}.banner-art{width:min(340px,42%)}}
@media(max-width:720px){:root{--header:64px}.header-inner{padding:0 20px}.brand{font-size:18px}.brand img{width:28px;height:28px}.brand small{font-size:8px}.menu-toggle{display:block;margin-left:auto;padding:10px;font-size:14px;font-weight:700;color:var(--text)}.menu-toggle span{margin-left:8px}.header nav{display:none;position:absolute;left:0;right:0;top:var(--header);flex-direction:column;gap:2px;padding:14px 24px 22px;background:var(--bg);border-bottom:1px solid var(--line)}.header nav.open{display:flex}.header nav a{font-size:16px;color:var(--text)}.wrap{width:calc(100% - 40px)}.hero{min-height:600px}.hero h1{font-size:44px}.hero p{font-size:15px}.hero-badge{font-size:11px;letter-spacing:.08em}.start-button{min-height:52px;padding:0 32px;font-size:16px}.hero-bottom{bottom:22px}.announcement .wrap{gap:10px;padding:12px 0;font-size:13px}.announcement-tail{display:none}.section{padding:50px 0}.section-heading{flex-direction:column;align-items:flex-start;gap:9px;margin-bottom:22px}h2{font-size:27px}.news-grid,.feature-grid,.event-grid{grid-template-columns:1fr}.board-top h3{font-size:17px}.tabs button{padding:6px 11px;font-size:12px}.notice-row{gap:9px;padding:18px 4px;font-size:14px}.notice-type{min-width:52px;font-size:11px}.notice-date,.board-date{font-size:11px}.world-invite{min-height:260px;padding:22px}.world-heading{display:block}.world-heading p{margin-top:14px;font-size:15px}.showcase{min-height:520px}.showcase-media img{object-position:72% 100%}.showcase-inner{padding:60px 0}.showcase h2{font-size:38px}.showcase p{font-size:16px}.skill-chips li{font-size:13px}.skill-chips img{width:34px;height:34px}.regions{grid-template-columns:1fr 1fr;gap:10px}.lore strong{font-size:16px}.lore-body p{font-size:15px}.event-card{min-height:190px;padding:22px}.event-card h3{font-size:20px}.closing h2{font-size:27px}.footer-inner{flex-wrap:wrap;gap:16px}.footer-inner>div{width:calc(100% - 175px)}.footer-inner>div p{font-size:12px}.preview-note{font-size:11px}dialog{padding:22px}dialog h2{font-size:22px}.home-page .news-section,.home-page .world-section,.home-page .events-section,.home-page .rates-teaser,.home-page .closing{margin-top:20px;margin-bottom:20px}.home-page .news-section,.home-page .events-section,.home-page .rates-teaser,.home-page .closing,.home-page .world-section>.wrap{width:calc(100% - 20px)}.home-page .news-section,.home-page .events-section,.home-page .world-section>.wrap{padding:32px 16px}.home-page .closing{margin-bottom:36px;padding:48px 16px}.rates-teaser{flex-direction:column;align-items:flex-start;gap:16px;padding:30px 16px}.rates-teaser>img{display:none}.rates-teaser-link{width:100%;justify-content:space-between}.section-link{font-size:13px}.board-banner{padding:34px 0 30px}.board-banner .wrap{flex-direction:column;align-items:flex-start;gap:20px}.banner-art{width:100%;max-width:420px}.banner-art .banner-slime{left:auto;right:-6px;width:64px}.board-banner h1{font-size:30px}.board-banner p{font-size:14px}.board-main{padding-bottom:56px}.board-list-heading{gap:10px}.board-list-heading h2{font-size:23px}.board-list-heading .tabs{justify-content:flex-start}.board-guide-link{text-align:left}.notice-article{padding:26px 18px;border-radius:18px}.article-heading h2{font-size:24px}.article-body{min-height:260px;padding:28px 0;font-size:16px}.full-notice-list .notice-row{flex-wrap:wrap;padding:20px 4px}.full-notice-list .notice-row strong{flex:1;min-width:150px}.adjacent-link{gap:14px}.article-meta{font-size:12px}.block-table table{font-size:12px}.article-body .block-heading{margin-top:34px;font-size:19px}.article-body .block-list{font-size:15px}.rate-list{grid-template-columns:1fr}.rate-row{gap:12px;padding:14px 4px}.rate-group-title{font-size:18px}.rate-summary-line{padding:10px 12px;font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.bg-video{display:none}}

/* ★ 62차 이어서 (19) 게임 안 보기(app=1 — 게임의 「웹 가이드북」 창 · js/app-mode.js 가 html 에 app-mode 를 단다): 머리 · 발 · 게임 시작 · 배너 그림을 숨기고 배너 · 여백을 줄인다(창 폭 약 1,030px). */
html.app-mode .header,html.app-mode footer,html.app-mode .skip-link,html.app-mode .board-breadcrumb,html.app-mode .banner-art,html.app-mode [data-play],html.app-mode .preview-note{display:none!important}
html.app-mode .board-banner{padding:22px 0 18px}
html.app-mode .board-banner h1{font-size:30px}
html.app-mode .board-banner p{margin-top:6px}
html.app-mode .board-main{min-height:0;padding:18px 0 40px}
html.app-mode .wrap{width:calc(100% - 48px)}
/* ★ 62차 이어서 (19) 게임 안 보기 글꼴 = 시스템 글꼴 — 웹 글꼴(Pretendard 약 469KB)을 받지 않는다(가이드북 한 번 열 때 약 556KB → 약 25KB · 홈페이지 트래픽 월 10GB). */
html.app-mode{--font:'Malgun Gothic','Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,sans-serif}

/* ★ 62차 이어서 (21) 본판 승격: 표 첫 칸 아이템 아이콘(`js/item-icons.js` → blocks.js) · 원작 슬라임 그림은 픽셀이 뭉개지지 않게 */
.cell-icon{width:28px;height:28px;object-fit:contain;vertical-align:middle;margin-right:8px}
.loader-slime,.mascot img,.banner-slime,img.slime-sprite{image-rendering:pixelated;object-fit:contain}