/* 얼라이언스 앤 오더 — 게임 UI (PC/모바일 공용) */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: #171310 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" opacity="0.04"><path d="M0 30h60M30 0v60" stroke="white"/></svg>');
    color: #e8ddca;
    font-family: "Pretendard", -apple-system, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: #e8b64c; }

/* ---------------------------------------------------------------- 상단 바 */

.aao-top {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #241c14;
    border-bottom: 2px solid #5a4526;
}

.aao-logo {
    font-weight: 900;
    font-size: 17px;
    color: #f3d789;
    text-decoration: none;
    white-space: nowrap;
}

.aao-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.aao-nav a {
    color: #cdbfa4;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
}

.aao-nav a:hover { background: #372c1d; color: #f3d789; }

.aao-logout {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.aao-user { font-size: 13px; color: #a89877; }

.aao-logout button {
    font: inherit;
    font-size: 12px;
    color: #cdbfa4;
    background: none;
    border: 1px solid #5a4526;
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
}

/* ---------------------------------------------------------------- 본문 */

.aao-main {
    flex: 1;
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    padding: 18px 14px 40px;
}

.aao-alert {
    padding: 10px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
}

.aao-alert--error { background: #4a1f1a; border: 1px solid #8a3d32; color: #ffb3a7; }
.aao-alert--info { background: #1d3a25; border: 1px solid #3f7a50; color: #a7e8b8; }

.aao-panel {
    background: #221b13;
    border: 2px solid #4a3a22;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 18px;
}

.aao-panel--narrow { max-width: 560px; margin-inline: auto; }

.aao-panel h1 { font-size: 22px; margin-bottom: 14px; color: #f3d789; }
.aao-panel h1 small { font-size: 13px; color: #a89877; font-weight: 400; }
.aao-panel h2 { font-size: 16px; margin: 22px 0 10px; color: #e8cf9a; }
.aao-panel__foot { margin-top: 16px; font-size: 14px; }
.aao-panel__legal { margin-top: 14px; font-size: 12px; color: #8a7c62; }

/* ---------------------------------------------------------------- 버튼 · 폼 */

.aao-btn {
    display: inline-block;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    color: #f3e3bd;
    background: #3a2d1a;
    border: 2px solid #6a5330;
    border-radius: 10px;
    padding: 10px 22px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.aao-btn:hover { background: #4a3a22; }

.aao-btn--primary {
    background: linear-gradient(#c9973f, #a9741f);
    border-color: #2b1d0e;
    color: #241505;
}

.aao-btn--small { font-size: 12px; padding: 6px 12px; }
.aao-btn--crystal { background: #1f3242; border-color: #3f6a8a; color: #a7d8ff; }
.aao-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.aao-form { display: grid; gap: 14px; margin-top: 12px; }
.aao-form label { display: grid; gap: 5px; font-size: 14px; font-weight: 600; }
.aao-form input {
    font: inherit;
    padding: 10px 12px;
    background: #171310;
    color: #e8ddca;
    border: 2px solid #4a3a22;
    border-radius: 8px;
}
.aao-form input:focus { outline: none; border-color: #c9973f; }
.aao-form__label { font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------- 랜딩 */

.aao-hero { text-align: center; padding: 46px 10px 30px; }
.aao-hero__eyebrow { font-size: 11px; letter-spacing: 0.28em; color: #c9973f; font-weight: 700; }
.aao-hero__title { font-size: clamp(2rem, 7vw, 3.2rem); font-weight: 900; color: #f3d789; margin-top: 10px; text-shadow: 0 4px 0 rgba(0,0,0,.5); }
.aao-hero__sub { font-family: Consolas, monospace; letter-spacing: 0.3em; color: #a89877; font-size: 13px; margin-top: 4px; }
.aao-hero__desc { margin-top: 18px; color: #cdbfa4; font-size: 15px; }
.aao-hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

.aao-races { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 16px 0; }
.aao-race-card { background: #221b13; border: 2px solid #4a3a22; border-radius: 12px; padding: 18px; text-align: center; }
.aao-race-card__icon { font-size: 2rem; }
.aao-race-card h3 { color: #f3d789; margin: 8px 0 4px; }
.aao-race-card p { font-size: 13px; color: #a89877; }

.aao-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 8px; }
.aao-features > div { background: #1d1710; border: 1px solid #3a2d1a; border-radius: 12px; padding: 16px; }
.aao-features h4 { color: #e8cf9a; margin-bottom: 6px; }
.aao-features p { font-size: 13px; color: #a89877; }

/* ---------------------------------------------------------------- 종족 선택 */

.aao-race-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.aao-race-pick__item input { position: absolute; opacity: 0; }
.aao-race-pick__card {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 14px 8px;
    background: #171310;
    border: 2px solid #4a3a22;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    font-size: 13px;
}
.aao-race-pick__card small { color: #8a7c62; font-size: 11px; }
.aao-race-pick__icon { font-size: 1.7rem; }
.aao-race-pick__item input:checked + .aao-race-pick__card {
    border-color: #c9973f;
    background: #2c2214;
    box-shadow: 0 0 0 1px #c9973f;
}

/* ---------------------------------------------------------------- 자원 바 */

.aao-resbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    background: #241c14;
    border: 2px solid #4a3a22;
    border-radius: 12px;
    padding: 10px 18px;
    margin-bottom: 14px;
    font-weight: 800;
    font-size: 15px;
}

.aao-resbar__cap { font-size: 12px; color: #8a7c62; font-weight: 400; }
.aao-resbar__crystal { margin-inline-start: auto; color: #a7d8ff; }

/* ---------------------------------------------------------------- 테이블 · 대기열 */

.aao-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.aao-table th { text-align: left; color: #a89877; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid #4a3a22; }
.aao-table td { padding: 9px 8px; border-bottom: 1px solid #322818; vertical-align: middle; }
.aao-table small { color: #8a7c62; }
.aao-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.aao-queue { list-style: none; display: grid; gap: 8px; }
.aao-queue li {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #1d1710;
    border: 1px solid #3a2d1a;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 14px;
}
.aao-queue__time { margin-inline-start: auto; color: #e8cf9a; font-variant-numeric: tabular-nums; }
.aao-queue--danger { border-color: #8a3d32; background: #331612; }

.aao-badge-line a { font-weight: 700; }
.aao-troops { font-size: 15px; }
.aao-troops b { color: #f3d789; }

.aao-train-form { display: flex; gap: 6px; align-items: center; }
.aao-train-form input[type=number] {
    width: 70px; font: inherit; padding: 6px 8px;
    background: #171310; color: #e8ddca;
    border: 2px solid #4a3a22; border-radius: 8px;
}

/* ---------------------------------------------------------------- 지도 */

.aao-map-scroll { overflow: auto; border: 2px solid #4a3a22; border-radius: 10px; }
.aao-map { border-collapse: collapse; margin-inline: auto; }
.aao-map td {
    width: 34px; height: 34px; min-width: 34px;
    text-align: center; font-size: 17px;
    border: 1px solid #2c2214;
    background: #1a2412;   /* 초원 */
}
.aao-map td a { text-decoration: none; display: block; }
.aao-map__void { background: #0d0b08 !important; }
.aao-map__empty:hover { background: #24321a; }
.aao-map__mine { background: #2c2a14 !important; }
.aao-map__ally { background: #14322c !important; }
.aao-map__enemy:hover { background: #3a1d14; cursor: pointer; }
.aao-map-legend { margin-top: 10px; font-size: 13px; color: #a89877; }

/* ---------------------------------------------------------------- 보고서 */

.aao-reports { list-style: none; display: grid; gap: 8px; }
.aao-reports summary {
    display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
    cursor: pointer; padding: 10px 14px;
    background: #1d1710; border: 1px solid #3a2d1a; border-radius: 10px;
    font-size: 14px; font-weight: 700;
}
.aao-reports__time { margin-inline-start: auto; font-size: 12px; color: #8a7c62; font-weight: 400; }
.aao-reports__body {
    white-space: pre-wrap; font-family: inherit; font-size: 13px;
    background: #171310; border: 1px solid #322818; border-radius: 0 0 10px 10px;
    padding: 12px 16px; color: #cdbfa4;
}

/* ---------------------------------------------------------------- 동맹 · 상점 */

.aao-alliance-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.aao-shop-balance { font-size: 17px; }
.aao-shop-uses { padding-left: 4px; list-style: none; display: grid; gap: 8px; font-size: 14px; }
.aao-shop-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.aao-shop-pack { background: #1d1710; border: 2px solid #3a2d1a; border-radius: 12px; padding: 18px; text-align: center; }
.aao-shop-pack h3 { color: #e8cf9a; font-size: 15px; }
.aao-shop-pack__amount { font-size: 20px; font-weight: 900; color: #a7d8ff; margin: 8px 0 2px; }
.aao-shop-pack__price { font-size: 13px; color: #a89877; margin-bottom: 12px; }

/* ---------------------------------------------------------------- 푸터 · 모바일 */

.aao-footer {
    text-align: center; padding: 16px; font-size: 12px;
    color: #8a7c62; border-top: 1px solid #322818;
}

.aao-attack-target, .aao-attack-travel { font-size: 14px; margin-bottom: 8px; }

@media (max-width: 640px) {
    .aao-panel { padding: 16px 14px; }
    .aao-alliance-cols { grid-template-columns: 1fr; }
    .aao-table { font-size: 12px; }
    .aao-table td, .aao-table th { padding: 6px 4px; }
    .aao-nav a { font-size: 13px; padding: 5px 7px; }
    .aao-logout { width: 100%; justify-content: flex-end; }
    .aao-map td { width: 30px; height: 30px; min-width: 30px; font-size: 15px; }
}

/* ================================================================ 마을 그래픽 UI
   (부족전쟁·트라비안 참고: 조감도 + 시각적 자원 게이지 + 건물 카드) */

.vmap-wrap {
    background: linear-gradient(#3f5a7a, #6d8a5c);
    border: 2px solid #4a3a22;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: inset 0 0 40px rgba(0,0,0,.35);
}

.vmap { display: block; width: 100%; height: auto; }

.vmap-b { cursor: pointer; transition: transform .12s ease; }
.vmap-b:hover { filter: brightness(1.14) drop-shadow(0 0 6px rgba(255,220,130,.7)); }
.vmap-b:focus-visible { outline: 3px solid #ffd76a; outline-offset: 2px; }
.vmap-b--empty { opacity: .8; }

.vmap-label {
    font: 700 15px "Pretendard", sans-serif;
    fill: #fff;
    paint-order: stroke;
    stroke: rgba(30,22,12,.85);
    stroke-width: 4px;
    pointer-events: none;
}

.vmap-hammer { animation: vmapPulse 1.1s ease-in-out infinite; }
@keyframes vmapPulse {
    50% { opacity: .45; }
}

/* ---------------------------------------------------------- 자원 바 (그래픽) */

.resbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.res {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(#2b2116, #241c14);
    border: 2px solid #4a3a22;
    border-radius: 12px;
    padding: 9px 12px;
}

.res__icon { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.res__body { display: grid; gap: 3px; min-width: 0; flex: 1; }
.res__top { display: flex; align-items: baseline; gap: 6px; }
.res__cur { font-size: 17px; font-weight: 900; color: #f3e3bd; font-variant-numeric: tabular-nums; }
.res__rate { font-size: 11px; color: #8fbf6a; font-weight: 700; }
.res__cap { font-size: 10px; color: #8a7c62; font-variant-numeric: tabular-nums; }

.res__gauge {
    display: block;
    height: 7px;
    background: #150f0a;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.res__gauge i { display: block; height: 100%; border-radius: 4px; transition: width .4s ease; }

.res--wood .res__gauge i { background: linear-gradient(90deg, #7a5a2e, #c9973f); }
.res--clay .res__gauge i { background: linear-gradient(90deg, #8a4a32, #d97a4a); }
.res--iron .res__gauge i { background: linear-gradient(90deg, #55606e, #9fb0c4); }
.res--pop  .res__gauge i { background: linear-gradient(90deg, #3f6a4a, #6fc48a); }

.res--full { border-color: #b06a2a; }
.res--full .res__cap { color: #ffb347; font-weight: 700; }
.res--crystal { border-color: #3f6a8a; }
.res--crystal .res__cur { color: #a7d8ff; }
.res--crystal .res__cap a { font-size: 11px; }

/* --------------------------------------------------------------- 마을 헤더 */

.vhead {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.vhead h1 { font-size: 21px; color: #f3d789; }
.vhead__meta { font-size: 13px; color: #a89877; }
.vhead__reports {
    margin-inline-start: auto;
    font-size: 13px; font-weight: 700;
    background: #3a2d1a; border: 1px solid #6a5330;
    border-radius: 999px; padding: 4px 12px; text-decoration: none;
}

/* ------------------------------------------------------------ 진행 중 작업 */

.prog {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1d1710;
    border: 1px solid #3a2d1a;
    border-radius: 10px;
    padding: 9px 14px;
    margin-bottom: 8px;
}
.prog--danger { border-color: #8a3d32; background: #2e1512; }
.prog__icon { font-size: 1.2rem; }
.prog__body { flex: 1; display: grid; gap: 5px; min-width: 0; }
.prog__title { font-size: 14px; font-weight: 700; }
.prog__title small { color: #8a7c62; font-weight: 400; margin-left: 6px; }
.prog__bar { display: block; height: 8px; background: #120d08; border-radius: 4px; overflow: hidden; }
.prog__bar i {
    display: block; height: 100%;
    background: linear-gradient(90deg, #7a5a2e, #e8b64c);
    border-radius: 4px;
}
.prog--danger .prog__bar i { background: linear-gradient(90deg, #7a2e2e, #e85c4c); }
.prog__time { font-size: 13px; color: #e8cf9a; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- 병력 */

.troops { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.troop {
    display: grid;
    justify-items: center;
    gap: 2px;
    background: #1d1710;
    border: 1px solid #3a2d1a;
    border-radius: 10px;
    padding: 10px 18px;
    min-width: 92px;
}
.troop__icon { font-size: 1.4rem; }
.troop__count { font-size: 19px; font-weight: 900; color: #f3d789; font-variant-numeric: tabular-nums; }
.troop__name { font-size: 11px; color: #a89877; }
.troops__cta { margin-inline-start: auto; }

/* ------------------------------------------------------------- 건물 카드 */

.bcards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.bcard {
    background: linear-gradient(#241c14, #1d1710);
    border: 2px solid #3a2d1a;
    border-radius: 12px;
    padding: 12px 14px;
    display: grid;
    gap: 8px;
    align-content: start;
}
.bcard--none { border-style: dashed; opacity: .92; }

.bcard--flash {
    animation: bcardFlash 1.1s ease-out;
}
@keyframes bcardFlash {
    0%, 100% { border-color: #3a2d1a; }
    25%, 75% { border-color: #ffd76a; box-shadow: 0 0 14px rgba(255,215,106,.45); }
}

.bcard__head { display: flex; align-items: center; gap: 10px; }
.bcard__lv {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: #3a2d1a; border: 2px solid #c9973f;
    border-radius: 50%;
    font-weight: 900; color: #f3d789;
    font-variant-numeric: tabular-nums;
}
.bcard__title { display: grid; min-width: 0; }
.bcard__title b { font-size: 15px; color: #f3e3bd; }
.bcard__title small { font-size: 11px; color: #8a7c62; }
.bcard__building { margin-inline-start: auto; font-size: 12px; color: #7fc4ff; white-space: nowrap; }

.bcard__effect {
    font-size: 12px; font-weight: 700; color: #8fbf6a;
    background: #16210f; border: 1px solid #2c3f1d;
    border-radius: 7px; padding: 4px 9px;
}

.bcard__cost { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: #cdbfa4; }
.bcard__cost .lack { color: #ff8a7a; }
.bcard__dur { color: #8a7c62; }
.bcard__max { font-size: 12px; color: #8a7c62; text-align: center; padding: 6px 0; }

@media (max-width: 640px) {
    .vmap-label { font-size: 19px; }
    .troops__cta { margin-inline-start: 0; width: 100%; }
    .prog { flex-wrap: wrap; }
    .prog__time { margin-inline-start: auto; }
}

/* 자원 아이콘 (SVG — 이모지 폰트에 의존하지 않는다) */
.ricon {
    width: 1.5em;
    height: 1.5em;
    display: block;
    flex: 0 0 auto;
}

.res__icon { display: flex; align-items: center; }

/* 건물 비용 · 병영 비용 줄에서는 텍스트 크기에 맞춰 작게 */
.bcard__cost .ricon,
.aao-cost .ricon {
    width: 1.05em;
    height: 1.05em;
    display: inline-block;
    vertical-align: -0.18em;
}

.bcard__cost span { display: inline-flex; align-items: center; gap: 3px; }
.aao-cost { white-space: nowrap; }

/* --------------------------------------------- 마을 / 자원 화면 전환 탭 */

.maptabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.maptab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px 7px 10px;
    background: #241c14;
    border: 2px solid #4a3a22;
    border-radius: 12px;
    text-decoration: none;
    color: #cdbfa4;
    font-weight: 800;
    font-size: 14px;
}

.maptab svg { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 5px; }
.maptab:hover { border-color: #6a5330; color: #f3d789; }

.maptab.is-on {
    background: linear-gradient(#3a2d1a, #2c2214);
    border-color: #c9973f;
    color: #f3d789;
    box-shadow: 0 0 0 1px #c9973f inset;
}

/* 자원 필드 · 마을 맵의 보조 라벨 */
/* 다중 슬롯 자원지 타일 — 18칸이라 글씨를 줄인다 */
.vmap-label--sm { font-size: 13px !important; }
.vmap-sub--sm { font-size: 11px !important; }

.vmap-sub {
    font: 700 13px "Pretendard", sans-serif;
    fill: #e8e2cf;
    paint-order: stroke;
    stroke: rgba(30,22,12,.85);
    stroke-width: 3.5px;
    pointer-events: none;
}

.rf-center { cursor: pointer; }
.rf-center:hover { filter: brightness(1.12) drop-shadow(0 0 8px rgba(255,220,130,.65)); }

/* ══════════════════════ 종족별 마을 아트 — 미세 애니메이션 오버레이 ══════════════════════
   배경(지형) 레이어는 정적으로 두고 건물 위 요소만 가볍게 움직인다. */

/* 인간 — 깃발 흔들림 */
.art-flag { animation: artFlag 2.6s ease-in-out infinite; transform-origin: 0 -94px; }
@keyframes artFlag {
    0%, 100% { transform: skewY(0deg) scaleX(1); }
    35%      { transform: skewY(-4deg) scaleX(0.94); }
    70%      { transform: skewY(3deg) scaleX(1.03); }
}

/* 인간 — 물레방아 회전 */
.art-wheel { animation: artSpin 7s linear infinite; }
@keyframes artSpin { to { transform: rotate(360deg); } }

/* 오크 — 모닥불 불씨 */
.art-fire { animation: artFire 0.9s ease-in-out infinite; transform-origin: 0 4px; }
@keyframes artFire {
    0%, 100% { transform: scale(1, 1); opacity: 1; }
    30%      { transform: scale(0.88, 1.12); opacity: .85; }
    60%      { transform: scale(1.08, 0.94); opacity: .95; }
}

/* 엘프 — 잎사귀·수정 반짝임 */
.art-shimmer { animation: artShimmer 3.4s ease-in-out infinite; }
.art-shimmer--delay { animation-delay: 1.1s; }
@keyframes artShimmer {
    0%, 100% { opacity: 1; }
    50%      { opacity: .62; }
}

/* 드워프 — 용광로 불빛 */
.art-glow { animation: artGlow 1.8s ease-in-out infinite; }
@keyframes artGlow {
    0%, 100% { opacity: 1; }
    50%      { opacity: .48; }
}

/* 드워프 — 증기 분출 */
.art-steam { animation: artSteam 2.8s ease-out infinite; }
@keyframes artSteam {
    0%   { opacity: 0; transform: translateY(6px) scale(.6); }
    30%  { opacity: .85; }
    100% { opacity: 0; transform: translateY(-22px) scale(1.5); }
}

/* 드워프 — 톱니바퀴 */
.art-gear { animation: artSpin 5s linear infinite; }

/* 종족별 맵 프레임 톤 */
.vmap-wrap--human  { background: linear-gradient(#4f6f92, #7fa055); }
.vmap-wrap--orc    { background: linear-gradient(#6b4a30, #8a6a42); border-color: #6b4526; }
.vmap-wrap--elf    { background: linear-gradient(#2f5c4a, #5d8f5a); border-color: #3d6b42; }
.vmap-wrap--dwarf  { background: linear-gradient(#2a2724, #4a4642); border-color: #6b6558; }

/* 접근성 — 애니메이션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .art-flag, .art-wheel, .art-fire, .art-shimmer, .art-glow, .art-steam, .art-gear,
    .vmap-hammer {
        animation: none !important;
    }
}

/* ══════════════════════ 랜딩 · 인증 화면 ══════════════════════ */

.landing-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.landing-bg svg { width: 100%; height: 100%; display: block; }
.landing-bg__veil {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 42%, rgba(23,19,16,.18), rgba(23,19,16,.72));
}

.lb-flag { animation: artFlag 2.8s ease-in-out infinite; transform-origin: 0 -40px; }
.lb-cloud { animation: lbDrift 70s linear infinite; }
.lb-cloud--2 { animation-duration: 95s; animation-direction: reverse; }
@keyframes lbDrift {
    from { transform: translateX(-260px); }
    to   { transform: translateX(1260px); }
}
/* 행군 — 한 칸(52px)씩 흘러가며 반복 */
.lb-army { animation: lbMarch 9s linear infinite; }
@keyframes lbMarch {
    from { transform: translateX(0); }
    to   { transform: translateX(-52px); }
}

.landing { display: grid; gap: 20px; padding: 24px 0 10px; }

.auth-card {
    max-width: 460px;
    margin-inline: auto;
    width: 100%;
    background: rgba(30, 23, 16, .72);
    backdrop-filter: blur(9px);
    border: 2px solid #6a5330;
    border-radius: 18px;
    padding: 28px 26px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
}

.auth-card__eyebrow { font-size: 10px; letter-spacing: .3em; color: #c9973f; font-weight: 700; }
.auth-card__title { font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 900; color: #f3d789; margin-top: 8px; text-shadow: 0 3px 0 rgba(0,0,0,.5); }
.auth-card__sub { font-family: Consolas, monospace; font-size: 11px; letter-spacing: .3em; color: #a89877; margin-top: 3px; }
.auth-card__desc { font-size: 14px; color: #cdbfa4; margin-top: 14px; line-height: 1.75; }
.auth-card__note { font-size: 11px; color: #8a7c62; margin-top: 16px; line-height: 1.7; }

.auth-social { display: grid; gap: 8px; margin-top: 20px; }
.auth-social__btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 16px; border-radius: 10px;
    font-weight: 800; font-size: 14px; text-decoration: none;
    border: 2px solid rgba(255,255,255,.18);
}
.auth-social__icon { display: flex; width: 20px; height: 20px; }
.auth-social__icon svg { width: 100%; height: 100%; }
.auth-social__btn--google  { background: #fff; color: #2b2b2b; border-color: #fff; }
.auth-social__btn--discord { background: #5865f2; color: #fff; border-color: #5865f2; }
.auth-social__btn--apple   { background: #000; color: #fff; border-color: #444; }
.auth-social__btn--facebook { background: #1877f2; color: #fff; border-color: #1877f2; }

/* 소셜 신규 가입 — 종족 선택 */
.social-races { display: grid; gap: 8px; }
.social-race {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
    background: #1d1811; border: 2px solid #3d3226; border-radius: 10px;
}
.social-race:has(input:checked) { border-color: #c9973f; background: #241c12; }
.social-race__body { display: grid; gap: 2px; }
.social-race__body b { color: #e8cf9a; font-size: 14px; }
.social-race__body small { color: #8a7c62; font-size: 12px; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: #8a7c62; font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #4a3a22; }

.auth-guest__btn { width: 100%; display: grid; gap: 2px; padding: 14px; }
.auth-guest__btn small { font-size: 11px; font-weight: 600; opacity: .8; }

.auth-links { margin-top: 16px; font-size: 13px; display: flex; gap: 10px; justify-content: center; }

.landing-races {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px; max-width: 620px; margin-inline: auto; width: 100%;
}
.landing-race {
    display: grid; justify-items: center; gap: 2px; text-align: center;
    background: rgba(30,23,16,.6); border: 1px solid #4a3a22; border-radius: 12px; padding: 12px 8px;
}
.landing-race span { font-size: 1.6rem; }
.landing-race b { font-size: 13px; color: #f3d789; }
.landing-race small { font-size: 10px; color: #8a7c62; }

/* ══════════════════════ 월드(서버) 선택 ══════════════════════ */

.wl-profile { display: flex; align-items: center; gap: 14px; }
.wl-profile__avatar {
    width: 46px; height: 46px; display: grid; place-items: center;
    background: #3a2d1a; border: 2px solid #6a5330; border-radius: 50%; font-size: 1.4rem;
}
.wl-profile__body { display: grid; gap: 2px; }
.wl-profile__body b { color: #f3d789; font-size: 16px; }
.wl-profile__body small { font-size: 12px; color: #a89877; }
.wl-guest-warn { color: #e8b64c; }
.wl-rank {
    display: inline-block; margin-left: 6px; padding: 1px 8px;
    background: #2c2416; border: 1px solid #6a5330; border-radius: 999px;
    font-size: 11px; color: #f3d789; white-space: nowrap;
}

.wl-score {
    display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid #3a2d1a;
    font-size: 12px; color: #a89877;
}
.wl-score__total { font-size: 13px; color: #cdbfa4; }
.wl-score__total b { color: #ffd76a; font-size: 17px; margin-left: 4px; }
.wl-score__part small { color: #7d7160; }

.wcard {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: #1d1710; border: 2px solid #3a2d1a; border-radius: 12px;
    padding: 14px 18px; margin-bottom: 10px;
}
.wcard--mine { border-color: #6a5330; background: linear-gradient(#2c2214, #221b13); }
.wcard--new { border-left: 5px solid #4caf50; }
.wcard--active { border-left: 5px solid #e8b64c; }
.wcard--locked { border-left: 5px solid #b04a3a; opacity: .78; }

.wcard__main { flex: 1; min-width: 220px; display: grid; gap: 4px; }
.wcard__title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 16px; }
.wcard__title b { color: #f3d789; }
.wcard__sub { color: #a89877; font-size: 13px; }
.wcard__meta { font-size: 12px; color: #a89877; }
.wcard__state { font-size: 12px; color: #cdbfa4; }
.wcard__action { flex: 0 0 auto; }

.wtag {
    font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
    border: 1px solid currentColor; white-space: nowrap;
}
.wtag--new { color: #7fd48a; }
.wtag--active { color: #ffd76a; }
.wtag--locked { color: #ff9a8a; }

.wl-legend { list-style: none; display: grid; gap: 8px; font-size: 13px; color: #cdbfa4; }
.wl-legend li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* ══════════════════════ 시작 방위 선택 ══════════════════════ */

.dir-world { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.dir-hint { font-size: 13px; color: #a89877; margin-top: 10px; line-height: 1.8; }

.dir-cross {
    position: relative;
    width: 100%; max-width: 320px;
    aspect-ratio: 1;
    margin: 20px auto 6px;
}
.dir-cross__grid { position: absolute; inset: 0; width: 100%; height: 100%; }

.dir-quad { position: absolute; width: 44%; height: 44%; }
.dir-quad--nw { left: 2%;  top: 2%; }
.dir-quad--ne { right: 2%; top: 2%; }
.dir-quad--sw { left: 2%;  bottom: 2%; }
.dir-quad--se { right: 2%; bottom: 2%; }

.dir-quad input { position: absolute; opacity: 0; }
.dir-quad > span {
    display: grid; place-content: center; gap: 2px;
    width: 100%; height: 100%;
    background: rgba(23,19,16,.72);
    border: 2px solid #4a3a22; border-radius: 12px;
    cursor: pointer; text-align: center;
}
.dir-quad b { font-size: 14px; color: #e8cf9a; }
.dir-quad small { font-size: 10px; color: #8a7c62; }
.dir-quad input:checked + span {
    border-color: #c9973f; background: rgba(60,45,26,.9);
    box-shadow: 0 0 0 1px #c9973f, 0 0 18px rgba(201,151,63,.35);
}
.dir-quad input:focus-visible + span { outline: 2px solid #ffd76a; outline-offset: 2px; }

.dir-random { display: block; margin-top: 6px; }
.dir-random input { position: absolute; opacity: 0; }
.dir-random > span {
    display: grid; gap: 2px; padding: 12px 16px; text-align: center;
    background: #171310; border: 2px solid #4a3a22; border-radius: 12px; cursor: pointer;
}
.dir-random b { color: #e8cf9a; font-size: 14px; }
.dir-random small { font-size: 11px; color: #8a7c62; }
.dir-random input:checked + span { border-color: #c9973f; background: #2c2214; box-shadow: 0 0 0 1px #c9973f; }

.dir-bonus { font-size: 13px; color: #8fbf6a; text-align: center; }
.dir-form { display: grid; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
    .lb-flag, .lb-cloud, .lb-army { animation: none !important; }
}

/* ---------------------------------------------------------------- 실시간 알림 토스트 */
.aao-toasts {
    position: fixed; z-index: 60; right: 12px; bottom: 12px;
    display: grid; gap: 8px; justify-items: end;
    max-width: min(340px, calc(100vw - 24px));
    pointer-events: none;
}
.aao-toast {
    padding: 10px 14px;
    background: #241c12; color: #e8ddca;
    border: 1px solid #4a3a22; border-left: 3px solid #c9973f; border-radius: 8px;
    font-size: 13px; line-height: 1.45;
    box-shadow: 0 6px 20px rgba(0,0,0,.45);
    animation: aao-toast-in .28s ease-out;
}
.aao-toast--out { animation: aao-toast-out .38s ease-in forwards; }

@keyframes aao-toast-in  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes aao-toast-out { to { opacity: 0; transform: translateX(16px); } }

.aao-nav--alert { color: #ffd76a !important; }

@media (prefers-reduced-motion: reduce) {
    .aao-toast, .aao-toast--out { animation: none; }
}

/* ---------------------------------------------------------------- 테크 트리 잠금 상태 */
.bcard--locked { opacity: .72; border-style: dashed; border-color: #3d3226; }
.bcard--locked .bcard__lv { background: #2a2318; color: #7d7160; }

.bcard__req {
    display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center;
    font-size: 12px; color: #b9a680; padding: 4px 0;
}
.bcard__req-item {
    padding: 1px 7px;
    background: #2c2416; border: 1px solid #4a3a22; border-radius: 999px;
    color: #e8cf9a; white-space: nowrap;
}

/* ---------------------------------------------------------------- 밸런스 표 페이지 */
.bal-lede { margin: 0 0 12px; color: #b9a680; font-size: 13px; line-height: 1.6; }
.bal-lede code, .bal-rule code { background: #1d1811; padding: 1px 5px; border-radius: 4px; color: #e8cf9a; }

.bal-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bal-chip {
    padding: 4px 10px; font-size: 12px; border-radius: 999px;
    background: #241c12; border: 1px solid #4a3a22; color: #cdbfa4;
}
.bal-chip b { color: #e8cf9a; }
.bal-chip--spec { border-color: #4a6b3a; }
.bal-chip--ph   { border-color: #6b5a2a; }
.bal-chip--ok   { border-color: #4a6b3a; color: #8fbf6a; }
.bal-chip--warn { border-color: #8a4a3a; color: #ff8a7a; }

.bal-warnlist { margin: 6px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.7; }

.bal-legend { font-size: 12px; color: #8a7c62; line-height: 2; }
.bal-src {
    display: inline-block; padding: 1px 6px; margin-right: 2px;
    font-size: 11px; border-radius: 4px; white-space: nowrap;
}
.bal-src--spec { background: #24331c; color: #9fd07a; border: 1px solid #4a6b3a; }
.bal-src--ph   { background: #332b18; color: #e0c46a; border: 1px solid #6b5a2a; }
.bal-src--ext  { background: #262229; color: #a99ac4; border: 1px solid #4d4260; }

/* 넓은 표는 페이지 대신 표만 가로로 스크롤한다 */
.bal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }

.bal-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.bal-table th, .bal-table td { padding: 6px 10px; border-bottom: 1px solid #362c1e; text-align: left; }
.bal-table th {
    position: sticky; top: 0; z-index: 1;
    background: #241c12; color: #e8cf9a; font-weight: 600; font-size: 12px; white-space: nowrap;
}
.bal-table td.num, .bal-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bal-table tbody tr:hover { background: #221a11; }
.bal-table--levels { min-width: 620px; }

.bal-dim { color: #7d7160; font-size: 12px; font-weight: 400; }
.bal-ok { color: #9fd07a; font-size: 12px; font-weight: 600; }
/* ---------------------------------------------------------------- 미션 */
.mis-list { display: grid; gap: 8px; }
.mis {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 16px; background: #1d1811;
    border: 1px solid #3d3226; border-left: 3px solid #6a5330; border-radius: 8px;
}
.mis--ready { border-left-color: #9fd07a; background: #1e2117; }
.mis--done { opacity: .6; }
.mis__body { flex: 1; min-width: 220px; display: grid; gap: 5px; }
.mis__body b { color: #e8cf9a; font-size: 14px; }
.mis__cond { font-size: 12px; color: #a89877; font-variant-numeric: tabular-nums; }
.mis__gauge {
    display: block; height: 7px; background: #2c2416; border-radius: 999px; overflow: hidden;
}
.mis__gauge i { display: block; height: 100%; background: linear-gradient(90deg, #8a6236, #ffd76a); border-radius: 999px; }
.mis--ready .mis__gauge i { background: linear-gradient(90deg, #4a6b3a, #9fd07a); }
.mis__side { display: flex; align-items: center; gap: 10px; }
.mis__reward { color: #7fc4ff; font-weight: 700; font-size: 14px; white-space: nowrap; }
.mis__badge {
    padding: 2px 10px; background: #2c2416; border: 1px solid #4a3a22; border-radius: 999px;
    font-size: 11px; color: #9fd07a; white-space: nowrap;
}
.mis-series { margin-bottom: 12px; }
.mis-series__head { margin-bottom: 4px; text-align: right; }

.bal-border-chip {
    display: inline-block; padding: 1px 8px; border: 2px solid; border-radius: 999px;
    font-size: 11px; white-space: nowrap;
}
.bal-req {
    display: inline-block; margin: 1px 3px 1px 0; padding: 1px 7px;
    background: #2c2416; border: 1px solid #4a3a22; border-radius: 999px;
    font-size: 11px; color: #e8cf9a; white-space: nowrap;
}

.bal-details { border: 1px solid #3d3226; border-radius: 8px; margin-bottom: 8px; background: #1d1811; }
.bal-details > summary {
    padding: 10px 14px; cursor: pointer; list-style: none;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.bal-details > summary::-webkit-details-marker { display: none; }
.bal-details > summary::before { content: "▸"; color: #c9973f; }
.bal-details[open] > summary::before { content: "▾"; }
.bal-details[open] > summary { border-bottom: 1px solid #3d3226; }
.bal-details > summary:hover { background: #241c12; }
.bal-details .bal-scroll { margin: 0; padding: 0 4px 4px; }

.bal-note { font-size: 12px; color: #8a7c62; line-height: 1.7; margin: 0 0 10px; }

.bal-rules { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bal-rule {
    padding: 10px 14px; background: #1d1811;
    border: 1px solid #3d3226; border-left: 3px solid #c9973f; border-radius: 8px;
}
.bal-rule b { color: #e8cf9a; font-size: 13px; }
.bal-rule p { margin: 5px 0 0; font-size: 12px; color: #cdbfa4; line-height: 1.7; }
.bal-kv { display: inline-block; margin-right: 12px; white-space: nowrap; }
.bal-kv b { color: #ffd76a; }

@media (max-width: 560px) {
    .bal-table { font-size: 12px; }
    .bal-table th, .bal-table td { padding: 5px 7px; }
}

/* ---------------------------------------------------------------- 공성무기 */
.aao-siege-hint { display: block; font-size: 11px; color: #c9973f; line-height: 1.5; }
.aao-dim { opacity: .55; }
.aao-attack-wall {
    margin-top: 12px; padding: 10px 14px;
    background: #1d1811; border: 1px solid #3d3226; border-left: 3px solid #8a6236; border-radius: 8px;
    font-size: 13px; color: #cdbfa4; line-height: 1.7;
}
.aao-attack-wall small { color: #8a7c62; }
.bal-row--off { opacity: .5; }

/* ---------------------------------------------------------------- 초보자 보호 */
.res--shield { border-color: #4a6b3a !important; }
.res--shield .res__cur { color: #9fd07a; }
.res--shield .res__rate { color: #8fbf6a; }

.bal-shield {
    padding: 10px 14px; margin-bottom: 10px;
    background: #1c2117; border: 1px solid #3d4a32; border-left: 3px solid #6b8a4a; border-radius: 8px;
    font-size: 12px; color: #b9c9a6; line-height: 1.7;
}
.bal-shield b { color: #9fd07a; }

/* ---------------------------------------------------------------- 부족 기술 · 외교 */
.tribe-vault { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 12px; font-size: 15px; }
.tribe-vault span { display: inline-flex; align-items: center; gap: 5px; color: #e8cf9a; }
.aao-form--row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.aao-form--row label { display: grid; gap: 3px; font-size: 12px; color: #b9a680; }
.aao-form--row input, .aao-form--row select { width: 120px; }
.dip-chip {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11px; color: #fff; font-weight: 600;
}
.aao-cost .lack { color: #ff8a7a; }
.bal-src--int { background: #1e2a33; color: #7ab8d0; border: 1px solid #3a5a6b; }

/* ---------------------------------------------------------------- 상점 */
.shop-uses { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.shop-use {
    padding: 12px 14px; background: #1d1811;
    border: 1px solid #3d3226; border-left: 3px solid #c9973f; border-radius: 8px;
}
.shop-use--off { border-left-color: #4d4260; opacity: .7; }
.shop-use b { color: #e8cf9a; font-size: 13px; }
.shop-use p { margin: 6px 0 0; font-size: 12px; color: #cdbfa4; line-height: 1.8; }
.shop-use form { display: inline-block; margin-top: 6px; }
.shop-active { color: #9fd07a; font-weight: 600; }

.shop-packs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.shop-pack {
    position: relative; padding: 14px; text-align: center;
    background: #1d1811; border: 1px solid #3d3226; border-radius: 10px;
}
.shop-pack--hot { border-color: #c9973f; box-shadow: 0 0 0 1px rgba(201,151,63,.35); }
.shop-pack__badge {
    position: absolute; top: -9px; right: 10px; padding: 2px 9px;
    background: #c9973f; color: #171310; font-size: 11px; font-weight: 700; border-radius: 999px;
}
.shop-pack h3 { margin: 0 0 8px; font-size: 14px; color: #e8ddca; }
.shop-pack__amount { margin: 0; font-size: 17px; color: #ffd76a; font-weight: 700; }
.shop-pack__bonus { font-size: 13px; color: #8fbf6a; }
.shop-pack__price { margin: 4px 0 0; font-size: 15px; color: #e8ddca; }
.shop-pack__unit { margin: 2px 0 8px; font-size: 11px; color: #8a7c62; }
.shop-pack__limit { margin: 0 0 8px; font-size: 11px; color: #d9a05b; }