@import url("/replica/assets/css/site-mobile-swiper.css");
@import url("/replica/assets/css/site-mobile.css");

/* Shared black/white theme switch. */
.theme-toggle{position:fixed;top:10px;right:86px;z-index:10020;width:32px;height:32px;border:1px solid #555;border-radius:50%;background:#1e1e1e;color:#fff;display:grid;place-items:center;font-size:17px;line-height:1;cursor:pointer;box-shadow:0 3px 12px #0007}
body.light-mode{background:#f4f5f7!important;color:#16181d!important}body.light-mode #wrap,body.light-mode #container,body.light-mode #contents{background:#f4f5f7!important;color:#16181d!important}body.light-mode #header{background:#fff!important;border-color:#dfe2e7!important}body.light-mode #gnb{background:#fff!important;color:#16181d!important}body.light-mode .home-mobile-hero,body.light-mode .home-mobile-live-section,body.light-mode .home-mobile-feature-card,body.light-mode .home-mobile-live-card{background:#fff!important;color:#16181d!important;border-color:#dfe2e7!important}body.light-mode .home-mobile-hero h2,body.light-mode .home-mobile-hero p,body.light-mode .home-mobile-section-head h3,body.light-mode .home-mobile-section-head p,body.light-mode .home-mobile-live-host strong,body.light-mode .home-mobile-feature-host strong{color:#16181d!important}body.light-mode .home-mobile-stats>div{background:#f5f6f8!important;border-color:#dfe2e7!important;color:#16181d!important}body.light-mode .gnb-menu a,body.light-mode .user-txt a{color:#252932!important}body.light-mode .theme-toggle{background:#fff;color:#16181d;border-color:#bcc3ce}

												/* ModeSet Styles - 移动内联样式到CSS */
												.modeSet {
													margin-right: 10px;
												}
												.modeSet .settings {
													display: flex;
													align-items: center;
													gap: 5px;
												}
												.modeSet #modecheck {
													display: none;
												}
												.modeSet .modecheck {
													position: relative;
													display: inline-block;
													width: 40px;
													height: 20px;
													background-color: #555;
													border-radius: 20px;
													cursor: pointer;
													transition: background-color 0.3s;
													pointer-events: auto !important;
													z-index: 10;
													flex-shrink: 0;
													-webkit-tap-highlight-color: transparent;
												}
												.modeSet .settings {
													pointer-events: auto !important;
												}
												.modeSet #modecheck {
													pointer-events: auto !important;
													z-index: 11;
													position: relative;
												}
												.modeSet .modecheck::after {
													content: '';
													position: absolute;
													width: 16px;
													height: 16px;
													border-radius: 50%;
													background-color: #fff;
													top: 2px;
													left: 2px;
													transition: left 0.3s;
													box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
												}
												.modeSet #modecheck:checked + .modecheck {
													background-color: #f2507e;
												}
												.modeSet #modecheck:checked + .modecheck::after {
													left: 22px;
												}
												/* Button Styles - 移动内联样式到CSS */
												.btn-action {
													cursor: pointer;
												}
												.user-level-icon {
													width: 12%;
												}
												.charge-link-text {
													margin: 0;
													white-space: nowrap;
												}
												/* 移动端 Dark Mode 基础样式 */
												body.dark-mode {
													background-color: #121212;
													color: #e0e0e0;
												}
												body.dark-mode #header {
													background-color: #000;
												}
												body.dark-mode #gnb {
													background-color: #1a1a1a;
												}
												body.dark-mode .user-info,
												body.dark-mode .flex-wrap,
												body.dark-mode .link-wrap,
												body.dark-mode .gnb-menu,
												body.dark-mode .side-app-down {
													color: #e0e0e0;
												}
												body.dark-mode .gnb-menu a,
												body.dark-mode .link-wrap a {
													color: #e0e0e0 !important;
												}
												body.dark-mode .gnb-menu a:hover,
												body.dark-mode .link-wrap a:hover {
													color: #f2507e !important;
												}
												body.dark-mode #search-box {
													background-color: #2a2a2a;
												}
												body.dark-mode #search-box input {
													background-color: #2a2a2a;
													color: #e0e0e0;
													border-color: #444;
												}
												body.dark-mode #search-box input::placeholder {
													color: rgba(255, 255, 255, 0.5);
												}
												body.dark-mode #container {
													background-color: #121212;
												}
												body.dark-mode .section-wrap {
													background-color: #1a1a1a;
													color: #e0e0e0;
												}
												body.dark-mode .mvdfk {
													background-color: #1a1a1a;
													border-color: #444;
													color: #e0e0e0;
												}
												body.dark-mode .my-title {
													color: #e0e0e0;
												}
												/* Flex.php Dark Mode */
												body.dark-mode .flex-popup-con {
													background-color: #1a1a1a !important;
													color: #e0e0e0;
												}
												body.dark-mode .f-header {
													color: #e0e0e0 !important;
												}
												body.dark-mode .flex-popup-con input[type="text"],
												body.dark-mode .flex-popup-con input[type="number"],
												body.dark-mode .flex-popup-con textarea {
													background-color: #2a2a2a;
													border-color: #444;
													color: #e0e0e0;
												}
												body.dark-mode .flex-popup-con input[type="text"]:focus,
												body.dark-mode .flex-popup-con input[type="number"]:focus,
												body.dark-mode .flex-popup-con textarea:focus {
													border-color: #f2507e;
													background-color: #2a2a2a;
												}
												body.dark-mode .flex-popup-con input::placeholder {
													color: rgba(255, 255, 255, 0.5);
												}
												body.dark-mode .flex-popup-con h3,
												body.dark-mode .flex-popup-con h4,
												body.dark-mode .flex-popup-con p,
												body.dark-mode .flex-popup-con label,
												body.dark-mode .flex-popup-con span {
													color: #e0e0e0;
												}
												body.dark-mode .flex-popup-con button {
													color: #fff;
												}
												body.dark-mode .flex-con li {
													background-color: #1a1a1a;
													border-color: #444;
													color: #e0e0e0;
												}
												body.dark-mode .flex-con li p {
													color: #e0e0e0;
												}
												body.dark-mode .flex-con li a {
													background-color: #2a2a2a;
													color: #fff;
												}
												body.dark-mode .flex-con li a:hover {
													background-color: #f2507e;
												}
												body.dark-mode .gray-box {
													background-color: #1a1a1a !important;
													border-color: #444;
													color: #e0e0e0;
												}
												body.dark-mode .gray-box .td-ul li {
													color: #ccc;
												}
												body.dark-mode .i-title {
													color: #ccc;
												}
												body.dark-mode .my-title {
													color: #e0e0e0 !important;
												}
												/* My2.php Styles */
												.my2-title {
													text-align: center;
													font-size: 1.12rem;
													line-height: 1.75rem;
													margin-bottom: 1.75rem;
												}
												.my2-con li {
													display: flex;
													align-items: center;
													height: 120px;
													justify-content: center;
													width: calc(100% / 3);
													flex-direction: column;
													font-size: 16px;
													font-weight: bold;
													border-top: 1px solid rgb(221, 221, 221);
													border-bottom: 1px solid rgb(221, 221, 221);
													border-right: 1px solid rgb(221, 221, 221);
												}
												.my2-tab-con {
													display: none;
												}
												.table-style2 {
													overflow-x: auto;
													white-space: nowrap;
													-webkit-overflow-scrolling: touch;
												}
												.table-style2 table {
													width: 100%;
													min-width: 600px;
												}
												/* Status Colors */
												.status-apply {
													color: #f2507e;
												}
												.status-complete {
													color: #4caf50;
												}
												.status-cancel {
													color: #666;
												}
												/* My2.php Dark Mode */
												body.dark-mode .my2-title,
												body.dark-mode .my2-title2 {
													color: #e0e0e0;
												}
												body.dark-mode .my2-title strong,
												body.dark-mode .my2-title2 strong {
													color: #f2507e;
												}
												body.dark-mode .my2-con {
													border-color: #444;
												}
												body.dark-mode .my2-con li {
													border-color: #444;
													background-color: #1a1a1a;
													color: #e0e0e0;
												}
												body.dark-mode .my2-con li strong {
													color: #e0e0e0;
												}
												body.dark-mode .my2-con li p {
													color: #e0e0e0;
												}
												body.dark-mode .my2-con li p i {
													color: #f2507e;
												}
												body.dark-mode .my2-tab {
													border-color: #444;
												}
												body.dark-mode .my2-tab li::before {
													background-color: #666;
												}
												body.dark-mode .my2-tab a {
													color: #999;
												}
												body.dark-mode .my2-tab a.on {
													color: #f2507e;
												}
												body.dark-mode .m2Button button {
													background-color: #2a2a2a;
													color: #e0e0e0;
													border-color: #555;
												}
												body.dark-mode .m2Button button:hover {
													background-color: #333;
												}
												body.dark-mode .m2Button button:disabled {
													opacity: 0.5;
													background-color: #1a1a1a;
												}
												/* Table Dark Mode */
												body.dark-mode .table-style2 {
													color: #e0e0e0;
												}
												body.dark-mode .table-style2 table {
													background-color: #1a1a1a;
												}
												body.dark-mode .table-style2 th {
													background-color: #2a2a2a !important;
													border-color: #444 !important;
													color: #e0e0e0 !important;
												}
												body.dark-mode .table-style2 td {
													border-color: #444 !important;
													color: #e0e0e0 !important;
												}
												body.dark-mode .table-style2 td.no-txt {
													background-color: #2a2a2a !important;
													color: #999 !important;
												}
												body.dark-mode .table-style2.ts3 th {
													background-color: #1a1a1a !important;
													border-color: #444 !important;
												}
												body.dark-mode .table-style2.ts3 td {
													border-color: #444 !important;
												}
												body.dark-mode .table-style2.ts3 td.no-txt {
													background-color: #2a2a2a !important;
												}
												body.dark-mode .status-apply {
													color: #f2507e !important;
												}
												body.dark-mode .status-complete {
													color: #4caf50 !important;
												}
												body.dark-mode .status-cancel {
													color: #999 !important;
												}
												/* My Tab Dark Mode */
												body.dark-mode .my-tab {
													border-color: #444;
												}
												body.dark-mode .my-tab a {
													color: #999;
												}
												body.dark-mode .my-tab a.on {
													color: #f2507e;
													border-bottom-color: #f2507e;
												}
												body.dark-mode .my-tab-con {
													color: #e0e0e0;
												}
												body.dark-mode .my-tab-con th {
													color: #e0e0e0;
													border-color: #444;
												}
												body.dark-mode .my-tab-con td {
													border-color: #444;
													color: #e0e0e0;
												}
												body.dark-mode .my-tab-con td .file {
													border-color: #555;
													background-color: #2a2a2a;
												}
												body.dark-mode .my-tab-con td .file-bg {
													background-color: #2a2a2a;
												}
												/* Input Text Dark Mode */
												body.dark-mode .inputText input[type="text"],
												body.dark-mode .inputText input[type="password"] {
													background-color: #2a2a2a;
													border-color: #555;
													color: #e0e0e0;
												}
												body.dark-mode .inputText input[type="text"]:focus,
												body.dark-mode .inputText input[type="password"]:focus {
													border-color: #f2507e;
													background-color: #2a2a2a;
												}
												body.dark-mode .inputText input::placeholder {
													color: rgba(255, 255, 255, 0.5);
												}
												body.dark-mode .inputText a.a-btn {
													border-color: #f2507e;
													color: #f2507e;
												}
												body.dark-mode .inputText a.a-btn:hover {
													background-color: #f2507e;
													color: #fff;
												}
												/* File Popup Dark Mode */
												body.dark-mode .file-popup-box {
													background-color: #1a1a1a;
													color: #e0e0e0;
												}
												body.dark-mode .file-title {
													border-color: #444;
													color: #e0e0e0;
												}
												body.dark-mode .file-con {
													border-color: #555;
													color: #e0e0e0;
												}
												body.dark-mode .file-con p {
													color: #ccc;
												}
												body.dark-mode .file-pop i {
													background-color: #2a2a2a;
													color: #e0e0e0;
													border-color: #555;
												}
												body.dark-mode .file-btn a {
													border-color: #555;
													color: #e0e0e0;
												}
												body.dark-mode .file-btn a.btn-y {
													background-color: #2a2a2a;
													color: #e0e0e0;
												}
												body.dark-mode .file-btn a.btn-y:hover {
													background-color: #333;
												}
												/* Main Tab Dark Mode */
												body.dark-mode .main-tab a {
													color: #999;
												}
												body.dark-mode .main-tab a.on {
													color: #e0e0e0;
												}
												body.dark-mode .main-h3 {
													color: #e0e0e0 !important;
												}
												body.dark-mode .tab-con .con strong {
													color: #e0e0e0;
												}
												body.dark-mode .tab-con .con span {
													color: #f2507e;
												}
												body.dark-mode .tab-con .con .flex span {
													background-color: #2a2a2a;
													color: #ccc;
												}
												/* Tab Con List Styles */
												.tab-con > ul {
													display: flex;
													flex-wrap: wrap;
													margin-left: -15px;
												}
												/* About Section Styles */
												.about {
													position: absolute;
													bottom: 0;
													left: 0;
													right: 0;
													background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
													padding: 10px;
													display: flex;
													align-items: center;
													gap: 10px;
												}
												.about .img {
													flex-shrink: 0;
												}
												.avatar-img {
													height: 40px;
													width: 40px;
													object-fit: cover;
													border-radius: 50%;
												}
												.about .con {
													flex: 1;
													min-width: 0;
												}
												.about .con strong {
													display: block;
													color: #fff;
													font-size: 14px;
													font-weight: bold;
													margin-bottom: 4px;
													overflow: hidden;
													text-overflow: ellipsis;
													white-space: nowrap;
												}
												.about .con P {
													color: #ccc;
													font-size: 12px;
													margin: 0;
													overflow: hidden;
													text-overflow: ellipsis;
													white-space: nowrap;
												}
												/* About Dark Mode */
												body.dark-mode .about {
													background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
												}
												body.dark-mode .about .con strong {
													color: #e0e0e0;
												}
												body.dark-mode .about .con P {
													color: #aaa;
												}
												/* My Button Dark Mode */
												body.dark-mode .my-btn a {
													border-color: #555;
													color: #ccc;
												}
												body.dark-mode .my-btn a:hover {
													background-color: #2a2a2a;
													color: #e0e0e0;
												}
												body.dark-mode .td-ul li {
													color: #ccc;
												}
												body.dark-mode .td-ul li::before {
													background-color: #666;
												}
												body.dark-mode .color-gray {
													color: #999;
												}
												body.dark-mode .color-red {
													color: #f2507e;
												}
												/* Footer Dark Mode */
												body.dark-mode #footer {
													border-color: #444;
													background-color: #1a1a1a;
												}
												body.dark-mode #footer .footer-info {
													color: #ccc;
												}
												body.dark-mode #footer .margin-divider {
													background-color: #666;
												}
												body.dark-mode .f-menu ul > li::before {
													background-color: #666;
												}
												body.dark-mode .f-menu a {
													color: #ccc;
												}
												/* Paging Dark Mode */
												body.dark-mode .paging a {
													background-color: #2a2a2a;
													border-color: #555;
													color: #ccc;
												}
												body.dark-mode .paging a.active {
													background-color: #f2507e;
													border-color: #f2507e;
													color: #fff;
												}
												body.dark-mode .paging a:hover {
													background-color: #333;
												}
												/* Modal (统一模态框) - 确保在最上层显示 */
												.modal {
													z-index: 99999999 !important;
												}
												.modal-content {
													position: relative;
													z-index: 99999999 !important;
												}
												/* Modal Dark Mode (统一模态框) */
												body.dark-mode .modal-content {
													background-color: #1a1a1a;
													color: #e0e0e0;
												}
												body.dark-mode .modal-header {
													color: #e0e0e0;
												}
												body.dark-mode .modal-body {
													color: #e0e0e0;
												}
												body.dark-mode .modal-button {
													background-color: #2a2a2a;
													color: #e0e0e0;
													border-color: #555;
												}
												body.dark-mode .modal-button:hover {
													background-color: #333;
												}
												body.dark-mode .close {
													color: #e0e0e0;
												}
												body.dark-mode .close:hover {
													color: #f2507e;
												}
												/* Search Box Dark Mode */
												body.dark-mode #search-box {
													background-color: #121212;
												}
												body.dark-mode #search-box .search-header {
													background-color: #1a1a1a;
													border-bottom-color: #444;
												}
												body.dark-mode #search-box .input-box > input {
													background-color: #2a2a2a;
													color: #e0e0e0;
												}
												body.dark-mode #search-box li {
													border-color: #444;
													color: #ccc;
												}
												body.dark-mode #search-box li:hover {
													background-color: #2a2a2a;
												}
												/* Swiper Dark Mode */
												body.dark-mode .swiper-pagination span {
													background-color: #555;
												}
												body.dark-mode .swiper-pagination span.swiper-pagination-bullet-active {
													background-color: #f2507e;
												}
												body.dark-mode .topbanner .swiper-pagination {
													background-color: rgba(0, 0, 0, 0.7);
												}
												/* Chat List Dark Mode */
												body.dark-mode .chat-card {
													background-color: #1a1a1a;
													border-color: #444;
												}
												body.dark-mode .chat-card-title,
												body.dark-mode .chat-card-coin,
												body.dark-mode .chat-card-user {
													color: #e0e0e0;
												}
												body.dark-mode .chat-card-button {
													background-color: #2a2a2a;
													color: #e0e0e0;
													border-color: #555;
												}
												body.dark-mode .chat-card-button:hover {
													background-color: #f2507e;
													color: #fff;
												}
												/* Live Chat Dark Mode */
												body.dark-mode .talk-container {
													background-color: #1a1a1a;
													border-color: #444;
												}
												body.dark-mode .talk-tite {
													background-color: #1a1a1a;
													border-color: #444;
													color: #e0e0e0;
												}
												body.dark-mode #talk-bar {
													background-color: #1a1a1a;
												}
												body.dark-mode .txt-wrap {
													color: #e0e0e0;
												}
												body.dark-mode .talk-about {
													background-color: #1a1a1a;
													border-color: #444;
												}
												body.dark-mode .talk-write textarea {
													background-color: #2a2a2a;
													border-color: #555;
													color: #e0e0e0;
												}
												body.dark-mode .talk-write button.submit {
													background-color: #f2507e;
												}
												/* Video About Dark Mode */
												body.dark-mode .video-about {
													background-color: #1a1a1a;
													color: #e0e0e0;
												}
												body.dark-mode .video-wrap .txt {
													color: #e0e0e0;
												}
												/* Top Rank Dark Mode */
												body.dark-mode .popular-item-card,
												body.dark-mode .popular-item-info {
													color: #e0e0e0;
												}
												body.dark-mode .rank-avatar-title,
												body.dark-mode .rank-avatar-subtitle {
													color: #e0e0e0;
												}
												body.dark-mode .data-card-value {
													color: #e0e0e0;
												}
												/* Select Dark Mode */
												body.dark-mode select {
													background-color: #2a2a2a;
													border-color: #555;
													color: #e0e0e0;
												}
												body.dark-mode select:focus {
													border-color: #f2507e;
												}
												body.dark-mode select option {
													background-color: #2a2a2a;
													color: #e0e0e0;
												}
												/* Link Dark Mode */
												body.dark-mode a {
													color: #ccc;
												}
												body.dark-mode a:hover {
													color: #f2507e;
												}
												/* Image Dark Mode - img2背景透明 */
												body.dark-mode .img2 {
													background-color: transparent !important;
												}
												body.dark-mode .my-tab-con td .file span .img2 {
													background-color: transparent !important;
												}
												/* Board Dark Mode */
												body.dark-mode .board-title {
													color: #e0e0e0;
												}
												body.dark-mode .board-tab {
													border-color: #444;
												}
												body.dark-mode .board-tab a {
													color: #999;
												}
												body.dark-mode .board-tab a.on {
													color: #f2507e;
													border-bottom-color: #f2507e;
												}
												body.dark-mode .board-search {
													color: #e0e0e0;
												}
												body.dark-mode .board-search span {
													color: #ccc;
												}
												body.dark-mode .board-search span strong {
													color: #f2507e;
												}
												body.dark-mode .board-search > div {
													background-color: #2a2a2a;
													border-color: #555;
												}
												body.dark-mode .board-search > div input {
													background-color: #2a2a2a;
													color: #e0e0e0;
												}
												body.dark-mode .board-search > div input::placeholder {
													color: rgba(255, 255, 255, 0.5);
												}
												body.dark-mode .ul-table {
													border-color: #444;
												}
												body.dark-mode .ul-table > ul > li {
													border-color: #444;
													color: #e0e0e0;
												}
												body.dark-mode .ul-table > ul > li .title a {
													color: #e0e0e0;
												}
												body.dark-mode .ul-table > ul > li .con div span {
													color: #ccc;
												}
												body.dark-mode .board-view {
													border-color: #444;
													color: #e0e0e0;
												}
												body.dark-mode .board-view .title a {
													color: #e0e0e0;
												}
												body.dark-mode .board-view .con div span {
													color: #ccc;
												}
												body.dark-mode .board-view-con {
													border-color: #444;
													color: #e0e0e0;
												}
												body.dark-mode .board-view-paging {
													color: #e0e0e0;
												}
												body.dark-mode .board-view-paging i {
													background-color: #2a2a2a;
													color: #e0e0e0;
												}
												body.dark-mode .board-view-paging span a {
													color: #ccc;
												}
												body.dark-mode .board-view-paging > a {
													background-color: #2a2a2a;
													border-color: #555;
													color: #e0e0e0;
												}
												body.dark-mode .board-view-paging > a:hover {
													background-color: #333;
												}
												body.dark-mode .board-tab-con {
													color: #e0e0e0;
												}
												/* Latest & Popular Dark Mode */
												body.dark-mode #popular,
												body.dark-mode .latest {
													background-color: #1a1a1a;
													color: #e0e0e0;
												}
												body.dark-mode #popular h2,
												body.dark-mode .latest h2 {
													color: #ccc;
												}
												body.dark-mode #popular a,
												body.dark-mode .latest a {
													color: #e0e0e0;
													border-color: #444;
												}
												body.dark-mode #popular a:hover,
												body.dark-mode .latest a:hover {
													color: #f2507e;
												}
												/* GNB Menu Dark Mode */
												body.dark-mode #gnb {
													background-color: #1a1a1a;
													border-color: #444;
												}
												body.dark-mode #gnb h2 {
													color: #e0e0e0;
												}
												body.dark-mode .gnb-floor1 li > a,
												body.dark-mode .gnb-floor2 li > a {
													color: #e0e0e0;
												}
												body.dark-mode .gnb-floor1 li > a:hover,
												body.dark-mode .gnb-floor2 li > a:hover {
													background-color: #2a2a2a;
													color: #f2507e;
												}
												body.dark-mode .gnbf1-btn a {
													border-color: #555;
													background-color: #2a2a2a;
													color: #ccc;
												}
												body.dark-mode .gnbf1-btn a:hover {
													background-color: #333;
												}
												/* Header Menu Dark Mode */
												body.dark-mode #header-menu {
													background-color: #1a1a1a;
													border-color: #444;
												}
												body.dark-mode #header-menu a {
													color: #ccc;
												}
												body.dark-mode #header-menu a:hover {
													background-color: #2a2a2a;
													color: #f2507e;
												}
												/* Text Colors Dark Mode */
												body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
												body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
													color: #e0e0e0;
												}
												body.dark-mode p {
													color: #e0e0e0;
												}
												body.dark-mode strong {
													color: #e0e0e0;
												}
												body.dark-mode i, body.dark-mode em {
													color: #ccc;
												}
												/* Scrollbar Dark Mode */
												body.dark-mode ::-webkit-scrollbar {
													width: 12px;
												}
												body.dark-mode ::-webkit-scrollbar-track {
													background: #1a1a1a;
												}
												body.dark-mode ::-webkit-scrollbar-thumb {
													background: #444;
													border-radius: 6px;
												}
												body.dark-mode ::-webkit-scrollbar-thumb:hover {
													background: #555;
												}
												/* General Input Elements Dark Mode */
												body.dark-mode input[type="text"],
												body.dark-mode input[type="password"],
												body.dark-mode input[type="number"],
												body.dark-mode input[type="email"],
												body.dark-mode input[type="search"],
												body.dark-mode input[type="tel"],
												body.dark-mode textarea {
													background-color: #2a2a2a;
													border-color: #555;
													color: #e0e0e0;
												}
												body.dark-mode input[type="text"]:focus,
												body.dark-mode input[type="password"]:focus,
												body.dark-mode input[type="number"]:focus,
												body.dark-mode input[type="email"]:focus,
												body.dark-mode input[type="search"]:focus,
												body.dark-mode input[type="tel"]:focus,
												body.dark-mode textarea:focus {
													border-color: #f2507e;
													outline: none;
												}
												body.dark-mode input::placeholder,
												body.dark-mode textarea::placeholder {
													color: rgba(255, 255, 255, 0.5);
												}
												/* Button Dark Mode */
												body.dark-mode button:not(.modal-button):not(.close):not(.salesmartly-launcher):not(.support-open) {
													background-color: #2a2a2a;
													color: #e0e0e0;
													border-color: #555;
												}
												body.dark-mode button:hover:not(.modal-button):not(.close):not(.salesmartly-launcher):not(.support-open) {
													background-color: #333;
													border-color: #666;
												}
												body.dark-mode button:disabled {
													opacity: 0.5;
													cursor: not-allowed;
												}
												/* Latest & Comment Dark Mode */
												body.dark-mode .latest_list {
													background-color: #1a1a1a;
													border-color: #444;
												}
												body.dark-mode .latest_list li {
													border-color: #444;
													color: #e0e0e0;
												}
												body.dark-mode .latest_list a {
													color: #e0e0e0;
												}
												body.dark-mode .latest_list a:hover {
													color: #f2507e;
												}
												/* Comment Dark Mode */
												body.dark-mode .cmt_box,
												body.dark-mode .cmt_list {
													background-color: #1a1a1a;
													border-color: #444;
													color: #e0e0e0;
												}
												body.dark-mode .cmt_list li {
													border-color: #444;
												}
												/* Login Form Styles */
												#login {
													width: 90%;
													margin: 0 auto;
													display: flex;
													align-items: center;
													justify-content: center;
													flex-wrap: wrap;
													height: auto;
												}
												/* Login Form Dark Mode */
												body.dark-mode #login-box {
													background-color: #1a1a1a;
													color: #e0e0e0;
												}
												body.dark-mode #login-box .logo {
													filter: brightness(0.9);
												}
												body.dark-mode .login-btn,
												body.dark-mode .join-btn {
													background-color: #2a2a2a;
													color: #e0e0e0;
													border-color: #555;
												}
												body.dark-mode .login-btn:hover,
												body.dark-mode .join-btn:hover {
													background-color: #f2507e;
													color: #fff;
												}
												/* Login Button Margin */
												.login-btn-margin {
													margin-bottom: 4px;
												}
												/* SNS Title Text */
												.sns-title-text {
													font-size: 13px;
												}
												/* Text Right */
												.text-right {
													text-align: right;
												}
												/* Font 14 */
												.font-14 {
													font-size: 14px;
												}
												body.dark-mode .sns-title {
													color: #ccc;
												}
												body.dark-mode .sns-title-text {
													color: #e0e0e0;
												}
												body.dark-mode .SignIn_divider-bar__5ykQQ {
													background-color: #555;
												}
												/* Checkbox & Radio Dark Mode */
												body.dark-mode input[type="checkbox"],
												body.dark-mode input[type="radio"] {
													filter: brightness(0.8) contrast(1.2);
												}
												body.dark-mode .ui.checkbox label {
													color: #e0e0e0;
												}
												body.dark-mode .ui.checkbox label:before {
													border-color: #666;
													background-color: #2a2a2a;
												}
												body.dark-mode .ui.checkbox input:checked ~ label:before {
													background-color: #f2507e;
													border-color: #f2507e;
												}
												/* Tooltip Dark Mode */
												body.dark-mode .tooltip {
													background-color: #2a2a2a;
													color: #e0e0e0;
													border-color: #555;
												}
												/* Loading & Spinner Dark Mode */
												body.dark-mode .loader-circle,
												body.dark-mode .spinner {
													border-top-color: #f2507e;
													border-right-color: #444;
													border-bottom-color: #444;
													border-left-color: #444;
												}
												/* Export Popup Animation */
												@keyframes modalFadeIn {
													from {
														opacity: 0;
														transform: scale(0.95);
													}
													to {
														opacity: 1;
														transform: scale(1);
													}
												}
												/* Export Popup Styles */
												.export-popup {
													display: none;
													position: fixed;
													z-index: 10000;
													left: 0;
													top: 0;
													width: 100%;
													height: 100%;
													background-color: rgba(0, 0, 0, 0.7);
													align-items: center;
													justify-content: center;
													overflow-y: auto;
													padding: 20px;
												}
												.export-popup.active {
													display: flex;
												}
												.export-popup-con {
													position: relative;
													background-color: #fff;
													margin: auto;
													padding: 0;
													border-radius: 12px;
													width: 90%;
													max-width: 500px;
													max-height: 90vh;
													overflow-y: auto;
													animation: modalFadeIn 0.3s;
												}
												.export-popup-con .f-header {
													padding: 20px 24px;
													border-bottom: 1px solid #eee;
													font-size: 18px;
													font-weight: 700;
													color: #000;
													display: flex;
													align-items: center;
													justify-content: space-between;
													position: relative;
												}
												.export-popup-con main {
													padding: 0;
												}
												.modal-content-padding {
													padding: 24px;
												}
												.export-form-group {
													margin: 0;
												}
												.export-form-item {
													margin-bottom: 20px;
												}
												.export-form-item:last-child {
													margin-bottom: 0;
												}
												.export-form-label {
													display: flex;
													align-items: center;
													font-size: 14px;
													font-weight: 600;
													color: #333;
													margin-bottom: 8px;
												}
												.export-form-label svg {
													width: 18px !important;
													height: 18px !important;
													max-width: 18px !important;
													max-height: 18px !important;
													margin-right: 6px;
													fill: #666;
													flex-shrink: 0;
													vertical-align: middle;
												}
												.export-form-input,
												.export-form-select {
													width: 100%;
													padding: 12px 16px;
													border: 1px solid #ddd;
													border-radius: 8px;
													font-size: 15px;
													background-color: #fff;
													color: #333;
													transition: all 0.3s;
												}
												.export-form-input:focus,
												.export-form-select:focus {
													outline: none;
													border-color: #f2507e;
													box-shadow: 0 0 0 3px rgba(242, 80, 126, 0.1);
												}
												.export-preview-card {
													background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf6 100%);
													padding: 20px;
													border-radius: 12px;
													margin: 20px 0;
													border: 1px solid #e0e0e0;
													display: flex;
													justify-content: space-between;
													align-items: center;
												}
												.export-preview-label {
													color: #666;
													font-size: 13px;
													margin-bottom: 5px;
												}
												.export-preview-value {
													font-size: 24px;
													font-weight: 700;
													color: #f2507e;
												}
												.export-preview-icon {
													width: 40px !important;
													height: 40px !important;
													max-width: 40px !important;
													max-height: 40px !important;
													fill: #f2507e;
													opacity: 0.3;
													flex-shrink: 0;
												}
												.export-preview-card .preview-item {
													display: flex;
													justify-content: space-between;
													align-items: center;
													padding: 10px 0;
													font-size: 14px;
												}
												.export-preview-card .preview-label {
													color: #666;
												}
												.export-preview-card .preview-value {
													color: #333;
													font-weight: 600;
												}
												.export-warning-box {
													background: linear-gradient(135deg, #fff9e6 0%, #ffe8a3 100%);
													border: 1px solid #ffc107;
													border-left: 4px solid #ffc107;
													border-radius: 8px;
													padding: 18px;
													margin: 20px 0;
													font-size: 14px;
													color: #856404;
													display: flex;
													align-items: flex-start;
												}
												.export-warning-icon {
													width: 20px !important;
													height: 20px !important;
													max-width: 20px !important;
													max-height: 20px !important;
													fill: #f57c00;
													margin-right: 10px;
													flex-shrink: 0;
													margin-top: 2px;
												}
												.export-warning-title {
													color: #e65100;
													font-weight: 600;
													font-size: 14px;
													margin-bottom: 8px;
												}
												.export-warning-list {
													list-style: none;
													padding: 0;
													margin: 0;
													color: #666;
													font-size: 13px;
													line-height: 1.8;
												}
												.export-warning-list li {
													margin-bottom: 5px;
												}
												.export-warning-list li:last-child {
													margin-bottom: 0;
												}
												.export-balance-text {
													color: #999;
													font-size: 13px;
													font-weight: normal;
												}
												.export-submit-button {
													width: 100%;
													padding: 16px;
													background-color: #f2507e;
													color: #fff;
													border: none;
													border-radius: 8px;
													font-size: 16px;
													font-weight: 600;
													cursor: pointer;
													transition: all 0.3s;
													margin-top: 20px;
													display: flex;
													align-items: center;
													justify-content: center;
													gap: 8px;
												}
												.export-submit-button:hover {
													background-color: #e0486c;
													transform: translateY(-1px);
													box-shadow: 0 4px 12px rgba(242, 80, 126, 0.3);
												}
												.export-submit-button:active {
													transform: translateY(0);
												}
												.export-submit-button:disabled {
													background-color: #ccc;
													color: #999;
													cursor: not-allowed;
													opacity: 0.6;
												}
												.export-submit-button svg {
													width: 20px !important;
													height: 20px !important;
													max-width: 20px !important;
													max-height: 20px !important;
													fill: #fff;
													flex-shrink: 0;
												}
												/* Export Popup Dark Mode */
												body.dark-mode .export-popup-con {
													background-color: #1a1a1a !important;
													color: #e0e0e0;
												}
												body.dark-mode .export-form-group,
												body.dark-mode .export-form-item {
													color: #e0e0e0;
												}
												body.dark-mode .export-form-label {
													color: #e0e0e0;
												}
												body.dark-mode .export-form-input,
												body.dark-mode .export-form-select {
													background-color: #2a2a2a;
													border-color: #555;
													color: #e0e0e0;
												}
												body.dark-mode .export-form-input:focus,
												body.dark-mode .export-form-select:focus {
													border-color: #f2507e;
												}
												body.dark-mode .export-preview-card {
													background-color: #2a2a2a;
													border-color: #555;
												}
												body.dark-mode .export-warning-box {
													background-color: #2a2a2a;
													border-color: #666;
													color: #e0e0e0;
												}
												body.dark-mode .export-submit-button {
													background-color: #f2507e;
													color: #fff;
												}
												body.dark-mode .export-submit-button:hover {
													background-color: #e0486c;
												}
												body.dark-mode .export-submit-button:disabled {
													background-color: #444;
													color: #999;
													opacity: 0.5;
												}
												/* UI Input & Field Dark Mode */
												body.dark-mode .ui.fluid.input input {
													background-color: #2a2a2a !important;
													border-color: #555 !important;
													color: #e0e0e0 !important;
												}
												body.dark-mode .ui.fluid.input input:focus {
													border-color: #f2507e !important;
												}
												body.dark-mode .ui.fluid.input input::placeholder {
													color: rgba(255, 255, 255, 0.5) !important;
												}
												body.dark-mode .field label {
													color: #e0e0e0;
												}
												/* Text Color Classes Dark Mode */
												body.dark-mode .text-gray,
												body.dark-mode .font-14.text-gray {
													color: #ccc !important;
												}
												body.dark-mode .text-gray:hover {
													color: #f2507e !important;
												}
												/* SNS Button Dark Mode */
												body.dark-mode .sns-btn button {
													background-color: transparent;
													border: none;
													opacity: 0.9;
												}
												body.dark-mode .sns-btn button:hover {
													opacity: 1;
													transform: scale(1.05);
												}
												/* Join Input Dark Mode */
												body.dark-mode .join-input li input {
													background-color: #2a2a2a;
													border-color: #555;
													color: #e0e0e0;
												}
												body.dark-mode .join-input li input:focus {
													border-color: #f2507e;
												}
												body.dark-mode .join-input li input::placeholder {
													color: rgba(255, 255, 255, 0.5);
												}
												body.dark-mode .join-input li strong {
													color: #e0e0e0;
												}
												body.dark-mode .join-input li.sex {
													border-color: #555;
													background-color: #2a2a2a;
												}
												body.dark-mode .join-input li.sex label {
													color: #e0e0e0;
												}
												body.dark-mode .join-input li.sex label.on {
													background-color: #444;
													color: #fff;
												}
												body.dark-mode .li-years > select {
													background-color: #2a2a2a;
													border-color: #555;
													color: #e0e0e0;
												}
												body.dark-mode .ui.button.dark {
													background-color: #2a2a2a;
													color: #e0e0e0;
												}
												body.dark-mode .ui.button.dark:hover {
													background-color: #333;
												}
												body.dark-mode .ui.button.primary {
													background-color: #f2507e;
													color: #fff;
												}
												body.dark-mode .ui.button.primary:hover {
													background-color: #e0486c;
												}
												/* Section Wrap Dark Mode (Top Rank) */
												body.dark-mode .section-wrap {
													background-color: transparent;
												}
												body.dark-mode .section-inner {
													color: #e0e0e0;
												}
												body.dark-mode .ui.header {
													color: #e0e0e0;
												}
												body.dark-mode .grid-container {
													background-color: transparent;
												}
												body.dark-mode .popular-list-item,
												body.dark-mode .popular-item {
													background-color: #1a1a1a;
													border-color: #444;
												}
												body.dark-mode .rank-table-wrapper {
													background-color: #1a1a1a;
												}
												body.dark-mode .flx-table {
													background-color: #1a1a1a;
													color: #e0e0e0;
												}
												body.dark-mode .flx-table th,
												body.dark-mode .flx-table td {
													border-color: #444;
													color: #e0e0e0;
												}
												body.dark-mode .flx-table th {
													background-color: #2a2a2a;
												}
												body.dark-mode .ranking-number {
													color: #e0e0e0;
												}
												/* Override inline styles in dark mode */
												body.dark-mode [style*="color: #000"],
												body.dark-mode [style*="color:#000"] {
													color: #e0e0e0 !important;
												}
												body.dark-mode [style*="background: #fff"],
												body.dark-mode [style*="background:#fff"],
												body.dark-mode [style*="background-color: #fff"],
												body.dark-mode [style*="background-color:#fff"] {
													background-color: #1a1a1a !important;
												}
												body.dark-mode [style*="background: rgb(255"] {
													background: #1a1a1a !important;
												}
												/* GNB User Info Dark Mode */
												body.dark-mode .user-info > .user-txt {
													color: #ccc;
												}
												body.dark-mode .user-info > .user-txt .point {
													color: #e0e0e0 !important;
												}
												body.dark-mode .user-info > .user-txt .user-nick-group span {
													color: #ccc;
												}
												body.dark-mode .user-info > .user-txt .user-nick-group a {
													background-color: #2a2a2a;
													color: #e0e0e0 !important;
												}
												body.dark-mode .user-info > .user-txt .user-nick-group a:hover {
													background-color: #333;
												}
												body.dark-mode #gnb .flex-wrap .point {
													color: #f2507e !important;
												}
												body.dark-mode .flex-wrap .point {
													color: #f2507e !important;
												}
												body.dark-mode .flex-wrap > span {
													color: #e0e0e0 !important;
												}
												body.dark-mode .flex-wrap span:not(.point) {
													color: #e0e0e0 !important;
												}
												body.dark-mode #gnb .flex-wrap > a {
													border-color: #555;
													background-color: #2a2a2a;
													color: #e0e0e0;
												}
												body.dark-mode #gnb .link-wrap {
													border-color: #555;
												}
												body.dark-mode #gnb .link-wrap > a,
												body.dark-mode #gnb .link-wrap > button {
													color: #e0e0e0 !important;
												}
												body.dark-mode #gnb .link-wrap > a:hover,
												body.dark-mode #gnb .link-wrap > button:hover {
													color: #f2507e !important;
												}
												/* Dark Mode - Link Wrap Icons (PNG) */
												body.dark-mode #gnb .link-wrap > a img:not([data-dark-src]),
												body.dark-mode #gnb .link-wrap > button img:not([data-dark-src]) {
													filter: brightness(1.2) contrast(1.1);
													opacity: 0.9;
												}
												/* SVG Icons - no filter needed as we use separate files */
												#gnb .link-wrap > a img.icon-svg,
												#gnb .link-wrap > button img.icon-svg {
													filter: none;
												}
												/* Dark Mode - SVG Icons hover (change to pink) */
												body.dark-mode #gnb .link-wrap > a:hover img[src*="ico-my-dark.svg"],
												body.dark-mode #gnb .link-wrap > a:hover img[src*="ico-cast-dark.svg"],
												body.dark-mode #gnb .link-wrap > button:hover img[src*="ico-my-dark.svg"],
												body.dark-mode #gnb .link-wrap > button:hover img[src*="ico-cast-dark.svg"] {
													filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(1725%) hue-rotate(315deg) brightness(0.97) contrast(0.95);
												}
												body.dark-mode #gnb .link-wrap > a:after,
												body.dark-mode #gnb .link-wrap > button:after {
													background-color: #555;
												}
												body.dark-mode .gnb-top {
													border-color: #555;
												}
												body.dark-mode #gnb .other-link-wrap {
													background-color: #2a2a2a;
												}
												body.dark-mode #gnb .btn-login > button {
													background-color: #2a2a2a;
													color: #ccc;
													border-color: #555;
												}
												body.dark-mode #gnb .btn-login > button:hover {
													background-color: #333;
													color: #e0e0e0;
												}
												body.dark-mode .side-app-down a span.txt {
													background-color: #2a2a2a !important;
													color: #e0e0e0 !important;
												}
												/* ModeSet in GNB Dark Mode */
												body.dark-mode .modeSet {
													border-top-color: #444 !important;
													border-bottom-color: #444 !important;
												}
												body.dark-mode .modeSet .settings span {
													color: #e0e0e0 !important;
												}
												body.dark-mode .side-app-down .money-banner-warper {
													background-color: #2a2a2a;
												}
												body.dark-mode .side-app-down .money-banner-warper button {
													background-color: #00fff6;
													color: #000;
												}
												body.dark-mode #gnb::-webkit-scrollbar-track {
													background: #1a1a1a;
												}
												body.dark-mode #gnb::-webkit-scrollbar-thumb {
													background: #555;
												}
												body.dark-mode #gnb::-webkit-scrollbar-thumb:hover {
													background: #666;
												}
												/* Main Popup Dark Mode */
												body.dark-mode .main-popup-box {
													background-color: #1a1a1a;
													color: #e0e0e0;
												}
												body.dark-mode .main-popup-box .btn-group button {
													background-color: #2a2a2a;
													border-color: #555;
													color: #e0e0e0;
												}
												body.dark-mode .main-popup-box .btn-group button:hover {
													background-color: #333;
												}
												body.dark-mode .main-popup-box .btn-group button.btn-close {
													background-color: #2a2a2a;
													border-color: #2a2a2a;
													color: #e0e0e0;
												}
												body.dark-mode .main-popup-box .btn-group button.btn-close:hover {
													background-color: #333;
												}
												/* 더보기 버튼 스타일 - PC端和移动端统一 */
												.load-more-wrap {
													text-align: center;
													margin: 30px 20px;
													position: relative;
												}
												.load-more-wrap::before {
													content: "";
													width: 21%;
													height: 1px;
													background: #999;
													position: absolute;
													top: calc(50% - 1px);
													left: 0;
												}
												.load-more-wrap::after {
													content: "";
													width: 21%;
													height: 1px;
													background: #999;
													position: absolute;
													top: calc(50% - 1px);
													right: 0;
												}
												.load-more-btn {
													text-align: center;
													border: 1px solid #999;
													padding: 2px 20px;
													border-radius: 15px;
													background: #fff;
													color: #666;
													cursor: pointer;
													display: inline-block;
													text-decoration: none;
													font-size: 14px;
													transition: all 0.3s;
												}
												.load-more-btn span {
													display: inline-block;
													background: url(/replica/assets/img/site-desktop/more_on.svg) no-repeat right center;
													color: #666;
													padding-right: 20px;
													background-size: 11px 6px !important;
												}
												.load-more-btn.on span {
													background: url(/replica/assets/img/site-desktop/more_off.svg) no-repeat right center;
												}
												.load-more-btn:hover {
													border-color: #f2507e;
													color: #f2507e;
												}
												.load-more-loading {
													display: none;
													margin-top: 10px;
													color: #999;
													font-size: 14px;
												}
												/* 다크모드 적용 */
												body.dark-mode .load-more-wrap::before,
												body.dark-mode .load-more-wrap::after {
													background: #666;
												}
												body.dark-mode .load-more-btn {
													background: #1a1a1a;
													border-color: #666;
													color: #e0e0e0;
												}
												body.dark-mode .load-more-btn:hover {
													border-color: #f2507e;
													color: #f2507e;
												}
												body.dark-mode .load-more-loading {
													color: #aaa;
												}
												/* 숨김 항목 스타일 */
												.hidden-item {
													display: none !important;
													visibility: hidden !important;
												}
												li.hidden-item {
													display: none !important;
												}
												

											/* 고객상담 Modal 스타일 - Mobile */
											.customer-modal-content {
												max-width: 90%;
												width: 90%;
												background-color: #fefefe;
												border-radius: 10px;
											}
											
											.customer-info-item {
												display: flex;
												align-items: center;
												padding: 15px;
												margin: 10px 0;
												background: #fff;
												border-radius: 6px;
												border: 1px solid #e0e0e0;
												box-shadow: 0 2px 6px rgba(0,0,0,0.1);
												transition: all 0.3s ease;
												flex-wrap: wrap;
											}
											
											.customer-info-item:hover {
												box-shadow: 0 3px 8px rgba(0,0,0,0.16);
												border-color: #f2507e;
											}
											
											.customer-info-icon {
												margin-right: 12px;
												width: 40px;
												height: 40px;
												display: flex;
												align-items: center;
												justify-content: center;
												border-radius: 50%;
												background: #fff;
												border: 1px solid #e0e0e0;
												flex-shrink: 0;
												overflow: hidden;
											}
											
											.customer-info-icon img {
												width: 140%;
												height: 140%;
												object-fit: contain;
												padding: 6px;
											}
											
											.customer-info-content {
												flex: 1;
												min-width: 0;
												margin-bottom: 8px;
											}
											
											.customer-info-label {
												font-weight: 500;
												color: #222;
												font-size: 13px;
												margin-bottom: 4px;
												display: block;
											}
											
											.customer-info-value {
												color: #666;
												font-size: 14px;
												word-break: break-all;
												font-weight: 400;
											}
											
											.customer-copy-btn {
												width: 100%;
												margin-top: 8px;
												padding: 8px 16px;
												background-color: #000;
												color: white;
												border: none;
												border-radius: 5px;
												font-size: 13px;
												font-weight: 400;
												cursor: pointer;
												transition: all 0.3s ease;
											}
											
											.customer-copy-btn:hover {
												background-color: #f2507e;
											}
											
											.customer-copy-btn:active {
												transform: scale(0.98);
											}
											
											.customer-copy-btn.copied {
												background-color: #f2507e;
											}
											
											.customer-info-empty {
												color: #999;
												font-style: italic;
												text-align: center;
												padding: 30px 15px;
											}
											
											/* Dark Mode 스타일 - Mobile */
											body.dark-mode .customer-modal-content {
												background-color: #1a1a1a;
											}
											
											body.dark-mode .customer-info-item {
												background: #2a2a2a;
												border-color: #333;
											}
											
											body.dark-mode .customer-info-item:hover {
												border-color: #f2507e;
											}
											
											body.dark-mode .customer-info-icon {
												background: #2a2a2a;
												border-color: #333;
											}
											
											body.dark-mode .customer-info-label {
												color: #e0e0e0;
											}
											
											body.dark-mode .customer-info-value {
												color: #ccc;
											}
											
											body.dark-mode .customer-info-empty {
												color: #999;
											}
											
											body.dark-mode #customer-modal h3 {
												color: #e0e0e0 !important;
											}
											
											body.dark-mode #customer-modal button[onclick="closeCustomerModal()"] {
												color: #999 !important;
											}
											
											body.dark-mode #customer-modal button[onclick="closeCustomerModal()"]:hover {
												color: #e0e0e0 !important;
											}

/* Mobile interaction and safe-area corrections for the reconstructed shell. */
body.replica-mobile {
	min-width: 0;
	overflow-x: hidden;
}
body.replica-mobile #container {
	min-width: 0;
	padding-bottom: calc(50px + env(safe-area-inset-bottom));
}
body.replica-mobile .all-btn,
body.replica-mobile .header1-right a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
body.replica-mobile .all-btn img,
body.replica-mobile .header1-right a img {
	width: auto;
	max-width: 22px;
	max-height: 22px;
}
body.replica-mobile .header1-right {
	display: flex;
	align-items: center;
	margin-right: -8px;
}
body.replica-mobile #gnb {
	width: min(280px, calc(100vw - 40px));
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
	overscroll-behavior: contain;
	z-index: 10010;
}
body.replica-mobile #gnb .btn-close {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 4px 0;
	min-height: 44px;
	position: sticky;
	top: 0;
	z-index: 2;
	background: #fff;
}
body.replica-mobile #gnb .menu-close-button {
	display: grid;
	place-items: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	box-sizing: border-box;
	border: 1px solid #e8ebef;
	border-radius: 50%;
	background: #f5f6f8;
	color: #596779;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s, border-color .15s;
}
body.replica-mobile #gnb .menu-close-button svg {
	width: 18px;
	height: 18px;
	pointer-events: none;
}
body.replica-mobile #gnb .menu-close-button:active {
	background: #e8ecf1;
}
body.replica-mobile #gnb .menu-close-button:focus:not(:focus-visible) {
	outline: none;
}
body.replica-mobile #gnb .menu-close-button:focus-visible {
	outline: 2px solid #6579ae;
	outline-offset: 3px;
}
@media (hover: hover) {
	body.replica-mobile #gnb .menu-close-button:hover {
		background: #edf0f4;
		border-color: #d9dfe7;
	}
}
body.replica-mobile #gnb .gnb-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	box-sizing: border-box;
}
body.replica-mobile #gnb .replica-account-balance {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 2px 0 5px;
	font-size: 14px;
	font-weight: 600;
	color: #222;
}
body.replica-mobile #gnb .replica-account-balance b { color: #f2507e; font-size: 16px; }
body.replica-mobile #gnb .replica-account-balance a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 58px;
	height: 32px;
	padding: 0 14px;
	border: 1px solid #ddd;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	color: #222 !important;
}
body.replica-mobile #gnb .replica-account-links {
	display: flex;
	margin: 7px 0 0;
	padding: 13px 0 14px;
	border-bottom: 1px solid #ddd;
}
body.replica-mobile #gnb .replica-account-links a {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 42px;
	padding: 0 8px;
	font-size: 12px;
	font-weight: 500;
	color: #222 !important;
}
body.replica-mobile #gnb .replica-account-links a + a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 26px;
	background: #ddd;
	transform: translateY(-50%);
}
body.replica-mobile #gnb .replica-account-icon { font-size: 25px; line-height: 1; font-weight: 400; }
body.replica-mobile #gnb .replica-user-name { display: block; font-size: 16px; font-weight: 500; color: #222; }
body.replica-mobile #gnb .replica-user-role { display: block; margin-top: 5px; font-size: 13px; color: #888; }
body.replica-mobile #gnb .btn-action,
body.replica-mobile #load-more-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	box-sizing: border-box;
}
body.replica-mobile #search-box {
	padding-top: max(5px, env(safe-area-inset-top));
	box-sizing: border-box;
}
body.replica-mobile #search-box .btn-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	box-sizing: border-box;
}
body.replica-mobile #search-box form {
	min-width: 0;
}
body.replica-mobile #search-box input {
	min-height: 44px;
	font-size: 16px !important; /* Prevent iOS from zooming the page on focus. */
}
body.replica-mobile .auth-modal {
	padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
	box-sizing: border-box;
}
body.replica-mobile .auth-modal-content {
	max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	overscroll-behavior: contain;
}
body.replica-mobile .auth-modal-close {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
}
body.replica-mobile .auth-modal input,
body.replica-mobile .auth-modal button {
	min-height: 44px;
}
body.replica-mobile .home-mobile-live-card,
body.replica-mobile .home-mobile-feature-card {
	-webkit-tap-highlight-color: transparent;
}
.replica-menu-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: rgba(0,0,0,.4);
}
body.replica-mobile.replica-menu-visible .replica-menu-backdrop {
	display: block;
}
body.replica-mobile #header .btn-search {
	background-image: none !important;
}