/* ==========================================================
   Mobile (768px 이하)
   피그마: size=mobile
   ※ @media 안에는 var()를 쓸 수 없어서 768px은 숫자로 씀
   ========================================================== */

/* 데스크톱에서는 모바일 전용 요소 숨김 */
.menu-toggle,
.sidebar-close,
.menu-overlay,
.pagination__status {
    display: none;
}

@media (max-width: 768px) {

    /* ------------------------------------------------------
       헤더 (피그마: header / size=mobile)
       ------------------------------------------------------ */
    .site-header {
    }

    .site-header__inner {
        gap: 12px;
        height: var(--header-h-m);
        padding: 0 var(--space-3) 0 var(--space-2);      /* 0 16 0 8 */
        /*padding: 0 0;*/
    }

    .menu-toggle {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-text);
        cursor: pointer;
    }

    .site-brand {
        flex: 1;                                          /* 피그마: Fill */
        min-width: 0;
        font-size: var(--fs-m-brand);
        line-height: 24px;
    }

    .site-header .search-box {
        flex: 0 1 180px;
        width: auto;
        min-width: 0;
    }

    /* ------------------------------------------------------
       본문 틀
       ------------------------------------------------------ */
    .site-body {
        flex-direction: column;
        gap: 0;
        padding: var(--space-4) var(--space-3) 48px;      /* 24 16 48 */
    }

    .site-main {
        width: 100%;
    }

    /* ------------------------------------------------------
       사이드바 → 왼쪽에서 열리는 메뉴 (피그마: drawer)
       ------------------------------------------------------ */
    .site-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: var(--z-drawer);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 32px;
        width: var(--drawer-w);
        max-width: none;
        padding: var(--space-6) var(--space-4) 32px;      /* 56 24 32 */
        overflow-y: auto;
        background: var(--color-bg);
        box-shadow: var(--shadow-drawer);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--duration) ease, visibility var(--duration);
    }

    .is-menu-open .site-sidebar {
        transform: none;
        visibility: visible;
    }

    .sidebar-close {
        display: flex;
        position: absolute;
        top: var(--space-2);
        right: var(--space-2);
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-muted);
        cursor: pointer;
    }

    /* 피그마: overlay */
    .menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-overlay);
        background: var(--color-overlay);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--duration), visibility var(--duration);
    }

    .is-menu-open .menu-overlay {
        opacity: 1;
        visibility: visible;
    }

    body.is-menu-open {
        overflow: hidden;
    }

    /* 피그마: sidebar/profile / size=mobile (가로) */
    .sidebar-profile {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    .sidebar-profile__avatar {
        width: 56px;
        height: 56px;
    }

    .sidebar-profile__content {
        gap: var(--space-1);
        padding: 0;
    }

    .sidebar-profile__name {
        font-size: var(--fs-m-title-md);                  /* 17 */
    }

    .sidebar-profile__desc {
        font-size: var(--fs-caption);                     /* 13 */
        line-height: 1.6;
    }

    /* ------------------------------------------------------
       글 카드 (피그마: post-card / size=mobile)
       ------------------------------------------------------ */
    .post-card {
        flex-direction: row-reverse;
        align-items: flex-start;
        gap: var(--space-3);
        padding: 20px 0;
    }

    .post-card .post-card__thumb {
        flex: 0 0 96px;
        width: 96px;
        height: 72px;
        border-radius: var(--radius-xs);
    }

    .post-card__body {
        gap: 6px;
    }

    .post-card__title {
        font-size: var(--fs-m-title-md);
        line-height: var(--lh-title);
    }

    .post-card__excerpt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        font-size: var(--fs-body-sm);
        line-height: var(--lh-body);
    }

    /* ------------------------------------------------------
       페이지네이션 (피그마: pagination / size=mobile)
       ------------------------------------------------------ */
    .pagination {
        gap: 12px;
        margin-top: 32px;
    }

    .pagination__numbers,
    .pagination__prev,
    .pagination__next {
        display: none;
    }

    /* 피그마: pagination-item (원형 화살표) */
    .pagination__step {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-full);
        color: var(--color-muted);
    }

    .pagination__step.is-disabled {
        opacity: 0.4;
    }

    .pagination__status {
        display: flex;
        justify-content: center;
        gap: var(--space-1);
        min-width: 64px;
        font-size: var(--fs-body-sm);
        line-height: var(--lh-body);
        color: var(--color-muted);
    }

    .pagination__now {
        font-weight: 500;
        color: var(--color-accent);
    }

    /* ------------------------------------------------------
       글 상세 (피그마: Single-mobile > article)
       ------------------------------------------------------ */
    .single-post__title {
        margin-top: var(--space-2);
        font-size: var(--fs-m-title-xl);
        line-height: var(--lh-tight);
    }

    .single-post__thumb {
        margin-top: var(--space-4);
    }

    .single-post__thumb img {
        height: 200px;
        object-fit: cover;
        border-radius: var(--radius-box);
    }

    .single-post__content {
        margin-top: 28px;
        font-size: var(--fs-m-body-lg);
        line-height: var(--lh-m-read);
    }

    .single-post__content > * + * {
        margin-top: var(--space-3);
    }

    .single-post__content h2 {
        font-size: var(--fs-m-title-lg);
        line-height: var(--lh-title);
    }

    .single-post__tags {
        margin-top: 32px;
    }

    .post-nav a {
        padding: 14px 18px;
    }

    /* ------------------------------------------------------
       댓글 (피그마: comment / size=mobile)
       ------------------------------------------------------ */
    .comments {
        margin-top: 32px;
    }

    .comments__title {
        padding-bottom: 14px;
    }

    .comments__list {
        margin-bottom: 32px;
    }

    .comment__body {
        padding: 20px 0;
    }

    /* 답글: 16 + 세로선 2 + 14 */
    .comment--reply > .comment__body {
        padding: var(--space-3) 0 var(--space-3) 32px;
    }

    .comment--reply > .comment__body::before {
        top: var(--space-3);
        bottom: var(--space-3);
        left: var(--space-3);
    }

    .comment__verify {
        padding: 14px;
    }

    /* 작성 폼 (피그마: comment-form / size=mobile) */
    .comment-form {
        gap: 10px;
    }

    .comment-form__textarea {
        min-height: 112px;
    }

    /*.comment-form__footer {*/
    /*    flex-direction: column;*/
    /*    align-items: stretch;*/
    /*    gap: 10px;*/
    /*}*/

    /*.comment-form__footer .button {*/
    /*    width: 100%;*/
    /*}*/

    .comment-form__footer {
        flex-wrap: wrap;
        gap: 10px;
    }

    .comment-form__footer .comment-form__note {
        flex: 0 0 100%;
    }

    .comment-form__footer .comment-form__note:empty {
        display: none;
    }

    .comment-form__footer .button {
        flex: 1;
        margin: 0;
    }

    /* ------------------------------------------------------
       검색 없음 / 404 안내 박스
       ------------------------------------------------------ */
    .empty-state {
        padding: var(--space-5) var(--space-3);           /* 40 16 */
    }
}

/* 로그인 상태: 관리자 바(46px) 아래에서 메뉴 시작 */
@media (max-width: 782px) {
    .admin-bar .site-sidebar {
        top: 46px;
    }
}

@media (max-width: 359px) {
    .site-header .search-box {
        display: none;
    }
}