/*
 * 망고소식 글 상세(/notice/{중분류}/{글}) 전용. Figma 20516:12293(1920 20516:7757, 반응형 20586:250550).
 *   가운데 본문 칼럼 + 오른쪽 목차 기둥(280)이다. 좌측 메뉴·분류 경로 줄·'목록으로' 는 없다(2026-09-22 개편).
 *   1920: 칼럼 720, 간격 100 / 1400: 720, 30 / 1200: 600, 20 / 1000 이하: 칼럼 600(좁으면 좌우 16), 목차 없음.
 *
 * notice.jsp 가 싣는 순서: markdown-content.css → article/articleBody.css(본문의 공통 CSS 누수 되돌림) → article/guideToc.css(목차 스킨) → 이 파일.
 * 글 본문(#guideContent > .md-guide)의 모양은 이 파일이 정하지 않는다. 관리자 미리보기와 같은 markdown-content.css 가 그대로 정한다
 * (제목 위 여백·블록 사이 간격·표·그림 포함). 본문 블록에 덮어쓰기를 쌓지 않는다.
 * 사용가이드 레이아웃(guide.css·new-guide.css)은 싣지 않는다. 그 파일의 #guideContent·.user-guide 규칙이
 * 칼럼 폭·글자 기본값(15px/1/#000)·960px 이하 !important 여백을 덮어써서 이 화면은 따로 선다.
 * 그래서 새 요소는 저마다 font 단축 속성으로 크기·행간을 다 적는다(body 기본값 12px/1.3 을 물려받지 않게).
 * id="guideContent" 와 .md-guide 는 이름을 지킨다 — article.js(로컬 경로 보정)·articleBody.css·목차가 이 이름을 찾는다.
 *
 * 옛 공지 본문 HTML 이 쓰던 guide.css 의 .user-guide .guide-cont 범위 클래스(.link-banner, .desc, .follow-box 등)는
 * 이 화면에 더 걸리지 않는다. markdown-content.css 의 호환 규칙(.sub-tit, .guide-box, .use-list)은 남는다.
 */

/* 목차가 화면을 따라오게(sticky) 한다. 공통 #contents 의 overflow:hidden 은 스크롤하지 않는 스크롤 상자라
   sticky 의 기준을 가로챈다. clip 은 넘친 내용을 똑같이 자르면서 스크롤 상자를 만들지 않는다(사용가이드 상세와 같다). */
.notice-detail-document #contents {overflow:clip;}

/*
   가로 배치. 세 칸 격자의 가운데가 본문이고, 오른쪽 칸 앞머리에 목차(280)가 선다.
   양옆 칸이 같은 1fr 이라 본문은 늘 화면 가운데다 — 시안의 '콘텐츠 padding-left = 간격 + 280' 과 같은 자리다.
   목차가 없는 글(제목 2개 미만)이어도 칸이 남아 본문이 옆으로 밀리지 않고,
   창이 좁아 오른쪽 칸이 280 보다 작아지면 목차가 칸에 맞춰 줄어 가로 스크롤이 생기지 않는다.
   위아래 100: 헤더 아래 100 에서 대표 이미지가 시작하고, 마지막 카드 아래 100 뒤에 푸터가 온다
   (시안 하단 pt100 / 콘텐츠 pb50 + 하단 pb50).
*/
.notice-detail-layout {
    --notice-detail-body:720px;
    /* 간격은 1400 에서 30, 1920 에서 100 이다. 사이 폭은 시안이 없어 창 폭에 비례해 잇는다(1920 이상은 100). */
    --notice-detail-gap:clamp(30px, calc(13.4615vw - 158.46px), 100px);
    display:grid;grid-template-columns:minmax(0,1fr) var(--notice-detail-body) minmax(0,1fr);column-gap:var(--notice-detail-gap);
    box-sizing:border-box;width:100%;padding:100px 0;}
.notice-detail-page #guideContent {grid-column:2;grid-row:1;min-width:0;}
/* 기둥은 격자 줄 높이만큼 늘어나(본문 끝까지) 그 안에서 목차가 따라 내려온다. */
.notice-detail-page .toc-rail {grid-column:3;grid-row:1;width:280px;max-width:100%;min-width:0;}
/*
   목차 상자: 폭 280 안쪽 좌우 20(시안 20552:28826). 늘 펼친 기둥이라 --toc-mode:rail 을 준다 —
   값이 없으면 guideToc.js 가 본문 위 접이식(inline)으로 읽고 목차를 접은 채 시작한다.
   붙는 자리(--toc-top)는 목차 스크립트가 사이트 헤더 아래 끝 + 16 으로 채운다(noticeDetail.js).
   목록이 화면보다 길면 상자 안에서 스크롤한다.
*/
.notice-detail-page .guide-toc {--toc-mode:rail;position:sticky;top:var(--toc-top,140px);box-sizing:border-box;
    max-height:calc(100vh - var(--toc-top,140px) - 32px);margin:0;padding:0 20px;overflow-y:auto;}
/* 제목이 2개 미만이면 guideToc.js 가 목차를 hidden 으로 둔다. 공통 리셋(default.css)의 details{display:block} 이
   브라우저 기본 [hidden] 을 이기므로 여기서 되돌린다. 격자 칸은 그대로라 본문 자리는 바뀌지 않는다. */
.notice-detail-page .guide-toc[hidden] {display:none;}

/* 머리: 대표 이미지 → 제목 → 메타 줄, 사이 30(시안 20552:86922). 머리 끝에서 첫 본문 블록까지도 30 이다. */
.notice-detail-head {display:flex;flex-direction:column;gap:30px;margin:0 0 30px;}
/* 대표 이미지(THUMB_IMG). 높이는 칼럼 폭(720·600)과 상관없이 405 로 두고 가운데를 잘라 채운다.
   없으면 jsp 가 상자를 그리지 않고, 404 면 article.js 가 상자째 숨긴다(.notice-thumb). 배경은 불러오는 동안만 보인다. */
.notice-detail-hero {height:405px;margin:0;border-radius:15px;overflow:hidden;background:#F3F5F8;}
.notice-detail-hero img {display:block;width:100%;height:100%;object-fit:cover;}
/* 제목 → 메타 줄만 gap 에 10 을 더한다(2026-10-08 사용자 요청: 제목 아래 여백 +10 → 601px 이상 30+10=40, 600px 이하 20+10=30).
   flex 항목의 margin 은 gap 에 더해지고 상쇄되지 않는다. 대표 이미지 → 제목 간격은 그대로다. */
.notice-detail-title {margin:0 0 10px;font:700 32px/1.4 'Pretendard',sans-serif;letter-spacing:-.01em;color:#111;text-align:center;
    word-break:keep-all;overflow-wrap:anywhere;}

/* 메타 줄: [분류 | 날짜] 24 [공유하기] 를 가운데에 둔다(시안 20516:8361). 좁아서 넘치면 공유하기가 다음 줄로 내려간다. */
.notice-detail-meta {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 24px;min-height:22px;}
.notice-detail-info {display:flex;align-items:center;gap:16px;margin:0;font:400 14px/1.4 'Pretendard',sans-serif;letter-spacing:0;
    color:#AAACB0;white-space:nowrap;}
/* 분류는 두 낱말(소분류·중분류)을 4 띄워 적는다. 시안은 글자뿐이지만 '목록으로' 가 빠져
   목록으로 돌아갈 길을 여기에 둔다 — 누를 수 있다는 것만 글자색 한 단으로 알린다(평소 날짜와 같은 #AAACB0, hover #3F4250, 시안 20516:12146).
   공통 floating.css 의 전역 'a:link, a:hover, a:visited {color:#333}'(특정도 0,1,1)가 클래스 하나(0,1,0)를 이겨 평소 글자가 #333 으로 진했다.
   그 파일은 다른 화면도 함께 쓰므로 두고, 여기서 상자 이름을 앞에 붙여 한 단 세게 둔다(0,2,0 / hover 0,3,0).
   링크의 전환 효과는 공통 '#contents a'(all .2s, ID 특정도)가 주므로 여기서 따로 적지 않는다. */
.notice-detail-info .notice-detail-cat {display:flex;gap:4px;color:inherit;}
.notice-detail-info .notice-detail-cat:hover {color:#3F4250;}
.notice-detail-sep {flex:none;width:1px;height:11px;background:#E6E7EA;}
/* 공유하기(시안 20516:12103, hover 20552:12531). 아이콘은 hover 에도 색이 같아 한 벌이다.
   키보드 초점은 hover 와 같은 배경에 아래 공통 초점 윤곽선을 더한다. */
.notice-detail-share {display:inline-flex;align-items:center;gap:2px;box-sizing:border-box;height:22px;padding:2px 7px 2px 5px;
    border:0;border-radius:20px;background:none;font:500 13px/1.4 'Pretendard',sans-serif;letter-spacing:0;color:#70777F;
    white-space:nowrap;cursor:pointer;transition:background-color .15s ease-out, color .15s ease-out;}
.notice-detail-share:hover,
.notice-detail-share:focus-visible {background:#F3F5F8;color:#3F4248;}
.notice-detail-share > i {flex:none;width:17px;height:17px;background:url('/common/responsive/images/notice/icon_link-17.svg') center/17px 17px no-repeat;}
/* 키보드 초점(분류 링크·공유하기·목차·이전·다음 카드). 공통 리셋(default.css)이 button:focus 윤곽선을 지우므로
   사용가이드 상세(guideDetail.css)와 같은 망고색 윤곽선을 다시 준다. 마우스로 누를 때는 그리지 않는다. */
.notice-detail-page a:focus-visible,
.notice-detail-page button:focus-visible,
.notice-detail-page summary:focus-visible {outline:2px solid #a38700;outline-offset:3px;}

/*
   이전·다음 카드(시안 20516:8349). 같은 중분류에서 '이전'은 더 오래된 글, '다음'은 더 최근 글이다(2026-09-22 결정).
   두 장이면 칼럼을 반씩 나누고 높이를 맞춘다. 한 장뿐이면 반 폭을 지키고, 다음 글만 있으면 오른쪽에 붙는다.
   카드 모양·hover 는 사용가이드 상세 카드(guideDetail.css .guide-nav-card)와 같은 값이다.
   좁은 화면에서도 세로로 쌓지 않는다(시안 360 도 152 두 장이 나란하다).
*/
.notice-detail-nav {display:flex;gap:24px;margin:95px 0 0;}
.notice-nav-card {display:flex;flex-direction:column;flex:1 1 0;gap:10px;box-sizing:border-box;min-width:0;padding:20px 27px;
    border-radius:15px;background:#F8F8F8;text-decoration:none;}
.notice-nav-card:only-child {flex:0 1 calc((100% - 24px) / 2);}
.notice-nav-card:hover {background:#F1F2F4;}
.notice-nav-card.is-next {margin-left:auto;text-align:right;}
/* 라벨의 중분류 이름('템플릿 업데이트')이 좁은 카드에서 감길 때도 낱말 가운데서 끊지 않는다. */
.notice-nav-label {font:400 16px/1.5 'Pretendard',sans-serif;letter-spacing:-.015em;color:#70777F;word-break:keep-all;}
.notice-nav-card.is-prev .notice-nav-label::before {content:'\2190\00a0';}
.notice-nav-card.is-next .notice-nav-label::after {content:'\00a0\2192';}
.notice-nav-title {font:500 18px/1.5 'Pretendard',sans-serif;letter-spacing:-.015em;color:#20232A;word-break:keep-all;overflow-wrap:anywhere;}

/*
   공통 푸터(1920 시안 20516:12210). default.css 는 푸터를 페이지 맨 아래 absolute 로 두고 #contents 가 자리(padding-bottom)를
   비워 두는데, 이 화면은 no-footer 라 흐름 안에 둔다(사용가이드 홈 .guide-home-footer 와 같은 방식).
   흐르는 로고 띠(목록 폭 300% 이상)가 가로 스크롤을 만들지 않게 자른다. 1000px 이하에서는 공통 모바일 푸터가 된다.
*/
.notice-detail-footer > footer {position:static;overflow:hidden;}

/* 칼럼 720 과 목차 280 이 간격 30 으로 다 들어가지 않는 폭(창 1354px 이하)부터 1200 시안 값이다. 칼럼 600, 간격 20.
   1200 창의 실제 폭은 스크롤바를 뺀 1185 라 목차 칸이 약 272 로 조금 줄어든다(가로 스크롤 없음). */
@media screen and (max-width:1354px) {
    .notice-detail-layout {--notice-detail-body:600px;--notice-detail-gap:20px;}
}

/* 1000px 이하(시안 1000·700): 목차 없이 칼럼 600 하나를 가운데에 둔다. 헤더 아래 50, 마지막 카드 아래 100.
   칼럼보다 좁은 화면은 좌우 16 을 남기고 채운다(시안 360 의 x16 w328). 목차는 서랍으로도 두지 않는다(시안에 버튼이 없다). */
@media screen and (max-width:1000px) {
    .notice-detail-layout {display:block;padding:50px 16px 100px;}
    .notice-detail-page #guideContent {max-width:600px;margin:0 auto;}
    .notice-detail-page .toc-rail {display:none;}
}

/* 700px 이하: 시안 360 프레임의 글자 값(제목 30, 카드 라벨 14·제목 16)이다. 시안은 '360px 부터' 지만 컴포넌트·글자는 700 단계에 붙인다
   (2026-09-22·09-24 결정). 간격(배치)은 아래 600px 에 둔다. 글 본문은 이 폭에서도 공용 markdown-content.css 의 값을 그대로 따른다. */
@media screen and (max-width:700px) {
    .notice-detail-title {font-size:30px;}
    .notice-nav-label {font-size:14px;}
    .notice-nav-title {font-size:16px;}
}

/* 600px 이하: 시안 360 프레임의 배치(간격) 값이다. 601~700 은 700 프레임(머리 30·카드 위 95)을 따른다(2026-09-24 결정). */
@media screen and (max-width:600px) {
    .notice-detail-head {gap:20px;}
    .notice-detail-nav {margin-top:50px;}
    /* 대표 이미지는 높이 405 고정 대신 3:2 로 줄인다(시안 360 의 328×218.67). 기준 폭은 사용가이드·망고소식 홈과 같은 600 이다.
       그 위로 칼럼이 600 에 못 미치는 창(601~631px, 스크롤바 칸이 있으면 646px 까지)은 높이 405 를 지키고 가운데를 잘라 채운다. */
    .notice-detail-hero {height:auto;}
    .notice-detail-hero img {height:auto;aspect-ratio:3 / 2;}
    /*
       공통 규칙은 이 폭에서 로고 띠를 화면의 800%(글자 55px)로 둔다. 칸 하나가 목록 폭의 1/7 이라 화면이 약 470px 보다
       좁으면 칸이 글자보다 좁아져 문구끼리 겹친다. 칸이 글자보다 좁아지지 않게 최소 폭을 둔다(guideHome.css 와 같은 값).
    */
    .notice-detail-footer > footer .footer-inner .new-top .logo-wrapper .logo-list {min-width:3780px;}
}

@media (prefers-reduced-motion:reduce) {
    .notice-detail-share {transition:none;}
}

/* 휴대폰 폭에서는 main 의 스크롤바 자리를 비운다(공지 상세).
   공통 규칙(default.css 의 main{scrollbar-gutter:stable} + scroll.css 의 14px 막대)이 main 오른쪽 14px 을 늘 비워 두므로,
   시안(Figma 360px 프레임: 좌우 여백 16)과 달리 제목·본문이 화면 가운데에서 7px 왼쪽으로 치우쳐 보였다(좌우 여백 16/30).
   휴대폰에서는 막대를 보일 일이 없으니 숨기고 자리도 없앤다. 스크롤은 그대로 된다. 사용가이드 화면(guide.css)과 같은 규칙이다.
   scrollbar-width:none 이 막대를 숨기고(크롬 121+·파이어폭스·사파리 18.2+), 아래 ::-webkit-scrollbar 는 그보다 오래된 크롬·사파리용이다.
   폭 기준은 위 700px 블록과 같다. 공지 홈은 noticeHome.css 에 같은 규칙이 있다(두 화면이 서로의 CSS 를 싣지 않는다). */
@media screen and (max-width:700px) {
    main:has(.notice-detail-page) {scrollbar-width:none;scrollbar-gutter:auto;}
    main:has(.notice-detail-page)::-webkit-scrollbar {width:0;height:0;}
}