/* 대문 — 최근 등록한 영웅 · 장비 · 용병 + 오른쪽 링크 */

/* 카드 사이를 Velzon 기본(1.5rem)보다 좁게 — 대문은 카드가 많아 한 화면에 들어오게 */
.home-card { margin-bottom: 1rem; }

/* ── 커버 (2026-09-23 요청) ───────────────────────────────────────────────
   패치 일러스트를 첫 화면 맨 위에 한 장. 그림 비율이 제각각이라 높이를 정하지 않고
   가로만 꽉 채운다 — 페이스북 커버처럼 잘라 내면 인물 얼굴이 날아간다.
   그림은 /admin/settings 에서 고른다 (사이트 설정 home.cover.image). */
.home-cover {
    position: relative;
    margin: 0 0 1rem;
    border-radius: .5rem;
    overflow: hidden;
    line-height: 0;                 /* 그림 아래 빈 줄 없애기 */
    background: var(--ls-soft);
}
.home-cover img { width: 100%; height: auto; display: block; }
.home-cover-edit { position: absolute; right: .5rem; top: .5rem; line-height: 1.4; }

/* ── 지금 진행 중인 배너 (슬라이드) ───────────────────────────────────────
   배너가 여럿 같이 도는 일이 흔해 게임처럼 한 장씩 넘긴다. 틀은 bootstrap 캐러셀이고
   여기서는 겉모습만 맡는다. 배너 그림이 올라오면 그림이, 없으면 픽업 얼굴이 자리를 채운다. */
/* 배너 아트 폭 — 원본이 800×349 라 칸 너비(1240px)를 다 쓰면 늘어나 흐려지고
   대문 첫 화면을 혼자 다 먹는다. 여기서 한 번에 줄인다 (2026-09-24 사용자 요청) */
/* 620 → 744 → 930 (2026-09-25). 원래의 1.5배다. 여기서 더 키우면 틀(1082px)을
   넘어서 양옆 미리보기가 사라진다 — 스킨 고르기 꼴이 깨진다 */
.home-bn-slider { --home-bn-h: 96px; --home-bn-art-w: 930px; }
/* 고르기 틀 — 한 줄로 늘어놓고 고른 칸이 가운데 오도록 줄을 민다 (home.js).
   양옆으로 삐져나간 칸은 잘라 보인다 — 그 걸친 조각이 '다음 배너' 미리보기다 */
.home-bn-slider { position: relative; overflow: hidden; }
.home-bn-track {
    display: flex; align-items: center; gap: 1rem;
    min-height: var(--home-bn-h);
    will-change: transform;
    /* 느리고 부드럽게 (2026-09-27 사용자 요청 "속도는 빠르면 안되고").
       .38s 는 저절로 넘어갈 때 툭 끊겨 보였다 — 0.9초로 늘리고 가속을 완만하게 */
    transition: transform .9s cubic-bezier(.33, 0, .2, 1);
}
.home-bn-item {
    flex: 0 0 auto;
    /* 칸은 그림에 맞춰 줄어든다 (2026-09-25) — 칸을 기준 폭으로 못 박아 두면 띠가
       높이에 걸려 더 좁아졌을 때 양옆 빈자리가 생겨 옆 칸 미리보기가 밀려난다 */
    max-width: min(100%, var(--home-bn-art-w));
    opacity: .38;
    transform: scale(.86);
    filter: saturate(.55);
    transition: opacity .9s cubic-bezier(.33, 0, .2, 1),
                transform .9s cubic-bezier(.33, 0, .2, 1),
                filter .9s cubic-bezier(.33, 0, .2, 1);
    cursor: pointer;
}
.home-bn-item > .home-bn { width: min(90vw, var(--home-bn-art-w)); }
.home-bn-item.is-on { opacity: 1; transform: scale(1); filter: none; cursor: default; }
@media (prefers-reduced-motion: reduce) {
    .home-bn-track, .home-bn-item { transition: none; }
}
.home-bn {
    display: flex; align-items: center; gap: .75rem;
    min-height: var(--home-bn-h);
    padding: .5rem .7rem;
    border: 1px solid var(--ls-border);
    border-radius: .4rem;
    background: var(--ls-surface);
    color: inherit; text-decoration: none;
    min-width: 0;
    transition: border-color .12s, background .12s;
}
/* 배너 아트 — 게임 화면처럼 가로로 꽉. 밑에 무슨 배너인지 한 줄 */
.home-bn-art-wrap { display: block; color: inherit; text-decoration: none; }
.home-bn-art {
    display: block;
    /* 공지 띠는 800x150 이다. 띠가 없어 배너 아트(800x349)로 대신하는 줄이 섞이면
       슬라이드 높이가 들썩이므로 띠 높이에 맞춰 같이 줄인다 (2026-09-24).
       width 를 auto 로 둬야 두 자를 함께 지키면서 비율이 안 찌그러진다 */
    width: auto; height: auto;
    max-width: min(100%, var(--home-bn-art-w));
    max-height: calc(var(--home-bn-art-w) * 150 / 800);
    margin-inline: auto;
    border-radius: .4rem;
    border: 1px solid var(--ls-border);
    user-select: none; -webkit-user-drag: none;
}
.home-bn-art-wrap:hover .home-bn-art { border-color: var(--ls-primary); }
/* 그림 밑에 붙는 글 — 이름 · 기간 · D-n (2026-10-01 제보). 가리켜야 뜨는 title 은
   폰에서 꺼낼 길이 없어 늘 보이게 깔아 둔다. 그림 폭에 맞춰 가운데로 세운다. */
.home-bn-cap {
    display: flex; align-items: baseline; justify-content: center;
    flex-wrap: wrap; gap: .25rem .5rem;
    width: min(100%, var(--home-bn-art-w));
    margin: .3rem auto 0;
    padding-inline: .4rem;
    line-height: 1.3; text-align: center;
}
.home-bn-cap-name { font-size: .82rem; font-weight: 600; }
.home-bn-cap-when { font-size: .74rem; color: var(--ls-muted); }
/* 옆에 선 작은 배너의 글은 읽을 거리가 아니다 — 가운데 것만 보여 준다 */
.home-bn-item:not(.is-on) .home-bn-cap { visibility: hidden; }
/* 화살표 — 밝은 카드 위에서도 보이게 짙게 깔고 동그랗게 */
.home-bn-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgb(0 0 0 / .45);
    color: #fff; font-size: 1.3rem; line-height: 1;
    opacity: .7; cursor: pointer; z-index: 2;
}
.home-bn-nav:hover { opacity: 1; }
.home-bn-nav.is-prev { left: .4rem; }
.home-bn-nav.is-next { right: .4rem; }

/* 점은 슬라이드 아래 — 그림 위에 얹으면 배너 글자와 겹친다 */
.home-bn-dots { display: flex; justify-content: center; gap: .35rem; margin-top: .45rem; }
.home-bn-dots button {
    width: 8px; height: 8px; padding: 0;
    border: 0; border-radius: 50%;
    background-color: var(--ls-border-2);
    cursor: pointer;
}
.home-bn-dots button.active { background-color: var(--ls-primary); }
.home-bn:hover { border-color: var(--ls-primary); background: var(--ls-soft); }
.home-bn-faces { display: flex; align-items: center; flex: 0 0 auto; }
.home-bn-face {
    width: 34px; height: 34px;
    object-fit: cover;
    border: 1px solid var(--ls-border-2);
    border-radius: 50%;
    background: var(--ls-soft-2);
}
.home-bn-face + .home-bn-face { margin-left: -10px; }   /* 얼굴을 겹쳐 놓아 자리를 아낀다 */
.home-bn-none { width: 34px; height: 34px; border-radius: 50%; background: var(--ls-soft-2); display: block; }
.home-bn-more { margin-left: .25rem; color: var(--ls-muted); font-size: .72rem; }
.home-bn-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.home-bn-text b { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-bn-kind { color: var(--ls-muted); font-size: .72rem; }
.home-bn-when { color: var(--ls-text-2); font-size: .74rem; }
.home-bn-left {
    margin-left: .25rem;
    padding: 0 .3rem;
    border-radius: .25rem;
    background: var(--ls-primary-soft); color: var(--ls-accent);
    font-style: normal; font-weight: 700; font-size: .72rem;
}
.home-bn-left.is-soon { background: var(--ls-warn-bg-2); color: var(--ls-warn-text-2); }  /* 사흘 이하 */
.home-card .card-header a { text-decoration: none; }

/* ── 영웅: 카드 그림 스무 장 (넓은 화면에서 한 줄에 열) ───────────────── */
.home-heroes {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: .6rem .5rem;
}
.home-hero { display: flex; flex-direction: column; align-items: center; gap: .25rem; color: inherit; text-decoration: none; }
.home-hero-img {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--ls-border);
    border-radius: .4rem;
    background: var(--ls-soft-2);
    overflow: hidden;
    transition: border-color .12s, transform .12s;
}
.home-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero:hover .home-hero-img { border-color: var(--ls-primary); transform: translateY(-2px); }
.home-hero-name {
    max-width: 100%;
    /* 카드에 견줘 글자가 너무 작았다 (2026-09-25) — 표 크기를 따른다 (16px · 폰 15.3px).
       화면 디자인 편집기에서 더 키울 수 있다 (--pg-font-table) */
    font-size: var(--pg-font-table, .9rem);
    line-height: 1.25;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
}
.home-sp {
    position: absolute; right: 3px; top: 3px;
    padding: 0 .3rem;
    border-radius: .25rem;
    background: #f06548; color: #fff;
    font-size: .62rem; font-style: normal; font-weight: 700;
}

/* ── 장비 · 용병: 그림 + 이름 (한 줄에 넷) ────────────────────────────── */
.home-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
}
.home-item {
    display: flex; align-items: center; gap: .55rem;
    padding: .35rem .5rem;
    border: 1px solid var(--ls-border);
    border-radius: .4rem;
    background: var(--ls-surface);
    color: inherit; text-decoration: none;
    min-width: 0;
    transition: border-color .12s, background .12s;
}
.home-item:hover { border-color: var(--ls-primary); background: var(--ls-soft); }
.home-item-img { flex: 0 0 58px; width: 58px; height: 58px; object-fit: contain; border-radius: .3rem; }
.home-item-none { display: block; border: 1px dashed var(--ls-border-2); background: var(--ls-soft); }
.home-item-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
/* 이름은 본문 크기, 밑줄은 표 크기 (2026-09-25) — 이용자 나이대(30·40대)를 생각하면
   15px 아래로는 안 내려간다. 화면 디자인 편집기에서 더 키울 수 있다 (--pg-font-*) */
.home-item-text b { font-size: var(--pg-font-desc, .95rem); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-item-text small { color: var(--ls-muted); font-size: var(--pg-font-table, .85rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 링크 모음 ────────────────────────────────────────────────────────── */
.home-links li + li { border-top: 1px solid #f1f2f4; }
.home-links a {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .9rem;
    color: inherit; text-decoration: none;
    font-size: .86rem; line-height: 1.35;
    word-break: keep-all;
}
.home-links a span { flex: 1 1 auto; min-width: 0; }
.home-links a i { flex: 0 0 auto; color: var(--ls-muted-3); }
.home-links a:hover { background: var(--ls-soft); color: var(--ls-accent); }
.home-links a:hover i { color: var(--ls-accent); }

/* 넓은 화면에서는 링크가 따라 내려온다. 4-05 까지는 화면 CSS 가 앞에 실려 bootstrap 의
   .card(position: relative)에 져서, 따라 내려오지 않고 top 만큼 밀려 서 있기만 했다 */
@media (min-width: 1200px) {
    .home-links-card { position: sticky; top: calc(var(--sticky-top, 70px) + 1rem); }
}

@media (max-width: 1199.98px) {
    .home-heroes { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .home-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .home-heroes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .home-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .home-heroes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem .4rem; }
    .home-hero-name { font-size: var(--pg-font-table, .85rem); }
    .home-items { grid-template-columns: 1fr; }
}

/* ── 어두울 때 (3-14) — 밝을 때 색은 위 그대로 ───────────────────────── */
[data-bs-theme=dark] .home-links li + li { border-top-color: #2b3035; }