@charset "utf-8";

/* Reset básico compatible con IE9 */
html, body, form, input, legend, label, select, option, button, fieldset, textarea, 
div, p, pre, blockquote, img, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li {
    margin: 0;
    padding: 0;
}

/* Estilos generales compatibles con IE9 */
body {
    font-size: 14px;
    font-family: '맑은 고딕', '돋움', sans-serif;
    color: #fff;
    overflow: hidden;
    background-color: #000;
    /* Fallback para IE9 */
    background-image: none;
}

/* Elementos base */
fieldset, img {
    border: none;
}

a {
    text-decoration: none;
}

ol, ul, dl, li {
    list-style: none;
}

/* Clase para ocultar elementos - compatible con IE9 */
.blind {
    position: absolute;
    left: -3000px;
    top: -3000px;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

/* Contenedor principal */
.wrp_launcher {
    width: 982px;
    height: 480px;
    background-color: #000;
    margin: 0 auto;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher {
    overflow: hidden;
    width: 980px;
    height: 478px;
    border: 1px solid #141d25;
    position: relative;
    /* Fallback para IE9 */
    zoom: 1;
}

/* Banner principal con fondo negro - COMPATIBLE CON IE9 */
.launcher .main_banner {
    position: relative;
    float: left;
    border-right: 1px solid #141d25;
    width: 488px;
    height: 478px;
    background-color: #000;
    overflow: hidden;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .main_banner .visual_slider {
    z-index: 5;
    width: 100%;
    height: 100%;
    position: relative;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .main_banner .visual_slider li {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: relative;
    /* Fallback para IE9 - evitar flexbox */
    display: block;
    zoom: 1;
}

.launcher .main_banner .visual_slider img {
    width: 100%;
    height: 100%;
    /* Fallback para IE9 - evitar object-fit */
    display: block;
    border: none;
    background-color: #000;
    /* Fallback para IE9 */
    -ms-interpolation-mode: bicubic;
}

/* Controles del slider */
.launcher .main_banner .bx-controls {
    position: absolute;
    right: 20px;
    top: 20px;
    overflow: hidden;
    z-index: 100;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .main_banner .bx-controls a {
    display: block;
    float: left;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background-repeat: no-repeat;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .main_banner .bx-controls a:hover {
    background-position: 0px -32px;
}

.launcher .main_banner .bx-controls .bx-prev {
    margin-right: 10px;
    background-image: url(../image/btn_prev.png);
}

.launcher .main_banner .bx-controls .bx-next {
    background-image: url(../image/btn_next.png);
}

/* Contenido principal */
.launcher .contents {
    position: relative;
    width: 449px;
    height: 458px;
    float: left;
    padding: 10px 20px;
    background-image: url(../image/bg_left_conts.gif);
    background-repeat: no-repeat;
    background-position: left top;
    /* Fallback para IE9 */
    zoom: 1;
}

/* Barra superior */
.launcher .contents .top_bx {
    clear: both;
    overflow: hidden;
    height: 60px;
    margin-bottom: 20px;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .contents .menu_list {
    float: left;
    padding-top: 3px;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .contents .menu_list li {
    float: left;
    margin-left: 5px;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .contents .menu_list li:first-child {
    margin-left: 0;
}

.launcher .contents .menu_list li a {
    display: block;
    width: 110px;
    height: 44px;
    background-image: url(../image/btn_red.jpg);
    background-repeat: no-repeat;
    color: #d8cabf;
    font-size: 14px;
    text-align: center;
    line-height: 44px;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .contents .menu_list li a:hover {
    background-image: url(../image/btn_red_over.jpg);
}

.launcher .contents .game_grade {
    float: right;
    width: 91px;
    height: 50px;
    background-image: url(../image/bg_grade.jpg);
    background-repeat: no-repeat;
    /* Fallback para IE9 */
    zoom: 1;
}

/* Lista de noticias */
.launcher .contents .noti_list {
    clear: both;
    padding-bottom: 22px;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .contents .noti_list dt {
    overflow: hidden;
    padding-bottom: 7px;
    margin-bottom: 5px;
    color: #fff;
    border-bottom: 1px solid #b02323;
    font-weight: bold;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .contents .noti_list dt span {
    display: block;
    float: left;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .contents .noti_list dt a {
    display: block;
    float: right;
    width: 43px;
    height: 16px;
    background-color: #b02323;
    border: 1px solid #b02323;
    border-radius: 2px;
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    /* Fallback para IE9 - eliminar border-radius */
    border-radius: 0;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .contents .noti_list dd {
    padding-left: 10px;
    background-image: url(../image/ico_list_r.gif);
    background-repeat: no-repeat;
    background-position: 0px 12px;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .contents .noti_list dd a {
    overflow: hidden;
    display: block;
    width: 435px;
    color: #c8c8c8;
    line-height: 1.7em;
    /* Fallback para IE9 - evitar text-overflow */
    white-space: nowrap;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .contents .noti_list dd a:hover {
    color: #b02323;
}

.launcher .contents .noti_list dd.important a {
    color: #b02323;
}

.launcher .contents .ad_link {
    position: absolute;
    bottom: 10px;
    left: 19px;
    display: block;
    /* Fallback para IE9 */
    zoom: 1;
}

.launcher .contents .ad_link img {
    width: 100%;
    height: auto;
    display: block;
    /* Fallback para IE9 */
    zoom: 1;
}

/* Versión azul del launcher */
.launcher.blue .main_banner .bx-controls .bx-prev {
    background-image: url(../image/btn_prev_blue.png);
}

.launcher.blue .main_banner .bx-controls .bx-next {
    background-image: url(../image/btn_next_blue.png);
}

.launcher.blue .main_banner .bx-controls a:hover {
    background-position: 0px -32px;
}

.launcher.blue .contents .menu_list li a {
    background-image: url(../image/btn_blue.jpg);
}

.launcher.blue .contents .menu_list li a:hover {
    background-image: url(../image/btn_blue_over.jpg);
}

.launcher.blue .contents .noti_list dt {
    border-bottom: 1px solid #2371b0;
}

.launcher.blue .contents .noti_list dd {
    background-image: url(../image/ico_list_b.gif);
    background-position: 0px 11px;
}

.launcher.blue .contents .noti_list dd a:hover {
    color: #2371b0;
}

.launcher.blue .contents .noti_list dd.important a {
    color: #2371b0;
}

.launcher.blue .contents .noti_list dt a {
    background-color: #2371b0;
    border: 1px solid #2371b0;
}

/* Media queries para mejor responsive */
/* Nota: IE9 no soporta media queries, pero esto no afecta el funcionamiento */

/* Fallback para navegadores antiguos */
* html .launcher .contents .menu_list li a { 
    width: 110px; 
    height: 44px; 
}

* html .launcher .main_banner .visual_slider img { 
    width: 488px; 
    height: 478px; 
}

/* Estilos para el frame de noticias */
#news-frame {
    width: 100%;
    height: 100%;
    position: relative;
    /* Fallback para IE9 */
    zoom: 1;
}

#news-iframe {
    width: 100%;
    height: 440px;
    border: none;
    background-color: #000;
    /* Fallback para IE9 */
    zoom: 1;
}

/* Botón de volver */
.back-button-frame {
    text-align: center;
    padding: 5px;
    background-color: #141d25;
    /* Fallback para IE9 */
    zoom: 1;
}

.back-button-frame button {
    background-color: #b02323;
    color: white;
    border: 1px solid #b02323;
    padding: 5px 15px;
    cursor: pointer;
    font-family: '맑은 고딕', '돋움', sans-serif;
    /* Fallback para IE9 */
    zoom: 1;
}

.back-button-frame button:hover {
    background-color: #8a1a1a;
}

/* ESTILOS PARA EL CHAT COMUNITARIO - NUEVOS ESTILOS */
.community-chat {
    width: 100%;
    height: 100%;
    background-color: #000;
    border: 1px solid #141d25;
    position: relative;
    display: flex;
    flex-direction: column;
}

.chat-header {
    background-color: #141d25;
    color: #b02323;
    padding: 8px 15px;
    font-weight: bold;
    border-bottom: 1px solid #141d25;
    font-size: 14px;
    flex-shrink: 0;
}

.messages-container {
    height: 280px;
    overflow-y: auto;
    padding: 10px;
    background-color: #000;
    font-family: '맑은 고딕', '돋움', sans-serif;
    font-size: 12px;
    flex-grow: 1;
}

.message-item {
    margin-bottom: 8px;
    padding: 8px;
    background-color: #141d25;
    border-left: 3px solid #b02323;
    word-wrap: break-word;
    border-radius: 0 3px 3px 0;
}

.message-user {
    color: #b02323;
    font-weight: bold;
}

.message-text {
    color: #c8c8c8;
    margin: 0 5px;
}

.message-time {
    color: #888;
    font-size: 11px;
    float: right;
}

.chat-input-area {
    padding: 10px;
    background-color: #0a0a0a;
    border-top: 1px solid #141d25;
    flex-shrink: 0;
}

.chat-input-fields {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
}

.chat-input {
    flex: 1;
    padding: 6px;
    background-color: #141d25;
    border: 1px solid #333;
    color: #fff;
    font-family: '맑은 고딕', '돋움', sans-serif;
    font-size: 12px;
}

.chat-input:focus {
    outline: 1px solid #b02323;
    border-color: #b02323;
}

.chat-message-area {
    margin-bottom: 8px;
}

.chat-textarea {
    width: 100%;
    height: 60px;
    padding: 6px;
    background-color: #141d25;
    border: 1px solid #333;
    color: #fff;
    font-family: '맑은 고딕', '돋움', sans-serif;
    font-size: 12px;
    resize: none;
}

.chat-textarea:focus {
    outline: 1px solid #b02323;
    border-color: #b02323;
}

.chat-send-button {
    text-align: center;
    margin-bottom: 5px;
}

.send-button {
    background-color: #b02323;
    color: white;
    border: 1px solid #b02323;
    padding: 8px 20px;
    cursor: pointer;
    font-family: '맑은 고딕', '돋움', sans-serif;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
}

.send-button:hover {
    background-color: #8a1a1a;
}

.chat-security-notice {
    text-align: center;
    color: #ffcc00;
    font-size: 10px;
}

.chat-security-notice small {
    color: #ffcc00;
}

/* Scrollbar para el chat */
.messages-container {
    scrollbar-face-color: #b02323;
    scrollbar-track-color: #000;
    scrollbar-arrow-color: #fff;
    scrollbar-shadow-color: #141d25;
}

.messages-container::-webkit-scrollbar {
    width: 8px;
}

.messages-container::-webkit-scrollbar-track {
    background: #000;
    border: 1px solid #141d25;
}

.messages-container::-webkit-scrollbar-thumb {
    background: #b02323;
    border: 1px solid #141d25;
}

.messages-container::-webkit-scrollbar-thumb:hover {
    background: #8a1a1a;
}

/* Estilos para IE9 */
.chat-input-fields {
    zoom: 1;
}

.chat-input {
    zoom: 1;
}

.chat-textarea {
    zoom: 1;
}

.send-button {
    zoom: 1;
}