/* =============================================================
   mobile.css — 모바일 반응형 오버라이드
   -------------------------------------------------------------
   설계 원칙:
   - style.css(데스크톱)는 절대 건드리지 않는다. 이 파일은 '덧씌우기'만.
   - 모든 규칙은 미디어쿼리 안에만 둔다 → 데스크톱 화면엔 영향 0.
   - 브레이크포인트: 1024px 이하(태블릿/폰), 480px 이하(폰 세부).
   - style.css 뒤에 로드해야 오버라이드가 먹는다(각 페이지에서 link 순서 주의).
   - CSS 변수(--primary, --text-main 등)는 style.css의 :root를 그대로 재사용.
   ============================================================= */

/* ============================================================
   1) 태블릿·모바일 공통 (1024px 이하)
   ============================================================ */
@media (max-width: 1024px) {

    /* 가로 스크롤 원천 차단 (데스크톱 고정폭 요소가 삐져나오는 것 방지) */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* --- 레이아웃: 3단 → 1단 --- */
    .container {
        display: block;          /* flex 3단 해제 */
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    /* 양쪽 사이드바는 모바일에서 숨김 (핵심 기능은 햄버거 드로어/헤더로 이동)
       주의: .drawer 내부의 aside는 제외해야 하므로 사이드바 클래스만 지정 */
    .sidebar-left,
    .sidebar-right,
    .container > aside {
        display: none !important;
    }

    main {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;          /* 데스크톱의 flex:0 0 920px 해제 */
        padding: 0 0 24px 0;     /* 데스크톱 상단 88px(fixed 툴바 공간) 제거 — 툴바를 sticky로 바꿨으므로 불필요 */
        border-left: none;       /* 데스크톱 좌측 경계선 제거 */
        border-right: none;
        box-sizing: border-box;
    }

    /* --- 헤더 축소 --- */
    header .nav-inner {
        padding: 8px 12px;
        gap: 8px;
        flex-wrap: nowrap;
        max-width: 100%;         /* 데스크톱 고정폭 해제 → 화면 꽉 차게 */
    }

    /* 데스크톱은 header::after로 top:56px에 24px짜리 고정 흰 띠를 깔아
       fixed 툴바와 콘텐츠 사이 틈을 가린다. 모바일에선 툴바가 sticky라 이 띠가
       오히려 툴바(z-index:40) 위에 겹쳐 글자를 가리므로 제거한다. */
    header::after {
        display: none !important;
    }

    /* 햄버거 버튼: 로고 앞에 표시 */
    .mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 40px;
        height: 40px;
        padding: 0;
        background: none;
        border: none;
        color: var(--text-main, #1F2C45);
        cursor: pointer;
    }

    /* 로고: 아이콘만 남기고 글자/태그라인 축소 (공간 절약) */
    header .logo {
        flex: none;
    }
    /* 로고 옆 태그라인('Global stocks, one feed')은 숨김 */
    header .logo span span[style*="Global stocks"],
    header .logo .logo-tagline {
        display: none !important;
    }

    /* 헤더 검색창은 모바일에서 숨긴다.
       예전엔 flex:1 1 auto로 남는 폭을 먹게 했지만, 로고(아이콘+Gstoc.+태그라인)와
       우측 영역(포인트·유저메뉴) 사이에 남는 폭이 사실상 없어 타이틀과 겹쳤다.
       → 검색 폼을 햄버거 드로어 '보기 언어' 아래로 이동(header.html .drawer__search). */
    header .search-container {
        display: none !important;
    }
    /* 우측 영역(언어·GBC·유저메뉴) 간격 최소화 */
    header .nav-inner > div[style*="gap"] {
        gap: 6px !important;
        flex: none;
    }

    /* GBC 뱃지: 모바일에서도 표시하되 작게 (포인트는 로그인 유저가 자주 보는 정보) */
    .gbc-badge {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* 로그인/유저 메뉴 텍스트 축소 */
    .user-name-text {
        max-width: 84px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* --- 커뮤니티/검색 배너 --- */
    .gallery-banner {
        border-radius: 0;        /* 화면 꽉 차게 */
        margin: 0 0 8px 0;
        padding: 16px 14px;
    }

    /* --- 피드 툴바 ---
       데스크톱은 position:fixed + width:920px + left:50% 로 화면 중앙에 고정돼 있다.
       모바일에선 이 고정 배치를 전부 풀어 화면 폭에 맞춰 sticky로 바꾼다.
       주의: 헤더도 sticky top:0 (높이 56px)이므로, 툴바는 그 아래(top:56px)에 붙여야
       스크롤 시 헤더와 겹쳐 글자가 가려지지 않는다. */
    .feed-toolbar {
        position: sticky;
        top: 56px;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: 52px;
        padding: 0 12px;
        box-sizing: border-box;
        z-index: 40;
        background: var(--bg-main, #fff);
        border-bottom: 1px solid var(--border, rgba(0,0,0,0.07));
    }
    .feed-tabs {
        gap: 14px;
    }
    .feed-tab {
        font-size: 14px;
    }

    /* 툴바의 '글쓰기' 버튼은 유지 (헤더에서 접근). 필요 시 여기서 조정 */

    /* --- 피드 아이템(카드) --- */
    .feed {
        padding: 0;
    }
    /* 카드 사이 구분을 얇은 선/여백으로 (모바일은 풀블리드가 자연스러움) */
    .feed-item,
    .feeditem,
    .feed > article {
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 14px 14px;
        margin: 0;
    }

    /* 터치 타깃 최소 44px 확보 (버튼·링크가 손가락에 안정적으로 눌리도록)
       주의: 예전엔 여기 'button' 태그 전체가 포함돼 있어서, border-radius:50%/999px로
       정원(正圓)을 의도한 아이콘 버튼(검색·드로어닫기·햄버거·모달닫기·댓글좋아요·투표)까지
       height만 44px로 늘어나 전부 타원으로 찌그러지는 버그가 있었다(width는 그대로라서).
       → 텍스트/넓은 버튼만 min-height로 키우고, 정사각형이어야 하는 아이콘 버튼은
       바로 아래에서 width·height를 함께 지정해 정원을 유지한다. */
    .feed-tab,
    .write-btn,
    .login-btn,
    .auth-submit,
    .solid-btn,
    .ghost-btn,
    .mypage-tab,
    .feed-item a {
        min-height: 44px;
    }
    /* 위 규칙이 인라인 텍스트 링크까지 키우지 않도록, 피드 내부 본문 링크는 예외 */
    .feed-item .post-body a,
    .post-content a {
        min-height: 0;
    }

    /* 정원(正圓)/정사각 아이콘 버튼: min-height 대신 width·height를 함께 키워
       비율이 무너지지 않게 한다. 헤더 검색·햄버거·드로어 닫기·로그인모달 닫기는
       주요 내비게이션 컨트롤이라 40px로, 댓글 영역의 좋아요·투표는 목록 밀도를
       고려해 36px로 잡았다. */
    .search-btn,
    .mobile-menu-btn,
    .drawer__close,
    .modal-close-btn {
        width: 40px;
        height: 40px;
    }
    .icon-btn,
    .vote-btn {
        width: 36px;
        height: 36px;
    }

    /* 로그인 아이콘 버튼: 로그인 후 들어올 아바타(32px)와 크기를 비슷하게 유지하되
       터치 타깃은 조금 키운다. 위 min-height 목록에 넣으면 정원이 타원으로 찌그러진다. */
    .login-icon-btn {
        width: 36px;
        height: 36px;
    }

    /* --- 폰트/여백 미세조정 --- */
    body {
        font-size: 15px;
    }
}

/* ============================================================
   3) 폰 세부 (480px 이하) — 더 좁은 화면 최적화
   ============================================================ */
@media (max-width: 480px) {
    header .nav-inner {
        padding: 7px 8px;
        gap: 6px;
    }

    /* 아주 좁은 화면에선 로고 아이콘만, 글자 로고는 유지하되 크기만 축소 */
    header .logo svg {
        width: 30px;
        height: 30px;
    }

    /* 320~400px 폰: 헤더가 빠듯하므로 GBC 뱃지는 숨긴다(마이페이지·드로어에서 확인 가능) */
    .gbc-badge {
        display: none !important;
    }
    /* 유저 이름도 숨기고 아바타만 (탭하면 메뉴) */
    .user-name-text {
        display: none !important;
    }

    .gallery-banner-text h2 {
        font-size: 17px;
    }
    .gallery-banner-text p {
        font-size: 12px;
    }

    .feed-item,
    .feeditem {
        padding: 12px 12px;
    }
}

/* ============================================================
   4) 드로어 언어 셀렉트 (.drawer__lang)
   - 헤더에 있던 언어 셀렉트를 햄버거 드로어 안(보기 언어 섹션)으로 옮겼다.
     지구본 아이콘 + full-width 셀렉트로, 커뮤니티 목록(.drawer__item)과 톤을 맞춘다.
   ============================================================ */
.drawer__lang {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
}
.drawer__lang-ico {
    flex: none;
    color: var(--text-muted, #86857E);
}
.drawer__lang-select {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text-main, #1F2C45);
    background: var(--bg-soft, #F4F4F2);
    border: 1px solid var(--border, rgba(0,0,0,0.10));
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: menulist;
    appearance: menulist;
}

/* ============================================================
   4-1) 드로어 검색 (.drawer__search)
   - 헤더 검색창이 로고/타이틀과 겹쳐서 드로어 '보기 언어' 섹션 아래로 옮겼다.
   - 언어 셀렉트(.drawer__lang-select)와 같은 높이·radius·배경으로 톤을 맞춘다.
   - 드로어는 1024px 이하에서만 열리므로 미디어쿼리 없이 둬도 데스크톱 영향 없음.
   ============================================================ */
.drawer__search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px;
    padding: 4px 4px 4px 12px;
    background: var(--bg-soft, #F4F4F2);
    border: 1px solid var(--border, rgba(0,0,0,0.10));
    border-radius: 10px;
}
.drawer__search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px 0;
    /* 16px 미만이면 iOS Safari가 포커스 시 화면을 확대해버린다 */
    font-size: 16px;
    font-family: inherit;
    color: var(--text-main, #1F2C45);
}
.drawer__search input::placeholder {
    color: var(--text-subtle, #9A9A95);
}
.drawer__search-btn {
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #86857E);
    cursor: pointer;
}
.drawer__search-btn:active {
    background: var(--bg-hover, #EDEDEA);
}

/* ============================================================
   5) 모바일 드로어 (좌측 슬라이드 메뉴: 홈 + 커뮤니티 목록)
   - 햄버거 버튼: 데스크톱 숨김, 1024px 이하에서만 헤더 좌측에 표시.
   - 드로어: 화면 왼쪽에서 밀려 나오는 메뉴. 폭은 가변(화면의 80%, 최대 320px).
   ============================================================ */

/* 햄버거 버튼: 기본(데스크톱) 숨김 */
.mobile-menu-btn {
    display: none;
}

/* 드로어 오버레이: 기본 숨김 */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* 드로어 본체: 왼쪽 밖에 숨어있다가 .open 시 슬라이드 인 */
.drawer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    background: var(--bg-surface, #fff);
    box-shadow: 2px 0 24px rgba(31,44,69,0.18);
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0);
    overflow-y: auto;
}
.drawer-overlay.open .drawer {
    transform: translateX(0);
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.drawer__brand {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-main, #1F2C45);
    letter-spacing: -0.5px;
}
/* 드로어 헤드의 보유 포인트(틱스).
   480px 이하에선 헤더의 .gbc-badge가 display:none이라(아래 480px 블록)
   모바일에서 포인트를 확인할 자리가 여기와 마이페이지뿐이다. */
.drawer__points {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    margin-right: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-sidebar, #F6F7F8);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-main, #1F2C45);
    white-space: nowrap;
    user-select: none;
}
.drawer__points::before {
    content: "●";
    color: var(--gbc, #E8A23D);
    font-size: 10px;
}
.drawer__points-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #86857E);
}
.drawer__close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: var(--text-muted, #86857E);
    cursor: pointer;
    width: 36px;
    height: 36px;
}
.drawer__nav {
    padding: 8px 10px;
}
.drawer__section {
    padding: 8px 10px 20px;
    border-top: 1px solid var(--border, rgba(0,0,0,0.06));
    margin-top: 4px;
}
.drawer__section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted, #86857E);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 8px 8px 6px;
}
.drawer__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-main, #1F2C45);
    font-size: 15px;
    min-height: 48px;
}
.drawer__item:active,
.drawer__item:hover {
    background: var(--bg-hover, #F4F4F2);
}
.drawer__item.active {
    background: var(--primary-light, #E1F5EE);
    color: var(--primary-dark, #0F6E56);
    font-weight: 700;
}
.drawer__hash {
    color: var(--text-subtle, #9A9A95);
    font-weight: 700;
    width: 18px;
    text-align: center;
}

/* 주의: 바로 위 '.mobile-menu-btn { display: none; }'가 무조건부 규칙이라
   섹션 1)의 display:inline-flex보다 파일상 나중에 와서 이겨버린다(같은 우선순위는
   소스 순서가 이긴다). 그래서 아래처럼 display만 다시 뒤집어줘야 한다 — 이게 삭제됐던
   진짜 이유였다(다른 크기 속성은 섹션 1에서 이미 처리되므로 여기선 display만 둔다). */
@media (max-width: 1024px) {
    .mobile-menu-btn {
        display: inline-flex;
    }
}

/* ============================================================
   5-1) 알림 토스트 (#notifToastWrap)
   - header.html에서 인라인 스타일로 position:fixed; right:20px; bottom:20px;
     min-width:240px; max-width:300px; 를 JS가 직접 박아 넣는다.
     모바일에서 미대응 상태였음(오른쪽에 좁게 붙어 답답하고 여백 계산도 없었음).
   - 인라인 스타일보다 우선해야 하므로 !important 사용.
   ============================================================ */
@media (max-width: 1024px) {
    #notifToastWrap {
        right: 12px !important;
        left: 12px !important;
        bottom: 12px !important;
    }
    #notifToastWrap > div {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   6) 관리자 페이지(body.page-admin) 예외
   - 관리자 화면은 데스크톱 전용 도구다. 일반 헤더를 공유하지만
     모바일 요소(햄버거·언어셀렉트·드로어)는 필요 없으므로 숨긴다.
   - 관리자 자체 사이드바(.admin-sidebar)는 유지한다.
   ============================================================ */
body.page-admin .mobile-menu-btn,
body.page-admin #mobileDrawerOverlay {
    display: none !important;
}

/* ============================================================
   7-2) 글쓰기(write) 페이지 (모바일)
   - write.html은 mobile.css를 로드하지만 에디터 전용 모바일 규칙이 없었다.
     에디터 자체는 max-width:760px + margin:auto라 폭은 자동으로 줄지만,
     (1) .editor-wrap 좌우 패딩이 20px이라 좁은 폰에서 본문 영역이 다소 답답하고,
     (2) 툴바 버튼(.tb-btn)이 32x32라 손가락 터치 타깃으로 작다.
     로직·마크업은 그대로 두고 여기서 화면만 손본다.
   ============================================================ */
@media (max-width: 1024px) {
    .editor-wrap {
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
    /* 툴바 버튼 터치 타깃 확대(새 미니멀 디자인 유지, 크기만 키움) */
    .tb-btn {
        min-width: 40px;
        height: 40px;
        padding: 0 10px;
    }
    /* 게시/취소 버튼이 좁은 화면에서 너무 붙지 않게 살짝 키움 */
    .editor-actions .solid-btn,
    .editor-actions .ghost-btn {
        min-height: 44px;
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ============================================================
   7-1) 게시글 상세 페이지 좌우 여백 (모바일)
   - style.css의 .post-detail/.comment-section은 좌우 패딩이 4px뿐이다.
     데스크톱에선 main이 32px를 더 얹어줘서 괜찮았지만, 모바일에서 main의
     좌우 패딩을 0으로 만들면서(피드 풀블리드 목적) 상세페이지 본문·댓글까지
     화면 가장자리에 거의 붙어버리는 문제가 있었다(마이페이지엔 7)에서 이미
     여백을 챙겨줬는데 상세페이지만 빠져 있었음). 제목·본문·액션바·댓글 전부
     .post-detail/.comment-section의 자식이라 여기 하나만 고치면 전체 적용된다.
   ============================================================ */
@media (max-width: 1024px) {
    .post-detail,
    .comment-section {
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    /* 상세 액션바: 원문보기/공유/신고의 텍스트 라벨을 숨기고 아이콘만 남겨
       한 줄에 들어가게 한다(폰에서 텍스트까지 다 나오면 2줄로 늘어져 답답했음).
       예외: 댓글 버튼의 숫자(#postCommentCountNum)는 '몇 개'인지가 정보라 유지 →
       댓글 버튼만 '아이콘 + 숫자' 형태가 된다. 추천 pill(vote-pill)은 원래 아이콘+숫자라 그대로. */
    .post-detail-actions .pill-btn span:not(#postCommentCountNum) {
        display: none;
    }
    .post-detail-actions .pill-btn {
        gap: 0;
        padding: 9px 12px;
    }
    /* 아이콘과 댓글 숫자 사이 최소 간격 */
    .post-detail-actions #postCommentCountNum {
        margin-left: 5px;
    }
}

/* ============================================================
   7) 마이페이지 탭·목록 좌우 여백 (모바일)
   - main의 좌우 패딩을 0으로 만들어 피드는 풀블리드가 되지만,
     마이페이지의 탭/목록은 화면 끝에 붙어 답답하므로 좌우 여백을 준다.
   ============================================================ */
@media (max-width: 1024px) {
    .mypage-tabs {
        padding-left: 16px;
        padding-right: 16px;
    }
    .mypage-panel {
        padding-left: 16px;
        padding-right: 16px;
    }
    /* my-item이 음수 마진 등으로 튀어나오지 않게 */
    .my-item {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ============================================================
   8) 모바일 폰트 위계 재정리
   -------------------------------------------------------------
   PC(style.css)의 위계는 그대로 두고(제목 24 · 본문 16.5 · 댓글 14 …),
   폰 화면에 맞게만 크기를 다시 잡는다. 목표:
   - 상세 제목 24 → 21: 폰에서 24는 과해 두세 줄을 크게 차지한다. 피드 제목(16)과의
     격차도 줄여 한 화면 안에서 톤을 맞춘다.
   - 본문 16.5 → 16 / 댓글 본문 14 → 15: 같은 '읽는 글'인데 PC에선 2.5px 벌어져 있었다.
     폰에선 둘 다 15~16으로 좁혀 본문과 댓글이 매끄럽게 이어지게.
   - 메타/시간 11.5 → 12, 댓글 작성자 13 → 13.5: 폰에서 너무 잘아 보이던 보조 텍스트를
     한 단계 키워 가독성 확보.
   - 피드 제목/미리보기는 이미 폰에 적당하므로 유지.
   모두 미디어쿼리 안이라 데스크톱에는 영향 없음.
   ============================================================ */
@media (max-width: 1024px) {
    /* 상세 페이지 */
    .post-detail-title { font-size: 21px; }
    .post-detail-body  { font-size: 16px; line-height: 1.8; }
    .meta-author       { font-size: 13.5px; }
    .meta-sub          { font-size: 12px; }

    /* 댓글 */
    .comment-count     { font-size: 15px; }
    .comment-body      { font-size: 15px; line-height: 1.65; }
    .comment-author    { font-size: 13.5px; }
    .comment-time      { font-size: 12px; }

    /* 커뮤니티/검색 배너 (섹션 1에서 padding만 잡았으므로 폰트는 여기서) */
    .gallery-banner-text h2 { font-size: 19px; }
    .gallery-banner-text p  { font-size: 12.5px; }
}

/* ============================================================
   9) 폰 세부(480px 이하) 폰트 — 초소형 화면에서 한 단계 더 축소
   - 상단 480px 블록의 .gallery-banner h2/p 규칙과 겹치지 않도록
     여기서는 상세 제목만 추가로 줄인다.
   ============================================================ */
@media (max-width: 480px) {
    .post-detail-title { font-size: 20px; }
    .post-detail-body  { font-size: 15.5px; }
}