:root {
  --bg: #000000;
  --bg-card: #1a1a1a;
  --bg-section: #0d0d0d;
  --bg-hover: #222222;
  --bg-input: #111111;
  --accent: #e53e3e;
  --accent-hover: #c53030;
  --gold: #f6ad00;
  --info: #4299e1;
  --text: #ffffff;
  --text-muted: #888888;
  --text-hint: #555555;
  --border: #2a2a2a;
  --border-section: #1a1a1a;
  --success: #22c55e;
  --error: #e53e3e;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --fs-caption: 12px;
  --fs-sub: 13px;
  --fs-body: 15px;
  --fs-emphasis: 17px;
  --fs-section: 19px;
  --fs-header: 22px;
  --font-body: "Noto Sans KR", system-ui, sans-serif;
  --font-title: "Bebas Neue", sans-serif;
  --app-tabbar-height: 3.35rem;
  --card-padding: 10px 12px;
  --space-section: 12px;
  --space-card-gap: 8px;
}

.admin-member-meta,
.admin-member-username {
    font-size: 12px !important;
}

.wod-desc,
.wl-card-desc,
.page-wod-list .wod-list-card-desc,
.gym-meta,
.wod-gym-tag span,
.chip-sm,
.ww-card-type,
.ww-card-source,
.page-workout-what .ww-card-type,
.page-workout-what .ww-card-source,
.date-label {
    font-size: 13px !important;
}

.ww-card-desc,
.page-workout-what .ww-card-desc {
    font-size: 14px !important;
    color: #888 !important;
}

.dex-item-name {
    font-size: 12px !important;
}

.dex-grade-badge {
    font-size: 11px !important;
}

.rank-name,
.rank-score {
    font-size: 14px !important;
}

.admin-member-nickname {
    font-size: 15px !important;
}

.wl-card-title,
.ww-card-title,
.page-workout-what .ww-card-title {
    font-size: 17px !important;
}

.gym-name {
    font-size: 14px !important;
}

.wod-title,
.sec-title {
    font-size: 16px !important;
}

.like-count,
.ww-card-like-count,
.workout-like-btn {
    font-size: 15px !important;
}

.workout-like-btn .ti,
.page-workout-what .workout-like-btn .ti {
    font-size: 20px !important;
}

.workout-record-btn,
.page-workout-what .workout-record-btn {
    font-size: 14px !important;
    padding: 10px 18px !important;
}

.records-tab {
    font-size: 14px !important;
    font-weight: 700;
    padding: 10px 16px;
}

.btn,
button {
    font-size: 15px;
}

.wod-action {
    font-size: 14px !important;
    padding: 12px 22px !important;
}

.chat-bubble,
.page-chat .chat-bubble {
    font-size: 15px !important;
}

.mp-menu-title,
.mp-menu-sub {
    font-size: 14px !important;
}

.admin-member-btn {
    font-size: 12px !important;
}

input,
select,
textarea {
    font-size: 15px;
}

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

body {
    font-family: var(--font-body);
    background: #000;
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
.hero h1,
.page-header h1,
.section h2,
.section h3,
.card-header h2,
.home-page-title,
.leaderboard-title,
.records-section-title,
.auth-card h1,
.popup-chat-title,
.comment-form-card h3,
.delete-preview h2,
.mypage-comment-card h3 {
    font-family: var(--font-title);
    font-weight: 400;
    letter-spacing: 0.04em;
}

.container,
.main-container,
.page-container {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.main-wide.container,
.page-home.container,
.main-wide.page-container,
.page-home.page-container {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 5.5rem;
}

/* 목록 페이지 내부 래퍼 — main.page-container 이중 패딩 방지 (WOD 목록과 동일 너비) */
.page-container.main-content > .container.main-wide-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

/* Navbar + bottom tab bar */
html,
body {
    overflow-x: hidden;
}

body {
    padding-bottom: calc(var(--app-tabbar-height) + env(safe-area-inset-bottom, 0px));
}

.navbar {
    background: var(--bg-section);
    border-bottom: 0.5px solid var(--border);
    padding: 0.45rem 0;
    position: sticky;
    top: 0;
    z-index: 900;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}

.page-nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.page-back-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.page-nav-title {
    font-size: 17px;
    font-weight: 500;
    color: #f0f0f0;
}

.page-subheader {
    display: none !important;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.logo-main,
.home-logo {
    font-family: "Inter", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px;
    font-size: 1.25rem;
}

.logo-wod {
    color: #e53e3e;
}

.logo-log {
    color: #ffffff;
}

.home-logo .logo-wod {
    color: #e53e3e;
}

.home-logo .logo-log {
    color: #ffffff;
}

.nav-links {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    bottom: 0;
    z-index: 1100;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0.2rem 0 calc(0.2rem + env(safe-area-inset-bottom, 0px));
    gap: 0;
    align-items: stretch;
    justify-content: space-around;
    background: var(--bg-section);
    border-top: 0.5px solid var(--border);
    box-shadow: none;
    backdrop-filter: none;
}

.nav-links li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.nav-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #666666;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.06rem;
    letter-spacing: 0;
    padding: 0.35rem 0.15rem;
    border-bottom: none;
    border-top: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    min-height: var(--app-tabbar-height);
    box-sizing: border-box;
}

.nav-chat-item {
    position: relative;
}

.nav-links a:hover {
    color: var(--text);
    border-bottom-color: transparent;
    border-top-color: transparent;
}

.nav-links a.nav-tab:not(.active):hover {
    color: #aaaaaa;
}

.nav-links a.is-active,
.nav-links a.nav-tab.active,
.nav-links a.admin-link.is-active,
.nav-links a.admin-link.active {
    color: var(--accent);
    border-bottom-color: transparent;
    border-top-color: var(--accent);
    font-weight: 700;
}

.nav-links a.nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0.25rem 0.1rem;
    font-size: 13px;
    line-height: 1.1;
    color: #aaaaaa;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.nav-links a.nav-tab i {
    font-size: 22px;
    color: #444;
    display: block;
}

.nav-links a.nav-tab span,
.nav-tab span,
.nav-tab-label {
    font-family: "Bebas Neue", sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.05em;
    color: #444;
}

.nav-tab-label {
    display: block;
    font-weight: 500;
    white-space: nowrap;
}

.nav-tab-label--workout-what {
    font-family: "Bebas Neue", sans-serif !important;
    font-size: 12px !important;
}

.nav-links a.nav-tab.active .nav-tab-label {
    font-weight: 700;
}

.nav-links a.nav-tab.active,
.nav-links a.nav-tab.admin-link.active {
    color: #e53e3e;
}

.nav-links a.nav-tab.active i,
.nav-links a.nav-tab.active span {
    color: #e53e3e;
}

.nav-tab-icon {
    display: none !important;
}


.nav-auth {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    flex-shrink: 0;
}

.nav-auth-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-bell-icon {
    font-size: 22px;
    color: #555;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.user-name-simple {
    font-size: 15px;
    color: #888;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    text-decoration: none;
    line-height: 1;
    flex-shrink: 0;
}

.logo-sub {
    font-family: var(--font-body);
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0;
}

.chat-unread-badge {
    position: absolute;
    top: -6px;
    right: -12px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid var(--bg-card);
    box-sizing: border-box;
    pointer-events: none;
}

.nav-chat-badge {
    position: absolute;
    top: 2px;
    right: 8px;
    background: #e53e3e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 99px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid #0d0d0d;
    z-index: 10;
    pointer-events: none;
    box-sizing: border-box;
}

#chat-badge.chat-unread-badge {
    top: -4px;
    right: -4px;
}

.user-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text);
    font-size: 0.94rem;
    text-decoration: none;
    max-width: 42vw;
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    text-transform: uppercase;
}

.user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.2s, color 0.2s;
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 0.5px solid var(--border);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.94rem;
}

.btn-block {
    width: 100%;
    text-align: center;
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 0.5px solid var(--border);
    border-radius: var(--radius);
    padding: var(--card-padding);
    margin-bottom: var(--space-section);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.3;
}

/* 진행중 뱃지 (홈 / WOD·챌린지 목록·상세 공통) */
.badge--active,
.challenge-status-badge,
.home-header-status-badge,
.home-today-status,
.page-challenge .challenge-card-status-badge,
.page-wod-list .wod-list-card-status-badge,
.page-challenge-detail .challenge-detail-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1a3a1a;
    color: #4ade80;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    border: 0.5px solid #4ade80;
    letter-spacing: 0.02em;
    line-height: 1.2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Main */
.main-content {
    flex: 1;
    padding: 1rem 0 5.5rem;
}

.main-content.page-home,
.main-content.page-wod-list,
.main-content.page-challenge,
.main-content.page-chat,
.main-content.page-mypage,
.main-content.page-admin {
    padding-top: 0.5rem;
}

.main-content.page-home {
    background: #0d0d0d;
}

.hero h1 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.hero-date {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.wod-description {
    white-space: pre-wrap;
    font-size: 1.1rem;
    line-height: 1.8;
}

.today-wods {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wod-card.featured {
    border-left: none;
}

.wod-detail-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.35rem;
}

.wod-detail-card-header .wod-date-large {
    margin-bottom: 0;
}

.wod-detail-card-header h1 {
    margin: 0;
    line-height: 1.2;
}

.card-footer {
    margin-top: 1.25rem;
}

/* WOD list */
.wod-list {
    list-style: none;
}

.wod-list li a {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: var(--text);
    transition: background 0.2s;
}

.wod-list li a:hover {
    background: var(--bg-hover);
}

.wod-date {
    color: var(--accent);
    font-weight: 700;
    min-width: 3rem;
}

.wod-grid {
    display: grid;
    gap: 1rem;
}

#wod-list-root,
#challenge-list-root {
    width: 100%;
    max-width: 100%;
}

.wod-date-group-section {
    margin-bottom: var(--space-section);
}

.wod-date-group-title {
    margin-bottom: var(--space-card-gap);
    font-size: 1.06rem;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0;
    width: 100%;
}

.wod-group-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.wod-group-grid[data-challenge-grid] {
    grid-template-columns: 1fr !important;
}

.wod-list-card,
.challenge-list-card,
.home-wod-card,
.challenge-card,
.home-challenge-card,
.mypage-comment-card:not(.mp-record-card--timeline) {
    min-width: 260px;
}

.wod-list-card,
.challenge-list-card {
    max-width: 100%;
    margin-bottom: 0;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.challenge-list-card,
.challenge-card,
.challenge-list-item {
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-width: 0;
}

.wod-list-card:hover,
.challenge-list-card:hover {
    border-color: #e53e3e66;
    box-shadow: none;
    transform: none;
}

/* 진행중 뱃지 오버레이용 (너비 제한 없음) */
.challenge-list-card {
    position: relative;
}

.wod-card-link-wrap {
    color: inherit;
    text-decoration: none;
}

.wod-list-card .wod-card-link-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem;
}

.wod-list-card .wod-card-link-wrap .wod-date-large {
    margin-bottom: 0;
}

.wod-list-card .wod-card-link-wrap h3 {
    margin: 0;
    line-height: 1.25;
}

.wod-card-link-wrap h3,
.wod-list-description {
    word-break: break-word;
    overflow-wrap: break-word;
}

.wod-list-description.collapsed {
    max-height: var(--collapsed-height, 7.2em);
    overflow: hidden;
}

.wod-list-toggle {
    margin-bottom: 0.55rem;
}

.wod-grid .wod-card {
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.2s, transform 0.2s;
}

.wod-grid .wod-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.wod-date-large {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.06rem;
    margin-bottom: 0.5rem;
}

.wod-preview {
    color: var(--text-muted);
    font-size: 1.06rem;
    margin: 0.5rem 0;
    white-space: pre-wrap;
}

.comment-count {
    font-size: 0.94rem;
    color: var(--text-muted);
}

/* Comments */
.comment-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.comment-card.tier-dosa {
    background-color: rgba(255, 215, 0, 0.2);
}

.comment-card.tier-monster {
    background-color: rgba(255, 68, 68, 0.15);
}

.comment-card.tier-master {
    background-color: rgba(155, 89, 182, 0.15);
}

.comment-card.tier-veteran {
    background-color: rgba(52, 152, 219, 0.15);
}

.comment-card.tier-prospect {
    background-color: rgba(46, 204, 113, 0.15);
}

.comment-card.tier-cutie {
    background-color: rgba(148, 163, 184, 0.12);
}

.tier-watermark {
    position: absolute;
    left: 50%;
    right: 0;
    top: 50%;
    width: 50%;
    transform: translateY(-50%);
    font-family: var(--font-title);
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: var(--text);
    opacity: 0.12;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    pointer-events: none;
    user-select: none;
}

.record-role-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    vertical-align: middle;
    pointer-events: none;
    user-select: none;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.role-badge--owner,
.record-role-badge--owner {
    background: #1a1400;
    color: #f6ad00;
    border: 1px solid #f6ad00;
    text-shadow: 0 0 6px rgba(246, 173, 0, 0.8), 0 0 12px rgba(246, 173, 0, 0.5);
    box-shadow: 0 0 6px rgba(246, 173, 0, 0.4);
}

.role-badge--coach,
.record-role-badge--coach {
    background: #001020;
    color: #4299e1;
    border: 1px solid #4299e1;
    text-shadow: 0 0 6px rgba(66, 153, 225, 0.8), 0 0 12px rgba(66, 153, 225, 0.5);
    box-shadow: 0 0 6px rgba(66, 153, 225, 0.4);
}

.role-badge-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex-wrap: nowrap;
}

.user-name-row {
    min-width: 0;
    overflow: hidden;
}

.chat-app__name-row .chat-app__name {
    flex-shrink: 1;
    min-width: 0;
}

.lb-name-row {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.lb-name-row .lb-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.page-wod-detail .wod-record-name-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    justify-content: flex-start;
}

.page-wod-detail .wod-record-name-wrap .wod-record-name {
    flex: 0 1 auto;
    min-width: 0;
}

.page-wod-detail .wod-record-name-wrap .role-badge {
    flex-shrink: 0;
}

.page-wod-detail .wod-record-name-wrap > span:not(.wod-record-name):not(.user-profile-trigger) {
    flex-shrink: 0;
}

.admin-member-nickname-row {
    flex-wrap: wrap;
}

.tier-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.35rem;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

.rx-label {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(230, 57, 70, 0.15);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.mypage-record-score.tier-dosa .tier-badge {
    background: rgba(255, 215, 0, 0.35);
    color: #fcd34d;
}

.mypage-record-score.tier-monster .tier-badge {
    background: rgba(255, 68, 68, 0.25);
    color: #fca5a5;
}

.mypage-record-score.tier-master .tier-badge {
    background: rgba(155, 89, 182, 0.25);
    color: #d8b4fe;
}

.mypage-record-score.tier-veteran .tier-badge {
    background: rgba(52, 152, 219, 0.25);
    color: #93c5fd;
}

.mypage-record-score.tier-prospect .tier-badge {
    background: rgba(46, 204, 113, 0.25);
    color: #86efac;
}

.mypage-record-score.tier-cutie .tier-badge {
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.mypage-record-score {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.comment-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.comment-author {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.comment-userid {
    font-size: 0.94rem;
    color: var(--text-muted);
}

.comment-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.inline-form {
    display: inline;
}

.mypage-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.edit-wod-ref {
    margin-bottom: 1rem;
}

.comment-time {
    color: var(--text-muted);
    font-size: 0.94rem;
}

.record-score {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.comment-form-card {
    margin-bottom: 1.5rem;
}

.comment-form-card h3 {
    margin-bottom: 1rem;
}

.record-form-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.record-form-title-row h3 {
    margin: 0;
}

.record-form-title-row--checkbox-only {
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.record-private-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    color: #94a3b8;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.record-private-option input {
    width: auto;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.record-private-label {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--text-muted);
    font-weight: 500;
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 1.06rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 1.1rem;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* Auth */
.auth-page {
    display: flex;
    justify-content: center;
    padding: 2rem 18px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
}

.auth-card h1 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.auth-footer {
    text-align: center;
    margin-top: 1.25rem;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--accent);
}

.auth-hint {
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.94rem;
}

/* Flash */
.flash-messages {
    margin-bottom: 1rem;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.flash-messages.flash-messages--dismiss {
    opacity: 0;
}

.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

.flash-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid var(--success);
    color: var(--success);
}

.flash-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--error);
    color: var(--error);
}

.flash-info {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.55);
    color: #93c5fd;
}

/* Page */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-section);
    flex-wrap: wrap;
    gap: 0.35rem;
}

.page-header h1 {
    font-size: 1.25rem;
    letter-spacing: 0.06em;
}

.page-header--compact {
    margin-bottom: var(--space-section);
}

.page-header-sub {
    width: 100%;
    font-size: 0.94rem;
    margin: 0;
}

.page-header .back-link {
    margin-bottom: 0;
}

.back-link {
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 1rem;
    display: inline-block;
}

.back-link:hover {
    color: var(--accent);
}

.section h2,
.section h3 {
    margin-bottom: 1rem;
}

.muted {
    color: var(--text-muted);
}

.empty-state {
    text-align: center;
    padding: 2.5rem;
}

.empty-state p {
    margin-bottom: 1rem;
}

/* Quick links */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.quick-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    transition: border-color 0.2s;
}

.quick-card:hover {
    border-color: var(--accent);
}

.quick-icon {
    width: 40px;
    height: 40px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

/* Home page (single column) */
.home-page {
    width: 100%;
    background: #0d0d0d;
}

.home-layout-container {
    width: 100%;
    max-width: 100%;
}

/* 홈 WOD·챌린지 공통 컨테이너 (page-home max-width 안) */
.page-home .home-content-column {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 14px;
    box-sizing: border-box;
}

.home-page-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
}

.home-page-title {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.003em;
    margin: 0;
    color: #fff;
}

.home-title-en {
    font-family: "Black Ops One", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 4px;
    -webkit-filter: drop-shadow(0 0 8px rgba(220, 50, 50, 0.7)) drop-shadow(0 0 20px rgba(220, 50, 50, 0.4));
    filter: drop-shadow(0 0 8px rgba(220, 50, 50, 0.7)) drop-shadow(0 0 20px rgba(220, 50, 50, 0.4));
}

.home-page-subtitle {
    color: var(--text-muted);
    font-size: 0.94rem;
    margin: 0.45rem 0 0;
}

.home-page-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.home-page .today-wods {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.home-page .today-wods.home-wod-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.home-page .home-wod-card {
    width: 100%;
    margin-bottom: 0;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.home-page .home-wod-card:hover,
.home-page .home-challenge-card:hover {
    border-color: #4b5d7a;
    box-shadow: 0 6px 20px rgba(148, 163, 184, 0.12);
}

.home-page .home-challenge-card {
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.home-wod-grid--reorderable,
.wod-slider-track--reorderable {
    -webkit-user-select: none;
    user-select: none;
}

.home-wod-grid--reorderable .home-wod-card,
.wod-slider-track--reorderable .home-wod-card {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    -webkit-user-drag: none;
    transition: opacity 0.2s ease, filter 0.15s ease, transform 0.2s ease;
}

body.is-wod-reorder-dragging {
    overflow: hidden;
    touch-action: none;
}

.home-wod-grid.is-reorder-mode .home-wod-card,
.wod-slider-track.is-reorder-mode .home-wod-card,
.wod-group-grid.is-reorder-mode .home-wod-card {
    cursor: grab;
}

.home-wod-grid.is-reorder-mode .home-wod-card:hover,
.wod-slider-track.is-reorder-mode .home-wod-card:hover,
.wod-group-grid.is-reorder-mode .home-wod-card:hover {
    border-color: inherit;
    box-shadow: inherit;
    transform: none;
}

.home-wod-card.is-drag-source {
    opacity: 0.2 !important;
    pointer-events: none;
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: none;
    transition: opacity 0.2s ease;
}

.home-wod-drag-clone {
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0.85;
    pointer-events: none;
    z-index: 10000;
    cursor: grabbing;
    will-change: transform;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.45),
        0 8px 20px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(148, 163, 184, 0.15);
    transition: none;
}

.home-wod-card.is-drop-target {
    filter: brightness(1.14);
    transition: filter 0.15s ease, transform 0.2s ease;
}

.home-column-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
}

/* Chat floating widget */
.chat-widget {
    position: relative;
    z-index: 900;
}

.chat-fab {
    position: fixed;
    bottom: calc(var(--app-tabbar-height) + 16px + env(safe-area-inset-bottom, 0px));
    right: 24px;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
}

.chat-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(230, 57, 70, 0.55);
}

.chat-fab.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

.chat-fab.has-unread {
    animation: fab-pulse 1.5s ease-in-out infinite;
}

@keyframes fab-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(230, 57, 70, 0.45); }
    50% { box-shadow: 0 4px 28px rgba(230, 57, 70, 0.8); }
}

.chat-fab-icon {
    font-size: 1.75rem;
    line-height: 1;
}

.chat-fab[aria-expanded="true"] .chat-fab-icon {
    font-size: 1.5rem;
    font-weight: 700;
}

.chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--error);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card);
}

.chat-popup {
    position: fixed;
    right: 24px;
    bottom: calc(var(--app-tabbar-height) + 88px + env(safe-area-inset-bottom, 0px));
    width: 300px;
    height: 380px;
    z-index: 1000;
    overscroll-behavior: contain;
    touch-action: none;
    transform: translateY(calc(100% + 32px));
    opacity: 0;
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.3s ease,
                visibility 0.35s;
    pointer-events: none;
}

.chat-popup.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.popup-chat-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #111111;
    border: 0.5px solid #2a2a2a;
    border-radius: 16px;
    overscroll-behavior: contain;
    touch-action: none;
    box-shadow: none;
}

.popup-chat-header {
    flex-shrink: 0;
    padding: 10px 14px;
    background: #111111;
    border-bottom: 1px solid #222222;
}

.popup-chat-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.popup-chat-header-titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.popup-chat-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    font-family: inherit;
    letter-spacing: normal;
}

.popup-chat-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #48bb78;
    line-height: 1.2;
}

.popup-chat-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #48bb78;
    flex-shrink: 0;
}

.popup-chat-close {
    flex-shrink: 0;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #666666;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.popup-chat-close:hover {
    color: #aaaaaa;
}

.popup-chat-close.highlight {
    animation: popup-chat-close-pulse 0.6s ease-in-out 3;
}

@keyframes popup-chat-close-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.popup-chat-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #0d0d0d;
}

.popup-chat-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: transparent;
}

.popup-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #0d0d0d;
}

.popup-chat-message {
    display: flex;
    max-width: 70%;
    align-self: flex-start;
}

.popup-chat-message--mine {
    align-self: flex-end;
}

.popup-chat-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

.popup-chat-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.popup-chat-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
}

.popup-chat-message--mine .popup-chat-col {
    align-items: flex-end;
}

.popup-chat-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}

.popup-chat-name {
    font-size: 11px;
    font-weight: 600;
    color: #aaaaaa;
}

.popup-chat-name--admin {
    color: #e53e3e;
}

.popup-chat-time {
    font-size: 11px;
    color: #444444;
}

.popup-chat-edited {
    font-size: 11px;
    color: #666666;
}

.popup-chat-bubble {
    width: fit-content;
    max-width: 100%;
    padding: 6px 10px;
    font-size: 15px;
    line-height: 1.4;
    color: #ffffff;
    word-break: break-word;
    white-space: pre-wrap;
}

.popup-chat-message:not(.popup-chat-message--mine) .popup-chat-bubble {
    background: #1a1a1a;
    border-radius: 0 8px 8px 8px;
}

.popup-chat-message--mine .popup-chat-bubble {
    background: #e53e3e;
    border-radius: 8px 0 8px 8px;
}

.popup-chat-text {
    margin: 0;
    font-size: 15px;
    white-space: pre-wrap;
}

.popup-chat-empty {
    margin: auto;
    padding: 16px 8px;
    text-align: center;
    font-size: 13px;
    color: #666666;
}

.popup-chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 10px;
    background: #111111;
    border-top: 1px solid #222222;
    margin-top: auto;
    flex-shrink: 0;
}

.popup-chat-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 12px;
    background: #1a1a1a;
    border: none;
    border-radius: 20px;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
    resize: none;
    overflow-y: hidden;
    white-space: pre-wrap;
}

.popup-chat-input::placeholder {
    color: #666666;
}

.popup-chat-input:focus {
    outline: none;
}

.popup-chat-send {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #e53e3e;
    color: #ffffff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.popup-chat-send:hover {
    opacity: 0.9;
}

.popup-chat-login {
    padding: 12px;
    border-top: 1px solid #222222;
    text-align: center;
    font-size: 13px;
    color: #666666;
}

.popup-chat-login p {
    margin: 0 0 8px;
}

.wod-leaderboard {
    margin: 0;
    padding: var(--card-padding);
    background: var(--bg-section);
    border-top: 0.5px solid var(--border-section);
    border-radius: 0 0 var(--radius) var(--radius);
}

.leaderboard-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-hint);
    margin-bottom: 0.35rem;
}

.leaderboard-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 1.5;
    border: none;
    border-top: none;
    border-bottom: none;
    outline: none;
}

.leaderboard-item.rank-1 .leaderboard-score {
    color: #fbbf24;
}

.leaderboard-item.rank-2 .leaderboard-score {
    color: #94a3b8;
}

.leaderboard-item.rank-3 .leaderboard-score {
    color: #cd7f32;
}

.leaderboard-empty {
    font-size: 1.06rem;
    margin: 0;
}

.leaderboard-type,
.lb-type,
.lb-rx-badge {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
}

.lb-score {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--accent);
}

/* Record form */
.record-input-row {
    display: flex;
    gap: 0.5rem;
}

.record-type-select {
    width: 6.5rem;
    flex-shrink: 0;
    padding: 0.65rem 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 1.1rem;
}

.record-input-row input {
    flex: 1;
}

.rx-scale-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.rx-scale-toggle .toggle-btn {
    padding: 0.5rem 1.25rem;
    border: none;
    background: var(--bg);
    color: var(--text-muted);
    font-weight: 600;
    font-family: inherit;
    font-size: 1.06rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.rx-scale-toggle .toggle-btn.active {
    background: var(--accent);
    color: white;
}

.rx-scale-toggle .scale-btn.active {
    background: #475569;
}

/* Records sections */
.records-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.records-divider {
    height: 1px;
    background: var(--border);
    margin: 1.5rem 0;
}

.wod-records-section {
    margin-top: 1.25rem;
}

.records-main-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.55rem;
}

.records-main-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(230, 57, 70, 0.8), var(--border));
    margin-bottom: 1rem;
}

.comment-card-rx {
    border-left: 3px solid var(--accent);
}

.comment-card-scale {
    background: rgba(71, 85, 105, 0.2);
    border: 1px solid #475569;
    border-left: 3px solid #64748b;
}

.scale-label {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    background: rgba(100, 116, 139, 0.25);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    margin-bottom: 0.25rem;
    margin-right: 0.35rem;
}

.record-type-tag {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-right: 0.4rem;
}

.record-medal {
    margin-right: 0.35rem;
    font-size: 1.25rem;
}

.record-value-text {
    font-weight: 700;
    color: var(--accent);
}

.record-score-scale {
    border-left: 3px solid #64748b;
    padding-left: 0.75rem;
}

/* Chat */
.chat-panel,
.chat-container {
    display: flex;
    flex-direction: column;
    height: 520px;
    padding: 0;
    overflow: hidden;
}

.chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.chat-panel-header .home-column-title {
    font-size: 1.25rem;
}

.chat-status {
    font-size: 0.82rem;
    font-weight: 600;
}

.chat-status.online {
    color: var(--success);
}

.chat-login-prompt {
    padding: 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
}

.chat-login-prompt .muted {
    margin-bottom: 0.75rem;
}

.chat-empty {
    padding: 1rem;
    text-align: center;
}

.form-check {
    margin-bottom: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.06rem;
    color: var(--text-muted);
    cursor: pointer;
}

.checkbox-label input {
    width: auto;
    accent-color: var(--accent);
}

.chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.35rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    overscroll-behavior: contain;
}

.chat-message {
    max-width: 75%;
    padding: 0.35rem 0.7rem;
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

@media (hover: none) {
    .chat-msg-actions {
        opacity: 1;
        visibility: visible;
    }
}

.chat-message--selectable {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    max-width: 82%;
}

.chat-message--selectable.self {
    align-self: flex-end;
}

.chat-message-main {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.chat-message-inner {
    flex: 1;
    min-width: 0;
}

.chat-message:hover .chat-msg-actions,
.chat-message.is-editing .chat-msg-actions {
    opacity: 1;
    visibility: visible;
}

.chat-msg-actions {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex-shrink: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}

.chat-msg-action-btn {
    padding: 0.1rem 0.35rem;
    border: none;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
}

.chat-msg-action-btn:hover {
    background: rgba(230, 57, 70, 0.2);
    color: #fff;
}

.chat-edited-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 0.15rem;
}

.chat-edit-panel {
    margin-top: 0.35rem;
}

.chat-edit-input {
    width: 100%;
    padding: 0.45rem 0.55rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: inherit;
    font-size: 1.06rem;
}

.chat-edit-input:focus {
    outline: none;
    border-color: var(--accent);
}

.chat-edit-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.chat-edit-actions .btn {
    min-height: auto;
    padding: 0.25rem 0.55rem;
    font-size: 0.82rem;
}

.chat-message.is-editing .chat-msg-actions {
    display: none;
}

.chat-msg-select {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-top: 0.2rem;
    cursor: pointer;
}

.chat-msg-cb {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.chat-select-all-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.chat-select-all-cb {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.chat-delete-selected-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.chat-message.self {
    align-self: flex-end;
    background: rgba(230, 57, 70, 0.15);
    border-color: var(--accent);
}

.chat-user {
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--accent);
    margin-right: 0.5rem;
}

.chat-time {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.chat-text {
    margin-top: 0.25rem;
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-input-form {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    padding: 0.35rem 0.25rem 0.25rem;
    border-top: 1px solid var(--border);
    margin-top: auto;
    flex-shrink: 0;
}

.chat-input-form input,
.chat-input-form textarea {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-input-form textarea {
    flex: 1;
    padding: 0.4rem 0.55rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 1.06rem;
    line-height: 1.4;
    font-family: inherit;
    resize: none;
    overflow-y: hidden;
    min-height: 0;
    white-space: pre-wrap;
    text-overflow: clip;
}

.chat-input-form textarea::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-input-form textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.chat-input-form .btn {
    padding: 0.4rem 0.65rem;
    font-size: 0.94rem;
    line-height: 1.2;
    min-height: 0;
    flex-shrink: 0;
}

/* Admin actions */
.admin-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-danger {
    background: var(--error);
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.delete-confirm-card .delete-warning {
    color: var(--error);
    margin-bottom: 1.25rem;
    font-weight: 600;
}

.delete-preview {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.delete-preview h2 {
    margin: 0.5rem 0;
}

.delete-form {
    margin-top: 1rem;
}

/* My page */
.profile-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-password-wrap {
    margin-top: 0.35rem;
}

.profile-action-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.profile-password-toggle.is-open {
    border-color: var(--accent);
    color: var(--accent);
}

.profile-password-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.28s ease, opacity 0.2s ease, margin-top 0.28s ease;
}

.profile-password-panel.is-open {
    opacity: 1;
    margin-top: 0.85rem;
}

.profile-password-panel form {
    border-top: 1px solid var(--border);
    padding-top: 0.85rem;
}

.profile-info {
    display: flex;
    gap: 1rem;
}

.profile-label {
    color: var(--text-muted);
    font-weight: 600;
    min-width: 5rem;
}

.profile-role-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.94rem;
    font-weight: 600;
    background: rgba(148, 163, 184, 0.15);
    color: var(--text);
}

.profile-role-owner,
.profile-role-coach {
    background: rgba(230, 57, 70, 0.15);
    color: #f8d7da;
}

.profile-role-admin {
    background: rgba(250, 204, 21, 0.2);
    color: #fde68a;
}

/* User weapon icon (inline) */
.user-weapon-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
}

.weapon-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #1a1a1a;
    overflow: hidden;
}

.weapon-icon-circle--36 {
    width: 36px;
    height: 36px;
}

.weapon-icon-circle--36 .user-weapon-icon {
    width: 20px;
    height: 20px;
}

.weapon-icon-circle--42 {
    width: 42px;
    height: 42px;
}

.weapon-icon-circle--42 .user-weapon-icon {
    width: 24px;
    height: 24px;
}

.weapon-icon-circle--24 {
    width: 24px;
    height: 24px;
}

.weapon-icon-circle--24 .user-weapon-icon {
    width: 16px;
    height: 16px;
}

.weapon-icon-circle--26 {
    width: 26px;
    height: 26px;
}

.weapon-icon-circle--26 .user-weapon-icon {
    width: 18px;
    height: 18px;
}

.weapon-icon-circle--28 {
    width: 28px;
    height: 28px;
}

.weapon-icon-circle--28 .user-weapon-icon {
    width: 20px;
    height: 20px;
}

.chat-user-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.page-header-with-weapon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.record-time-fields {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.record-time-fields.is-hidden,
.record-score-input.is-hidden {
    display: none !important;
}

.record-time-part {
    width: 2.75rem;
    text-align: center;
    padding: 0.5rem 0.35rem;
}

.record-time-sep {
    color: var(--text-muted);
    font-weight: 700;
}

.record-input-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.record-score-input {
    flex: 1;
    min-width: 6rem;
}

/* Weapon growth */
.weapon-card {
    margin-bottom: var(--space-section);
    padding: var(--card-padding);
    background: var(--bg-card);
    border: 0.5px solid var(--border);
    box-shadow: none;
    text-align: center;
}

.weapon-section-top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0;
    text-align: left;
}

.weapon-grow-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    flex-shrink: 1;
    min-width: 0;
    filter: none;
    -webkit-filter: none;
}

.weapon-top-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.weapon-info-wrap {
    position: relative;
}

.weapon-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1.5px solid #ccc;
    border-radius: 50%;
    background: transparent;
    color: #ccc;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.weapon-info-btn:hover,
.weapon-info-btn.is-active {
    border-color: #ccc;
    color: #e2e8f0;
}

.weapon-info-tooltip {
    position: fixed;
    z-index: 9400;
    width: min(280px, calc(100vw - 2rem));
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    background: #1e1e1e;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    text-align: left;
    pointer-events: none;
}

.weapon-info-tooltip[hidden] {
    display: none;
}

.weapon-info-tooltip p {
    margin: 0 0 0.35rem;
    font-size: 0.94rem;
    line-height: 1.45;
    color: #e2e8f0;
}

.weapon-info-tooltip p:last-child {
    margin-bottom: 0;
}

.weapon-info-tooltip::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #1e1e1e;
    border: 1px solid rgba(148, 163, 184, 0.25);
    transform: rotate(45deg);
}

.weapon-info-tooltip.placement-top::before {
    bottom: -6px;
    left: var(--arrow-left, 50%);
    margin-left: -5px;
    border-top: none;
    border-left: none;
}

.weapon-info-tooltip.placement-bottom::before {
    top: -6px;
    left: var(--arrow-left, 50%);
    margin-left: -5px;
    border-bottom: none;
    border-right: none;
}

.weapon-my-weapon {
    margin: 1.125rem 0 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #e8edf5;
    line-height: 1.3;
}

.weapon-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    margin: 1.125rem 0 0;
    padding: 0;
}

.weapon-image {
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

.weapon-image.rusty {
    filter: sepia(0.9) saturate(0.3) brightness(0.7) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.weapon-name {
    margin: 1.125rem 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
}

.weapon-stages-open-btn {
    font-size: 0.94rem;
    padding: 0.3rem 0.65rem;
    border-color: rgba(200, 210, 220, 0.7);
    color: #e2e8f0;
}

.weapon-stages-open-btn:hover {
    border-color: rgba(230, 57, 70, 0.7);
    color: #fff;
}

.weapon-rusty-warning {
    margin: 0 0 0.65rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.94rem;
    color: #fcd34d;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.weapon-total {
    margin: 0 0 0.85rem;
    font-size: 1.06rem;
}

.weapon-max-label {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fde047;
    text-shadow: 0 0 12px rgba(253, 224, 71, 0.45);
}

.weapon-progress-wrap {
    max-width: 320px;
    margin: 0 auto;
}

.weapon-progress-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.2);
    overflow: hidden;
}

.weapon-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #e63946, #ff8c42);
    box-shadow: 0 0 10px rgba(230, 57, 70, 0.55);
    transition: width 0.35s ease;
}

.weapon-progress-text {
    margin: 0.5rem 0 0;
    font-size: 1.06rem;
    color: #94a3b8;
}

.weapon-progress-text strong {
    color: #f8fafc;
}

.weapon-level-up-toast {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 9999;
    transform: translate(-50%, -120%);
    padding: 0.85rem 1.35rem;
    border-radius: 0 0 10px 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: #c1121f;
    box-shadow: 0 8px 24px rgba(193, 18, 31, 0.55);
    pointer-events: none;
    opacity: 0;
}

.weapon-level-up-toast.show {
    animation: weapon-toast-in 0.45s ease forwards;
}

.weapon-level-up-toast.hide {
    animation: weapon-toast-out 0.45s ease forwards;
}

@keyframes weapon-toast-in {
    from {
        transform: translate(-50%, -120%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes weapon-toast-out {
    from {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -120%);
        opacity: 0;
    }
}

/* Weapon stages modal */
.weapon-stages-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.weapon-stages-overlay.is-open {
    opacity: 1;
}

.weapon-stages-overlay[hidden] {
    display: none !important;
}

.weapon-stages-modal {
    width: 100%;
    max-width: 600px;
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.weapon-stages-overlay.is-open .weapon-stages-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.weapon-stages-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    flex-shrink: 0;
}

.weapon-stages-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
}

.weapon-stages-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.weapon-stages-close:hover {
    background: rgba(230, 57, 70, 0.2);
    color: #fff;
}

.weapon-stages-modal-body {
    overflow-y: auto;
    padding: 1rem 1.15rem 1.25rem;
    -webkit-overflow-scrolling: touch;
}

.weapon-stages-score-hint {
    margin: 0 0 0.85rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    font-size: 0.94rem;
    font-weight: 600;
    text-align: center;
    color: #cbd5e1;
    background: rgba(230, 57, 70, 0.12);
    border: 1px solid rgba(230, 57, 70, 0.2);
}

.weapon-stages-preview {
    --stage-color: #e63946;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding: 1rem 0.75rem;
    border-radius: 12px;
    background: #222222;
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: inset 0 0 24px color-mix(in srgb, var(--stage-color) 12%, transparent);
}

.weapon-stages-preview-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.weapon-stages-preview-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.weapon-stages-preview-emoji {
    font-size: 2rem;
    line-height: 1;
}

.weapon-stages-preview-name {
    margin: 0.15rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #f8fafc;
}

.weapon-stages-preview-desc {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.45;
    color: #94a3b8;
    max-width: 28rem;
}

.record-already-msg {
    margin: 0;
    padding: 0.5rem 0;
}

.weapon-stages-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.weapon-stage-li {
    margin: 0;
    padding: 0;
    min-width: 0;
}

.weapon-stage-item {
    --stage-color: #e63946;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
    padding: 0.85rem 0.5rem;
    border-radius: 10px;
    background: #252525;
    border: 1px solid rgba(148, 163, 184, 0.12);
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    transition:
        opacity 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        filter 0.2s ease;
}

.weapon-stage-item:hover:not(.is-selected) {
    border-color: rgba(148, 163, 184, 0.28);
}

.weapon-stage-item.is-dimmed {
    opacity: 0.55;
    filter: grayscale(0.35);
}

.weapon-stage-item.is-selected {
    opacity: 1;
    filter: none;
    border: 2px solid var(--stage-color);
    background: color-mix(in srgb, var(--stage-color) 14%, #252525);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--stage-color) 35%, transparent),
        0 0 16px color-mix(in srgb, var(--stage-color) 28%, transparent);
}

.weapon-stage-item.is-current {
    outline: 2px solid rgba(230, 57, 70, 0.55);
    outline-offset: 1px;
}

.weapon-stage-item.is-current.is-selected {
    outline-color: rgba(230, 57, 70, 0.75);
}

.weapon-stage-item.is-achieved {
    border-color: rgba(148, 163, 184, 0.2);
}

.weapon-stage-current-badge {
    position: absolute;
    top: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.12rem 0.5rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    background: #e63946;
    line-height: 1.3;
    white-space: nowrap;
    z-index: 1;
}

.weapon-stage-check {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background: rgba(34, 197, 94, 0.85);
}

.weapon-stage-thumb {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
}

.weapon-stage-item.is-current .weapon-stage-thumb {
    margin-top: 1.15rem;
}

.weapon-stage-item.is-selected .weapon-stage-item-name {
    color: var(--stage-color);
}

.weapon-stage-num {
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 0.15rem;
}

.weapon-stage-item-name {
    font-size: 1.06rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 0.2rem;
}

.weapon-stage-range {
    font-size: 0.82rem;
    color: #64748b;
}

body.weapon-stages-modal-open {
    overflow: hidden;
}

@media (max-width: 520px) {
    .weapon-stages-overlay {
        padding: 0.75rem;
    }

    .weapon-stages-modal {
        width: 90%;
        max-width: none;
        margin: 0 auto;
    }

    .weapon-stages-grid {
        grid-template-columns: 1fr;
    }
}

.mypage-comments {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.mypage-date-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
}

.mypage-comment-card h3 {
    margin: 0.25rem 0 0;
    font-size: 1.25rem;
}

.mypage-comment-card.tier-dosa {
    background-color: rgba(255, 215, 0, 0.12);
}

.mypage-comment-card.tier-monster {
    background-color: rgba(255, 68, 68, 0.1);
}

.mypage-comment-card.tier-master {
    background-color: rgba(155, 89, 182, 0.1);
}

.mypage-comment-card.tier-veteran {
    background-color: rgba(52, 152, 219, 0.1);
}

.mypage-comment-card.tier-prospect {
    background-color: rgba(46, 204, 113, 0.1);
}

.mypage-comment-card.tier-cutie {
    background-color: rgba(148, 163, 184, 0.1);
}

.mypage-wod-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.mypage-wod-link {
    text-decoration: none;
    color: var(--text);
}

.mypage-wod-link:hover h3 {
    color: var(--accent);
}

.mypage-comment-content {
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

/* Footer */
.footer {
    background: var(--bg-section);
    border-top: 0.5px solid var(--border);
    padding: 1rem 0;
    padding-bottom: calc(1rem + var(--app-tabbar-height) + env(safe-area-inset-bottom, 0px));
    text-align: center;
    color: var(--text-hint);
    font-size: 0.94rem;
    margin-top: auto;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Announcements */
.announcement-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.announcement-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(90deg, rgba(230, 57, 70, 0.25), rgba(230, 57, 70, 0.12));
    border: 1px solid var(--accent);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
}

.announcement-title {
    color: #fecaca;
    display: block;
    margin-bottom: 0.25rem;
}

.announcement-content {
    margin: 0;
    font-size: 1.06rem;
    white-space: pre-wrap;
}

.announcement-dismiss {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}

.announcement-dismiss:hover {
    color: var(--text);
}

.announcement-toast {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: #161616;
    border: 0.5px solid #2a2a2a;
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    font-size: 15px;
    color: #f0f0f0;
    z-index: 9999;
    max-width: 340px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    width: calc(100% - 32px);
    box-sizing: border-box;
    pointer-events: auto;
}

.at-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.at-title {
    font-size: 15px;
    font-weight: 600;
    color: #f0f0f0;
}

.at-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.at-msg {
    line-height: 1.4;
    word-break: break-word;
}

.at-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-end;
}

.at-btn-close {
    padding: 4px 12px;
    background: transparent;
    border: 0.5px solid #444;
    border-radius: 6px;
    color: #888;
    font-size: 13px;
    cursor: pointer;
}

.at-btn-dismiss {
    padding: 4px 12px;
    background: transparent;
    border: 1px solid #e53e3e;
    border-radius: 6px;
    color: #e53e3e;
    font-size: 13px;
    cursor: pointer;
}

@keyframes dex-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(229, 62, 62, 0);
    }
}

.dex-btn-pulse {
    animation: dex-pulse 1.5s infinite;
    border-color: #e53e3e !important;
}

.char-dex-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 12px;
}

.char-dex-item {
    background: #111;
    border-radius: 12px;
    border: 0.5px solid #222;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.char-dex-item.selected {
    border-color: #e53e3e;
    background: #e53e3e11;
}

.char-dex-item span {
    font-size: 13px;
    color: #888;
}

.char-dex-selected-badge {
    font-size: 11px;
    background: #e53e3e;
    color: #fff;
    border-radius: 20px;
    padding: 2px 8px;
    position: absolute;
    top: 8px;
    right: 8px;
}

/* Home WOD grid */
.home-wod-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 769px) {
    .home-wod-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.home-section-title {
    font-size: 1.35rem;
    margin: 1.5rem 0 0.75rem;
}

.home-challenge-section {
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255, 77, 90, 0.45);
    box-shadow: 0 -8px 18px rgba(230, 57, 70, 0.2);
    padding-top: 0.8rem;
}

.home-challenge-title {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: none;
}

.home-challenge-title .challenge-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.home-challenge-title .challenge-title-emoji {
    flex-shrink: 0;
}

.challenge-title-emoji {
    font-size: 1.5rem;
    line-height: 1;
}

.challenge-title-text {
    background: linear-gradient(90deg, #ff4d5a 0%, #ff7a18 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    -webkit-filter: drop-shadow(0 0 12px rgba(255, 100, 50, 0.35));
    filter: drop-shadow(0 0 12px rgba(255, 100, 50, 0.35));
}

.challenge-period-title {
    margin: 0 0 0.35rem;
    font-size: 0.94rem;
    color: var(--gold);
    font-weight: 600;
}

.challenge-period-title--list,
.home-challenge-card .challenge-period-title {
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 4.5rem;
}

.challenge-period-title--detail {
    margin-top: -0.25rem;
}

.wod-description-collapsible.collapsed {
    max-height: var(--collapsed-height, 7.2em);
    overflow: hidden;
}

.wod-desc-toggle {
    margin: 0.35rem 0 0.75rem;
}

.record-entry-footer,
.record-form-always-visible {
    flex-shrink: 0;
}

/* Challenge */
.home-challenge-card {
    position: relative;
    color: var(--text);
    touch-action: pan-y;
}

.home-challenge-card .challenge-period-title,
.home-challenge-card .challenge-preview,
.home-challenge-card .challenge-dates {
    text-decoration: none;
    border-bottom: none;
}

.challenge-hero-title,
.home-challenge-card h3 {
    margin: 0.5rem 0;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    border-bottom: 2px solid #9B59B6;
    padding-bottom: 0.2rem;
    display: inline-block;
    text-transform: none;
}

.wod-card.featured .card-header .challenge-hero-title {
    margin-top: 0.25rem;
}

.challenge-list-card h3:not(.challenge-card-title),
.challenge-list-card .wod-card-link-wrap h3 {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    display: inline-block !important;
    border-bottom: 2px solid #9B59B6 !important;
    padding-bottom: 0.2rem !important;
    margin: 0.35rem 0 0.5rem !important;
    line-height: 1.2 !important;
}

.card-badge-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.card-badge-stack--overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

.weapon-score-hint-wrap {
    position: relative;
}

.weapon-score-hint-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1.5px solid #ccc;
    border-radius: 50%;
    background: transparent;
    color: #ccc;
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.weapon-score-hint-btn:hover,
.weapon-score-hint-btn.is-active {
    border-color: #eee;
    color: #eee;
}

.weapon-score-hint-tooltip {
    pointer-events: none;
}

.challenge-preview {
    color: #cccccc;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.55;
    margin: 0.65rem 0 0.45rem;
    white-space: pre-wrap;
}

.challenge-dates {
    color: #888888;
    font-size: 0.94rem;
    margin: 0 0 0.5rem;
}


/* Admin */
.admin-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-card-gap);
    margin-bottom: var(--space-section);
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.06rem;
}

.admin-table th,
.admin-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    color: var(--text-muted);
    font-weight: 600;
}

.admin-user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.admin-role-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.admin-role-select {
    min-width: 6.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.94rem;
}

.badge-muted {
    background: var(--border);
    color: var(--text-muted);
}

.admin-announce-list {
    list-style: none;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-announce-item {
    padding: var(--card-padding);
    background: var(--bg-section);
    border: 0.5px solid var(--border);
    border-radius: var(--radius);
}

.admin-announce-edit-form input,
.admin-announce-edit-form textarea {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
}

.admin-announce-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.admin-announce-date {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.94rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.chat-panel-header-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Mypage search & groups */
.mypage-search {
    margin-bottom: 1.25rem;
}

.mypage-records-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mypage-tabs {
    display: inline-flex;
    gap: 0.5rem;
}

.mypage-tab-btn {
    border: 0.5px solid var(--border);
    background: var(--bg-section);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 0.3rem 0.65rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.94rem;
}

.mypage-tab-btn.is-active {
    background: #e53e3e18;
    border-color: #e53e3e44;
    color: var(--accent);
}

.mypage-date-section {
    margin-bottom: 1.5rem;
}

.mypage-date-group {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 0.75rem;
    font-family: var(--font-body);
    letter-spacing: 0;
}

.mypage-comment-card {
    margin-bottom: 0.75rem;
    padding: 1rem;
}

.mypage-wod-link h4 {
    margin: 0.2rem 0 0;
    font-size: 1.3rem;
}

.mypage-comment-content {
    font-size: 17px;
    line-height: 1.55;
}

.mypage-record-score .record-value-text,
.mypage-record-score .record-private-label {
    font-size: 1.25rem;
}

.mp-record-link-btn {
    font-size: 17px;
}

.kind-badge {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.mypage-no-results {
    text-align: center;
    padding: 2rem;
}

.mypage-date-picker-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mypage-date-input {
    width: 1px !important;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.mypage-pagination {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mypage-page-btn {
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}

.mypage-page-btn.is-active {
    border-color: var(--accent);
    background: rgba(230, 57, 70, 0.2);
    color: #fff;
}

.list-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 16px 12px;
    flex-wrap: wrap;
}

.list-page-btn {
    background: #161616;
    border: 0.5px solid #222;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 15px;
    color: #666;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

a.list-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.list-page-btn.is-active {
    background: #e53e3e;
    border-color: #e53e3e;
    color: #fff;
}

/* Desktop */
@media (min-width: 769px) {
    .wod-group-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-page .today-wods.home-wod-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        align-items: stretch;
    }

    .home-page .home-wod-card {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        height: 100%;
    }

    .home-page .home-wod-card-top {
        flex-shrink: 0;
    }

    .home-page .home-wod-card-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .home-page .home-wod-card-body .wod-description-collapsible {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: 0.25rem;
    }

    .home-page .home-wod-card-body .wod-description-collapsible.collapsed {
        max-height: none;
        overflow-y: auto;
    }

    .home-page .home-wod-card-footer {
        flex-shrink: 0;
        margin-top: auto;
        padding-bottom: 1.125rem;
    }

    .home-page .home-wod-card-footer .wod-leaderboard {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .home-page .home-wod-card-footer .card-footer {
        margin-top: 0;
    }

    .home-page .home-wod-card .wod-desc-toggle {
        display: none !important;
    }

    .home-page .home-wod-card-body .wod-description-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .home-page .home-wod-card-body .wod-description-scroll::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 3px;
    }

    .wod-list-card,
    .challenge-list-card {
        align-self: start;
        display: flex;
        flex-direction: column;
    }
}

/* Mobile */
@media (max-width: 1023px) {
    .container,
    .main-container,
    .page-container {
        max-width: 480px;
        padding: 0 24px;
    }
}

@media (max-width: 767px) {
    .nav-inner {
        flex-wrap: nowrap;
        gap: 0.5rem;
        align-items: center;
    }

    .logo {
        order: unset;
    }

    .nav-auth {
        order: unset;
        margin-left: auto;
        gap: 0.35rem;
    }

    .nav-links {
        order: unset;
        width: auto;
        flex: unset;
        gap: 0;
        flex-wrap: nowrap;
        justify-content: space-around;
        overflow-x: visible;
        padding-top: 0.2rem;
    }

    .nav-links a {
        font-size: 1.06rem;
        padding: 0.35rem 0.15rem;
        min-height: var(--app-tabbar-height);
        line-height: 1.2;
        white-space: nowrap;
    }

    .nav-auth .btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.94rem;
        min-height: 34px;
        white-space: nowrap;
    }

    .user-badge {
        font-size: 0.94rem;
        white-space: nowrap;
    }

    .container,
    .main-container,
    .page-container {
        max-width: 480px;
        width: 100%;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .page-home.container,
    .page-home.page-container {
        max-width: 480px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .page-container.main-content > .container.main-wide-container {
        max-width: 100%;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .home-layout-container,
    .page-home .home-content-column,
    .home-page,
    .home-page-body,
    .home-page .today-wods.home-wod-grid,
    .home-challenge-section,
    .home-page .home-wod-card,
    .home-page .home-challenge-card,
    #challenge-list-root,
    .wod-date-group-section[data-challenge-group],
    .challenge-list-card {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    #challenge-list-root,
    #challenge-list-root .wod-group-grid {
        width: 100%;
        max-width: 100%;
    }

    .card,
    .section,
    .page-header,
    .home-page,
    #wod-list-root,
    #challenge-list-root,
    .mypage-records-section,
    .admin-table-wrap {
        width: 100%;
    }

    .wod-list-card,
    .home-wod-card,
    .challenge-card,
    .challenge-list-card,
    .home-challenge-card,
    .mypage-comment-card {
        min-width: 0;
    }

    .wod-group-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-card-gap);
        align-items: start;
    }

    .wod-list-card,
    .challenge-list-card {
        align-self: start;
        display: flex;
        flex-direction: column;
    }

    .mypage-date-grid {
        grid-template-columns: 1fr !important;
    }

    .home-page .today-wods.home-wod-grid {
        grid-template-columns: 1fr !important;
    }

    .main-content {
        padding: 0.5rem 0 5.5rem;
    }

    .home-page-subtitle {
        font-size: 0.94rem;
    }

    .card {
        padding: var(--card-padding);
    }

    .btn,
    .btn-touch,
    .toggle-btn,
    .chat-fab,
    .popup-chat-close,
    .chat-input-form .btn,
    .chat-input-form textarea,
    .record-type-select {
        min-height: 44px;
    }

    .mp-records-section .btn-sm {
        min-height: unset;
        padding: 4px 10px;
    }

    .record-input-row {
        flex-direction: column;
    }

    .record-type-select {
        width: 100%;
    }

    .record-input-row input {
        width: 100%;
    }

    .rx-scale-toggle {
        width: 100%;
    }

    .rx-scale-toggle .toggle-btn {
        flex: 1;
    }

    .leaderboard-item {
        font-size: 1.06rem;
    }

    .wod-leaderboard {
        padding: 0.85rem;
    }

    .chat-popup {
        width: min(300px, calc(100vw - 32px));
        right: 16px;
        height: 380px;
        bottom: calc(var(--app-tabbar-height) + 72px + env(safe-area-inset-bottom, 0px));
    }

    .chat-fab {
        bottom: calc(var(--app-tabbar-height) + 12px + env(safe-area-inset-bottom, 0px));
        right: 20px;
    }

    #chat-popup .popup-chat-message {
        max-width: 78%;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .chat-panel-header-right .chat-clear-all-btn,
    .chat-panel-header-right .btn {
        font-size: 0.82rem;
        padding: 0.35rem 0.5rem;
    }
}

@media (max-width: 600px) {
    .logo-main {
        font-size: 1.95rem;
    }
}

/* Personal gym (mypage) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.personal-gym-card {
    margin-bottom: var(--space-section);
    background: var(--bg-card);
    border: 0.5px solid var(--border);
    box-shadow: none;
}

.personal-gym-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.personal-gym-card.is-collapsed .personal-gym-header {
    padding-bottom: 0;
    border-bottom: 0.5px solid var(--border-section);
}

.personal-gym-title {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--text);
    flex: 1;
    min-width: 0;
}

.personal-gym-toggle-btn {
    flex-shrink: 0;
    padding: 0.25rem 0.55rem;
    font-size: 0.94rem;
    line-height: 1.25;
    min-height: 0;
}

.personal-gym-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.35s ease;
}

.personal-gym-card.is-collapsed .personal-gym-body {
    grid-template-rows: 0fr;
}

.personal-gym-body-inner {
    overflow: hidden;
    min-height: 0;
    padding-top: var(--space-card-gap);
    border-top: 0.5px solid var(--border-section);
}

.personal-exercise-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-card-gap);
    margin-bottom: var(--space-card-gap);
}

@media (min-width: 769px) {
    .personal-exercise-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.personal-exercise-grid.is-reorder-mode .personal-exercise-card {
    cursor: grab;
}

body.is-personal-reorder-dragging {
    overflow: hidden;
    touch-action: none;
}

.personal-exercise-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-section);
    border: 0.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.personal-exercise-card.is-drag-source {
    opacity: 0.2 !important;
    pointer-events: none;
}

.personal-exercise-card.is-drop-target {
    filter: brightness(1.12);
    border-color: rgba(230, 57, 70, 0.45);
}

.personal-exercise-drag-clone {
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0.88;
    pointer-events: none;
    z-index: 10000;
    cursor: grabbing;
    will-change: transform;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.45),
        0 8px 20px rgba(0, 0, 0, 0.3);
}

.personal-exercise-card-body {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.75rem 0.85rem;
    border: none;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    flex: 1;
}

.personal-exercise-name {
    font-weight: 700;
    font-size: 1.06rem;
    flex: 1 1 auto;
    min-width: 0;
}

.personal-exercise-pr {
    font-size: 0.94rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.personal-new-pr-badge {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.personal-exercise-card-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0 0.55rem 0.55rem;
}

.personal-exercise-card-actions .btn {
    padding: 0.35rem 0.7rem;
    font-size: 1.06rem;
    line-height: 1.2;
    min-height: 0;
}

.personal-exercise-add-btn {
    margin-top: 0.15rem;
}

.personal-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
}

.personal-detail-overlay[hidden] {
    display: none !important;
}

.personal-detail-modal {
    width: 100%;
    max-width: 640px;
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    margin: 0;
}

.personal-detail-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    flex-shrink: 0;
}

.personal-detail-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    flex: 1;
}

.personal-detail-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.personal-detail-modal-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem 0.35rem;
}

.personal-detail-modal-body {
    overflow: auto;
    min-height: 0;
}

.personal-detail-table-wrap {
    overflow-x: auto;
}

.gym-record-list-wrap {
    overflow: visible;
}

.gym-record-list-head {
    display: grid;
    grid-template-columns: 6.5rem 5.5rem 4.5rem 1fr;
    gap: 0.45rem;
    padding: 0.4rem 0.45rem;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.94rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.gym-record-list {
    display: flex;
    flex-direction: column;
}

.gym-record-row {
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.gym-record-row:active {
  background: #1a1a1a;
}
.gym-record-row[data-has-memo='0'] {
  cursor: default;
}

.gym-record-main {
    display: grid;
    grid-template-columns: 6.5rem 5.5rem 4.5rem 1fr;
    gap: 0.45rem;
    padding: 0.55rem 0.45rem;
    align-items: center;
}

.gym-record-col {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gym-record-actions {
    display: flex;
    justify-content: flex-end;
}

.personal-detail-records-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
    table-layout: fixed;
}

.personal-detail-records-table th,
.personal-detail-records-table td {
    padding: 0.55rem 0.45rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    text-align: left;
    vertical-align: middle;
}

.personal-detail-records-table tbody tr {
    vertical-align: middle;
}

.personal-detail-records-table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.94rem;
}

.personal-detail-row-pr {
    background: rgba(230, 57, 70, 0.1);
}

.personal-detail-row-pr td {
    border-bottom-color: rgba(230, 57, 70, 0.35);
}

.personal-pr-tag {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fbbf24;
    margin-left: 0.15rem;
}

.personal-detail-records-table th:nth-child(1),
.personal-detail-records-table td:nth-child(1) {
    width: 6.5rem;
}

.personal-detail-records-table th:nth-child(2),
.personal-detail-records-table td:nth-child(2) {
    width: 5.5rem;
}

.personal-detail-records-table th:nth-child(3),
.personal-detail-records-table td:nth-child(3) {
    width: 4.5rem;
}

.personal-detail-records-table th:nth-child(5),
.personal-detail-records-table td:nth-child(5) {
    width: 8.5rem;
}

.personal-detail-memo {
    word-break: break-word;
    color: var(--text-muted);
    vertical-align: middle;
}

.gym-record-memo {
  padding: 8px 12px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  border-top: 0.5px solid #2a2a2a;
  overflow: hidden;
  animation: memoSlideDown 0.2s ease-out;
}
.gym-record-memo[hidden] {
  display: none !important;
}
.gym-record-memo.is-closing {
  animation: memoSlideUp 0.18s ease-in forwards;
}
@keyframes memoSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes memoSlideUp {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

.gym-memo-icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}
.gym-memo-text {
  color: #888;
  font-size: 15px;
  line-height: 1.5;
  word-break: break-all;
}

.personal-detail-row-actions {
    vertical-align: middle;
    white-space: nowrap;
}

.personal-detail-row-actions-inner {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    vertical-align: middle;
}

.personal-detail-row-actions-inner .btn {
    padding: 0.35rem 0.7rem;
    font-size: 1.06rem;
    line-height: 1.2;
    min-height: 0;
    flex-shrink: 0;
}

@media (max-width: 768px) {
  .gym-record-list-head {
    grid-template-columns: 5.2rem 4.2rem 3.6rem 1fr;
    font-size: 0.82rem;
  }
  .gym-record-main {
    grid-template-columns: 5.2rem 4.2rem 3.6rem 1fr;
  }
  .gym-memo-text { font-size: 13px; }
}

.personal-detail-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin-top: 0.85rem;
}

.personal-detail-page-btn {
    min-width: 2rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.94rem;
    cursor: pointer;
    font-family: inherit;
}

.personal-detail-page-btn.is-active {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
}

.personal-record-exercise-label {
    margin: 0 0 0.75rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent);
}

body.personal-detail-modal-open,
body.personal-record-modal-open {
    overflow: hidden;
}

.personal-record-overlay {
    position: fixed;
    inset: 0;
    z-index: 9550;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
}

.personal-record-overlay[hidden] {
    display: none !important;
}

.personal-record-modal {
    position: relative;
    z-index: 9600;
    width: 100%;
    max-width: 420px;
    max-height: min(90vh, 640px);
    overflow-y: auto;
    margin: 0;
}

.personal-record-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.personal-record-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.personal-record-modal-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
}

.personal-record-modal-close:hover {
    color: var(--text);
}

.personal-record-form input,
.personal-record-form textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 1.06rem;
}

.form-row-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.personal-record-form-error {
    margin: 0 0 0.75rem;
    font-size: 0.94rem;
    color: var(--error);
}

.personal-pr-toast {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 9700;
    transform: translate(-50%, -120%);
    padding: 0.85rem 1.35rem;
    border-radius: 0 0 10px 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: #e63946;
    box-shadow: 0 8px 24px rgba(230, 57, 70, 0.55);
    pointer-events: none;
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.personal-pr-toast.show {
    transform: translate(-50%, 0);
    opacity: 1;
}

.personal-pr-toast[hidden] {
    display: none;
}

/* Home compact layout */
.home-slogan {
    margin: 0;
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid #1a1a1a;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.4;
}

.home-slogan-lead {
    color: #ffffff;
}

.home-slogan-accent {
    color: #e53e3e;
    text-shadow:
        0 0 10px rgba(229, 62, 62, 0.9),
        0 0 24px rgba(229, 62, 62, 0.5);
}

/* 홈 배너 슬라이더 — 110px 고정 */
.page-home .home-banner-wrap {
    position: relative;
    margin: 0 12px 10px;
    border-radius: 12px;
    overflow: hidden;
    width: calc(100% - 24px);
    box-sizing: border-box;
}

#banner-outer {
    overflow: hidden;
    border-radius: 12px;
    width: 100%;
}

#banner-inner {
    display: flex;
    transition: transform 0.4s ease;
    will-change: transform;
    width: 100%;
}

.banner-slide {
    min-width: 100%;
    flex-shrink: 0;
    width: 100%;
    overflow: hidden;
}

.banner-slide img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.banner-link {
    display: block;
    width: 100%;
    overflow: hidden;
}

.banner-link--auto {
    display: block;
    width: 100%;
    overflow: hidden;
}

.page-home #banner-dots {
    position: absolute;
    bottom: 8px;
    right: 12px;
    display: flex !important;
    gap: 4px;
    padding: 0;
    z-index: 10;
}

.page-home .banner-slide img,
.page-home .banner-slide .banner-slide-img,
.page-home .banner-slide .banner-img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.page-home .banner-slide .banner-auto,
.page-home .banner-slide .home-banner-auto {
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 20px;
    border-radius: 12px;
    gap: 6px;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.page-home .home-banner-wrap .banner-link,
.page-home .home-banner-wrap .banner-link--auto {
    width: 100%;
    height: 110px;
    min-height: 110px;
    max-height: 110px;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
}

.page-home .home-banner-wrap .banner-prize-bar,
.page-home .home-banner-wrap .prize-bar,
.page-home .banner-slide .banner-prize-bar,
.page-home .banner-slide .prize-bar {
    display: none !important;
}

/* 자동 배너 */
.banner-auto {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 20px;
    min-height: 110px;
    width: 100%;
    border-radius: 12px;
    gap: 6px;
    box-sizing: border-box;
    overflow: hidden;
}

.banner-auto-emoji {
    font-size: 28px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.85;
    line-height: 1;
}

.banner-auto-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.banner-auto-badge {
    font-size: 13px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    color: #fff;
    width: fit-content;
    display: inline-block;
}

.banner-auto-title {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: #f0f0f0;
    line-height: 1.3;
    word-break: break-word;
}

.banner-auto-subtitle {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    line-height: 1.35;
    word-break: break-word;
}

.wod-slider-wrapper {
    overflow: hidden;
    width: 100%;
}

.wod-slider-wrapper--single .wod-slide {
    min-width: 100%;
}

.wod-slider-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    transition: transform 0.3s ease;
    will-change: transform;
}

.wod-slide {
    min-width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

.wod-slide .home-wod-card--compact {
    width: 100%;
    margin-bottom: 0;
}

.wod-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
}

.wod-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #444444;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.wod-dot.is-active {
    background: #ffffff;
}

.wod-dot:focus-visible {
    outline: 2px solid #e53e3e;
    outline-offset: 2px;
}

.home-today-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: var(--space-card-gap);
    padding-top: 8px;
    flex-wrap: wrap;
}

.home-today-date {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.home-today-header-right,
.home-header-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

.home-header-badges-spacer {
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.home-header-status-badge,
.home-today-status {
    flex-shrink: 0;
}

.home-wod-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.5rem;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #aaaaaa;
    background: #1a1a1a;
    border: 0.5px solid #2a2a2a;
}

.home-page-header--compact {
    margin-bottom: 0.5rem;
    padding-bottom: 0;
}

.home-page-body--compact {
    gap: var(--space-card-gap);
}

.home-wod-grid--compact {
    gap: var(--space-card-gap) !important;
}

.page-home .home-wod-card--compact,
.page-home .home-empty-state--compact {
    padding: 0;
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
    border-left: 3px solid #e53e3e;
}

.page-home .home-challenge-card--compact {
    padding: 0;
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
    border-left: 3px solid #f6ad00;
}

.home-wod-compact-head {
    margin-bottom: 0;
    padding: var(--card-padding);
    padding-right: 2.2rem;
}

.home-wod-hint-stack {
    align-items: flex-end;
}

.home-wod-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    margin-bottom: 0.25rem;
}

.home-wod-name {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    text-transform: none;
}

.page-home .home-challenge-name {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 800;
    text-transform: none;
    border-bottom: none;
    padding-bottom: 0;
    display: block;
    margin: 0;
}

.home-wod-hint {
    margin-left: auto;
    flex-shrink: 0;
}

.home-wod-desc-line {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.4;
    color: #cccccc;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

.page-home .home-wod-card--compact .home-wod-desc {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.45;
    color: #dddddd;
    word-break: break-word;
}

.page-home .leaderboard-item--compact {
    font-size: 17px;
}

.page-home .leaderboard-item--compact .lb-medal {
    font-size: 17px;
    line-height: 1;
}

.page-home .leaderboard-item--compact .lb-name {
    font-size: 17px;
}

.page-home .leaderboard-item--compact .lb-score {
    font-size: 15px;
}

.page-home .leaderboard-item--compact .lb-rx-badge {
    font-size: 15px;
}

.page-home .leaderboard-item--compact.rank-1 .lb-score {
    color: #e53e3e;
}

.page-home .leaderboard-item--compact.rank-2 .lb-score,
.page-home .leaderboard-item--compact.rank-3 .lb-score {
    color: #ffffff;
}

.page-home .leaderboard-item--compact .lb-name-wrap .weapon-icon-circle--28 {
    width: 28px;
    height: 28px;
}

.page-home .leaderboard-item--compact .lb-name-wrap .weapon-icon-circle--28 .user-weapon-icon {
    width: 20px;
    height: 20px;
}

.lb-name-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
}

.lb-name-wrap .user-weapon-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.wod-leaderboard--compact {
    margin: 0;
    padding: var(--card-padding);
    background: var(--bg-section);
    border-top: 0.5px solid var(--border-section);
    border-radius: 0;
}

.page-home .wod-leaderboard--compact,
.page-home .home-wod-compact-leaderboard {
    border-top: none;
}

.wod-leaderboard--compact .leaderboard-title {
    margin-bottom: 0.35rem;
}

.leaderboard-list--compact {
    gap: 0.25rem;
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
}

.leaderboard-item--compact {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    font-size: 0.76rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    border: none;
    border-top: none;
    border-bottom: none;
    outline: none;
}

.page-home .leaderboard-item--compact,
.page-home .leaderboard-item--compact.rank-1,
.page-home .leaderboard-item--compact.rank-2,
.page-home .leaderboard-item--compact.rank-3 {
    border: none;
    border-top: none;
    border-bottom: none;
    outline: none;
    background: transparent;
}

.lb-medal {
    flex-shrink: 0;
}

.lb-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.home-wod-compact-footer {
    margin-top: 0;
    padding: var(--card-padding);
    border-top: 0.5px solid var(--border-section);
    background: var(--bg-section);
}

.home-record-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 0.65rem !important;
    font-size: 0.94rem;
    min-height: 0 !important;
    line-height: 1.2;
    text-align: center;
    justify-content: center;
}

.home-challenge-section--compact {
    margin-top: var(--space-section);
    border-top: none;
    box-shadow: none;
    padding-top: 0;
}

.home-challenge-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: var(--space-card-gap);
    min-width: 0;
    width: 100%;
}

.home-challenge-title--compact {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.3;
    color: #f6ad00;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-transform: none;
}

.home-challenge-title--compact .challenge-title-emoji {
    flex-shrink: 0;
    display: inline-block;
    font-size: 1.08rem;
    font-weight: 700;
    color: #f6ad00;
    background: none;
    -webkit-text-fill-color: #f6ad00;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    filter: none;
    -webkit-filter: none;
}

.home-challenge-title--compact .challenge-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 1.08rem;
    font-weight: 700;
    color: #f6ad00;
    background: none;
    -webkit-text-fill-color: #f6ad00;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    filter: none;
    -webkit-filter: none;
}

@media (max-width: 768px) {
    .home-challenge-title {
        white-space: nowrap;
    }
}

.challenge-dates--compact {
    margin: 0.2rem 0 0;
    font-size: 1.06rem;
    color: var(--text-hint);
}

.home-challenge-empty {
    margin: 0;
    font-size: 0.94rem;
}

.btn-challenge-gold {
    background: var(--gold);
    color: #1a1200;
    border: 0.5px solid #f6ad0044;
    font-weight: 700;
}

.btn-challenge-gold:hover {
    background: #ffbd2e;
    color: #1a1200;
}

.page-home .home-wod-card-body,
.page-home .wod-desc-toggle,
.page-home .home-wod-card-top,
.page-home .home-wod-card-footer:not(.home-wod-compact-footer),
.page-home .challenge-period-title,
.page-home .challenge-preview {
    display: none !important;
}

.page-home .home-challenge-card--compact .home-wod-compact-head {
    padding-top: 0.65rem;
    padding-right: 2.2rem;
}

.page-home .home-challenge-card--compact .home-wod-compact-leaderboard {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.page-home .home-wod-card--compact .home-wod-compact-leaderboard {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.page-home .home-wod-compact-footer {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.page-home .home-page-subtitle {
    margin: 0;
    font-size: 0.94rem;
    color: var(--text-hint);
}

.user-badge .user-weapon-icon {
    width: 22px;
    height: 22px;
}

.page-home .section {
    margin-bottom: 0;
}

.page-home .home-empty-state--compact {
    padding: var(--card-padding);
}

@media (min-width: 768px) {
    .page-home .home-wod-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .page-home .home-wod-grid--compact {
        grid-template-columns: 1fr;
    }

    .home-page,
    .home-page-body,
    .home-page .today-wods.home-wod-grid,
    .home-page .home-wod-card,
    .home-page .home-challenge-card {
        overflow: visible;
    }
}

/* App pages — shared design system */
.page-wod-list,
.page-challenge,
.page-chat,
.page-mypage,
.page-gym,
.page-admin {
    padding-top: 0.5rem;
}

.records-tab-row {
    display: flex;
    gap: 8px;
    padding: 12px 12px 0;
}

.records-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #555;
    background: #161616;
    border: 0.5px solid #222;
    border-bottom: none !important;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.records-tab.active {
    background: #e53e3e;
    color: #fff;
    border-color: #e53e3e;
    border-bottom: none !important;
    box-shadow: none !important;
}

.page-workout-what {
    max-width: 480px;
    margin: 0 auto;
    padding-top: 0;
    background: #000;
}

.page-workout-what .app-page-wrap {
    padding-bottom: 80px;
    background: #000;
}

.page-workout-what .workout-what-filters-wrap {
    background: #0d0d0d;
    padding: 10px 0 0;
    border-bottom: 1px solid #1a1a1a;
}

.page-workout-what .filter-row {
    display: flex;
    gap: 5px;
    padding: 0 16px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.page-workout-what .filter-row::-webkit-scrollbar {
    display: none;
}

.page-workout-what .workout-filter-row {
    padding: 8px 16px;
}

.page-workout-what .workout-what-random-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 16px 10px;
    width: calc(100% - 32px);
    background: #e53e3e;
    border: none;
    border-radius: 12px;
    padding: 13px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.page-workout-what .workout-what-random-btn .ti {
    font-size: 17px;
}

.page-workout-what .workout-what-list {
    padding: 0;
}

.page-workout-what .ww-card {
    background: #111;
    border: 1px solid #1e1e1e;
    border-radius: 14px;
    margin: 0 16px 8px;
    padding: 13px 14px;
}

.page-workout-what .ww-card-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
}

.page-workout-what .ww-card-desc {
    font-size: 14px;
    color: #888;
    line-height: 1.65;
    margin-bottom: 8px;
}

.page-workout-what .ww-card-type {
    background: #1a1a1a;
    border: 1px solid #222;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    padding: 2px 8px;
}

.page-workout-what .ww-card-source {
    background: #1a1a1a;
    border: 1px solid #222;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    padding: 2px 8px;
    flex-shrink: 0;
}

.page-workout-what .ww-card-stars .ti-star-filled {
    color: #e53e3e;
    font-size: 11px;
}

.page-workout-what .ww-card-stars .ti-star {
    color: #222;
    font-size: 11px;
}

.page-workout-what .ww-card-time {
    color: #444;
    font-size: 11px;
    margin-left: auto;
}

.page-workout-what .ww-card-time .ti {
    font-size: 11px;
    vertical-align: -1px;
}

.page-workout-what .ww-card-divider {
    border-top: 1px solid #1a1a1a;
    margin: 8px 0;
}

.page-workout-what .ww-card-actions {
    border-top: none;
    padding-top: 0;
}

.page-workout-what .workout-like-btn {
    background: none;
    border: none;
    color: #444;
    padding: 0;
    gap: 4px;
    font-size: 15px;
}

.page-workout-what .workout-like-btn .ti {
    font-size: 20px;
}

.page-workout-what .workout-like-btn.liked,
.page-workout-what .workout-like-btn.liked .ti {
    color: #e53e3e;
}

.page-workout-what .workout-record-btn {
    background: #e53e3e;
    border: none;
    border-radius: 9px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.page-workout-what .workout-sort-select {
    background: #1a1a1a;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 13px;
    color: #777;
}

.page-workout-what .workout-liked-btn {
    background: #1a1a1a;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 13px;
    color: #777;
    gap: 4px;
}

.page-workout-what .workout-liked-btn.active {
    background: rgba(229,62,62,0.1);
    border-color: rgba(229,62,62,0.35);
    color: #e53e3e;
}

.page-workout-what .workout-liked-btn.active .ti {
    color: #e53e3e;
}

.page-workout-what .wwf-btn,
.page-workout-what .wws-btn,
.page-workout-what .wwd-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1a1a1a;
    border: 1px solid #222;
    border-radius: 20px;
    padding: 5px 11px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.page-workout-what .wwd-btn--star {
    padding: 5px 8px;
    gap: 2px;
}

.page-workout-what .wwf-btn .ti,
.page-workout-what .wws-btn .ti,
.page-workout-what .wwd-btn .ti {
    font-size: 12px;
    color: #555;
}

.page-workout-what .wwf-btn.active,
.page-workout-what .wws-btn.active,
.page-workout-what .wwd-btn.active {
    background: rgba(229,62,62,0.1);
    border-color: rgba(229,62,62,0.35);
    color: #e53e3e;
}

.page-workout-what .wwf-btn.active .ti,
.page-workout-what .wws-btn.active .ti,
.page-workout-what .wwd-btn.active .ti {
    color: #e53e3e;
}

.workout-what-header {
    padding: 12px 16px 8px;
}

.workout-what-title {
    font-size: 20px;
    font-weight: 500;
    color: #f0f0f0;
    margin: 0;
}

.workout-what-sub {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
    margin-bottom: 0;
}

.workout-what-empty {
    color: #666;
    text-align: center;
    padding: 24px 0;
    margin: 0;
}

.workout-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
}

.workout-sort-select {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 5px 10px;
    color: #777;
    font-size: 13px;
    font-family: inherit;
}

.workout-liked-btn {
    display: inline-flex;
    align-items: center;
    background: #1a1a1a;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 5px 10px;
    color: #777;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    gap: 4px;
}

.workout-liked-btn .ti {
    font-size: 12px;
    color: #555;
}

.workout-liked-btn.active {
    color: #e53e3e;
    border-color: rgba(229,62,62,0.35);
    background: rgba(229,62,62,0.1);
}

.workout-liked-btn.active .ti {
    color: #e53e3e;
}

.workout-what-filters-wrap {
    background: #0d0d0d;
    padding: 10px 0 0;
    border-bottom: 1px solid #1a1a1a;
}

.workout-what-filters,
.workout-what-sources,
.workout-what-difficulty {
    display: flex;
    gap: 5px;
    padding: 0 16px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.workout-what-filters::-webkit-scrollbar,
.workout-what-sources::-webkit-scrollbar,
.workout-what-difficulty::-webkit-scrollbar {
    display: none;
}

.wwf-btn,
.wws-btn,
.wwd-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1a1a1a;
    border: 1px solid #222;
    border-radius: 20px;
    padding: 5px 11px;
    color: #555;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.wwd-btn--star {
    padding: 5px 8px;
    gap: 2px;
}

.wwf-btn .ti,
.wws-btn .ti,
.wwd-btn .ti {
    font-size: 12px;
    color: #555;
}

.wwf-btn.active,
.wws-btn.active,
.wwd-btn.active {
    background: rgba(229,62,62,0.1);
    border-color: rgba(229,62,62,0.35);
    color: #e53e3e;
}

.wwf-btn.active .ti,
.wws-btn.active .ti,
.wwd-btn.active .ti {
    color: #e53e3e;
}

.workout-what-random-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 32px);
    margin: 0 16px 10px;
    background: #e53e3e;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 13px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.workout-what-random-btn .ti {
    font-size: 17px;
}

.workout-what-list {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.ww-card {
    background: #111;
    border-radius: 14px;
    border: 1px solid #1e1e1e;
    padding: 13px 14px;
    margin: 0 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ww-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.ww-card-title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    min-width: 0;
}

.ww-card-source {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background: #1a1a1a;
    border: 1px solid #222;
    color: #555;
    flex-shrink: 0;
}

.ww-card-desc {
    font-size: 14px;
    color: #888;
    line-height: 1.65;
    margin-bottom: 8px;
}

.ww-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ww-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ww-card-type {
    font-size: 13px;
    font-weight: 600;
    background: #1a1a1a;
    border: 1px solid #222;
    color: #666;
    border-radius: 20px;
    padding: 2px 8px;
}

.ww-card-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.ww-card-stars .ti-star-filled {
    color: #e53e3e;
    font-size: 11px;
}

.ww-card-stars .ti-star {
    color: #222;
    font-size: 11px;
}

.ww-card-diff {
    font-size: 11px;
    color: #f6ad00;
}

.ww-card-time {
    font-size: 11px;
    color: #444;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ww-card-time .ti {
    font-size: 11px;
}

.ww-card-divider {
    border-top: 1px solid #1a1a1a;
    margin: 8px 0;
}

.ww-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workout-like-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    color: #444;
    font-size: 15px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    gap: 4px;
}

.workout-like-btn .ti {
    font-size: 20px;
    color: #444;
}

.workout-like-btn.liked,
.workout-like-btn.liked .ti {
    color: #e53e3e;
}

.workout-record-btn {
    background: #e53e3e;
    border: none;
    border-radius: 9px;
    padding: 10px 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-left: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.ww-card-like-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    color: #444;
}

.ww-card-like-count .ti {
    font-size: 14px;
}

.ww-card-highlight {
    border-color: #e53e3e !important;
}

.workout-record-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.workout-record-modal[hidden] {
    display: none !important;
}

.workout-record-modal-box {
    background: #161616;
    border-radius: 18px 18px 0 0;
    border: 0.5px solid #2a2a2a;
    width: 100%;
    max-width: 390px;
    padding: 20px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wrm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrm-title {
    font-size: 17px;
    font-weight: 500;
    color: #f0f0f0;
}

.wrm-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #555;
    cursor: pointer;
    touch-action: manipulation;
    font-family: inherit;
}

.wrm-input {
    background: #111;
    border: 0.5px solid #2a2a2a;
    border-radius: 8px;
    padding: 10px 12px;
    color: #f0f0f0;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.wrm-note {
    background: #111;
    border: 0.5px solid #2a2a2a;
    border-radius: 8px;
    padding: 10px 12px;
    color: #f0f0f0;
    font-size: 15px;
    width: 100%;
    height: 80px;
    resize: none;
    box-sizing: border-box;
    font-family: inherit;
}

.wrm-submit {
    background: #e53e3e;
    border: none;
    border-radius: 10px;
    padding: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
    font-family: inherit;
}

.wod-like-btn {
    background: none;
    border: 0.5px solid #2a2a2a;
    border-radius: 20px;
    padding: 6px 14px;
    color: #555;
    font-size: 15px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    flex-shrink: 0;
}

.wod-like-btn.liked {
    color: #e53e3e;
    border-color: #e53e3e;
}

.challenge-like-btn {
    background: none;
    border: 0.5px solid #2a2a2a;
    border-radius: 20px;
    padding: 6px 14px;
    color: #555;
    font-size: 15px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    flex-shrink: 0;
}

.challenge-like-btn.liked {
    color: #e53e3e;
    border-color: #e53e3e;
}

.wod-like-count-readonly {
    font-size: 15px;
    color: #555;
    flex-shrink: 0;
}

.challenge-like-count-readonly {
    font-size: 15px;
    color: #555;
    flex-shrink: 0;
}

.mp-record-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.mp-record-value {
    font-size: 17px;
    font-weight: 700;
    color: #e53e3e;
    margin-bottom: 4px;
}

.mp-record-note {
    font-size: 13px;
    color: #888;
    margin-bottom: 4px;
    line-height: 1.5;
}

.mp-record-date {
    font-size: 13px;
    color: #555;
}

.mypage-liked-wod-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.mypage-liked-wod-card h4 {
    margin: 0 0 6px;
    font-size: 15px;
    color: #fff;
}

.page-chat {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

html:has(.main-content.page-chat),
html:has(.main-content.page-chat) body {
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
}

body:has(.main-content.page-chat) {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

body:has(.main-content.page-chat) .navbar {
    flex-shrink: 0;
}

body:has(.main-content.page-chat) .footer {
    display: none;
}

body:has(.main-content.page-chat) .flash-messages {
    display: none;
}

.main-content.page-chat.page-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    padding-bottom: calc(var(--app-tabbar-height) + env(safe-area-inset-bottom, 0px));
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.page-chat .chat-page-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.chat-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #0d0d0d;
}

.chat-app__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 0.5px solid #1e1e1e;
    background: #111;
    flex-shrink: 0;
}

.chat-app__online {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

.chat-app__online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    flex-shrink: 0;
}

.chat-app__header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.chat-app__messages {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 12px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
    scrollbar-width: none;
}

.chat-app__messages::-webkit-scrollbar {
    width: 0;
}

.chat-app__empty {
    text-align: center;
    color: #333;
    font-size: 15px;
    padding: 40px 0;
    margin: 0;
}

.chat-msg-group {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.chat-msg-group.mine {
    flex-direction: row-reverse;
}
.chat-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #222;
    border: 0.5px solid #2a2a2a;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-msg-avatar .user-weapon-icon {
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}
.chat-msg-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 72%;
    min-width: 0;
}
.chat-msg-group.mine .chat-msg-body {
    align-items: flex-end;
}
.chat-msg-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.chat-msg-group.mine .chat-msg-meta {
    flex-direction: row-reverse;
}
.chat-msg-nick {
    font-size: 13px;
    font-weight: 500;
    color: #aaa;
    cursor: pointer;
}
.chat-msg-time {
    font-size: 12px;
    color: #444;
}
.chat-bubble {
    background: #1a1a1a;
    border-radius: 12px;
    border-bottom-left-radius: 3px;
    padding: 8px 12px;
    font-size: 15px;
    color: #e0e0e0;
    line-height: 1.5;
    border: 0.5px solid #222;
    word-break: break-word;
    white-space: pre-wrap;
}
.chat-bubble.mine {
    background: #e53e3e;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 3px;
    border: none;
    color: #fff;
}
.chat-msg-bubble-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}
.chat-msg-group.mine .chat-msg-bubble-line {
    flex-direction: row-reverse;
}
.chat-app--admin .chat-msg-group--selectable {
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 6px;
    margin: 0 -6px;
}
.chat-msg-group--selected {
    background: rgba(255, 255, 255, 0.08);
}
.chat-msg-group--selected .chat-app__select-mark-unselected {
    display: none;
}
.chat-msg-group--selected .chat-app__select-mark-selected {
    display: inline;
}
.chat-msg-group--selected .chat-bubble {
    opacity: 0.7;
}
.chat-bubble .chat-emoji,
.page-chat .chat-bubble {
    font-family: "Noto Sans KR", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.chat-app__row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.chat-app--admin .chat-app__row--selectable {
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 6px;
    margin: 0 -6px;
}

.chat-app__row--selected {
    background: rgba(255, 255, 255, 0.08);
}

.chat-app__row--mine {
    flex-direction: row-reverse;
}

.chat-app__avatar {
    flex-shrink: 0;
}

.chat-app__avatar:not(:has(.user-weapon-icon)) {
    display: none;
}

.chat-app__avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 0.5px solid #222;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.chat-app__avatar .weapon-icon-circle,
.chat-app__avatar-circle .weapon-icon-circle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-app__avatar .user-weapon-icon,
.chat-app__avatar-circle .user-weapon-icon {
    display: block;
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
}

.chat-app__col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 72%;
    min-width: 0;
}

.chat-app__row--mine .chat-app__col {
    align-items: flex-end;
}

.chat-app__meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-app__row--mine .chat-app__meta {
    flex-direction: row-reverse;
}

.chat-app__name {
    font-size: 13px;
    color: #888;
}

.chat-app__name--admin {
    color: #e53e3e;
}

.chat-app__time {
    font-size: 11px;
    color: #333;
}

.chat-app__bubble-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.chat-app__row--mine .chat-app__bubble-line {
    flex-direction: row-reverse;
}

.chat-app__select-mark {
    display: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}

.chat-app--admin .chat-app__select-mark {
    display: inline-flex;
}

.chat-app__select-mark-unselected {
    color: #666666;
}

.chat-app__select-mark-selected {
    display: none;
    color: #10b981;
    font-weight: 700;
}

.chat-app__row--selected .chat-app__select-mark-unselected {
    display: none;
}

.chat-app__row--selected .chat-app__select-mark-selected {
    display: inline;
}

.chat-app__row--selected .chat-app__bubble {
    opacity: 0.7;
}

.chat-app__bubble {
    background: #1e1e1e;
    border-radius: 12px 12px 12px 2px;
    padding: 10px 12px;
    font-size: 15px;
    color: #e0e0e0;
    line-height: 1.5;
    border: 0.5px solid #2a2a2a;
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-app__row--mine .chat-app__bubble {
    background: #e53e3e;
    border-color: #e53e3e;
    color: #fff;
    border-radius: 12px 12px 2px 12px;
}

.chat-app__bubble .chat-emoji,
.chat-bubble .chat-emoji,
[data-popup-text] .chat-emoji,
.popup-chat-text .chat-emoji,
.chat-text .chat-emoji {
    font-size: calc(1em + 8px);
    line-height: 1;
    vertical-align: -0.08em;
}

.page-chat .chat-app__bubble {
    font-family: "Noto Sans KR", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.chat-app__composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 0.5px solid #1e1e1e;
    background: #111;
    flex-shrink: 0;
    position: relative;
    z-index: 20;
}

.chat-app__input {
    flex: 1;
    background: #1a1a1a;
    border: 0.5px solid #2a2a2a;
    border-radius: 20px;
    padding: 10px 14px;
    color: #f0f0f0;
    font-size: 15px;
    resize: none;
    max-height: 100px;
    outline: none;
    line-height: 1.4;
    min-width: 0;
    overflow-y: auto;
    white-space: pre-wrap;
    font-family: inherit;
    touch-action: manipulation;
}

.chat-app__input::placeholder {
    color: #666666;
}

.chat-app__input:focus {
    outline: none;
    border-color: #333333;
}

.chat-app__send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e53e3e;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.chat-app__send:hover {
    background: #ff5252;
}

.app-page-wrap {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.wod-group-grid--two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-card-gap);
}

.page-challenge .wod-group-grid[data-challenge-grid] {
    grid-template-columns: 1fr !important;
}

/* Challenge list page */
.page-challenge .page-header h1 {
    font-size: 1.35rem;
}

.page-challenge .challenge-list-section {
    margin-bottom: var(--space-section);
}

.page-challenge .challenge-list-section--past {
    margin-top: var(--space-section);
}

.page-challenge .wod-date-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--space-card-gap);
    font-family: var(--font-body);
    font-weight: 400;
}

.page-challenge .wod-date-divider-line {
    flex: 1;
    height: 0.5px;
    background: #222222;
}

.page-challenge .wod-date-divider-text {
    flex-shrink: 0;
    font-size: 13px;
    color: #555555;
    white-space: nowrap;
}

.page-challenge .challenge-list-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px;
    align-items: stretch;
}

.page-challenge .challenge-card:hover {
    border-color: #333;
}

.page-challenge .challenge-card-week {
    margin: 0 0 4px;
    padding-right: 48px;
    font-size: 13px;
    color: #555555;
    font-weight: 600;
}

.page-challenge .challenge-card-meta {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: #888888;
    word-break: break-word;
}

.page-challenge .challenge-list-empty {
    margin: 0;
    font-size: 15px;
    color: #555555;
    padding: var(--card-padding);
    background: #111111;
    border: 0.5px solid #2a2a2a;
    border-radius: 10px;
}

.page-challenge #past-challenge-pagination {
    margin-top: var(--space-section);
}

.page-challenge .list-page-btn {
    font-size: 1.1rem;
}

.wod-date-group-title--active {
    color: var(--gold);
}

.challenge-section--past {
    margin-top: var(--space-section);
    padding-top: var(--space-section);
    border-top: 0.5px solid var(--border-section);
}

.challenge-section--active + .challenge-section--past {
    margin-top: var(--space-section);
}

.ds-list-card {
    margin-bottom: 0;
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ds-list-card-head,
.ds-list-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.ds-list-card-date {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-hint);
    font-weight: 600;
}

.ds-list-card-title {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    font-family: var(--font-body);
}

.wod-list-description--clamp {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

.record-count-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.38rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.3;
    background: var(--bg-section);
    color: var(--text-muted);
    border: 0.5px solid var(--border);
}

.challenge-list-card .ds-list-card-foot {
    margin-top: 0.15rem;
    padding-top: 0.35rem;
    border-top: 0.5px solid var(--border-section);
}

.ds-list-card--past {
    opacity: 0.88;
}

.ds-list-card--past .ds-list-card-title {
    color: var(--text-muted);
}

.empty-state--compact {
    padding: var(--card-padding);
    margin-bottom: 0;
}

.empty-inline {
    font-size: 0.94rem;
    padding: var(--card-padding);
    background: var(--bg-section);
    border: 0.5px solid var(--border);
    border-radius: var(--radius);
}

.profile-card--compact {
    gap: 0.35rem;
    margin-bottom: var(--space-section);
    padding: var(--card-padding);
}

.profile-card--compact .profile-info {
    gap: 0.5rem;
    font-size: 0.94rem;
    line-height: 1.35;
}

.profile-card--compact .profile-label {
    min-width: 3.5rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.profile-card--compact .profile-password-wrap {
    margin-top: 0.25rem;
    padding-top: 0.35rem;
    border-top: 0.5px solid var(--border-section);
}

/* Mypage redesign */
.mp-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 80px;
}

.page-mypage .mp-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 80px;
}

.mp-card {
    margin-bottom: 0 !important;
}

.myroom-card {
    background: #111;
    border-radius: 14px;
    border: 0.5px solid #2a2a2a;
    overflow: hidden;
    margin-bottom: 12px;
}

.myroom-stage {
    background: linear-gradient(180deg, #080812 0%, #0f0f1a 100%);
    height: 240px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 32px;
    padding-bottom: 20px;
}

.myroom-stage-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 60px;
    background: radial-gradient(ellipse, #e53e3e18 0%, transparent 70%);
    pointer-events: none;
}

.myroom-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 16px;
    background: #0f0f1a;
    border-top: 0.5px solid #1a1a2a;
    pointer-events: none;
}

.myroom-char-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.myroom-char-svg {
    filter: drop-shadow(0 0 12px #6366f144);
}

.myroom-char-label {
    color: #333;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.myroom-weapon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.myroom-weapon-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 8px #e53e3e44);
}

.myroom-weapon-img.rusty {
    filter: sepia(0.9) saturate(0.3) brightness(0.7) drop-shadow(0 0 8px #e53e3e44);
}

.myroom-weapon-label {
    color: #333;
    font-size: 11px;
    font-weight: 700;
}

.myroom-identity {
    padding: 12px 16px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.myroom-name {
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    margin-bottom: 4px;
}

.myroom-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1a0800;
    border: 0.5px solid #f97316;
    border-radius: 6px;
    padding: 3px 8px;
    color: #f97316;
    font-size: 13px;
    font-weight: 700;
}

.myroom-title-empty {
    color: #333;
    font-size: 13px;
    padding: 3px 0;
}

.myroom-race-badge {
    background: #12102a;
    border: 0.5px solid #6366f1;
    border-radius: 20px;
    padding: 5px 12px;
    color: #818cf8;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.myroom-rusty-hint {
    margin: 0 16px 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 0.5px solid #f6ad0044;
    background: #1a1a1a;
    color: #f6ad00;
    font-size: 13px;
    line-height: 1.5;
}

.myroom-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 0.5px solid #1a1a1a;
    border-bottom: 0.5px solid #1a1a1a;
}

.myroom-stat {
    padding: 10px;
    text-align: center;
    border-right: 0.5px solid #1a1a1a;
}

.myroom-stat:last-child {
    border-right: none;
}

.myroom-stat-val {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.myroom-stat-val.red {
    color: #e53e3e;
}

.myroom-stat-val.gold {
    color: #f59e0b;
}

.myroom-stat-label {
    font-size: 11px;
    color: #555;
    margin-top: 2px;
}

.myroom-weapon-bar {
    padding: 10px 16px;
}

.myroom-weapon-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.myroom-weapon-name {
    color: #aaa;
    font-size: 13px;
    font-weight: 700;
}

.myroom-weapon-next {
    color: #555;
    font-size: 11px;
    text-align: right;
}

.myroom-bar-bg {
    height: 4px;
    background: #1a1a1a;
    border-radius: 2px;
    overflow: hidden;
}

.myroom-bar-fill {
    height: 4px;
    background: linear-gradient(90deg, #e53e3e, #f97316);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.myroom-actions {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px;
    padding: 10px 16px 14px;
}

.myroom-hunt-btn {
    background: #e53e3e;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.myroom-beta {
    background: #ffffff33;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 3px;
}

.myroom-sm-btn {
    background: #1a1a1a;
    border: 0.5px solid #2a2a2a;
    border-radius: 10px;
    padding: 10px;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.myroom-sm-btn:active,
.myroom-hunt-btn:active {
    opacity: 0.92;
}

.myroom-sm-btn:active {
    background: #222;
}

@media (max-width: 400px) {
    .myroom-stage {
        gap: 20px;
        height: 240px;
    }

    .myroom-char-svg {
        width: 58px;
        height: 88px;
    }

    .myroom-weapon-img {
        width: 68px;
        height: 68px;
    }
}

.page-mypage .mp-card {
    margin-bottom: 0 !important;
}

.mp-profile {
    background: #161616 !important;
    border-radius: 12px !important;
    border: 0.5px solid #222 !important;
    padding: 14px !important;
}

.page-mypage .mp-profile {
    background: #161616 !important;
    border-radius: 12px !important;
    border: 0.5px solid #222 !important;
    padding: 14px !important;
}

.page-mypage .mp-gym {
    padding: 0;
    overflow: hidden;
}

.mp-profile-top,
.page-mypage .mp-profile-top {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
}

.page-mypage .mp-profile-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.page-mypage .mp-profile-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mp-profile-name,
.page-mypage .mp-profile-name {
    font-size: 17px !important;
    font-weight: 500 !important;
    color: #f0f0f0 !important;
    line-height: 1.2;
    white-space: nowrap;
}

.page-mypage .mp-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    background: #e53e3e18;
    color: #e53e3e;
    border: 0.5px solid #e53e3e44;
}

.mp-profile-joined,
.page-mypage .mp-profile-joined {
    font-size: 13px !important;
    color: #444 !important;
    margin-left: auto !important;
    line-height: 1.2;
    white-space: nowrap;
}

.mp-profile-actions,
.page-mypage .mp-profile-actions {
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 0;
}

.mp-btn,
.page-mypage .mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer !important;
    white-space: nowrap;
    border: 0.5px solid #2a2a2a !important;
    background: #1a1a1a !important;
    color: #888 !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
}

.page-mypage .mp-btn--muted {
    background: #1a1a1a;
    border-color: #2a2a2a;
    color: #888;
}

.mp-btn--logout,
.page-mypage .mp-btn--logout {
    background: #e53e3e22 !important;
    border-color: #e53e3e44 !important;
    color: #e53e3e !important;
}

.page-mypage .mp-btn--primary {
    background: #e53e3e;
    border-color: #e53e3e;
    color: #fff;
}

.page-mypage .mp-btn.is-open,
.page-mypage .mp-btn--muted.is-open {
    color: #e53e3e;
    border-color: #e53e3e44;
}

.page-mypage .mp-slide-panel,
.page-mypage .mp-password-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.28s ease, opacity 0.2s ease, margin-top 0.28s ease;
}

/* 닉네임 변경 패널 — 기본: 숨김 */
.page-mypage .mp-nickname-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    display: block !important;
    pointer-events: none;
}

/* 닉네임 변경 패널 — 열림 */
.page-mypage .mp-nickname-panel.is-open {
    max-height: 400px;
    opacity: 1;
    pointer-events: auto;
}

.page-mypage .mp-slide-panel.is-open,
.page-mypage .mp-password-panel.is-open {
    opacity: 1;
    margin-top: 10px;
    overflow: hidden;
    pointer-events: auto;
}

.page-mypage .mp-password-panel.is-open {
    max-height: 340px;
}

.page-mypage .mp-slide-panel:not(.is-open),
.page-mypage .mp-password-panel:not(.is-open) {
    pointer-events: none;
}

.page-mypage .mp-slide-panel form,
.page-mypage .mp-password-panel form,
.page-mypage .mp-nickname-panel form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-mypage .mp-nickname-warning {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #f6ad0018;
    border: 1px solid #f6ad00;
    color: #f6ad00;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.page-mypage .mp-password-field input[readonly] {
    color: #888888;
    cursor: default;
}

.page-mypage .mp-password-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-mypage .mp-password-field label {
    font-size: 11px;
    color: #888888;
    font-weight: 600;
}

.page-mypage .mp-nickname-panel .mp-password-field label {
    font-size: 15px;
}

.page-mypage .mp-password-field input {
    padding: 7px 10px;
    background: #111111;
    border: 0.5px solid #2a2a2a;
    border-radius: 6px;
    color: #ffffff;
    font-size: 13px;
    font-family: inherit;
}

.page-mypage .mp-weapon.weapon-card {
    padding: 12px;
    margin-bottom: 0;
    background: #161616;
    border: 0.5px solid #2a2a2a;
    border-radius: 10px;
    box-shadow: none;
    text-align: center;
}

.page-mypage .mp-weapon .weapon-section-top {
    margin-bottom: 0;
    text-align: left;
}

.page-mypage .mp-weapon .weapon-grow-title {
    font-size: calc(13px * 1.5);
    font-weight: 700;
    color: #ffffff;
    font-family: inherit;
    letter-spacing: normal;
}

.page-mypage .mp-weapon .weapon-stages-open-btn {
    font-size: 15px;
    padding: 6px 12px;
    min-height: 0;
    line-height: 1.2;
    border-color: #333333;
    color: #aaaaaa;
    background: #1a1a1a;
}

.page-mypage .mp-weapon .weapon-my-weapon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: calc(12px * 2);
    font-weight: 600;
    color: #ffffff;
    text-shadow:
        0 0 8px rgba(220, 50, 50, 0.8),
        0 0 20px rgba(220, 50, 50, 0.5),
        0 0 40px rgba(220, 50, 50, 0.3);
}

.page-mypage .mp-weapon .weapon-my-weapon-icon,
.page-mypage .mp-weapon .weapon-my-weapon-text {
    font-size: inherit;
    line-height: 1;
}

.page-mypage .mp-weapon .weapon-display {
    min-height: 150px;
    margin: 8px 0 0;
}

.page-mypage .mp-weapon .weapon-image {
    width: 150px;
    height: 150px;
}

.page-mypage .mp-weapon .weapon-name {
    margin: 8px 0 0;
    font-size: calc(16px * 1.5);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: normal;
}

.page-mypage .mp-weapon .weapon-total {
    margin: 6px 0 10px;
    font-size: 13px;
    color: #888888;
}

.page-mypage .mp-weapon .weapon-progress-wrap {
    max-width: 100%;
    margin: 0;
}

.page-mypage .mp-weapon .weapon-progress-bar {
    height: 6px;
    border-radius: 4px;
    background: #222222;
    border: none;
}

.page-mypage .mp-weapon .weapon-progress-fill {
    border-radius: 4px;
    background: #e53e3e;
    box-shadow: none;
}

.page-mypage .mp-weapon .weapon-progress-text {
    margin: 6px 0 0;
    font-size: 13px;
    color: #888888;
}

.page-mypage .mp-weapon .weapon-progress-text strong {
    color: #ffffff;
    font-weight: 600;
}

.mp-gym-link,
.page-mypage .mp-gym-link {
    background: #161616 !important;
    border-radius: 12px !important;
    border: 0.5px solid #222 !important;
    padding: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
    color: #ffffff;
    transition: border-color 0.15s, background 0.15s;
}

.page-mypage .mp-gym-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mp-gym-title,
.page-mypage .mp-gym-link .mp-gym-title {
    font-size: 17px !important;
    font-weight: 500 !important;
    color: #f0f0f0 !important;
}

.mp-gym-hint,
.page-mypage .mp-gym-hint {
    margin: 0;
    font-size: 13px !important;
    color: #555 !important;
    line-height: 1.35;
    white-space: normal;
}

.page-mypage .mp-gym-link:hover {
    background: #1a1a1a;
    border-color: #333333;
}

.mp-gym-link-arrow,
.page-mypage .mp-gym-link-arrow {
    font-size: 22px !important;
    color: #444 !important;
}

.page-gym .gym-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-gym .gym-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
}

.page-gym .gym-back {
    font-size: 13px;
    font-weight: 600;
    color: #888888;
    text-decoration: none;
    white-space: nowrap;
}

.page-gym .gym-back:hover {
    color: #aaaaaa;
}

.page-gym .gym-title {
    margin: 0;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    font-family: inherit;
    letter-spacing: normal;
}

.page-gym .gym-add-btn {
    padding: 6px 10px;
    border: 0.5px solid #e53e3e44;
    border-radius: 6px;
    background: #e53e3e18;
    color: #e53e3e;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    min-height: 0;
}

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

.page-gym .gym-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 24px 12px;
    text-align: center;
    font-size: 13px;
    color: #666666;
}

.page-gym .gym-exercise-card {
    display: flex;
    flex-direction: column;
    background: #161616;
    border-radius: 10px;
    border: 0.5px solid #2a2a2a;
    overflow: hidden;
}

.page-gym .gym-exercise-card-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    flex: 1 1 auto;
    padding: 10px 8px 6px;
    border: none;
    background: transparent;
    color: inherit;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
}

.page-gym .gym-exercise-card-btn--text {
    min-height: 72px;
    justify-content: center;
    padding: 12px 8px 6px;
}

.page-gym .gym-exercise-pictogram {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.page-gym .gym-exercise-card-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px 8px;
    margin-top: auto;
}

.page-gym .gym-exercise-action {
    padding: 3px 8px;
    border: 0.5px solid #333333;
    border-radius: 4px;
    background: #1a1a1a;
    color: #aaaaaa;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    font-family: inherit;
    min-height: 0;
}

.page-gym .gym-exercise-action--danger {
    color: #e53e3e;
    border-color: #e53e3e44;
    background: #e53e3e18;
}

.page-gym .gym-exercise-name {
    display: block;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.25;
    word-break: keep-all;
}

.page-gym .gym-exercise-pr {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #555555;
    line-height: 1.2;
}

.page-gym .gym-exercise-pr.has-pr {
    font-size: 13px;
    font-weight: 700;
    color: #e53e3e;
}

.page-gym .personal-new-pr-badge {
    font-size: 11px;
    margin-top: 2px;
}

.page-mypage .mp-gym-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 0.5px solid #222222;
}

.page-mypage .mp-gym-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    font-family: inherit;
    letter-spacing: normal;
}

.page-mypage .mp-gym-toggle {
    padding: 3px 8px;
    border: 0.5px solid #333333;
    border-radius: 6px;
    background: #1a1a1a;
    color: #aaaaaa;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    font-family: inherit;
    min-height: 0;
}

.page-mypage .personal-gym-card.is-collapsed .mp-gym-header {
    border-bottom: none;
}

.page-mypage .personal-gym-body-inner {
    padding: 10px 12px;
    border-top: none;
}

.page-mypage .personal-exercise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.page-mypage .personal-exercise-card {
    background: #111111;
    border-radius: 8px;
    border: 0.5px solid #2a2a2a;
    overflow: hidden;
}

.page-mypage .personal-exercise-card-body {
    width: 100%;
    display: block;
    padding: 8px 10px 4px;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.page-mypage .mp-exercise-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

.page-mypage .personal-exercise-name {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-mypage .personal-exercise-pr {
    font-size: 13px;
    font-weight: 600;
    color: #555555;
    flex-shrink: 0;
}

.page-mypage .personal-exercise-pr.has-pr {
    color: #e53e3e;
}

.page-mypage .personal-new-pr-badge {
    display: inline-block;
    margin: 2px 10px 0;
    font-size: 11px;
}

.page-mypage .personal-exercise-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 8px;
}

.page-mypage .mp-exercise-action {
    padding: 2px 6px;
    border: 0.5px solid #333333;
    border-radius: 4px;
    background: #1a1a1a;
    color: #aaaaaa;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    font-family: inherit;
    min-height: 0;
}

.page-mypage .mp-exercise-action--danger {
    color: #e53e3e;
    border-color: #e53e3e44;
    background: #e53e3e18;
}

.page-mypage .mp-gym-add-btn {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0.5px dashed #333333;
    border-radius: 8px;
    background: #111111;
    color: #aaaaaa;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    min-height: 0;
}

.page-mypage .mp-records {
    background: #161616;
    border-radius: 12px;
    border: 0.5px solid #222;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-mypage .mp-records-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 10px;
}

.page-mypage .mp-records-title {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: #f0f0f0;
    font-family: inherit;
    letter-spacing: normal;
}

.page-mypage .mp-records-tabs {
    display: flex;
    gap: 6px;
}

.mp-tab-btn,
.page-mypage .mp-tab-btn {
    font-size: 13px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    background: #1a1a1a !important;
    border: 0.5px solid #222 !important;
    color: #555 !important;
    cursor: pointer !important;
    font-family: inherit;
    min-height: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.mp-tab-btn.is-active,
.page-mypage .mp-tab-btn.is-active {
    background: #e53e3e !important;
    border-color: #e53e3e !important;
    color: #fff !important;
}

.page-mypage .mp-records-search {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.page-mypage .mp-search-input {
    width: 100%;
    background: #111;
    border: 0.5px solid #1e1e1e;
    border-radius: 8px;
    padding: 8px 12px;
    color: #f0f0f0;
    font-size: 13px;
    margin-bottom: 6px;
    font-family: inherit;
    box-sizing: border-box;
}

.page-mypage .mp-search-input::placeholder {
    color: #555555;
}

.page-mypage .mp-search-input:focus {
    outline: none;
    border-color: #444444;
}

.page-mypage .mp-search-count {
    margin: 4px 0 0;
    font-size: 11px;
    color: #666666;
}

.page-mypage .mp-date-label {
    font-size: 13px;
    font-weight: 600;
    color: #e53e3e;
    margin: 0 0 6px;
    font-family: inherit;
    letter-spacing: normal;
}

.page-mypage .mypage-date-section {
    margin-bottom: 8px;
}

.page-mypage .mypage-date-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    overflow-x: hidden;
}

.page-mypage .mp-record-card {
    background: #111111;
    border: 0.5px solid #2a2a2a;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 0;
}

.page-mypage .mp-record-kind {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #888888;
    margin-bottom: 2px;
}

.page-mypage .mypage-wod-link h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.page-mypage .mypage-wod-description-line {
    margin: 4px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888;
    font-size: 15px;
}

.page-mypage .mypage-comment-content {
    font-size: 15px;
    margin: 6px 0 0;
    color: #aaaaaa;
}

.page-mypage .mypage-record-score {
    margin-top: 6px;
    font-size: 11px;
}

.page-mypage .mypage-record-score .record-value-text {
    font-size: 15px;
}

.page-mypage .mypage-record-score .record-private-label {
    font-size: 13px;
}

.page-mypage .mypage-card-actions {
    margin-top: 8px;
    gap: 6px;
}

.page-mypage .mp-record-link-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    border: 0.5px solid #333333;
    background: #1a1a1a;
    color: #aaaaaa;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.page-mypage .mp-records-empty {
    text-align: center;
    padding: 24px 0;
    color: #333;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.page-mypage .mp-records-empty p {
    margin: 0;
    font-size: 15px;
    color: #333;
}

.page-mypage .mp-records-empty .mp-btn--primary {
    background: #e53e3e;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 11px 24px;
    cursor: pointer;
}

.page-mypage .mp-no-results {
    margin: 0;
    font-size: 13px;
    color: #666666;
    text-align: center;
}

.page-mypage .mypage-pagination {
    margin-top: 4px;
}

.page-mypage .mypage-records-section {
    margin-top: 0;
}

.page-mypage .mypage-records-header {
    margin-bottom: 0;
}

.page-mypage .mypage-records-header h2 {
    font-size: 1.06rem;
    margin: 0;
}

.page-mypage .mypage-search {
    margin-bottom: 0;
    padding: 0;
}

.page-mypage .mypage-date-section {
    margin-bottom: 8px;
}

.page-mypage .mypage-date-group {
    font-size: 0.94rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.page-mypage .mypage-comment-card {
    margin-bottom: 0;
    padding: 12px 12px;
}

.page-mypage .mypage-wod-link h4 {
    font-size: 17px;
}

@media (max-width: 768px) {
    .page-mypage .mp-gym-title,
    .page-mypage .mp-records-title {
        font-size: calc(12px * 1.5);
    }

    .page-mypage .mp-gym-hint {
        font-size: 15px;
    }

    .page-mypage .mypage-wod-link h4 {
        font-size: 17px;
    }

    .page-mypage .mypage-wod-description-line {
        font-size: 13px;
    }

    .page-mypage .mypage-record-score .record-value-text {
        font-size: 15px;
    }

    .page-mypage .mypage-record-score .record-private-label {
        font-size: 13px;
    }

    .page-mypage .mypage-comment-content {
        font-size: 13px;
    }

    .page-mypage .mp-record-link-btn {
        font-size: 15px;
    }

    .page-mypage .mp-profile-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.page-admin .section.card {
    padding: var(--card-padding);
    margin-bottom: var(--space-section);
}

.page-admin .section.card h2,
.page-admin .section > h2 {
    font-size: 1.06rem;
    margin-bottom: var(--space-card-gap);
}

.page-admin .admin-table th,
.page-admin .admin-table td {
    padding: 0.45rem 0.55rem;
    border-bottom: 0.5px solid var(--border-section);
    font-size: 0.94rem;
}

.page-admin .admin-announce-list {
    gap: var(--space-card-gap);
    margin-top: var(--space-card-gap);
}

/* Admin dashboard redesign */
.admin-page {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-page-header {
    margin-bottom: 4px;
}

.admin-page-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
}

.admin-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 4px;
}

.admin-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    text-align: center;
}

.admin-action-btn--wod {
    background: #e53e3e;
    color: #ffffff;
}

.admin-action-btn--wod:hover {
    background: #c53030;
    color: #ffffff;
}

.admin-action-btn--challenge {
    background: #f6ad00;
    color: #111111;
}

.admin-action-btn--challenge:hover {
    background: #dd9c00;
    color: #111111;
}

.admin-card {
    background: #161616;
    border-radius: 10px;
    border: 0.5px solid #2a2a2a;
    overflow: hidden;
}

.admin-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.08);
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.admin-section-toggle-label,
.admin-section-toggle-icon {
    pointer-events: none;
}

.admin-section-toggle-icon {
    color: #888888;
    font-size: 11px;
    transition: transform 0.2s ease;
}

.admin-section-toggle.is-open .admin-section-toggle-icon {
    transform: rotate(180deg);
}

.admin-section-body {
    padding: 0 12px 12px;
    border-top: 0.5px solid #1a1a1a;
    transition: none;
}

.member-sort-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.admin-announce-empty {
    margin: 8px 0 0;
    font-size: 13px;
}

.page-admin .admin-announce-section .admin-announce-item {
    background: #1a1a1a;
    border-color: #2a2a2a;
}

.admin-banner-section {
    margin-top: var(--space-card-gap);
}

.admin-banner-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.admin-banner-tab {
    flex: 1 1 0;
    padding: 8px 10px;
    border: 0.5px solid #333333;
    border-radius: 8px;
    background: #1a1a1a;
    color: #aaaaaa;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.2;
}

.admin-banner-tab.is-active {
    border-color: #e53e3e;
    background: rgba(229, 62, 62, 0.15);
    color: #ffffff;
}

.admin-banner-tab-panel {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 0.5px solid #2a2a2a;
}

.admin-banner-tab-panel[hidden] {
    display: none;
}

.admin-banner-create-form,
.admin-banner-auto-form {
    margin: 0;
}

.admin-banner-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #cccccc;
}

.admin-banner-type-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-admin .admin-banner-auto-form .banner-type-btn {
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px 16px;
    border: 0.5px solid #333333;
    border-radius: 8px;
    background: #1a1a1a;
    color: #aaaaaa;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.page-admin .admin-banner-auto-form .banner-type-btn.active[data-type="챌린지"] {
    background: #e53e3e;
    border-color: #e53e3e;
    color: #ffffff;
}

.page-admin .admin-banner-auto-form .banner-type-btn.active[data-type="이벤트"] {
    background: #f6ad00;
    border-color: #f6ad00;
    color: #111111;
}

.page-admin .admin-banner-auto-form .banner-type-btn.active[data-type="공지"] {
    background: #4299e1;
    border-color: #4299e1;
    color: #ffffff;
}

.page-admin .admin-banner-auto-form .banner-type-btn.active[data-type="랭킹"] {
    background: #48bb78;
    border-color: #48bb78;
    color: #111111;
}

.admin-banner-input-large {
    font-size: 17px;
    font-weight: 700;
    padding: 10px 12px;
}

.page-admin .admin-banner-auto-form .form-group--banner-preview {
    display: block;
    width: 100%;
}

.page-admin #banner-preview {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    min-height: 140px;
    box-sizing: border-box;
}

.admin-banner-preview-frame {
    height: auto;
    min-height: 140px;
    border-radius: 14px;
    overflow: hidden;
    background: #111111;
    border: 0.5px solid #2a2a2a;
}

.admin-banner-preview-scale {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.admin-banner-preview-scale .banner-auto {
    min-height: 68px;
    height: 68px;
    padding: 8px 10px;
    gap: 4px;
}

.admin-banner-preview-scale .banner-auto-emoji {
    font-size: 22px;
    right: 10px;
}

.admin-banner-preview-scale .banner-auto-title {
    font-size: 15px;
}

.admin-banner-preview-scale .banner-auto-subtitle {
    font-size: 11px;
    margin-top: 2px;
}

.admin-banner-preview-scale .banner-auto-badge {
    font-size: 8px;
    padding: 2px 6px;
}

.admin-banner-type-tag {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: #cccccc;
    font-size: 8px;
    font-weight: 600;
}

.admin-banner-item--auto .admin-banner-preview-wrap {
    height: 68px;
}

.admin-banner-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-banner-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    padding: 10px;
    background: #1a1a1a;
    border-radius: 8px;
    border: 0.5px solid #2a2a2a;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.admin-banner-preview-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    height: 200px;
    background: #111111;
}

.admin-banner-item--auto .admin-banner-preview-wrap {
    height: 68px;
}

.admin-banner-preview {
    width: 100%;
    max-width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.admin-banner-order {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.admin-banner-inactive-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: #333333;
    color: #aaaaaa;
    font-size: 11px;
    font-weight: 600;
}

.admin-banner-edit-form .form-group {
    margin-bottom: 8px;
}

.admin-banner-active-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 13px;
    color: #cccccc;
}

.admin-banner-item-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-banner-empty {
    margin: 8px 0 0;
    font-size: 13px;
}

@media (max-width: 768px) {
    .page-admin .admin-banner-item {
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    .page-admin .admin-banner-preview-wrap {
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    .page-admin .admin-banner-preview {
        width: 100%;
        max-width: 100%;
        height: 160px;
        object-fit: cover;
    }

    .page-admin .admin-banner-item:not(.admin-banner-item--auto) .admin-banner-preview-wrap {
        height: 160px;
    }
}

@media (max-width: 520px) {
    .admin-banner-item {
        grid-template-columns: 1fr;
    }
}

.admin-members-section {
    padding: 12px;
}

.admin-members-section-wrap .admin-members-section {
    padding: 0;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.admin-stat-card {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 10px 12px;
    border: 0.5px solid #2a2a2a;
}

.admin-stat-label {
    font-size: 13px;
    color: #888;
    margin-bottom: 4px;
}

.admin-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.admin-stat-sub {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
}

.admin-stats-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #888;
    margin: 12px 0 6px;
}

.admin-stats-card {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 10px 12px;
    border: 0.5px solid #2a2a2a;
    margin-bottom: 8px;
}

.admin-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}

.admin-bar-row:last-child {
    margin-bottom: 0;
}

.admin-bar-label {
    width: 64px;
    color: #888;
    text-align: right;
    flex-shrink: 0;
    font-size: 13px;
}

.admin-bar-bg {
    flex: 1;
    height: 8px;
    background: #2a2a2a;
    border-radius: 4px;
    overflow: hidden;
}

.admin-bar-fill {
    height: 8px;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.admin-bar-green {
    background: #1d9e75;
}

.admin-bar-gray {
    background: #555;
}

.admin-bar-blue {
    background: #378add;
}

.admin-bar-val {
    width: 36px;
    color: #888;
    font-size: 13px;
    text-align: right;
    flex-shrink: 0;
}

.admin-rank-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 0.5px solid #2a2a2a;
    font-size: 15px;
}

.admin-rank-row:last-child {
    border-bottom: none;
}

.admin-rank-num {
    font-size: 13px;
    color: #555;
    width: 16px;
}

.admin-rank-name {
    flex: 1;
    color: #fff;
}

.admin-rank-val {
    color: #f6ad00;
    font-size: 13px;
    font-weight: 700;
}

.admin-stats-body {
    padding: 12px 14px;
}

.stats-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #888;
    margin: 14px 0 8px;
}

.stats-section-title:first-child {
    margin-top: 0;
}

.stats-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.stats-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.stats-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.stats-card {
    background: #1a1a1a;
    border-radius: 10px;
    padding: 10px;
    border: 0.5px solid #2a2a2a;
    text-align: center;
}

.stats-val {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.stats-val--accent {
    color: #e53e3e;
}

.stats-val--warn {
    color: #f59e0b;
}

.stats-val--good {
    color: #10b981;
}

.stats-val--mobile {
    color: #818cf8;
}

.stats-label {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    font-weight: 700;
}

.stats-sub {
    font-size: 11px;
    color: #444;
    margin-top: 2px;
}

.stats-chart-card {
    background: #1a1a1a;
    border-radius: 10px;
    padding: 12px;
    border: 0.5px solid #2a2a2a;
    margin-bottom: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.stats-date-range {
    margin-bottom: 12px;
}

.stats-dr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.stats-dr-input {
    flex: 1;
    background: var(--bg-card);
    border: 0.5px solid #333;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    color: #fff;
    outline: none;
}

.stats-dr-search-btn {
    padding: 7px 14px;
    background: #e53e3e;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.stats-report-btn {
    width: 100%;
    margin-top: 10px;
    padding: 11px;
    background: #1a1a1a;
    border: 0.5px solid #e53e3e;
    border-radius: 8px;
    color: #e53e3e;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.stats-report-btn:active {
    opacity: 0.8;
}

.stats-period-btns {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.stats-period-btn {
    padding: 4px 12px;
    border-radius: 20px;
    border: 0.5px solid #333;
    background: #1a1a1a;
    color: #666;
    font-size: 13px;
    cursor: pointer;
}

.stats-period-btn.active {
    border-color: #e53e3e;
    color: #e53e3e;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 100px;
    min-width: 0;
}

.bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-width: 0;
}

.bar-fill {
    width: 100%;
    background: #e53e3e;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.3s ease;
}

.bar-val {
    font-size: 11px;
    color: #888;
}

.bar-date {
    font-size: 8px;
    color: #555;
}

.hour-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 80px;
    min-width: 280px;
}

.hour-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
}

.hour-fill {
    width: 100%;
    background: #818cf8;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}

.hour-label {
    font-size: 7px;
    color: #555;
    white-space: nowrap;
}

.weekday-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
}

.weekday-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-width: 0;
}

.weekday-fill {
    width: 100%;
    background: #f59e0b;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

.weekday-val {
    font-size: 11px;
    color: #888;
}

.weekday-label {
    font-size: 11px;
    color: #555;
    font-weight: 700;
}

.stats-bar-bg {
    height: 4px;
    background: #111;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}

.stats-bar-fill {
    height: 4px;
    border-radius: 2px;
}

.stats-bar-fill--mobile {
    background: #818cf8;
}

.stats-bar-fill--pc {
    background: #555;
}

.stats-ga-notice {
    background: #1a1a2a;
    border: 0.5px solid #2a2a4a;
    border-radius: 8px;
    padding: 10px 12px;
    color: #818cf8;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 10px;
    text-align: center;
}

@media (max-width: 768px) {
    .stats-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .stats-card {
        padding: 8px 6px;
    }

    .stats-val {
        font-size: 17px;
    }

    .stats-label {
        font-size: 11px;
    }
}

.admin-members-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.admin-members-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

.admin-sort-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-sort-btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: 0.5px solid #333333;
    background: #1a1a1a;
    color: #aaaaaa;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    font-family: inherit;
}

.admin-sort-btn:hover {
    color: #ffffff;
    border-color: #444444;
}

.admin-sort-btn.is-active {
    color: #e53e3e;
    border-color: #e53e3e66;
    background: #e53e3e14;
}

.admin-member-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-member-card {
    background: #161616;
    border-radius: 10px;
    border: 0.5px solid #2a2a2a;
    overflow: hidden;
}

.admin-member-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 8px;
    flex-wrap: wrap;
}

.admin-member-icon,
.admin-member-icon-placeholder {
    flex-shrink: 0;
}

.admin-member-icon-placeholder {
    display: inline-block;
    background: #222222;
}

.admin-member-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.admin-member-nickname {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.admin-member-username {
    font-size: 12px;
    color: #555555;
    line-height: 1.2;
}

.admin-role-badge,
.admin-status-badge {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.admin-role-badge--admin {
    background: #e53e3e;
    color: #ffffff;
}

.admin-role-badge--member,
.admin-role-badge--coach,
.admin-role-badge--owner {
    background: #333333;
    color: #ffffff;
}

.admin-status-badge--ok {
    background: #48bb7822;
    color: #48bb78;
    border: 0.5px solid #48bb7844;
}

.admin-status-badge--bad {
    background: #e53e3e22;
    color: #e53e3e;
    border: 0.5px solid #e53e3e44;
}

.admin-member-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px 10px;
    border-top: 0.5px solid #1a1a1a;
}

.admin-member-meta-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.admin-member-meta-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-member-meta {
    font-size: 12px;
    color: #555555;
    line-height: 1.4;
    white-space: nowrap;
}

.admin-member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.admin-member-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: 0.5px solid #333333;
    background: #1a1a1a;
    color: #aaaaaa;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    font-family: inherit;
}

.admin-member-btn:hover {
    color: #ffffff;
    border-color: #444444;
}

.admin-member-btn.is-active,
.admin-member-btn--edit.is-active {
    color: #e53e3e;
    border-color: #e53e3e66;
}

.admin-member-btn--kick {
    color: #e53e3e;
    border-color: #e53e3e44;
    background: #e53e3e14;
}

.admin-member-btn--kick:hover {
    background: #e53e3e28;
    color: #ffffff;
}

.admin-member-btn--save {
    color: #ffffff;
    background: #e53e3e;
    border-color: #e53e3e;
}

.admin-member-btn--outline {
    color: #aaaaaa;
}

.admin-member-edit-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 12px 12px;
    border-top: 0.5px solid #1a1a1a;
    background: #141414;
}

.admin-member-edit-panel[hidden] {
    display: none !important;
}

.admin-role-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.admin-role-form-label {
    font-size: 11px;
    color: #888888;
}

.page-admin .admin-role-select {
    min-width: 6.5rem;
    padding: 4px 8px;
    border-radius: 6px;
    border: 0.5px solid #333333;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 13px;
}

.admin-member-password-block {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 0.5px solid #222222;
}

.admin-member-password-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.page-admin .admin-password-input {
    flex: 1 1 140px;
    min-width: 0;
    padding: 6px 10px;
    border-radius: 6px;
    border: 0.5px solid #333333;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 13px;
}

.admin-password-msg.is-error {
    color: #e53e3e;
}

.admin-password-msg.is-success {
    color: #48bb78;
}

@media (max-width: 520px) {
    .admin-members-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-member-top {
        align-items: flex-start;
    }

    .admin-member-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-member-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
}

@media (min-width: 769px) {
    .page-wod-list .wod-group-grid--two-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* WOD detail page */
.page-wod-detail {
    padding-top: 0.5rem;
    padding-left: 16px;
    padding-right: 16px;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
}

.page-challenge-detail {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
}

.page-wod-detail .wod-detail-page-header {
    margin-bottom: var(--space-section);
}

.page-wod-detail .wod-detail-info-card {
    background: #161616;
    border: 0.5px solid #2a2a2a;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: var(--space-section);
}

.page-wod-detail .wod-detail-info-card--clickable {
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.page-wod-detail .wod-detail-info-card--clickable:hover,
.page-wod-detail .wod-detail-info-card--clickable:focus-visible {
    border-color: #444444;
    background: #1a1a1a;
    outline: none;
}

.page-wod-detail .wod-detail-date {
    display: block;
    font-size: 11px;
    color: #e53e3e;
    font-weight: 600;
    margin-bottom: 4px;
}

.page-wod-detail .wod-detail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.page-wod-detail .wod-detail-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    font-family: var(--font-body);
}

.page-wod-detail .wod-detail-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: #ffffff;
    font-weight: 500;
    word-break: break-word;
}

.wod-detail-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.8);
}

.wod-detail-popup-overlay[hidden] {
    display: none !important;
}

.wod-detail-popup {
    position: relative;
    width: 100%;
    max-width: 320px;
    padding: 20px;
    background: #161616;
    border-radius: 16px;
    border: 0.5px solid #2a2a2a;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.wod-detail-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #aaaaaa;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.wod-detail-popup-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.wod-detail-popup-title {
    margin: 0 36px 12px 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    font-family: var(--font-body);
}

.wod-detail-popup-body {
    margin: 0;
    font-size: 15px;
    line-height: 2;
    color: #ffffff;
    white-space: pre-wrap;
    word-break: break-word;
}

body.wod-detail-popup-open {
    overflow: hidden;
}

.page-wod-detail .wod-detail-records-section {
    margin-bottom: var(--space-section);
}

.page-wod-detail .wod-detail-records-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: var(--space-card-gap);
}

.page-wod-detail .wod-detail-records-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-body);
}

.page-wod-detail .wod-detail-record-link {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: #e53e3e;
    text-decoration: none;
}

.page-wod-detail .wod-detail-record-link:hover {
    color: #ff5252;
}

.page-wod-detail .wod-detail-records-card {
    background: #161616;
    border: 0.5px solid #2a2a2a;
    border-radius: 10px;
    overflow: visible;
    margin-bottom: var(--space-card-gap);
}

.page-wod-detail .wod-detail-records-card:last-child {
    margin-bottom: 0;
}

.page-wod-detail .wod-detail-records-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: #111111;
    border-bottom: 0.5px solid #222222;
}

.page-wod-detail .wod-detail-records-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.page-wod-detail .wod-detail-records-label--rx {
    color: #e53e3e;
}

.page-wod-detail .wod-detail-records-label--scale {
    color: #888888;
}

.page-wod-detail .wod-detail-records-count {
    font-size: 11px;
    color: #555555;
    font-weight: 600;
}

.page-wod-detail .wod-detail-records-list {
    display: flex;
    flex-direction: column;
}

.page-wod-detail .wod-record-row {
    position: relative;
    overflow: hidden;
    padding: 8px 10px;
    border-bottom: 0.5px solid #1a1a1a;
    background: #161616;
}

.page-wod-detail .wod-record-row.tier-dosa {
    background: linear-gradient(to right, #161616, #1e1a00);
}

.page-wod-detail .wod-record-row.tier-monster {
    background: linear-gradient(to right, #161616, #1e0f0f);
}

.page-wod-detail .wod-record-row.tier-master {
    background: linear-gradient(to right, #161616, #160e22);
}

.page-wod-detail .wod-record-row.tier-veteran {
    background: linear-gradient(to right, #161616, #0c1420);
}

.page-wod-detail .wod-record-row.tier-prospect {
    background: linear-gradient(to right, #161616, #0c160e);
}

.page-wod-detail .wod-record-row.tier-cutie {
    background: linear-gradient(to right, #161616, #161616);
}

.page-wod-detail .wod-record-row:last-child {
    border-bottom: none;
}

.page-wod-detail .wod-record-row-line1 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 28px;
    overflow: visible;
}

.page-wod-detail .wod-record-row-end {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

.page-wod-detail .wod-record-row.record-comment-row,
.page-challenge-detail .wod-record-row.record-comment-row {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.page-wod-detail .record-comment-count,
.page-challenge-detail .record-comment-count {
    font-size: 17px;
    color: #888;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    pointer-events: none;
}

.page-wod-detail .record-comment-count.is-unread,
.page-challenge-detail .record-comment-count.is-unread,
.page-wod-detail .wod-record-row[data-unread='true'] .record-comment-count,
.page-challenge-detail .wod-record-row[data-unread='true'] .record-comment-count {
    color: #e53e3e;
    animation: commentPulse 1.5s ease-in-out infinite;
}

@keyframes commentPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.15);
    }
}

.rank-emoji {
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
}

.page-wod-detail .wod-record-weapon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.page-wod-detail .wod-record-name {
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-wod-detail .wod-record-value-wrap {
    flex-shrink: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    margin-left: 0;
}

.page-wod-detail .wod-record-value {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

.page-wod-detail .wod-record-row--rank-1 .wod-record-value {
    color: #e53e3e;
}

.page-wod-detail .wod-record-unit {
    font-size: 13px;
    color: #888888;
    font-weight: 500;
}

.page-wod-detail .wod-record-private,
.page-challenge-detail .wod-record-private {
    font-size: 15px;
    color: #555555;
    font-style: italic;
}

.page-wod-detail .wod-record-own-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    color: #2b6cb0;
    background: rgba(66, 153, 225, 0.12);
}

.page-wod-detail .wod-record-row--private-other .wod-record-row-line1 {
    justify-content: flex-start;
    gap: 8px;
}

.page-wod-detail .wod-record-private-hint {
    font-size: 14px;
    white-space: nowrap;
}

.page-wod-detail .wod-record-memo {
    margin: 4px 0 0 52px;
    font-size: 15px;
    line-height: 1.35;
    color: #666666;
}

.page-wod-detail .wod-record-row-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    position: relative;
    z-index: 2;
}

.page-wod-detail .wod-record-action-form,
.page-challenge-detail .wod-record-action-form {
    margin: 0;
    padding: 0;
    display: inline-flex;
}

.page-wod-detail .wod-record-action-link,
.page-challenge-detail .wod-record-action-link {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.page-wod-detail .wod-record-action-link--edit,
.page-challenge-detail .wod-record-action-link--edit {
    color: #888888;
}

.page-wod-detail .wod-record-action-link--edit:hover,
.page-wod-detail .wod-record-action-link--edit:focus-visible,
.page-challenge-detail .wod-record-action-link--edit:hover,
.page-challenge-detail .wod-record-action-link--edit:focus-visible {
    color: #cccccc;
    outline: none;
}

.page-wod-detail .wod-record-action-link--delete,
.page-challenge-detail .wod-record-action-link--delete {
    color: #e53e3e;
}

.page-wod-detail .wod-record-action-link--delete:hover,
.page-wod-detail .wod-record-action-link--delete:focus-visible,
.page-challenge-detail .wod-record-action-link--delete:hover,
.page-challenge-detail .wod-record-action-link--delete:focus-visible {
    color: #ff5252;
    outline: none;
}

@media (max-width: 768px) {
    .record-private-option {
        font-size: 1.1rem;
    }

    .record-private-label {
        font-size: 1.25rem;
    }

    .page-wod-detail .wod-record-private,
    .page-challenge-detail .wod-record-private {
        font-size: 15px;
    }

    .page-wod-detail .wod-record-action-link,
    .page-challenge-detail .wod-record-action-link {
        font-size: 17px;
    }
}

.page-wod-detail .wod-detail-tier-watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 38px;
    font-weight: 900;
    font-family: var(--font-body);
    letter-spacing: 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0.15;
}

.page-wod-detail .wod-record-row.tier-dosa .wod-detail-tier-watermark {
    color: #f6ad00;
}

.page-wod-detail .wod-record-row.tier-monster .wod-detail-tier-watermark {
    color: #e53e3e;
}

.page-wod-detail .wod-record-row.tier-master .wod-detail-tier-watermark {
    color: #9f7aea;
}

.page-wod-detail .wod-record-row.tier-veteran .wod-detail-tier-watermark {
    color: #4299e1;
}

.page-wod-detail .wod-record-row.tier-prospect .wod-detail-tier-watermark {
    color: #48bb78;
}

.page-wod-detail .wod-record-row.tier-cutie .wod-detail-tier-watermark {
    color: #888888;
}

.page-wod-detail .wod-detail-records-empty {
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
    color: #555555;
}

.page-wod-detail .wod-detail-form-card {
    background: #161616;
    border: 0.5px solid #2a2a2a;
    border-radius: 10px;
    padding: 10px 12px;
}

.page-wod-detail .wod-detail-info-card,
.page-wod-detail .wod-detail-form-card,
.page-challenge-detail .wod-detail-info-card,
.page-challenge-detail .wod-detail-form-card {
    width: 100%;
    box-sizing: border-box;
}

.page-wod-detail .wod-detail-form-section {
    margin-bottom: 0;
}

.page-wod-detail .wod-detail-form-section .record-submit-btn,
.page-challenge-detail .wod-detail-form-section .record-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.page-challenge-detail .wod-detail-form-section .rx-scale-toggle .toggle-btn.rx-btn.active {
    background: #f6ad00;
    color: #111111;
}

.page-challenge-detail .wod-detail-form-section .record-submit-btn--challenge {
    background: #f6ad00;
    border: 0.5px solid #f6ad0044;
    color: #111111;
}

.page-challenge-detail .wod-detail-form-section .record-submit-btn--challenge:hover {
    background: #ffbd2e;
    color: #111111;
}

/* WOD list page — date grid auto columns */
.wod-date-grid {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wod-grid-1 {
    display: flex;
    flex-direction: column;
    padding: 0 12px;
}

.wod-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 12px;
    align-items: stretch;
}

.wod-grid-2 .wl-card {
    display: flex;
    flex-direction: column;
}

.wod-grid-2 .wod-list-card-footer {
    margin-top: auto;
}

.wod-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 12px;
}

.wod-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 12px;
}

.wod-unrecorded:not(.wod-active) {
    position: relative;
}

.wod-unrecorded:not(.wod-active)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 10px;
    z-index: 1;
    pointer-events: none;
}

.wod-active {
    opacity: 1 !important;
    filter: none !important;
}

.wod-active .wod-unrecorded-dot {
    display: none !important;
}

.wod-unrecorded-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e53e3e;
    z-index: 1;
    animation: unrecDotPulse 1.5s ease-in-out infinite;
}

@keyframes unrecDotPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 #e53e3e66;
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
        box-shadow: 0 0 0 4px #e53e3e00;
    }
}

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

.wl-card {
    background: #161616;
    border-radius: 12px;
    border: 0.5px solid #222;
    padding: 14px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    margin: 0;
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.wod-list-card-v2--active,
.wod-list-card-v2.is-active {
    border: 0.5px solid #2a2a2a;
}

.wod-list-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
    border-top: 0.5px solid #1e1e1e;
}

.wod-list-footer-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wod-list-card-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 20px;
    background: #10b98122;
    color: #10b981;
    border: 0.5px solid #10b98144;
    z-index: 1;
}

.wod-list-top-score {
    color: #e53e3e !important;
    font-weight: 500;
    font-size: 13px;
}

.home-rank-val-gold {
    color: #f6ad00 !important;
}

.challenge-list-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px;
}

.challenge-list-card {
    background: #161616;
    border-radius: 12px;
    border: 0.5px solid #222;
    padding: 14px;
    position: relative;
    cursor: pointer;
    margin: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.challenge-card {
    background: #161616;
    border-radius: 12px;
    border: 0.5px solid #222;
    padding: 14px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.challenge-card-title,
.challenge-title {
    font-size: 17px !important;
    font-weight: 500;
    color: #f0f0f0;
    margin-bottom: 4px;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
    padding-bottom: 0 !important;
    display: block;
    line-height: 1.3;
}

.challenge-card-title::after,
.challenge-title::after,
.challenge-card-title::before,
.challenge-title::before {
    display: none !important;
}

.challenge-card-record-count,
.challenge-count,
.participant-count {
    display: block;
    text-align: right;
    font-size: 13px;
    color: #444;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 0.5px solid #1e1e1e;
    position: static !important;
    top: auto !important;
    right: auto !important;
    background: none !important;
    font-weight: 500;
}

.challenge-card-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 20px;
    background: #10b98122;
    color: #10b981;
    border: 0.5px solid #10b98144;
    z-index: 1;
}

.challenge-list-card.has-prize,
.challenge-card.has-prize {
    background: #161616 !important;
    border-color: #222 !important;
}

.challenge-list-card::after,
.challenge-card::after,
[class*="challenge"]::after,
.records-tab.active::after,
.challenge-underline,
.challenge-bar {
    display: none !important;
}

.page-header {
    display: none;
}

.prize-marquee,
.banner-prize-bar,
.prize-bar,
.prize-scroll,
[class*="prize-marquee"],
[class*="prize-bar"] {
    display: none !important;
}

.has-prize {
    background: #161616 !important;
    border-color: #222 !important;
    border-left-color: #222 !important;
    animation: none !important;
}

.has-prize::before {
    display: none !important;
    content: none !important;
}

/* WOD list page — date divider & cards */
.wod-date-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px 6px;
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
}

.wod-date-divider-line {
    flex: 1;
    height: 0.5px;
    background: #1e1e1e;
}

.wod-date-divider-text {
    font-size: 13px;
    color: #444;
    white-space: nowrap;
}

.page-wod-list .wl-card,
.page-wod-list .wod-list-card-v2 {
    min-width: 0;
}

.page-wod-list .wod-list-card-v2:hover {
    border-color: #333;
}

.page-wod-list .wod-list-card-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.page-wod-list .wod-list-card-name {
    font-size: 17px;
    font-weight: 500;
    color: #f0f0f0;
    margin: 0 0 6px;
    line-height: 1.3;
    word-break: break-word;
}

.page-wod-list .wod-list-card-desc-block {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-wod-list .wod-list-card-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    word-break: break-word;
}

.page-wod-list .wod-list-card-desc--collapsible.collapsed {
    max-height: var(--wod-list-desc-collapsed-height, 4.8em);
    overflow: hidden;
    -webkit-line-clamp: unset;
    display: block;
}

.page-wod-list .wod-list-desc-toggle {
    align-self: flex-start;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: #f6ad00;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    font-family: var(--font-body);
}

.page-wod-list .wod-list-desc-toggle:hover {
    text-decoration: underline;
}

.page-wod-list .wod-list-card-footer {
    width: 100%;
    gap: 4px;
    min-width: 0;
}

.page-wod-list .wod-list-footer-left {
    overflow: hidden;
    min-width: 0;
    flex: 1;
}

.page-wod-list .wod-list-top-crown {
    font-size: 13px;
    flex-shrink: 0;
}

.page-wod-list .wod-list-top-name {
    flex-shrink: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.page-wod-list .wod-list-top-nickname {
    font-size: 13px;
    color: #ccc;
}

.page-wod-list .wod-list-top-score {
    margin-left: 6px;
    flex-shrink: 0;
}

.page-wod-list .wod-list-no-record {
    font-size: 13px;
    color: #333;
}

.page-wod-list .wod-list-record-count {
    font-size: 13px;
    color: #444;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .page-wod-list .wod-list-card-footer {
        gap: 2px;
    }
}

.page-wod-list #wod-list-pagination {
    margin-top: 0;
}

/* Challenge detail page */
.page-challenge-detail .challenge-detail-info-card {
    background: #161616;
    border: 0.5px solid #2a2a2a;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: var(--space-section);
}

.page-challenge-detail .challenge-detail-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.page-challenge-detail .challenge-detail-week {
    font-size: 11px;
    font-weight: 600;
    color: #f6ad00;
}

.page-challenge-detail .challenge-detail-status {
    flex-shrink: 0;
}

.page-challenge-detail .challenge-detail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.page-challenge-detail .challenge-detail-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    font-family: var(--font-body);
    border-bottom: none;
    padding-bottom: 0;
}

.page-challenge-detail .challenge-detail-dates {
    margin: 0;
    font-size: 11px;
    color: #888888;
    line-height: 1.35;
}

.page-challenge-detail .challenge-detail-desc {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: #888888;
    word-break: break-word;
}

.page-challenge-detail .challenge-detail-record-link {
    color: #f6ad00;
}

.page-challenge-detail .challenge-detail-record-link:hover {
    color: #ffbd2e;
}

/* Record thread comments (WOD / challenge detail) */
.wod-record-thread-comments {
    margin-top: 6px;
}

.record-comment-toggle {
    background: none;
    border: none;
    color: #888;
    font-size: 17px;
    cursor: pointer;
    padding: 4px 8px;
    min-height: 32px;
    min-width: 32px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.record-comment-toggle:hover,
.record-comment-toggle:focus-visible {
    color: #ccc;
}

.record-comment-panel {
    background: #111;
    border-radius: 8px;
    padding: 10px;
    margin-top: 6px;
}

.comment-list {
    margin-bottom: 8px;
}

.comment-item {
    padding: 8px 0 8px 14px;
    border-bottom: 0.5px solid #2a2a2a;
    border-left: 2px solid #333;
    margin-left: 8px;
    font-size: 17px;
}

.comment-item--replyable {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
}

.comment-author-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.comment-weapon-icon {
    flex-shrink: 0;
}

.comment-nickname {
    font-weight: 700;
    color: #fff;
    font-size: 13px;
}

.comment-author-line .role-badge {
    font-size: 11px;
    padding: 1px 5px;
    margin-left: 0;
}

.comment-tier-badge {
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
}

.comment-item.tier-dosa .comment-tier-badge {
    background: rgba(255, 215, 0, 0.35);
    color: #fcd34d;
}

.comment-item.tier-monster .comment-tier-badge {
    background: rgba(255, 68, 68, 0.25);
    color: #fca5a5;
}

.comment-item.tier-master .comment-tier-badge {
    background: rgba(155, 89, 182, 0.25);
    color: #d8b4fe;
}

.comment-item.tier-veteran .comment-tier-badge {
    background: rgba(52, 152, 219, 0.25);
    color: #93c5fd;
}

.comment-item.tier-prospect .comment-tier-badge {
    background: rgba(46, 204, 113, 0.25);
    color: #86efac;
}

.comment-item.tier-cutie .comment-tier-badge {
    background: var(--bg, #1a1a1a);
    color: var(--text-muted, #888);
    border: 1px solid #2a2a2a;
}

.comment-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 11px;
    color: #555;
}

.comment-actions {
    display: inline-flex;
    gap: 6px;
}

.comment-delete-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 6px;
    min-height: 28px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.comment-delete-btn:hover,
.comment-delete-btn:focus-visible {
    color: #e53e3e;
}

.comment-content {
    color: #e0e0e0;
    margin: 4px 0 0;
    word-break: break-word;
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.5;
}

.comment-reply-list {
    margin-left: 16px;
    border-left: 2px solid #2a2a2a;
    padding-left: 8px;
    margin-top: 4px;
}

.comment-reply-form {
    margin-top: 6px;
}

.comment-login-hint {
    font-size: 13px;
    margin: 0;
}

.comment-input {
    width: 100%;
    box-sizing: border-box;
    background: #1a1a1a;
    border: 0.5px solid #2a2a2a;
    border-radius: 6px;
    color: #fff;
    padding: 8px;
    font-size: 15px;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    touch-action: manipulation;
}

.comment-submit {
    background: #e53e3e;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    min-height: 36px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.comment-submit:hover,
.comment-submit:focus-visible {
    filter: brightness(1.08);
}

.comment-loading,
.comment-empty,
.comment-error {
    font-size: 13px;
    margin: 0;
}

@media (max-width: 768px) {
    .record-comment-toggle {
        font-size: 17px;
    }

    .comment-item {
        font-size: 15px;
    }

    .comment-input {
        font-size: 13px;
    }
}

/* Admin — 상품 설정 */
.admin-prize-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 0.5px solid var(--border, #2a2a2a);
}

.admin-toggle-label,
.admin-prize-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-height: 36px;
    user-select: none;
}

.admin-prize-toggle {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    touch-action: manipulation;
}

.admin-prize-fields {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-prize-fields[hidden] {
    display: none !important;
}

.admin-prize-title-input,
.admin-prize-description-input,
.admin-prize-sponsor-input,
.admin-prize-draw-type {
    width: 100%;
    box-sizing: border-box;
    touch-action: manipulation;
}

.admin-prize-winner-note {
    margin: 0;
    font-size: 13px;
}

.admin-prize-section .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.admin-prize-section .form-row .form-group {
    flex: 1 1 140px;
    min-width: 0;
}

.admin-schedule-section {
    margin-bottom: 1rem;
}

.schedule-row { display:flex; align-items:center; justify-content:space-between; background:#111; border-radius:8px; border:0.5px solid #2a2a2a; padding:10px 14px; }
.schedule-left { display:flex; flex-direction:column; gap:2px; }
.schedule-title { font-size:15px; color:#f0f0f0; font-weight:500; }
.schedule-desc { font-size:13px; color:#444; }
.sched-toggle { width:44px; height:24px; background:#2a2a2a; border-radius:99px; position:relative; cursor:pointer; transition:background 0.2s; border:none; flex-shrink:0; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.sched-toggle.on { background:#e53e3e; }
.sched-toggle::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left 0.2s; }
.sched-toggle.on::after { left:23px; }
.schedule-date-row { display:flex; align-items:center; gap:8px; background:#111; border-radius:8px; border:0.5px solid #e53e3e33; padding:10px 14px; margin-top:8px; }
.schedule-date-input { flex:1; background:none; border:none; color:#f0f0f0; font-size:15px; outline:none; min-width:0; }
.schedule-date-input::-webkit-calendar-picker-indicator { filter:invert(0.8); cursor:pointer; }
.schedule-date-label { font-size:13px; color:#e53e3e; white-space:nowrap; }

.draw-section { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.draw-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.btn-draw { border:none; border-radius:10px; font-size:15px; font-weight:500; padding:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.btn-draw-manual { background:#e53e3e; color:#fff; }
.btn-draw-batch { background:#c53030; color:#fff; }
.btn-draw-schedule { background:#111; border:0.5px solid #f6ad0066; color:#f6ad00; }
.btn-draw-schedule-batch { background:#111; border:0.5px solid #f6ad0044; color:#f6ad0077; }

.timer-box { background:#0f0f0a; border:0.5px solid #f6ad0033; border-radius:10px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.timer-label { font-size:13px; color:#f6ad00; margin-bottom:2px; }
.timer-val { font-size:17px; font-weight:500; color:#f6ad00; font-variant-numeric:tabular-nums; }
.timer-cancel { font-size:13px; color:#555; cursor:pointer; text-decoration:underline; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }

.prize-sponsor-row { display:flex; align-items:center; gap:10px; padding:10px 0; }
.prize-sponsor-avatar { width:34px; height:34px; border-radius:50%; background:#1a1a1a; border:0.5px solid #333; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.prize-sponsor-name { font-size:15px; color:#f0f0f0; font-weight:500; }
.prize-sponsor-msg { font-size:13px; color:#555; margin-top:2px; }

.prize-batch-winners-panel { display:flex; flex-direction:column; gap:12px; }
.prize-batch-title { font-size:15px; color:#f0f0f0; font-weight:500; margin:0 0 6px; }

.wod-scheduled-badge {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    background: #1a1a3a;
    color: #818cf8;
    border: 0.5px solid #818cf8;
    border-radius: 4px;
}

.page-wod-list .wod-list-card-v2 .wod-scheduled-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    margin: 0;
}

.page-wod-list .wod-list-card-v2:has(.wod-scheduled-badge) {
    position: relative;
}

/* 상품 카드 — 목록/챌린지: 골드 띠·테두리 효과 비활성 (전역 .has-prize 규칙 사용) */
.home-wod-card.has-prize,
.home-challenge-card.has-prize,
.page-wod-list .wod-list-card-v2.has-prize,
.page-challenge .challenge-card.has-prize,
.challenge-list-card.has-prize {
    position: relative;
    overflow: hidden;
    padding-top: 14px !important;
    border-left: 0.5px solid #222 !important;
    animation: none !important;
    box-shadow: none !important;
}

/* 홈 챌린지 섹션 — 배너가 섹션 밖으로 삐져나가지 않도록 */
.page-home .home-challenge-section--compact:has(.home-challenge-card.has-prize) {
    overflow: hidden;
}

@keyframes leftPulse {
    0%,
    100% {
        border-left-color: #f6ad00;
        box-shadow: -3px 0 8px #f6ad0055;
    }

    50% {
        border-left-color: #ffd700;
        box-shadow: -3px 0 18px #f6ad00cc;
    }
}

.home-wod-card.has-prize::before,
.home-challenge-card.has-prize::before,
.page-wod-list .wod-list-card-v2.has-prize::before,
.page-challenge .challenge-card.has-prize::before,
.challenge-list-card.has-prize::before {
    display: none !important;
    content: none !important;
}

/* 상품 배너(~26px) 아래 무기 점수 안내(ⓘ) — index 홈 WOD·챌린지 카드 */
.has-prize .card-badge-stack--overlay.home-wod-hint-stack,
.has-prize .home-wod-hint-stack {
    top: 34px;
    right: 10px;
}

.has-prize .weapon-score-hint-wrap {
    position: relative;
}

.has-prize .weapon-score-hint-btn {
    position: relative;
    top: auto;
}

@keyframes bannerSlide {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 300% 0;
    }
}

.btn-prize-check {
    width: 100%;
    margin-top: 6px;
    padding: 10px 0;
    border-radius: 8px;
    border: 2px solid #f6ad00;
    background: #111;
    color: #f6ad00;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    animation: btnGlow 1.6s ease-in-out infinite;
    letter-spacing: 0.03em;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@keyframes btnGlow {
    0%,
    100% {
        box-shadow: 0 0 6px #f6ad0055;
        border-color: #f6ad00;
    }

    50% {
        box-shadow: 0 0 18px #f6ad00cc;
        border-color: #ffd700;
        color: #ffd700;
    }
}

.page-wod-list .wod-list-card-v2 .btn-prize-check,
.page-challenge .challenge-card .btn-prize-check {
    flex-shrink: 0;
}

/* 상품 모달 */
body.prize-modal-open {
    overflow: hidden;
}

.prize-modal-overlay {
    position: fixed;
    inset: 0;
    background: #000000cc;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.prize-modal-overlay[hidden] {
    display: none !important;
}

.prize-modal-box {
    background: #161616;
    border: 1.5px solid #f6ad00;
    border-radius: 12px;
    padding: 24px 20px;
    width: 90%;
    max-width: 360px;
    position: relative;
    box-shadow: 0 0 30px #f6ad0044;
    max-height: 85vh;
    overflow-y: auto;
}

.prize-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
    min-width: 36px;
    min-height: 36px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.prize-modal-title {
    margin: 0 0 10px;
    padding-right: 28px;
    font-size: 20px;
    font-weight: 700;
    color: #f6ad00;
    line-height: 1.3;
}

.prize-modal-title--main {
    font-size: 22px;
    color: #fff;
}

.prize-category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px;
}

.prize-cat-btn {
    background: #1a1a1a;
    border: 0.5px solid #2a2a2a;
    color: #888;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 0;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.prize-cat-btn.active {
    background: #f6ad0018;
    border-color: #f6ad00;
    color: #f6ad00;
}

.admin-prize-section .admin-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
}

.admin-prize-section .admin-hint {
    margin: 0.5rem 0 0;
    font-size: 0.94rem;
    color: var(--text-muted, #888);
}

.prize-icon-wrap {
    text-align: center;
    padding: 16px 0 8px;
}

.prize-icon-wrap--image {
    padding: 0 0 12px;
}

.prize-cat-icon {
    font-size: 56px;
    line-height: 1;
}

.prize-modal-image-wrap {
    margin: 0 0 12px;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a1a;
}

.prize-icon-wrap--image .prize-modal-image,
.prize-modal-image {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
}

.sponsor-combo {
    position: relative;
    background: linear-gradient(135deg, #1a1200, #1a1500);
    border: 1px solid #f6ad00;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    overflow: hidden;
}

.sponsor-combo::before {
    content: "★ SPONSOR ★";
    position: absolute;
    top: 10px;
    right: -22px;
    background: #f6ad00;
    color: #0d0d0d;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 30px;
    transform: rotate(35deg);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.sponsor-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.sponsor-label {
    color: #f6ad00;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}

.sponsor-name {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.sponsor-badge {
    display: inline-block;
    background: #f6ad0022;
    border: 1px solid #f6ad00;
    color: #f6ad00;
    font-size: 15px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .sponsor-name {
        font-size: 15px;
    }

    .sponsor-icon {
        font-size: 24px;
    }
}

.prize-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.prize-grid-item {
    background: #1a1a1a;
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    border: 0.5px solid #2a2a2a;
    cursor: pointer;
    transition: all 0.15s;
    font: inherit;
    color: inherit;
    width: 100%;
}

.prize-grid-item.is-new {
    overflow: hidden;
    position: relative;
}

.prize-grid-new-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    background: #e53e3e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px 0 10px 0;
    letter-spacing: 0.05em;
    animation: newRibbonPulse 1.2s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
    line-height: 1.2;
}

@keyframes newRibbonPulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.prize-grid-item.has-sponsor {
    border-color: #f6ad0066;
}

.prize-grid-item.selected {
    border-color: #f6ad00;
    background: #f6ad0011;
}

.prize-grid-item.dimmed {
    opacity: 0.6;
}

.prize-grid-icon {
    font-size: 28px;
    margin-bottom: 6px;
    line-height: 1;
}

.prize-grid-emoji {
    font-size: 28px;
    line-height: 1;
}

.prize-grid-name {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}

.prize-grid-sponsor {
    margin-top: 2px;
}

.prize-grid-sponsor-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f6ad00;
    margin-right: 4px;
    vertical-align: middle;
}

.prize-grid-sponsor-name {
    color: #f6ad00;
    font-size: 11px;
}

.prize-detail {
    background: #111;
    border-radius: 10px;
    padding: 14px;
    margin-top: 6px;
    border: 0.5px solid #f6ad0044;
    animation: prizeDetailSlide 0.2s ease-out;
}

@keyframes prizeDetailSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.prize-detail-icon {
    font-size: 44px;
    text-align: center;
    margin-bottom: 8px;
    line-height: 1;
}

.prize-detail-emoji {
    font-size: 44px;
    line-height: 1;
}

.prize-detail-name {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
}

.prize-detail-desc {
    color: #888;
    font-size: 13px;
    text-align: center;
    margin-bottom: 12px;
}

.prize-winners-panel {
    margin-top: 12px;
}

.prize-winners-heading {
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
}

.prize-winners-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prize-winner-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1a1a1a;
    border-radius: 7px;
    border: 0.5px solid #2a2a2a;
    padding: 7px 10px;
}

.prize-winner-rank {
    flex-shrink: 0;
    min-width: 1.25em;
    text-align: center;
}

.prize-winner-nickname {
    color: #fff;
    font-weight: 500;
}

.prize-winner-prize {
    margin-left: auto;
    color: #f6ad00;
    font-size: 13px;
    text-align: right;
}

.prize-winners-drawn-at {
    font-size: 11px;
    color: #444;
    text-align: right;
    margin-top: 8px;
}

.prize-winners-panel--reveal .prize-winner-row {
    animation: prize-winner-row-in 0.35s ease both;
}

.prize-winners-panel--reveal .prize-winner-row:nth-child(2) {
    animation-delay: 0.08s;
}

.prize-winners-panel--reveal .prize-winner-row:nth-child(3) {
    animation-delay: 0.16s;
}

.prize-winners-panel--reveal .prize-winner-row:nth-child(4) {
    animation-delay: 0.24s;
}

@keyframes prize-winner-row-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.prize-winners-panel .prize-modal-back-btn {
    width: 100%;
    margin-top: 10px;
}

.prize-modal-actions .prize-reset-btn {
    width: 100%;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .prize-grid-icon,
    .prize-grid-emoji {
        font-size: 24px;
    }

    .prize-grid-name {
        font-size: 11px;
    }

    .prize-detail-icon,
    .prize-detail-emoji {
        font-size: 36px;
    }

    .prize-detail-name {
        font-size: 15px;
    }
}

/* 사냥하기 버튼 */
.hunting-open-btn {
  width: 100%;
  margin-top: 12px;
  padding: 12px 0;
  background: #1a1a1a;
  border: 1px solid #e53e3e;
  border-radius: 8px;
  color: #e53e3e;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: all 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.hunting-open-btn:active {
  background: #e53e3e22;
}

.hunting-beta-badge {
  display: inline-block;
  background: #e53e3e22;
  border: 1px solid #e53e3e;
  color: #e53e3e;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.05em;
}

/* 팝업 오버레이 */
.hunting-modal-overlay {
  position: fixed;
  inset: 0;
  background: #000000cc;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.hunting-modal-overlay[hidden] { display: none !important; }
.forge-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.forge-modal-overlay[hidden] { display: none !important; }

.hunting-modal-box {
  background: #161616;
  border: 0.5px solid #2a2a2a;
  border-radius: 14px;
  padding: clamp(16px, 4vw, 28px) clamp(10px, 3vw, 16px);
  width: 100%;
  max-width: min(400px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.hunting-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #333;
  border: none;
  color: #aaa;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.hunting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 10px 12px;
  background: #1a1a1a;
  border-radius: 10px;
  border: 0.5px solid #2a2a2a;
}
.hunting-coin {
  color: #f6ad00;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hunting-stamina-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hunting-stamina-label {
  color: #aaa;
  font-size: 13px;
  font-weight: 700;
}
.hunting-stamina-text {
  color: #ddd;
  font-size: 13px;
  font-weight: 700;
}
.hunting-stamina-bar-bg { width: 80px; height: 6px; background: #2a2a2a; border-radius: 4px; overflow: hidden; }
.hunting-stamina-bar-fill { height: 6px; background: #e53e3e; border-radius: 4px; transition: width 0.3s; }
.hunting-recover-text { color: #555; font-size: 11px; font-weight: 700; margin: 0 0 8px; }

.hunting-warning-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1a1a1a;
  border: 0.5px solid #f6ad0044;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.hunting-warning-icon {
  font-size: 17px;
  flex-shrink: 0;
}

.hunting-warning-text {
  flex: 1;
  color: #888;
  font-size: 13px;
  line-height: 1.5;
  min-width: 0;
}

.hunting-warning-text strong {
  color: #f6ad00;
  font-weight: 700;
}

.hunting-auto-btn {
  position: absolute;
  bottom: 38px;
  right: 10px;
  z-index: 4;
  width: clamp(44px, 11vw, 60px);
  height: clamp(44px, 11vw, 60px);
  border-radius: 50%;
  border: 1.5px solid #f6ad00;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #aaa;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  gap: 2px;
  transition: all 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.hunting-auto-btn.stamina-available:not(.active) {
  border-color: #e53e3e;
  animation: autoBtnHint 1.5s ease-in-out infinite;
}

@keyframes autoBtnHint {
  0%,
  100% {
    box-shadow: 0 0 0 0 #e53e3e44;
    border-color: #e53e3e44;
  }

  50% {
    box-shadow: 0 0 0 8px #e53e3e00;
    border-color: #e53e3e;
  }
}

.hunting-auto-btn.active {
  border-color: #e53e3e;
  background: #e53e3e22;
  color: #e53e3e;
  animation: autoPulse 0.8s ease-in-out infinite;
}

@keyframes autoPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 #e53e3e44;
  }

  50% {
    box-shadow: 0 0 0 8px #e53e3e00;
  }
}

.hunting-auto-icon {
  font-size: clamp(15px, 4vw, 20px);
  line-height: 1;
}

.hunting-auto-label {
  font-size: clamp(11px, 2.5vw, 14px);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.hunting-stamina-empty-popup {
  position: absolute;
  inset: 0;
  background: #000000cc;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  border-radius: 10px;
}

.hunting-stamina-empty-popup[hidden] {
  display: none !important;
}

.hunting-stamina-empty-inner {
  background: #1a1a1a;
  border: 0.5px solid #2a2a2a;
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  width: 240px;
}

.hunting-stamina-empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.hunting-stamina-empty-title {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.hunting-stamina-empty-sub {
  color: #888;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.hunting-stamina-empty-btn {
  background: #e53e3e;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 32px;
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

@media (max-width: 768px) {
  .hunting-warning-text {
    font-size: 11px;
  }
}
.hunting-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.hunting-tab {
  flex: 1;
  padding: 8px 0;
  border-radius: 8px;
  border: 0.5px solid #2a2a2a;
  background: #1a1a1a;
  color: #666;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.hunting-tab.active {
  border-color: #e53e3e;
  background: #e53e3e22;
  color: #e53e3e;
}

.hunting-monster-select {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 10px;
}
.hunting-monster-select::-webkit-scrollbar { display: none; }
.hunting-m-tab {
  flex-shrink: 0;
  background: #1a1a1a;
  border: 0.5px solid #2a2a2a;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 54px;
  transition: all 0.15s;
}
.hunting-m-tab.active { border-color: #e53e3e; background: #e53e3e22; }
.hunting-m-tab.locked { opacity: 0.55; cursor: not-allowed; }
.hunting-m-tab-emoji { font-size: 22px; line-height: 1; }
.hunting-m-tab-name { font-size: 8px; color: #888; font-weight: 700; text-align: center; line-height: 1.3; }
.hunting-m-tab.active .hunting-m-tab-name { color: #e53e3e; }
.hunting-m-tab-lock { font-size: 11px; color: #555; }

.hunting-screen {
  background: linear-gradient(180deg, #0a0a1a 0%, #111 60%);
  border-radius: 10px;
  border: 0.5px solid #2a2a2a;
  height: clamp(260px, 65vw, 420px);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  margin-bottom: 10px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hunting-screen.bg-stage-1 { background-image: url('/static/img/hunting_bg/stage1.png'); background-size: cover; background-position: center; }
.hunting-screen.bg-stage-2 { background-image: url('/static/img/hunting_bg/stage2.png'); background-size: cover; background-position: center; }
.hunting-screen.bg-stage-3 { background-image: url('/static/img/hunting_bg/stage3.png'); background-size: cover; background-position: center; }
.hunting-screen.bg-stage-4 { background-image: url('/static/img/hunting_bg/stage4.png'); background-size: cover; background-position: center; }
.hunting-screen.bg-stage-5 { background-image: url('/static/img/hunting_bg/stage5.png'); background-size: cover; background-position: center; }
.hunting-screen.bg-stage-6 { background-image: url('/static/img/hunting_bg/stage6.png'); background-size: cover; background-position: center; }
.hunting-screen.bg-stage-7 { background-image: url('/static/img/hunting_bg/stage7.png'); background-size: cover; background-position: center; }
.hunting-screen.bg-stage-8 { background-image: url('/static/img/hunting_bg/stage8.png'); background-size: cover; background-position: center; }
.hunting-screen.bg-stage-9 { background-image: url('/static/img/hunting_bg/stage9.png'); background-size: cover; background-position: center; }
.hunting-screen.bg-stage-10 { background-image: url('/static/img/hunting_bg/stage10.png'); background-size: cover; background-position: center; }
.hunting-screen.bg-stage-11 { background-image: url('/static/img/hunting_bg/stage11.png'); background-size: cover; background-position: center; }

.hunting-screen.bg-locked-preview {
  filter: grayscale(0.9) brightness(0.35);
}
.hunting-screen.bg-locked-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}
.hunting-boss-bar-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
}
.hunting-coin-wrap {
  position: absolute;
  right: 4px;
  bottom: -30px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(0,0,0,0.5);
  border-radius: 20px;
  padding: 1px 6px;
  border: 1px solid #f6ad00;
}
.hunting-coin-val {
  font-size: clamp(9px, 2vw, 12px);
  font-weight: 600;
  color: #f6ad00;
}
.hunting-boss-name {
  color: #e53e3e;
  font-size: clamp(11px, 2.5vw, 14px);
  font-weight: 700;
  margin-bottom: 3px;
}
.hunting-boss-hp-bg {
  width: 100%;
  height: 6px;
  background: #2a2a2a;
  border-radius: 4px;
  overflow: hidden;
}
.hunting-boss-hp-fill {
  height: 6px;
  background: #e53e3e;
  border-radius: 4px;
  transition: width 0.3s;
}
.hunting-boss-hp-text {
  color: #555;
  font-size: clamp(9px, 2vw, 12px);
  text-align: right;
  margin-top: 2px;
}
.hunting-roulette {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000000cc;
  border: 2px solid #f6ad00;
  border-radius: 12px;
  padding: 16px 24px;
  color: #f6ad00;
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 700;
  z-index: 10;
  text-align: center;
  white-space: nowrap;
}

.admin-members-table-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
}
.admin-members-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
.admin-members-table th,
.admin-members-table td {
  border-bottom: 0.5px solid #2a2a2a;
  padding: 8px 6px;
  text-align: left;
  font-size: 13px;
}
.admin-members-table th {
  color: #999;
  font-weight: 700;
}
.hunting-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 32px;
  background: linear-gradient(180deg, #1a1a2a, #111);
  border-top: 1px solid #2a2a3a;
}
.hunting-tap-hint {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  bottom: auto;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(13px, 3.5vw, 18px);
  font-weight: 700;
  animation: huntingBlink 1.5s ease-in-out infinite;
  white-space: nowrap;
  pointer-events: none;
}
@keyframes huntingBlink { 0%,100%{opacity:0.3} 50%{opacity:0.8} }

.hunting-character {
  position: absolute;
  bottom: 14px;
  left: 8px !important;
  font-size: 42px;
  line-height: 1;
  user-select: none;
}
.hunting-character img {
  width: clamp(120px, 30vw, 185px) !important;
  height: clamp(146px, 37vw, 230px) !important;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

/* 캐릭터수련장 모달 */
.training-modal-overlay {
  position: fixed;
  inset: 0;
  background: #000000cc;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.training-modal-overlay[hidden] { display: none !important; }

.training-modal-box {
  background: #161616;
  border: 0.5px solid #2a2a2a;
  border-radius: 14px;
  padding: clamp(16px, 4vw, 28px) clamp(10px, 3vw, 16px);
  width: 100%;
  max-width: min(400px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.training-screen {
  background: linear-gradient(180deg, #1a1410 0%, #0d0a08 60%);
  border-radius: 10px;
  border: 0.5px solid #2a2520;
  height: clamp(320px, 80vw, 520px);
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.training-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 32px;
  background: linear-gradient(180deg, #2a2018, #14100a);
  border-top: 1px solid #3a2f20;
}

.training-character-wrap {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.training-character-wrap img.training-char-img {
  width: clamp(220px, 54vw, 310px);
  height: clamp(268px, 66vw, 380px);
  object-fit: contain;
  image-rendering: pixelated;
  position: relative;
  z-index: 2;
}
.training-treadmill-img {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(220px, 56vw, 340px);
  z-index: 3;
  pointer-events: none;
}
.training-character-wrap.running img.training-char-img {
  animation: trainingBounce 0.45s ease-in-out infinite;
}
@keyframes trainingBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.training-auto-btn {
  position: absolute;
  bottom: 38px;
  right: 10px;
  z-index: 4;
  width: clamp(44px, 11vw, 60px);
  height: clamp(44px, 11vw, 60px);
  border-radius: 50%;
  border: 1.5px solid #e53e3e;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #aaa;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  gap: 2px;
  transition: all 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.training-auto-btn.active {
  border-color: #e53e3e;
  background: #e53e3e22;
  color: #e53e3e;
}

.training-effort-bar-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 3;
}
.training-effort-name {
  font-size: 12px;
  font-weight: 700;
  color: #ddd;
  margin-bottom: 4px;
}
.training-effort-bg {
  background: #1a1a1a;
  border-radius: 8px;
  height: 20px;
  overflow: hidden;
}
.training-effort-fill {
  background: #22c55e;
  height: 100%;
  transition: width 0.3s;
}
.training-effort-text {
  font-size: 10px;
  color: #888;
  margin-top: 3px;
}
.training-slot-empty {
  text-align: center;
  padding: 60px 20px;
  color: #555;
  font-size: 13px;
}

.inv-tab {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: #111;
  color: #888;
}
.inv-tab.on {
  background: #e53e3e;
  color: #fff;
}
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.inv-card {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.inv-card.equipped {
  border-color: #f6ad00;
}
.inv-card-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #f6ad00;
  background: #1a1200;
  border-radius: 4px;
  padding: 1px 4px;
}
.inv-card img {
  width: 100%;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
  margin-bottom: 4px;
}
.inv-card-name {
  font-size: 10px;
  font-weight: 700;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-card-bar-bg {
  background: #1a1a1a;
  border-radius: 3px;
  height: 4px;
  margin-top: 4px;
  overflow: hidden;
}
.inv-card-bar-fill {
  background: #22c55e;
  height: 100%;
}

.hunting-weapon-wrap {
  position: absolute;
  bottom: clamp(40px, 9vw, 70px);
  left: clamp(82px, 20vw, 140px);
  width: clamp(40px, 10vw, 60px);
  height: clamp(100px, 25vw, 150px);
  transform-origin: bottom center;
  transform: rotate(20deg);
  transition: transform 0.12s ease-out;
}
.hunting-weapon-wrap.swing { transform: rotate(60deg); }
.hunting-weapon-icon {
  width: 68px;
  height: 136px;
  object-fit: contain;
  filter: drop-shadow(0 0 3px #e53e3e88) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.hunting-monster-wrap {
  position: absolute;
  bottom: 32px;
  right: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.hunting-monster-emoji {
  font-size: clamp(50px, 14vw, 78px);
  line-height: 1;
  user-select: none;
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}
.hunting-monster-hp-bar { width: clamp(44px, 12vw, 64px); height: 4px; background: #2a2a2a; border-radius: 2px; overflow: hidden; }
.hunting-monster-hp-fill { height: 4px; background: #e53e3e; border-radius: 2px; transition: width 0.3s; }
.hunting-monster-name { color: #888; font-size: clamp(9px, 2vw, 12px); font-weight: 700; }

.hunting-monster-wrap.hit { animation: huntingHit 0.2s ease-out; }
@keyframes huntingHit { 0%{transform:translateX(0)} 30%{transform:translateX(14px)} 100%{transform:translateX(0)} }
.hunting-monster-wrap.dead { animation: huntingDead 0.4s ease-out forwards; }
@keyframes huntingDead { 0%{transform:scale(1)} 50%{transform:scale(1.2) rotate(10deg)} 100%{transform:scale(0);opacity:0} }

.hunting-slash-fx {
  position: absolute;
  pointer-events: none;
  font-size: 28px;
  animation: huntingSlash 0.25s ease-out forwards;
}
@keyframes huntingSlash { 0%{opacity:1;transform:scale(0.5) rotate(-20deg)} 50%{opacity:1;transform:scale(1.2)} 100%{opacity:0;transform:scale(0.8)} }

.hunting-coin-particle {
  position: absolute;
  font-size: 15px;
  pointer-events: none;
  animation: huntingCoinUp 0.9s ease-out forwards;
}

.hunting-coin-particle--sm {
  font-size: 13px;
}

.hunting-milestone-text {
  color: #f6ad00;
}
@keyframes huntingCoinUp { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-50px) scale(0.3) rotate(360deg)} }

@keyframes huntingCoinBurst {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.5); }
}
@keyframes huntingCoinFloat {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40px); }
}

.hunting-dmg-text {
  position: absolute;
  font-size: 15px;
  font-weight: 700;
  pointer-events: none;
  color: #e53e3e;
  animation: huntingDmgUp 0.8s ease-out forwards;
}
@keyframes huntingDmgUp { 0%{opacity:1;transform:translateY(0) scale(1.2)} 100%{opacity:0;transform:translateY(-38px) scale(0.8)} }

.hunting-info-grid {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: stretch;
}
.hunting-info-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  width: 90px;
}
.hunting-info-card-sm {
  background: #1a1a1a;
  border-radius: 8px;
  padding: 6px 10px;
  border: 0.5px solid #2a2a2a;
  flex: 1;
}
.hunting-info-card-lg {
  background: #1a1a1a;
  border-radius: 8px;
  padding: 10px 12px;
  border: 0.5px solid #2a2a2a;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hunting-coin-drop-desc {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 15px;
  color: #aaa;
  font-weight: 600;
}
.hunting-coin-drop-desc .gold {
  color: #f6ad00;
  font-weight: 700;
}
.shop-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  gap: 12px;
}
.shop-coming-soon-icon {
  font-size: 48px;
  line-height: 1;
}
.shop-coming-soon-text {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}
.shop-coming-soon-sub {
  color: #555;
  font-size: 15px;
}
.admin-prize-item {
  background: #1a1a1a;
  border: 0.5px solid #2a2a2a;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.admin-prize-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid #2a2a2a;
}
.admin-prize-item-title {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.admin-prize-del-btn {
  background: none;
  border: 0.5px solid #e53e3e44;
  color: #e53e3e;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.admin-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.admin-field-label {
  color: #888;
  font-size: 13px;
  font-weight: 700;
}
.admin-field-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-input {
  width: 100%;
  background: #111;
  border: 0.5px solid #2a2a2a;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.admin-input:focus {
  border-color: #e53e3e;
  outline: none;
}
.admin-textarea {
  width: 100%;
  background: #111;
  border: 0.5px solid #2a2a2a;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  padding: 10px 12px;
  box-sizing: border-box;
  resize: vertical;
}
.admin-select {
  width: 100%;
  background: #111;
  border: 0.5px solid #2a2a2a;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.admin-prize-category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.prize-target-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.prize-target-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
  background: #111;
  color: #888;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.prize-target-opt.active[data-target="member"] {
  border-color: #2563eb;
  background: #0d1a2a;
  color: #60a5fa;
}
.prize-target-opt.active[data-target="gym"] {
  border-color: #16a34a;
  background: #0d1f16;
  color: #4ade80;
}
.prize-weighted-rule-box {
  background: #0d1f16;
  border: 1px solid #1a3a2a;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.prize-cat-btn {
  background: #1a1a1a;
  border: 0.5px solid #2a2a2a;
  color: #888;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
}
.prize-cat-btn.active {
  background: #f6ad0018;
  border-color: #f6ad00;
  color: #f6ad00;
}
.admin-btn-outline {
  width: 100%;
  padding: 10px 0;
  background: none;
  border: 0.5px dashed #444;
  color: #888;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}
.hunting-toast {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: #000000cc;
  border: 0.5px solid #444;
  border-radius: 10px;
  padding: 12px 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  white-space: pre-line;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  max-width: 260px;
}
.hunting-toast.show {
  opacity: 1;
}
.hunting-info-label { color: #555; font-size: 11px; font-weight: 700; margin-bottom: 2px; }
.hunting-info-value { color: #fff; font-size: 13px; font-weight: 700; }
.hunting-info-value.red { color: #e53e3e; }
.hunting-info-value.gold { color: #f6ad00; }

.hunting-bottom-stamina {
  background: #111;
  border: 0.5px solid #2a2a2a;
  border-radius: 10px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 14px 0;
}
.hbs-icon { font-size: clamp(18px, 4.5vw, 24px); }
.hbs-mid { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.hbs-top-row { display: flex; justify-content: space-between; align-items: center; }
.hbs-label { font-size: clamp(11px, 2.5vw, 14px); color: #666; }
.hbs-val { font-size: clamp(12px, 3vw, 16px); font-weight: 500; color: #f0f0f0; }
.hbs-bar-bg { height: 5px; background: #1a1a1a; border-radius: 99px; overflow: hidden; }
.hbs-bar-fill { height: 100%; background: #e53e3e; border-radius: 99px; transition: width 0.3s; }
.hbs-recover { font-size: clamp(11px, 2.5vw, 14px); color: #10b981; }

.hunting-bottom-coin {
  background: #111;
  border: 0.5px solid rgba(246, 173, 0, 0.15);
  border-radius: 10px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 14px 0;
}
.hbc-icon { font-size: 22px; }
.hbc-right { display: flex; flex-direction: column; gap: 3px; }
.hbc-main { font-size: 13px; color: #f6ad00; font-weight: 500; }
.hbc-sub { font-size: 13px; color: #444; }

@media (max-width: 768px) {
  .hunting-screen { height: clamp(260px, 65vw, 420px); }
  .hunting-monster-emoji { font-size: clamp(50px, 14vw, 78px); }
  .hunting-character { font-size: 42px; }
  .hunting-info-left { width: 80px; }
  .hunting-coin-drop-desc { font-size: 13px; }
  .hunting-toast { font-size: 13px; padding: 10px 14px; }
  .admin-field-row { flex-direction: column; gap: 0; }
}

.prize-modal-desc {
    margin: 0 0 10px;
    font-size: 15px;
    color: #888;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.prize-draw-method {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #1a1a1a;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 8px 0;
}

.prize-draw-label {
    color: #555;
    font-size: 15px;
    font-weight: 700;
}

.prize-draw-text {
    color: #ccc;
    font-size: 17px;
    font-weight: 600;
}

.prize-modal-draw-date {
    margin: 0 0 6px;
    font-size: 15px;
    color: #ccc;
    line-height: 1.45;
}

.prize-modal-info {
    margin: 0 0 6px;
    font-size: 15px;
    color: #ccc;
    line-height: 1.45;
}

.prize-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.prize-modal-check-btn,
.prize-modal-draw-btn {
    width: 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.prize-modal-pending-draw {
    margin: 16px 0;
    font-size: 17px;
    color: #888;
    text-align: center;
    line-height: 1.5;
}

.prize-modal-winners-box {
    margin: 12px 0;
    padding: 12px;
    background: #0d1f0d;
    border: 0.5px solid #4ade80;
    border-radius: 8px;
}

.prize-modal-winners-box--reveal {
    animation: prizeWinnerPop 0.65s ease-out;
}

.prize-modal-meta {
    margin: 0 0 14px;
    font-size: 15px;
    color: #888;
}

.prize-modal-schedule {
    margin: 0 0 8px;
    font-size: 15px;
    color: #ccc;
    line-height: 1.45;
}

.prize-modal-schedule strong {
    color: #f6ad00;
}

.prize-modal-section-label {
    margin: 12px 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #4ade80;
}

.prize-modal-winners {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prize-modal-winner-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
}

.prize-modal-winners--reveal .prize-modal-winner-item {
    animation: prizeWinnerPop 0.65s ease-out backwards;
}

.prize-modal-winners--reveal .prize-modal-winner-item:nth-child(2) {
    animation-delay: 0.08s;
}

.prize-modal-winners--reveal .prize-modal-winner-item:nth-child(3) {
    animation-delay: 0.16s;
}

.prize-modal-winner-item .prize-modal-winner-name {
    font-size: 17px;
    font-weight: 700;
    color: #4ade80;
}

.prize-modal-drawn-at {
    margin: 12px 0 0;
    font-size: 13px;
    color: #888;
    text-align: center;
}

.prize-reset-btn {
    width: 100%;
    margin-top: 8px;
    padding: 8px 0;
    border-radius: 8px;
    border: 0.5px solid #444;
    background: #1a1a1a;
    color: #888;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.prize-reset-btn:hover {
    border-color: #e53e3e;
    color: #e53e3e;
}

.prize-modal-winner {
    margin-top: 8px;
    padding: 14px 12px;
    border-radius: 8px;
    background: #1a3a1a;
    border: 1px solid #4ade80;
    text-align: center;
}

.prize-modal-winner--reveal {
    animation: prizeWinnerPop 0.65s ease-out;
}

@keyframes prizeWinnerPop {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }

    60% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.prize-modal-winner-label {
    display: block;
    font-size: 13px;
    color: #4ade80;
    margin-bottom: 4px;
}

.prize-modal-winner-name {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}

.prize-modal-winner-time {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #888;
}

.prize-modal-drawing {
    margin: 12px 0 0;
    font-size: 17px;
    font-weight: 700;
    color: #f6ad00;
    text-align: center;
    animation: prizeDrawingPulse 0.8s ease-in-out infinite;
}

@keyframes prizeDrawingPulse {
    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.prize-modal-draw-btn {
    width: 100%;
    margin-top: 4px;
}

.score-calc-host {
    margin-top: 8px;
}

.score-calc-toggle-btn {
    width: 100%;
    background: #1a1a1a;
    border: 0.5px solid #444;
    color: #888;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 0;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 8px;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.score-calc-toggle-btn[aria-expanded="true"] {
    border-color: #e53e3e;
    color: #e53e3e;
}

.score-calc-panel {
    background: #111;
    border-radius: 10px;
    border: 0.5px solid #2a2a2a;
    padding: 14px;
    margin-bottom: 10px;
}

.calc-tab-row {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.calc-tab {
    flex: 1;
    background: #1a1a1a;
    border: 0.5px solid #2a2a2a;
    color: #666;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 0;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.calc-tab.active {
    background: #e53e3e22;
    border-color: #e53e3e;
    color: #e53e3e;
}

.calc-label {
    color: #888;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.calc-hint {
    color: #666;
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 6px;
}

.calc-inp {
    background: #1a1a1a;
    border: 0.5px solid #2a2a2a;
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    padding: 8px 10px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.calc-inp--compact {
    padding: 6px 8px;
    font-size: 15px;
}

.calc-inp:focus {
    border-color: #e53e3e;
    outline: none;
}

.calc-field {
    margin-bottom: 10px;
}

.calc-field-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.calc-move-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
    max-height: 240px;
    overflow-y: auto;
}

.calc-move-item {
    background: #1a1a1a;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.calc-move-item .calc-label {
    margin-bottom: 0;
    flex-shrink: 0;
    font-size: 11px;
}

.calc-remove-move {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0.5px solid #444;
    border-radius: 6px;
    background: #222;
    color: #aaa;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.calc-add-move-btn,
.calc-run-btn {
    width: 100%;
    background: #1a1a1a;
    border: 0.5px solid #2a2a2a;
    color: #ccc;
    border-radius: 6px;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.calc-run-btn--secondary {
    color: #888;
}

.calc-result-box {
    background: #0d1f0d;
    border: 0.5px solid #4ade80;
    border-radius: 8px;
    padding: 12px;
    margin-top: 10px;
    text-align: center;
}

.calc-result-detail {
    margin: 6px 0 0;
    font-size: 13px;
}

.calc-result-score {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}

.calc-use-btn {
    width: 100%;
    background: #4ade8022;
    border: 0.5px solid #4ade80;
    color: #4ade80;
    border-radius: 6px;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
    .calc-tab {
        font-size: 11px;
        padding: 5px 0;
    }

    .calc-result-score {
        font-size: 24px;
    }

    .calc-field-row {
        grid-template-columns: 1fr 1fr;
    }

    .calc-field-row .calc-field:last-child {
        grid-column: 1 / -1;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.user-profile-trigger {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.user-profile-trigger:hover,
.user-profile-trigger:focus-visible {
    text-decoration: underline;
    outline: none;
}

.profile-modal-overlay {
    position: fixed;
    inset: 0;
    background: #000000cc;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-modal-overlay[hidden] {
    display: none !important;
}

.profile-modal-box {
    background: #161616;
    border: 0.5px solid #2a2a2a;
    border-radius: 12px;
    width: 90%;
    max-width: 360px;
    overflow: hidden;
}

.profile-modal-content {
    padding: 16px 14px;
}

.profile-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.profile-modal-identity {
    min-width: 0;
    flex: 1;
}

.profile-modal-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.profile-modal-nickname {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.profile-modal-joined {
    margin: 4px 0 0;
    font-size: 13px;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0;
}

.profile-stat-item {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 10px 12px;
}

.profile-stat-label {
    color: #555;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
}

.profile-stat-value {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.profile-stat-value.red {
    color: #e53e3e;
}

.profile-weapon-section {
    border-top: 0.5px solid #1e1e1e;
    padding: 12px 0 0;
    margin-top: 4px;
}

.profile-weapon-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.profile-weapon-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.profile-weapon-stage-text {
    font-size: 13px;
    color: #888;
    margin-top: 2px;
}

.profile-weapon-bar-bg {
    background: #2a2a2a;
    border-radius: 4px;
    height: 6px;
    margin-top: 6px;
}

.profile-weapon-bar-fill {
    background: #f6ad00;
    border-radius: 4px;
    height: 6px;
    transition: width 0.2s ease;
}

.profile-weapon-next {
    margin: 8px 0 0;
    font-size: 13px;
    text-align: center;
}

.profile-modal-close {
    width: 100%;
    background: #1a1a1a;
    border: none;
    border-top: 0.5px solid #2a2a2a;
    color: #888;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 0;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.profile-modal-loading,
.profile-modal-error {
    margin: 0;
    text-align: center;
    font-size: 15px;
}

.popup-chat-username {
    font-size: 11px;
    font-weight: 600;
    color: #aaaaaa;
}

body.profile-modal-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .profile-modal-box {
        width: 95%;
    }

    .profile-stat-value {
        font-size: 17px;
    }
}

.prize-modal-loading,
.prize-modal-error,
.prize-modal-pending {
    margin: 0;
    font-size: 15px;
}

@media (max-width: 768px) {
    .btn-prize-check {
        font-size: 15px;
        padding: 9px 0;
    }

    .prize-modal-title {
        font-size: 17px;
    }

    .prize-cat-icon {
        font-size: 48px;
    }
}

.prize-divider {
    border: none;
    border-top: 0.5px solid #2a2a2a;
    margin: 12px 0;
}

.prize-sponsor-link-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 10px 0;
    border-radius: 8px;
    border: 1px dashed #f6ad0088;
    background: #f6ad0008;
    color: #f6ad00;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: all 0.15s;
}

.prize-sponsor-sub {
    font-size: 15px;
    font-weight: 400;
    color: #f6ad0099;
    letter-spacing: 0;
}

.prize-sponsor-link-btn:active {
    background: #f6ad0022;
}

@media (max-width: 768px) {
    .prize-sponsor-link-btn {
        font-size: 15px;
    }

    .prize-sponsor-sub {
        font-size: 15px;
    }

    .sponsor-label {
        font-size: 15px;
    }

    .sponsor-name {
        font-size: 20px;
    }

    .sponsor-badge {
        font-size: 13px;
    }

    .prize-draw-label {
        font-size: 13px;
    }

    .prize-draw-text {
        font-size: 15px;
    }
}

.admin-section h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
}

.admin-section .admin-hint {
    margin: 0 0 8px;
    font-size: 13px;
    color: #888;
}

.admin-section #sponsor-kakao-url {
    width: 100%;
    margin-bottom: 8px;
}

.admin-btn {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #444;
    background: #1a1a1a;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* 상품 NEW 뱃지 */
.prize-new-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #e53e3e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    margin-left: 6px;
    vertical-align: middle;
    animation: newPulse 1.2s ease-in-out infinite;
}

.prize-new-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}

@keyframes newPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* 상품 NEW 토스트 */
.prize-toast {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 400px;
    z-index: 9998;
    transition: top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.prize-toast.show {
    top: 16px;
    pointer-events: auto;
}

.prize-toast-inner {
    background: #1a1a1a;
    border: 0.5px solid #f6ad0066;
    border-left: 3px solid #f6ad00;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.prize-toast-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.prize-toast-text {
    flex: 1;
    min-width: 0;
}

.prize-toast-title {
    color: #f6ad00;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.prize-toast-desc {
    color: #888;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prize-toast-close {
    background: none;
    border: none;
    color: #555;
    font-size: 17px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
    .prize-toast {
        width: calc(100% - 24px);
    }

    .prize-toast-title {
        font-size: 13px;
    }

    .prize-toast-desc {
        font-size: 11px;
    }
}

/* 홈 화면 (index) */
.page-home .home-page {
    background: #0d0d0d;
    min-height: 100%;
}

.page-home .home-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 12px 80px;
}

.page-home .home-card,
.page-home .home-wod-card,
.page-home .home-challenge-card {
    background: #161616 !important;
    border-radius: 12px !important;
    border: 0.5px solid #222 !important;
    padding: 14px !important;
    box-shadow: none !important;
    position: relative;
}

.page-home .home-card-challenge,
.page-home .home-challenge-card {
    border: 0.5px solid #222 !important;
}

.page-home .home-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.page-home .home-card-gym {
    font-size: 13px;
    color: #888;
}

.page-home .home-card-title {
    font-size: 17px;
    font-weight: 500;
    color: #f0f0f0;
    margin-bottom: 4px;
    text-transform: none !important;
}

.page-home .home-card-desc {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.page-home .home-divider {
    height: 0.5px;
    background: #1e1e1e;
    margin: 8px 0;
}

.page-home .home-rank-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.page-home .home-rank-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.page-home .home-rank-medal {
    font-size: 15px;
    width: 20px;
}

.page-home .home-rank-name {
    font-size: 15px;
    color: #ffffff;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.page-home .home-rank-name .lb-name-row {
    flex: 0 1 auto;
}

.page-home .home-rank-name .lb-name {
    color: #ffffff;
}

.page-home .home-rank-val {
    font-size: 15px;
    font-weight: 500;
    flex-shrink: 0;
}

.page-home .home-challenge-card .home-rank-val {
    color: #f6ad00 !important;
}

.page-home .home-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 500;
}

.page-home .home-badge-green {
    background: #10b98122;
    color: #10b981;
    border: 0.5px solid #10b98144;
}

.page-home .home-badge-gold {
    background: #f6ad0022;
    color: #f6ad00;
    border: 0.5px solid #f6ad0044;
}

.page-home .home-btn-red {
    display: block;
    width: 100%;
    background: #e53e3e;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 12px;
    cursor: pointer;
    margin-top: 10px;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    box-sizing: border-box;
}

.page-home .home-btn-gold {
    background: #f6ad00;
    color: #111;
}

.page-home .home-btn-outline,
.page-home .btn-prize-check.home-btn-outline {
    display: block;
    width: 100%;
    background: transparent !important;
    border: 0.5px solid #333 !important;
    border-radius: 10px;
    color: #888 !important;
    font-size: 15px;
    font-weight: 500;
    padding: 12px;
    cursor: pointer;
    margin-top: 6px;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    box-sizing: border-box;
    animation: none;
    box-shadow: none;
}

#myroom-attendance-open {
  position: relative;
}

.att-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e53e3e;
  pointer-events: none;
}

.att-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.att-overlay[hidden] {
  display: none !important;
}

.att-popup {
  position: relative;
  background: #161616;
  border-radius: 16px;
  border: 0.5px solid #2a2a2a;
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  max-height: 90vh;
  overflow-y: auto;
}

.att-ph {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 0.5px solid #222;
}

.att-title {
  font-size: 17px;
  font-weight: 500;
  color: #f0f0f0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.att-sub {
  font-size: 13px;
  color: #555;
  margin-top: 3px;
}

.att-close {
  background: none;
  border: none;
  font-size: 22px;
  color: #555;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.att-streak-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #111;
  border-bottom: 0.5px solid #1e1e1e;
}

.att-streak-num {
  font-size: 22px;
  font-weight: 500;
  color: #f6ad00;
}

.att-streak-label {
  font-size: 13px;
  color: #555;
  margin-top: 2px;
}

.att-badge {
  font-size: 13px;
  background: #e53e3e22;
  border: 0.5px solid #e53e3e44;
  color: #e53e3e;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 4px;
}

.att-coin-range {
  font-size: 13px;
  color: #f6ad00;
}

.att-calendar {
  padding: 14px 16px;
}

.att-month {
  font-size: 13px;
  color: #555;
  text-align: center;
  margin-bottom: 10px;
}

.att-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 6px;
}

.att-weekdays span {
  font-size: 11px;
  color: #444;
  text-align: center;
}

.att-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.att-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 13px;
  border-radius: 6px;
}

.att-day-num {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 8px;
  color: #555;
}

.att-stamp {
  position: absolute;
  inset: 2px;
  border: 1.5px solid #e53e3e66;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.att-stamp-today {
  border-color: #e53e3e;
  border-width: 2px;
  background: #e53e3e11;
}

.att-stamp-txt {
  font-size: 11px;
  font-weight: 700;
  color: #e53e3e88;
  transform: rotate(-25deg);
  letter-spacing: -0.5px;
  line-height: 1;
}

.att-stamp-today .att-stamp-txt {
  color: #e53e3e;
}

.att-rewards {
  padding: 0 16px 12px;
}

.att-rewards-title {
  font-size: 13px;
  color: #555;
  margin-bottom: 8px;
}

.att-rewards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.att-rw {
  background: #111;
  border-radius: 8px;
  border: 0.5px solid #222;
  padding: 7px 3px;
  text-align: center;
}

.att-rw-done {
  border-color: #e53e3e33;
}

.att-rw-current {
  background: #f6ad0011;
  border: 1px solid #f6ad0066;
}

.att-rw-label {
  font-size: 11px;
  color: #555;
  margin-bottom: 2px;
}

.att-rw-done .att-rw-label {
  color: #e53e3e55;
}

.att-rw-current .att-rw-label {
  color: #f6ad00;
}

.att-rw-coin {
  font-size: 13px;
  color: #f6ad00;
  font-weight: 500;
}

.att-rw-step {
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  width: 100%;
}

.att-rw-step:disabled {
  cursor: default;
  opacity: 0.55;
}

.att-rw-claimable {
  background: #f6ad0018;
  border: 1px solid #f6ad0099;
  box-shadow: 0 0 12px #f6ad0033;
  opacity: 1;
}

.att-rw-claimable .att-rw-label,
.att-rw-claimable .att-rw-coin {
  color: #f6ad00;
}

.att-rw-claimed {
  border-color: #e53e3e33;
  opacity: 0.7;
}

.att-rw-claimed .att-rw-label {
  color: #e53e3e88;
}

.att-rw-locked {
  opacity: 0.45;
}

.att-roulette {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  border-radius: 12px;
}

.att-roulette[hidden] {
  display: none !important;
}

.att-roulette-box {
  text-align: center;
  padding: 20px;
}

.att-roulette-title {
  font-size: 13px;
  color: #888;
  margin-bottom: 10px;
}

.att-roulette-val {
  font-size: 36px;
  font-weight: 700;
  color: #f6ad00;
  line-height: 1.2;
  min-height: 44px;
}

.att-roulette-msg {
  margin-top: 10px;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}

.att-btn-area {
  padding: 0 16px 16px;
}

.att-btn {
  width: 100%;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  padding: 12px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.att-btn-active {
  background: #e53e3e;
  color: #fff;
}

.att-btn-done {
  background: #1a1a1a;
  border: 0.5px solid #2a2a2a;
  color: #555;
  cursor: default;
}

.pcard-stage {
  position: relative;
  background: #0f0f1a;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 20px 20px 16px;
  padding-left: 32px;
}

.pcard-donation {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #1a0a0a;
  border: 1px solid #e53e3e;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 14px;
  color: #e53e3e;
  font-weight: 600;
}
.pcard-donation.gold {
  border-color: #f6ad00;
  color: #f6ad00;
  background: #1a1200;
  padding: 4px 12px;
  font-size: 14px;
}
.pcard-donation.none {
  border-color: #333;
  color: #555;
  background: #111;
  padding: 4px 12px;
  font-size: 14px;
}

.pcard-info {
  padding: 12px 16px 8px;
}

.pcard-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.pcard-name {
  font-size: 17px;
  font-weight: 500;
  color: #f0f0f0;
}

.pcard-weapon {
  font-size: 13px;
  color: #666;
}

.pcard-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 16px;
}

.pcard-stat {
  background: #111;
  border-radius: 10px;
  border: 0.5px solid #1e1e1e;
  padding: 10px;
  text-align: center;
}

.pcard-stat-val {
  font-size: 15px;
  font-weight: 500;
  color: #f0f0f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcard-stat-label {
  font-size: 13px;
  color: #444;
  margin-top: 2px;
}

.pcard-dm {
  padding: 8px 16px 4px;
}

.pcard-dm-btn {
  width: 100%;
  background: #161616;
  border: 0.5px solid #2a2a2a;
  border-radius: 10px;
  color: #888;
  font-size: 15px;
  padding: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.sub-hdr-title,
.mp-sub-hdr-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.sub-hdr-nickname,
.mp-sub-hdr-nickname {
  font-size: 13px;
  font-weight: 600;
  color: #666;
}

.noti-bell-btn i,
.mp-sub-hdr-bell i {
  font-size: 22px;
  color: #666;
}

.noti-wrap { position:relative; }
.noti-bell-btn { background:none; border:none; font-size:22px; color:#888; cursor:pointer; position:relative; padding:4px; display:flex; align-items:center; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.noti-badge { position:absolute; top:-2px; right:-2px; background:#e53e3e; color:#fff; font-size:11px; font-weight:700; border-radius:99px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid #0d0d0d; }
.noti-panel { position:absolute; top:36px; right:0; width:300px; background:#161616; border-radius:12px; border:0.5px solid #2a2a2a; overflow:hidden; z-index:500; box-shadow:0 8px 32px rgba(0,0,0,0.5); }
.noti-panel-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:0.5px solid #1e1e1e; }
.noti-panel-title { font-size:15px; font-weight:500; color:#f0f0f0; }
.noti-read-all { background:none; border:none; font-size:13px; color:#555; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.noti-panel-list { max-height:360px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.noti-item { display:flex; align-items:flex-start; gap:8px; padding:12px 14px; border-bottom:0.5px solid #111; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.noti-item.unread { background:#1a1a1a; }
.noti-dot { width:6px; height:6px; border-radius:50%; background:transparent; flex-shrink:0; margin-top:5px; }
.noti-item.unread .noti-dot { background:#e53e3e; }
.noti-icon-wrap { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.noti-type-dm { background:#e53e3e22; border:0.5px solid #e53e3e33; }
.noti-type-comment { background:#10b98122; border:0.5px solid #10b98133; }
.noti-type-reply { background:#f6ad0022; border:0.5px solid #f6ad0033; }
.noti-content { flex:1; min-width:0; }
.noti-text { font-size:13px; color:#aaa; line-height:1.5; margin-bottom:2px; }
.noti-text strong { color:#f0f0f0; }
.noti-time { font-size:11px; color:#444; }
.noti-loading { padding:20px; text-align:center; font-size:15px; color:#444; }
.noti-empty { padding:32px 16px; text-align:center; color:#333; font-size:15px; display:flex; flex-direction:column; align-items:center; gap:8px; }

.chat-page-tabs { display:flex; background:#111; border-bottom:0.5px solid #1e1e1e; flex-shrink:0; }
.chat-page-tab { flex:1; padding:10px; text-align:center; font-size:15px; color:#555; cursor:pointer; border-bottom:2px solid transparent; background:none; border-top:none; border-left:none; border-right:none; font-family:'Bebas Neue',sans-serif; letter-spacing:0.05em; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.chat-page-tab.active { color:#e53e3e; border-bottom-color:#e53e3e; }
.chat-dm-badge { background:#e53e3e; color:#fff; font-size:11px; border-radius:99px; padding:1px 5px; margin-left:4px; font-family:'Inter',sans-serif; }

#dm-list-view,
#dm-chat-view {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: #0d0d0d;
}

.dm-messages {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.dm-chat-header { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:0.5px solid #1e1e1e; flex-shrink:0; }
.dm-back-btn { background:none; border:none; font-size:22px; color:#888; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.dm-chat-title { font-size:17px; font-weight:500; color:#f0f0f0; }
.dm-list-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:0.5px solid #1a1a1a; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.dm-list-avatar { width:44px; height:44px; border-radius:50%; background:#1a1a1a; border:0.5px solid #222; display:flex; align-items:center; justify-content:center; font-size:15px; color:#888; flex-shrink:0; }
.dm-list-content { flex:1; min-width:0; }
.dm-list-name-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.dm-list-name { font-size:15px; font-weight:500; color:#f0f0f0; }
.dm-list-time { font-size:11px; color:#333; }
.dm-list-preview { font-size:13px; color:#444; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-list-preview.unread { color:#aaa; }
.dm-list-unread { background:#e53e3e; color:#fff; font-size:11px; border-radius:99px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 4px; flex-shrink:0; }

.dex-detail-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.dex-detail-box {
  background: #161616;
  border-radius: 14px;
  border: 0.5px solid #2a2a2a;
  padding: 24px 20px;
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.dex-detail-status {
  font-size: 13px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dex-detail-status.unlocked {
  background: #10b98122;
  border: 0.5px solid #10b98144;
  color: #10b981;
}
.dex-detail-status.locked {
  background: #33333322;
  border: 0.5px solid #33333344;
  color: #555;
}
.dex-detail-status.equipped {
  background: #10b98122;
  border: 0.5px solid #10b98144;
  color: #10b981;
}
.dex-detail-status.owned {
  background: #3a3a6a22;
  border: 0.5px solid #3a3a6a44;
  color: #8888cc;
}
.dex-detail-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  image-rendering: pixelated;
}
.dex-detail-img--char {
  width: 150px;
  height: 186px;
}
.dex-detail-name {
  font-size: 17px;
  font-weight: 500;
  color: #f0f0f0;
}
.dex-detail-acquire {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #111;
  border-radius: 10px;
  border: 0.5px solid #1e1e1e;
  padding: 10px 14px;
  width: 100%;
  text-align: center;
}
.dex-detail-acquire-label {
  font-size: 13px;
  color: #555;
}
.dex-detail-acquire-value {
  font-size: 15px;
  color: #f6ad00;
  font-weight: 500;
}
.dex-detail-equip-btn {
  background: #e53e3e;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.dex-detail-equipped-btn {
  background: #1a1a1a;
  border: 0.5px solid #2a2a2a;
  border-radius: 10px;
  color: #555;
  font-size: 15px;
  padding: 10px;
  width: 100%;
  cursor: default;
  font-family: inherit;
}
.dex-detail-dismiss-btn {
  background: #161616;
  border: 0.5px solid #2a2a2a;
  color: #888;
}
.dex-detail-close {
  background: #e53e3e;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 32px;
  cursor: pointer;
  width: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.home-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  margin-top: 12px;
  padding: 0 2px;
}
.home-date-label {
  font-size: 15px;
  color: #888;
  font-weight: 500;
}
.home-date-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-wod-count {
  font-size: 13px;
  color: #555;
}
.home-wod-count-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  background: #222;
  color: #666;
  border: 0.5px solid #2a2a2a;
}

.home-wod-slider-wrap {
  position: relative;
  overflow: hidden;
}
.home-wod-slider {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.home-wod-slider::-webkit-scrollbar {
  display: none;
}
.home-wod-card {
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: start;
  touch-action: manipulation;
}
.home-wod-card-multi {
  width: 88%;
}

.home-slide-hint {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, transparent, rgba(13, 13, 13, 0.9));
  pointer-events: none;
}
.home-slide-arrow {
  font-size: 40px;
  color: #888;
  animation: arrowPulse 1.5s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.9;
  }
}

.home-rank-val-red {
  color: #e53e3e !important;
}

.home-rank-val-white {
  color: #ffffff !important;
}

.page-home .home-challenge-card .home-rank-val.home-rank-val-red {
  color: #e53e3e !important;
}

.page-home .home-challenge-card .home-rank-val.home-rank-val-white {
  color: #ffffff !important;
}

.page-home .home-wod-card .home-rank-val {
  color: #888 !important;
}

.page-home .home-wod-card .home-rank-val.home-rank-val-red {
  color: #e53e3e !important;
}

.page-home .home-wod-card .home-rank-val.home-rank-val-white {
  color: #ffffff !important;
}

.home-record-count-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 13px;
  color: #555;
  background: #1a1a1a;
  border: 0.5px solid #2a2a2a;
  border-radius: 20px;
  padding: 2px 8px;
}

.page-home .home-rank-val {
  font-size: 15px;
  font-weight: 500;
}
.page-home .home-card-title,
.home-card-title,
.home-wod-card .home-card-title,
.page-home .home-wod-card .home-card-title,
.home-challenge-card .home-card-title,
.page-home .home-challenge-card .home-card-title {
  font-size: 20px;
  font-weight: 500;
  color: #f0f0f0;
  margin-bottom: 6px;
  text-transform: none !important;
  font-family: var(--font-body);
}
.page-home .home-card,
.home-card {
  margin-bottom: 12px;
}
.page-home .home-challenge-card,
.home-challenge-card {
  margin-top: 0;
}
.page-home .home-card-desc {
  font-size: 15px;
  color: #ccc;
  line-height: 1.7;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-btn-prize {
  display: block;
  width: 100%;
  background: transparent;
  border: 0.5px solid #f6ad0066;
  border-radius: 10px;
  color: #f6ad00;
  font-size: 15px;
  font-weight: 500;
  padding: 12px;
  cursor: pointer;
  margin-top: 8px;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  animation: prizePulse 2s ease-in-out infinite;
}

.home-btn-winner {
  display: block;
  width: 100%;
  background: #f6ad00;
  border: none;
  border-radius: 10px;
  color: #111;
  font-size: 15px;
  font-weight: 500;
  padding: 12px;
  cursor: pointer;
  margin-top: 10px;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.hw-drawn-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #1a1a00;
  border: 1px solid #f6ad00;
  border-radius: 20px;
  padding: 3px 10px;
}

.hw-drawn-badge span {
  font-size: 13px;
  color: #f6ad00;
  font-weight: 500;
}

.home-winner-panel {
  background: #0d0d0d;
  border-top: 0.5px solid #222;
  padding: 12px 14px 14px;
  margin-top: 10px;
}

.hw-winners-label {
  font-size: 13px;
  color: #f6ad00;
  font-weight: 500;
  margin: 0 0 10px;
}

.hw-winner-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1a1a1a;
  border: 0.5px solid #2a2a2a;
  border-radius: 7px;
  padding: 8px 10px;
  margin-bottom: 5px;
}

.hw-winner-rank {
  flex-shrink: 0;
  min-width: 1.25em;
  text-align: center;
}

.hw-winner-name {
  color: #fff;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.hw-winner-prize {
  color: #f6ad00;
  font-size: 13px;
  flex-shrink: 0;
  text-align: right;
}

.hw-winners-drawn-at {
  font-size: 12px;
  color: #3a3a3a;
  text-align: right;
  margin: 6px 0 0;
}
@keyframes prizePulse {
  0%,
  100% {
    border-color: #f6ad0066;
    box-shadow: none;
  }
  50% {
    border-color: #f6ad00;
    box-shadow: 0 0 8px #f6ad0033;
  }
}

.wod-admin-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0.5px solid #1e1e1e;
}
.wod-admin-btn {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #1a1a1a;
  border: 0.5px solid #2a2a2a;
  color: #888;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.wod-admin-btn-delete {
  color: #e53e3e;
  border-color: #e53e3e33;
  background: #e53e3e11;
}

.detail-admin-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 100%;
}
.detail-admin-btn {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  background: #1a1a1a;
  border: 0.5px solid #2a2a2a;
  color: #888;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.detail-admin-btn-delete {
  color: #e53e3e;
  border-color: #e53e3e33;
  background: #e53e3e11;
}

.title-slayer,
.title-massacre,
.title-conqueror {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 3px;
  background: #1a1a1a;
  border: 0.5px solid #333;
  color: #aaa;
}

/* 칭호 스킨 - 일반 단색 */
.title-skin-red { border-color: #e53e3e !important; color: #e53e3e !important; }
.title-skin-gold { border-color: #f6ad00 !important; color: #f6ad00 !important; }
.title-skin-green { border-color: #10b981 !important; color: #10b981 !important; }
.title-skin-blue { border-color: #3b82f6 !important; color: #3b82f6 !important; }
.title-skin-purple { border-color: #8b5cf6 !important; color: #8b5cf6 !important; }
.title-skin-pink { border-color: #ec4899 !important; color: #ec4899 !important; }

/* 칭호 스킨 - 레어 글로우 */
.title-skin-fire {
  border-color: #e53e3e !important;
  color: #f6ad00 !important;
  animation: title-fire 1.5s ease-in-out infinite;
}
.title-skin-ice {
  border-color: #7dd3fc !important;
  color: #bfdbfe !important;
  animation: title-ice 2s ease-in-out infinite;
}

/* 칭호 스킨 - 에픽 */
.title-skin-gold-pulse {
  border-color: #f6ad00 !important;
  color: #f6ad00 !important;
  animation: title-gold-pulse 2s ease-in-out infinite;
}
.title-skin-dark {
  border-color: #8b5cf6 !important;
  color: #c4b5fd !important;
  box-shadow: 0 0 6px 1px #8b5cf688;
}

/* 칭호 스킨 - 레전드 */
.title-skin-rainbow {
  color: #fff !important;
  animation: title-rainbow-border 2s linear infinite;
}
.title-skin-void {
  border-color: #8b5cf6 !important;
  color: #fff !important;
  background: linear-gradient(90deg,#1a0533,#7c3aed,#c026d3,#7c3aed,#1a0533) !important;
  background-size: 200% !important;
  animation: title-rainbow-bg 2.5s linear infinite;
}
.title-skin-lava {
  border-color: #e53e3e !important;
  color: #fff !important;
  background: linear-gradient(90deg,#7c1a1a,#e53e3e,#f6ad00,#e53e3e,#7c1a1a) !important;
  background-size: 200% !important;
  animation: title-rainbow-bg 2s linear infinite;
}
.title-skin-glacier {
  border-color: #7dd3fc !important;
  color: #fff !important;
  background: linear-gradient(90deg,#0c2340,#1d4ed8,#7dd3fc,#1d4ed8,#0c2340) !important;
  background-size: 200% !important;
  animation: title-rainbow-bg 3s linear infinite;
}

/* 일반 신규 2종 */
.title-skin-orange { border-color: #ff8c42 !important; color: #ff8c42 !important; }
.title-skin-mint { border-color: #5eead4 !important; color: #5eead4 !important; }

/* 고급 신규 4종 (화염/빙결은 기존 유지) */
.title-skin-thunder {
  border-color: #facc15 !important;
  color: #fde047 !important;
  animation: title-thunder 1.2s ease-in-out infinite;
}
.title-skin-poison {
  border-color: #84cc16 !important;
  color: #bef264 !important;
  animation: title-poison 1.8s ease-in-out infinite;
}
.title-skin-sand {
  border-color: #d4a574 !important;
  color: #e8c99b !important;
  animation: title-fire 2.2s ease-in-out infinite;
}
.title-skin-forest {
  border-color: #16a34a !important;
  color: #4ade80 !important;
  animation: title-poison 2s ease-in-out infinite;
}

/* 희귀 신규 4종 (황금/어둠은 기존 유지) */
.title-skin-abyss {
  border-color: #1e1b4b !important;
  color: #a5b4fc !important;
  box-shadow: 0 0 8px 2px #312e8188;
}
.title-skin-mist {
  border-color: #cbd5e1 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 0 6px 1px #cbd5e166;
}
.title-skin-coral {
  border-color: #fb7185 !important;
  color: #fda4af !important;
  animation: title-fire 2.5s ease-in-out infinite;
}
.title-skin-amethyst {
  border-color: #a855f7 !important;
  color: #d8b4fe !important;
  box-shadow: 0 0 8px 2px #a855f788;
}

/* 영웅 신규 1종 (레인보우/보이드/용암/빙하는 기존 유지) */
.title-skin-aurora {
  color: #fff !important;
  background: linear-gradient(90deg,#10b981,#3b82f6,#8b5cf6,#10b981) !important;
  background-size: 200% !important;
  animation: title-rainbow-bg 3s linear infinite;
}

/* 전설 (신규 최상위 등급, 5종 전부 신규) */
.title-skin-galaxy {
  color: #fff !important;
  background: linear-gradient(90deg,#0f0c29,#302b63,#24243e,#302b63,#0f0c29) !important;
  background-size: 200% !important;
  animation: title-rainbow-bg 3s linear infinite, title-myth-glow 2s ease-in-out infinite;
}
.title-skin-solarflare {
  color: #fff !important;
  background: linear-gradient(90deg,#ff0000,#ff8c00,#ffd700,#ff8c00,#ff0000) !important;
  background-size: 200% !important;
  animation: title-rainbow-bg 1.8s linear infinite, title-myth-glow 1.5s ease-in-out infinite;
}
.title-skin-blackhole {
  color: #fff !important;
  background: linear-gradient(90deg,#000000,#4c1d95,#000000,#4c1d95,#000000) !important;
  background-size: 200% !important;
  animation: title-rainbow-bg 2.2s linear infinite, title-myth-glow 2.2s ease-in-out infinite;
}
.title-skin-prism {
  color: #fff !important;
  animation: title-rainbow-border 1.5s linear infinite, title-myth-glow 1.8s ease-in-out infinite;
}
.title-skin-apocalypse {
  color: #fff !important;
  background: linear-gradient(90deg,#7f1d1d,#dc2626,#000000,#dc2626,#7f1d1d) !important;
  background-size: 200% !important;
  animation: title-rainbow-bg 2s linear infinite, title-myth-glow 1.6s ease-in-out infinite;
}

@keyframes title-thunder {
  0%,100% { box-shadow: 0 0 4px 1px #facc15; }
  50% { box-shadow: 0 0 10px 4px #fde047; }
}
@keyframes title-poison {
  0%,100% { box-shadow: 0 0 3px 1px #84cc16; }
  50% { box-shadow: 0 0 9px 3px #bef264; }
}
@keyframes title-myth-glow {
  0%,100% { box-shadow: 0 0 6px 2px rgba(255,255,255,0.4); }
  50% { box-shadow: 0 0 14px 5px rgba(255,255,255,0.7); }
}

@keyframes title-fire {
  0%{box-shadow:0 0 4px 1px #f6ad00,0 0 8px 2px #e53e3e}
  50%{box-shadow:0 0 8px 3px #e53e3e,0 0 14px 4px #f6ad00}
  100%{box-shadow:0 0 4px 1px #f6ad00,0 0 8px 2px #e53e3e}
}
@keyframes title-ice {
  0%{box-shadow:0 0 4px 1px #7dd3fc,0 0 8px 2px #bfdbfe}
  50%{box-shadow:0 0 8px 3px #bfdbfe,0 0 14px 4px #7dd3fc}
  100%{box-shadow:0 0 4px 1px #7dd3fc,0 0 8px 2px #bfdbfe}
}
@keyframes title-gold-pulse {
  0%{box-shadow:0 0 4px 1px #f6ad00}
  50%{box-shadow:0 0 10px 3px #f6ad00,0 0 18px 5px #f6e000}
  100%{box-shadow:0 0 4px 1px #f6ad00}
}
@keyframes title-rainbow-border {
  0%{border-color:#e53e3e}16%{border-color:#f6ad00}33%{border-color:#10b981}
  50%{border-color:#3b82f6}66%{border-color:#8b5cf6}83%{border-color:#ec4899}100%{border-color:#e53e3e}
}
@keyframes title-rainbow-bg {
  0%{background-position:0% 50%}100%{background-position:200% 50%}
}

.myroom-char-title {
  text-align: center;
  margin-top: 18px;
  margin-bottom: 6px;
}

/* 상점 */
.page-shop.main-content {
  max-width: 640px;
}

.shop-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 32px;
}

.shop-header {
  background: #161616;
  border: 0.5px solid #2a2a2a;
  border-radius: 12px;
  padding: 18px 20px;
}

.shop-coin-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shop-coin-label {
  font-size: 13px;
  color: #888;
}

.shop-coin-value {
  font-size: 28px;
  font-weight: 700;
  color: #f6ad00;
  letter-spacing: -0.02em;
}

.shop-tabs {
  display: flex;
  gap: 8px;
  padding: 0 2px;
}

.shop-tab {
  flex: 1;
  padding: 11px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.shop-tab.on {
  color: #fff;
  background: #1a1a1a;
  border-color: #e53e3e;
}

.shop-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.synth-type-btn {
  flex: 1;
  background: #1a1a1a;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 9px;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  text-align: center;
  cursor: pointer;
}

.synth-type-btn.on {
  background: rgba(229, 62, 62, 0.1);
  border-color: rgba(229, 62, 62, 0.35);
  color: #e53e3e;
}

.synth-slot {
  flex: 1;
  min-height: 90px;
  background: #111;
  border: 1px dashed #2a2a2a;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  position: relative;
}

.synth-btn {
  width: calc(100% - 32px);
  margin: 0 16px 14px;
  border: none;
  border-radius: 12px;
  padding: 13px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.synth-btn.active {
  background: #e53e3e;
  color: #fff;
}

.synth-btn.off {
  background: #1a1a1a;
  color: #333;
  cursor: not-allowed;
}

#synth-popup.is-open {
  display: flex !important;
}

.shop-section {
  background: #161616;
  border: 0.5px solid #2a2a2a;
  border-radius: 12px;
  padding: 18px 16px;
}

.shop-section-title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.shop-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.shop-section-header .shop-section-title {
  margin: 0;
}

.shop-history-clear {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 0.5px solid #333;
  border-radius: 8px;
  background: #0d0d0d;
  color: #888;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.shop-history-clear:hover {
  color: #e53e3e;
  border-color: #e53e3e44;
}

.shop-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: #0d0d0d;
  border: 0.5px solid #333;
  font-size: 13px;
  color: #f6ad00;
  vertical-align: middle;
}

.shop-gacha-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shop-gacha-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  border-radius: 10px;
  background: #0d0d0d;
  border: 0.5px solid #2a2a2a;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s, transform 0.15s;
}

.shop-gacha-card:not(:disabled):hover {
  border-color: #e53e3e;
  transform: translateY(-1px);
}

.shop-gacha-card:not(:disabled):active {
  transform: translateY(0);
}

.shop-gacha-card:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.shop-gacha-card--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.shop-gacha-icon {
  font-size: 32px;
  line-height: 1;
}

.shop-gacha-name {
  font-size: 15px;
  font-weight: 700;
}

.shop-gacha-desc {
  font-size: 13px;
  color: #888;
}

.shop-gacha-cost {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: #f6ad00;
}

.shop-gacha-btn {
  margin-top: 6px;
  width: 100%;
}

.shop-gacha-soon {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.04em;
}

.shop-recent-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-recent-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: #0d0d0d;
  border: 0.5px solid #2a2a2a;
}

.shop-recent-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shop-recent-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: #666;
}

.shop-recent-date {
  color: #666;
}

.shop-skin-count-row {
  display: flex;
  align-items: center;
}

.shop-skin-count {
  font-size: 13px;
  font-weight: 700;
  color: #f6ad00;
}

.shop-skin-preview--compact {
  min-height: 36px;
  padding: 6px;
}

.shop-skin-btn--synth {
  background: #161616;
  border-color: #f6ad0044;
  color: #f6ad00;
}

.shop-empty--compact {
  padding: 20px 16px;
}

.shop-modal-coin-reward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #f6ad00;
}

.shop-modal-char-reward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.shop-skin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shop-skin-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 10px;
  background: #0d0d0d;
  border: 0.5px solid #2a2a2a;
}

.shop-skin-card--equipped {
  border-color: #f6ad00;
  box-shadow: 0 0 0 1px #f6ad0033, inset 0 0 20px #f6ad0008;
}

.shop-skin-equipped-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #0d0d0d;
  background: #f6ad00;
  padding: 2px 7px;
  border-radius: 999px;
}

.shop-skin-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 52px;
}

.shop-skin-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.shop-skin-grade {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 0.5px solid #333;
  color: #aaa;
  background: #161616;
}

.shop-skin-grade--normal { color: #aaa; }
.shop-skin-grade--rare { color: #3b82f6; border-color: #3b82f644; }
.shop-skin-grade--epic { color: #8b5cf6; border-color: #8b5cf644; }
.shop-skin-grade--legend { color: #f6ad00; border-color: #f6ad0044; }

.shop-skin-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px;
  border-radius: 8px;
  background: #161616;
  border: 0.5px solid #222;
  overflow: hidden;
}

.shop-skin-preview .title-slayer {
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-skin-actions {
  display: flex;
  gap: 6px;
}

.shop-skin-btn {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  border: 0.5px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.shop-skin-btn--primary {
  background: #e53e3e;
  border-color: #e53e3e;
  color: #fff;
}

.shop-skin-btn--ghost {
  background: transparent;
  border-color: #333;
  color: #888;
}

.shop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px;
  text-align: center;
}

.shop-empty-icon {
  font-size: 36px;
  line-height: 1;
  opacity: 0.7;
}

.shop-empty-text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.shop-empty-sub {
  margin: 0;
  font-size: 13px;
  color: #666;
}

.shop-modal-open {
  overflow: hidden;
}

.shop-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.shop-modal-overlay[hidden] {
  display: none !important;
}

.shop-modal {
  position: relative;
  width: min(100%, 300px);
  max-width: 300px;
  padding: 40px 28px;
  border-radius: 14px;
  background: #161616;
  border: 0.5px solid #2a2a2a;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}

.shop-modal-glow {
  position: absolute;
  inset: -40px;
  pointer-events: none;
  opacity: 0.35;
  background: radial-gradient(circle at center, #e53e3e55 0%, transparent 70%);
}

.shop-modal-glow--normal { background: radial-gradient(circle at center, #aaaaaa44 0%, transparent 70%); }
.shop-modal-glow--rare { background: radial-gradient(circle at center, #3b82f655 0%, transparent 70%); }
.shop-modal-glow--epic { background: radial-gradient(circle at center, #8b5cf655 0%, transparent 70%); }
.shop-modal-glow--legend { background: radial-gradient(circle at center, #f6ad0055 0%, transparent 70%); }
.shop-modal-glow--duplicate { background: radial-gradient(circle at center, #55555555 0%, transparent 70%); }

.shop-modal-title {
  position: relative;
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.shop-modal-grade {
  position: relative;
  margin: 12px 0;
  font-size: 22px;
  font-weight: 700;
  color: #f6ad00;
}

.shop-modal-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin: 16px 0;
  padding: 12px;
  font-size: 28px;
  border-radius: 10px;
  background: #0d0d0d;
  border: 0.5px solid #2a2a2a;
}

.shop-modal-badge {
  animation: shop-result-pop 0.5s ease-out;
}

@keyframes shop-result-pop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.shop-modal-message {
  position: relative;
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.5;
  color: #aaa;
}

.shop-modal-close {
  position: relative;
  padding: 6px 20px;
  border-radius: 20px;
  border: 0.5px solid #333;
  background: transparent;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

@media (max-width: 480px) {
  .shop-gacha-grid,
  .shop-skin-grid {
    grid-template-columns: 1fr;
  }
}

/* DM list & conversation messages */
.dm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 0.5px solid #111;
  cursor: pointer;
}

.dm-item:active {
  background: #111;
}

.dm-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1e1e1e;
  border: 0.5px solid #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #888;
  flex-shrink: 0;
  overflow: hidden;
}

.dm-avatar--header {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.dm-info {
  flex: 1;
  min-width: 0;
}

.dm-name {
  font-size: 15px;
  font-weight: 500;
  color: #f0f0f0;
  margin-bottom: 2px;
}

.dm-preview {
  font-size: 13px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.dm-time {
  font-size: 11px;
  color: #333;
}

.dm-badge {
  background: #e53e3e;
  color: #fff;
  font-size: 11px;
  border-radius: 20px;
  padding: 1px 7px;
}

.msg-group {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.msg-group.mine {
  flex-direction: row-reverse;
}

.msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1e1e1e;
  border: 0.5px solid #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  overflow: hidden;
}

.msg-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 72%;
}

.msg-group.mine .msg-body {
  align-items: flex-end;
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.msg-group.mine .msg-meta {
  flex-direction: row-reverse;
}

.msg-nick {
  font-size: 12px;
  font-weight: 500;
  color: #aaa;
}

.msg-title {
  font-size: 11px;
  color: #666;
  background: #1e1e1e;
  border: 0.5px solid #2a2a2a;
  border-radius: 4px;
  padding: 1px 6px;
}

.msg-time-inline {
  font-size: 10px;
  color: #444;
}

.msg-bubble {
  background: #1e1e1e;
  border: 0.5px solid #2a2a2a;
  border-radius: 12px;
  border-bottom-left-radius: 3px;
  padding: 8px 12px;
  font-size: 13px;
  color: #e0e0e0;
  line-height: 1.5;
  word-break: break-word;
}

.msg-group.mine .msg-bubble {
  background: #e53e3e;
  border: none;
  border-radius: 12px;
  border-bottom-right-radius: 3px;
  color: #fff;
}

.msg-bubble--gift {
  background: #1a1a2e !important;
  border: 1px solid #f6ad00;
  text-align: center;
  padding: 14px 16px !important;
  min-width: 150px;
}

.msg-group.mine .msg-bubble--gift {
  background: #1a1a2e !important;
  border: 1px solid #f6ad00;
  color: #e0e0e0;
}

.gift-icon { font-size: 28px; margin-bottom: 6px; }
.gift-label { font-size: 14px; font-weight: 700; color: #f6ad00; margin-bottom: 4px; }
.gift-message { font-size: 11px; color: #888; margin-bottom: 10px; }
.gift-claim-btn {
  background: #f6ad00;
  color: #191919;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
}
.gift-claim-btn:disabled { background: #2a2a2a; color: #888; cursor: default; }
.gift-sent { font-size: 11px; color: #666; margin-top: 4px; }
.gift-sent.claimed {
    color: #4ade80;
    font-size: 12px;
    margin-top: 4px;
}

.msg-avatar .user-weapon-icon,
.dm-avatar .user-weapon-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.g-announce {
  font-size: 13px;
  text-align: center;
  padding: 6px 12px;
  border-radius: 8px;
  margin: 2px 0;
}

.g-epic {
  background: #1e1530;
  color: #c4b5fd;
}

.g-epic .hl {
  color: #e0d0ff;
  font-weight: 500;
}

.g-legend {
  background: #2a1505;
  color: #f97316;
}

.g-legend .hl {
  color: #fb923c;
  font-weight: 500;
}

.g-skin {
  background: #0e1e16;
  color: #6ee7b7;
}

.g-skin .hl {
  color: #a7f3d0;
  font-weight: 500;
}

.g-low {
  background: #1a1a1a;
  color: #888888;
}

.g-low .hl {
  color: #aaaaaa;
  font-weight: 500;
}

.g-common {
  background: #1a1a1a;
  color: #dddddd;
}

.g-common .hl {
  color: #ffffff;
  font-weight: 500;
}

.g-uncommon {
  background: #0e1e0e;
  color: #4ade80;
}

.g-uncommon .hl {
  color: #86efac;
  font-weight: 500;
}

.g-rare {
  background: #0e1230;
  color: #60a5fa;
}

.g-rare .hl {
  color: #93c5fd;
  font-weight: 500;
}

.g-hero {
  background: #1e0e30;
  color: #c084fc;
}

.g-hero .hl {
  color: #e9d5ff;
  font-weight: 500;
}

.g-relic {
  background: #2a2410;
  color: #CFB53B;
}

.g-relic .hl {
  color: #ddc55f;
  font-weight: 500;
}

.g-fail {
  background: #2a0e0e;
  color: #f87171;
}

.g-fail .hl {
  color: #fca5a5;
  font-weight: 500;
}

.g-uncommon-text { color: #4ade80; }
.g-rare-text { color: #60a5fa; }
.g-hero-text { color: #c084fc; }
.g-legend-text { color: #fde68a; }
.g-relic-text { color: #facc15; }
.g-common-text { color: #dddddd; }
.g-low-text { color: #888888; }

.toast-popup {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e1e1e;
  border: 0.5px solid #333;
  color: #fff;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
  white-space: nowrap;
}

.toast-popup.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.rank-sub-tab {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 11px;
  font-weight: 700;
  color: #555;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.rank-sub-tab.on {
  background: #e53e3e;
  border-color: #e53e3e;
  color: #fff;
}

.dex-title-cat-row .rank-sub-tab {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 22px;
}

/* 캐릭터 등급별 후광 효과 (희귀/영웅/전설/유물) */
.grade-rare {
  animation: glowBlue 2s ease-in-out infinite alternate;
}
@keyframes glowBlue {
  0% { filter: drop-shadow(0 0 3px rgba(96,165,250,0.6)); }
  100% { filter: drop-shadow(0 0 10px rgba(59,130,246,0.9)); }
}
.grade-hero {
  animation: glowPurple 2s ease-in-out infinite alternate;
}
@keyframes glowPurple {
  0% { filter: drop-shadow(0 0 4px rgba(192,132,252,0.7)); }
  100% { filter: drop-shadow(0 0 14px rgba(168,85,247,1.0))
              drop-shadow(0 0 6px rgba(192,132,252,0.6)); }
}
.grade-legend {
  animation: glowOrange 2s ease-in-out infinite alternate;
  position: relative;
}
@keyframes glowOrange {
  0% { filter: drop-shadow(0 0 4px rgba(249,115,22,0.6)); }
  100% { filter: drop-shadow(0 0 12px rgba(249,115,22,0.9))
              drop-shadow(0 0 20px rgba(234,88,12,0.4)); }
}
.grade-legend-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.grade-legend-wrap::before {
  content: '';
  position: absolute;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  background: conic-gradient(
    rgba(249,115,22,0.5),
    rgba(234,88,12,0.35),
    rgba(194,65,12,0.18),
    rgba(249,115,22,0.5)
  );
  animation: haloSpin 3s linear infinite;
  z-index: 0;
  filter: blur(18px);
}
.grade-legend-wrap img {
  position: relative;
  z-index: 1;
}
@keyframes haloSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.grade-mythic-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;isolation:isolate;}
.grade-mythic-wrap::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:160%;height:160%;z-index:0;background:conic-gradient(#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#9400d3,#ff0000);border-radius:50%;filter:blur(36px) opacity(0.4);animation:mythicRainbowSpin 3s linear infinite;}
.grade-mythic-wrap img{position:relative;z-index:2;}
.grade-mythic{animation:mythicGlow 2s ease-in-out infinite alternate;position:relative;z-index:2;}
@keyframes mythicRainbowSpin{100%{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes mythicGlow{0%{filter:drop-shadow(0 0 6px rgba(207,181,59,0.9));}50%{filter:drop-shadow(0 0 10px rgba(184,152,48,1.0));}100%{filter:drop-shadow(0 0 6px rgba(160,130,42,0.9));}}

/* gym_admin — 회원관리 / 기능관리 탭 */
.page-gym-admin .gym-admin-main-tabs {
    display: flex;
    gap: 8px;
    padding: 0 16px 12px;
    border-bottom: 1px solid #1a1a1a;
    background: #0d0d0d;
}

.page-gym-admin .gym-admin-main-tab {
    flex: 1;
    padding: 11px 12px;
    border: 1px solid #222;
    border-radius: 10px;
    background: #111;
    color: #666;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.page-gym-admin .gym-admin-main-tab.is-active {
    background: #e53e3e;
    border-color: #e53e3e;
    color: #fff;
}

.page-gym-admin .gym-admin-main-tab.is-locked {
    color: #555;
    background: #0f0f0f;
    border-color: #1a1a1a;
}

.page-gym-admin .gym-admin-main-tab.is-locked.is-active {
    background: #0f0f0f;
    border-color: #1a1a1a;
    color: #555;
}

.page-gym-admin .gym-admin-main-tab-with-hint {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
}

.page-gym-admin .gym-admin-tab-hint {
    font-size: 11px;
    color: #555;
    line-height: 1.35;
    padding: 0 2px;
}

.page-gym-admin .gym-admin-tab-panel {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-gym-admin .gym-admin-tab-panel[hidden] {
    display: none !important;
}

.page-gym-admin .gym-admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.page-gym-admin .gym-admin-stat-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
}

.page-gym-admin .gym-admin-stat-val {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
}

.page-gym-admin .gym-admin-stat-val--accent { color: #e53e3e; }
.page-gym-admin .gym-admin-stat-val--warn { color: #f6ad00; }

.page-gym-admin .gym-admin-stat-label {
    font-size: 12px;
    color: #555;
    margin-top: 4px;
}

.page-gym-admin .gym-admin-search {
    width: 100%;
    box-sizing: border-box;
    background: #111;
    border: 1px solid #222;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    color: #ddd;
    font-family: inherit;
    outline: none;
}

.page-gym-admin .gym-admin-search::placeholder { color: #555; }

.page-gym-admin .gym-admin-sort-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.page-gym-admin .gym-admin-sort-btn {
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid #2a2a2a;
    background: #111;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    font-family: inherit;
}

.page-gym-admin .gym-admin-sort-btn.is-active {
    background: rgba(229, 62, 62, 0.15);
    border-color: #e53e3e;
    color: #e53e3e;
}

.page-gym-admin .gym-admin-member-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-gym-admin .gym-admin-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    cursor: pointer;
}

.page-gym-admin .gym-admin-member-row[hidden] {
    display: none !important;
}

.page-gym-admin .gym-admin-member-row--pending {
    border-color: #f6ad00;
    box-shadow: inset 0 0 0 1px rgba(246, 173, 0, 0.25);
    cursor: default;
}

.page-gym-admin .gym-admin-member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2a2a2a;
    color: #ccc;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-gym-admin .gym-admin-member-main {
    flex: 1;
    min-width: 0;
}

.page-gym-admin .gym-admin-member-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.page-gym-admin .gym-admin-member-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.page-gym-admin .gym-admin-member-plan {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

.page-gym-admin .gym-admin-dday-badge {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.page-gym-admin .gym-admin-dday-badge--ok {
    background: rgba(72, 187, 120, 0.15);
    color: #48bb78;
}

.page-gym-admin .gym-admin-dday-badge--warn {
    background: rgba(246, 173, 0, 0.15);
    color: #f6ad00;
}

.page-gym-admin .gym-admin-dday-badge--expired {
    background: rgba(229, 62, 62, 0.15);
    color: #e53e3e;
}

.page-gym-admin .gym-admin-dday-badge--muted {
    background: #222;
    color: #666;
}

.page-gym-admin .gym-admin-dday-badge--sessions {
    background: rgba(66, 153, 225, 0.15);
    color: #63b3ed;
}

.page-gym-admin .gym-admin-pending-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.page-gym-admin .gym-admin-pending-btn {
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.page-gym-admin .gym-admin-pending-btn--approve {
    background: #e53e3e;
    color: #fff;
}

.page-gym-admin .gym-admin-pending-btn--reject {
    background: #2a2a2a;
    color: #888;
}

.page-gym-admin .gym-admin-revenue-section {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    padding: 16px;
}

.page-gym-admin .gym-admin-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.page-gym-admin .gym-admin-revenue-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.page-gym-admin .gym-admin-revenue-grid--cards2x2 {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 10px;
}

.page-gym-admin .gym-admin-revenue-card--metric {
    background: #131313;
    border: 1px solid #2a2a2a;
}

.page-gym-admin .gym-admin-revenue-label {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    margin-bottom: 6px;
}

.page-gym-admin .gym-admin-annual-report-btn {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: #131313;
    border: 1px solid #333;
    border-radius: 12px;
    color: #ccc;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}

.page-gym-admin .gym-admin-annual-report-btn:hover {
    color: #fff;
    border-color: #e53e3e;
}

.page-gym-admin .gym-admin-annual-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.page-gym-admin .gym-admin-insights-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.page-gym-admin .gym-admin-insights-list li {
    font-size: 13px;
    color: #aaa;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

.page-gym-admin .gym-admin-insights-list li::before {
    content: "• ";
    color: #f6ad00;
}

.page-gym-admin .gym-admin-annual-chart-wrap {
    position: relative;
    height: 220px;
    margin: 12px 0 16px;
    padding: 8px 4px;
    background: #131313;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
}

.page-gym-admin .gym-admin-annual-recent-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.page-gym-admin .gym-admin-annual-recent-table th,
.page-gym-admin .gym-admin-annual-recent-table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #2a2a2a;
}

.page-gym-admin .gym-admin-annual-recent-table th {
    color: #666;
    font-weight: 600;
    font-size: 12px;
}

.page-gym-admin .gym-admin-annual-recent-table td {
    color: #ddd;
}

.page-gym-admin .gym-admin-annual-recent-table tr:last-child td {
    color: #f6ad00;
    font-weight: 700;
}

.page-gym-admin .gym-admin-revenue-mode-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.page-gym-admin .gym-admin-revenue-mode-toggle button {
    flex: 1;
    padding: 9px 12px;
    background: #131313;
    border: 1px solid #333;
    border-radius: 10px;
    color: #888;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.page-gym-admin .gym-admin-revenue-mode-toggle button.is-active {
    background: rgba(229, 62, 62, 0.15);
    border-color: rgba(229, 62, 62, 0.45);
    color: #fff;
}

.page-gym-admin .gym-admin-revenue-card {
    background: #222;
    border-radius: 12px;
    padding: 14px;
    cursor: default;
}

.page-gym-admin .gym-admin-revenue-card--wide.is-clickable {
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.page-gym-admin .gym-admin-revenue-card--wide.is-clickable:hover {
    background: #252525;
    border: 1px solid #333;
}

.page-gym-admin .gym-admin-revenue-card--wide.is-expanded {
    border: 1px solid rgba(229, 62, 62, 0.45);
    background: #231818;
}

.page-gym-admin .gym-admin-monthly-report-panel {
    margin-top: 4px;
    margin-bottom: 12px;
    padding: 14px;
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
}

.page-gym-admin .gym-admin-monthly-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
    margin: 12px 0 4px;
}

.page-gym-admin .gym-admin-monthly-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    cursor: pointer;
}

.page-gym-admin .gym-admin-monthly-bar-col.is-selected .gym-admin-monthly-bar-fill {
    background: #ff6b6b;
}

.page-gym-admin .gym-admin-monthly-bar-fill {
    width: 100%;
    max-width: 36px;
    background: #e53e3e;
    border-radius: 6px 6px 0 0;
    min-height: 8px;
    opacity: 0.9;
}

.page-gym-admin .gym-admin-monthly-bar-label {
    font-size: 10px;
    color: #666;
    white-space: nowrap;
}

.page-gym-admin .gym-admin-monthly-bar-val {
    font-size: 10px;
    color: #888;
    font-weight: 700;
}

.page-gym-admin .gym-admin-month-detail {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #2a2a2a;
}

/* gym attendance ranking full page */
.page-gym-attendance-ranking .att-rank-podium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}

.page-gym-attendance-ranking .att-rank-podium-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    padding: 16px 12px;
    text-align: center;
}

.page-gym-attendance-ranking .att-rank-podium-card--rank-1 {
    border-color: rgba(246, 173, 0, 0.45);
    background: linear-gradient(180deg, #221a0a 0%, #1a1a1a 100%);
}

.page-gym-attendance-ranking .att-rank-podium-card--rank-2 {
    border-color: rgba(160, 174, 192, 0.35);
}

.page-gym-attendance-ranking .att-rank-podium-card--rank-3 {
    border-color: rgba(205, 127, 50, 0.35);
}

.page-gym-attendance-ranking .att-rank-podium-card.is-me,
.page-gym-attendance-ranking .att-rank-list-row.is-me,
.page-gym-attendance-ranking .att-rank-my-card.is-me {
    box-shadow: inset 0 0 0 1px rgba(229, 62, 62, 0.5);
}

.page-gym-attendance-ranking .att-rank-podium-medal {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 8px;
}

.page-gym-attendance-ranking .att-rank-podium-name {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}

.page-gym-attendance-ranking .att-rank-podium-count {
    font-size: 13px;
    color: #888;
}

.page-gym-attendance-ranking .att-rank-podium-rank {
    font-size: 11px;
    color: #555;
    margin-top: 6px;
    font-weight: 700;
}

.page-gym-attendance-ranking .att-rank-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #222;
}

.page-gym-attendance-ranking .att-rank-list-row:last-child {
    border-bottom: none;
}

.page-gym-attendance-ranking .att-rank-list-num {
    width: 28px;
    font-size: 14px;
    font-weight: 800;
    color: #666;
    text-align: center;
    flex-shrink: 0;
}

.page-gym-attendance-ranking .att-rank-list-name {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #ddd;
}

.page-gym-attendance-ranking .att-rank-list-count {
    font-size: 13px;
    color: #888;
    flex-shrink: 0;
}

.page-gym-attendance-ranking .att-rank-my-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    padding: 14px 16px;
}

.page-gym-admin .gym-admin-revenue-card--wide {
    grid-column: 1 / -1;
}

.page-gym-admin .gym-admin-revenue-val {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
}

.page-gym-admin .gym-admin-revenue-sub {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.page-gym-admin .gym-admin-revenue-change--up { color: #48bb78; }
.page-gym-admin .gym-admin-revenue-change--down { color: #e53e3e; }

.page-gym-admin .gym-admin-mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    margin-top: 10px;
}

.page-gym-admin .gym-admin-mini-bar {
    flex: 1;
    background: #e53e3e;
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    opacity: 0.85;
}

.page-gym-admin .gym-admin-plan-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}

.page-gym-admin .gym-admin-plan-bar-label {
    width: 72px;
    color: #888;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-gym-admin .gym-admin-plan-bar-track {
    flex: 1;
    height: 8px;
    background: #222;
    border-radius: 999px;
    overflow: hidden;
}

.page-gym-admin .gym-admin-plan-bar-fill {
    height: 100%;
    background: #e53e3e;
    border-radius: 999px;
}

.page-gym-admin .gym-admin-recent-pay-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #222;
    font-size: 13px;
}

.page-gym-admin .gym-admin-recent-pay-item:last-child { border-bottom: none; }

.page-gym-admin .gym-admin-monthly-detail {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #2a2a2a;
}

.page-gym-admin .gym-admin-action-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.page-gym-admin .gym-admin-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 14px 12px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    box-sizing: border-box;
}

.page-gym-admin .gym-admin-action-btn--wod {
    background: #e53e3e;
    color: #fff;
}

.page-gym-admin .gym-admin-action-btn--challenge {
    background: linear-gradient(135deg, #f6ad00 0%, #d69e2e 100%);
    color: #1a1200;
}

.page-gym-admin .gym-admin-feature-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    color: #ddd;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.page-gym-admin .gym-admin-feature-panel {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    overflow: hidden;
}

.page-gym-admin .gym-admin-feature-panel > summary {
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 700;
    color: #ddd;
    cursor: pointer;
    list-style: none;
}

.page-gym-admin .gym-admin-feature-panel > summary::-webkit-details-marker { display: none; }

.page-gym-admin .gym-admin-feature-panel-body {
    padding: 0 16px 16px;
    border-top: 1px solid #222;
}

.page-gym-admin .gym-admin-feature-panel > summary::after {
    content: '▾';
    font-size: 12px;
    color: #666;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.2s ease;
}

.page-gym-admin .gym-admin-feature-panel[open] > summary::after {
    transform: rotate(180deg);
}

.page-gym-admin .gym-admin-group { margin-bottom: 22px; }
.page-gym-admin .gym-admin-group-label {
    font-size: 11.5px; font-weight: 800; color: #666; letter-spacing: 0.5px;
    margin-bottom: 8px; padding-left: 4px; text-transform: uppercase;
}
.page-gym-admin .gym-admin-group-card {
    background: #131313; border-radius: 14px; overflow: hidden;
}
.page-gym-admin .gym-admin-group-card .gym-admin-feature-panel {
    border: none;
    border-radius: 0;
    background: transparent;
}
.page-gym-admin .gym-admin-group-item {
    border-bottom: 1px solid #1e1e1e; border-radius: 0; background: transparent;
}
.page-gym-admin .gym-admin-group-item:last-child { border-bottom: none; }
.page-gym-admin .gym-admin-group-item > summary {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
}
.page-gym-admin .gym-admin-group-item > summary i { font-size: 17px; color: #888; width: 20px; text-align: center; flex-shrink: 0; }
.page-gym-admin .gym-admin-group-item-text { flex: 1; min-width: 0; }
.page-gym-admin .gym-admin-group-item-title { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.page-gym-admin .gym-admin-group-item-desc { display: block; font-size: 11.5px; color: #666; margin-top: 2px; }
.page-gym-admin .gym-admin-group-item-badge {
    font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 10px;
    color: #666; background: #1e1e1e; flex-shrink: 0; margin-right: 4px;
}
.page-gym-admin .gym-admin-group-item-badge.is-on { color: #f6ad00; background: #1c1a08; }

.page-gym-admin .gym-admin-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.page-gym-admin .gym-admin-modal[hidden] { display: none !important; }

.page-gym-admin .gym-admin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.page-gym-admin .gym-admin-modal-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: #141414;
    border-radius: 20px 20px 0 0;
    padding: 20px 16px 24px;
    border-top: 1px solid #2a2a2a;
}

.page-gym-admin .gym-admin-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #222;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
    font-family: inherit;
}

.page-gym-admin .gym-admin-profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.page-gym-admin .gym-admin-profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
}

.page-gym-admin .gym-admin-profile-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.page-gym-admin .gym-admin-profile-mini-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 12px;
}

.page-gym-admin .gym-admin-profile-mini-val {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.page-gym-admin .gym-admin-profile-mini-label {
    font-size: 11px;
    color: #555;
    margin-top: 2px;
}

.page-gym-admin .gym-admin-profile-section {
    margin: 14px 0 16px;
    padding: 12px 0 0;
    border-top: 1px solid #1e1e1e;
}

.page-gym-admin .gym-admin-profile-role-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-gym-admin .gym-admin-entry-list {
    margin: 8px 0 16px;
}

.page-gym-admin .gym-admin-entry-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #222;
    font-size: 13px;
    color: #aaa;
}

.page-gym-admin .gym-admin-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

.page-gym-admin .gym-admin-pagination[hidden] {
    display: none !important;
}

.page-gym-admin .gym-admin-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #222;
    border-radius: 8px;
    background: #111;
    color: #888;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.page-gym-admin .gym-admin-page-btn.is-active {
    background: #e53e3e;
    border-color: #e53e3e;
    color: #fff;
}

.page-gym-admin .gym-admin-page-btn--next {
    font-size: 18px;
    line-height: 1;
}

.page-gym-admin .gym-admin-page-ellipsis {
    color: #555;
    font-size: 14px;
    padding: 0 2px;
}

.page-gym-admin .gym-admin-membership-add {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-gym-admin .gym-admin-mode-tabs,
.page-gym-admin .gym-admin-subtype-tabs {
    display: flex;
    gap: 8px;
}

.page-gym-admin .gym-admin-mode-tab,
.page-gym-admin .gym-admin-subtype-tab {
    flex: 1;
    padding: 12px;
    border: 1px solid #222;
    border-radius: 10px;
    background: #111;
    color: #666;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.page-gym-admin .gym-admin-mode-tab.is-active,
.page-gym-admin .gym-admin-subtype-tab.is-active {
    background: #e53e3e;
    border-color: #e53e3e;
    color: #fff;
}

.page-gym-admin .gym-admin-membership-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: #111;
    border: 1px solid #222;
    border-radius: 10px;
}

.page-gym-admin .gym-admin-membership-panel[hidden] {
    display: none !important;
}

.page-gym-admin .gym-admin-add-form--membership {
    display: flex;
    gap: 8px;
}

.page-gym-admin .gym-admin-unregistered-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: #1a1200;
    border: 1px solid #4a3a1a;
    border-radius: 12px;
}

.page-gym-admin .gym-admin-unregistered-banner[hidden] {
    display: none !important;
}

.page-gym-admin .gym-admin-unregistered-banner-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
    color: #ddd;
}

.page-gym-admin .gym-admin-unregistered-banner-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #888;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px;
    font-family: inherit;
}

.page-gym-admin .gym-admin-manual-membership {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-gym-admin .gym-admin-manual-divider {
    height: 1px;
    background: #222;
    margin-top: 4px;
}

.page-gym-admin .gym-admin-manual-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.page-gym-admin .gym-admin-manual-hint {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: #666;
    flex: 1;
}

.page-gym-admin .gym-admin-manual-toggle {
    flex-shrink: 0;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #aaa;
    cursor: pointer;
    font-family: inherit;
}

.page-gym-admin .gym-admin-manual-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: #111;
    border: 1px solid #222;
    border-radius: 10px;
}

.page-gym-admin .gym-admin-manual-form[hidden] {
    display: none !important;
}

.page-gym-admin .gym-admin-manual-mode-tabs {
    display: flex;
    gap: 8px;
}

.page-gym-admin .gym-admin-manual-mode-tab {
    flex: 1;
    padding: 10px;
    border: 1px solid #222;
    border-radius: 8px;
    background: #1a1a1a;
    color: #666;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.page-gym-admin .gym-admin-manual-mode-tab.is-active {
    background: #222;
    border-color: #444;
    color: #ddd;
}

.page-gym-admin .gym-admin-manual-panel[hidden] {
    display: none !important;
}

.page-gym-admin .gym-admin-manual-label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

.page-gym-admin .gym-admin-manual-input {
    width: 100%;
    box-sizing: border-box;
    background: #1a1a1a;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 10px 12px;
    color: #ddd;
    font-size: 14px;
    font-family: inherit;
}

.page-gym-admin .gym-admin-manual-save {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 10px;
    padding: 11px;
    font-size: 14px;
    font-weight: 700;
    color: #ddd;
    cursor: pointer;
    font-family: inherit;
}

.page-gym-admin .gym-admin-stepper-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-gym-admin .gym-admin-stepper-row[hidden] {
    display: none !important;
}

.page-gym-admin .gym-admin-count-steppers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-gym-admin .gym-admin-count-steppers[hidden] {
    display: none !important;
}

.page-gym-admin .gym-admin-stepper-summary {
    font-size: 14px;
    font-weight: 700;
    color: #ddd;
    margin-bottom: 2px;
}

.page-gym-admin .gym-admin-stepper-label {
    font-size: 13px;
    color: #888;
    font-weight: 600;
    min-width: 72px;
}

.page-gym-admin .gym-admin-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #222;
    border-radius: 10px;
    overflow: hidden;
    background: #1a1a1a;
}

.page-gym-admin .gym-admin-stepper-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #1a1a1a;
    color: #ddd;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.page-gym-admin .gym-admin-stepper-btn:hover {
    background: #222;
}

.page-gym-admin .gym-admin-stepper-val {
    min-width: 44px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.page-gym-admin .gym-admin-stepper-unit {
    font-size: 14px;
    color: #888;
    font-weight: 600;
}

.page-gym-admin .gym-admin-add-form--membership {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.page-gym-admin .gym-admin-add-form--membership input {
    flex: 1;
    margin-bottom: 0;
}

.page-gym-admin .gym-admin-add-form--membership .gym-admin-add-form-submit {
    width: auto;
    min-width: 72px;
    flex-shrink: 0;
}

.page-gym-admin .gym-admin-add-btns {
    display: flex;
    gap: 8px;
}

.page-gym-admin .gym-admin-add-btn {
    flex: 1;
    padding: 12px;
    border: 1px solid #333;
    border-radius: 10px;
    background: #1a1a1a;
    color: #ddd;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.page-gym-admin .gym-admin-add-form {
    margin-top: 12px;
    padding: 12px;
    background: #111;
    border: 1px solid #222;
    border-radius: 10px;
}

.page-gym-admin .gym-admin-add-form select,
.page-gym-admin .gym-admin-add-form input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    background: #1a1a1a;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 9px 12px;
    color: #ddd;
    font-size: 14px;
    font-family: inherit;
}

.page-gym-admin .gym-admin-add-form-submit {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: #e53e3e;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.page-gym-schedule-month .gym-schedule-month-cal {
    background: #111;
    border: 1px solid #1e1e1e;
    border-radius: 14px;
    padding: 10px;
}

.page-gym-schedule-month .gym-schedule-month-cal-head,
.page-gym-schedule-month .gym-schedule-month-cal-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.page-gym-schedule-month .gym-schedule-month-cal-head {
    margin-bottom: 6px;
}

.page-gym-schedule-month .gym-schedule-month-cal-dow {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #555;
    padding: 4px 0;
}

.page-gym-schedule-month .gym-schedule-month-day {
    aspect-ratio: 1;
    border: 1px solid #222;
    border-radius: 10px;
    background: #1a1a1a;
    color: #ddd;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
}

.page-gym-schedule-month .gym-schedule-month-day--empty {
    border: none;
    background: transparent;
    cursor: default;
}

.page-gym-schedule-month .gym-schedule-month-day.is-today {
    border-color: rgba(229, 62, 62, 0.45);
}

.page-gym-schedule-month .gym-schedule-month-day.is-selected {
    background: #e53e3e;
    border-color: #e53e3e;
    color: #fff;
}

.page-gym-schedule-month .gym-schedule-month-attended-stamp {
    font-size: 10px;
    color: #48bb78;
    line-height: 1;
}

.page-gym-schedule-month .gym-schedule-month-day.is-selected .gym-schedule-month-attended-stamp {
    color: #fff;
}

.page-gym-schedule-month .gym-schedule-month-day-num {
    font-size: 14px;
    font-weight: 800;
}

.page-gym-schedule-month .gym-schedule-month-detail {
    background: #111;
    border: 1px solid #1e1e1e;
    border-radius: 14px;
    padding: 14px 16px;
}

.page-gym-schedule-month .gym-schedule-month-detail-head {
    margin-bottom: 10px;
}

.page-gym-schedule-month .gym-class-slot-card:last-child {
    margin-bottom: 0;
}