/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */

/* ===== 사이트 로고: 라이트/다크 모드별 이미지 교체 (2026-09-29) =====
   <img>로 불러오는 SVG는 이미지 컨텍스트로 렌더링되어 Pretendard 웹폰트가 적용되지 않아
   PC마다 글자 폭이 달라지고 잘릴 수 있음 -> 폰트를 미리 구워넣은 2배 해상도
   PNG(560x120, /data/common/logo.png, logo_light.png)로 교체.
   다크모드 토글이 새로고침 없이 body.dark-mode 클래스만 바꾸므로, CSS content 치환 대신
   head.html.php에 라이트용/다크용 <img> 두 개(site-logo-light/site-logo-dark)를 두고
   display 전환만 한다 (모든 브라우저에서 안전하게 동작).
   원본 theme/eb4_comm_004/image/site_logo.svg 는 수정하지 않음(관리자 로고 업로드 시에만 쓰이는 파일).
   PC/모바일 헤더가 같은 마크업을 쓰므로 한 번에 적용됨. */
.header-title .title-logo img.site-logo {
    height: 88px;
    width: auto;
}
.header-title .title-logo img.site-logo-dark {
    display: none;
}
body.dark-mode .header-title .title-logo img.site-logo-light {
    display: none;
}
body.dark-mode .header-title .title-logo img.site-logo-dark {
    display: inline-block;
}
@media (max-width: 991px) {
    .header-title .title-logo img.site-logo {
        height: 64px;
    }
}
@media (max-width: 767px) {
    .header-title .title-logo img.site-logo {
        height: 44px;
    }
}

/* ===== 헤더 검색창: 커진 로고와 겹치지 않게 재배치 (2026-09-30) =====
   기존 style.css는 검색창을 항상 컨테이너 "정중앙"(left:50%)에 고정하고
   화면 폭별로 width만 400/300/200px로 줄였음. 로고를 88px로 키우면
   (실제 렌더 너비 약 410.67px = 88 * 560/120) 992~1399px 구간에서
   컨테이너 정중앙이 로고와 겹치는 구간 안에 들어와 버림.
   -> "컨테이너 정중앙"이 아니라 "로고 오른쪽 끝 ~ 우측 배너 슬라이더 왼쪽 끝"
   사이의 남는 공간 정가운데에 오도록 left/right를 고정값으로 지정하고
   width는 auto로 그 사이 폭만큼 자동 계산되게 한다. 화면 폭이 커져도
   로고·슬라이더 위치가 고정 오프셋(패딩 12px, 슬라이더 300px+12px)이라
   이 계산은 992px~어떤 큰 화면에서도 항상 성립한다.
   - 로고 오른쪽 끝: 컨테이너 좌측 패딩 12px + 로고 실제 폭 410.67px = 422.67px
   - 안전 여백 12px(부트스트랩 거터 0.75rem과 동일) 추가 -> left: 435px
   - 슬라이더 폭 300px + 슬라이더 우측 오프셋 12px + 안전 여백 12px -> right: 324px
   - 992~1199px 구간(컨테이너 860px)이 가장 좁아 검색창 실사용 폭이
     약 101px로 줄어듦. 겹침은 없지만 매우 좁아지므로, 이 구간에서도
     검색 아이콘/입력이 보이게만 하고 더 좁게 만들고 싶다면 상의 필요. */
.header-title .header-title-search {
    left: 435px;
    right: 324px;
    width: auto;
    transform: none;
}

/* ===== 헤더 로고-배너 세로 정렬 (2026-09-30) =====
   .header-title .container는 height:100px; display:flex 이고 로고(.title-logo)는
   align-self:center라 로고 높이가 바뀌어도 항상 컨테이너 세로 중앙(50px 지점)에
   맞춰짐. 배너(.header-title-slider)는 top:10px; height:80px 라서 중심이
   10+80/2=50px로 이미 로고와 같은 지점. 즉 기존 값 그대로 이미 세로 중앙이
   맞아 별도 CSS가 필요 없음(수치 확인용 주석). */

/* ===== 모바일(767px 이하) 상단바 정리: 관리자 로그인 시 줄바꿈/겹침 수정 (2026-09-30) =====
   문제 원인: 기존 style.css는 모바일에서 .top-header-mobile-btn(햄버거)을
   position:absolute; left:0 으로 상단바 위에 "얹는" 방식이고, 오른쪽 링크 묶음
   (.top-header-nav.thn-end: 관리자/마이페이지/로그아웃/추가메뉴, 또는 비회원은
   회원가입/로그인/추가메뉴)을 담는 .col-lg-6는 lg 미만에서 그리드 폭 규칙이
   빠져서 내용물 크기대로 배치됨 -> 항목이 990px 화면 기준 아이콘+글자로
   길어서 390px 폭에 다 안 들어가면 줄바꿈되고(추가메뉴가 2번째 줄로),
   상단바 높이가 늘어나며, 늘어난 만큼 왼쪽 햄버거와 첫 링크가 겹침.
   .header-title 쪽은 상단바 높이가 57px로 고정이라고 가정하고
   margin-top:57px로 자리만 비워두는 구조라, 상단바가 늘어나면 그 아래
   로고를 덮어버림.
   1차 시도(햄버거를 flex 흐름 안으로 옮기고 .col-lg-6에 flex:1 1 auto;
   min-width:0을 줘서 남는 공간만큼 줄어들게 하는 방식)는 실제 폰 폭에서
   테스트해보니 부트스트랩의 `.row>*{flex-shrink:0;width:100%}` 규칙과
   얽혀 컬럼이 내용물 크기(약 428px)로 그대로 유지되고 화면 밖으로
   넘쳐버림 -> 오른쪽 링크들이 아예 안 보이는 문제가 있어 폐기.
   해결(최종): 햄버거는 원래처럼 position:absolute로 왼쪽에 얹어두되
   폭을 44px로 명시하고, 상단바/컨테이너에 그만큼 padding-left를 줘서
   오른쪽 링크 칸이 처음부터 햄버거 자리를 피해서 시작하게 함. 링크 칸은
   flex-shrink 계산에 기대지 않고 width:100%(패딩으로 이미 자리를 뺀
   100%)를 그대로 쓰고, 그 안의 <ul>만 flex + 아이콘만 표시로 줄여서
   한 줄에 다 들어가게 함(아이콘 4개 + 여백을 다 합쳐도 44px 화면
   기준 약 200px 남짓이라 360px 이상에서는 항상 한 줄에 들어감).
   overflow:hidden을 안전장치로 걸어보려 했으나, "추가메뉴" 드롭다운이
   같은 조상(.top-header/.container/.thn-end) 안에 있어서 overflow:
   hidden이 펼쳐진 드롭다운 메뉴까지 잘라버리는 부작용이 있어 걷어냄
   (드롭다운은 그대로 정상 동작해야 하므로). 아이콘만 보이게 글자를
   없앤 것은 원본 마크업은 그대로 두고 CSS font-size 트릭만 사용(<a>는
   font-size:0으로 글자를 접고 아이콘<i>만 원래 크기로 복원). 상단바
   높이를 44px로 고정하고 .header-title의 여백도 같은 44px로 맞춰
   로고가 가려지지 않게 함. title 속성은 head.html.php에 최소한으로
   추가(별도 changelog 기록). */
@media (max-width: 767px) {
    .top-header {
        height: 44px;
    }
    .top-header .container {
        height: 44px;
    }
    .top-header .row {
        height: 44px;
        flex-wrap: nowrap;
    }
    /* 햄버거 버튼: row 왼쪽 끝에 고정 폭(44px)으로 얹음 */
    .top-header-mobile-btn {
        width: 44px;
        left: 0;
        top: 0;
    }
    .top-header-mobile-btn .navbar-toggler {
        width: 44px;
        height: 44px;
        padding: 0;
        line-height: 44px;
    }
    /* 오른쪽 링크 묶음을 담는 칸: 컬럼 자체 크기 계산에 기대지 않고 항상 남은 폭 전체를 쓰되,
       왼쪽에 padding-left:44px로 햄버거 자리를 피함(컬럼 안 내용은 오른쪽 정렬이라
       왼쪽 padding은 그대로 빈 공간이 되어 자연스럽게 햄버거를 피해감) */
    .top-header .col-lg-6.clearfix {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding-right: 6px;
        padding-left: 44px;
    }
    .top-header-nav.thn-end {
        float: none;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
    }
    .top-header-nav.thn-end li {
        float: none;
        flex: 0 0 auto;
        margin-right: 10px;
    }
    .top-header-nav.thn-end li:last-child {
        margin-right: 0;
    }
    /* 관리자/마이페이지/로그아웃/회원가입/로그인/추가메뉴: 글자를 접고 아이콘만 표시 */
    .top-header-nav.thn-end li > a {
        height: 44px;
        line-height: 44px;
        font-size: 0;
        white-space: nowrap;
        padding: 0 4px;
    }
    .top-header-nav.thn-end li > a i {
        font-size: 1.125rem;
        margin-right: 0;
    }
    /* 상단바를 44px 고정으로 만들었으니, 로고 영역 여백도 같은 값으로 맞춰 안 가려지게 함 */
    .header-title {
        margin-top: 44px;
    }
}

/* ===== 메인페이지 "실시간 환율 | 마닐라 날씨" 위젯 (2026-09-30) =====
   plugin/mg_widgets/render.php가 출력하는 마크업 전용 스타일.
   제목은 기존 메인 최신글 박스와 똑같이 .headline-short-alt + <h5>를 그대로
   재사용해서 디자인 톤을 맞췄고(테마 style.css의 파란 밑줄 장식이 그대로 적용됨),
   카드 몸통(.mg-widget-card)만 이 파일에서 새로 정의함. col-lg-6 그리드를 그대로
   써서 모바일(<992px)에서는 부트스트랩 기본 동작으로 알아서 1단으로 쌓임
   (위 "주간/월간 인기게시글" 행과 동일한 방식이라 별도 반응형 CSS 불필요).
   라이트/다크 모드 모두 테마의 기존 색상표(포인트 파랑 #004c86, 강조 빨강 #cc2300,
   다크모드 배경 #2b2b2e/#3c3c3e)에 맞춰 하드코딩(테마 전체가 CSS 변수를 안 씀). */
.mg-widget-card {
    background: #f8f9fa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 18px 20px;
}
.mg-fx-list {
    margin-bottom: 0;
}
.mg-fx-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #e5e5e5;
    font-size: .9375rem;
}
.mg-fx-list li:last-child {
    border-bottom: 0;
}
.mg-fx-label {
    color: #757575;
}
.mg-fx-value {
    font-weight: 700;
    color: #151515;
}
.mg-arrow {
    margin-left: 6px;
    font-size: .8125rem;
}
.mg-arrow.mg-up {
    color: #cc2300;
}
.mg-arrow.mg-down {
    color: #004c86;
}
.mg-arrow.mg-flat {
    color: #959595;
}
.mg-weather-main {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.mg-weather-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
}
.mg-weather-temp-now {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: #151515;
    line-height: 1.2;
}
.mg-weather-desc {
    color: #757575;
    font-size: .875rem;
}
.mg-weather-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: .875rem;
    color: #151515;
}
.mg-weather-detail i {
    color: #959595;
    margin-right: 4px;
    width: 14px;
    text-align: center;
}
.mg-updated {
    margin-top: 12px;
    font-size: .75rem;
    color: #a5a5a5;
    text-align: right;
}
.mg-stale {
    color: #cc2300;
    margin-left: 4px;
}
.mg-empty {
    color: #959595;
    font-size: .875rem;
    padding: 10px 0;
    margin-bottom: 0;
}
body.dark-mode .mg-widget-card {
    background: #2b2b2e;
    border-color: #3c3c3e;
}
body.dark-mode .mg-fx-list li {
    border-bottom-color: #3c3c3e;
}
body.dark-mode .mg-fx-label {
    color: #9aa0a6;
}
body.dark-mode .mg-fx-value {
    color: #f1f1f1;
}
body.dark-mode .mg-weather-temp-now {
    color: #f1f1f1;
}
body.dark-mode .mg-weather-desc {
    color: #9aa0a6;
}
body.dark-mode .mg-weather-detail {
    color: #d5d5d5;
}
body.dark-mode .mg-weather-detail i {
    color: #757575;
}
body.dark-mode .mg-updated {
    color: #757575;
}
body.dark-mode .mg-empty {
    color: #757575;
}
@media (max-width: 575px) {
    .mg-widget-card {
        padding: 14px 16px;
    }
    .mg-weather-detail {
        gap: 6px 14px;
    }
}

/* 데스크톱 nav 다크모드 버튼: 달 아이콘이 Bootstrap nav-link 기본색(어두운 회색)을 상속해 검정 배경에 묻히는 문제 */
@media (min-width:992px) {
    .navbar-nav>li.darkmode-menu>.nav-link .fa-moon {color:#d5d5d5}
}

/* eb최신글(comm004_rank) 닉네임 뒤 기본 사람모양 아이콘 숨김 (PC/모바일 공통) */
.comm004-rank-latest .rank-photo .rank-user-icon { display:none !important; }

/* ===== 모바일 상단바 아이콘 아래 라벨 표시 (2026-10-03) =====
   위 767px 블록이 폭 때문에 글자를 접고(font-size:0) 아이콘만 보여줘서 회원이 아이콘 뜻을 알 수 없었음.
   마크업은 그대로 두고, 링크를 세로 flex(아이콘 위/글자 아래)로 바꿔 10px 라벨을 다시 보이게 함.
   항목당 약 46px라 관리자 로그인(4개)도 360px 폭에 한 줄로 들어감. 높이는 44px 그대로. */
@media (max-width: 767px) {
    .top-header-nav.thn-end li > a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 10px;
        line-height: 1.1;
        padding: 0 3px;
        color: #d5d5d5;
    }
    .top-header-nav.thn-end li > a i {
        font-size: 1rem;
        line-height: 1;
    }
    .top-header-nav.thn-end li > a.dropdown-toggle::after {
        display: none;
    }
}

/* ===== 모바일 로고 확대 (2026-10-03) =====
   로고 아래 영문(MANILA GOGO · NIGHT & TRAVEL)이 작아 읽기 힘들어서 44px -> 60px.
   로고 이미지는 560x120이라 폭 약 280px. 360px 폭 폰에서도 오른쪽 검색 아이콘(right:10px)과 안 겹침.
   헤더 높이(.header-title .container)는 80px 그대로라 세로 여백도 충분함. */
@media (max-width: 767px) {
    .header-title .title-logo img.site-logo {
        height: 60px;
    }
}

/* ===== 내 정보 박스: 포인트 점수 옆 "전환" 알약 버튼 (2026-10-04) =====
   윗줄은 "포인트 - 내역보기", 아랫줄은 [점수] [전환 버튼]. 점수가 길어도(1,234,567) 버튼이 줄바꿈되거나 오른쪽 경험치와 겹치지 않게
   왼쪽 영역을 flex 로 늘리고 경험치 영역은 내용 폭만 쓴다. 사이드바(PC 왼쪽 박스/모바일 오프캔버스)는 같은 스킨이라 한 번에 적용됨. */
.ol-after .member-point { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ol-after .member-point > .width-50 { float: none !important; width: auto !important; }
.ol-after .member-point > .width-50:first-child { flex: 1 1 auto; min-width: 0; }
.ol-after .member-point > .width-50.float-end { flex: 0 0 auto; }
.ol-after .member-point > .clearfix { display: none; }
.ol-after .member-point .mg-point-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.ol-after .member-point .mg-point-row p { margin-top: 0; white-space: nowrap; }
.ol-after a.mg-exch-btn {
    display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
    height: 25px; padding: 0 10px; border-radius: 999px;
    background: #004c86; color: #fff !important; text-decoration: none !important;
    font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
    transition: background-color .15s, box-shadow .15s;
}
.ol-after a.mg-exch-btn i { font-size: 10px; line-height: 1; }
.ol-after a.mg-exch-btn:hover, .ol-after a.mg-exch-btn:focus-visible { background: #0a63ad; box-shadow: 0 2px 6px rgba(0, 76, 134, .45); }
.ol-after a.mg-exch-btn:focus-visible { outline: 2px solid #4da3ff; outline-offset: 2px; }
body.dark-mode .ol-after a.mg-exch-btn { background: #1f6fb5; border: 1px solid #4a9be0; color: #fff !important; }
body.dark-mode .ol-after a.mg-exch-btn:hover, body.dark-mode .ol-after a.mg-exch-btn:focus-visible { background: #2b82cf; box-shadow: 0 2px 8px rgba(74, 155, 224, .45); }
/* 마이홈(내 홈) 모바일/태블릿 정리 - 2026-10-05 (코어/이윰 원본은 그대로, inline 스킨 CSS보다 이기도록 body 접두어) */
@media (max-width: 991px) {
    body .my-home .tab-scroll-category #tab-category .category-list span { padding: 0 14px; }
    body .my-home .tab-scroll-category #tab-category .category-list span a { font-size: 14px; }
    body .my-home .my-introduce { padding-bottom: 78px; }
    body .my-home .my-introduce h5 { font-size: 1.1rem; margin-bottom: 22px; overflow-wrap: anywhere; }
    body .my-home .my-introduce h6 { font-size: 14px; }
    body .my-home .my-navbar {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 10px 6px 10px 118px; text-align: center;
    }
    body .my-home .my-navbar a {
        margin-left: 0; font-size: 13px; line-height: 1.35; word-spacing: 100vw; /* 라벨 위, 숫자 아래 2줄 */
        overflow-wrap: anywhere;
    }
}
@media (max-width: 576px) {
    body .my-home .my-navbar { padding: 8px 4px 8px 86px; }
    body .my-home .my-navbar a { font-size: 12px; }
    body .my-home .tab-scroll-category #tab-category .category-list span { padding: 0 11px; }
    body .my-home .tab-scroll-category #tab-category .category-list span a { font-size: 13px; }
    body .my-home .my-introduce { padding-bottom: 70px; }
    .follow-panel .nav-tabs.follow-tabs { display: flex; flex-wrap: nowrap; }
    .follow-panel .nav-tabs.follow-tabs li { flex: 1 1 0; min-width: 0; width: auto; display: flex; }
    .follow-panel .nav-tabs.follow-tabs li a { flex: 1 1 auto; font-size: 13px; padding: 8px 2px; line-height: 1.35; word-spacing: 100vw; overflow-wrap: anywhere; }
    .follow-panel .tab-pane { padding: 15px; }
}
@media (min-width: 577px) and (max-width: 991px) {
    .follow-panel .nav-tabs.follow-tabs { display: flex; flex-wrap: nowrap; }
    .follow-panel .nav-tabs.follow-tabs li { flex: 1 1 0; min-width: 0; width: auto; display: flex; }
    .follow-panel .nav-tabs.follow-tabs li a { flex: 1 1 auto; font-size: 14px; white-space: nowrap; }
}

/* 모바일/태블릿 사이드바 쪽지·내글반응·스크랩·로그아웃 한 줄 4칸 - 2026-10-05 (inline 스킨 CSS보다 이기도록 body 접두어) */
@media (max-width: 991px) {
    body .ol-after .member-info-btn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    body .ol-after .member-info-btn > .width-70,
    body .ol-after .member-info-btn > .width-30 { display: contents; }
    body .ol-after .member-info-btn > .clearfix { display: none; }
    body .ol-after .member-info-btn .info-btn {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
        width: 100%; min-width: 0; height: 48px; padding: 4px 0; text-align: center;
    }
    body .ol-after .member-info-btn .info-btn strong,
    body .ol-after .member-info-btn .info-btn span { font-size: 12px; line-height: 1.2; white-space: nowrap; }
    body .ol-after .member-info-btn .info-btn.others-btn { padding: 0; line-height: 1.2; font-size: 12px; white-space: nowrap; }
    body .ol-after .member-info-btn .info-btn .alarm-marker { position: absolute; top: 0; left: auto; right: 0; width: 100%; height: 0; }
    body .ol-after .member-info-btn .adm-btn { grid-column: 1 / -1; margin-top: 6px; }
}

/* PC 사이드바에도 쪽지·내글반응·스크랩·로그아웃 한 줄 4칸 - 2026-10-05 (이윰 PC 숨김 규칙 .ol-after .member-info-wrap .member-info .width-70 보다 우선하도록 선택자를 길게) */
@media (min-width: 992px) {
    body .ol-after .member-info-wrap .member-info .member-info-btn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    body .ol-after .member-info-wrap .member-info .member-info-btn > .width-70,
    body .ol-after .member-info-wrap .member-info .member-info-btn > .width-30 { display: contents; }
    body .ol-after .member-info-wrap .member-info .member-info-btn > .clearfix { display: none; }
    body .ol-after .member-info-wrap .member-info .member-info-btn .info-btn {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
        width: 100%; min-width: 0; height: 48px; padding: 4px 0; text-align: center;
    }
    body .ol-after .member-info-wrap .member-info .member-info-btn .info-btn strong,
    body .ol-after .member-info-wrap .member-info .member-info-btn .info-btn span { font-size: 12px; line-height: 1.2; white-space: nowrap; }
    body .ol-after .member-info-wrap .member-info .member-info-btn .info-btn.others-btn { padding: 0; line-height: 1.2; font-size: 12px; white-space: nowrap; }
    body .ol-after .member-info-wrap .member-info .member-info-btn .info-btn .alarm-marker { position: absolute; top: 0; left: auto; right: 0; width: 100%; height: 0; }
    body .ol-after .member-info-wrap .member-info .member-info-btn .adm-btn { grid-column: 1 / -1; margin-top: 6px; }
}

/* 모바일 메뉴(991px 이하): NAVIGATION 줄 삭제, 닫기(X)는 HOME 줄 오른쪽, 라이트모드 아래 배너 */
.navbar-nav>li.mg-nav-banner, .navbar-nav>li.navbar-nav-home .mg-nav-close { display: none; }
@media (max-width: 991.98px) {
    body .navbar-nav>li.navbar-nav-home { position: relative; }
    body .navbar-nav>li.navbar-nav-home .mg-nav-close { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 64px; height: auto; padding: 0; margin: 0; background-position: center; background-size: 16px; opacity: .85; z-index: 5; }
    body .navbar-nav>li.navbar-nav-home > a.nav-link { padding-right: 64px; }
    body .navbar-nav>li.mg-nav-banner { display: block; padding: 0; margin-top: 12px; border: 0; }
    body .navbar-nav>li.mg-nav-banner .ebs-comm004-quick { width: 88%; height: auto; margin: 0 auto; }
    body .navbar-nav>li.mg-nav-banner .ebs-comm004-quick .swiper-slide img { width: 100%; height: auto; }
}

/* 모바일 게시판 목록: 추천순 버튼 (글쓰기 버튼 왼쪽) */
.mg-sort-btn { background: #3a3d46; color: #fff; border: 1px solid #4a4e59; }
.mg-sort-btn:hover, .mg-sort-btn:focus { color: #fff; background: #4a4e59; }
.mg-sort-btn.on { background: #c0392b; border-color: #c0392b; }

/* 댓글쓰기의 "댓글 포인트 안내" 버튼 숨김 (모든 게시판 스킨) */
.cmt-point-info-btn { display: none !important; }

/* 글 보기: 닉네임 옆 회원메모 버튼, 핀 저장/해제 버튼 숨김 (안 쓰는 기능) */
.btn-mbmemo, .board-pin-btn { display: none !important; }

/* 모바일 왼쪽 메뉴: 세로 스크롤바를 오른쪽 -> 왼쪽으로 이동 (스크롤 칸만 rtl, 안쪽 내용은 ltr 유지) */
@media (max-width: 991.98px) {
    body .sidebar-left.show .sidebar-left-content { direction: rtl; }
    body .sidebar-left.show .sidebar-left-content > * { direction: ltr; }
}

/* PC 왼쪽 퀵메뉴(마이페이지~환경설정) 숨김, 오른쪽 마이홈 퀵메뉴는 유지 (2026-10-06) */
body .quick-menu-wrap:has(> .quick-menu-left), body .quick-menu-left { display: none !important; }

/* PC: 왼쪽 퀵메뉴 숨김 후 콘텐츠+오른쪽 퀵메뉴(120px)를 묶어 가운데 정렬 (2026-10-06) */
@media (min-width: 1200px) {
    body:has(.quick-menu-right) .container { position: relative; left: -60px; }
}

/* 위 가운데 정렬 보정: 안쪽(중첩) .container는 다시 이동하지 않음 - 마이홈 겹침 수정 (2026-10-06) */
@media (min-width: 1200px) {
    body:has(.quick-menu-right) .container .container { left: 0; }
}

/* 마이페이지(모바일/태블릿 991px 이하): 상단 버튼 한 줄 유지 + 가로 탭 글자·간격 축소 (2026-10-06)
   탭 메뉴는 게시판 카테고리와 같은 클래스를 써서, 마이페이지 탭(내글반응 링크가 있는 것)만 :has 로 골라 적용 */
@media (max-width: 991.98px) {
    body .my-info .info-title-btn { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
    body .my-info .info-title-btn .btn-e { margin: 0; padding: 0 7px; font-size: 12px; line-height: 30px; height: 30px; white-space: nowrap; flex: 0 0 auto; }
    body .tab-scroll-category:has(a[href*="/mypage/respond.php"]) #tab-category .category-list span { padding: 0 9px; }
    body .tab-scroll-category:has(a[href*="/mypage/respond.php"]) #tab-category .category-list span a { font-size: 13px; }
}

/* 회원 사이드바 가로 메뉴(마이페이지·마이홈·환경설정): 관리자 버튼처럼 파란 바탕 버튼으로 표시 (2026-10-06) */
body .ol-after .scroll-tabs #tab-member-nav a {
    background: #004c86; color: #fff; border: 1px solid #004c86; border-radius: 6px;
    padding: 0 12px; margin: 0 3px; line-height: 34px; height: 36px; font-size: .875rem; font-weight: 600; white-space: nowrap; text-decoration: none;
}
body .ol-after .scroll-tabs #tab-member-nav a:hover,
body .ol-after .scroll-tabs #tab-member-nav a:focus-visible { background: #0a63ad; border-color: #0a63ad; color: #fff; text-decoration: none; }
body.dark-mode .ol-after .scroll-tabs #tab-member-nav a { background: #1f4e8c; border-color: #3d6fb5; color: #fff; }
body.dark-mode .ol-after .scroll-tabs #tab-member-nav a:hover { background: #2b62ad; border-color: #5b8fd6; }

/* 회원 사이드바 가로 메뉴: 화살표 없이 3개 버튼을 한 줄에 같은 폭으로 (스크롤 탭 플러그인 미사용) */
body .ol-after .scroll-tabs { height: auto; overflow: visible; }
body .ol-after .scroll-tabs #tab-member-nav { display: flex; gap: 6px; padding: 8px; border: 1px solid #e5e5e5; }
body.dark-mode .ol-after .scroll-tabs #tab-member-nav { border-color: #30363d; background: #161b22; }
body .ol-after .scroll-tabs #tab-member-nav span { flex: 1 1 0; min-width: 0; display: block; background: transparent; line-height: normal; }
body .ol-after .scroll-tabs #tab-member-nav a { display: block !important; margin: 0; padding: 0 4px; text-align: center; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; }

/* 모바일/태블릿 상단 왼쪽 햄버거 버튼 오른쪽에 "메뉴" 글자 표시 (2026-10-06) */
.mg-menu-label { display: none; }
@media (max-width: 991.98px) {
    body .top-header-mobile-btn .navbar-toggler { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 10px; white-space: nowrap; font-size: 1.6rem; }
    body .top-header-mobile-btn .navbar-toggler .mg-menu-label { display: inline; font-size: 17px; font-weight: 800; line-height: 1; color: #fff; }
}
@media (max-width: 767.98px) {
    body .top-header-mobile-btn { width: 104px; }
    body .top-header .col-lg-6.clearfix { padding-left: 104px; }
}

/* 마이홈(991px 이하): 프로필 사진을 소개 박스 오른쪽 빈 공간으로 이동, 아래 통계 줄의 사진 자리 여백 제거 (2026-10-07) */
.my-home .my-photo-intro { display: none; }
@media (max-width: 991.98px) {
    body .my-home .my-photo { display: none; }
    body .my-home .my-introduce { padding-right: 182px; min-height: 254px; }
    body .my-home .my-photo-intro { display: block; position: absolute; top: 12px; right: 16px; }
    body .my-home .my-photo-intro .photo { overflow: hidden; border: 4px solid #fff; border-radius: 50%; }
    body .my-home .my-photo-intro .photo img { display: block; width: 150px; height: 150px; object-fit: cover; background-color: #fff; }
    body .my-home .my-navbar { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 576px) {
    body .my-home .my-introduce { padding-right: 150px; min-height: 226px; }
    body .my-home .my-photo-intro { top: 10px; right: 12px; }
    body .my-home .my-photo-intro .photo img { width: 124px; height: 124px; }
    body .my-home .my-navbar { padding-left: 4px; padding-right: 4px; }
}

/* 마이홈: '배경변경' 버튼 숨김(모든 화면), 사진 테두리 네모, 상단 배경 차콜 그레이 (2026-10-07)
   PC(992px 이상): 프로필 사진을 상단 배경 박스 전체에 꽉 채움(object-fit:cover, 가운데 기준 잘림).
   .my-photo 는 .my-profile-box 기준 absolute. 글자(.my-introduce)·버튼(.profile-btns, .my-wallpaper 안)·통계 줄이 사진 위에 오도록 z-index 정리,
   흰 글자가 밝은 사진에서도 읽히도록 왼쪽 위 어두운 그라데이션 */
body .my-home .profile-btns a[data-bs-target=".my-home-wallpaper"] { display: none; }
body .my-home .my-photo .photo, body .my-home .my-photo-intro .photo { border-radius: 0; }
body .my-home .my-wallpaper { background: #34373d; }
@media (min-width: 992px) {
    body .my-home .my-profile-box .my-photo { top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
    body .my-home .my-profile-box .my-photo .photo { width: 100%; height: 100%; border: 0; }
    body .my-home .my-profile-box .my-photo .photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; background-color: #34373d; /* 얼굴이 보통 위쪽이라 약간 위 기준 */ }
    body .my-home .my-profile-box .my-photo .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%); pointer-events: none; }
    body .my-home .my-profile-box .my-wallpaper .profile-btns { z-index: 3; }
    body .my-home .my-profile-box .my-introduce { z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
    body .my-home .my-profile-box .my-navbar { z-index: 2; }
}

/* ===== 메인 배너 화면 밀림(CLS) 방지 (2026-10-07) =====
   슬라이더 이미지에 가로세로 크기가 없고 스킨 CSS가 높이를 100%로 두어서, 이미지가 도착하기 전에는 칸 높이가 0이었다가
   도착하면 아래 내용이 갑자기 밀려 내려갔다. 칸의 가로세로 비율을 미리 지정해서 이미지 도착 전에도 같은 높이를 확보한다.
   - 메인 배너(comm004_main_1): PC용 1600x820 / 모바일용(767px 이하) 900x800. 배너 이미지를 다른 비율로 바꾸면 아래 두 숫자도 같이 바꿀 것.
   - 비율이 달라도 스킨의 object-fit:cover 로 채워지고 잘릴 뿐 깨지지 않는다. */
.ebs-comm004-main-in #ebs_comm004_main { aspect-ratio: 1600 / 820; }
@media (max-width: 767.98px) {
    .ebs-comm004-main-in #ebs_comm004_main { aspect-ratio: 900 / 800; }
}
/* 슬라이드가 1장뿐이면 아래 썸네일 줄은 쓰이지 않는데 스크립트가 로드된 뒤에야 숨겨져서 PC에서 한 번 더 밀렸다 → 처음부터 숨김(2장 이상이면 그대로 표시) */
.ebs-comm004-main-in .swiper-thumbs-wrap:not(:has(.swiper-thumbs .swiper-slide + .swiper-slide)) { display: none; }
/* 중간 배너(comm004_main_2, 500x500) / 사이드 배너(comm004_side, 582x770)도 같은 이유로 비율 확보 */
.ebs-comm004-m2 .swiper-m2 { aspect-ratio: 1 / 1; }
.ebs-comm004-side .swiper-side { aspect-ratio: 582 / 770; }

/* PC 상단 오른쪽 메뉴: 추가메뉴를 없애서 끝이 된 항목(로그아웃/로그인)의 오른쪽 여백 제거 (2026-10-08)
   마지막 li 는 폰·태블릿 전용 "내정보"(PC 에서 숨김)라서 끝에서 두 번째 li 가 PC 에서 보이는 마지막 항목이다. */
@media (min-width: 992px) {
    body .top-header-nav.thn-end > li:nth-last-child(2) { margin-right: 0; }
}

/* 회원 계급 랭킹 제목 칸 (2026-10-08)
   다크 모드에서 라이트 모드의 연한 회색(#f5f5f5)이 그대로 나와 너무 하얗게 보였음 → 사이드바 파란 버튼과 같은 짙은 파랑.
   라이트 모드는 스킨 기본값 그대로. 스킨 inline CSS(.ranking-box .ranking-title)보다 선택자가 길어서 !important 없이 우선한다. */
body.dark-mode .ranking-box .ranking-title { background: #1f4e8c; border-color: #3d6fb5; color: #fff; }

/* 가입인사(greet) 글쓰기: 제목 빠른 선택 버튼 (2026-10-11)
   write.skin.html.php 의 .mg-subject-picks. 누르면 제목 칸에 채워지고, 직접 고쳐 쓰면 선택 표시가 풀린다. */
body .mg-subject-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
body .mg-subject-picks .mg-subject-pick { padding: 6px 12px; border: 1px solid #c9ced6; border-radius: 18px; background: #fff; color: #333; font-size: 13px; line-height: 1.4; cursor: pointer; text-align: left; max-width: 100%; }
body .mg-subject-picks .mg-subject-pick:hover { border-color: #1f4e8c; }
body .mg-subject-picks .mg-subject-pick.is-on { background: #1f4e8c; border-color: #1f4e8c; color: #fff; }
body.dark-mode .mg-subject-picks .mg-subject-pick { background: #2a2d33; border-color: #4a4f58; color: #e6e6e6; }
body.dark-mode .mg-subject-picks .mg-subject-pick.is-on { background: #1f4e8c; border-color: #3d6fb5; color: #fff; }

/* 임시 광고제휴 배너: 이미지 교체 후에는 자동으로 적용 해제 (2026-10-12) */
body .ebs-comm004-head img[src*="mg-partner-head-20261012"] { width: 100%; height: 80px; object-fit: contain; }
body [class*="ebs-comm004-"] .swiper:has(img[src*="mg-partner-"]) .swiper-wrapper:not(:has(.swiper-slide + .swiper-slide)) ~ .swiper-button-next,
body [class*="ebs-comm004-"] .swiper:has(img[src*="mg-partner-"]) .swiper-wrapper:not(:has(.swiper-slide + .swiper-slide)) ~ .swiper-button-prev { display: none; }

/* 상단 제휴 배너: 로고와 높이를 맞추고 메뉴 오른쪽 끝에 정렬 (2026-10-12) */
@media (min-width: 992px) {
    body .header-title .header-title-slider:has(img[src*="mg-partner-head-20261012"]) {
        width: 286px;
        height: 88px;
        top: 50%;
        transform: translateY(-50%);
    }
    body .header-title-slider .ebs-comm004-head .swiper-slide:has(img[src*="mg-partner-head-20261012"]) > a { display: block; width: 100%; }
    body .ebs-comm004-head img[src*="mg-partner-head-20261012"] { width: 100%; height: 88px; border-radius: 12px; object-fit: cover; }
}

/* Editor and post divider contrast, light/dark (2026-10-12). */
body .mge-wrap .ck-content hr,
body .board-view-con hr,
body #bo_v_con hr {
    height: 0;
    border: 0;
    border-top: 2px solid #8793a1;
    background: none;
    opacity: 1;
}
body.dark-mode .mge-wrap .ck-content hr,
body.dark-mode .board-view-con hr,
body.dark-mode #bo_v_con hr {
    border-top-color: #8b98a8;
}

/* Compact introductory paragraph and divider (2026-10-12). */
body .mge-wrap .ck-content > p:first-child:has(+ hr, + .ck-horizontal-line),
body .board-view-con > p:first-child:has(+ hr),
body #bo_v_con > p:first-child:has(+ hr) {
    margin-bottom: 0;
}
body .mge-wrap .ck-content > p:first-child + hr,
body .mge-wrap .ck-content > p:first-child + .ck-horizontal-line,
body .board-view-con > p:first-child + hr,
body #bo_v_con > p:first-child + hr {
    margin-top: 8px;
}
body .mge-wrap .ck-content > p:first-child + .ck-horizontal-line hr {
    margin-top: 0;
}

/* ===== 홈 화면에 추가(PWA) 배너·안내창·메뉴 (2026-10-14) =====
   배너는 head.html.php 의 로고 영역 바로 아래, 휴대폰·태블릿에서만 스크립트가 보이게 함(기본 hidden).
   라이트·다크 모드 모두 같은 어두운 띠(#1c1c24)로 표시. */
.mg-pwa-banner[hidden], .mg-pwa-menu[hidden] { display: none !important; }
.mg-pwa-banner { background: #1c1c24; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mg-pwa-banner .mg-pwa-inner { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.mg-pwa-banner .mg-pwa-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 9px; }
.mg-pwa-banner .mg-pwa-text { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.mg-pwa-banner .mg-pwa-text strong { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.mg-pwa-banner .mg-pwa-text span { display: block; font-size: 12px; color: #b5b8c4; }
.mg-pwa-banner .mg-pwa-add { flex: 0 0 auto; border: 0; border-radius: 18px; padding: 8px 12px; background: linear-gradient(135deg, #ff2d7a, #ff8a00); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; line-height: 1.2; }
.mg-pwa-banner .mg-pwa-close { flex: 0 0 32px; width: 32px; height: 32px; margin-right: -6px; border: 0; background: transparent; color: #9aa0b4; font-size: 16px; line-height: 32px; padding: 0; }
@media (max-width: 359px) {
    .mg-pwa-banner .mg-pwa-icon { display: none; }
    .mg-pwa-banner .mg-pwa-add { padding: 8px 10px; font-size: 12px; }
}
.navbar-nav>li.mg-pwa-menu>.nav-link span { margin-left: 5px; }
@media (min-width: 992px) {
    .navbar-nav>li.mg-pwa-menu { display: none !important; }
}
.mg-pwa-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,0.6); }
.mg-pwa-modal .mg-pwa-modal-box { width: 100%; max-width: 360px; background: #1c1c24; color: #e8e9ee; border-radius: 14px; padding: 20px 18px 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.mg-pwa-modal .mg-pwa-modal-title { display: block; font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.mg-pwa-modal ol { margin: 0 0 16px; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.mg-pwa-modal ol li { margin-bottom: 6px; }
.mg-pwa-modal .mg-pwa-modal-ok { display: block; width: 100%; border: 0; border-radius: 10px; padding: 11px 0; background: linear-gradient(135deg, #ff2d7a, #ff8a00); color: #fff; font-size: 15px; font-weight: 700; }

/* 2026-10-14: daily community activity / Karabak coupons */
.mg-coupon,#mg-coupons-page{--mgc-bg:#fff;--mgc-box:#f5f6f8;--mgc-fg:#20252d;--mgc-sub:#626c78;--mgc-line:#dee2e7;--mgc-accent:#c64800;--mgc-green:#14813c;color:var(--mgc-fg)}
body.dark-mode .mg-coupon,body.dark-mode #mg-coupons-page{--mgc-bg:#171c23;--mgc-box:#202630;--mgc-fg:#f0f2f5;--mgc-sub:#acb5c0;--mgc-line:#353d48;--mgc-accent:#ff852d;--mgc-green:#57d881}
#mg-coupons-page{max-width:920px;margin:20px auto 30px;text-align:left}
#mg-coupons-page>h2{font-size:25px;margin:0 0 8px;font-weight:700}
#mg-coupons-page .mgc-page-sub{color:var(--mgc-sub);margin-bottom:22px}
.mg-coupon{background:var(--mgc-bg);border:1px solid var(--mgc-line);border-top:3px solid #ff7626;border-radius:12px;padding:22px;text-align:left;line-height:1.6;margin:18px 0}
.mg-coupon[hidden]{display:none!important}
.mg-coupon .mgc-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mg-coupon .mgc-kicker{font-size:13px;color:var(--mgc-accent);font-weight:700}
.mg-coupon .mgc-heading h3{font-size:20px;margin:6px 0 0;color:var(--mgc-fg);font-weight:700;line-height:1.5}
.mg-coupon .mgc-day{font-size:12px;color:var(--mgc-sub)}
.mg-coupon .mgc-progress{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.mg-coupon .mgc-stat{background:var(--mgc-box);border-radius:8px;padding:16px;min-width:0}
.mg-coupon .mgc-stat>span{display:block;color:var(--mgc-sub);font-size:14px}
.mg-coupon .mgc-stat strong{display:block;font-size:23px;margin:7px 0 12px;color:var(--mgc-fg)}
.mg-coupon .mgc-stat small{font-size:12px;color:var(--mgc-green);display:inline-block}
.mg-coupon .mgc-track{height:7px;border-radius:8px;background:var(--mgc-line);overflow:hidden}
.mg-coupon .mgc-track i{display:block;height:100%;background:var(--mgc-green)}
.mg-coupon .mgc-message{color:var(--mgc-fg);font-size:15px;margin:14px 0}
.mg-coupon .mgc-actions{display:flex;gap:10px;flex-wrap:wrap}
.mg-coupon .mgc-primary,.mg-coupon .mgc-secondary{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:11px 18px;border-radius:7px;font-size:15px;font-weight:700;line-height:1.5;text-decoration:none;cursor:pointer;max-width:100%;white-space:normal}
.mg-coupon .mgc-primary{background:#ff7626;color:#17120e!important;border:1px solid #ff7626}
.mg-coupon .mgc-primary:hover{background:#ff924f;color:#17120e!important}
.mg-coupon .mgc-secondary{background:var(--mgc-bg);color:var(--mgc-fg);border:1px solid var(--mgc-line)}
.mg-coupon button:disabled{opacity:.5;cursor:not-allowed}
.mg-coupon .mgc-ticket{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:20px;border:1px solid #ff7626;border-radius:10px;background:var(--mgc-box);margin:20px 0 12px}
.mg-coupon .mgc-ticket-main,.mg-coupon .mgc-ticket-action{min-width:0}
.mg-coupon .mgc-ticket-action{max-width:300px;display:flex;flex-direction:column;gap:8px}
.mg-coupon .mgc-ticket h4{color:var(--mgc-fg)!important;font-size:20px!important;margin:9px 0!important;font-weight:700}
.mg-coupon .mgc-badge{display:inline-block;color:var(--mgc-accent);font-size:12px;font-weight:700}
.mg-coupon .mgc-reward{font-size:40px;font-weight:800;color:var(--mgc-accent);line-height:1.3}
.mg-coupon .mgc-reward span{font-size:15px;font-weight:400;color:var(--mgc-fg)}
.mg-coupon .mgc-note{font-size:12px;color:var(--mgc-sub);margin:8px 0 0}
.mg-coupon .mgc-foot{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;margin-top:17px;color:var(--mgc-sub);font-size:12px}
.mg-coupon .mgc-foot a,.mg-coupon .mgc-text-link{color:var(--mgc-accent);text-decoration:underline}
.mg-coupon .mgc-foot button{background:none;border:0;color:var(--mgc-sub);text-decoration:underline;min-height:36px;padding:4px;font-size:12px}
.mg-coupon .mgc-rules{border-top:1px solid var(--mgc-line);padding-top:14px;margin-top:12px;color:var(--mgc-sub);font-size:13px}
.mg-coupon .mgc-rules summary{color:var(--mgc-fg);cursor:pointer;min-height:32px}
.mg-coupon .mgc-rules ul{padding-left:20px;margin:10px 0}
.mg-coupon .mgc-rules li{margin:7px 0}
.mg-coupon .mgc-alert{color:var(--mgc-accent);font-size:14px;margin:12px 0 0}
.mg-coupon .mgc-alert:empty{display:none}
#mg-coupons-page .mgc-boards{margin-top:26px;scroll-margin-top:70px}
#mg-coupons-page .mgc-boards h3{font-size:18px;color:var(--mgc-fg)}
#mg-coupons-page .mgc-boards p{font-size:13px;color:var(--mgc-sub)}
#mg-coupons-page .mgc-boards>div{display:flex;flex-wrap:wrap;gap:9px}
#mg-coupons-page .mgc-boards a{padding:10px 13px;border:1px solid var(--mgc-line);border-radius:6px;background:var(--mgc-box);color:var(--mgc-fg);font-size:14px}
@media(max-width:600px){.mg-coupon{padding:15px}.mg-coupon .mgc-heading h3{font-size:18px}.mg-coupon .mgc-progress{gap:9px}.mg-coupon .mgc-stat{padding:12px}.mg-coupon .mgc-stat strong{font-size:20px}.mg-coupon .mgc-ticket{display:block;padding:16px}.mg-coupon .mgc-ticket-action{max-width:none;margin-top:14px}.mg-coupon .mgc-actions>*{flex:1 1 100%}.mg-coupon .mgc-primary,.mg-coupon .mgc-secondary{width:100%}#mg-coupons-page{margin-top:15px}}

/* ===== 게시글 사진 크게 보기 (js/mg-imgview.js, 2026-10-14) ===== */
html.mg-imgview-lock, html.mg-imgview-lock body { overflow: hidden; }
.mg-imgview { display: none; position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.94); }
.mg-imgview.is-open { display: block; }
.mg-imgview-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mg-imgview-wrap img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; -webkit-user-select: none; user-select: none; }
.mg-imgview.is-zoom .mg-imgview-wrap { display: block; overflow: auto; -webkit-overflow-scrolling: touch; }
.mg-imgview.is-zoom .mg-imgview-wrap img { max-width: none; max-height: none; cursor: zoom-out; }
.mg-imgview-close { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 2; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(40,40,40,.85); color: #fff; font-size: 32px; line-height: 46px; text-align: center; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.mg-imgview-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mg-imgview-hint { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 2; padding: 6px 12px; border-radius: 16px; background: rgba(40,40,40,.8); color: #ddd; font-size: 12px; white-space: nowrap; pointer-events: none; }
.mg-imgview.is-zoom .mg-imgview-hint { display: none; }

/* 운영팀 관리 계정 댓글 — 본문을 바꾸지 않는 표시 */
.view-comment .mg-managed-comment-label { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid currentColor; border-radius: 3px; font-size: .8125rem; line-height: 1.5; vertical-align: baseline; white-space: nowrap; color: inherit; }

/* ===== 회원 동영상 화면 가득 크게 보기 (js/mg-videoview.js, 2026-10-18) ===== */
.mg-videoview-bar { margin: -0.4em 0 1.2em; text-align: right; }
.mg-videoview-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 16px; border: 1px solid #c4c9d0; border-radius: 18px; background: #fff; color: #2b2f36; font-size: 12px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.mg-videoview-btn:hover { background: #f2f4f7; border-color: #9aa3ad; }
.mg-videoview-btn:focus-visible { outline: 2px solid #1f4e8c; outline-offset: 2px; }
body.dark-mode .mg-videoview-btn { background: #2a2f38; border-color: rgba(255,255,255,.28); color: #e8eaed; }
body.dark-mode .mg-videoview-btn:hover { background: #343a45; border-color: rgba(255,255,255,.45); }
body.dark-mode .mg-videoview-btn:focus-visible { outline-color: #9cc0ff; }
.mg-videoview-ico { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 2px; box-sizing: border-box; }
html.mg-videoview-lock, html.mg-videoview-lock body { overflow: hidden; }
.mg-videoview-anc { transform: none !important; filter: none !important; backdrop-filter: none !important; perspective: none !important; contain: none !important; will-change: auto !important; isolation: auto !important; z-index: auto !important; }
/* content.css(.mg-stream position:relative !important)가 나중에 읽혀 이기므로 html body 로 우선순위를 올림 */
html body .mg-videoview-on, html body div.mg-stream.mg-videoview-on, .board-view-con figure.media div.mg-stream.mg-videoview-on, #bo_v_con figure.media div.mg-stream.mg-videoview-on { position: fixed !important; inset: 0 !important; z-index: 100000 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; margin: 0 !important; padding: 0 !important; aspect-ratio: auto !important; background: #000; border: 0; }
.mg-videoview-close { display: none; position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 100001; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(40,40,40,.85); color: #fff; font-size: 32px; line-height: 46px; text-align: center; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.mg-videoview-close.is-open { display: block; }
.mg-videoview-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ===== 회원 동영상 상자를 영상 비율에 맞춤 (js/mg-videoview.js fitRatio, 2026-10-19) =====
   세로 영상은 화면 높이 80% 안에서 최대한 크게, 가운데 정렬. content.css(.mg-stream width:100% !important)가
   나중에 읽히므로 선택자 우선순위를 높임. 크게 보기(.mg-videoview-on) 중에는 적용하지 않음. */
html body .board-view-con div.mg-stream.mg-stream-ratio:not(.mg-videoview-on) {
    aspect-ratio: var(--mg-ar, 16 / 9);
    width: min(100%, calc(80vh * var(--mg-ar, 1.7778))) !important;
    width: min(100%, calc(80svh * var(--mg-ar, 1.7778))) !important;
    margin-left: auto; margin-right: auto;
}

/* 게시판 상단 제목·경로 표시 링크 (2026-10-20): 제목을 누르면 현재 게시판 목록, 폰에서는 경로를 제목 아래 한 줄로 */
.page-title-wrap h2 a.mg-title-link {color:inherit;text-decoration:none}
@media (max-width:767px) {
    body .page-title-wrap {height:auto}
    body .page-title-wrap h2 {padding:16px 0 4px}
    body .page-title-wrap .sub-breadcrumb-wrap {position:static;padding:0 0 10px}
    body .page-title-wrap .sub-breadcrumb {font-size:.875rem;line-height:1.6}
    body .page-title-wrap .sub-breadcrumb li {margin-left:0;margin-right:2px}
    body .page-title-wrap .sub-breadcrumb li:before {margin:0 6px 0 4px}
    body .page-title-wrap .sub-breadcrumb a {display:inline-block;padding:4px 0}
}

/* 분류(그룹) 미리보기 다크모드: 댓글 수 흰 바탕 제거, 마우스 올렸을 때 글자가 검게 사라지지 않게 (2026-10-20) */
body.dark-mode .group-latest .group-comment {background:transparent}
body.dark-mode .group-latest a:hover .group-subj, body.dark-mode .group-latest a:hover .group-time {color:#fff}

/* ===== 동영상 설명 줄(에디터 [설명] 버튼의 p.mge-vcap)을 영상 바로 아래로 (2026-10-27) =====
   설명이 있으면 mg-videoview.js 가 figure 에 mg-has-vcap 를 붙이고 [크게 보기]를 설명 아래로 옮김.
   content.css 가 나중에 읽히므로 html body 로 우선순위를 올림. */
html body .board-view-con figure.media:has(+ p.mge-vcap), html body #bo_v_con figure.media:has(+ p.mge-vcap),
html body .board-view-con figure.media.mg-has-vcap, html body #bo_v_con figure.media.mg-has-vcap { margin-bottom: 0; }
html body .board-view-con figure.media:has(+ p.mge-vcap) div.mg-stream, html body #bo_v_con figure.media:has(+ p.mge-vcap) div.mg-stream,
html body .board-view-con figure.media.mg-has-vcap div.mg-stream, html body #bo_v_con figure.media.mg-has-vcap div.mg-stream { margin-bottom: .3em; }
html body .board-view-con p.mge-vcap, html body #bo_v_con p.mge-vcap { margin: .3em 0 .2em; }
html body .board-view-con p.mge-vcap + .mg-videoview-bar, html body #bo_v_con p.mge-vcap + .mg-videoview-bar { margin: 0 0 1.2em; }

/* 댓글 사진 덮개 (2026-10-28): 다크모드에서 덮개(#000 !important, dark_mode.css)가 사진을 완전히 가리던 문제 → 반투명.
   터치 기기(마우스 올리기 없음)는 덮개를 숨기고 사진을 한 번 누르면 바로 확대 (view_comment.skin.html.php 의 클릭 연결). */
body.dark-mode .thumb:hover > .caption-overflow { background-color: rgba(0,0,0,.5) !important; }
@media (hover: none) {
    .view-comment .comment-image .caption-overflow { display: none; }
}
.view-comment .comment-image .thumb > img { cursor: zoom-in; }

/* ===== 메인 유튜브 최신 영상 카드 (plugin/mg_widgets/youtube_render.php, 2026-11-01) ===== */
.mg-yt-card { --yt-bg:#fff; --yt-ink:#1b1d21; --yt-sub:#5f6670; --yt-line:#e3e6ea;
  aspect-ratio:1/1; display:flex; flex-direction:column; gap:10px; padding:14px;
  background:var(--yt-bg); color:var(--yt-ink); border:1px solid var(--yt-line); border-radius:12px; overflow:hidden; }
body.dark-mode .mg-yt-card { --yt-bg:#1a1e24; --yt-ink:#eef0f3; --yt-sub:#9aa3ae; --yt-line:#2c323b; }
.mg-yt-head { display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; }
.mg-yt-chan { color:var(--yt-ink); text-decoration:none; }
.mg-yt-chan:hover { text-decoration:underline; color:var(--yt-ink); }
.mg-yt-new { margin-left:auto; font-size:12px; font-weight:700; color:#fff; background:#e62117; padding:3px 9px; border-radius:20px; }
.mg-yt-thumb, .mg-yt-frame { position:relative; display:block; width:100%; aspect-ratio:16/9; border:0; padding:0; border-radius:8px; overflow:hidden; background:#000; cursor:pointer; flex:none; }
.mg-yt-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.mg-yt-play { position:absolute; left:50%; top:50%; width:68px; height:48px; margin:-24px 0 0 -34px; border-radius:12px; background:rgba(230,33,23,.92); }
.mg-yt-play::after { content:""; position:absolute; left:27px; top:14px; border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent #fff; }
.mg-yt-thumb:hover .mg-yt-play { background:#ff0000; }
.mg-yt-title { color:var(--yt-ink); font-size:17px; font-weight:700; line-height:1.45; text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mg-yt-title:hover { color:var(--yt-ink); text-decoration:underline; }
.mg-yt-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; color:var(--yt-sub); }
.mg-yt-sub { color:#fff; background:#e62117; padding:7px 14px; border-radius:6px; font-weight:700; text-decoration:none; }
.mg-yt-sub:hover { color:#fff; background:#c4170e; }
@media (max-width:991px) { .mg-yt-card { aspect-ratio:auto; } }

/* 글 보기: 댓글목록 제목 옆 '댓글달기' 버튼 (누르면 아래 입력창으로 이동) */
.view-comment .view-comment-heading.mg-cmt-heading {display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.mg-cmt-heading .mg-cmt-go {display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;font-size:13px;font-weight:700;line-height:1;white-space:nowrap;color:#fff;background:#1f4e8c;border:1px solid #1f4e8c;border-radius:6px}
.mg-cmt-heading .mg-cmt-go:hover, .mg-cmt-heading .mg-cmt-go:focus {color:#fff;background:#173d6f;border-color:#173d6f}
body.dark-mode .mg-cmt-heading .mg-cmt-go {border-color:#3d6fb5}
body.dark-mode .mg-cmt-heading .mg-cmt-go:hover, body.dark-mode .mg-cmt-heading .mg-cmt-go:focus {background:#2a62ad;border-color:#3d6fb5}

/* 계급 마크와 닉네임 세로 가운데: NEXON 글꼴 글자가 위로 치우쳐 마크를 1.5px 올림 */
img[src*="/level_icon/"] {position:relative;top:-1.5px}