/* ==========================================================================
   Maple v1 — 공통 스타일 (클래식 메이플 테마)
   하늘 · 구름 · 잔디 바닥 · 나무 간판 · 주황 광택 버튼 · 게임 창 느낌 패널
   ========================================================================== */

:root {
    --sky-top: #7fcdf2;
    --sky-mid: #bfe7fa;
    --sky-low: #e8f7fd;

    --surface: #fffdf6;          /* 게임 창 크림 */
    --surface-soft: #fbf4e2;
    --line: #e3cf9f;             /* 창 테두리 금빛 베이지 */
    --line-soft: #efe3c4;

    --wood: #9a6232;
    --wood-dark: #6e4220;
    --wood-light: #c58a4e;

    --grass: #6dbb3f;
    --grass-dark: #4c9a2a;
    --dirt: #a7703d;
    --dirt-dark: #7c5028;

    --text: #3d2f1f;
    --text-soft: #6b5a44;
    --text-muted: #9c8a6e;

    --maple: #f08a24;
    --maple-light: #ffb54d;
    --maple-dark: #c9620f;
    --maple-soft: #fff0da;
    --sky: #3fa7dc;
    --sky-soft: #e3f4fc;
    --leaf: #5aa832;
    --leaf-soft: #e7f5dc;
    --gold: #f5c12e;

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --shadow: 0 3px 0 rgba(160, 120, 60, .18), 0 8px 18px rgba(60, 90, 120, .10);
    --shadow-hover: 0 3px 0 rgba(160, 120, 60, .22), 0 12px 24px rgba(60, 90, 120, .16);

    --container: 1160px;
    --header-h: 70px;
}

/* --- Base ---------------------------------------------------------------- */
html { box-sizing: border-box; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: inherit; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    word-break: keep-all;
    /* 하늘 + 구름 (이미지 없이 그라디언트만) */
    background-color: var(--sky-low);
    background-image:
        radial-gradient(ellipse 140px 34px at 12% 150px, rgba(255,255,255,.95) 60%, transparent 62%),
        radial-gradient(ellipse 80px 40px at 15% 132px, rgba(255,255,255,.95) 60%, transparent 62%),
        radial-gradient(ellipse 170px 38px at 82% 260px, rgba(255,255,255,.85) 60%, transparent 62%),
        radial-gradient(ellipse 90px 44px at 79% 240px, rgba(255,255,255,.85) 60%, transparent 62%),
        radial-gradient(ellipse 120px 28px at 55% 520px, rgba(255,255,255,.7) 60%, transparent 62%),
        linear-gradient(180deg, var(--sky-top) 0, var(--sky-mid) 480px, var(--sky-low) 1100px);
    background-repeat: no-repeat;
}
body.lang-zh-TW {
    font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Segoe UI", Arial, sans-serif;
    word-break: normal;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.3; color: var(--text); }
h1 { font-size: clamp(28px, 4vw, 38px); }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0; color: var(--text-soft); }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

.site-main { flex: 1; }
.mt { margin-top: 20px; }

.eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--maple);
    border-radius: 999px;
    box-shadow: 0 2px 0 var(--maple-dark);
}

/* --- Header (나무 간판) --------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg, var(--wood-light) 0, var(--wood) 55%, var(--wood-dark) 100%);
    border-bottom: 4px solid var(--grass);
    box-shadow: 0 3px 0 var(--grass-dark), 0 6px 14px rgba(0,0,0,.15);
}
.header-inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 24px;
}

.logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo-mark {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    font-size: 22px;
    background: #fff7e6;
    border: 2px solid var(--gold);
    border-radius: 50%;
    box-shadow: 0 2px 0 var(--wood-dark);
}
.logo-text {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.01em;
    color: #fff;
    text-shadow: 0 2px 0 var(--wood-dark);
}
.logo-text b { color: var(--gold); }

.site-nav { flex: 1; }
.nav-list { display: flex; gap: 4px; }
.nav-item { position: relative; }
.nav-item > a {
    display: block;
    padding: 9px 16px;
    font-weight: 800;
    color: #fff5e0;
    border-radius: 999px;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
    transition: background .15s;
}
.nav-item > a:hover,
.nav-item:focus-within > a { background: rgba(255,255,255,.16); }
.nav-item.is-active > a {
    color: var(--wood-dark);
    background: linear-gradient(180deg, #fff6d8, var(--gold));
    text-shadow: none;
    box-shadow: 0 2px 0 var(--wood-dark);
}

.sub-list {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    margin-top: 8px;
    padding: 6px;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hover);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
/* hover 시 간격 사이로 마우스가 빠지지 않도록 */
.sub-list::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.has-sub:hover .sub-list,
.has-sub:focus-within .sub-list { opacity: 1; visibility: visible; transform: none; }
.sub-list a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-soft);
    white-space: nowrap;
}
.sub-list a:hover { background: var(--maple-soft); color: var(--maple-dark); }
.sub-list a.is-current { color: var(--maple-dark); font-weight: 800; }

/* 언어 선택 */
.lang-switch {
    display: flex; align-items: center; gap: 2px;
    padding: 3px;
    background: rgba(0,0,0,.18);
    border-radius: 999px;
    flex-shrink: 0;
}
.lang-icon { padding: 0 4px 0 6px; font-size: 14px; }
.lang-switch a {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff5e0;
    border-radius: 999px;
    white-space: nowrap;
}
.lang-switch a:hover { background: rgba(255,255,255,.16); }
.lang-switch a.is-current { color: var(--wood-dark); background: #fff7e6; }

.nav-toggle {
    display: none;
    margin-left: auto;
    width: 42px; height: 42px;
    padding: 10px;
    border: 2px solid rgba(255,255,255,.4);
    border-radius: 12px;
    background: rgba(0,0,0,.15);
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    height: 2px;
    margin: 4px 0;
    background: #fff;
    border-radius: 2px;
}

/* --- Buttons / chips / badges (광택 버튼) -------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 24px;
    font: inherit;
    font-weight: 800;
    color: #fff;
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
    transition: filter .15s, transform .1s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); }
.btn-primary {
    background: linear-gradient(180deg, var(--maple-light) 0, var(--maple) 55%, var(--maple-dark) 100%);
    border-color: var(--maple-dark);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 #9c4a0a;
}
.btn-sky {
    background: linear-gradient(180deg, #7fd0f5 0, var(--sky) 55%, #2a86b8 100%);
    border-color: #2a86b8;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 #1f6a93;
}
.btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.chip {
    display: inline-block;
    padding: 1px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-soft);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    vertical-align: middle;
}

.badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 800;
    border-radius: 999px;
    vertical-align: middle;
}
.badge-soon { color: #8a5a00; background: #fff1c2; border: 1px solid #f0cf6a; }
.badge-new { color: #fff; background: var(--leaf); margin-bottom: 6px; }

/* --- Layout blocks ------------------------------------------------------- */
.section { padding: 26px 0; }
.section-tint {
    padding: 40px 0;
    margin: 12px 0;
    background: rgba(255, 253, 246, .6);
    border-top: 2px dashed var(--line);
    border-bottom: 2px dashed var(--line);
}
.stack > * + * { margin-top: 20px; }

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.section-head h2,
.panel-title,
.group-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.section-head h2::before,
.panel-title::before,
.group-title:not(:has(.job-emblem))::before { content: "🍁"; font-size: 16px; }
.panel-title { margin-bottom: 16px; }
.more { font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
a.more:hover { color: var(--maple-dark); }
.count { font-size: 13px; color: var(--maple-dark); font-weight: 800; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* 게임 창 느낌: 크림 바탕 + 금빛 테두리 + 안쪽 하이라이트 */
.panel,
.card {
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 2px #fff, var(--shadow);
}
.panel { padding: 24px; min-width: 0; }
.card { display: block; padding: 20px; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px #fff, var(--shadow-hover); }
.card h3 { margin-bottom: 6px; }
.card p { font-size: 14px; }

.banner {
    margin-bottom: 16px;
    padding: 12px 16px;
    font-size: 14px;
    color: #7a5a14;
    background: #fff8dc;
    border: 2px dashed #efd07a;
    border-radius: var(--radius-sm);
}

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tab {
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-soft);
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 999px;
}
.tab:hover { border-color: var(--maple); color: var(--maple-dark); }
.tab.is-current {
    color: #fff;
    background: linear-gradient(180deg, #7fd0f5, var(--sky));
    border-color: #2a86b8;
}

.input {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    font: inherit;
    color: var(--text);
    border: 2px solid var(--line);
    border-radius: 999px;
    background: #fff;
}
.input:focus { outline: none; border-color: var(--maple); box-shadow: 0 0 0 3px var(--maple-soft); }

/* --- Hero ---------------------------------------------------------------- */
.hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 32px;
    padding-top: 52px;
    padding-bottom: 44px;
}
.hero h1 {
    font-size: clamp(44px, 6.5vw, 72px);
    font-weight: 900;
    letter-spacing: -.02em;
    margin-bottom: 14px;
    color: #fff;
    text-shadow: 0 3px 0 var(--wood), 0 6px 0 rgba(110, 66, 32, .35);
    -webkit-text-stroke: 1px var(--wood-dark);
}
.hero h1 span { color: var(--gold); }
.hero p { font-size: 17px; font-weight: 600; margin-bottom: 26px; color: #2d4a5e; }

/* 이미지 없이 CSS로 그린 헤네시스 풍경 */
.hero-art {
    position: relative;
    height: 290px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(180deg, #8fd6f6 0%, #d8f1fc 75%);
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px var(--line), var(--shadow-hover);
}
.hero-sun {
    position: absolute; top: 30px; right: 44px;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #ffe07a;
    box-shadow: 0 0 0 12px rgba(255, 224, 122, .35);
}
.hero-cloud {
    position: absolute;
    height: 26px;
    background: #fff;
    border-radius: 999px;
}
.hero-cloud::before {
    content: "";
    position: absolute;
    left: 22%; top: -14px;
    width: 40%; height: 32px;
    background: #fff;
    border-radius: 50%;
}
.hero-cloud.c1 { top: 52px; left: 34px; width: 110px; }
.hero-cloud.c2 { top: 112px; left: 52%; width: 80px; opacity: .9; }
.hero-hill { position: absolute; border-radius: 50% 50% 0 0; }
.hero-hill.h1 { left: -40px; bottom: 0; width: 70%; height: 110px; background: #9fd67a; }
.hero-hill.h2 {
    right: -60px; bottom: 0; width: 80%; height: 70px;
    background: linear-gradient(180deg, var(--grass) 0 18px, var(--dirt) 18px, var(--dirt-dark));
    border-radius: 40% 40% 0 0;
}
.hero-sign {
    position: absolute; left: 14%; bottom: 96px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 900;
    color: #fff5e0;
    background: linear-gradient(180deg, var(--wood-light), var(--wood));
    border: 2px solid var(--wood-dark);
    border-radius: 6px;
    transform: rotate(-4deg);
}
.hero-sign::after {
    content: "";
    position: absolute; left: 50%; top: 100%;
    width: 6px; height: 28px;
    margin-left: -3px;
    background: var(--wood-dark);
}
.hero-leaf {
    position: absolute;
    left: 58%; bottom: 44px;
    width: 76px; height: 76px;
    display: grid; place-items: center;
    font-size: 40px;
    background: #fff;
    border: 3px solid var(--gold);
    border-radius: 50%;
    box-shadow: var(--shadow-hover);
}

/* --- Home ---------------------------------------------------------------- */
.home-top { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.quick {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 14px 8px;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    background: var(--surface-soft);
    border: 2px solid var(--line-soft);
    border-radius: var(--radius-sm);
    transition: background .15s, border-color .15s;
}
.quick span { font-size: 22px; }
.quick:hover { background: var(--maple-soft); border-color: var(--maple-light); }

.search-form { display: flex; gap: 8px; }
.search-form-compact .btn { padding: 8px 18px; }
.search-form-compact .input { padding: 8px 14px; }

/* --- Notice -------------------------------------------------------------- */
.notice-list li + li { border-top: 1px dashed var(--line); }
.notice-list a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 4px;
}
.notice-list a:hover .notice-title { color: var(--maple-dark); }
.tag {
    flex-shrink: 0;
    min-width: 64px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    color: #fff;
    background: var(--maple);
    border-radius: 6px;
}
.tag-maint { background: #8a97a8; }
.tag-update { background: var(--sky); }
.tag-event { background: var(--leaf); }
.notice-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.notice-list time { flex-shrink: 0; font-size: 13px; color: var(--text-muted); }

.pager { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.pager-btn {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    font-size: 14px;
    font-weight: 700;
    border: 2px solid var(--line);
    border-radius: 10px;
}
.pager-btn.is-current { color: #fff; background: var(--maple); border-color: var(--maple-dark); }

/* --- Page head ----------------------------------------------------------- */
.page-head { padding: 40px 0 26px; }
.page-head h1 {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 8px;
    color: #fff;
    text-shadow: 0 2px 0 var(--wood), 0 4px 0 rgba(110, 66, 32, .3);
}
.page-head p { color: #2d4a5e; font-weight: 600; }

/* --- Game ---------------------------------------------------------------- */
.feature-icon,
.mini-icon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    margin-bottom: 12px;
    font-size: 26px;
    background: var(--sky-soft);
    border: 2px solid #bfe3f5;
    border-radius: 14px;
}
.mini-card {
    padding: 16px;
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
}
.mini-icon { width: 40px; height: 40px; font-size: 20px; margin-bottom: 8px; }
.mini-card h3 { font-size: 15px; margin-bottom: 4px; }
.mini-card p { font-size: 13px; }

.prose h2 { margin-bottom: 10px; }
.prose p { line-height: 1.85; }

.steps { counter-reset: step; display: grid; gap: 10px; }
.steps li {
    counter-increment: step;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px;
    background: var(--surface-soft);
    border-radius: var(--radius-sm);
}
.steps li::before {
    content: counter(step);
    width: 28px; height: 28px;
    flex-shrink: 0;
    display: grid; place-items: center;
    font-weight: 900;
    color: #fff;
    background: var(--leaf);
    border-radius: 50%;
}
.steps b { flex: 1; }
.steps span { color: var(--maple-dark); font-weight: 800; }

.boss-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 4px;
}
.boss-list li + li { border-top: 1px dashed var(--line); }
.boss-name { font-weight: 700; }
.boss-name::before { content: "👹 "; }

.region {
    padding: 14px 16px;
    background: var(--surface-soft);
    border-radius: var(--radius-sm);
}
.region h3 { margin-bottom: 4px; }
.region p { font-size: 14px; }

/* --- Jobs ---------------------------------------------------------------- */
.job-warrior  { --job: #d9573f; --job-soft: #fde4de; }
.job-magician { --job: #7d6fd3; --job-soft: #ebe8fb; }
.job-archer   { --job: #4f9f45; --job-soft: #e2f3df; }
.job-thief    { --job: #6c7b8e; --job-soft: #e7ebf1; }
.job-pirate   { --job: #2f95c2; --job-soft: #def0f8; }

.job-card { text-align: center; border-top: 5px solid var(--job); }
.job-emblem {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    margin: 0 auto 12px;
    font-size: 22px;
    font-weight: 900;
    color: var(--job);
    background: var(--job-soft);
    border: 2px solid var(--job);
    border-radius: 50%;
}
.job-emblem-lg { width: 76px; height: 76px; margin: 0; font-size: 30px; flex-shrink: 0; }
.job-emblem-sm { width: 34px; height: 34px; margin: 0; font-size: 15px; }
.job-stat { font-size: 12px; font-weight: 800; color: var(--job, var(--text-muted)); margin-bottom: 8px; }
.job-detail { display: flex; gap: 20px; align-items: flex-start; border-left: 6px solid var(--job); scroll-margin-top: 90px; }
.job-body { flex: 1; min-width: 0; }
.job-body h2 { margin-bottom: 6px; }
.job-facts {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 6px 24px;
    margin: 14px 0;
    font-size: 14px;
}
.job-facts dt { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.job-facts dd { font-weight: 700; }
.job-tree { display: grid; gap: 6px; }
.job-tree-label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.job-path {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    background: var(--job-soft);
    border-radius: 8px;
}

/* --- Skills -------------------------------------------------------------- */
[id] { scroll-margin-top: 90px; }
.group-title { margin-bottom: 12px; }
.skill-card { display: flex; gap: 14px; align-items: flex-start; }
.skill-icon {
    width: 46px; height: 46px;
    flex-shrink: 0;
    display: grid; place-items: center;
    font-size: 13px;
    font-weight: 900;
    color: var(--job);
    background: var(--job-soft);
    border: 2px solid var(--job);
    border-radius: 12px;
}
.job-beginner { --job: #c9620f; --job-soft: #fff0da; }
.skill-body { flex: 1; min-width: 0; }
.skill-body p { margin-top: 6px; }
.skill-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}
.chip-active { color: #fff; background: var(--maple); border-color: var(--maple-dark); }
.chip-passive { color: #fff; background: #8a97a8; border-color: #6f7b8b; }
.chip-buff { color: #fff; background: var(--sky); border-color: #2a86b8; }
.skill-book { color: #2a6fb8; }
.skill-req { margin-top: 8px; font-size: 13px; color: var(--text-soft); }
.hl { font-style: normal; font-weight: 700; color: var(--maple-dark); }
.skill-levels { margin-top: 10px; font-size: 13px; }
.skill-levels summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--sky);
}
.skill-levels ol {
    max-height: 260px;
    overflow-y: auto;
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--surface-soft);
    border-radius: 8px;
}
.skill-levels li { display: flex; gap: 10px; padding: 4px 0; }
.skill-levels li + li { border-top: 1px dashed var(--line-soft); }
.skill-levels b { flex-shrink: 0; width: 44px; color: var(--text-muted); }

/* --- Items / Market ------------------------------------------------------ */
.item-slot {
    width: 52px; height: 52px;
    flex-shrink: 0;
    display: grid; place-items: center;
    font-size: 20px;
    font-weight: 900;
    color: var(--maple-dark);
    background: linear-gradient(180deg, #fffaf0, #fbe9c8);
    border: 2px solid #e2c48d;
    border-radius: 12px;
    box-shadow: inset 0 0 0 2px #fff;
}
.item-card .item-slot { margin-bottom: 12px; }
.item-level { font-size: 12px; font-weight: 800; color: var(--leaf); margin-bottom: 6px; }
.item-obtain { margin-top: 10px; font-size: 12px; color: var(--text-muted); }

.market-list { display: grid; gap: 10px; }
.market-list-wide { grid-template-columns: repeat(2, 1fr); }
.market-card {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
}
.market-info { flex: 1; min-width: 0; }
.market-info h3 { font-size: 15px; margin-bottom: 2px; }
.market-meta { font-size: 12px; color: var(--text-muted); }
.market-price { font-weight: 900; color: var(--maple-dark); white-space: nowrap; text-align: right; }
.market-price small { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); }

.toolbar { display: flex; gap: 10px; margin-bottom: 16px; }

/* --- Ranking ------------------------------------------------------------- */
.ranking-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 2px dashed var(--line);
}
.ranking-toolbar .tabs { margin: 0; }
.ranking-toolbar .search-form { flex: 0 1 320px; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    color: var(--wood-dark);
    background: #f7e8c6;
    border-bottom: 2px solid var(--line);
}
.table th:first-child { border-radius: 8px 0 0 0; }
.table th:last-child { border-radius: 0 8px 0 0; }
.table td { padding: 10px 12px; border-bottom: 1px dashed var(--line); white-space: nowrap; }
.table tbody tr:hover { background: var(--maple-soft); }
.col-rank { width: 64px; text-align: center !important; }
.col-num { text-align: right !important; }
.cell-strong { font-weight: 800; }
.rank {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px;
    font-weight: 900;
    font-size: 13px;
    color: var(--text-soft);
    background: var(--surface-soft);
    border-radius: 50%;
}
.rank-1 { color: #fff; background: var(--gold); box-shadow: 0 2px 0 #c7960f; }
.rank-2 { color: #fff; background: #aab6c3; box-shadow: 0 2px 0 #7f8b98; }
.rank-3 { color: #fff; background: #d5925c; box-shadow: 0 2px 0 #a86a38; }

.char-cell { display: flex; align-items: center; gap: 12px; }

/* 캐릭터 이미지 영역: 렌더 이미지가 없으면 이니셜 placeholder */
.avatar {
    width: 56px; height: 56px;
    flex-shrink: 0;
    display: grid; place-items: center;
    overflow: hidden;
    background: linear-gradient(180deg, var(--sky-soft), var(--job-soft, var(--leaf-soft)));
    border: 2px solid var(--line);
    border-radius: 12px;
}
.avatar-sm { width: 34px; height: 34px; border-radius: 10px; }
.avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.avatar-empty { font-weight: 900; color: var(--job, var(--text-muted)); }
.avatar-sm .avatar-empty { font-size: 13px; }

.empty-state {
    padding: 36px 16px;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-soft);
    border: 2px dashed var(--line);
    border-radius: var(--radius-sm);
}
.table-note { margin-top: 12px; font-size: 12px; color: var(--text-muted); }

/* 랭킹 조회 결과 */
.result-list { display: grid; gap: 10px; }
.result-card {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 16px;
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    border-left: 5px solid var(--job, var(--line));
    border-radius: var(--radius-sm);
}
.result-info { flex: 1; min-width: 0; }
.result-info h3 { font-size: 17px; }
.result-meta { font-size: 13px; color: var(--text-soft); }
.result-ranks { display: flex; gap: 10px; }
.result-rank {
    min-width: 88px;
    padding: 6px 12px;
    text-align: center;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 12px;
}
.result-rank span { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.result-rank b { font-size: 18px; color: var(--maple-dark); }

/* --- Footer (잔디 바닥) --------------------------------------------------- */
.site-footer { margin-top: 48px; }
.footer-ground {
    height: 22px;
    background:
        radial-gradient(circle at 10px 0, var(--grass) 10px, transparent 11px) 0 0 / 20px 22px repeat-x,
        linear-gradient(180deg, transparent 0 10px, var(--grass) 10px);
}
.footer-body {
    padding: 26px 0 32px;
    background: linear-gradient(180deg, var(--grass) 0 6px, var(--dirt) 6px, var(--dirt-dark) 100%);
}
.footer-brand {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    margin-bottom: 6px;
    font-weight: 900;
    color: #fff;
}
.footer-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(0,0,0,.2);
    border-radius: 999px;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #9df06b; }
.site-footer p { font-size: 13px; color: #f7e6cf; }
.footer-muted { color: #d9bf9c !important; margin-top: 2px !important; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
    .header-inner { gap: 14px; }
    .nav-item > a { padding: 9px 12px; }
    .lang-icon { display: none; }
}

@media (max-width: 1024px) {
    .grid-5 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .nav-toggle { display: block; order: 3; margin-left: 0; }
    .lang-switch { margin-left: auto; }
    .site-nav {
        display: none;
        position: absolute;
        top: calc(var(--header-h) + 4px);
        left: 0; right: 0;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        padding: 12px 20px 20px;
        background: var(--surface);
        border-bottom: 3px solid var(--line);
        box-shadow: var(--shadow-hover);
    }
    .nav-open .site-nav { display: block; }
    .nav-list { flex-direction: column; gap: 2px; }
    .nav-item > a { color: var(--text); text-shadow: none; border-radius: var(--radius-sm); }
    .nav-item > a:hover { background: var(--surface-soft); }
    .sub-list {
        position: static;
        display: flex; flex-wrap: wrap; gap: 4px;
        margin: 0 0 8px;
        padding: 0 0 0 12px;
        background: none;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .sub-list::before { display: none; }

    .hero-inner { grid-template-columns: 1fr; padding-top: 32px; padding-bottom: 28px; }
    .hero-art { height: 210px; }
    .home-top,
    .grid-2,
    .grid-3,
    .market-list-wide { grid-template-columns: 1fr; }
    .grid-4,
    .grid-5 { grid-template-columns: repeat(2, 1fr); }
    .ranking-toolbar .search-form { flex: 1 1 100%; }
}

@media (max-width: 560px) {
    .container { padding: 0 16px; }
    .panel { padding: 18px; }
    .logo-text { display: none; }
    .lang-switch a { padding: 4px 8px; }
    .grid-4,
    .grid-5 { grid-template-columns: 1fr; }
    .job-detail { flex-direction: column; }
    .job-facts { grid-template-columns: 1fr; }
    .notice-list time { display: none; }
    .result-card { flex-wrap: wrap; }
    .result-ranks { width: 100%; }
    .result-rank { flex: 1; }
    .hero p br { display: none; }
}

/* --- Ranking preview cards ------------------------------------------------ */
.ranking-preview-list {
    display: grid;
    gap: 12px;
}

.ranking-preview-card {
    display: grid;
    grid-template-columns: 54px 120px minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
    padding: 16px;
    background: var(--surface-soft);
    border: 2px solid var(--line-soft);
    border-radius: var(--radius);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.ranking-preview-card:hover {
    transform: translateY(-2px);
    border-color: var(--maple-light);
    box-shadow: var(--shadow);
}

.ranking-preview-card.is-top {
    background: linear-gradient(90deg, #fff8dc 0, var(--surface-soft) 34%);
}

.ranking-preview-card.is-top-1 { border-color: #e3b51f; }
.ranking-preview-card.is-top-2 { border-color: #aab6c3; }
.ranking-preview-card.is-top-3 { border-color: #d5925c; }

.ranking-preview-rank {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ranking-preview-rank .rank {
    width: 38px;
    height: 38px;
    font-size: 15px;
}

.ranking-preview-avatar {
    min-height: 148px;
    background:
        linear-gradient(180deg, rgba(227,244,252,.9), rgba(255,253,246,.72));
    border: 2px dashed var(--line);
    border-radius: 14px;
}

.ranking-preview-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ranking-preview-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 3px;
}

.ranking-preview-name-row h3 {
    font-size: 20px;
}

.ranking-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.ranking-preview-meta strong {
    color: var(--maple-dark);
}

.ranking-preview-equipment {
    margin-top: 13px;
}

.ranking-preview-equipment-title {
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-soft);
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.equipment-chip {
    min-width: 0;
    padding: 6px 9px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
}


@media (max-width: 760px) {
    .ranking-preview-card {
        grid-template-columns: 44px 88px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .ranking-preview-avatar {
        min-height: 120px;
    }

    .equipment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .ranking-preview-card {
        grid-template-columns: 40px 76px minmax(0, 1fr);
    }

    .ranking-preview-avatar {
        min-height: 108px;
    }

    .ranking-preview-name-row h3 {
        font-size: 17px;
    }

    .equipment-grid {
        grid-template-columns: 1fr;
    }
}

/* 랭킹 장비 hover 툴팁 — 인게임 ItemInfoLogic의 정보 순서를 축약 재현 */
.equipment-chip {
    position: relative;
    padding: 0;
    overflow: visible;
}

.equipment-trigger {
    width: 100%;
    min-width: 0;
    padding: 6px 9px;
    text-align: left;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: help;
}

.equipment-trigger:focus-visible {
    outline: 2px solid var(--maple);
    outline-offset: 1px;
}

.equipment-trigger span {
    display: block;
    margin-bottom: 1px;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
}

.equipment-trigger b {
    display: block;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    z-index: 120;
    width: 286px;
    max-width: min(286px, calc(100vw - 36px));
    padding: 13px 14px;
    color: #ededed;
    background: rgba(25, 27, 31, .97);
    border: 1px solid #5d626b;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 5px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

.item-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 10px;
    height: 10px;
    background: rgba(25, 27, 31, .97);
    border-right: 1px solid #5d626b;
    border-bottom: 1px solid #5d626b;
    transform: translate(-50%, -5px) rotate(45deg);
}

.equipment-chip:hover .item-tooltip,
.equipment-chip:focus-within .item-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.item-tooltip-title {
    padding-right: 4px;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    line-height: 1.3;
}

.item-tooltip-sub {
    margin-top: 2px;
    font-size: 10px;
    color: #aeb5c0;
}

.item-tooltip-divider {
    height: 1px;
    margin: 8px 0;
    background: #4b5058;
}

.item-tooltip-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 3px 8px;
    align-items: center;
    font-size: 11px;
}

.item-tooltip-grid span,
.item-tooltip-row span {
    color: #cfd3d8;
}

.item-tooltip-grid b {
    color: #f3f3f3;
    text-align: right;
}

.item-tooltip-job {
    margin-top: 7px;
    font-size: 10px;
    color: #cfd3d8;
}

.item-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 1px 0;
    font-size: 11px;
}

.item-tooltip-row b {
    flex-shrink: 0;
    color: #f3f3f3;
}

.item-tooltip-row.stat b {
    color: #8fd3ff;
}

.item-tooltip-notice {
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #ff9b4b;
}

.item-tooltip-price {
    margin-top: 7px;
    text-align: right;
    font-size: 10px;
    color: #d7d7d7;
}

@media (max-width: 760px) {
    .item-tooltip {
        left: 0;
        width: 270px;
        transform: translate(0, 5px);
    }

    .equipment-chip:hover .item-tooltip,
    .equipment-chip:focus-within .item-tooltip {
        transform: translate(0, 0);
    }

    .item-tooltip::after {
        left: 24px;
    }
}


/* --- Ranking live data ---------------------------------------------------- */
.ranking-preview-rank{
    flex-direction:column;
    gap:6px;
}
.rank-delta{
    min-height:16px;
    font-size:11px;
    font-weight:900;
    line-height:1;
    letter-spacing:-.01em;
}
.rank-delta-up{color:#d7352b;}
.rank-delta-down{color:#2f6bd8;}
.rank-delta-same{color:#8c806d;}
.rank-delta-new{color:#d47a13;}
.rank-delta-none{color:#b3a58e;}

.ranking-preview-avatar{
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
}
.ranking-preview-avatar img{
    width:100%;
    height:100%;
    object-fit:contain;
    image-rendering:pixelated;
}
.ranking-preview-avatar .avatar-empty{
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    font-size:34px;
}
.ranking-pet-badge{
    position:absolute;
    left:6px;
    bottom:6px;
    max-width:calc(100% - 12px);
    overflow:hidden;
    padding:3px 6px;
    font-size:9px;
    font-weight:900;
    color:#fff;
    text-overflow:ellipsis;
    white-space:nowrap;
    background:rgba(59,46,32,.78);
    border:1px solid rgba(255,255,255,.46);
    border-radius:999px;
    backdrop-filter:blur(2px);
}

.equipment-chip.showcase-weapon{
    grid-column:span 2;
    border-color:#efb948;
    background:linear-gradient(180deg,#fff8dc,#fffdf6);
    box-shadow:inset 0 0 0 1px rgba(239,185,72,.18);
}
.equipment-chip.showcase-weapon .equipment-trigger span{
    color:#b5670c;
}
.equipment-chip.showcase-weapon .equipment-trigger b{
    color:#8e4d08;
    font-size:13px;
}
.ranking-equipment-empty{
    grid-column:1/-1;
    padding:9px 10px;
    font-size:11px;
    color:var(--text-muted);
    background:#fff;
    border:1px dashed var(--line);
    border-radius:8px;
}

@media (max-width:760px){
    .equipment-chip.showcase-weapon{grid-column:1/-1;}
}


/* ==========================================================================
   Color themes
   - classic: refined Maple cream / amber
   - ocean: cool blue / teal
   - night: navy / violet
   ========================================================================== */

:root,
html[data-theme="classic"] {
    --sky-top: #76c9ee;
    --sky-mid: #b8e5f8;
    --sky-low: #edf9fd;

    --surface: #fffdf8;
    --surface-soft: #f8f2e6;
    --line: #ddc58f;
    --line-soft: #ecddbc;

    --wood: #8f5930;
    --wood-dark: #60391d;
    --wood-light: #bd824a;

    --grass: #62ad3c;
    --grass-dark: #438a28;
    --dirt: #9b6839;
    --dirt-dark: #704721;

    --text: #33291e;
    --text-soft: #675642;
    --text-muted: #927f66;

    --maple: #ef7e1c;
    --maple-light: #ffb447;
    --maple-dark: #bb560b;
    --maple-soft: #fff0d8;

    --sky: #379ed0;
    --sky-soft: #e0f3fb;
    --leaf: #58a23a;
    --leaf-soft: #e7f3de;
    --gold: #f2bd2b;

    --theme-panel-glow: rgba(255, 255, 255, .78);
    --theme-rank-top: #fff5d4;
    --theme-control-bg: rgba(38, 27, 16, .20);
    --theme-control-text: #fff7e7;

    --shadow:
        0 2px 0 rgba(143, 94, 38, .14),
        0 10px 28px rgba(56, 89, 108, .11);
    --shadow-hover:
        0 2px 0 rgba(143, 94, 38, .18),
        0 16px 34px rgba(56, 89, 108, .17);
}

html[data-theme="ocean"] {
    --sky-top: #2c7ea5;
    --sky-mid: #72b9d2;
    --sky-low: #dceff2;

    --surface: #f8fcfc;
    --surface-soft: #e9f4f3;
    --line: #93c1bc;
    --line-soft: #c2deda;

    --wood: #32677a;
    --wood-dark: #214656;
    --wood-light: #4e91a2;

    --grass: #36a493;
    --grass-dark: #247e72;
    --dirt: #467681;
    --dirt-dark: #2d505b;

    --text: #18323a;
    --text-soft: #3f5e64;
    --text-muted: #718b8e;

    --maple: #e47c3a;
    --maple-light: #f4ac71;
    --maple-dark: #ad5424;
    --maple-soft: #fce9dc;

    --sky: #238caf;
    --sky-soft: #d9f0f6;
    --leaf: #2d9b85;
    --leaf-soft: #daf0eb;
    --gold: #f0bf55;

    --theme-panel-glow: rgba(255, 255, 255, .82);
    --theme-rank-top: #edf8f3;
    --theme-control-bg: rgba(6, 36, 49, .28);
    --theme-control-text: #effcff;

    --shadow:
        0 2px 0 rgba(40, 102, 111, .12),
        0 12px 30px rgba(23, 79, 98, .13);
    --shadow-hover:
        0 2px 0 rgba(40, 102, 111, .17),
        0 18px 38px rgba(23, 79, 98, .20);
}

html[data-theme="night"] {
    --sky-top: #151d36;
    --sky-mid: #243459;
    --sky-low: #35466a;

    --surface: #20283b;
    --surface-soft: #29334a;
    --line: #566786;
    --line-soft: #3e4c68;

    --wood: #293653;
    --wood-dark: #151d31;
    --wood-light: #3f5277;

    --grass: #476f73;
    --grass-dark: #34565b;
    --dirt: #33465c;
    --dirt-dark: #1d2a3c;

    --text: #eef3ff;
    --text-soft: #c5cee2;
    --text-muted: #8f9bb5;

    --maple: #f09a51;
    --maple-light: #ffc27d;
    --maple-dark: #c66d2c;
    --maple-soft: #4a382f;

    --sky: #5aa7e8;
    --sky-soft: #263f5a;
    --leaf: #67b9a8;
    --leaf-soft: #294841;
    --gold: #f3c968;

    --theme-panel-glow: rgba(255, 255, 255, .045);
    --theme-rank-top: #31364b;
    --theme-control-bg: rgba(4, 8, 18, .38);
    --theme-control-text: #f5f7ff;

    --shadow:
        0 2px 0 rgba(0, 0, 0, .18),
        0 14px 34px rgba(2, 7, 20, .28);
    --shadow-hover:
        0 2px 0 rgba(0, 0, 0, .24),
        0 20px 46px rgba(2, 7, 20, .38);
}

/* theme switch */
.theme-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 11px;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--theme-control-text);
    background: var(--theme-control-bg);
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.theme-toggle:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.52);
}
.theme-toggle-icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    font-size: 15px;
    line-height: 1;
    color: var(--gold);
}
.theme-toggle-label { min-width: 38px; text-align: left; }

/* Shared polish: richer depth without changing the classic layout. */
body {
    transition: color .18s ease, background-color .18s ease;
}
.site-header {
    backdrop-filter: saturate(1.08);
}
.panel,
.card {
    box-shadow:
        inset 0 1px 0 var(--theme-panel-glow),
        var(--shadow);
}
.ranking-preview-card {
    box-shadow:
        inset 0 1px 0 var(--theme-panel-glow),
        0 5px 18px rgba(50, 60, 70, .055);
}
.ranking-preview-card:hover {
    box-shadow:
        inset 0 1px 0 var(--theme-panel-glow),
        var(--shadow-hover);
}
.ranking-preview-card.is-top {
    background:
        linear-gradient(105deg, var(--theme-rank-top) 0%, var(--surface-soft) 48%, var(--surface) 100%);
}
.ranking-preview-avatar {
    background:
        linear-gradient(155deg, var(--sky-soft), var(--surface) 70%);
    box-shadow: inset 0 1px 12px rgba(30, 100, 130, .07);
}
.equipment-chip,
.input,
.result-rank {
    background: var(--surface);
    color: var(--text);
}
.equipment-chip.showcase-weapon {
    background:
        linear-gradient(155deg, var(--maple-soft), var(--surface) 75%);
    border-color: var(--maple-light);
}
.equipment-chip.showcase-weapon .equipment-trigger span,
.equipment-chip.showcase-weapon .equipment-trigger b {
    color: var(--maple-dark);
}

/* Night-specific hard-coded light surfaces. */
html[data-theme="night"] .logo-mark,
html[data-theme="night"] .lang-switch a.is-current {
    color: var(--text);
    background: #2c3850;
}
html[data-theme="night"] .tab,
html[data-theme="night"] .equipment-chip,
html[data-theme="night"] .input,
html[data-theme="night"] .result-rank,
html[data-theme="night"] .ranking-equipment-empty {
    background: #232d42;
    color: var(--text);
}
html[data-theme="night"] .tab.is-current {
    background: linear-gradient(180deg, #5f9ed5, #3979ad);
    border-color: #71addf;
}
html[data-theme="night"] .table th {
    color: #e7d6aa;
    background: #303a50;
}
html[data-theme="night"] .table tbody tr:hover {
    background: #313b51;
}
html[data-theme="night"] .banner {
    color: #f1d99a;
    background: #39372f;
    border-color: #726847;
}
html[data-theme="night"] .quick,
html[data-theme="night"] .market-card {
    background: #283249;
}
html[data-theme="night"] .ranking-preview-card.is-top-1 {
    border-color: #d9b552;
}
html[data-theme="night"] .ranking-preview-card.is-top-2 {
    border-color: #8998b5;
}
html[data-theme="night"] .ranking-preview-card.is-top-3 {
    border-color: #bd7e5c;
}
html[data-theme="night"] .item-slot {
    color: #f2d89c;
    background: linear-gradient(180deg, #39445c, #2b3448);
    border-color: #65728d;
}
html[data-theme="night"] .section-tint {
    background: rgba(19, 27, 47, .55);
}

@media (max-width: 1100px) {
    .theme-toggle-label { display: none; }
    .theme-toggle { padding: 5px 8px; }
}

@media (max-width: 900px) {
    .theme-toggle { order: 2; }
}


/* --- Ranking equipment: in-game Equip/ItemInfo sync ---------------------- */
.ranking-equip-shell {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding-top: 2px;
}

.maple-equip-window {
    position: relative;
    flex: 0 0 175px;
    width: 175px;
    height: 289px;
    background:
        linear-gradient(180deg, #d9d5c8, #b7b2a5);
    border: 1px solid #69675f;
    box-shadow:
        0 1px 0 rgba(255,255,255,.55) inset,
        0 5px 14px rgba(0,0,0,.18);
    image-rendering: pixelated;
}

.maple-equip-window.has-game-frame {
    background-image: var(--equip-frame);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 175px 289px;
    border: 0;
    box-shadow: none;
}

.maple-equip-slot {
    position: absolute;
    width: 32px;
    height: 32px;
    z-index: 2;
}

.equip-slot-cap      { left: 38px;  top: 35px; }
.equip-slot-medal    { left: 5px;   top: 68px; }
.equip-slot-forehead { left: 38px;  top: 68px; }
.equip-slot-ring1    { left: 104px; top: 68px; }
.equip-slot-ring2    { left: 137px; top: 68px; }
.equip-slot-eyeacc   { left: 71px;  top: 101px; }
.equip-slot-earacc   { left: 104px; top: 101px; }
.equip-slot-mantle   { left: 5px;   top: 134px; }
.equip-slot-clothes  { left: 38px;  top: 134px; }
.equip-slot-pendant  { left: 71px;  top: 134px; }
.equip-slot-weapon   { left: 104px; top: 134px; }
.equip-slot-shield   { left: 137px; top: 134px; }
.equip-slot-gloves   { left: 5px;   top: 167px; }
.equip-slot-pants    { left: 38px;  top: 167px; }
.equip-slot-belt     { left: 71px;  top: 167px; }
.equip-slot-ring3    { left: 104px; top: 167px; }
.equip-slot-ring4    { left: 137px; top: 167px; }
.equip-slot-shoes    { left: 71px;  top: 200px; }

.maple-equip-trigger {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 2px;
    cursor: help;
}

.maple-equip-trigger:hover,
.maple-equip-trigger:focus-visible {
    background: rgba(255, 236, 130, .28);
    outline: 1px solid rgba(255, 217, 78, .78);
    outline-offset: -1px;
}

.maple-equip-trigger img {
    display: block;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}

.maple-equip-fallback {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    font-size: 10px;
    font-weight: 800;
    color: #ddd;
    background: rgba(24, 27, 33, .72);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 3px;
}

.ranking-equip-summary {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-width: 260px;
    padding-top: 6px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted);
}

.ranking-equip-summary strong {
    font-size: 12px;
    color: var(--text-soft);
}

.ranking-equip-summary b {
    color: var(--maple-light);
}

/* ItemInfoGroup: 420px dark panel, centered title and original line order. */
.game-item-tooltip {
    left: calc(100% + 10px);
    right: auto;
    top: -40px;
    bottom: auto;
    width: 420px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 14px;
    color: #d8d8d8;
    background: rgba(26, 26, 26, .96);
    border: 1px solid #555;
    border-radius: 3px;
    box-shadow: 0 9px 28px rgba(0,0,0,.48);
    transform: translate(5px, 0);
    text-align: left;
}

.game-item-tooltip::after {
    display: none;
}

.maple-equip-slot:hover .game-item-tooltip,
.maple-equip-slot:focus-within .game-item-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
}

.equip-slot-ring1 .game-item-tooltip,
.equip-slot-ring2 .game-item-tooltip,
.equip-slot-earacc .game-item-tooltip,
.equip-slot-weapon .game-item-tooltip,
.equip-slot-shield .game-item-tooltip,
.equip-slot-ring3 .game-item-tooltip,
.equip-slot-ring4 .game-item-tooltip {
    left: auto;
    right: calc(100% + 10px);
}

.game-tooltip-title {
    min-height: 28px;
    padding: 2px 6px 8px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

.game-tooltip-head {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    min-height: 126px;
    padding: 4px 8px 6px;
}

.game-tooltip-icon {
    display: grid;
    place-items: start center;
    padding-top: 10px;
}

.game-tooltip-icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}

.game-tooltip-req {
    display: grid;
    align-content: start;
    gap: 1px;
    padding-top: 2px;
}

.game-tooltip-req > div {
    display: grid;
    grid-template-columns: 1fr 54px;
    align-items: center;
    min-height: 19px;
    font-size: 13px;
}

.game-tooltip-req span {
    color: #d8d8d8;
}

.game-tooltip-req b {
    text-align: right;
    font-weight: 700;
    color: #f2f2f2;
}

.game-tooltip-jobs {
    padding: 2px 8px 6px;
    text-align: center;
    font-size: 12px;
    color: #d8d8d8;
}

.game-item-tooltip .item-tooltip-divider {
    margin: 7px 0;
    background: #565656;
}

.game-tooltip-line {
    min-height: 22px;
    padding: 1px 7px;
    font-size: 14px;
    line-height: 20px;
    color: #d8d8d8;
}

.game-tooltip-stat,
.game-tooltip-potential {
    color: #8fd3ff;
}

.game-tooltip-potential-grade {
    padding: 2px 7px 3px;
    font-size: 14px;
    font-weight: 800;
}

.game-tooltip-potential {
    min-height: 21px;
    padding: 1px 7px;
    font-size: 13px;
    line-height: 19px;
}

.game-tooltip-notice {
    padding: 5px 7px 1px;
    font-size: 13px;
    line-height: 1.35;
    color: #ff9933;
}

.game-tooltip-price {
    padding: 7px 7px 1px;
    text-align: right;
    font-size: 13px;
    color: #d8d8d8;
}

@media (max-width: 820px) {
    .ranking-equip-shell {
        flex-direction: column;
    }

    .ranking-equip-summary {
        max-width: 100%;
    }

    .game-item-tooltip,
    .equip-slot-ring1 .game-item-tooltip,
    .equip-slot-ring2 .game-item-tooltip,
    .equip-slot-earacc .game-item-tooltip,
    .equip-slot-weapon .game-item-tooltip,
    .equip-slot-shield .game-item-tooltip,
    .equip-slot-ring3 .game-item-tooltip,
    .equip-slot-ring4 .game-item-tooltip {
        position: fixed;
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        width: min(420px, calc(100vw - 24px));
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        transform: translate(-50%, -48%);
    }

    .maple-equip-slot:hover .game-item-tooltip,
    .maple-equip-slot:focus-within .game-item-tooltip {
        transform: translate(-50%, -50%);
    }
}


/* --- Ranking equipment layout comparison v2 ------------------------------ */
.equip-design-name {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 800;
    color: var(--maple-dark);
    background: var(--maple-soft);
    border: 1px solid var(--maple-light);
    border-radius: 999px;
}

.ranking-preview-equipment {
    overflow: visible;
}

.maple-equip-slot {
    overflow: visible;
}

.maple-equip-slot .equip-slot-caption {
    display: none;
}

.equip-empty-mark {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 2px;
    font-size: 8px;
    line-height: 1.05;
    text-align: center;
    color: #8f8a80;
    background: rgba(20,20,20,.10);
    border: 1px dashed rgba(70,70,70,.22);
    border-radius: 3px;
}

.maple-equip-slot.is-equipped .maple-equip-trigger {
    box-shadow: inset 0 0 0 1px rgba(255,220,105,.35);
}

.maple-equip-slot.is-equipped .maple-equip-trigger:hover {
    box-shadow:
        inset 0 0 0 1px rgba(255,220,105,.72),
        0 0 0 1px rgba(255,220,105,.25);
}

/* 1 — original equipment window scaled/native */
.equip-design-1.maple-equip-window {
    width: 175px;
    height: 289px;
    min-width: 175px;
}
.equip-design-card-1 .ranking-preview-equipment {
    width: 175px;
}

/* 2 — wide 9x2 dock */
.equip-design-2.maple-equip-window {
    position: relative;
    display: grid;
    grid-template-columns: repeat(9, 44px);
    grid-template-rows: repeat(2, 44px);
    gap: 5px;
    width: max-content;
    height: auto;
    padding: 9px;
    background: linear-gradient(180deg, rgba(39,48,68,.96), rgba(25,31,45,.96));
    border: 1px solid #61718e;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 16px rgba(0,0,0,.15);
}
.equip-design-2 .maple-equip-slot {
    position: relative !important;
    inset: auto !important;
    width: 44px;
    height: 44px;
}
.equip-design-2 .maple-equip-trigger {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 7px;
}
.equip-design-2 .maple-equip-trigger img {
    max-width: 38px;
    max-height: 38px;
}
.equip-design-2 .equip-empty-mark {
    color: #8c97aa;
    background: rgba(255,255,255,.025);
    border-color: rgba(255,255,255,.11);
}

/* 3 — balanced 6x3 compact matrix */
.equip-design-3.maple-equip-window {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 48px);
    grid-template-rows: repeat(3, 48px);
    gap: 7px;
    width: max-content;
    height: auto;
    padding: 10px;
    background:
        linear-gradient(145deg, var(--surface), var(--surface-soft));
    border: 2px solid var(--line);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 var(--theme-panel-glow);
}
.equip-design-3 .maple-equip-slot {
    position: relative !important;
    inset: auto !important;
    width: 48px;
    height: 48px;
}
.equip-design-3 .maple-equip-trigger {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,.38);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}
.equip-design-3 .maple-equip-trigger img {
    max-width: 42px;
    max-height: 42px;
}

/* 4 — labeled slot cards, 3 columns */
.equip-design-4.maple-equip-window {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(128px, 1fr));
    gap: 6px;
    width: min(100%, 540px);
    height: auto;
    padding: 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.equip-design-4 .maple-equip-slot {
    position: relative !important;
    inset: auto !important;
    width: auto;
    height: 42px;
}
.equip-design-4 .maple-equip-trigger {
    width: 100%;
    height: 42px;
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 7px;
    padding: 3px 8px 3px 4px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.equip-design-4 .maple-equip-trigger img,
.equip-design-4 .maple-equip-fallback,
.equip-design-4 .equip-empty-mark {
    grid-column: 1;
    grid-row: 1;
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
}
.equip-design-4 .equip-slot-caption {
    display: block;
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equip-design-4 .is-equipped .equip-slot-caption {
    color: var(--text-soft);
}

/* 5 — three equipment groups */
.equip-group-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    width: min(100%, 600px);
}
.equip-group {
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}
.equip-group > b {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    color: var(--text-muted);
}
.equip-group-core { border-top: 3px solid #d8a12d; }
.equip-group-accessory { border-top: 3px solid #7aa5cf; }
.equip-group-style { border-top: 3px solid #9d83c9; }
.equip-group-slots {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    gap: 5px;
}
.equip-design-5 .maple-equip-slot {
    position: relative !important;
    inset: auto !important;
    width: 40px;
    height: 40px;
}
.equip-design-5 .maple-equip-trigger {
    width: 40px;
    height: 40px;
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    border-radius: 7px;
}
.equip-design-5 .maple-equip-trigger img {
    max-width: 36px;
    max-height: 36px;
}

/* 6 — centered character with 3x3 slot banks on both sides */
.equip-orbit-board {
    position: relative;
    width: 430px;
    height: 164px;
    padding: 8px;
    background:
        radial-gradient(circle at 50% 50%, var(--sky-soft), transparent 42%),
        linear-gradient(145deg, var(--surface), var(--surface-soft));
    border: 2px solid var(--line);
    border-radius: 14px;
}
.equip-orbit-avatar {
    position: absolute;
    left: 50%;
    top: 7px;
    width: 94px;
    height: 148px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    overflow: hidden;
    border-left: 1px dashed var(--line);
    border-right: 1px dashed var(--line);
}
.equip-orbit-avatar img {
    width: 92px;
    height: 116px;
    object-fit: contain;
    image-rendering: pixelated;
}
.equip-orbit-avatar span {
    position: absolute;
    bottom: 4px;
    max-width: 88px;
    overflow: hidden;
    font-size: 9px;
    font-weight: 800;
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equip-design-6 .maple-equip-slot {
    position: absolute !important;
    width: 42px;
    height: 42px;
}
.equip-design-6 .maple-equip-trigger {
    width: 42px;
    height: 42px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.equip-design-6 .maple-equip-trigger img {
    max-width: 38px;
    max-height: 38px;
}
/* left 3x3 */
.equip-design-6 .equip-slot-cap      { left: 10px;  top: 10px; }
.equip-design-6 .equip-slot-medal    { left: 57px;  top: 10px; }
.equip-design-6 .equip-slot-forehead { left: 104px; top: 10px; }
.equip-design-6 .equip-slot-eyeacc   { left: 10px;  top: 59px; }
.equip-design-6 .equip-slot-earacc   { left: 57px;  top: 59px; }
.equip-design-6 .equip-slot-mantle   { left: 104px; top: 59px; }
.equip-design-6 .equip-slot-clothes  { left: 10px;  top: 108px; }
.equip-design-6 .equip-slot-pendant  { left: 57px;  top: 108px; }
.equip-design-6 .equip-slot-gloves   { left: 104px; top: 108px; }
/* right 3x3 */
.equip-design-6 .equip-slot-weapon { left: 284px; top: 10px; }
.equip-design-6 .equip-slot-shield { left: 331px; top: 10px; }
.equip-design-6 .equip-slot-pants  { left: 378px; top: 10px; }
.equip-design-6 .equip-slot-belt   { left: 284px; top: 59px; }
.equip-design-6 .equip-slot-ring1  { left: 331px; top: 59px; }
.equip-design-6 .equip-slot-ring2  { left: 378px; top: 59px; }
.equip-design-6 .equip-slot-ring3  { left: 284px; top: 108px; }
.equip-design-6 .equip-slot-ring4  { left: 331px; top: 108px; }
.equip-design-6 .equip-slot-shoes  { left: 378px; top: 108px; }

/* 7 — hero slots + compact remainder */
.equip-showcase-board {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    width: min(100%, 640px);
    padding: 8px;
    background:
        linear-gradient(120deg, rgba(244,191,70,.12), transparent 42%),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.equip-showcase-hero {
    display: grid;
    grid-template-columns: repeat(2, 58px);
    gap: 7px;
    padding-right: 10px;
    border-right: 1px dashed var(--line);
}
.equip-showcase-rest {
    display: grid;
    grid-template-columns: repeat(7, 40px);
    gap: 5px;
}
.equip-design-7 .maple-equip-slot {
    position: relative !important;
    inset: auto !important;
}
.equip-showcase-hero .maple-equip-slot {
    width: 58px;
    height: 58px;
}
.equip-showcase-hero .maple-equip-trigger {
    width: 58px;
    height: 58px;
    background: var(--maple-soft);
    border: 1px solid var(--maple-light);
    border-radius: 10px;
}
.equip-showcase-hero .maple-equip-trigger img {
    max-width: 50px;
    max-height: 50px;
}
.equip-showcase-hero .equip-slot-caption {
    display: block;
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 2px;
    overflow: hidden;
    font-size: 8px;
    font-weight: 900;
    color: var(--maple-dark);
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.equip-showcase-rest .maple-equip-slot {
    width: 40px;
    height: 40px;
}
.equip-showcase-rest .maple-equip-trigger {
    width: 40px;
    height: 40px;
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    border-radius: 7px;
}
.equip-showcase-rest .maple-equip-trigger img {
    max-width: 36px;
    max-height: 36px;
}

/* tooltip must escape all experimental boards */
.equip-design-2,
.equip-design-3,
.equip-design-4,
.equip-group-board,
.equip-orbit-board,
.equip-showcase-board,
.equip-group,
.equip-group-slots,
.equip-showcase-hero,
.equip-showcase-rest {
    overflow: visible !important;
}

@media (max-width: 900px) {
    .equip-design-2.maple-equip-window {
        grid-template-columns: repeat(6, 44px);
        grid-template-rows: repeat(3, 44px);
    }
    .equip-group-board {
        grid-template-columns: 1fr;
        width: max-content;
    }
    .equip-showcase-board {
        grid-template-columns: 1fr;
        width: max-content;
    }
    .equip-showcase-hero {
        grid-template-columns: repeat(4, 50px);
        border-right: 0;
        border-bottom: 1px dashed var(--line);
        padding: 0 0 8px;
    }
    .equip-showcase-hero .maple-equip-slot,
    .equip-showcase-hero .maple-equip-trigger {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 680px) {
    .equip-design-4.maple-equip-window {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
    .equip-orbit-board {
        width: 322px;
        height: 214px;
    }
    .equip-orbit-avatar {
        display: none;
    }
    .equip-design-6 .maple-equip-slot {
        position: relative !important;
        inset: auto !important;
    }
    .equip-design-6.equip-orbit-board {
        display: grid;
        grid-template-columns: repeat(6, 42px);
        gap: 6px;
    }
    .equip-showcase-rest {
        grid-template-columns: repeat(5, 40px);
    }
}


/* --- Ranking comparison compact pass / tooltip front fix ----------------- */
/* Keep the hovered/focused card above later ranking rows. The card itself
   creates a stacking context because of hover transforms, so tooltip z-index
   alone is not enough. */
.ranking-preview-list,
.ranking-preview-card,
.ranking-preview-main,
.ranking-preview-equipment {
    overflow: visible;
}

.ranking-preview-card {
    position: relative;
    z-index: 0;
    gap: 10px;
    padding: 10px 12px;
}

.ranking-preview-card:hover,
.ranking-preview-card:focus-within {
    z-index: 10000;
}

.ranking-preview-card:hover .game-item-tooltip,
.ranking-preview-card:focus-within .game-item-tooltip {
    z-index: 100000;
}

.game-item-tooltip {
    z-index: 100000;
}

.ranking-preview-list {
    gap: 6px;
}

.ranking-preview-avatar {
    min-height: 126px;
}

.ranking-preview-name-row {
    margin-bottom: 1px;
    gap: 6px;
}

.ranking-preview-meta {
    gap: 7px;
    line-height: 1.35;
}

.ranking-preview-equipment {
    margin-top: 6px;
}

.ranking-preview-equipment-title {
    margin-bottom: 4px;
}

.equip-design-name {
    min-height: 19px;
    padding: 1px 7px;
    font-size: 9px;
}

/* 1: keep original frame proportions, but reduce surrounding whitespace */
.equip-design-card-1 .ranking-preview-equipment {
    margin-top: 4px;
}

/* 2: tighter 9x2 dock */
.equip-design-2.maple-equip-window {
    gap: 3px;
    padding: 5px;
}
.equip-design-2 .maple-equip-slot,
.equip-design-2 .maple-equip-trigger {
    width: 42px;
    height: 42px;
}
.equip-design-2 .maple-equip-trigger img {
    max-width: 36px;
    max-height: 36px;
}

/* 3: tighter 6x3 matrix */
.equip-design-3.maple-equip-window {
    gap: 4px;
    padding: 6px;
}
.equip-design-3 .maple-equip-slot,
.equip-design-3 .maple-equip-trigger {
    width: 44px;
    height: 44px;
}
.equip-design-3 .maple-equip-trigger img {
    max-width: 39px;
    max-height: 39px;
}

/* 4: labeled cards with less vertical padding */
.equip-design-4.maple-equip-window {
    gap: 4px;
    padding: 3px;
}
.equip-design-4 .maple-equip-slot,
.equip-design-4 .maple-equip-trigger {
    height: 38px;
}
.equip-design-4 .maple-equip-trigger {
    grid-template-columns: 30px 1fr;
    gap: 5px;
    padding: 2px 6px 2px 3px;
}
.equip-design-4 .maple-equip-trigger img,
.equip-design-4 .maple-equip-fallback,
.equip-design-4 .equip-empty-mark {
    width: 29px;
    height: 29px;
    max-width: 29px;
    max-height: 29px;
}

/* 5: four compact groups including pet */
.equip-group-board {
    grid-template-columns: repeat(4, max-content);
    gap: 5px;
    width: max-content;
    max-width: 100%;
}
.equip-group {
    padding: 5px 6px;
    border-radius: 8px;
}
.equip-group > b {
    margin-bottom: 3px;
    font-size: 9px;
}
.equip-group-slots {
    grid-template-columns: repeat(3, 36px);
    gap: 3px;
}
.equip-design-5 .maple-equip-slot,
.equip-design-5 .maple-equip-trigger {
    width: 36px;
    height: 36px;
}
.equip-design-5 .maple-equip-trigger img {
    max-width: 32px;
    max-height: 32px;
}
.equip-group-pet {
    border-top: 3px solid #77b58a;
    min-width: 112px;
}
.equip-pet-style {
    display: grid;
    grid-template-columns: minmax(62px, auto) 36px;
    align-items: center;
    gap: 5px;
}
.equip-pet-name {
    min-width: 0;
    line-height: 1.15;
}
.equip-pet-name span {
    display: block;
    margin-bottom: 2px;
    font-size: 8px;
    color: var(--text-muted);
}
.equip-pet-name strong {
    display: block;
    max-width: 82px;
    overflow: hidden;
    font-size: 10px;
    color: var(--text-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equip-pet-slot .maple-equip-slot,
.equip-pet-slot .maple-equip-trigger {
    width: 36px;
    height: 36px;
}

/* 6: reduce board footprint */
.equip-orbit-board {
    width: 405px;
    height: 150px;
    padding: 5px;
}
.equip-orbit-avatar {
    top: 5px;
    width: 84px;
    height: 140px;
}
.equip-orbit-avatar img {
    width: 82px;
    height: 110px;
}
.equip-design-6 .maple-equip-slot,
.equip-design-6 .maple-equip-trigger {
    width: 38px;
    height: 38px;
}
.equip-design-6 .maple-equip-trigger img {
    max-width: 34px;
    max-height: 34px;
}
.equip-design-6 .equip-slot-cap      { left: 8px;   top: 8px; }
.equip-design-6 .equip-slot-medal    { left: 50px;  top: 8px; }
.equip-design-6 .equip-slot-forehead { left: 92px;  top: 8px; }
.equip-design-6 .equip-slot-eyeacc   { left: 8px;   top: 55px; }
.equip-design-6 .equip-slot-earacc   { left: 50px;  top: 55px; }
.equip-design-6 .equip-slot-mantle   { left: 92px;  top: 55px; }
.equip-design-6 .equip-slot-clothes  { left: 8px;   top: 102px; }
.equip-design-6 .equip-slot-pendant  { left: 50px;  top: 102px; }
.equip-design-6 .equip-slot-gloves   { left: 92px;  top: 102px; }
.equip-design-6 .equip-slot-weapon { left: 275px; top: 8px; }
.equip-design-6 .equip-slot-shield { left: 317px; top: 8px; }
.equip-design-6 .equip-slot-pants  { left: 359px; top: 8px; }
.equip-design-6 .equip-slot-belt   { left: 275px; top: 55px; }
.equip-design-6 .equip-slot-ring1  { left: 317px; top: 55px; }
.equip-design-6 .equip-slot-ring2  { left: 359px; top: 55px; }
.equip-design-6 .equip-slot-ring3  { left: 275px; top: 102px; }
.equip-design-6 .equip-slot-ring4  { left: 317px; top: 102px; }
.equip-design-6 .equip-slot-shoes  { left: 359px; top: 102px; }

/* 7: tighten hero/remainder spacing */
.equip-showcase-board {
    gap: 6px;
    padding: 5px;
}
.equip-showcase-hero {
    grid-template-columns: repeat(2, 52px);
    gap: 4px;
    padding-right: 6px;
}
.equip-showcase-rest {
    grid-template-columns: repeat(7, 36px);
    gap: 3px;
}
.equip-showcase-hero .maple-equip-slot,
.equip-showcase-hero .maple-equip-trigger {
    width: 52px;
    height: 52px;
}
.equip-showcase-hero .maple-equip-trigger img {
    max-width: 45px;
    max-height: 45px;
}
.equip-showcase-rest .maple-equip-slot,
.equip-showcase-rest .maple-equip-trigger {
    width: 36px;
    height: 36px;
}
.equip-showcase-rest .maple-equip-trigger img {
    max-width: 32px;
    max-height: 32px;
}

@media (max-width: 900px) {
    .equip-group-board {
        grid-template-columns: repeat(2, max-content);
    }
}

@media (max-width: 680px) {
    .ranking-preview-card {
        gap: 7px;
        padding: 8px;
    }
    .equip-group-board {
        grid-template-columns: 1fr;
        width: max-content;
    }
}


/* --- Tooltip body portal: absolute top layer ----------------------------- */
body > .game-item-tooltip.tooltip-portal-active {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2147483647 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
    margin: 0 !important;
}

body > .game-item-tooltip.tooltip-portal-active::after {
    display: none !important;
}


/* --- Ranking tooltip final: single portal + compact opaque panel ---------- */
/* The in-slot copy is only a template for JS. Never paint it; otherwise the
   portal clone and the original tooltip overlap and look like lower layers
   are drawing above the popup. */
.maple-equip-slot > .game-item-tooltip {
    display: none !important;
}

/* Only the body-level clone is rendered. */
body > .game-item-tooltip.tooltip-portal-active {
    position: fixed !important;
    display: block !important;
    left: 0;
    top: 0;
    right: auto !important;
    bottom: auto !important;
    z-index: 2147483647 !important;
    width: 318px !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    padding: 7px 8px !important;
    margin: 0 !important;
    color: #dedede;
    background: #171717 !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.62) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
    text-align: left;
}

body > .game-item-tooltip.tooltip-portal-active::after {
    display: none !important;
}

body > .game-item-tooltip.tooltip-portal-active .game-tooltip-title {
    min-height: 0;
    padding: 0 3px 4px;
    font-size: 15px;
    line-height: 1.2;
}

body > .game-item-tooltip.tooltip-portal-active .game-tooltip-head {
    grid-template-columns: 50px 1fr;
    gap: 6px;
    min-height: 0;
    padding: 1px 3px 2px;
}

body > .game-item-tooltip.tooltip-portal-active .game-tooltip-icon {
    padding-top: 2px;
}

body > .game-item-tooltip.tooltip-portal-active .game-tooltip-icon img {
    width: 46px;
    height: 46px;
}

body > .game-item-tooltip.tooltip-portal-active .game-tooltip-req {
    gap: 0;
    padding-top: 0;
}

body > .game-item-tooltip.tooltip-portal-active .game-tooltip-req > div {
    grid-template-columns: 1fr 44px;
    min-height: 15px;
    font-size: 11px;
    line-height: 15px;
}

body > .game-item-tooltip.tooltip-portal-active .game-tooltip-jobs {
    padding: 1px 3px 3px;
    font-size: 10px;
    line-height: 14px;
}

body > .game-item-tooltip.tooltip-portal-active .item-tooltip-divider {
    margin: 3px 0;
}

body > .game-item-tooltip.tooltip-portal-active .game-tooltip-line {
    min-height: 0;
    padding: 0 3px;
    font-size: 11px;
    line-height: 16px;
}

body > .game-item-tooltip.tooltip-portal-active .game-tooltip-potential-grade {
    padding: 1px 3px;
    font-size: 11px;
    line-height: 16px;
}

body > .game-item-tooltip.tooltip-portal-active .game-tooltip-potential {
    min-height: 0;
    padding: 0 3px;
    font-size: 11px;
    line-height: 16px;
}

body > .game-item-tooltip.tooltip-portal-active .game-tooltip-notice {
    padding: 3px 3px 0;
    font-size: 11px;
    line-height: 1.3;
}

body > .game-item-tooltip.tooltip-portal-active .game-tooltip-price {
    padding: 3px 3px 0;
    font-size: 10px;
    line-height: 14px;
}


/* --- Ranking wide equipment comparison v3 ------------------------------- */
/* Keep the ranking itself one-column. Only the equipment presentation changes. */
.ranking-preview-list {
    display: grid;
    grid-template-columns: 1fr !important;
}
.ranking-preview-main,
.ranking-preview-equipment {
    min-width: 0;
    width: 100%;
}
.ranking-preview-equipment {
    margin-top: 7px;
}
.equip-design-name {
    flex: 0 0 auto;
}

/* Shared wide-card primitives */
.equip-wide-grid,
.equip-category-columns,
.equip-ribbon-board,
.equip-collection-board,
.equip-name-board {
    width: 100%;
    max-width: 100%;
}
.equip-wide-grid .maple-equip-slot,
.equip-category-columns .maple-equip-slot,
.equip-ribbon-board .maple-equip-slot,
.equip-collection-board .maple-equip-slot,
.equip-name-board .maple-equip-slot {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
}
.equip-wide-grid .maple-equip-trigger,
.equip-category-columns .maple-equip-trigger,
.equip-ribbon-board .maple-equip-trigger,
.equip-collection-board .maple-equip-trigger,
.equip-name-board .maple-equip-trigger {
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
}
.equip-item-visual {
    display: grid;
    place-items: center;
    min-width: 0;
}
.equip-item-visual img {
    object-fit: contain;
    image-rendering: pixelated;
}
.equip-item-name,
.equip-slot-prefix {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.equip-item-name {
    color: var(--text-soft);
    font-weight: 800;
}
.is-empty .equip-item-name {
    color: var(--text-muted);
    font-weight: 600;
}

/* 1 — "무기 : [이미지] 아이템명" */
.equip-wide-grid-label {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 7px;
}
.equip-wide-grid-label .maple-equip-trigger {
    display: grid;
    grid-template-columns: 56px 48px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 3px 7px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.equip-wide-grid-label .equip-slot-prefix {
    font-size: 10px;
    font-weight: 900;
    color: var(--text-muted);
}
.equip-wide-grid-label .equip-slot-prefix::after {
    content: " :";
}
.equip-wide-grid-label .equip-item-visual {
    width: 42px;
    height: 42px;
}
.equip-wide-grid-label .equip-item-visual img {
    max-width: 40px;
    max-height: 40px;
}
.equip-wide-grid-label .equip-item-name {
    font-size: 11px;
    white-space: nowrap;
}
.equip-wide-grid-label .equip-slot-caption {
    display: none !important;
}

/* 2 — large icon + item name card */
.equip-wide-grid-icons {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}
.equip-wide-grid-icons .maple-equip-trigger {
    display: grid;
    grid-template-rows: 52px 14px 17px;
    place-items: center;
    min-height: 88px;
    padding: 5px 4px 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
}
.equip-wide-grid-icons .equip-item-visual {
    width: 52px;
    height: 52px;
}
.equip-wide-grid-icons .equip-item-visual img {
    max-width: 50px;
    max-height: 50px;
}
.equip-wide-grid-icons .equip-slot-caption {
    display: block !important;
    font-size: 9px;
    font-weight: 900;
    color: var(--text-muted);
}
.equip-wide-grid-icons .equip-item-name {
    display: block;
    width: 100%;
    padding: 0 3px;
    font-size: 9px;
    line-height: 15px;
    text-align: center;
    white-space: nowrap;
}

/* 3 — three category list columns */
.equip-category-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}
.equip-category-panel {
    min-width: 0;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
}
.equip-category-panel > b {
    display: block;
    margin: 0 2px 4px;
    font-size: 10px;
    color: var(--text-muted);
}
.equip-category-panel:nth-child(1) { border-top: 3px solid #d8a12d; }
.equip-category-panel:nth-child(2) { border-top: 3px solid #7aa5cf; }
.equip-category-panel:nth-child(3) { border-top: 3px solid #9d83c9; }
.equip-category-panel .maple-equip-slot + .maple-equip-slot {
    margin-top: 3px;
}
.equip-category-panel .maple-equip-trigger {
    display: grid;
    grid-template-columns: 54px 38px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-height: 38px;
    padding: 2px 5px;
    text-align: left;
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
}
.equip-category-panel .equip-slot-prefix {
    font-size: 9px;
    font-weight: 900;
    color: var(--text-muted);
}
.equip-category-panel .equip-item-visual {
    width: 34px;
    height: 34px;
}
.equip-category-panel .equip-item-visual img {
    max-width: 32px;
    max-height: 32px;
}
.equip-category-panel .equip-item-name {
    font-size: 10px;
    white-space: nowrap;
}

/* 4 — 9x2 horizontal equipment ribbon */
.equip-ribbon-board {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 5px;
    padding: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.035));
    border: 1px solid var(--line);
    border-radius: 10px;
}
.equip-ribbon-board .maple-equip-trigger {
    display: grid;
    grid-template-rows: 48px 13px 15px;
    place-items: center;
    min-height: 82px;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 7px;
}
.equip-ribbon-board .equip-item-visual {
    width: 48px;
    height: 48px;
}
.equip-ribbon-board .equip-item-visual img {
    max-width: 46px;
    max-height: 46px;
}
.equip-ribbon-board .equip-slot-caption {
    display: block !important;
    font-size: 8px;
    font-weight: 900;
    color: var(--text-muted);
}
.equip-ribbon-board .equip-item-name {
    width: 100%;
    font-size: 8px;
    line-height: 13px;
    text-align: center;
    white-space: nowrap;
}

/* 5 — current grouped layout, enlarged to use horizontal room */
.equip-group-board-expanded {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
}
.equip-group-board-expanded .equip-group {
    min-width: 0;
    padding: 6px !important;
}
.equip-group-board-expanded .equip-group-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
}
.equip-group-board-expanded .equip-group-slots .maple-equip-slot,
.equip-group-board-expanded .equip-group-slots .maple-equip-trigger {
    width: 100% !important;
    height: 48px !important;
}
.equip-group-board-expanded .equip-group-slots .maple-equip-trigger {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    padding: 3px;
    text-align: left;
}
.equip-group-board-expanded .equip-item-visual {
    width: 38px;
    height: 38px;
}
.equip-group-board-expanded .equip-item-visual img {
    max-width: 36px;
    max-height: 36px;
}
.equip-group-board-expanded .equip-item-name {
    display: block;
    font-size: 9px;
    white-space: nowrap;
}
.equip-group-board-expanded .equip-slot-caption {
    display: none !important;
}
.equip-group-board-expanded .equip-group-pet {
    min-width: 0 !important;
}
.equip-group-board-expanded .equip-pet-style {
    grid-template-columns: minmax(70px, .75fr) minmax(0, 1.25fr);
}
.equip-group-board-expanded .equip-pet-slot .maple-equip-slot,
.equip-group-board-expanded .equip-pet-slot .maple-equip-trigger {
    width: 100% !important;
    height: 48px !important;
}

/* 6 — collection board: 6 x 3, bigger showcase tiles */
.equip-collection-board {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}
.equip-collection-board .maple-equip-trigger {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: 18px 22px;
    align-items: center;
    column-gap: 5px;
    min-height: 62px;
    padding: 5px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
}
.equip-collection-board .equip-item-visual {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 46px;
    height: 46px;
}
.equip-collection-board .equip-item-visual img {
    max-width: 44px;
    max-height: 44px;
}
.equip-collection-board .equip-slot-caption {
    display: block !important;
    grid-column: 2;
    grid-row: 1;
    font-size: 9px;
    font-weight: 900;
    color: var(--text-muted);
}
.equip-collection-board .equip-item-name {
    grid-column: 2;
    grid-row: 2;
    font-size: 9px;
    line-height: 12px;
    white-space: nowrap;
}

/* 7 — item-name-first rows, 3 columns */
.equip-name-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 7px;
}
.equip-name-board .maple-equip-trigger {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 3px 6px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.equip-name-board .equip-slot-prefix {
    font-size: 9px;
    font-weight: 900;
    color: var(--text-muted);
}
.equip-name-board .equip-item-name {
    font-size: 11px;
    white-space: nowrap;
}
.equip-name-board .equip-item-visual {
    grid-column: 3;
    width: 38px;
    height: 38px;
}
.equip-name-board .equip-item-visual img {
    max-width: 36px;
    max-height: 36px;
}
.equip-name-board .equip-slot-caption {
    display: none !important;
}

/* Extra breathing room for the wider item showcases, still one ranking row. */
.equip-design-card-1 .ranking-preview-card,
.equip-design-card-2 .ranking-preview-card,
.equip-design-card-3 .ranking-preview-card,
.equip-design-card-4 .ranking-preview-card,
.equip-design-card-5 .ranking-preview-card,
.equip-design-card-6 .ranking-preview-card,
.equip-design-card-7 .ranking-preview-card {
    width: 100%;
}

@media (max-width: 1050px) {
    .equip-wide-grid-label,
    .equip-name-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .equip-wide-grid-icons,
    .equip-collection-board {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .equip-ribbon-board {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .equip-group-board-expanded {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .equip-wide-grid-label,
    .equip-name-board,
    .equip-category-columns {
        grid-template-columns: 1fr;
    }
    .equip-wide-grid-icons,
    .equip-collection-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .equip-ribbon-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .equip-group-board-expanded {
        grid-template-columns: 1fr !important;
    }
}


/* --- Ranking featured five equipment pass ------------------------------- */
/* Only five featured equipment slots are shown, but the showcase payload still
   carries the full worn-equipment set for future expansion. */

/* 1 — five wide rows: 부위 : 아이콘 아이템명 */
.equip-layout-1 .equip-wide-grid-label {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.equip-layout-1 .equip-wide-grid-label .maple-equip-trigger {
    grid-template-columns: 50px 56px minmax(0, 1fr);
    min-height: 62px;
    padding: 5px 8px;
}
.equip-layout-1 .equip-wide-grid-label .equip-item-visual {
    width: 52px;
    height: 52px;
}
.equip-layout-1 .equip-wide-grid-label .equip-item-visual img {
    max-width: 50px;
    max-height: 50px;
}
.equip-layout-1 .equip-wide-grid-label .equip-item-name {
    font-size: 11px;
}

/* 2 — five large icon cards */
.equip-layout-2 .equip-wide-grid-icons {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.equip-layout-2 .equip-wide-grid-icons .maple-equip-trigger {
    grid-template-rows: 68px 15px 20px;
    min-height: 112px;
}
.equip-layout-2 .equip-wide-grid-icons .equip-item-visual {
    width: 66px;
    height: 66px;
}
.equip-layout-2 .equip-wide-grid-icons .equip-item-visual img {
    max-width: 64px;
    max-height: 64px;
}
.equip-layout-2 .equip-wide-grid-icons .equip-item-name {
    font-size: 10px;
    line-height: 18px;
}

/* 3 — one horizontal list panel using the full row */
.equip-featured-list {
    display: block;
}
.equip-featured-list .equip-category-panel {
    display: grid;
    grid-template-columns: 92px repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: 5px;
    width: 100%;
}
.equip-featured-list .equip-category-panel > b {
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0 6px;
    text-align: center;
}
.equip-featured-list .maple-equip-slot + .maple-equip-slot {
    margin-top: 0;
}
.equip-featured-list .maple-equip-trigger {
    grid-template-columns: 44px 42px minmax(0, 1fr);
    min-height: 54px;
}
.equip-featured-list .equip-item-visual {
    width: 40px;
    height: 40px;
}
.equip-featured-list .equip-item-visual img {
    max-width: 38px;
    max-height: 38px;
}

/* 4 — five showcase tiles across */
.equip-layout-4 .equip-ribbon-board {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.equip-layout-4 .equip-ribbon-board .maple-equip-trigger {
    grid-template-rows: 64px 15px 20px;
    min-height: 106px;
}
.equip-layout-4 .equip-ribbon-board .equip-item-visual {
    width: 62px;
    height: 62px;
}
.equip-layout-4 .equip-ribbon-board .equip-item-visual img {
    max-width: 60px;
    max-height: 60px;
}
.equip-layout-4 .equip-ribbon-board .equip-item-name {
    font-size: 10px;
    line-height: 18px;
}

/* 5 — final grouped-card candidate: one group, five roomy item cards */
.equip-featured-five {
    display: block !important;
    width: 100% !important;
}
.equip-featured-five .equip-group {
    width: 100%;
}
.equip-featured-five .equip-group-slots {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.equip-featured-five .equip-group-slots .maple-equip-trigger {
    grid-template-columns: 56px minmax(0, 1fr);
    height: 64px !important;
    padding: 5px 7px;
}
.equip-featured-five .equip-item-visual {
    width: 52px;
    height: 52px;
}
.equip-featured-five .equip-item-visual img {
    max-width: 50px;
    max-height: 50px;
}
.equip-featured-five .equip-item-name {
    font-size: 11px;
}

/* 6 — five collection cards */
.equip-layout-6 .equip-collection-board {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.equip-layout-6 .equip-collection-board .maple-equip-trigger {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: 20px 26px;
    min-height: 72px;
}
.equip-layout-6 .equip-collection-board .equip-item-visual {
    width: 56px;
    height: 56px;
}
.equip-layout-6 .equip-collection-board .equip-item-visual img {
    max-width: 54px;
    max-height: 54px;
}
.equip-layout-6 .equip-collection-board .equip-item-name {
    font-size: 10px;
}

/* 7 — item name first, five columns */
.equip-layout-7 .equip-name-board {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.equip-layout-7 .equip-name-board .maple-equip-trigger {
    grid-template-columns: 42px minmax(0, 1fr) 52px;
    min-height: 60px;
}
.equip-layout-7 .equip-name-board .equip-item-name {
    font-size: 11px;
}
.equip-layout-7 .equip-name-board .equip-item-visual {
    width: 48px;
    height: 48px;
}
.equip-layout-7 .equip-name-board .equip-item-visual img {
    max-width: 46px;
    max-height: 46px;
}

@media (max-width: 1050px) {
    .equip-layout-1 .equip-wide-grid-label,
    .equip-layout-2 .equip-wide-grid-icons,
    .equip-layout-4 .equip-ribbon-board,
    .equip-featured-five .equip-group-slots,
    .equip-layout-6 .equip-collection-board,
    .equip-layout-7 .equip-name-board {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .equip-featured-list .equip-category-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .equip-featured-list .equip-category-panel > b {
        grid-column: 1 / -1;
        min-height: 24px;
    }
}

@media (max-width: 700px) {
    .equip-layout-1 .equip-wide-grid-label,
    .equip-layout-2 .equip-wide-grid-icons,
    .equip-layout-4 .equip-ribbon-board,
    .equip-featured-five .equip-group-slots,
    .equip-layout-6 .equip-collection-board,
    .equip-layout-7 .equip-name-board,
    .equip-featured-list .equip-category-panel {
        grid-template-columns: 1fr !important;
    }
}


/* --- Ranking top1000 search + enlarged showcase ------------------------- */
.ranking-search-panel {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.ranking-search-panel .search-form {
    width: min(100%, 520px);
    margin: 0;
}
.ranking-search-panel .search-form-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}
.ranking-search-panel .input {
    min-height: 42px;
    font-size: 14px;
}
.ranking-search-panel .btn {
    min-height: 42px;
    padding: 7px 18px;
    font-size: 13px;
}

/* Final layout is design 2: use more of the available horizontal space. */
.equip-design-card-2 .ranking-preview-name-row h3 {
    font-size: 19px;
}
.equip-design-card-2 .ranking-preview-name-row .chip {
    font-size: 13px;
    padding: 2px 11px;
}
.equip-design-card-2 .ranking-preview-meta {
    font-size: 13px;
}
.equip-design-card-2 .ranking-preview-meta strong {
    font-size: 15px;
}

.equip-layout-2 .equip-wide-grid-icons {
    gap: 8px;
}
.equip-layout-2 .equip-wide-grid-icons .maple-equip-trigger {
    grid-template-rows: 78px 18px 24px;
    min-height: 128px;
    padding: 6px 6px 5px;
}
.equip-layout-2 .equip-wide-grid-icons .equip-item-visual {
    width: 76px;
    height: 76px;
}
.equip-layout-2 .equip-wide-grid-icons .equip-item-visual img {
    max-width: 74px;
    max-height: 74px;
}
.equip-layout-2 .equip-wide-grid-icons .equip-slot-caption {
    font-size: 11px;
}
.equip-layout-2 .equip-wide-grid-icons .equip-item-name {
    font-size: 12px;
    line-height: 20px;
}
.equip-design-card-2 .ranking-preview-avatar {
    width: 126px;
    min-width: 126px;
    min-height: 142px;
}
.equip-design-card-2 .ranking-preview-avatar img {
    transform: scale(1.08);
}

@media (max-width: 900px) {
    .ranking-search-panel {
        justify-content: stretch;
    }
    .ranking-search-panel .search-form {
        width: 100%;
    }
    .equip-layout-2 .equip-wide-grid-icons {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .ranking-search-panel .search-form-compact {
        grid-template-columns: 1fr;
    }
    .equip-layout-2 .equip-wide-grid-icons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .equip-design-card-2 .ranking-preview-avatar {
        width: 104px;
        min-width: 104px;
    }
}


/* Notice CMS */
.notice-detail-head { border-bottom: 1px solid var(--line, rgba(127,127,127,.25)); padding-bottom: 18px; margin-bottom: 22px; }
.notice-detail-head h1 { margin: 12px 0 8px; line-height: 1.35; }
.notice-detail-head time { opacity: .7; }
.notice-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; min-height: 180px; }
.notice-actions { margin-top: 28px; }


/* Notice center --------------------------------------------------------- */
.notice-center-hero{position:relative;overflow:hidden;padding:58px 0 46px;background:linear-gradient(135deg,#fff5dc 0%,#fce6b6 45%,#caebf8 100%);border-bottom:2px solid rgba(132,91,40,.2)}
.notice-center-hero:before,.notice-center-hero:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.45)}
.notice-center-hero:before{width:260px;height:260px;right:8%;top:-150px}.notice-center-hero:after{width:170px;height:170px;left:4%;bottom:-120px}
.notice-center-hero-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:28px}
.notice-center-hero .eyebrow{margin-bottom:8px;color:#9a5b19;font-size:12px;font-weight:900;letter-spacing:.12em}
.notice-center-hero h1{margin:0 0 8px;font-size:clamp(34px,5vw,48px);color:#5d351d;text-shadow:0 2px 0 rgba(255,255,255,.7)}
.notice-center-hero p{margin:0;font-size:15px;font-weight:600;color:#5f6a6f}
.notice-hero-mark{width:92px;height:92px;flex:0 0 auto;display:grid;place-items:center;border-radius:28px;background:linear-gradient(180deg,#ffb45f,#e96c20);border:3px solid #fff;box-shadow:0 0 0 3px #b76a2c,0 14px 30px rgba(116,70,30,.2);transform:rotate(6deg)}
.notice-hero-mark span{font-size:52px;line-height:1;font-weight:900;color:#fff;text-shadow:0 3px 0 #a44a13;transform:rotate(-6deg)}
.notice-center-section{padding-top:32px}
.notice-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}
.notice-filter-tabs{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.notice-filter{padding:8px 14px;border-radius:999px;border:2px solid var(--line);background:rgba(255,255,255,.72);color:var(--text-soft);font-size:12px;font-weight:800;transition:.15s}
.notice-filter:hover{border-color:var(--maple-light);color:var(--maple-dark)}
.notice-filter.is-current{background:linear-gradient(180deg,#f59a42,var(--maple));border-color:var(--maple-dark);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.notice-search{display:flex;align-items:center;width:min(310px,100%);height:42px;border:2px solid var(--line);border-radius:999px;background:#fff;overflow:hidden;box-shadow:inset 0 1px 2px rgba(91,66,38,.06)}
.notice-search:focus-within{border-color:var(--maple-light);box-shadow:0 0 0 3px var(--maple-soft)}
.notice-search input{min-width:0;flex:1;height:100%;border:0;outline:0;padding:0 15px;background:transparent;font:inherit;color:var(--text)}
.notice-search button{width:44px;height:100%;border:0;background:transparent;color:var(--maple-dark);font-size:22px;font-weight:900;cursor:pointer}
.notice-board{overflow:hidden;border:2px solid var(--line);border-radius:18px;background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 2px #fff,var(--shadow)}
.notice-board-head{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:19px 22px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#fffdf8,#fff9ec)}
.notice-board-head>div{display:flex;align-items:baseline;gap:8px}.notice-board-head span{font-size:15px;font-weight:900;color:var(--wood-dark)}.notice-board-head strong{font-size:12px;color:var(--maple-dark)}
.notice-board-head p{margin:0;font-size:11px;color:var(--text-muted)}
.notice-board-list{display:grid}
.notice-board-row{position:relative;display:grid;grid-template-columns:116px minmax(0,1fr) 100px 28px;align-items:center;gap:14px;padding:17px 22px;border-bottom:1px solid var(--line-soft);transition:background .15s,transform .15s}
.notice-board-row:last-child{border-bottom:0}.notice-board-row:hover{background:#fff8eb}.notice-board-row.is-pinned{background:linear-gradient(90deg,#fff8e8 0,#fff 65%)}.notice-board-row.is-pinned:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--maple)}
.notice-board-type{display:flex;align-items:center;gap:6px}.notice-pin-badge{display:inline-flex;padding:2px 6px;border-radius:5px;background:#fff0c8;color:#9a5c00;border:1px solid #edd28b;font-size:9px;font-weight:900;letter-spacing:.04em}
.notice-board-copy{display:grid;min-width:0;gap:4px}.notice-board-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:var(--text);letter-spacing:-.015em}.notice-board-copy span{font-size:10px;color:var(--text-muted);opacity:0;transform:translateY(2px);transition:.15s}
.notice-board-row:hover .notice-board-copy span{opacity:1;transform:none}.notice-board-row time{justify-self:end;color:var(--text-muted);font-size:12px}.notice-row-arrow{justify-self:end;color:#c59863;font-size:25px;transition:transform .15s}.notice-board-row:hover .notice-row-arrow{transform:translateX(3px);color:var(--maple-dark)}
.notice-empty{padding:64px 20px;text-align:center;color:var(--text-muted)}.notice-empty-icon{font-size:34px;margin-bottom:10px}.notice-empty strong{display:block;color:var(--text);font-size:16px}.notice-empty p{margin:5px 0 0;font-size:12px}
.notice-detail-shell{padding:34px 0 64px}.notice-detail-container{max-width:920px}.notice-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:13px;color:var(--text-muted);font-size:11px;font-weight:700}.notice-breadcrumb a:hover{color:var(--maple-dark)}
.notice-article{overflow:hidden;border:2px solid var(--line);border-radius:20px;background:rgba(255,255,255,.96);box-shadow:inset 0 0 0 2px #fff,0 18px 46px rgba(110,77,38,.12)}
.notice-article-head{padding:34px 42px 27px;background:linear-gradient(180deg,#fffdf8,#fff)}
.notice-article-meta{display:flex;align-items:center;gap:8px;margin-bottom:15px}.notice-article-meta time{margin-left:auto;color:var(--text-muted);font-size:12px}
.notice-article-head h1{margin:0;font-size:clamp(25px,4vw,34px);line-height:1.4;letter-spacing:-.025em;color:#3f3025}.notice-article-rule{width:42px;height:4px;margin-top:22px;border-radius:999px;background:linear-gradient(90deg,var(--maple),var(--gold))}
.notice-article-body{min-height:310px;padding:34px 42px 48px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.95;color:#3f4850;border-top:1px solid #f1eadf}
.notice-article-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 42px;background:#fffaf0;border-top:1px solid var(--line-soft)}
.notice-back-button{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:2px solid var(--line);border-radius:999px;background:#fff;color:var(--wood-dark);font-size:12px;font-weight:900;transition:.15s}.notice-back-button:hover{border-color:var(--maple-light);transform:translateX(-2px)}
.notice-article-brand{font-size:9px;font-weight:900;letter-spacing:.13em;color:#b69a78}.notice-not-found{padding:70px 30px;text-align:center}.notice-not-found h1{margin:0 0 24px;font-size:22px}
@media(max-width:760px){.notice-center-hero{padding:42px 0 34px}.notice-hero-mark{display:none}.notice-toolbar{align-items:stretch;flex-direction:column}.notice-search{width:100%}.notice-board-row{grid-template-columns:92px minmax(0,1fr) 24px;padding:15px 14px}.notice-board-row time{display:none}.notice-board-head p{display:none}.notice-article-head,.notice-article-body{padding-left:22px;padding-right:22px}.notice-article-foot{padding:16px 22px}.notice-article-brand{display:none}}


/* In-game notice WebView ------------------------------------------------ */
.ingame-notice-body{margin:0;min-height:100vh;background:#f7f0df;color:#44382e}
.ingame-notice-body:before{display:none}
.ingame-notice-shell{width:100%;min-height:100vh;padding:16px;background:linear-gradient(180deg,#fff8e8,#f7f0df)}
.ingame-notice-head{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:8px 4px 14px;border-bottom:2px solid #d8bd91}
.ingame-notice-head span{font-size:9px;font-weight:900;letter-spacing:.12em;color:#aa6a25}.ingame-notice-head h1{margin:2px 0 0;font-size:22px;color:#5d351d}.ingame-notice-head>strong{font-size:11px;color:#9b754d}
.ingame-notice-tabs{display:flex;gap:5px;overflow:auto;padding:11px 0}.ingame-notice-tabs a{flex:0 0 auto;padding:6px 10px;border:1px solid #d7c4a3;border-radius:999px;background:#fff;font-size:10px;font-weight:800;color:#745b43}.ingame-notice-tabs a.is-current{background:#e87828;border-color:#b75a1a;color:#fff}
.ingame-notice-list{overflow:hidden;border:1px solid #d7c4a3;border-radius:10px;background:#fff}
.ingame-notice-list>a{position:relative;display:block;padding:12px 34px 12px 12px;border-bottom:1px solid #eee3cf}.ingame-notice-list>a:last-child{border-bottom:0}.ingame-notice-list>a.is-pinned{background:#fff9e9;border-left:3px solid #e87828}
.ingame-notice-list>a>strong{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:#49382b}
.ingame-notice-meta{display:flex;align-items:center;gap:5px}.ingame-notice-meta .tag{min-width:48px;padding:1px 6px;font-size:9px}.ingame-notice-meta b{padding:1px 4px;border-radius:4px;background:#ffefbd;color:#946000;font-size:8px}.ingame-notice-meta time{margin-left:auto;color:#9c8b78;font-size:9px}
.ingame-notice-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:20px;color:#b89b76}
.ingame-notice-article{overflow:hidden;border:1px solid #d7c4a3;border-radius:10px;background:#fff}.ingame-notice-article header{padding:17px 16px;border-bottom:1px solid #eee3cf;background:#fffaf0}.ingame-notice-article h1{margin:10px 0 0;font-size:17px;line-height:1.45;color:#49382b}.ingame-notice-content{min-height:240px;padding:18px 16px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.8}.ingame-notice-article footer{padding:11px 16px;border-top:1px solid #eee3cf;background:#fffaf0}.ingame-notice-article footer a{font-size:11px;font-weight:900;color:#9b5e24}
.ingame-notice-empty{display:grid;place-items:center;gap:8px;min-height:220px;padding:30px;text-align:center;color:#8d7964}.ingame-notice-empty strong{font-size:12px}.ingame-notice-empty a{font-size:11px;font-weight:800;color:#9b5e24}

/* Notice filter contrast correction */
.notice-filter{
  background:#fff7e7;
  border-color:#d9bd92;
  color:#5b4635;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.notice-filter:visited{color:#5b4635}
.notice-filter:hover{
  background:#fff0d2;
  border-color:#e89445;
  color:#8b4513;
}
.notice-filter.is-current,
.notice-filter.is-current:visited{
  background:linear-gradient(180deg,#ffad5d,#ed7d2d);
  border-color:#b95d1b;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 0 rgba(121,62,20,.12);
}


/* Notice center fixed-surface contrast: independent from global theme text vars */
.notice-board{
  color:#3f3025;
}
.notice-board-head span{
  color:#3f3025 !important;
}
.notice-board-head strong{
  color:#b65b16 !important;
}
.notice-board-head p{
  color:#7c6c5c !important;
}
.notice-board-row,
.notice-board-row:visited{
  color:#3f3025;
}
.notice-board-copy strong,
.notice-board-row:visited .notice-board-copy strong{
  color:#3f3025 !important;
  font-weight:800;
}
.notice-board-copy span{
  color:#8b7764 !important;
}
.notice-board-row time{
  color:#786d62 !important;
  font-weight:700;
}
.notice-board .tag,
.notice-board .tag:visited{
  color:#fff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  font-weight:900;
}
.notice-board .tag-notice{
  background:#e98232 !important;
}
.notice-board .tag-maint{
  background:#66778d !important;
}
.notice-board .tag-update{
  background:#2f93d1 !important;
}
.notice-board .tag-event{
  background:#3a9b82 !important;
}
.notice-board .notice-pin-badge{
  color:#8a5200 !important;
  background:#fff0bd !important;
  border-color:#e4c468 !important;
}
.notice-board .notice-row-arrow{
  color:#b77734 !important;
}

/* 확률 정보(/probability/cube · /ingame/probability/cube) — 기존 panel/table/tab 위에 최소 보정만. */
.prob { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.prob-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.prob-alert p { margin: 0; font-weight: 700; }
.prob-badge { color: #fff; background: var(--maple-dark); }
.prob-toc { margin-bottom: 0; }
.prob-section { min-width: 0; }
.prob-section > p { margin: 8px 0 0; line-height: 1.6; }
.prob-desc { white-space: normal; }
.prob-desc .hl { font-style: normal; font-weight: 800; color: var(--maple-dark); }
.prob-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.prob-meta div { display: flex; gap: 8px; align-items: baseline; }
.prob-meta dt { font-size: 12px; color: var(--text-muted); }
.prob-meta dd { margin: 0; font-weight: 800; }
.prob-table th[scope="row"] { background: transparent; border-radius: 0; font-size: 14px; color: inherit; border-bottom: 1px dashed var(--line); }
.prob-num { text-align: right; font-variant-numeric: tabular-nums; }
.prob-table thead th { white-space: nowrap; }
.prob-table thead th:not(:first-child) { text-align: right; }
.prob-name { white-space: normal !important; min-width: 12em; }
.prob-options tr.is-lower .prob-name { color: var(--text-soft); }
.prob-grade::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--text-muted); vertical-align: middle; }
.prob-grade-pot_grade_rare::before { background: #4ea8ff; }
.prob-grade-pot_grade_epic::before { background: #b45cff; }
.prob-grade-pot_grade_unique::before { background: #ffd24e; }
.prob-summary { margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.7; }
.prob-summary li.is-head { margin-top: 8px; font-weight: 800; }
.prob-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 4px; }
.prob-filter label { display: grid; gap: 4px; font-size: 12px; color: var(--text-muted); min-width: 0; flex: 1 1 150px; }
.prob-filter .input { width: 100%; min-width: 0; }
.prob-filter .btn { flex: 0 0 auto; }
.prob-links { margin: 10px 0 0; padding-left: 18px; }
.prob-links a { font-weight: 800; color: var(--maple-dark); }
.footer-links { margin-top: 6px !important; }
.footer-links a { color: inherit; text-decoration: underline; }
html[data-theme="night"] .prob-desc .hl,
html[data-theme="night"] .prob-links a { color: var(--maple-light); }
@media (max-width: 560px) {
    .prob-table { font-size: 12px; }
    .prob-table th, .prob-table td { padding: 8px 6px; }
    .prob-name { min-width: 9em; }
    .prob-filter label { flex-basis: 100%; }
    .prob-filter .btn { width: 100%; }
}
/* 게임 WebView: 공지 화면과 같은 밝은 바탕 · 좁은 폭 */
.prob-ingame .prob { gap: 12px; padding-top: 12px; }
.prob-ingame .panel { padding: 14px; background: #fff; border: 1px solid #d7c4a3; border-radius: 10px; color: #44382e; }
.prob-ingame .group-title { font-size: 15px; color: #5d351d; }
.prob-ingame .prob-toc { display: none; }
.prob-warning { flex-basis: 100%; margin: 0; padding: 8px 12px; font-weight: 800; border-left: 4px solid var(--maple-dark); background: var(--maple-soft); color: var(--text); border-radius: 6px; }
html[data-theme="night"] .prob-warning { background: #39372f; color: #f1d99a; }