/* STORY-RO RESPONSIVE V2
   Desktop >= 1025px remains visually unchanged.
   Tablet 768-1024px and Mobile <=767px are rebuilt here.
*/
@media (max-width: 1024px) {
    html, body {
        width:100%;
        max-width:100%;
        overflow-x:hidden!important;
    }
    *, *::before, *::after {
        box-sizing:border-box;
    }
    img, video, iframe, canvas, svg {
        max-width:100%;
    }
    img, video {
        height:auto;
    }
    body {
        min-width:0!important;
    }
    .container, .ui.container {
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }
    /* General page header/navigation */
    body > header {
        width:100%!important;
        max-width:100%!important;
        overflow:hidden!important;
    }
    body > header #flakes-ani {
        width:100%!important;
        max-width:100%!important;
        background-position:center top!important;
        background-size:cover!important;
    }
    .menufloat {
        width:min(94vw, 970px)!important;
        max-width:94vw!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
    .menufloat .trleft, .menufloat ul {
        width:100%!important;
        max-width:100%!important;
    }
    .menufloat ul {
        display:flex!important;
        flex-wrap:wrap!important;
        justify-content:center!important;
        gap:0!important;
    }
    .menufloat li {
        flex:0 1 auto!important;
    }
    /* Homepage foundation */
    .section01 {
        width:100%!important;
        max-width:100%!important;
        min-height:auto!important;
        overflow:hidden!important;
    }
    .section01 > .container {
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0 auto!important;
    }
    .section01 .container > .d-flex {
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }
    .box-top {
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }
    .text-top {
        max-width:min(92vw,548px)!important;
        height:auto!important;
    }
    .section01 .box-r {
        min-width:0!important;
    }
    .story-hero-video {
        width:100%!important;
        height:100%!important;
        object-fit:cover!important;
    }
    .story-home-login-only {
        position:absolute!important;
        top:14px!important;
        right:14px!important;
    }
    .story-home-login-button {
        min-height:40px!important;
    }
    .story-hero-side-menu {
        right:14px!important;
    }
    /* Homepage news */
    .s-news, .s-news > .container, .s-news .tab-content, .s-news .tab-pane, .s-news .row {
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }
    .s-news > .container {
        padding-left:18px!important;
        padding-right:18px!important;
    }
    .s-news .nav {
        display:flex!important;
        flex-wrap:wrap!important;
        justify-content:center!important;
        gap:7px!important;
    }
    .s-news [data-aos] {
        opacity:1!important;
        transform:none!important;
        visibility:visible!important;
    }
    .s-news .story-index-news-col {
        flex:0 0 100%!important;
        width:100%!important;
        max-width:100%!important;
    }
    .s-news .story-index-news-card {
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }
    /* Homepage lower sections */
    .s-wars, .s-wars .container, .wars-detail, .s-item, .s-item .container, .botton-section, .botton-section .container {
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }
    .s-wars .top-menu {
        width:100%!important;
        max-width:100%!important;
        padding-left:16px!important;
        padding-right:16px!important;
    }
    .wars-detail > .d-flex {
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }
    .yutube, .yutube iframe {
        max-width:100%!important;
    }
    .s-item .container {
        flex-wrap:wrap!important;
    }
    /* Register and login */
    .story-register-page, .story-login-page, .story-member-page {
        width:100%!important;
        max-width:100%!important;
        overflow-x:hidden!important;
    }
    .story-register-page > .container, .story-login-page > .container, .story-member-page > .ui.container {
        padding-left:18px!important;
        padding-right:18px!important;
    }
    .story-register-shell, .story-login-shell, .story-register-card {
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }
    .story-register-shell, .story-login-shell {
        grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr)!important;
    }
    .story-register-grid, .story-form-grid {
        min-width:0!important;
    }
    /* General / Quest */
    .story-general-page {
        width:100%!important;
        max-width:100%!important;
        padding-left:18px!important;
        padding-right:18px!important;
    }
    .story-guide-layout {
        grid-template-columns:240px minmax(0,1fr)!important;
        gap:16px!important;
    }
    .story-guide-sidebar, .story-guide-content, .story-server-hero, .story-info-section {
        min-width:0!important;
        max-width:100%!important;
    }
    .story-guide-menu-text strong, .story-guide-menu-text small {
        white-space:normal!important;
    }
    .story-info-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
    .qs-choice-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
    /* News, download */
    .story-public-news-page, .story-public-news-shell, .story-news-view-page, .story-news-view-shell, .story-download-page, .story-download-shell {
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }
    .story-public-news-page, .story-news-view-page, .story-download-page {
        padding-left:18px!important;
        padding-right:18px!important;
    }
    .story-public-news-grid {
        grid-template-columns:1fr!important;
    }
    .story-download-grid {
        grid-template-columns:1fr!important;
    }
    /* Member/Admin */
    .story-member-shell {
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        grid-template-columns:240px minmax(0,1fr)!important;
    }
    .story-member-sidebar, .story-member-content, .story-service-card {
        min-width:0!important;
        max-width:100%!important;
    }
    .story-member-table-wrap, .nw-table-wrap, .story-news-view-content {
        max-width:100%!important;
        overflow-x:auto!important;
        -webkit-overflow-scrolling:touch;
    }
    /* CMS/media safety */
    .story-news-view-content img, .nw-preview img, .qs-content img {
        max-width:100%!important;
        height:auto!important;
    }
    .story-news-view-content iframe, .nw-preview iframe, .qs-content iframe {
        width:100%!important;
        max-width:100%!important;
        aspect-ratio:16/9;
        height:auto!important;
    }
    /* Footer */
    footer {
        width:100%!important;
        max-width:100%!important;
        overflow:hidden!important;
    }
    footer .container {
        width:100%!important;
        max-width:100%!important;
        padding-left:18px!important;
        padding-right:18px!important;
    }
    footer .footer-link {
        width:100%!important;
        max-width:100%!important;
        margin:0!important;
    }
    footer .footer-link > [class*="col-"] {
        min-width:0!important;
    }
}
@media (min-width:768px) and (max-width:1024px) {
    /* Tablet */
    .section01 > .container {
        max-width:900px!important;
        padding-left:28px!important;
        padding-right:28px!important;
    }
    .section01 .box-l {
        max-width:460px!important;
    }
    .section01 .box-r {
        display:none!important;
    }
    .story-hero-side-menu {
        top:auto!important;
        bottom:24px!important;
        right:50%!important;
        transform:translateX(50%)!important;
        flex-direction:row!important;
        flex-wrap:wrap!important;
        justify-content:center!important;
        width:min(92vw,660px)!important;
    }
    .story-side-action {
        min-width:145px!important;
    }
    .s-news > .container {
        max-width:940px!important;
    }
    .story-public-news-card {
        grid-template-columns:240px minmax(0,1fr)!important;
    }
    footer .footer-link {
        display:grid!important;
        grid-template-columns:1fr 1fr 110px 1.4fr!important;
        align-items:center!important;
        gap:14px!important;
    }
    footer .footer-link > [class*="col-"] {
        width:auto!important;
        max-width:none!important;
    }
}
@media (max-width:767px) {
    /* Mobile: independent layout */
    body {
        background:#130707!important;
    }
    /* Mobile general header */
    body > header:not(.story-home-login-only) {
        position:relative!important;
        min-height:260px!important;
        height:auto!important;
        padding-bottom:18px!important;
    }
    body > header:not(.story-home-login-only) #flakes-ani {
        height:210px!important;
        min-height:210px!important;
    }
    body > header:not(.story-home-login-only) > div[style*="height: 43px"] {
        display:none!important;
    }
    .menufloat {
        position:relative!important;
        width:calc(100% - 20px)!important;
        max-width:none!important;
        min-height:48px!important;
        height:auto!important;
        margin:-24px 10px 0!important;
        padding:6px!important;
        border-radius:14px!important;
        background:rgba(21,12,8,.92)!important;
        box-shadow:0 12px 30px rgba(0,0,0,.26)!important;
    }
    .menufloat .trleft {
        width:100%!important;
    }
    .menufloat ul {
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:5px!important;
        margin:0!important;
        padding:0!important;
    }
    .menufloat li {
        width:100%!important;
        margin:0!important;
    }
    .menufloat li a {
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        width:100%!important;
        min-height:38px!important;
        padding:6px 8px!important;
        border-radius:9px!important;
        background:rgba(255,255,255,.05)!important;
        font-size:10px!important;
        line-height:1.15!important;
        text-decoration:none!important;
    }
    /* Homepage hero */
    .section01 {
        min-height:auto!important;
        padding:64px 0 22px!important;
        background-size:cover!important;
        background-position:center top!important;
    }
    .section01 > .container {
        padding:10px 10px 18px!important;
    }
    .section01 .container > .d-flex {
        display:block!important;
    }
    .section01 .box-l {
        width:100%!important;
        max-width:390px!important;
        margin:0 auto!important;
        padding:0!important;
    }
    .section01 .box-l > img {
        width:min(72vw,280px)!important;
        height:auto!important;
    }
    .section01 .box-r {
        display:none!important;
    }
    .box-top {
        display:none!important;
    }
    .box-l .box-menu {
        width:100%!important;
        max-width:350px!important;
        margin:0 auto!important;
        padding:16px 13px 18px!important;
    }
    .box-l .box-menu .monster {
        display:none!important;
    }
    .box-l .box-menu h5 {
        font-size:16px!important;
    }
    .box-l .box-menu h6 {
        font-size:11px!important;
        line-height:1.45!important;
    }
    .box-l .box-menu p {
        font-size:11px!important;
        line-height:1.55!important;
    }
    .story-home-login-only {
        position:absolute!important;
        top:10px!important;
        right:10px!important;
        z-index:9995!important;
    }
    .story-home-login-button {
        min-height:38px!important;
        padding:0 12px!important;
        font-size:10px!important;
    }
    .story-hero-video {
        object-position:center top!important;
    }
    .story-hero-side-menu {
        position:relative!important;
        top:auto!important;
        right:auto!important;
        bottom:auto!important;
        width:100%!important;
        margin:14px auto 0!important;
        padding:0 10px!important;
        transform:none!important;
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
    }
    .story-side-action {
        min-width:0!important;
        width:100%!important;
        min-height:43px!important;
        justify-content:center!important;
        padding:0 8px!important;
        font-size:10px!important;
        border-radius:10px!important;
    }
    /* Homepage news */
    .s-news {
        padding-bottom:34px!important;
    }
    .s-news > .container {
        padding:72px 7px 0!important;
    }
    .s-news .tag {
        width:145px!important;
        top:-28px!important;
        left:50%!important;
        transform:translateX(-50%)!important;
    }
    .s-news .nav {
        gap:4px!important;
        padding:0!important;
    }
    .s-news .btn-tab, .s-news .btn-tab:hover, .s-news .btn-tab:focus, .s-news .btn-tab.active, .s-news .nav-pills .nav-link.active {
        width:88px!important;
        height:39px!important;
        padding:0 4px!important;
        background-size:100% 100%!important;
        font-size:8px!important;
    }
    .s-news .story-index-news-card {
        display:block!important;
        border-radius:12px!important;
        overflow:hidden!important;
    }
    .s-news .story-index-news-thumb {
        width:100%!important;
        aspect-ratio:16/9!important;
        height:auto!important;
    }
    .s-news .story-index-news-thumb img, .s-news .story-index-news-noimage {
        width:100%!important;
        height:100%!important;
        object-fit:cover!important;
    }
    .s-news .story-index-news-copy {
        width:100%!important;
        padding:13px!important;
        text-align:left!important;
    }
    /* Hide/stack complicated homepage lower desktop scene */
    .s-wars {
        min-height:0!important;
        padding:34px 10px!important;
        background-position:center!important;
        background-size:cover!important;
    }
    .s-wars .top-menu {
        display:flex!important;
        flex-wrap:wrap!important;
        justify-content:center!important;
        gap:4px 8px!important;
        padding:0 4px 20px!important;
        font-size:10px!important;
    }
    .wars-detail > .d-flex {
        display:block!important;
    }
    .wars-detail .text-l {
        width:100%!important;
        max-width:100%!important;
        padding:0!important;
    }
    .wars-detail .yutube {
        width:100%!important;
        margin-top:20px!important;
    }
    .wars-detail .yutube iframe {
        width:100%!important;
        height:auto!important;
        aspect-ratio:16/9!important;
        border-radius:16px!important;
    }
    .s-item {
        padding-top:26px!important;
    }
    .s-item .container {
        display:block!important;
        padding-left:10px!important;
        padding-right:10px!important;
        text-align:center!important;
    }
    .s-item .tag {
        position:static!important;
        width:150px!important;
        margin:0 auto 14px!important;
    }
    .s-item .container > div {
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
    }
    .s-item .container > div a, .s-item .container > div img {
        width:100%!important;
        max-width:100%!important;
    }
    /* Register/login one-column */
    .story-register-page, .story-login-page {
        padding-top:24px!important;
        padding-bottom:42px!important;
    }
    .story-register-page > .container, .story-login-page > .container {
        padding-left:8px!important;
        padding-right:8px!important;
    }
    .story-register-shell, .story-login-shell, .story-register-card {
        display:block!important;
        grid-template-columns:none!important;
        border-radius:14px!important;
    }
    .story-register-intro, .story-login-intro, .story-register-info {
        padding:25px 18px!important;
        min-height:0!important;
    }
    .story-register-card, .story-login-card, .story-register-form-panel {
        padding:22px 15px!important;
    }
    .story-register-intro h1, .story-login-intro h1 {
        font-size:28px!important;
    }
    .story-form-grid, .story-register-grid {
        grid-template-columns:1fr!important;
        gap:12px!important;
    }
    .story-field-full {
        grid-column:auto!important;
    }
    .story-register-heading {
        padding:0 8px!important;
        text-align:center!important;
    }
    .story-register-heading h1 {
        font-size:26px!important;
    }
    .story-register-choice {
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
    }
    /* General/Quest: sidebar becomes top accordion-like block */
    .story-general-page {
        padding-left:7px!important;
        padding-right:7px!important;
    }
    .story-general-spacer {
        height:24px!important;
    }
    .story-guide-layout {
        display:block!important;
    }
    .story-guide-sidebar {
        position:static!important;
        width:100%!important;
        margin-bottom:12px!important;
    }
    .story-guide-menu {
        border-radius:13px!important;
    }
    .story-guide-menu-title {
        padding:12px 14px!important;
        font-size:16px!important;
    }
    .story-guide-menu-list {
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:6px!important;
        padding:8px!important;
    }
    .story-guide-menu-item {
        grid-template-columns:4px 21px minmax(0,1fr)!important;
        min-height:52px!important;
        padding:7px!important;
    }
    .story-guide-menu-text strong {
        font-size:11px!important;
    }
    .story-guide-menu-text small {
        display:none!important;
    }
    .qs-side-group {
        grid-column:1/-1!important;
        display:flex!important;
        flex-wrap:wrap!important;
        gap:5px 10px!important;
        padding:8px!important;
    }
    .qs-side-group b {
        width:100%!important;
    }
    .story-server-hero {
        min-height:130px!important;
        padding:24px 18px!important;
        border-radius:13px!important;
    }
    .story-server-hero h1 {
        font-size:29px!important;
        overflow-wrap:anywhere!important;
    }
    .story-server-hero p {
        font-size:13px!important;
    }
    .story-info-section {
        padding:15px 12px!important;
        border-radius:13px!important;
    }
    .story-section-title {
        font-size:17px!important;
    }
    .story-info-grid, .qs-choice-grid {
        grid-template-columns:1fr!important;
    }
    /* News/list/detail/download */
    .story-public-news-page, .story-news-view-page, .story-download-page {
        padding:24px 7px 42px!important;
    }
    .story-public-news-card {
        display:block!important;
        border-radius:12px!important;
        overflow:hidden!important;
    }
    .story-public-news-thumb {
        width:100%!important;
        aspect-ratio:16/9!important;
        min-height:0!important;
    }
    .story-public-news-thumb img {
        width:100%!important;
        height:100%!important;
        object-fit:cover!important;
    }
    .story-public-news-copy {
        padding:14px!important;
    }
    .story-news-hero-block, .story-news-content-block {
        width:100%!important;
        max-width:100%!important;
        padding-left:14px!important;
        padding-right:14px!important;
        border-radius:13px!important;
    }
    .story-news-hero-block h1 {
        font-size:clamp(25px,8vw,36px)!important;
        overflow-wrap:anywhere!important;
    }
    .story-news-view-content {
        width:100%!important;
        min-width:0!important;
        overflow-x:auto!important;
    }
    .story-news-view-content table {
        min-width:520px;
    }
    .story-download-hero {
        min-height:145px!important;
        padding:24px 17px!important;
    }
    .story-download-hero h1 {
        font-size:31px!important;
    }
    .story-download-panel {
        padding:16px 10px!important;
    }
    .story-download-panel-head {
        display:block!important;
    }
    .story-download-panel-head p {
        margin-top:6px!important;
        text-align:left!important;
    }
    .story-download-card {
        grid-template-columns:48px minmax(0,1fr)!important;
        padding:13px!important;
    }
    .story-download-card-icon {
        width:48px!important;
        height:48px!important;
    }
    .story-download-button {
        grid-column:1/-1!important;
        width:100%!important;
        justify-content:center!important;
    }
    /* Member/Admin single-column */
    .story-member-page {
        padding-top:20px!important;
        padding-bottom:38px!important;
    }
    .story-member-page > .ui.container {
        padding-left:7px!important;
        padding-right:7px!important;
    }
    .story-member-shell {
        display:block!important;
        grid-template-columns:none!important;
    }
    .story-member-sidebar {
        position:static!important;
        width:100%!important;
        margin-bottom:10px!important;
    }
    .story-member-menu {
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:5px!important;
    }
    .story-member-menu .story-menu-title, .story-member-menu .story-menu-divider {
        grid-column:1/-1!important;
    }
    .story-member-menu .item {
        min-width:0!important;
        padding:9px!important;
        font-size:10px!important;
    }
    .story-service-card {
        padding:14px 10px!important;
        border-radius:13px!important;
    }
    .story-member-section-head {
        align-items:flex-start!important;
    }
    .story-member-section-head h2 {
        font-size:20px!important;
    }
    .nw-admin-layout {
        display:block!important;
    }
    .nw-admin-sidebar {
        position:static!important;
        width:100%!important;
        margin-bottom:10px!important;
    }
    .nw-editor {
        display:block!important;
    }
    .nw-editor-pane, .nw-preview-pane {
        width:100%!important;
        max-width:100%!important;
    }
    /* Footer mobile */
    footer {
        padding-top:28px!important;
    }
    footer .container {
        padding-left:12px!important;
        padding-right:12px!important;
    }
    footer .footer-link {
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:15px 8px!important;
        align-items:start!important;
        text-align:center!important;
    }
    footer .footer-link > [class*="col-"] {
        width:100%!important;
        max-width:100%!important;
        padding:0!important;
    }
    footer .footer-link > .col-1, footer .footer-link > .col-4 {
        grid-column:1/-1!important;
        display:flex!important;
        justify-content:center!important;
    }
    footer .footer-link ul {
        margin:0!important;
    }
    footer .footer-link br {
        display:none!important;
    }
    footer .footer-link .col-4 img {
        width:min(68vw,260px)!important;
    }
    footer .text-bottom {
        padding:14px 10px 18px!important;
        font-size:9px!important;
        line-height:1.5!important;
    }
    .story-welcome {
        padding:10px!important;
    }
    .story-welcome-box {
        max-width:340px!important;
        padding:32px 20px 28px!important;
    }
}
@media (max-width:430px) {
    .menufloat ul {
        grid-template-columns:1fr 1fr!important;
    }
    .story-guide-menu-list {
        grid-template-columns:1fr!important;
    }
    .story-hero-side-menu {
        grid-template-columns:1fr 1fr!important;
    }
    .story-register-choice {
        grid-template-columns:1fr!important;
    }
    footer .footer-link {
        grid-template-columns:1fr!important;
    }
    footer .footer-link > .col-1, footer .footer-link > .col-4 {
        grid-column:1!important;
    }
}
/* STORY MOBILE APP BOTTOM NAV V3 */
.story-mobile-bottom-nav {
    display:none;
}
@media (max-width:767px) {
    html {
        scroll-padding-bottom:110px;
    }
    body {
        padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;
    }
    /* Mobile uses the app-style bottom navigation only. */
    body > header .menufloat, body > .story-home-login-only, .story-home-login-only {
        display:none!important;
    }
    /* Keep the decorative page header, but remove the oversized desktop gap. */
    body > header:not(.story-home-login-only) {
        min-height:150px!important;
        padding-bottom:0!important;
    }
    body > header:not(.story-home-login-only) #flakes-ani {
        height:150px!important;
        min-height:150px!important;
        background-position:center top!important;
        background-size:cover!important;
    }
    .story-mobile-bottom-nav {
        position:fixed;
        left:10px;
        right:10px;
        bottom:calc(10px + env(safe-area-inset-bottom));
        z-index:100500;
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        align-items:stretch;
        min-height:72px;
        padding:7px 6px;
        border:1px solid rgba(225,177,62,.42);
        border-radius:22px;
        background:rgba(18,11,8,.92);
        box-shadow:0 16px 42px rgba(0,0,0,.42);
        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);
    }
    .story-mobile-bottom-item {
        position:relative;
        display:flex;
        min-width:0;
        min-height:58px;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        padding:5px 2px;
        border-radius:16px;
        color:#b9aa93!important;
        font-family:"Kanit",sans-serif;
        font-size:9px;
        font-weight:400;
        line-height:1;
        text-align:center;
        text-decoration:none!important;
        transition:transform .18s ease,color .18s ease,background .18s ease;
        -webkit-tap-highlight-color:transparent;
    }
    .story-mobile-bottom-icon {
        display:grid;
        place-items:center;
        width:30px;
        height:30px;
        border-radius:11px;
        color:#c9b382;
        font-size:17px;
        transition:transform .18s ease,background .18s ease,color .18s ease;
    }
    .story-mobile-bottom-item.is-active {
        color:#ffe7a0!important;
        background:linear-gradient(180deg,rgba(225,166,35,.18),rgba(225,166,35,.05));
    }
    .story-mobile-bottom-item.is-active .story-mobile-bottom-icon {
        color:#25170b;
        background:linear-gradient(145deg,#ffe28a,#dca326);
        box-shadow:0 7px 17px rgba(210,150,28,.28);
        transform:translateY(-2px);
    }
    .story-mobile-bottom-item:active {
        transform:scale(.95);
    }
    /* Footer must not be covered by the floating navigation. */
    footer {
        padding-bottom:calc(34px + env(safe-area-inset-bottom))!important;
    }
}
@media (max-width:374px) {
    .story-mobile-bottom-nav {
        left:6px;
        right:6px;
        padding-left:3px;
        padding-right:3px;
    }
    .story-mobile-bottom-item {
        font-size:8px;
    }
    .story-mobile-bottom-icon {
        width:28px;
        height:28px;
        font-size:15px;
    }
}
/* =========================================================
   MOBILE INTERNAL PAGE HEADER BACKGROUND FIX
   Restore enough decorative header height on non-home pages.
   ========================================================= */
@media (max-width:767px) {
    body > header:not(.story-home-login-only) {
        width:100%!important;
        min-height:360px!important;
        height:360px!important;
        padding:0!important;
        overflow:hidden!important;
        background-position:center top!important;
        background-size:auto 100%!important;
        background-repeat:no-repeat!important;
    }
    body > header:not(.story-home-login-only) #flakes-ani {
        width:100%!important;
        height:360px!important;
        min-height:360px!important;
        background-position:center top!important;
        background-size:auto 100%!important;
        background-repeat:no-repeat!important;
    }
    /* Content starts after the complete mobile header, not inside it. */
    body > header:not(.story-home-login-only) + main, body > header:not(.story-home-login-only) + .story-register-page, body > header:not(.story-home-login-only) + .story-login-page, body > header:not(.story-home-login-only) + .story-member-page, body > header:not(.story-home-login-only) + .story-general-page, body > header:not(.story-home-login-only) + .story-news-view-page, body > header:not(.story-home-login-only) + .story-public-news-page, body > header:not(.story-home-login-only) + .story-download-page {
        position:relative!important;
        z-index:2!important;
    }
}
@media (max-width:430px) {
    body > header:not(.story-home-login-only), body > header:not(.story-home-login-only) #flakes-ani {
        min-height:330px!important;
        height:330px!important;
    }
}
/* =========================================================
   MOBILE INDEX WARS SECTION — PLAQUE ALIGNMENT + BG RATIO
   Index only. Tablet/Desktop remain unchanged.
   ========================================================= */
@media (max-width:767px) {
    body.home .s-wars, .s-wars {
        position:relative!important;
        min-height:0!important;
        padding:0 0 46px!important;
        overflow:hidden!important;
        background-color:#180808!important;
        background-image:url('../../design/home2/images/bg-wars.jpg')!important;
        background-repeat:no-repeat!important;
        background-position:center top!important;
        /* Fixed visual height preserves the original 2500x1493 ratio.
       It no longer stretches according to the amount of text. */
        background-size:auto 940px!important;
    }
    .s-wars .top-menu {
        position:relative!important;
        z-index:5!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        flex-wrap:nowrap!important;
        gap:3px!important;
        width:min(calc(100vw - 18px),560px)!important;
        height:auto!important;
        aspect-ratio:845 / 297!important;
        margin:-4px auto 0!important;
        padding:42px 38px 16px!important;
        overflow:hidden!important;
        background-image:url('../../design/home2/images/bg-s-war-topmenu.png')!important;
        background-repeat:no-repeat!important;
        background-position:center!important;
        background-size:100% 100%!important;
        animation:none!important;
        transform:none!important;
        transform-origin:center!important;
        white-space:nowrap!important;
        line-height:1!important;
    }
    .s-wars .top-menu a {
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        min-width:0!important;
        margin:0!important;
        padding:2px 1px!important;
        color:#8c7028!important;
        font-size:clamp(7px,2.15vw,10px)!important;
        font-weight:700!important;
        line-height:1!important;
        letter-spacing:0!important;
        text-transform:uppercase!important;
        white-space:nowrap!important;
    }
    .s-wars .top-menu a + a::before {
        content:'/';
        display:inline-block;
        margin-right:4px;
        color:rgba(223,199,128,.62);
        font-weight:400;
    }
    /* Hide slash text nodes from the old HTML visually by matching them
     to the plaque; separators are recreated with ::before above. */
    .s-wars .top-menu {
        color:transparent!important;
    }
    .s-wars .wars-detail {
        width:100%!important;
        max-width:100%!important;
        min-height:0!important;
        margin:-5px auto 0!important;
        padding:185px 18px 44px!important;
        background:none!important;
        font-size:14px!important;
    }
    .s-wars .wars-detail > .d-flex {
        display:block!important;
        width:100%!important;
    }
    .s-wars .wars-detail .text-l {
        width:100%!important;
        max-width:520px!important;
        margin:0 auto!important;
    }
    .s-wars .wars-detail .text-start {
        padding:0!important;
        text-align:left!important;
    }
    .s-wars .wars-detail h4 {
        margin-bottom:7px!important;
        font-size:clamp(24px,7vw,34px)!important;
        line-height:1.12!important;
    }
    .s-wars .wars-detail p {
        margin-bottom:4px!important;
        font-size:clamp(13px,3.8vw,17px)!important;
        line-height:1.48!important;
    }
    .s-wars .wars-detail .btn {
        margin-top:14px!important;
        padding:10px 20px!important;
        font-size:16px!important;
    }
    .s-wars .wars-detail .yutube {
        display:none!important;
    }
}
@media (max-width:390px) {
    .s-wars {
        background-size:auto 880px!important;
    }
    .s-wars .top-menu {
        width:calc(100vw - 10px)!important;
        padding:39px 29px 14px!important;
        gap:2px!important;
    }
    .s-wars .top-menu a {
        font-size:7.4px!important;
    }
    .s-wars .top-menu a + a::before {
        margin-right:2px;
    }
    .s-wars .wars-detail {
        padding-top:165px!important;
        padding-left:12px!important;
        padding-right:12px!important;
    }
}
/* Hide the decorative cr-botton-war.png section on mobile only. */
.story-desktop-only {
    display: block;
}
@media (max-width: 767px) {
    .story-desktop-only {
        display: none !important;
    }
}

/* Hide cr-botton-war.png on mobile only. */
@media (max-width: 767px) {
    .desktop-only-war-art {
        display: none !important;
    }
}