@charset "utf-8";

/* Header Login Buttons Upgrade */
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
    line-height: 1;
    transition: all 0.2s ease;
    min-width: 100px;
    border: 1px solid transparent;
}

.login-btn.reader {
    background-color: #00bfff;
    color: #fff !important;
    box-shadow: 0 2px 0 #0099cc;
}

.login-btn.reader:hover {
    background-color: #33ccff;
    box-shadow: 0 1px 0 #0099cc;
    transform: translateY(1px);
}

.login-btn.publisher {
    background-color: #c43030;
    color: #fff !important;
    box-shadow: 0 2px 0 #a32828;
}

.login-btn.publisher:hover {
    background-color: #df3b3b;
    box-shadow: 0 1px 0 #a32828;
    transform: translateY(1px);
}

.login-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Helper Classes */
.mobile-show {
    display: none !important;
}

/* Responsive Layout */
@media screen and (max-width: 768px) {

    /* Global box-sizing */
    * {
        box-sizing: border-box;
    }

    .mobile-show {
        display: block !important;
    }

    .mobile-hide {
        display: none !important;
    }

    /* Conditional Visibility fixes */
    .search-results-page #wrap_header,
    .search-results-page #sidecontent,
    .magazine-detail-page #wrap_header,
    .magazine-detail-page #sidecontent,
    .back-number-page #wrap_header,
    .back-number-page #sidecontent,
    .management-page #sidecontent {
        display: none !important;
    }

    #header {
        padding: 10px 0;
        text-align: center;
        height: auto;
    }

    /* Logo */
    h1 {
        float: none !important;
        margin: 0 auto 10px auto !important;
        width: 70% !important;
        max-width: 318px !important;
        height: auto !important;
    }

    h1 img {
        width: 100% !important;
        height: auto !important;
    }

    #logobadge {
        display: none !important;
    }

    #header_right_toppage {
        float: none !important;
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        padding: 10px !important;
    }

    #header_right_toppage div {
        justify-content: center !important;
    }

    /* Layout Containers */
    #wrap_content {
        width: 100% !important;
        overflow: hidden !important;
    }

    #content {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding: 10px 0 0 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    #maincontent,
    #sidecontent {
        width: 100% !important;
        /* Full width for management pages */
        float: none !important;
        margin: 0 auto 20px auto !important;
        padding: 0 10px !important;
    }

    /* Banner (Catch) Area */
    #catch {
        width: 100% !important;
        height: auto !important;
        padding: 0 0 20px 0 !important;
        background: url(../image/bg_catch.png) no-repeat center top !important;
        background-size: 100% auto !important;
        margin-bottom: 20px !important;
    }

    #catch_content {
        width: 96% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 100px !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        background: transparent !important;
        display: block !important;
        position: relative !important;
        text-align: left !important;
    }

    #catch_content img {
        display: inline-block;
        width: 50% !important;
        height: auto !important;
        margin-left: 0 !important;
    }

    .link_block01 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin: 25px 0 0 0 !important;
        top: 0 !important;
        left: 0 !important;
        text-align: center !important;
        z-index: 2 !important;
    }

    /* Tables & Dashboards */
    .table-responsive {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #ddd;
    }

    .table-responsive table {
        min-width: 600px !important;
        /* Force scrollable on small mobile */
    }

    .table-responsive th,
    .table-responsive td {
        padding: 8px !important;
        font-size: 12px !important;
    }

    /* Management Page Form Adjustments */
    .management-page form {
        padding: 15px !important;
        width: 100% !important;
    }

    .management-page input[type="text"],
    .management-page input[type="url"],
    .management-page input[type="email"],
    .management-page input[type="password"],
    .management-page textarea,
    .management-page select {
        width: 100% !important;
        font-size: 16px !important;
        /* Prevent iOS zoom */
    }

    .management-page div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .management-page div[style*="gap: 10px"] {
        gap: 5px !important;
    }

    /* Keyword Search Box Fix - Horizontal layout */
    .search {
        width: 100% !important;
    }

    .search form {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 5px;
        align-items: stretch;
    }

    form #search_text {
        flex: 1 !important;
        min-width: 0 !important;
        float: none !important;
        margin: 0 !important;
    }

    form input#search_btn {
        width: 80px !important;
        min-width: 80px !important;
        float: none !important;
        margin: 0 !important;
        font-size: 13px !important;
    }

    /* Ranking Section Fixes */
    .wrap_ranking_new {
        width: 100% !important;
    }

    .magazinelist_l,
    .magazinelist_r {
        width: 100% !important;
        float: none !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
        border: 1px solid #ddd;
        border-radius: 5px;
        background: #fff;
    }

    /* Footer Fix - Centered Copyright */
    #wrap_footer {
        width: 100% !important;
        padding: 20px 0 !important;
    }

    #footer {
        width: 96% !important;
        margin: 0 auto !important;
        float: none !important;
        text-align: center !important;
    }

    .copyright {
        text-align: center !important;
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    /* General images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}