@charset "utf-8";

body.modujang-community-page {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: #2e90d1;
}

.modujang-v2-community {
    --community-edge: clamp(10px, 3.08vw, 18px);
    --community-header-height: clamp(56px, 14.36vw, 72px);
    --community-bottom-space: clamp(104px, 26.67vw, 146px);
    --community-bottom-nav-height: clamp(62px, 16.41vw, 82px);
    --community-bottom-nav-offset: clamp(8px, 2.56vw, 14px);
    --community-bottom-nav-half-height: clamp(31px, 8.205vw, 41px);
    --community-scroll-clip-bottom: calc(var(--community-bottom-nav-offset) + var(--community-bottom-nav-half-height));
    --modujang-v2-bottom-nav-max-width: 722px;
    width: min(100%, 750px);
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0 auto;
    padding-bottom: 0;
    overflow: hidden;
    background-position: top center;
    background-size: cover;
}

.community-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 5;
    height: var(--community-header-height);
    margin-bottom: calc(var(--community-header-height) * -1);
    padding: 0 clamp(14px, 5.13vw, 28px);
}

/* 본문이 헤더 아래로 스크롤되며 반투명 배경 뒤로 사라지도록 처리 */
.community-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    height: calc(100% + var(--community-header-fade, clamp(12px, 3.59vw, 20px)));
    background: var(--v2-header-fade);
    pointer-events: none;
}

.community-point {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(98px, 25.64vw, 128px);
    height: clamp(31px, 8.21vw, 40px);
    padding: 0 clamp(8px, 2.56vw, 14px);
    border: 1px solid var(--brown-500);
    border-radius: 999px;
    background: #fff;
    box-shadow: 1px 2px 1px rgba(255,255,255,.7) inset, -1px -1px 2px rgba(0,0,0,.18) inset;
}

.community-point img:first-child {
    width: clamp(19px, 5.13vw, 26px);
    margin-right: clamp(5px, 1.54vw, 8px);
}

.community-point strong {
    min-width: 32px;
    color: var(--gray-900);
    font-size: clamp(12px, 3.33vw, 16px);
    text-align: center;
}

.community-point img:last-child {
    width: clamp(14px, 3.59vw, 18px);
    margin-left: clamp(6px, 2.05vw, 10px);
}

.community-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(36px, 10.26vw, 48px);
    height: clamp(36px, 10.26vw, 48px);
    margin-left: clamp(-12px, -2.56vw, -8px);
}

.community-back img { width: clamp(8px, 2.56vw, 12px); }

.community-header-links {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 3.08vw, 16px);
}

.community-header-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: clamp(30px, 8.21vw, 42px);
}

.community-header-links a > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(27px, 7.18vw, 36px);
    height: clamp(27px, 7.18vw, 36px);
    border: 1px solid var(--brown-600);
    border-radius: 50%;
    background: #fff;
    box-shadow: 1px 2px 1px rgba(255,255,255,.7) inset, -1px -1px 2px rgba(0,0,0,.2) inset;
}

.community-header-links img { width: clamp(21px, 5.64vw, 28px); }

.community-header-links em {
    margin-top: clamp(3px, 1.03vw, 6px);
    color: #fff;
    font-size: clamp(10px, 2.56vw, 13px);
    font-style: normal;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(27, 87, 128, .35);
}

.community-main {
    height: calc(100vh - var(--community-scroll-clip-bottom));
    height: calc(100dvh - var(--community-scroll-clip-bottom));
    min-height: 0;
    padding: calc(var(--community-header-height) + clamp(10px, 3.08vw, 18px)) var(--community-edge) var(--community-bottom-space);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    /* -webkit-overflow-scrolling 은 옛 iOS 전용 속성인데,
       안드로이드 브라우저가 이걸 레이어 힌트로 받아 스크롤 영역을 따로 합성함.
       그 여파로 위에 겹친 헤더/하단 메뉴 터치가 씹히는 일이 있어 뺌 (iOS 13+ 는 기본 동작) */
}

.community-main::-webkit-scrollbar { display: none; }

.community-tabs {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.community-tabs a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(40px, 10.77vw, 52px);
    border: 1px solid #f5e6c6;
    border-left: 0;
    border-bottom: 2px solid var(--brown-500);
    background: #fff;
    color: var(--brown-600);
    font-family: "Maplestory", sans-serif;
    font-size: clamp(12px, 3.59vw, 16px);
    font-weight: 700;
}

/* 마지막 탭은 바깥쪽(오른쪽) 모서리만 둥근데 첫 탭은 오른쪽 위까지 둥글게 잡혀 있었다.
   그 탓에 실시간 뉴스와 이벤트가 맞닿는 자리에서만 배경 모양이 어긋나 보였음.
   첫 탭도 바깥쪽(왼쪽) 모서리만 둥글게 맞춘다 */
.community-tabs a:first-child {
    border-left: 1px solid #f5e6c6;
    border-radius: clamp(13px, 4.1vw, 20px) 0 0 clamp(13px, 4.1vw, 20px);
}

.community-tabs a:last-of-type { border-radius: 0 clamp(13px, 4.1vw, 20px) clamp(13px, 4.1vw, 20px) 0; }
.community-tabs a.active { border-bottom-color: var(--brown-900); color: var(--brown-900); }

.community-tab-leaf {
    position: absolute;
    bottom: clamp(-12px, -2.56vw, -8px);
    z-index: 3;
    width: clamp(27px, 8.46vw, 40px);
    pointer-events: none;
}

.community-tab-leaf-left { left: clamp(-12px, -2.56vw, -8px); }
.community-tab-leaf-right { right: clamp(-12px, -2.56vw, -8px); }

.community-card {
    width: 100%;
    margin-top: clamp(12px, 3.08vw, 18px);
    padding: clamp(5px, 1.54vw, 8px);
    border-radius: clamp(19px, 6.15vw, 30px);
    background: #fff;
}

.community-card-inner {
    min-height: calc(100dvh - 210px);
    padding: clamp(17px, 5.13vw, 30px) clamp(12px, 4.1vw, 22px) clamp(24px, 7.18vw, 38px);
    border: 0; /* 이중선 제거 (QA #65 재요청) */
    border-radius: clamp(18px, 5.64vw, 28px);
    background: var(--blue-100);
}

.community-title-image {
    display: flex;
    justify-content: center;
    margin: 0 auto clamp(20px, 6.15vw, 32px);
}

.community-title-image img { width: min(72%, 350px); height: auto; }

.community-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 1.28vw, 7px);
    margin-bottom: clamp(12px, 3.59vw, 18px);
}

.community-section-title img { width: clamp(16px, 4.62vw, 23px); }
.community-section-title span { padding-top: 3px; font-family: "Maplestory", sans-serif; font-size: clamp(13px, 3.85vw, 18px); font-weight: 700; }
.community-all-title { margin-top: clamp(25px, 7.18vw, 38px); }

.community-winner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 3.59vw, 18px);
}

.community-winner-card {
    min-width: 0;
    padding: clamp(10px, 3.08vw, 16px);
    border: 1px solid var(--blue-900);
    border-radius: clamp(12px, 3.59vw, 18px);
    background: #fff;
}

.community-winner-name { margin-bottom: clamp(7px, 2.05vw, 11px); font-size: clamp(11px, 3.08vw, 15px); }
.community-winner-name b { color: var(--brown-900); font-size: inherit; }

.community-winner-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    margin-bottom: clamp(8px, 2.56vw, 13px);
    overflow: hidden;
    border-radius: clamp(10px, 3.08vw, 15px);
    background: var(--blue-100);
}

.community-winner-image img { width: 82%; height: 82%; object-fit: contain; }
.community-winner-brand { min-height: 1.3em; overflow: hidden; color: var(--gray-700); font-size: clamp(9px, 2.56vw, 12px); text-overflow: ellipsis; white-space: nowrap; }
.community-winner-card h3 { margin-top: 3px; overflow: hidden; color: var(--gray-900); font-size: clamp(11px, 3.08vw, 15px); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.community-winner-card > strong { display: block; margin-top: 5px; color: var(--blue-600); font-size: clamp(11px, 3.08vw, 15px); }

.community-winner-list { display: flex; flex-direction: column; gap: clamp(10px, 3.59vw, 16px); }
/* 처음에는 30개만 보여줌. 접어둔 줄은 화면에서 빠지니 그 안의 이미지도 받지 않음 */
.community-winner-row.is-folded { display: none; }
.community-more {
    display: block;
    width: 100%;
    min-height: clamp(44px, 12.31vw, 54px);
    margin-top: clamp(12px, 3.59vw, 18px);
    border: 1px solid var(--blue-400);
    border-radius: clamp(12px, 4.1vw, 18px);
    background: #fff;
    color: var(--blue-700);
    font-size: clamp(13px, 3.59vw, 16px);
    font-weight: 700;
    touch-action: manipulation;
}
.community-more:active { transform: scale(.98); opacity: .7; }
.community-winner-row { display: flex; align-items: center; gap: clamp(10px, 3.59vw, 18px); padding: clamp(10px, 3.08vw, 16px); border: 1px solid var(--blue-900); border-radius: clamp(12px, 3.59vw, 18px); background: var(--blue-200); }
.community-winner-row-image { display: flex; flex: 0 0 clamp(72px, 23.08vw, 112px); align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: clamp(10px, 3.08vw, 15px); background: #fff; }
.community-winner-row-image img { width: 80%; height: 80%; object-fit: contain; }
.community-winner-row-text { min-width: 0; }
.community-winner-row-text p { margin-bottom: clamp(5px, 1.54vw, 8px); font-size: clamp(11px, 3.33vw, 15px); }
.community-winner-row-text p b { color: var(--brown-900); font-size: inherit; }
.community-winner-row-text span, .community-winner-row-text strong, .community-winner-row-text em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-winner-row-text span { color: var(--gray-700); font-size: clamp(10px, 2.82vw, 13px); }
.community-winner-row-text strong { margin-top: 3px; font-size: clamp(12px, 3.33vw, 16px); }
.community-winner-row-text em { margin-top: 5px; color: var(--blue-600); font-size: clamp(12px, 3.33vw, 16px); font-style: normal; font-weight: 700; }

.community-empty {
    display: flex;
    min-height: clamp(250px, 76.92vw, 420px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3.59vw, 18px);
    color: var(--gray-700);
    text-align: center;
}

.community-empty-compact { min-height: clamp(150px, 43.59vw, 230px); }
.community-empty img { width: clamp(52px, 16.41vw, 80px); opacity: .72; }
.community-empty p { font-size: clamp(12px, 3.33vw, 16px); font-weight: 700; }

.community-banner-card .community-card-inner { padding: clamp(16px, 5.13vw, 28px); }
.community-banner-list { display: flex; flex-direction: column; gap: clamp(12px, 4.1vw, 22px); }
.community-banner-item { position: relative; display: block; overflow: hidden; border-radius: clamp(12px, 4.1vw, 22px); background: #fff; box-shadow: 0 2px 8px rgba(22, 83, 130, .1); }
.community-banner-item > img { display: block; width: 100%; min-height: clamp(110px, 30.77vw, 180px); object-fit: cover; }
.community-banner-overlay { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .42); }
.community-banner-overlay b { display: flex; min-height: clamp(38px, 10.77vw, 52px); align-items: center; justify-content: center; padding: 8px clamp(15px, 5.13vw, 26px); border: 1px solid var(--gray-800); border-radius: clamp(8px, 2.56vw, 13px); background: #fff; color: var(--gray-800); font-size: clamp(11px, 3.08vw, 15px); text-align: center; }
.community-load-more { display: block; width: min(78%, 390px); min-height: clamp(42px, 11.79vw, 58px); margin: clamp(20px, 6.15vw, 32px) auto 0; border: 1px solid var(--blue-900); border-radius: 999px; background: var(--blue-600); color: #fff; font-size: clamp(13px, 3.59vw, 17px); font-weight: 800; }
.community-load-more[hidden] { display: none; }

.community-detail-card .community-card-inner {
    padding: clamp(14px, 4.1vw, 24px);
}

.community-detail-article {
    overflow: hidden;
    border: 1px solid var(--blue-900);
    border-radius: clamp(13px, 4.1vw, 20px);
    background: #fff;
}

.community-detail-cover {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--blue-200);
}

.community-detail-article h1 {
    padding: clamp(18px, 5.13vw, 28px) clamp(16px, 5.13vw, 28px);
    border-bottom: 1px solid var(--blue-200);
    color: var(--gray-900);
    font-family: "Maplestory", sans-serif;
    font-size: clamp(15px, 4.1vw, 20px);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.community-detail-content {
    min-height: clamp(120px, 35.9vw, 190px);
    padding: clamp(16px, 5.13vw, 28px);
    overflow-wrap: anywhere;
    color: var(--gray-800);
    font-size: clamp(12px, 3.33vw, 16px);
    line-height: 1.7;
}

.community-detail-content img,
.community-detail-content video,
.community-detail-content iframe {
    display: block;
    max-width: 100% !important;
    height: auto !important;
    margin-right: auto;
    margin-left: auto;
}

.community-detail-content table {
    width: 100% !important;
    max-width: 100%;
}

.community-detail-list-button {
    display: flex;
    width: min(68%, 340px);
    min-height: clamp(42px, 11.79vw, 58px);
    align-items: center;
    justify-content: center;
    margin: clamp(18px, 5.13vw, 28px) auto 0;
    border: 1px solid var(--blue-900);
    border-radius: 999px;
    background: var(--blue-600);
    box-shadow: 0 2px 0 rgba(19, 95, 166, .35);
    color: #fff;
    font-family: "Maplestory", sans-serif;
    font-size: clamp(13px, 3.59vw, 17px);
    font-weight: 700;
}

.community-ranking-detail-card .community-card-inner {
    padding: clamp(14px, 4.1vw, 24px);
}

.community-ranking-status {
    display: flex;
    align-items: flex-start;
    gap: clamp(10px, 3.08vw, 16px);
    padding: clamp(13px, 4.1vw, 22px);
    border: 1px solid var(--blue-900);
    border-radius: clamp(12px, 3.59vw, 18px);
    background: #fff;
}

.community-ranking-status > span {
    flex: 0 0 auto;
    margin-top: 1px;
    padding: 5px 9px 4px;
    border-radius: 999px;
    background: var(--blue-600);
    color: #fff;
    font-size: clamp(9px, 2.56vw, 12px);
    font-weight: 800;
}

.community-ranking-status.is-ended > span { background: var(--gray-600); }
.community-ranking-status.is-upcoming > span { background: var(--brown-500); }
.community-ranking-status > div { min-width: 0; }

.community-ranking-status h1 {
    color: var(--gray-900);
    font-family: "Maplestory", sans-serif;
    font-size: clamp(13px, 3.59vw, 18px);
    font-weight: 700;
    line-height: 1.45;
}

.community-ranking-status p {
    margin-top: 5px;
    color: var(--gray-700);
    font-size: clamp(10px, 2.82vw, 13px);
    line-height: 1.5;
}

.community-ranking-banner {
    margin-top: clamp(12px, 3.59vw, 18px);
    overflow: hidden;
    border: 1px solid var(--blue-900);
    border-radius: clamp(12px, 3.59vw, 18px);
    background: #fff;
}

.community-ranking-banner[hidden] { display: none; }
.community-ranking-banner img { display: block; width: 100%; height: auto; }

.community-ranking-notice {
    margin-top: clamp(12px, 3.59vw, 18px);
    overflow: hidden;
    border: 1px solid var(--blue-900);
    border-radius: clamp(12px, 3.59vw, 18px);
    background: #fff;
}

.community-ranking-notice summary {
    display: flex;
    min-height: clamp(43px, 12.31vw, 58px);
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(14px, 4.1vw, 22px);
    cursor: pointer;
    list-style: none;
}

.community-ranking-notice summary::-webkit-details-marker { display: none; }
.community-ranking-notice summary span { font-size: clamp(12px, 3.33vw, 16px); font-weight: 700; }
.community-ranking-notice summary img { width: clamp(13px, 3.59vw, 18px); transition: transform .2s ease; }
.community-ranking-notice[open] summary img { transform: rotate(180deg); }

.community-ranking-notice > p {
    padding: 0 clamp(14px, 4.1vw, 22px) clamp(14px, 4.1vw, 22px);
    color: var(--gray-700);
    font-size: clamp(11px, 3.08vw, 14px);
    line-height: 1.65;
}

.community-ranking-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: clamp(20px, 6.15vw, 32px) 2px clamp(14px, 4.1vw, 22px);
}

.community-ranking-heading h2 {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.54vw, 8px);
    color: var(--gray-900);
    font-family: "Maplestory", sans-serif;
    font-size: clamp(14px, 3.85vw, 19px);
    font-weight: 700;
}

.community-ranking-heading h2 img { width: clamp(18px, 5.13vw, 25px); }

.community-ranking-heading > strong {
    flex: 0 0 auto;
    padding: 6px clamp(9px, 2.82vw, 14px);
    border-radius: 999px;
    background: #fff;
    color: var(--gray-700);
    font-size: clamp(10px, 2.82vw, 13px);
    font-weight: 600;
}

.community-ranking-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: clamp(6px, 2.05vw, 12px);
    padding-top: clamp(12px, 3.59vw, 20px);
}

.community-ranking-podium-item {
    position: relative;
    min-width: 0;
    padding: clamp(19px, 5.64vw, 28px) clamp(7px, 2.56vw, 13px) clamp(10px, 3.08vw, 16px);
    border: 1px solid var(--blue-900);
    border-radius: clamp(12px, 3.59vw, 18px);
    background: #fff;
    text-align: center;
}

.community-ranking-podium-item.is-first {
    padding-top: clamp(24px, 7.18vw, 36px);
    border-color: var(--brown-500);
    box-shadow: 0 3px 10px rgba(194, 133, 41, .16);
}

.community-ranking-medal {
    position: absolute;
    top: clamp(-17px, -3.59vw, -11px);
    left: 50%;
    width: clamp(29px, 8.72vw, 43px);
    transform: translateX(-50%);
}

.community-ranking-profile {
    width: clamp(48px, 15.38vw, 76px);
    height: clamp(48px, 15.38vw, 76px);
    border: 2px solid var(--blue-200);
    border-radius: 50%;
    background: var(--blue-100);
    object-fit: cover;
}

.community-ranking-podium-item.is-first .community-ranking-profile {
    width: clamp(56px, 17.95vw, 88px);
    height: clamp(56px, 17.95vw, 88px);
    border-color: #f3c56f;
}

.community-ranking-podium-item h3 {
    margin-top: clamp(7px, 2.05vw, 11px);
    overflow: hidden;
    color: var(--gray-900);
    font-size: clamp(10px, 2.82vw, 13px);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-ranking-podium-item p { margin-top: 4px; color: var(--blue-600); font-size: clamp(10px, 2.82vw, 13px); font-weight: 800; }

.community-ranking-my {
    display: flex;
    min-height: clamp(48px, 13.85vw, 66px);
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: clamp(14px, 4.1vw, 22px);
    padding: 0 clamp(14px, 4.1vw, 22px);
    border-radius: clamp(12px, 3.59vw, 18px);
    background: var(--blue-600);
    color: #fff;
}

.community-ranking-my span { font-size: clamp(11px, 3.08vw, 15px); font-weight: 700; }
.community-ranking-my strong { font-family: "Maplestory", sans-serif; font-size: clamp(14px, 3.85vw, 19px); }
.community-ranking-my a { padding: 7px 11px; border-radius: 999px; background: #fff; color: var(--blue-700); font-size: clamp(10px, 2.82vw, 13px); font-weight: 700; }

.community-ranking-list {
    display: flex;
    flex-direction: column;
    gap: clamp(7px, 2.05vw, 11px);
    margin-top: clamp(14px, 4.1vw, 22px);
}

.community-ranking-list li {
    display: grid;
    grid-template-columns: clamp(27px, 8.21vw, 40px) clamp(38px, 11.28vw, 54px) minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(7px, 2.05vw, 12px);
    min-height: clamp(61px, 17.95vw, 86px);
    padding: clamp(8px, 2.56vw, 13px) clamp(10px, 3.08vw, 16px);
    border: 1px solid var(--blue-900);
    border-radius: clamp(11px, 3.33vw, 16px);
    background: #fff;
}

.community-ranking-number {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-700);
    font-family: "Maplestory", sans-serif;
    font-size: clamp(11px, 3.08vw, 15px);
    font-weight: 700;
}

.community-ranking-number img { width: clamp(26px, 7.69vw, 38px); }

.community-ranking-list-profile {
    width: clamp(38px, 11.28vw, 54px);
    height: clamp(38px, 11.28vw, 54px);
    border-radius: 50%;
    background: var(--blue-100);
    object-fit: cover;
}

.community-ranking-list > li > strong {
    min-width: 0;
    overflow: hidden;
    color: var(--gray-900);
    font-size: clamp(11px, 3.08vw, 15px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-ranking-list > li > div { text-align: right; }
.community-ranking-list > li > div b { display: block; color: var(--blue-600); font-size: clamp(11px, 3.08vw, 15px); }
.community-ranking-list > li > div span { display: block; margin-top: 3px; color: var(--gray-600); font-size: clamp(9px, 2.56vw, 12px); }

.community-ranking-empty {
    display: flex;
    min-height: clamp(190px, 56.41vw, 300px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 6.15vw, 32px);
    border: 1px dashed var(--blue-900);
    border-radius: clamp(12px, 3.59vw, 18px);
    background: rgba(255, 255, 255, .7);
    text-align: center;
}

.community-ranking-empty img { width: clamp(48px, 14.36vw, 70px); opacity: .72; }
.community-ranking-empty strong { margin-top: clamp(11px, 3.33vw, 17px); color: var(--gray-800); font-size: clamp(13px, 3.59vw, 17px); }
.community-ranking-empty p { margin-top: 6px; color: var(--gray-600); font-size: clamp(10px, 2.82vw, 13px); line-height: 1.5; }

@media (min-width: 576px) {
    .community-winner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .community-winner-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 350px) {
    .community-header { padding-right: 10px; }
    .community-header-links { gap: 5px; }
    .community-card-inner { padding-right: 10px; padding-left: 10px; }
    .community-section-title span { font-size: 12px; }
}

/* ── 주간낚시 랭킹전 전용 화면 (QA #64) ─────────────────────────────
   홈 팻말에서 들어오는 배너 없는 단일 화면. 포디움 → 자세히보기 → 내 순위 → 4위~ 리스트 */
.weekrank-live-header { justify-content: space-between; }
.weekrank-live-header-spacer { width: clamp(36px, 10.26vw, 48px); }
.weekrank-live-title {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.54vw, 8px);
    color: var(--gray-900);
    font-family: "Maplestory", sans-serif;
    font-size: clamp(15px, 4.36vw, 20px);
    font-weight: 700;
}
.weekrank-live-title img { width: clamp(20px, 5.64vw, 26px); }

.weekrank-live-main { padding-top: calc(var(--community-header-height) + clamp(6px, 2.05vw, 10px)); }

.weekrank-live-deadline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: clamp(42px, 12.31vw, 54px);
    padding: 0 clamp(14px, 4.1vw, 20px);
    border-radius: clamp(11px, 3.33vw, 16px);
    background: #1f2d45;
    color: #fff;
}
.weekrank-live-deadline span { display: flex; align-items: center; gap: 6px; font-size: clamp(11px, 3.08vw, 14px); font-weight: 700; }
.weekrank-live-deadline span img { width: clamp(16px, 4.62vw, 20px); }
.weekrank-live-deadline strong { font-family: "Maplestory", sans-serif; font-size: clamp(14px, 3.85vw, 18px); letter-spacing: .01em; }
.weekrank-live-deadline.is-ended { background: #6b7280; }

.weekrank-live-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: clamp(6px, 2.05vw, 12px);
    margin-top: clamp(22px, 6.67vw, 34px);
}
.weekrank-live-podium-item {
    position: relative;
    min-width: 0;
    padding: clamp(12px, 3.59vw, 18px) clamp(6px, 2.05vw, 10px) clamp(12px, 3.59vw, 18px);
    border: 1.5px solid #dbe6f5;
    border-radius: clamp(14px, 4.1vw, 20px);
    background: #fff;
    text-align: center;
    box-shadow: 0 4px 14px rgba(36, 74, 128, .08);
}
.weekrank-live-podium-item.is-rank1 {
    padding-top: clamp(10px, 3.08vw, 14px);
    padding-bottom: clamp(16px, 4.62vw, 24px);
    border-color: #f5c451;
    box-shadow: 0 6px 18px rgba(245, 196, 81, .28);
}
/* 왕관은 카드 안, "1위" 뱃지 바로 위에 */
.weekrank-live-crown {
    display: block;
    margin-bottom: clamp(2px, 0.77vw, 4px);
    font-size: clamp(18px, 5.13vw, 24px);
    line-height: 1;
}
.weekrank-live-rank-pill {
    display: inline-block;
    padding: 3px clamp(9px, 2.56vw, 13px);
    border-radius: 999px;
    background: #9aa4b2;
    color: #fff;
    font-size: clamp(10px, 2.82vw, 12px);
    font-weight: 800;
}
.is-rank1 .weekrank-live-rank-pill { background: #f2b421; }
.is-rank3 .weekrank-live-rank-pill { background: #c48a4a; }
.weekrank-live-profile {
    display: block;
    width: clamp(48px, 14.36vw, 68px);
    height: clamp(48px, 14.36vw, 68px);
    margin: clamp(8px, 2.56vw, 12px) auto 0;
    border: 2px solid #dbe6f5;
    border-radius: 50%;
    background: var(--blue-100);
    object-fit: cover;
}
.is-rank1 .weekrank-live-profile { width: clamp(56px, 16.92vw, 80px); height: clamp(56px, 16.92vw, 80px); border-color: #f5c451; }
.weekrank-live-podium-item h3 {
    margin-top: clamp(7px, 2.05vw, 10px);
    overflow: hidden;
    color: var(--gray-900);
    font-size: clamp(11px, 3.08vw, 14px);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.weekrank-live-podium-item p { margin-top: 3px; color: var(--blue-600); font-size: clamp(11px, 3.08vw, 14px); font-weight: 800; }
.is-rank1 p { color: #d9971a; }

.weekrank-live-detail-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: clamp(14px, 4.1vw, 20px);
    color: var(--blue-700);
    font-size: clamp(12px, 3.33vw, 14px);
    font-weight: 700;
}
.weekrank-live-detail-link em { font-style: normal; font-size: 1.15em; line-height: 1; }

.weekrank-live-my {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: clamp(12px, 3.59vw, 18px);
    padding: clamp(14px, 4.1vw, 20px) clamp(16px, 4.62vw, 22px);
    border-radius: clamp(14px, 4.1vw, 20px);
    background: linear-gradient(135deg, #2f6de6, #1f4fc4);
    color: #fff;
    box-shadow: 0 6px 16px rgba(31, 79, 196, .28);
}
.weekrank-live-my span { display: block; font-size: clamp(10px, 2.82vw, 12px); font-weight: 600; opacity: .85; }
.weekrank-live-my strong { display: block; margin-top: 3px; font-family: "Maplestory", sans-serif; font-size: clamp(16px, 4.62vw, 21px); }
.weekrank-live-my strong small { font-family: inherit; font-size: .72em; font-weight: 400; opacity: .9; }
.weekrank-live-join {
    flex: 0 0 auto;
    padding: clamp(8px, 2.56vw, 11px) clamp(12px, 3.59vw, 16px);
    border-radius: 999px;
    background: #fff;
    color: #1f4fc4;
    font-size: clamp(11px, 3.08vw, 13px);
    font-weight: 800;
    white-space: nowrap;
}

.weekrank-live-list {
    margin-top: clamp(12px, 3.59vw, 18px);
    padding: clamp(4px, 1.28vw, 8px) clamp(10px, 3.08vw, 16px);
    border-radius: clamp(14px, 4.1vw, 20px);
    background: #fff;
    box-shadow: 0 4px 14px rgba(36, 74, 128, .08);
}
.weekrank-live-list li {
    display: grid;
    grid-template-columns: clamp(22px, 6.15vw, 30px) clamp(34px, 10.26vw, 44px) minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(8px, 2.56vw, 12px);
    padding: clamp(10px, 3.08vw, 14px) 0;
    border-bottom: 1px solid #eef2f7;
}
.weekrank-live-list li:last-child { border-bottom: 0; }
.weekrank-live-list li.is-me { background: #f3f7ff; margin: 0 calc(clamp(10px, 3.08vw, 16px) * -1); padding-left: clamp(10px, 3.08vw, 16px); padding-right: clamp(10px, 3.08vw, 16px); }
.weekrank-live-number { color: var(--gray-700); font-family: "Maplestory", sans-serif; font-size: clamp(12px, 3.33vw, 15px); font-weight: 700; text-align: center; }
.weekrank-live-list-profile { width: clamp(34px, 10.26vw, 44px); height: clamp(34px, 10.26vw, 44px); border-radius: 50%; background: var(--blue-100); object-fit: cover; }
.weekrank-live-list-text { min-width: 0; }
.weekrank-live-list-text strong { display: block; overflow: hidden; color: var(--gray-900); font-size: clamp(12px, 3.33vw, 15px); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.weekrank-live-list-text span { display: block; margin-top: 2px; color: var(--gray-600); font-size: clamp(10px, 2.82vw, 12px); }
.weekrank-live-list li > b { color: var(--blue-600); font-size: clamp(12px, 3.33vw, 15px); font-weight: 800; white-space: nowrap; }
.weekrank-live-list-note { margin-top: clamp(12px, 3.59vw, 18px); padding: clamp(10px, 3.08vw, 14px); border-radius: clamp(11px, 3.33vw, 16px); background: rgba(255, 255, 255, .85); color: var(--gray-700); font-size: clamp(11px, 3.08vw, 13px); font-weight: 600; text-align: center; }

.weekrank-live-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(160px, 46.15vw, 240px);
    margin-top: clamp(14px, 4.1vw, 20px);
    padding: clamp(20px, 6.15vw, 32px);
    border: 1px dashed var(--blue-900);
    border-radius: clamp(14px, 4.1vw, 20px);
    background: rgba(255, 255, 255, .75);
    text-align: center;
}
.weekrank-live-empty img { width: clamp(48px, 14.36vw, 70px); opacity: .72; }
.weekrank-live-empty strong { margin-top: 10px; color: var(--gray-900); font-size: clamp(13px, 3.59vw, 16px); }
.weekrank-live-empty p { margin-top: 4px; color: var(--gray-600); font-size: clamp(11px, 3.08vw, 13px); }
.weekrank-live-empty.is-none { min-height: clamp(240px, 70vw, 360px); }

/* ── 명예의 전당: 지난 주 만선왕 TOP3 (QA #65) ─────────────────────── */
.community-kings {
    margin-bottom: clamp(22px, 6.67vw, 34px);
    padding: clamp(14px, 4.1vw, 20px) clamp(12px, 3.59vw, 18px) clamp(12px, 3.59vw, 18px);
    border: 1px solid var(--blue-900);
    border-radius: clamp(14px, 4.1vw, 20px);
    background: #fff;
    box-shadow: 0 4px 14px rgba(36, 74, 128, .08);
}
.community-kings-title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: clamp(16px, 4.62vw, 24px);
    color: var(--gray-900);
    font-family: "Maplestory", sans-serif;
    font-size: clamp(13px, 3.85vw, 18px);
    font-weight: 700;
    text-align: center;
}
.community-kings-title span { color: var(--gray-700); font-family: inherit; font-size: .85em; font-weight: 400; }
.community-kings-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: clamp(6px, 2.05vw, 12px);
    padding-top: clamp(10px, 3.08vw, 16px);
}
.community-kings-item {
    position: relative;
    min-width: 0;
    padding: clamp(12px, 3.59vw, 18px) clamp(6px, 2.05vw, 10px) clamp(12px, 3.59vw, 18px);
    border: 1.5px solid #d7dde6;
    border-radius: clamp(14px, 4.1vw, 20px);
    background: #f5f7fa;
    text-align: center;
}
.community-kings-item.is-rank1 {
    padding-top: clamp(10px, 3.08vw, 14px);
    padding-bottom: clamp(16px, 4.62vw, 24px);
    border-color: #f2b421;
    background: #fff7e0;
    box-shadow: 0 6px 18px rgba(245, 196, 81, .28);
}
.community-kings-item.is-rank3 { border-color: #e2b58c; background: #fdf1e6; }
/* 왕관은 카드 안, "1위" 뱃지 바로 위에 */
.community-kings-crown {
    display: block;
    margin-bottom: clamp(2px, 0.77vw, 4px);
    font-size: clamp(18px, 5.13vw, 24px);
    line-height: 1;
}
.community-kings-pill {
    display: inline-block;
    padding: 3px clamp(9px, 2.56vw, 13px);
    border-radius: 999px;
    background: #9aa4b2;
    color: #fff;
    font-size: clamp(10px, 2.82vw, 12px);
    font-weight: 800;
}
.is-rank1 .community-kings-pill { background: #f2b421; }
.is-rank3 .community-kings-pill { background: #c48a4a; }
.community-kings-profile {
    display: block;
    width: clamp(44px, 12.82vw, 60px);
    height: clamp(44px, 12.82vw, 60px);
    margin: clamp(8px, 2.56vw, 12px) auto 0;
    border: 2px solid #dbe6f5;
    border-radius: 50%;
    background: var(--blue-100);
    object-fit: cover;
}
.is-rank1 .community-kings-profile { width: clamp(52px, 15.38vw, 72px); height: clamp(52px, 15.38vw, 72px); border-color: #f5c451; }
.community-kings-item h3 {
    margin-top: clamp(7px, 2.05vw, 10px);
    overflow: hidden;
    color: var(--gray-900);
    font-size: clamp(11px, 3.08vw, 14px);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.community-kings-item p { margin-top: 3px; color: var(--gray-600); font-size: clamp(9px, 2.56vw, 11px); }
.community-kings-item strong { display: block; margin-top: 4px; color: var(--blue-600); font-family: "Maplestory", sans-serif; font-size: clamp(13px, 3.59vw, 17px); }
.is-rank1 strong { color: #d9971a; }
.community-kings-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: clamp(12px, 3.59vw, 18px);
    color: var(--gray-700);
    font-size: clamp(11px, 3.08vw, 13px);
    font-weight: 700;
}
.community-kings-link em { font-style: normal; font-size: 1.15em; line-height: 1; }

/* ── 명예의 전당: 황금어부 마퀴 (QA #65) ─────────────────────────────
   30만원 이상 당첨 카드가 오른쪽→왼쪽으로 끝없이 흐른다(한 바퀴 27초). 양끝은 페이드 처리 */
.community-gold-title img { width: clamp(20px, 5.64vw, 26px); }
.community-gold-marquee {
    position: relative;
    /* 안쪽 카드(둥근 상자) 좌우 끝에서 시작·종료 (QA #65 재요청). 예전엔 바깥 흰 상자 끝까지 넓혀 모서리 밖으로 카드가 비쳤다 */
    margin: 0 calc(clamp(12px, 4.1vw, 22px) * -1);
    padding: clamp(6px, 2.05vw, 10px) 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(28px, 8vw, 48px), #000 calc(100% - clamp(28px, 8vw, 48px)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 clamp(28px, 8vw, 48px), #000 calc(100% - clamp(28px, 8vw, 48px)), transparent 100%);
}
/* 지속시간은 rank.php 스크립트가 트랙 길이에 맞춰 다시 정한다(초당 약 70px). 18s 는 스크립트 전 기본값 */
.community-gold-track { display: flex; width: max-content; animation: community-gold-scroll 18s linear infinite; }
.community-gold-marquee:hover .community-gold-track,
.community-gold-marquee.is-paused .community-gold-track { animation-play-state: paused; }
.community-gold-group { display: flex; gap: clamp(8px, 2.56vw, 12px); padding-right: clamp(8px, 2.56vw, 12px); }
/* 오른쪽→왼쪽: 트랙을 0 에서 -50% 로 옮긴다 (두 묶음이 같으니 끝에서 처음이 이어짐) */
@keyframes community-gold-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .community-gold-track { animation: none; } }

.community-gold-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: clamp(118px, 34vw, 150px);
    padding: clamp(8px, 2.56vw, 12px);
    border: 1px solid var(--blue-900);
    border-radius: clamp(12px, 3.59vw, 18px);
    background: #fff;
    text-align: center;
}
/* 낚싯대 뱃지 — 글자 없이 뱃지 이미지만 (이미지 요청 목록 #65 비고). 황금어부 카드·누군가는 낚았다 목록 공통 */
.community-gold-rod {
    position: absolute;
    top: clamp(5px, 1.54vw, 8px);
    right: clamp(5px, 1.54vw, 8px);
    z-index: 1;
    display: block;
    width: clamp(30px, 8.72vw, 40px);
    height: clamp(30px, 8.72vw, 40px);
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}
.community-winner-row { position: relative; }
.community-gold-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: clamp(7px, 2.05vw, 10px);
    overflow: hidden;
    border-radius: clamp(10px, 3.08vw, 14px);
    background: var(--blue-100);
}
.community-gold-image img { width: 100%; height: 100%; object-fit: cover; }
.community-gold-nick {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 100%;
    font-size: clamp(10px, 2.82vw, 13px);
}
.community-gold-nick b { color: var(--brown-900); font-size: inherit; }
.community-gold-big {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid #f2c96a;
    border-radius: 999px;
    background: #fff5d6;
    color: #b8791a;
    font-size: clamp(8px, 2.31vw, 10px);
    font-weight: 800;
    white-space: nowrap;
}
.community-gold-card h3 { width: 100%; margin-top: 4px; overflow: hidden; color: var(--gray-900); font-size: clamp(10px, 2.82vw, 13px); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.community-gold-card strong { display: block; margin-top: 3px; color: var(--blue-600); font-size: clamp(11px, 3.08vw, 14px); font-weight: 800; }
.community-gold-card time { display: block; margin-top: 3px; color: var(--gray-600); font-size: clamp(8px, 2.31vw, 10px); }

/* 화면에서 감추되 읽기 보조기기에는 남김 (QA #148) */
.community-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }