@charset "utf-8";
/* mobile-board — 767px 이하 전용 (IGE 정착 ige_landing 목록·글 상세 · 확정 목업 v001 화면 A·B·E·C·D)
이 파일의 모든 규칙은 아래 미디어 블록 한 개 안에 있다. 768px 이상 화면에는 어떤 규칙도 닿지 않는다.
이 스킨 페이지(list·view)에서만 로드된다(write 화면은 로드하지 않는다). */
@media (max-width:767px){
:root{
--mb-teal:#0b4f54;--mb-teal2:#0e6a70;--mb-mint:#e4f1f0;--mb-bg:#f4f8f7;--mb-line:#e3e9ea;
--mb-ink:#13232b;--mb-sub:#5d6c73;--mb-yel:#ffd24a;--mb-bar-top:0px;
}
/* ---------- 페이지 바탕 ---------- */
/* 사이트 공통 CSS 가 게시판 상자(.cont-box)에 좌우 10px 을 준다 — 흰 블록이 화면 끝까지 닿도록 이 페이지에서만 0 으로 */
#container .cont-box.board-wrap:has(#bo_list){padding-left:0 !important;padding-right:0 !important}
#container{background:var(--mb-bg)}
/* ---------- 목록: 위쪽 흰 블록(제목 → 검색 줄 → 카테고리 칩 → 주 구분) — 마크업 순서는 그대로, 보이는 순서만 목업대로 ---------- */
#container #bo_list{display:flex;flex-direction:column;margin:0 0 20px;padding:0;background:transparent}
#container #bo_list>form#fboardlist{display:contents}
#container #bo_list .ige-landing-filters{display:contents}
#container #bo_list #bo_btn_top{display:contents}
/* 제목: 글자 한 줄을 bdi 세 조각으로 나눠 큰 제목 + 보조 문구 두 줄로 보인다(PC 는 한 줄 그대로) */
#container #bo_list .ige-landing-header{order:1;margin:0;padding:20px 18px 8px;border:0;background:#fff}
#container #bo_list .ige-landing-title{margin:0;font-size:inherit;line-height:1.3;font-weight:inherit}
#container #bo_list .ige-landing-title .mb-t1{display:block;font-size:24px;line-height:1.3;font-weight:800;letter-spacing:-.03em;color:var(--mb-ink)}
#container #bo_list .ige-landing-title .mb-dash{display:none}
#container #bo_list .ige-landing-title .mb-t2{display:block;margin-top:6px;font-size:13px;line-height:1.5;font-weight:400;letter-spacing:0;color:var(--mb-sub)}
/* 검색 줄: 분류 select + 입력 + 검색(+글쓰기) 한 줄 44px */
#container #bo_list #bo_btn_top>ul.btn_bo_user{order:2;float:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:8px 18px 4px;list-style:none;background:#fff}
#container #bo_list #bo_btn_top>ul.btn_bo_user>li{float:none;display:block;flex:0 0 auto;width:auto;min-width:0;margin:0;padding:0;background:transparent;text-align:left}
#container #bo_list #bo_btn_top>ul.btn_bo_user>li:first-child{flex:1 0 100%}
#container #bo_list #bo_btn_top>ul.btn_bo_user>li:not(:first-child) :is(a.btn_admin,a.btn_b01,button.btn_more_opt){display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--mb-line);border-radius:12px;background:#fff;color:var(--mb-teal);line-height:1}
#container #bo_list .form-box-group{display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;width:100%;align-items:center}
#container #bo_list .form-box{display:block;flex-grow:0;margin:0;padding:0;min-width:0}
#container #bo_list .form-box:first-child{flex:0 0 84px}
#container #bo_list .form-box:last-child{flex:1 1 0}
#container #bo_list .form-box-inner{display:flex;gap:6px;width:100%;margin:0;padding:0}
#container #bo_list select#form-sfl,#container #bo_list input#form-stx{box-sizing:border-box;height:44px;margin:0;padding:0 10px;border:1px solid var(--mb-line);border-radius:12px;background:#fff;color:var(--mb-ink);font-size:14px;line-height:1.2}
#container #bo_list select#form-sfl{width:100%}
#container #bo_list input#form-stx{flex:1 1 0;min-width:0;width:auto}
#container #bo_list .ip-btn{box-sizing:border-box;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:auto;min-width:44px;height:44px;margin:0;padding:0 14px;border:0;border-radius:12px;background:var(--mb-teal);color:#fff;font-size:13px;font-weight:800;line-height:1}
#container #bo_list .ip-btn.app{background:var(--mb-teal2)}
/* 카테고리 칩: 한 줄 가로 스크롤 알약 40px(끝 칩이 화면 끝에 걸려 밀 수 있음을 알린다) */
#container #bo_list .ige-filter-cat{order:3;display:flex;flex-wrap:nowrap;gap:6px;margin:0;padding:10px 18px 0;overflow-x:auto;overflow-y:hidden;background:#fff;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#container #bo_list .ige-filter-cat::-webkit-scrollbar{display:none}
#container #bo_list .ige-filter-cat .ige-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;box-sizing:border-box;min-height:40px;margin:0;padding:0 15px;border:1px solid var(--mb-line);border-radius:999px;background:#fff;color:var(--mb-sub);font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;text-decoration:none}
#container #bo_list .ige-filter-cat .ige-chip .chip-count{padding:0;background:transparent;color:inherit;font-size:inherit;font-weight:800;line-height:1;opacity:.65}
#container #bo_list .ige-filter-cat .ige-chip:not(.is-active) .chip-count{background:transparent;color:inherit}
#container #bo_list .ige-filter-cat .ige-chip:is(:hover,:focus,:active){background:#fff;border-color:var(--mb-teal);color:var(--mb-teal)}
#container #bo_list .ige-filter-cat .ige-chip.is-active,#container #bo_list .ige-filter-cat .ige-chip.is-active:is(:hover,:focus,:active){background:var(--mb-teal);border-color:var(--mb-teal);color:#fff}
#container #bo_list .ige-filter-cat .ige-chip.is-active .chip-count{background:transparent;opacity:.9}
/* 주 구분: 4칸 한 줄 막대 44px(선택 칸이 BC 청록 · ON 보라 · 공통 회색 · 전체 진한 청록으로 채워짐) */
#container #bo_list .ige-filter-state{order:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:8px 18px 12px;overflow:visible;border:0;border-bottom:1px solid var(--mb-line);background:#fff}
#container #bo_list .ige-filter-state .ige-chip{display:grid;place-items:center;box-sizing:border-box;min-width:0;min-height:44px;margin:0;padding:0 4px;border:1px solid var(--mb-line);border-left-width:0;border-radius:0;background:#fff;color:var(--mb-sub);font-size:13.5px;font-weight:800;line-height:1.2;text-decoration:none}
#container #bo_list .ige-filter-state .ige-chip:first-child{border-left-width:1px;border-radius:12px 0 0 12px}
#container #bo_list .ige-filter-state .ige-chip:last-child{border-radius:0 12px 12px 0}
#container #bo_list .ige-filter-state .ige-chip-bc{color:#0d7680}
#container #bo_list .ige-filter-state .ige-chip-on{color:#6a4a9c}
#container #bo_list .ige-filter-state .ige-chip-common{color:#4a5560}
#container #bo_list .ige-filter-state .ige-chip:is(:hover,:focus,:active){background:#fff}
#container #bo_list .ige-filter-state .ige-chip.is-active,#container #bo_list .ige-filter-state .ige-chip.is-active:is(:hover,:focus,:active){color:#fff;background:var(--mb-teal);border-color:var(--mb-teal)}
#container #bo_list .ige-filter-state .ige-chip-bc.is-active{background:#0d7680;border-color:#0d7680}
#container #bo_list .ige-filter-state .ige-chip-on.is-active{background:#785aa9;border-color:#785aa9}
#container #bo_list .ige-filter-state .ige-chip-common.is-active{background:#4a5560;border-color:#4a5560}
/* Total 줄 */
#container #bo_list #bo_list_total{order:5;float:none;margin:12px 20px 0;padding:0;font-size:12.5px;line-height:1.4;font-weight:500;color:#7b8a90}
#container #bo_list #bo_list_total>span::after{content:" · "}
/* 조건에 맞는 글이 없을 때(주 구분으로 걸렀을 때): 흰 카드 + 안내 두 줄 + 초기화 */
#container #bo_list #ige-filter-empty{order:6;box-sizing:border-box;margin:14px 14px 0;padding:30px 18px 24px;border:1px solid var(--mb-line);border-radius:16px;background:#fff;color:var(--mb-ink);font-size:15px;line-height:1.7;font-weight:800;text-align:center}
#container #bo_list #ige-filter-empty .mb-empty-sub{display:block;margin-top:4px;font-size:14px;font-weight:400;color:var(--mb-sub)}
#container #bo_list #ige-filter-empty .mb-empty-reset{display:inline-grid;place-items:center;box-sizing:border-box;min-height:44px;margin-top:16px;padding:0 22px;border:1.5px solid var(--mb-teal);border-radius:12px;background:transparent;color:var(--mb-teal);font-size:14px;font-weight:800;line-height:1.2;text-decoration:none}
/* ---------- 목록: 카드 ---------- */
#container #bo_list .ige-landing-cards{order:7;display:flex;flex-direction:column;gap:9px;margin:0;padding:12px 14px 4px;overflow:visible}
#container #bo_list .all_chk{padding:0 2px}
#container #bo_list .ige-landing-card,#container #bo_list .ige-landing-card:hover{box-sizing:border-box;width:100%;flex-wrap:nowrap;align-items:flex-start;gap:12px;margin:0;padding:13px 13px 12px;background:#fff;border:1px solid var(--mb-line);border-radius:16px}
#container #bo_list .ige-landing-card:last-child{border-bottom:1px solid var(--mb-line)}
#container #bo_list .ige-landing-card .ige-card-body{order:1;display:block;flex:1 1 0;min-width:0;width:auto;margin:0;padding:0}
#container #bo_list .ige-landing-card .ige-card-img{order:2;flex:0 0 auto;width:76px;height:76px;border-radius:12px;overflow:hidden;background:var(--mb-mint)}
#container #bo_list .ige-landing-card .ige-card-img a{display:block;width:100%;height:100%}
#container #bo_list .ige-landing-card .ige-card-img img{width:100%;height:100%;object-fit:cover;position:relative}
#container #bo_list .ige-landing-card .ige-card-img img::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--mb-mint)}
#container #bo_list .ige-landing-card .ige-card-badges{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}
#container :is(#bo_list .ige-landing-card,#bo_v .ige-view-badges) :is(.ige-card-cat,.ige-card-state){display:inline-block;margin:0;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.4;letter-spacing:0}
#container :is(#bo_list .ige-landing-card,#bo_v .ige-view-badges) .ige-card-cat.ige-chip-teal{background:var(--mb-mint);color:var(--mb-teal2)}
#container :is(#bo_list .ige-landing-card,#bo_v .ige-view-badges) .ige-card-cat.ige-chip-amber{background:#fff1dc;color:#a35a00}
#container :is(#bo_list .ige-landing-card,#bo_v .ige-view-badges) .ige-card-cat.ige-chip-green{background:#e4f3ea;color:#23774a}
#container :is(#bo_list .ige-landing-card,#bo_v .ige-view-badges) .ige-card-cat.ige-chip-ink-700{background:#e9ecef;color:#2a3038}
#container :is(#bo_list .ige-landing-card,#bo_v .ige-view-badges) .ige-card-state.ige-chip-bc{background:rgba(13,118,128,.12);color:#0d7680}
#container :is(#bo_list .ige-landing-card,#bo_v .ige-view-badges) .ige-card-state.ige-chip-on{background:rgba(120,90,169,.14);color:#6a4a9c}
#container :is(#bo_list .ige-landing-card,#bo_v .ige-view-badges) .ige-card-state.ige-chip-common{background:rgba(74,85,96,.1);color:#4a5560}
#container #bo_list .ige-landing-card .ige-card-link{display:block;color:inherit;text-decoration:none}
#container #bo_list .ige-landing-card .ige-card-body h3{margin:0;font-size:15px;line-height:1.42;font-weight:800;letter-spacing:-.015em;color:var(--mb-ink);word-break:keep-all;overflow-wrap:anywhere}
#container #bo_list .ige-landing-card .ige-card-excerpt{margin:5px 0 0;font-size:12.5px;line-height:1.55;color:var(--mb-sub);word-break:keep-all;overflow-wrap:anywhere}
#container #bo_list .ige-landing-card .ige-card-meta{display:flex;align-items:center;gap:0;margin:7px 0 0;font-size:12px;line-height:1.4;color:#7b8a90}
#container #bo_list .ige-landing-card .ige-card-meta i{display:none}
#container #bo_list .ige-landing-card .ige-card-meta span:first-child::after{content:"회 조회"}
#container #bo_list .ige-landing-card .ige-card-meta span+span::before{content:"·";margin:0 3px 0 6px}
#container #bo_list .ige-landing-card .lm-checkbox.chk_box{order:0;position:static;flex:0 0 auto;align-self:center;margin:0 -12px 0 -4px}
#container #bo_list .lm-checkbox.chk_box input[type="checkbox"]+label{display:flex;align-items:center;justify-content:center;width:36px;height:44px;margin:0}
#container #bo_list .lm-checkbox.chk_box input[type="checkbox"]+label span{float:none;top:auto;left:auto}
#container #bo_list .all_chk.chk_box input[type="checkbox"]+label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:var(--mb-sub)}
#container #bo_list .all_chk.chk_box input[type="checkbox"]+label span{float:none}
/* ---------- 목록: 서버 0건(검색 결과 없음)·쪽 번호 ---------- */
#container #bo_list .empty_data{order:7;box-sizing:border-box;width:auto;margin:12px 14px 0;padding:34px 18px;background:#fff;border:1px solid var(--mb-line);border-radius:16px}
#container #bo_list .empty_data p{justify-content:center;font-size:14px;color:var(--mb-sub)}
#container #bo_list .empty_data br{display:none}
#container #bo_list .empty_data .ip-btn{display:flex;align-items:center;justify-content:center;width:120px;height:44px;margin:16px auto 0;border-radius:12px;background:var(--mb-teal);color:#fff;font-weight:800}
/* 관리자 옵션 메뉴(표출순서·선택삭제·선택복사·선택이동) 버튼을 터치 높이 44px 로 */
#container #bo_list .more_opt li{float:none;width:auto;min-width:132px;padding:0}
#container #bo_list .more_opt li button{display:flex;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:0 12px;font-size:13px;line-height:1.2}
#container #bo_list .more_opt li i{float:none;line-height:1}
#container #bo_list .pg_wrap{order:8;float:none;display:flex;justify-content:center;width:auto;margin:0;padding:12px 14px 8px}
#container #bo_list .pg_wrap .pg{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px}
#container #bo_list .pg_wrap .pg_page,#container #bo_list .pg_wrap .pg_current{display:grid;place-items:center;box-sizing:border-box;min-width:40px;height:44px;padding:0 6px;border:0;border-radius:12px;background:transparent;color:var(--mb-sub);font-size:13.5px;font-weight:700;line-height:1;text-indent:0;text-decoration:none}
#container #bo_list .pg_wrap .pg_current{background:var(--mb-teal);color:#fff}
#container #bo_list .pg_wrap .pg_start,#container #bo_list .pg_wrap .pg_prev,#container #bo_list .pg_wrap .pg_next,#container #bo_list .pg_wrap .pg_end{min-width:44px;overflow:visible;background-image:none;font-size:12px}
#container #bo_list .bo_fx{order:9;float:none;margin:0;padding:0 14px 8px}
/* 아래쪽 관리 단추 줄(.bo_fx — 글쓰기·관리자·RSS 가 있을 때만 줄이 생긴다): 44px 단추, 단추가 없으면 높이 0 */
#container #bo_list .bo_fx ul.btn_bo_user{float:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin:0;padding:0;list-style:none}
#container #bo_list .bo_fx ul.btn_bo_user>li{float:none;margin:0;padding:0}
#container #bo_list .bo_fx ul.btn_bo_user>li :is(a.btn_admin,a.btn_b01){display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--mb-line);border-radius:12px;background:#fff;color:var(--mb-teal);line-height:1}
/* ====================== 글 상세 ====================== */
/* ---------- 이동 줄 ---------- */
/* 고정 검색 막대(.fixed-top-search)가 켜지면(스크롤 > 200) 이동 줄을 그 아래에 붙인다. :has() 를 못 쓰는 브라우저에서는 이 줄만 건너뛴다 */
:root:has(.fixed-top-search.on){--mb-bar-top:61px}
/* 사이트 공통 CSS 가 html·body 에 overflow-x:hidden 을 걸어 body 가 스크롤 상자가 되면 sticky 가 화면에 붙지 못한다. 이 줄이 있는 글 상세 화면에서만 body 를 clip(가로 넘침은 똑같이 잘림, 스크롤 상자는 안 됨)으로 바꾼다 */
html:root body:has(.mb-bar){overflow-x:clip}
/* 글 상세를 감싸는 사이트 상자(.cont-box.board-wrap)가 overflow:hidden 이라 이 상자가 스크롤 상자가 되어 sticky 가 화면에 붙지 못한다. 가로만 같은 방식으로 자르고(clip) 세로는 열어 둔다 */
html:root .cont-box.board-wrap:has(.mb-bar){overflow-x:clip;overflow-y:visible}
/* normalize.css 의 [hidden]{display:none} 이 스킨 CSS 보다 나중에 로드되어 같은 우선순위로 이긴다 → #bo_v 로 우선순위를 올린다. PC 에서는 이 블록이 적용되지 않아 hidden 그대로 숨는다 */
#bo_v .mb-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:8px;position:sticky;top:var(--mb-bar-top);z-index:30;box-sizing:border-box;height:46px;padding:0 6px 0 4px;background:#fff;border-bottom:1px solid var(--mb-line)}
.mb-bar a{display:flex;align-items:center;min-height:44px;padding:0 10px;font-size:13px;font-weight:700;line-height:1;color:var(--mb-teal);text-decoration:none;white-space:nowrap}
.mb-bar .mb-bar-back{justify-self:start}
.mb-bar .mb-bar-back::before{content:"";box-sizing:border-box;width:8px;height:8px;margin:0 7px 0 2px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.mb-bar .mb-bar-name{justify-self:center;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:800;color:var(--mb-ink)}
.mb-bar .mb-bar-scrap{justify-self:end;grid-column:3;color:var(--mb-sub)}
/* ---------- 글 제목·메타(흰 블록) ---------- */
#container #bo_v{margin:0;background:transparent}
#container #bo_v>header{margin:0;padding:22px 18px 0;background:#fff}
#container #bo_v #bo_v_title{margin:0;padding:0;font-size:inherit;line-height:inherit}
#container #bo_v #bo_v_title .ige-view-badges{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px}
#container #bo_v #bo_v_title .bo_v_tit{display:block;box-sizing:border-box;margin:0;padding:0;font-size:21px;line-height:1.45;font-weight:800;letter-spacing:-.03em;color:var(--mb-ink);word-break:keep-all;overflow-wrap:anywhere}
#container #bo_v #bo_v_info{margin:0;padding:10px 18px 14px;background:#fff;border-bottom:1px solid var(--mb-line)}
#container #bo_v #bo_v_info .ige-art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;padding:0;border:0;font-size:12.5px;line-height:1.4;font-weight:500;color:var(--mb-sub)}
#container #bo_v #bo_v_info .ige-art-meta>span,#container #bo_v #bo_v_info .ige-art-meta a{display:inline;margin:0;color:var(--mb-sub)}
#container #bo_v #bo_v_info .ige-art-meta i{display:none}
#container #bo_v #bo_v_info .ige-art-meta .mb-m-date{order:1}
#container #bo_v #bo_v_info .ige-art-meta .mb-m-hit{order:2}
#container #bo_v #bo_v_info .ige-art-meta .mb-m-good{order:3}
#container #bo_v #bo_v_info .ige-art-meta .mb-m-cmt{order:4}
#container #bo_v #bo_v_info .ige-art-meta .mb-m-hit::before{content:"· 조회 "}
#container #bo_v #bo_v_info .ige-art-meta .mb-m-good::before{content:"· 추천 "}
#container #bo_v #bo_v_info .ige-art-meta .mb-m-cmt a::before{content:"· 댓글 "}
/* 작성자는 눈에만 숨긴다(값은 DOM 에 그대로) — 이 게시판 글 작성자는 모두 같은 회사 계정이다 */
#container #bo_v #bo_v_info .ige-art-meta .mb-m-name{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#container #bo_v #bo_v_top{margin:0;padding:0;float:none}
#container #bo_v #bo_v_top .bo_v_com{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;float:none;margin:0;padding:0}
#container #bo_v #bo_v_top .bo_v_com>li{float:none;width:auto;margin:10px 0 0;background:transparent}
#container #bo_v #bo_v_top .bo_v_com>li:first-child{display:none}
#container #bo_v #bo_v_top .btn_b01.btn{display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--mb-line);border-radius:12px;background:#fff;color:var(--mb-teal);line-height:1}
#container #bo_v #bo_v_top .more_opt li{float:none;width:auto;min-width:112px;padding:0}
#container #bo_v #bo_v_top .more_opt li a{display:flex;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;min-height:44px;padding:0 12px;font-size:13px}
/* ---------- 본문 카드 ---------- */
#container #bo_v #bo_v_atc{box-sizing:border-box;margin:12px 14px 0;padding:18px 16px 16px;min-height:0;overflow:hidden;background:#fff;border:1px solid var(--mb-line);border-radius:16px}
#container #bo_v #bo_v_share{padding:0}
#container #bo_v #bo_v_share .btn_b03{display:none}
#container #bo_v #bo_v_con{margin:0;min-height:0;overflow:visible;font-size:15.5px;line-height:1.88;color:#1d2f37;word-break:keep-all;overflow-wrap:anywhere}
#container #bo_v #bo_v_con :where(p,div,span,li,ul,ol,h1,h2,h3,h4,h5,h6,blockquote,strong,em,b,i,u,a,font,td,th,figure,figcaption){word-break:keep-all;overflow-wrap:anywhere}
#container #bo_v #bo_v_con a{color:var(--mb-teal2);font-weight:700;text-underline-offset:3px}
/* 본문 중간·끝에 이어진 빈 문단(
— view.skin.php 가 mb-blank 표시를 붙인다)은 한 칸만 남기고, 글 맨 끝에 이어진 빈 문단은 모두 줄인다 — 글자·사진·링크는 하나도 안 바뀐다 */
#container #bo_v #bo_v_con>.mb-blank+.mb-blank{display:none}
#container #bo_v #bo_v_con>.mb-blank:not(:has(~ :not(.mb-blank))){display:none}
#container #bo_v #bo_v_con img{max-width:100%;height:auto}
/* 기존 style.css 는 480px 이하에서 모든 표를 display:block+overflow-x:auto, 칸을 white-space:nowrap 으로 만든다 → 열 2~3개 표도 줄바꿈 없이 밀리므로 여기서 display:table·white-space:normal 로 되돌린다.
/* 표: 열이 4개 이상이면 표 자신이 가로로 밀린다(본문 카드·문서는 안 밀림). 카드 양끝까지 닿고 양옆 옅은 그림자가 이어짐을 알리며 첫 칸이 고정된다.
칸별 선(separate)이라 밀 때 고정 칸 왼쪽에 밀려난 열이 비치지 않는다. 열이 2~3개인 표는 화면 폭에 맞춰 줄바꿈한다.
본문 표 중 일부는 태그에 style="width:100%; border-collapse:collapse"·칸마다 border·헤더 배경·글자색이 직접 들어 있어 보통 규칙이 진다 →
열이 4개 이상일 때 폭·선 모델·칸 선에만 !important 를 쓰고, 헤더 색은 직접 지정이 없는 표(th:not([style]))에만 입힌다 */
#container #bo_v #bo_v_con table.ige-info-table{display:table;box-sizing:border-box;width:100%;margin:16px 0;border:0;border-radius:0;border-collapse:separate;border-spacing:0;font-size:12.5px;line-height:1.5}
#container #bo_v #bo_v_con table.ige-info-table :where(th,td){padding:9px 8px;border:0;border-right:1px solid #cfd9da;border-bottom:1px solid #cfd9da;font-size:12.5px;line-height:1.5;text-align:left;vertical-align:top;white-space:normal;min-width:56px;word-break:keep-all;overflow-wrap:anywhere;color:var(--mb-ink)}
#container #bo_v #bo_v_con table.ige-info-table :where(th,td):first-child{border-left:1px solid #cfd9da}
#container #bo_v #bo_v_con table.ige-info-table tr:first-child>:where(th,td){border-top:1px solid #cfd9da}
#container #bo_v #bo_v_con table.ige-info-table th:not([style]){background:var(--mb-mint);color:var(--mb-teal);font-weight:800}
#container #bo_v #bo_v_con table.ige-info-table tr:nth-child(even) td{background:transparent}
#container #bo_v #bo_v_con table.ige-info-table :where(p,div,li,h1,h2,h3,h4,h5,h6){margin:0;font-size:inherit;line-height:inherit}
#container #bo_v #bo_v_con table.ige-info-table:has(tr>:nth-child(3)){display:block;margin:16px -16px;padding:0 16px;width:auto !important;max-width:none;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:separate !important;border-spacing:0 !important;background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center,linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center,radial-gradient(farthest-side at 0 50%,rgba(11,79,84,.30),rgba(11,79,84,0)) left center,radial-gradient(farthest-side at 100% 50%,rgba(11,79,84,.30),rgba(11,79,84,0)) right center;background-repeat:no-repeat;background-color:#fff;background-size:40px 100%,40px 100%,16px 100%,16px 100%;background-attachment:local,local,scroll,scroll}
#container #bo_v #bo_v_con table.ige-info-table:has(tr>:nth-child(3)) :where(th,td){min-width:72px;overflow-wrap:normal;border-width:0 1px 1px 0 !important;border-style:solid !important;border-color:#cfd9da !important}
/* 고정 첫 칸: 줄을 합친 칸(rowspan)이 있는 표는 이어지는 줄의 첫 DOM 칸이 둘째 열이라, 헤더 첫 칸과 rowspan 첫 칸만 고정한다 */
#container #bo_v #bo_v_con table.ige-info-table:has(tr>:nth-child(3)):not(:has([rowspan])) :where(th,td):first-child,#container #bo_v #bo_v_con table.ige-info-table:has(tr>:nth-child(3)):has([rowspan]) :where(th,td[rowspan]):first-child{position:sticky;left:-16px;z-index:1;min-width:88px;background-color:#fff;font-weight:700}
#container #bo_v #bo_v_con table.ige-info-table:has(tr>:nth-child(3)) :where(th,td):first-child{border-left-width:1px !important}
#container #bo_v #bo_v_con table.ige-info-table:has(tr>:nth-child(3)) tr:first-child>:where(th,td){border-top-width:1px !important}
#container #bo_v #bo_v_con table.ige-info-table:has(tr>:nth-child(3)) th:not([style]):first-child{background-color:var(--mb-mint)}
/* 열 3개 표는 안쪽 표(tbody)를 화면 폭에 맞춰 줄바꿈한다. 열 4개 이상은 칸이 좁아 한 줄에 몇 글자만 들어가는 것을 막으려고 내용 폭으로 두되 600px 에서 멈추고 최소는 화면 폭이라 그 표만 밀린다 */
#container #bo_v #bo_v_con table.ige-info-table:has(tr>:nth-child(3))>tbody:only-child{display:table;width:100%}
#container #bo_v #bo_v_con table.ige-info-table:has(tr>:nth-child(4))>tbody:only-child{width:max-content;min-width:100%;max-width:600px}
/* 일부 글은 표를 로 한 번 더 감싸 놓아 그 상자가 표를 자른다 → 열이 4개 이상인 표를 감싼 상자만 열어 둔다(표 자신이 밀린다) */
#container #bo_v #bo_v_con div:has(>table.ige-info-table tr>:nth-child(3)){overflow:visible !important}
/* 줄에 직접 지정한 배경(어두운 헤더·옅은 줄무늬)은 고정 첫 칸도 같은 색을 따라가게 한다(투명하면 밀린 칸이 비친다) */
#container #bo_v #bo_v_con table.ige-info-table:has(tr>:nth-child(3)) tr[style*="background"]>:where(th,td):first-child{background-color:inherit}
/* ---------- 추천·목록 줄 ---------- */
#container #bo_v .board-like{display:flex;gap:8px;margin:12px 14px 0;padding:0;border:0;text-align:center}
#container #bo_v .board-like #bo_v_act{flex:1 1 0;min-width:0;margin:0;padding:0;text-align:center}
#container #bo_v .board-like #bo_v_act .bo_v_act_gng{display:block}
#container #bo_v .board-like #bo_v_act a{margin:0}
#container #bo_v .board-like #bo_v_act :is(a,span).bo_v_good{display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:0 10px;line-height:1.2;font-size:14px;font-weight:800}
#container #bo_v .board-like #bo_v_act a.bo_v_good{border:1.5px solid var(--mb-teal);border-radius:14px;background:#fff;color:var(--mb-teal)}
#container #bo_v .board-like #bo_v_act span.bo_v_good{border:0;background:transparent;color:var(--mb-sub);font-weight:700}
#container #bo_v .board-like #bo_v_act .bo_v_good .material-symbols-outlined,#container #bo_v .board-like #bo_v_act .bo_v_good .good-ico{display:none}
#container #bo_v .board-like #bo_v_act .bo_v_good strong{font-weight:800;color:var(--mb-teal2)}
#container #bo_v .board-like #bo_v_act span.bo_v_good strong{color:var(--mb-ink)}
#container #bo_v .board-like #bo_v_act .bo_v_good>span:not(.sound_only){display:none}
#container #bo_v .board-like #bo_v_act :is(a,span).bo_v_good::before{content:"추천"}
#container #bo_v .board-like>a.btn{display:flex;align-items:center;justify-content:center;gap:7px;flex:1 1 0;box-sizing:border-box;width:auto;height:48px;margin:0;padding:0 10px;border:1.5px solid transparent;border-radius:14px;background:var(--mb-mint);color:var(--mb-teal);font-size:14px;font-weight:800;line-height:1}
#container #bo_v .board-like>a.btn::after{content:"목록";content:"목록" / ""}
/* ---------- 첨부·링크 / 이전글·다음글 / 댓글 ---------- */
#container #bo_v .board-view-filelink{margin:12px 14px 0}
#container #bo_v .bo_v_nb{margin:14px 14px 0}
#container #bo_v .bo_v_nb li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:52px;padding:8px 0;border:0;border-top:1px solid var(--mb-line);font-size:13px}
#container #bo_v .bo_v_nb li:last-child{border-bottom:1px solid var(--mb-line)}
#container #bo_v .bo_v_nb .nb_tit{padding:0;font-size:12px;font-weight:800;color:var(--mb-teal2)}
#container #bo_v .bo_v_nb .nb_tit i{display:none}
#container #bo_v .bo_v_nb li a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.45;font-weight:600;color:var(--mb-ink)}
#container #bo_v .bo_v_nb .nb_date{float:none;font-size:12px;color:var(--mb-sub)}
#container #bo_v .cmt_btn{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;width:calc(100% - 28px);min-height:48px;margin:12px 14px 0;padding:0 16px;border:1px solid var(--mb-line);border-radius:16px;background:#fff;font-size:14px;text-align:left}
#container #bo_v .cmt_btn span.total{margin:0;color:var(--mb-teal2)}
#container #bo_v .cmt_btn span.total::after{display:none}
#container #bo_v .cmt_btn b{font-size:14px;color:var(--mb-ink)}
#container #bo_v .cmt_btn span.cmt_more{float:none;margin:0}
#container #bo_v #bo_vc_empty{margin:0;padding:16px 0 6px !important;font-size:13px;color:var(--mb-sub);text-align:center}
#container #bo_v #bo_vc{margin:8px 14px 0;padding:0}
/* [2026-10-19 F-MBC-001] 「댓글 N건」 링크 이동 자리 — 전역 scroll-padding-top 61 + 이동 줄 46 + 여유 8 = 도착 자리 115 */
#container #bo_v #bo_vc{scroll-margin-top:54px}
#container #bo_v #bo_vc>article{display:flex;align-items:flex-start;gap:10px;box-sizing:border-box;margin:8px 0 0;padding:12px 14px;background:#fff;border:1px solid var(--mb-line);border-radius:16px}
#container #bo_v #bo_vc>article::after{display:none}
#container #bo_v #bo_vc>article header{margin:0;padding:0}
#container #bo_v #bo_vc>article .pf_img{flex:0 0 auto;float:none;margin:0}
#container #bo_v #bo_vc>article .pf_img img{width:36px;height:36px}
#container #bo_v #bo_vc>article .cm_wrap{flex:1 1 0;min-width:0;float:none;width:auto;max-width:none}
#container #bo_v #bo_vc>article .cmt_contents{padding:4px 0 0;font-size:14px;line-height:1.7;color:var(--mb-ink);word-break:keep-all;overflow-wrap:anywhere}
#container #bo_v #bo_vc_w{margin:10px 14px 0;padding:0}
#container #bo_v #bo_vc_w textarea#wr_content{box-sizing:border-box;width:100%;height:88px;padding:10px 12px;border:1px solid var(--mb-line);border-radius:12px;background:#fff;font-size:14px}
#container #bo_v #bo_vc_w .btn_submit,#container #bo_v #bo_vc_w .ip-btn.app{position:static;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:46px;margin:6px 0 0;padding:0 14px;border:0;border-radius:12px;background:var(--mb-teal);color:#fff;font-size:14px;font-weight:800}
/* ---------- 글 아래 목록(글 상세 안) — 목록 화면과 같은 규격, 글과 간격만 둔다 ---------- */
#container #bo_v~#bo_list{margin-top:20px}
}