/*
 * 모바일 메뉴 디자인 — 햄버거 단추 모양·움직임(body.tn-mmb-*), 메뉴가 열리는 방식(body.tn-mmo-*).
 * 언론사가 '지금 모양'이 아닌 종류를 골랐을 때만 실린다(App\Core\MobileDesigns). 헤더 마크업은 그대로다 — 단추는 .tn-menu-toggle > i.fas
 * (스크립트가 fa-bars ↔ fa-times 로 바꾸는 그 아이콘)를 줄 세 개로 다시 그리고, 열림은 body.tn-menu-open 으로 안다.
 * 화면 아래 탭바의 메뉴 탭도 .tn-menu-toggle 이라(같은 스크립트가 연다) 단추 규칙에서 뺀다(:not(.tn-mtab-item)).
 * 메뉴 판(.tn-menu)의 기본 모양·닫힘 규칙은 tnews-theme.css 의 768px 규칙이고, 여기는 그 위에 얹는다.
 */

@media (max-width: 768px) {
    /* ---- 단추: 줄 셋을 그린다 ---- */
    body.tn-mmb .tn-menu-toggle:not(.tn-mtab-item) > i.fas {
        position: relative;
        display: block;
        flex: none;
        width: 20px;
        height: 2px;
        margin: 0;
        border-radius: 2px;
        background-color: currentColor;
        font-size: 0;
        line-height: 0;
        transition: background-color 0.1s ease 0.14s, transform 0.3s ease;
    }

    body.tn-mmb .tn-menu-toggle:not(.tn-mtab-item) > i.fas::before,
    body.tn-mmb .tn-menu-toggle:not(.tn-mtab-item) > i.fas::after {
        content: "";
        position: absolute;
        left: 0;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background-color: currentColor;
        /* 닫힐 때: 기울기를 먼저 풀고, 그다음 위·아래로 벌어진다 */
        transition: transform 0.14s ease, top 0.14s ease 0.14s, width 0.14s ease 0.14s;
    }

    body.tn-mmb .tn-menu-toggle:not(.tn-mtab-item) > i.fas::before { top: -6px; }
    body.tn-mmb .tn-menu-toggle:not(.tn-mtab-item) > i.fas::after { top: 6px; }

    /* 열릴 때: 가운데 줄이 사라지고, 위·아래 줄이 가운데로 모였다가 ✕ 로 기운다 */
    body.tn-mmb.tn-menu-open .tn-menu-toggle:not(.tn-mtab-item) > i.fas {
        background-color: transparent;
        transition: background-color 0.1s ease, transform 0.3s ease;
    }

    body.tn-mmb.tn-menu-open .tn-menu-toggle:not(.tn-mtab-item) > i.fas::before,
    body.tn-mmb.tn-menu-open .tn-menu-toggle:not(.tn-mtab-item) > i.fas::after {
        top: 0;
        width: 20px;
        transition: top 0.14s ease, width 0.14s ease, transform 0.14s ease 0.14s;
    }

    body.tn-mmb.tn-menu-open .tn-menu-toggle:not(.tn-mtab-item) > i.fas::before { transform: rotate(45deg); }
    body.tn-mmb.tn-menu-open .tn-menu-toggle:not(.tn-mtab-item) > i.fas::after { transform: rotate(-45deg); }

    /* 짧은 아랫줄 */
    body.tn-mmb-short .tn-menu-toggle:not(.tn-mtab-item) > i.fas::after { width: 12px; }

    /* 세 줄 + '메뉴' 글자 */
    body.tn-mmb-label .tn-menu-toggle:not(.tn-mtab-item) {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    body.tn-mmb-label .tn-menu-toggle:not(.tn-mtab-item) > i.fas {
        width: 18px;
        margin-top: 6px;
    }

    body.tn-mmb-label .tn-menu-toggle:not(.tn-mtab-item) > i.fas::before,
    body.tn-mmb-label .tn-menu-toggle:not(.tn-mtab-item) > i.fas::after,
    body.tn-mmb-label.tn-menu-open .tn-menu-toggle:not(.tn-mtab-item) > i.fas::before,
    body.tn-mmb-label.tn-menu-open .tn-menu-toggle:not(.tn-mtab-item) > i.fas::after {
        width: 18px;
    }

    body.tn-mmb-label .tn-menu-toggle:not(.tn-mtab-item)::after {
        content: "메뉴";
        display: block;
        color: currentColor;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    body.tn-mmb-label.tn-menu-open .tn-menu-toggle:not(.tn-mtab-item)::after { content: "닫기"; }

    /* 동그란 단추 — 사이트 색 동그라미, 돌면서 ✕. 스킨이 단추 색·테두리를 높은 특이도로 박아 두어 !important 로 덮는다. */
    body.tn-mmb-circle .tn-menu-toggle:not(.tn-mtab-item) {
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--tn-red, #e6003c) !important;
        color: #fff !important;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18) !important;
    }

    body.tn-mmb-circle .tn-menu-toggle:not(.tn-mtab-item) > i.fas,
    body.tn-mmb-circle .tn-menu-toggle:not(.tn-mtab-item) > i.fas::before,
    body.tn-mmb-circle .tn-menu-toggle:not(.tn-mtab-item) > i.fas::after,
    body.tn-mmb-circle.tn-menu-open .tn-menu-toggle:not(.tn-mtab-item) > i.fas::before,
    body.tn-mmb-circle.tn-menu-open .tn-menu-toggle:not(.tn-mtab-item) > i.fas::after {
        width: 16px;
    }

    body.tn-mmb-circle .tn-menu-toggle:not(.tn-mtab-item) > i.fas::before { top: -5px; }
    body.tn-mmb-circle .tn-menu-toggle:not(.tn-mtab-item) > i.fas::after { top: 5px; }
    body.tn-mmb-circle.tn-menu-open .tn-menu-toggle:not(.tn-mtab-item) > i.fas { transform: rotate(180deg); }
    body.tn-mmb-circle.tn-menu-open .tn-menu-toggle:not(.tn-mtab-item) > i.fas::before,
    body.tn-mmb-circle.tn-menu-open .tn-menu-toggle:not(.tn-mtab-item) > i.fas::after { top: 0; }

    /* ---- 메뉴가 열리는 방식 ---- */

    /* 왼쪽에서 */
    body.tn-mmo-left .tn-menu {
        left: 0;
        right: auto;
        border-left: 0;
        border-right: 1px solid var(--tn-line, #e5e7eb);
        transform: translateX(-100%);
    }

    body.tn-mmo-left.tn-menu-open .tn-menu {
        transform: translateX(0);
        box-shadow: 24px 0 48px rgba(15, 23, 42, 0.22);
    }

    /* 화면 전체 — 아래에서 살짝 올라오며 나타난다, 분야 이름을 크게 */
    body.tn-mmo-full .tn-menu {
        width: 100%;
        border-left: 0;
        padding: 76px 22px 32px;
        opacity: 0;
        transform: translateY(12px);
        transition: transform 0.22s ease, opacity 0.22s ease, visibility 0s linear 0.22s;
    }

    body.tn-mmo-full.tn-menu-open .tn-menu {
        opacity: 1;
        transform: none;
        box-shadow: none;
        transition: transform 0.22s ease, opacity 0.22s ease, visibility 0s;
    }

    body.tn-mmo-full .tn-menu > li > a {
        min-height: 50px;
        font-size: 18px;
        font-weight: 800;
    }

    /* 위에서 펼침 — 화면 폭 판이 위에서 내려온다(높이는 내용만큼) */
    body.tn-mmo-drop .tn-menu {
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        height: auto;
        max-height: 100vh;
        max-height: 100dvh;
        border-left: 0;
        border-bottom: 1px solid var(--tn-line, #e5e7eb);
        border-radius: 0 0 18px 18px;
        transform: translateY(-100%);
    }

    body.tn-mmo-drop.tn-menu-open .tn-menu {
        transform: translateY(0);
        box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    body.tn-mmb .tn-menu-toggle:not(.tn-mtab-item) > i.fas,
    body.tn-mmb .tn-menu-toggle:not(.tn-mtab-item) > i.fas::before,
    body.tn-mmb .tn-menu-toggle:not(.tn-mtab-item) > i.fas::after,
    body[class*="tn-mmo-"] .tn-menu {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}