@charset "utf-8";
/* F2 member site — dark emerald + neon green (reference homepage) */

/* ── Page background ── */
html,
body {
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(0, 255, 157, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 50%, rgba(0, 180, 120, 0.04) 0%, transparent 45%),
    linear-gradient(180deg, #0c1814 0%, #060d0a 45%, #0a1410 100%) !important;
  color: var(--amp-text);
}

#wrap,
.contents_wrap {
  background: transparent;
}

/* ── Header top (logo + GNB + auth) ── */
.header_top {
  background: linear-gradient(180deg, #0f2119 0%, #0a1612 100%) !important;
  border-bottom: 1px solid var(--f2-border) !important;
  box-shadow: 0 2px 16px rgba(0, 255, 157, 0.1);
}

.gnb li a {
  color: #c8ddd4 !important;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.gnb li a:hover {
  color: var(--amp-gold) !important;
  text-shadow: 0 0 12px var(--f2-accent-glow);
}

.join_btn {
  background: linear-gradient(180deg, #00ff88 0%, #00cc6a 100%) !important;
  border: 1px solid #00ff88 !important;
  color: #001410 !important;
  font-weight: 700;
  border-radius: 3px !important;
  box-shadow: 0 0 14px rgba(0, 255, 136, 0.4);
  transition: box-shadow 0.2s, filter 0.2s;
}

.join_btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.55);
}

.login_btn {
  border-color: rgba(0, 255, 157, 0.5) !important;
  color: var(--amp-gold) !important;
}

/* ── Header bottom (user bar + LNB) ── */
.header_bottom {
  background: #050a08 !important;
  border-bottom: 1px solid rgba(0, 255, 136, 0.35) !important;
  box-shadow: 0 1px 0 rgba(0, 255, 136, 0.08);
}

/* my_wrap chips — dark glass pills, neon value accents */
.my_wrap {
  gap: 4px;
}

.my {
  background: linear-gradient(180deg, #163028 0%, #0d1c18 100%) !important;
  border: 1px solid rgba(0, 255, 136, 0.28) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 8px rgba(0, 255, 136, 0.06);
  margin: 0 4px 0 0 !important;
  overflow: hidden;
}

.my_box {
  color: #c5d8cf !important;
  font-weight: 500;
}

.my_link,
.my_font01,
.my_money {
  color: #00ff88 !important;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.35);
}

.my_line {
  background: rgba(0, 255, 136, 0.25) !important;
}

/* First chip (Lv) — stronger neon frame */
.my_wrap > .my:first-child {
  border-color: rgba(0, 255, 136, 0.55) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 136, 0.15),
    0 0 10px rgba(0, 255, 136, 0.18);
}

/* lnb_wrap buttons — dark teal recessed pills, white text */
.lnb_wrap {
  gap: 4px;
}

.lnb {
  background: linear-gradient(180deg, #1e3a48 0%, #152a35 55%, #102028 100%) !important;
  border: 1px solid rgba(80, 120, 140, 0.35) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.25);
  margin: 0 0 0 4px !important;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, filter 0.2s;
}

.lnb a {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lnb:hover {
  border-color: rgba(0, 255, 136, 0.45) !important;
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 10px rgba(0, 255, 136, 0.15);
}

.lnb a:hover {
  color: #00ff88 !important;
}

.lnb.active {
  background: linear-gradient(180deg, #00ff88 0%, #00cc6a 100%) !important;
  border-color: #00ff88 !important;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
}

.lnb.active a {
  color: #001410 !important;
}

.mobile_menu1,
.mobile_menu2 {
  color: #00ff88 !important;
}

.mobile_my_wrap .my {
  background: linear-gradient(180deg, #163028 0%, #0d1c18 100%) !important;
  border: 1px solid rgba(0, 255, 136, 0.28) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 8px rgba(0, 255, 136, 0.06);
}

/* ── Left sidebar (contents_left) ── */
.contents_left {
  background:
    linear-gradient(180deg, rgba(0, 255, 136, 0.04) 0%, transparent 120px),
    linear-gradient(180deg, #0a2a22 0%, #06201a 40%, #041812 100%) !important;
  border-right: 2px solid #00ff88 !important;
  box-shadow:
    4px 0 18px rgba(0, 255, 136, 0.22),
    inset -1px 0 12px rgba(0, 255, 136, 0.06);
}

.left_menu a {
  border-bottom: 1px solid rgba(0, 255, 136, 0.1) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.02) !important;
}

.left_icon {
  color: #ffffff !important;
  filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.25));
}

.left_text1 {
  color: #ffffff !important;
  font-weight: 700;
}

.left_text2 {
  color: #8fa89c !important;
}

.left_menu a:hover,
.left_menu.active a {
  background: rgba(0, 255, 136, 0.1) !important;
  box-shadow: inset 3px 0 0 #00ff88;
}

.left_menu a:hover .left_icon,
.left_menu a:hover .left_text1,
.left_menu.active a .left_icon,
.left_menu.active a .left_text1 {
  color: #00ff88 !important;
}

.left_menu a:hover .left_icon,
.left_menu.active a .left_icon {
  filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.55));
}

/* ── Main content area ── */
.contents_wrap {
  border-top: 1px solid rgba(0, 255, 157, 0.12) !important;
}

.main_center_center {
  background: transparent;
}

/* Home banners — neon frame glow */
.main_center_center_box .amp-home-banners-top,
.main_center_center_box .amp-home-banner-wide,
.main_center_center_box .main_game_wrap {
  border: 1px solid var(--f2-border);
  box-shadow:
    0 0 10px rgba(0, 255, 157, 0.12),
    inset 0 0 24px rgba(0, 255, 157, 0.03);
  margin-top: 8px;
}

.main_center_center_box .amp-home-banners-top .visuall_wrap,
.main_center_center_box .amp-home-banners-top .visuall_wrap_pin {
  outline: 1px solid rgba(0, 255, 157, 0.2);
}

.main_center_center_box .main_game1,
.main_center_center_box .main_game2 {
  margin-top: 0 !important;
}

.main_center_center_box .main_game1 li a img,
.main_center_center_box .main_game2 li a img,
.main_center_center_box .amp-home-banner-wide img,
.main_center_center_box .amp-home-banners-top img {
  border-radius: 0;
}

/* ── Right sidebar — match left forest green ── */
.contents_right {
  background:
    linear-gradient(180deg, rgba(0, 255, 136, 0.04) 0%, transparent 120px),
    linear-gradient(180deg, #0a2a22 0%, #06201a 40%, #041812 100%) !important;
  border-left: 2px solid #00ff88 !important;
  box-shadow:
    -4px 0 18px rgba(0, 255, 136, 0.18),
    inset 1px 0 12px rgba(0, 255, 136, 0.06);
}

.right_event_wrap {
  border: 1px solid var(--f2-border);
  box-shadow: 0 0 10px rgba(0, 255, 157, 0.1);
}

.right_event_title {
  background: var(--amp-panel3) !important;
  border-bottom: 1px solid var(--amp-gold) !important;
  color: var(--amp-gold) !important;
}

.right_event_btn {
  background: var(--amp-panel3) !important;
  color: var(--amp-text) !important;
}

.right_event_btn:hover {
  color: var(--amp-gold) !important;
}

.right_customer,
.right_domain,
.amp-right-customer {
  background: var(--amp-panel) !important;
  border: 1px solid var(--f2-border) !important;
  box-shadow: 0 0 8px rgba(0, 255, 157, 0.08);
  padding: 12px;
  border-radius: 0;
}

.amp-right-customer .rc_text {
  color: var(--amp-muted) !important;
}

.amp-right-customer .rc_text span {
  color: #fff !important;
}

.rd_text2,
.rd_text3,
.board_font01,
.main_board_title span {
  color: var(--amp-gold) !important;
}

/* ── Footer ── */
.footer_wrap {
  border-top: 1px solid rgba(0, 255, 157, 0.15);
  background: transparent;
}

.f_copy {
  color: var(--amp-muted) !important;
}

/* ── Buttons (global gold → neon green) ── */
.btn1_1:hover,
.btn3_1:hover {
  background: #33ffb0 !important;
  box-shadow: 0 0 12px var(--f2-accent-glow);
}

.btn1,
.btn5.active,
.info1,
.font05,
.write_basic_item_contents,
.input3,
.pop_login_btn1 {
  color: var(--amp-gold) !important;
}

.pop_login_btn1 {
  background: var(--amp-gold) !important;
  color: #001410 !important;
}

.btn1_2:hover,
.btn2_1:hover,
.btn2_2:hover,
.btn3_2:hover,
.btn4:not(.disabled):hover,
.btn5:not(.disabled):hover,
.quick_amoint_btn:hover,
.quick_select_btn:hover .select_icon,
.list:hover,
.list.active {
  color: var(--amp-gold) !important;
}

.quick_select_btn.active,
.quick_select_btn:hover {
  box-shadow: 0 0 0 1px var(--amp-gold) !important;
}

.quick_select_btn.active .select_icon {
  color: var(--amp-gold) !important;
}

.list.active,
.list:hover {
  box-shadow: inset 2px 0 var(--amp-gold) !important;
}

.division2,
.division4,
.bet_btn {
  background: var(--amp-gold) !important;
  color: #001410 !important;
}

/* ── Page titles / panels ── */
.title_box {
  border-bottom-color: rgba(0, 255, 157, 0.2) !important;
}

.title_box .title span,
.s_title1 {
  color: var(--amp-gold) !important;
}

.content_box,
.content_box_in,
.con_box00,
.con_box01,
.info_wrap,
.list_title1,
.list1,
.write_title,
.write_title2,
.member_wrap .tab_double > div > div:first-child,
.tab_single > div:first-child,
.tab_triple > div > div:first-child > div:first-child {
  background-color: var(--amp-panel) !important;
}

.list2,
.write_basic_item,
.write_basic_select,
.list_table tr,
.list,
.btn4,
.btn5 {
  background-color: var(--amp-panel2) !important;
}

.list_table tr.active,
.list_table tr:hover,
.select_icon,
.select_text,
.btn3 {
  background-color: var(--amp-panel3) !important;
}

/* ── Tables ── */
.main_center_center_box table th {
  background: var(--amp-panel3) !important;
  color: var(--amp-gold) !important;
  border-color: rgba(0, 255, 157, 0.15) !important;
}

.main_center_center_box table td {
  border-color: rgba(0, 255, 157, 0.08) !important;
}

/* ── Scrollbars ── */
html,
body {
  scrollbar-color: rgba(0, 255, 157, 0.45) transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.main_center_center::-webkit-scrollbar-thumb,
.contents_left::-webkit-scrollbar-thumb,
.contents_right::-webkit-scrollbar-thumb,
.aside_wrap::-webkit-scrollbar-thumb {
  background-color: rgba(0, 255, 157, 0.45) !important;
}

/* ── Mobile bottom nav ── */
.m_menu_fix {
  background: linear-gradient(180deg, #0f2119 0%, #0a1612 100%) !important;
  border-top: 1px solid var(--f2-border) !important;
  box-shadow: 0 -4px 20px rgba(0, 255, 157, 0.1) !important;
}

.m_menu_fix li:nth-child(3) a {
  background: linear-gradient(180deg, #00ff9d 0%, #00cc7a 100%) !important;
  color: #001410 !important;
  box-shadow: 0 0 16px rgba(0, 255, 157, 0.4) !important;
}

.m_menu_fix li a {
  color: var(--amp-muted) !important;
}

.m_menu_fix li a:hover {
  color: var(--amp-gold) !important;
}

/* ── Aside drawer (mobile) — match PC contents_left / my_wrap / lnb ── */
.aside,
.aside2 {
  background-color: #041812 !important;
  box-shadow: 0 0 24px rgba(0, 255, 136, 0.2) !important;
}

.aside_wrap,
.aside2 .aside_wrap {
  background:
    linear-gradient(180deg, rgba(0, 255, 136, 0.04) 0%, transparent 120px),
    linear-gradient(180deg, #0a2a22 0%, #06201a 40%, #041812 100%) !important;
  border-right: 2px solid #00ff88 !important;
  box-shadow: inset -1px 0 12px rgba(0, 255, 136, 0.06);
}

.aside2 .aside_wrap {
  border-right: none !important;
  border-left: 2px solid #00ff88 !important;
  box-shadow: inset 1px 0 12px rgba(0, 255, 136, 0.06);
}

.aside_close {
  background: linear-gradient(180deg, #1e3a48 0%, #152a35 100%) !important;
  border: 1px solid rgba(0, 255, 136, 0.35) !important;
  color: #00ff88 !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.15);
}

.aside_wrap .left_menu a,
.aside2 .aside_wrap .left_menu a {
  border-bottom: 1px solid rgba(0, 255, 136, 0.1) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.02) !important;
}

.aside_wrap .left_icon,
.aside2 .aside_wrap .left_icon {
  color: #ffffff !important;
  filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.25));
}

.aside_wrap .left_text1,
.aside2 .aside_wrap .left_text1 {
  color: #ffffff !important;
  font-weight: 700;
}

.aside_wrap .left_text2,
.aside2 .aside_wrap .left_text2 {
  color: #8fa89c !important;
}

.aside_wrap .left_menu a:hover,
.aside_wrap .left_menu.active a,
.aside2 .aside_wrap .left_menu a:hover,
.aside2 .aside_wrap .left_menu.active a {
  background: rgba(0, 255, 136, 0.1) !important;
  box-shadow: inset 3px 0 0 #00ff88;
}

.aside_wrap .left_menu a:hover .left_icon,
.aside_wrap .left_menu a:hover .left_text1,
.aside_wrap .left_menu.active a .left_icon,
.aside_wrap .left_menu.active a .left_text1,
.aside2 .aside_wrap .left_menu a:hover .left_icon,
.aside2 .aside_wrap .left_menu a:hover .left_text1,
.aside2 .aside_wrap .left_menu.active a .left_icon,
.aside2 .aside_wrap .left_menu.active a .left_text1 {
  color: #00ff88 !important;
}

/* Mobile aside user chips = my_wrap style */
.aside_top_wrap .my,
.user_box .my,
.mobile_my_wrap .my {
  background: linear-gradient(180deg, #163028 0%, #0d1c18 100%) !important;
  border: 1px solid rgba(0, 255, 136, 0.28) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 8px rgba(0, 255, 136, 0.06);
}

.aside_top_wrap .my_link,
.aside_top_wrap .my_font01,
.user_box .my_link,
.user_list_text span {
  color: #00ff88 !important;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.35);
}

/* Mobile login/join buttons in aside = join_btn neon */
.m_login_box .join_btn {
  background: linear-gradient(180deg, #00ff88 0%, #00cc6a 100%) !important;
  border: 1px solid #00ff88 !important;
  color: #001410 !important;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.35);
}

/* Mobile left_menu_boxbox items as subtle lnb-like rows */
.left_menu_boxbox > .left_menu {
  margin-bottom: 2px;
}

@media screen and (max-width: 1024px) {
  .mobile_my_wrap {
    background: #050a08 !important;
    border-bottom: 1px solid rgba(0, 255, 136, 0.25);
    padding: 6px 8px;
    gap: 4px;
  }

  .mobile_my_wrap .my {
    margin: 0 4px 0 0 !important;
  }

  .header_bottom {
    background: #050a08 !important;
  }
}

/* ── Modals / login popup ── */
.pop_login_box,
.join_box,
#join .join_box {
  background: var(--amp-panel) !important;
  border: 1px solid var(--f2-border) !important;
  box-shadow: 0 0 30px rgba(0, 255, 157, 0.15) !important;
}

.pop_login_btn2 {
  color: var(--amp-gold) !important;
}

/* ── Sports / minigame accent remap ── */
.sports_event_tab li.active,
.sports_event_tab li:hover,
.cart_title,
.cart_tab li.active,
.cart_tab li:hover,
.bet_title,
.bet_bettting,
.bet_btn,
.betting_odd,
.betting_choose_btn.Selected,
.betting_choose_btn.active,
.sports_tab ul li .txt span {
  color: var(--amp-gold) !important;
}

.cart_title,
.cart_title {
  border-bottom-color: var(--amp-gold) !important;
}

.bet_btn,
.betting_choose_btn.Selected,
.betting_choose_btn.active,
#open_cart b {
  background: var(--amp-gold) !important;
  color: #001410 !important;
}

.betting_more_btn a {
  color: var(--amp-gold) !important;
}

/* ── Event pages ── */
.event_title span {
  color: var(--amp-gold) !important;
}

.main_event li a {
  background: var(--amp-panel) !important;
  border: 1px solid rgba(0, 255, 157, 0.15);
}

.main_event li:hover a {
  color: var(--amp-gold) !important;
  background: var(--amp-panel3) !important;
}

.main_board_box {
  background: var(--amp-panel) !important;
  border: 1px solid rgba(0, 255, 157, 0.12);
}

.mobile_center_tab li.active,
.mobile_center_tab li:hover {
  color: var(--amp-gold) !important;
}

/* ── Alert dialogs ── */
.layer-wrap.default .is-btm .enter-btn {
  border-color: #00cc7a !important;
  color: #001410 !important;
  background: linear-gradient(180deg, #00ff9d 0%, #00cc7a 100%) !important;
  box-shadow: 0 0 10px rgba(0, 255, 157, 0.3);
}

/* ── Input focus accent ── */
input.change {
  accent-color: var(--amp-gold) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline-color: var(--amp-gold);
  border-color: rgba(0, 255, 157, 0.5) !important;
}