/*
 * 모바일 위젯(App\Core\MobileDesigns) — 헤더 밑 분야 가로 띠(.tn-mcat), 화면 아래 탭바(.tn-mtab), 맨 위로 단추(.tn-mtop),
 * 홈 위젯 가로로 넘기기(body.tn-mswipe-*). 언론사가 '안 씀'이 아닌 종류를 골랐을 때만 실리고, 폰 폭(768px 이하)에서만 보인다.
 * 색·선은 그 언론사 값(--tn-red · --tn-ink · --tn-line)을 따른다. 움직임(숨기·나오기)은 tnews-mobile-widgets.js.
 */

.tn-mcat,
.tn-mtab,
.tn-mtop {
    display: none;
}

@media (max-width: 768px) {
    /* ---- 헤더 밑 분야 가로 띠 ---- */
    .tn-mcat {
        position: relative;
        display: block;
        border-bottom: 1px solid var(--tn-line, #e5e7eb);
        background: #fff;
    }

    .tn-mcat-track {
        display: flex;
        gap: 2px;
        overflow-x: auto;
        padding: 0 10px;
        scroll-padding-inline: 10px; /* 붙는 자리를 안쪽 여백만큼 — 첫 칸이 화면 끝에 잘리지 않게 */
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .tn-mcat-track::-webkit-scrollbar { display: none; }

    /* 오른쪽 끝을 흐리게 — 옆으로 더 있다는 표시 */
    .tn-mcat::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 1px;
        width: 28px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
        pointer-events: none;
    }

    .tn-mcat-item {
        position: relative;
        display: inline-flex;
        flex: none;
        align-items: center;
        min-height: 44px;
        padding: 0 11px;
        color: var(--tn-ink, #111827);
        font-size: 14.5px;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-decoration: none;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .tn-mcat-text .tn-mcat-item.is-active { color: var(--tn-red, #e6003c); }

    .tn-mcat-text .tn-mcat-item.is-active::after {
        content: "";
        position: absolute;
        left: 11px;
        right: 11px;
        bottom: 0;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: var(--tn-red, #e6003c);
    }

    .tn-mcat-pill .tn-mcat-track {
        gap: 6px;
        padding: 8px 12px;
        scroll-padding-inline: 12px;
    }

    .tn-mcat-pill .tn-mcat-item {
        min-height: 34px;
        padding: 0 14px;
        border: 1px solid var(--tn-line, #e5e7eb);
        border-radius: 999px;
        font-size: 13.5px;
    }

    .tn-mcat-pill .tn-mcat-item.is-active {
        border-color: var(--tn-red, #e6003c);
        background: var(--tn-red, #e6003c);
        color: #fff;
    }

    .tn-mcat-item:focus-visible {
        outline: 2px solid var(--tn-red, #e6003c);
        outline-offset: -2px;
    }

    /* ---- 화면 아래 탭바 ---- */
    body.tn-mtab-on {
        --tn-mtab-h: 57px;
        padding-bottom: calc(var(--tn-mtab-h) + env(safe-area-inset-bottom, 0px));
    }

    body.tn-mtab-is-float { --tn-mtab-h: 74px; }
    body.tn-mtab-is-icons { --tn-mtab-h: 51px; }

    .tn-mtab {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 120;
        display: flex;
        align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-top: 1px solid var(--tn-line, #e5e7eb);
        background: rgba(255, 255, 255, 0.97);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transition: transform 0.25s ease;
    }

    .tn-mtab.is-away,
    body.tn-menu-open .tn-mtab {
        transform: translateY(calc(100% + 20px));
    }

    .tn-mtab .tn-mtab-item {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        min-height: 56px;
        margin: 0;
        padding: 6px 2px;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var(--tn-ink-soft, #4b5563);
        font: inherit;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.1;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .tn-mtab .tn-mtab-item i { font-size: 18px; }
    .tn-mtab .tn-mtab-item.is-active,
    .tn-mtab .tn-mtab-search[open] > summary { color: var(--tn-red, #e6003c); }

    .tn-mtab .tn-mtab-item:focus-visible,
    .tn-mtab .tn-mtab-search > summary:focus-visible {
        outline: 2px solid var(--tn-red, #e6003c);
        outline-offset: -4px;
    }

    /* 검색 — details 안의 summary 가 칸, 폼은 막대 위로 뜬다 */
    .tn-mtab .tn-mtab-search { padding: 0; }

    .tn-mtab .tn-mtab-search > summary {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        height: 100%;
        list-style: none;
        cursor: pointer;
    }

    .tn-mtab .tn-mtab-search > summary::-webkit-details-marker { display: none; }
    .tn-mtab .tn-mtab-search > summary::marker { content: ""; }

    .tn-mtab-searchbox {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: calc(100% + 10px);
        display: flex;
        gap: 6px;
        padding: 6px;
        border: 1px solid var(--tn-line, #e5e7eb);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
    }

    .tn-mtab-searchbox input {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 12px;
        border: 0;
        background: transparent;
        color: var(--tn-ink, #111827);
        font-size: 16px; /* 16px 아래면 아이폰이 화면을 키운다 */
        outline: none;
    }

    .tn-mtab-searchbox button {
        flex: none;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: var(--tn-red, #e6003c);
        color: #fff;
        font-size: 16px;
    }

    /* 아이콘만 */
    .tn-mtab-icons .tn-mtab-item { min-height: 50px; }

    .tn-mtab-icons .tn-mtab-item span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .tn-mtab-icons .tn-mtab-item i { font-size: 20px; }

    /* 떠 있는 알약 */
    .tn-mtab-float {
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding-bottom: 0;
        overflow: visible;
        border: 1px solid var(--tn-line, #e5e7eb);
        border-radius: 999px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    }

    .tn-mtab-float .tn-mtab-item { min-height: 54px; }

    /* 메뉴 탭은 헤더 햄버거와 같은 이름표(.tn-menu-toggle) — 헤더 단추용 꾸밈(테두리·그림자·고정 자리)이 오지 않게 막는다 */
    body.tn-menu-open .tn-mtab .tn-mtab-menu {
        position: static;
        border: 0;
        box-shadow: none;
    }

    /* 폰 아래 광고(mobile_bottom)는 탭바 위에 — 탭바가 숨으면 같이 내려간다 */
    body.tn-mtab-on :is(.tn-ad-mobile_bottom, .tn-media-mobile_bottom) {
        bottom: calc(var(--tn-mtab-h) + env(safe-area-inset-bottom, 0px));
        transition: bottom 0.25s ease;
    }

    body.tn-mtab-on.tn-mtab-gone :is(.tn-ad-mobile_bottom, .tn-media-mobile_bottom) { bottom: 0; }

    body.tn-mtab-on:has(:is(.tn-ad-mobile_bottom, .tn-media-mobile_bottom)) {
        padding-bottom: calc(min(96px, 24vw) + var(--tn-mtab-h) + env(safe-area-inset-bottom, 0px));
    }

    /* ---- 맨 위로 ---- */
    .tn-mtop {
        position: fixed;
        right: 14px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--tn-mtop-lift, 0px));
        z-index: 119;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px solid var(--tn-line, #e5e7eb);
        background: #fff;
        color: var(--tn-ink, #111827);
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transform: translateY(12px);
        transition: opacity 0.2s ease, transform 0.2s ease, bottom 0.25s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .tn-mtop.is-shown,
    body.tn-mpreview .tn-mtop {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    body.tn-menu-open .tn-mtop {
        opacity: 0;
        pointer-events: none;
    }

    body.tn-mtab-on:not(.tn-mtab-gone) .tn-mtop { --tn-mtop-lift: var(--tn-mtab-h); }

    .tn-mtop:focus-visible {
        outline: 2px solid var(--tn-red, #e6003c);
        outline-offset: 2px;
    }

    .tn-mtop-circle {
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
        font-size: 17px;
    }

    .tn-mtop-circle span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .tn-mtop-label {
        height: 40px;
        padding: 0 15px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 800;
    }

    /* ---- 홈 위젯 가로로 넘기기 — 고른 위젯의 카드 줄을 한 줄로 세우고 옆으로 넘긴다 ----
       '.tn-wd > [data-wd~=list]' 는 본사가 만든 디자인 종류(App\Core\WidgetDesignBases)를 고른 위젯의 카드 줄이다. 2026-10-24 전에는
       지금 마크업만 걸려, 종류를 고른 위젯(뉴스파크의 인기 기사 '순위 카드'·카테고리별 뉴스 '대표 사진')은 넘기기를 켜도 그대로였다. */
    body.tn-mswipe-w-popular-cards [data-home-section="popular"] .tn-popular-card-row,
    body.tn-mswipe-w-photo-gallery [data-home-section="photos"] .tn-photo-grid,
    body.tn-mswipe-w-section-news [data-home-section="category_lists"] .tn-home-category-list-grid,
    body.tn-mswipe-w-category-news [data-home-section="category_cards"] .tn-section-news-card-row,
    body.tn-mswipe-w-popular-cards [data-home-section="popular"] .tn-wd > [data-wd~="list"],
    body.tn-mswipe-w-photo-gallery [data-home-section="photos"] .tn-wd > [data-wd~="list"],
    body.tn-mswipe-w-section-news [data-home-section="category_lists"] .tn-wd > [data-wd~="list"],
    body.tn-mswipe-w-category-news [data-home-section="category_cards"] .tn-wd > [data-wd~="list"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        overflow-x: auto !important;
        margin-inline: -4px;
        padding: 2px 4px 10px !important;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.tn-mswipe-w-popular-cards [data-home-section="popular"] .tn-popular-card-row::-webkit-scrollbar,
    body.tn-mswipe-w-photo-gallery [data-home-section="photos"] .tn-photo-grid::-webkit-scrollbar,
    body.tn-mswipe-w-section-news [data-home-section="category_lists"] .tn-home-category-list-grid::-webkit-scrollbar,
    body.tn-mswipe-w-category-news [data-home-section="category_cards"] .tn-section-news-card-row::-webkit-scrollbar,
    body.tn-mswipe-w-popular-cards [data-home-section="popular"] .tn-wd > [data-wd~="list"]::-webkit-scrollbar,
    body.tn-mswipe-w-photo-gallery [data-home-section="photos"] .tn-wd > [data-wd~="list"]::-webkit-scrollbar,
    body.tn-mswipe-w-section-news [data-home-section="category_lists"] .tn-wd > [data-wd~="list"]::-webkit-scrollbar,
    body.tn-mswipe-w-category-news [data-home-section="category_cards"] .tn-wd > [data-wd~="list"]::-webkit-scrollbar {
        display: none;
    }

    body.tn-mswipe-w-popular-cards [data-home-section="popular"] .tn-popular-card-row > *,
    body.tn-mswipe-w-photo-gallery [data-home-section="photos"] .tn-photo-grid > *,
    body.tn-mswipe-w-section-news [data-home-section="category_lists"] .tn-home-category-list-grid > *,
    body.tn-mswipe-w-category-news [data-home-section="category_cards"] .tn-section-news-card-row > *,
    body.tn-mswipe-w-popular-cards [data-home-section="popular"] .tn-wd > [data-wd~="list"] > *,
    body.tn-mswipe-w-photo-gallery [data-home-section="photos"] .tn-wd > [data-wd~="list"] > *,
    body.tn-mswipe-w-section-news [data-home-section="category_lists"] .tn-wd > [data-wd~="list"] > *,
    body.tn-mswipe-w-category-news [data-home-section="category_cards"] .tn-wd > [data-wd~="list"] > * {
        flex: 0 0 var(--tn-mswipe-w, 78%) !important;
        width: var(--tn-mswipe-w, 78%) !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        scroll-snap-align: start;
    }

    body.tn-mswipe-narrow { --tn-mswipe-w: 42%; }
    /* 분야 목록은 칸 하나가 글 여러 줄이라 두 장 반이면 너무 좁다 */
    body.tn-mswipe-narrow [data-home-section="category_lists"] { --tn-mswipe-w: 64%; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .tn-mtab,
    .tn-mtop,
    body.tn-mtab-on :is(.tn-ad-mobile_bottom, .tn-media-mobile_bottom) {
        transition: none !important;
    }
}

@media print {
    .tn-mcat,
    .tn-mtab,
    .tn-mtop {
        display: none !important;
    }
}