/* * 사용가이드 상세 전용 스킨. Figma 20192:106359(반응형 섹션, 2026-09-22 새 시안) 기준. * 1400(19596:55804) : '하단' padding-left 330 + 본문 행 padding 0 50 50 50. 메뉴 331(오른쪽 선 1px 포함)이 본문 행과 * 1px 겹쳐 본문 시작선이 380 이다. 본문(채움) + 간격 20 + 목차 280 + 오른쪽 50. * 1200(20392:53003) : 같은 구조에서 본문만 470 으로 줄어든다. * 1000(20392:53448) / 700(20418:55657) / 360(20418:55822) : 메뉴·목차를 서랍으로 수납한다(아래 1000px 이하). * 1400 보다 넓은 프레임은 없다. 넓은 화면은 1400 구조를 그대로 잇고 본문만 940 에서 멈춘다. * 좌측 메뉴 '안쪽' 값과 메뉴 검색창은 guide.css, 목차 글자·선은 guideToc.css 가 진다. * 이 파일은 자리·간격과 상세에만 있는 조각(분류 경로·제목·최종 수정일·이전/다음)을 진다. * 글 본문(#guideContent > .md-guide)의 모양은 이 파일이 정하지 않는다. 관리자 미리보기와 같은 markdown-content.css 가 그대로 정하고 * (제목 위 여백·블록 사이 간격·표·그림 포함), articleBody.css 는 공통 CSS 누수만 되돌린다. 본문 블록에 덮어쓰기를 쌓지 않는다. */ /* overflow:hidden이 목차의 스크롤 기준을 가로채지 않도록 main만 스크롤 컨테이너로 둔다. */ .guide-detail-document #contents {overflow:clip;} .user-guide.guide-detail-page { /* 메뉴 폭과 '메뉴~본문 간격'을 나눠 둔다. 한 값에 합쳐 두면 메뉴를 바꾼 것인지 간격을 바꾼 것인지 diff 로 읽히지 않는다. --guide-detail-left 는 둘의 합에서 겹치는 구분선 1px 을 뺀 값이다(331 - 1 + 50 = 380). */ --guide-detail-menu:331px; --guide-detail-gap:50px; --guide-detail-left:calc(var(--guide-detail-menu) - 1px + var(--guide-detail-gap)); /* 목차는 1200 이상에서 시안대로 280 이다(100vw - 920 이 1200 에서 280). 1200 아래로는 그대로 두면 본문이 300 밑으로 내려가 카드·표가 삐져나온다. 목차를 190 까지 줄여 받아 그 구간을 메운다. 단을 나누지 않고 clamp 로 이어 폭을 줄이는 동안 본문 폭이 튀지 않게 한다. */ --guide-detail-toc:clamp(190px, calc(100vw - 920px), 280px); /* 오른쪽 = 목차 + 본문~목차 간격 20 + 오른쪽 여백 50. */ --guide-detail-right:calc(var(--guide-detail-toc) + 70px); /* 넓은 화면에서도 본문은 940(예전 1920 시안의 본문 폭)을 넘지 않는다. 목차는 늘 오른쪽 50 에 서므로 남는 폭은 본문과 목차 사이가 먹는다. */ --guide-detail-body:940px; width:100%; max-width:1920px; } /* 고정 검색 바는 좌측 메뉴 폭만 사용한다. 본문 위에는 별도의 가로 바를 두지 않는다. */ .guide-detail-page .guide-top {height:0;border:0;pointer-events:none;} .guide-detail-page .guide-top .inner {background:none;} /* 컨테이너(331 / padding 50·0·50·30 / gap 20 / 구분선)는 guide.css 의 공용 규칙이 진다. 여기서는 폭만 이 화면의 변수로 받고, 고정 바 안이라 클릭을 받도록 되돌린다. */ .guide-detail-page .guide-top .lnb-wrap {width:var(--guide-detail-menu);pointer-events:auto;} /* 메뉴 안 검색창(.guide-drawer-search / .guide-drawer-search-field)은 홈 서랍과 함께 쓰므로 guide.css 로 옮겼다(2026-09-22). */ /* 본문 줄. 세로는 위아래 50('하단' padding-top 50, 본문 행 padding-bottom 50). main 이 스크롤바 자리(14px)를 늘 비워 두므로 실제 본문은 시안보다 그만큼 좁다(1400 에서 670 → 656, 1200 에서 470 → 456). 오른쪽 여백이나 목차를 줄여 메우지 않고 받아들인 차이다. */ .guide-detail-page #guideContent.guide-cont, .guide-detail-page #guideContent.guide-cont.main-content {box-sizing:border-box;width:100%;padding:50px var(--guide-detail-right) 50px var(--guide-detail-left) !important;} /* 넓은 화면에서 본문이 940 을 넘어 자라지 않게 막는다. 목차는 기둥이라 제외한다. */ .guide-detail-page #guideContent > *:not(.toc-rail) {max-width:var(--guide-detail-body);} /* 대분류 대표 글·목록(majorMain → #guideContent.main-content, 본문 .guide-main / .guide-index)에는 목차가 없다(guideToc.js 가 만들지 않는다). 그런데도 오른쪽 목차 칸(목차 190~280 + 70)을 비워 두면 1001~1400 에서 카드가 99~202 로 찌그러진다. 칸을 없애 오른쪽 여백 50 만 남긴다. 본문 상한도 상세 글의 940 이 아니라 랜딩 카드 자신의 1040(markdown-content.css UG011 — 310 세 장 + 사이 55, 세로 구분선 right -28)으로 둔다. 940 이면 1451px 부터 카드 사이가 5 이하로 붙고 구분선이 옆 카드 안에 그려진다. 대분류 랜딩 전용 새 시안은 없다(2026-09-24). 변수만 이 상자에서 덮는다 — 위 padding(!important)과 자식 max-width 가 그대로 이 값을 읽는다. 1000px 이하는 수납 규칙이 좌우·상한을 다시 정해 이 값을 쓰지 않는다. */ .guide-detail-page #guideContent.main-content {--guide-detail-right:50px;--guide-detail-body:1040px;} /* 제목 → 본문 간격은 이 상자의 margin-bottom 이 정한다. h1 이 이 상자의 외아들이라 h1 의 margin-bottom 은 이 값과 상쇄되어 큰 쪽만 남는다 — h1 쪽에 주면 안 먹는다. 시안 20 에 2026-10-08 사용자 요청(제목 아래 여백 +10)을 더해 30. */ .guide-detail-page #guideContent .tit-box {padding:0;margin:0 0 30px;} /* 분류 경로 줄(브레드크럼 19596:56203). 1000px 이하에서는 이 줄이 그대로 수납 바가 되고 양쪽 버튼이 함께 선다(시안 20418:56307). */ .guide-detail-page .guide-inpage-bar {display:flex;align-items:center;gap:16px;} .guide-detail-page .guide-inpage-path {flex:1 1 auto;min-width:0;} .guide-detail-page #guideContent .guide-path {display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;margin:0;padding:0;font:400 14px/1.4 'Pretendard',sans-serif;letter-spacing:0;} /* 세 칸 모두 State=Enabled(Regular #AAACB0)다. 마지막 칸도 강조하지 않는다 — 텍스트 버튼 세트(19504:41152)의 Selected(Medium #3F4250)는 이 화면에서 쓰지 않는다. JSP 의 li.curr 는 남아 있지만 여기서 모양을 주지 않는다. */ .guide-detail-page #guideContent .guide-path li {display:flex;align-items:center;min-width:0;max-width:100%;width:auto;margin:0;padding:0;color:#AAACB0;} .guide-detail-page #guideContent .guide-path li::after {content:none;} .guide-detail-page #guideContent .guide-path li + li::before {content:'';flex:none;width:9px;height:13px;margin-right:10px;background:url('/common/responsive/images/guide/detail/breadcrumb-arrow.svg') center/9px 13px no-repeat;} .guide-detail-page #guideContent .guide-path li a {font:inherit;letter-spacing:0;color:#AAACB0;transition:color .1s ease-out;} .guide-detail-page #guideContent .guide-path li a:hover {color:#3F4250;} .guide-detail-page #guideContent .guide-path li > span {overflow-wrap:anywhere;} /* 제목(H1). 콘텐츠 프레임(20192:106877)은 gap 50 으로 분류 경로 / 본문 묶음(H1~) / 최종 수정일 / 이전·다음 카드를 쌓지만, 제목 위 여백은 2026-10-09 사용자 요청으로 10 으로 줄였다(모든 폭, 예전 50·1000px 이하 --guide-detail-head). */ .guide-detail-title {margin:10px 0 0;font-family:'Pretendard-Bold','Pretendard',sans-serif;font-size:32px;font-weight:700;line-height:1.4;letter-spacing:-.01em;color:#111;word-break:keep-all;overflow-wrap:anywhere;} /* 목차 기둥(인페이지 네비게이션 19596:56263). 본문 줄 위아래 50 안에서 오른쪽 50 에 서고, 본문과는 20 떨어진다. 글자·선·선택 표시는 guideToc.css 가 진다. 여기서는 자리(기둥·sticky·최대 높이)와 상자 여백만 둔다. */ .guide-detail-page .toc-rail {display:block;position:absolute;top:50px;bottom:50px;right:50px;width:var(--guide-detail-toc);pointer-events:none;} .guide-detail-page .toc-rail:has(> [hidden]) {display:none;} /* 시안 상자는 padding 0 20(위아래 0)이라 '목차' 윗선이 분류 경로 윗선과 같은 높이다. */ .guide-detail-page .guide-toc {--toc-mode:rail;position:sticky;top:var(--toc-top,140px);z-index:auto;box-sizing:border-box;max-height:calc(100vh - var(--toc-top,140px) - 32px);margin:0;padding:0 20px;overflow-y:auto;border:0;border-radius:0;background:none;pointer-events:auto;} /* 최종 수정일 (Figma 19981:43348). 콘텐츠 프레임(20192:106877)이 gap 50 으로 본문 / 최종 수정일 / 이전·다음 카드를 쌓는다(1000px 이하는 30). 본문의 마지막 요소는 margin-bottom 이 0 이라 여기 margin-top 이 곧 그 간격이다. */ .guide-detail-page .guide-detail-updated {margin:50px 0 0;font:400 14px/1.4 'Pretendard',sans-serif;letter-spacing:0;color:#AAACB0;} /* 이전 / 다음 가이드 (Figma 19981:43299, 1200 20392:53073). gap 24 에 두 카드가 반씩 나눈다(1400 323 / 1200 223). 한쪽만 있을 때도 두 장일 때의 반폭과 자리를 지킨다(예전 시안 주석 20048:43440 '가로 길이와 위치 고정'). 그래서 다음 글만 있으면 margin-left:auto 로 오른쪽 반에 붙인다. 높이는 시안이 '허그'라 따로 정하지 않는다. 20 + 라벨 24 + 10 + 제목 27 + 20 = 101 이 저절로 나온다. */ .guide-detail-page .guide-detail-nav {display:flex;gap:24px;margin:50px 0 0;} .guide-detail-page .guide-nav-card {display:flex;flex-direction:column;flex:0 0 calc((100% - 24px) / 2);gap:10px;box-sizing:border-box;min-width:0;padding:20px 27px;border-radius:15px;background:#F8F8F8;text-decoration:none;transition:background-color .15s ease-out;} .guide-detail-page .guide-nav-card:hover {background:#F1F2F4;} .guide-detail-page .guide-nav-next {margin-left:auto;text-align:right;} .guide-detail-page .guide-nav-label {font:400 16px/1.5 'Pretendard',sans-serif;letter-spacing:-.015em;color:#70777F;} .guide-detail-page .guide-nav-prev .guide-nav-label::before {content:'\2190\00a0';} .guide-detail-page .guide-nav-next .guide-nav-label::after {content:'\00a0\2192';} .guide-detail-page .guide-nav-title {font:500 18px/1.5 'Pretendard',sans-serif;letter-spacing:-.015em;color:#20232A;word-break:keep-all;overflow-wrap:anywhere;} .guide-detail-page a:focus-visible,.guide-detail-page button:focus-visible,.guide-detail-page summary:focus-visible {outline:2px solid #a38700;outline-offset:3px;} /* 넓은 화면의 분류 경로 줄에는 버튼이 없다. 수납 바의 버튼은 1000px 이하에서만 나온다. */ @media screen and (min-width:1001px) { .guide-detail-page .guide-inpage-bar > .guide-nav-btn {display:none;} } /* ── 1000px 이하 : 수납 ───────────────────────────────────────────── 시안 1000(20392:53448) / 700(20418:55657) / 360(20418:55822). 좌측 메뉴와 목차는 서랍으로 들어가고(guideDrawer.css), 분류 경로 줄이 화면에 붙는 바가 된다. 바 : 높이 59 = 위아래 12 + 버튼 34 + 아래 선 1. 좌우 여백은 본문과 같다(1000:50 / 700:30 / 360:16) 본문 : 대분류 대표 글·목록은 바 아래로 50(360 에서는 16) 띄운다('하단' 프레임 padding-top, --guide-detail-head). 글 상세의 제목(H1)은 2026-10-09 요청으로 바 아래 10 만 띄운다(모든 폭 같은 값). 콘텐츠 열의 간격(본문 / 최종 수정일 / 카드)은 50 에서 30 으로 준다. */ @media screen and (max-width:1000px) { .user-guide.guide-detail-page {width:100%;--guide-detail-right:0px;--guide-detail-edge:50px;--guide-detail-head:50px;} /* 고정 바는 자리를 잃고, 그 안의 메뉴 상자만 서랍이 된다. 서랍·시트 안쪽 여백과 오른쪽 구분선 없애기는 홈과 함께 guide.css 가 진다. */ .guide-detail-page .guide-top {position:static;height:0;border:0;background:none;} .guide-detail-page .guide-top .inner {display:block;width:100%;max-width:none;padding:0;background:none;} /* 옛 모바일 메뉴 규칙(new-guide.css 960px)이 메뉴 목록을 감춘다. 서랍 안에서는 늘 보여야 한다. */ .guide-detail-page .lnb-wrap #guideMenu {display:block;} /* 옛 모바일 메뉴의 닫기(X) 버튼은 쓰지 않는다. 시안에 없고, 서랍은 딤을 누르거나 Esc 로 닫는다. */ .guide-detail-page .lnb-wrap .closeGuideMenu {display:none;} /* 서랍이 붙기 전(번들을 기다리는 첫 화면)에는 메뉴·목차를 감춘다. 시안은 처음부터 버튼으로만 연다. 그대로 두면 메뉴는 높이 0 인 고정 바 밖으로 흘러 수납 바·제목 위에 겹치고, 목차는 제목 아래에 잠깐 선다. 붙으면 컴포넌트가 data-drawer 를, 기본 구현이 is-fallback 을 달아 이 규칙에서 빠진다. */ .guide-detail-page .lnb-wrap:not([data-drawer]):not(.is-fallback), .guide-detail-page .guide-toc:not([data-drawer]):not(.is-fallback) {display:none;} .guide-detail-page #guideContent.guide-cont, .guide-detail-page #guideContent.guide-cont.main-content {padding:0 var(--guide-detail-edge) 50px !important;} .guide-detail-page #guideContent > *:not(.toc-rail) {max-width:none;} /* 수납 바. 좌우 여백 밖까지 흰 바탕을 늘려 본문이 바 밑으로 지나가게 한다. */ .guide-detail-page .guide-inpage-bar {position:sticky;top:calc(var(--header-height) + var(--header-top-height) + var(--top-banner-height));z-index:3;box-sizing:border-box;min-height:59px;margin:0 calc(-1 * var(--guide-detail-edge));padding:12px var(--guide-detail-edge);border-bottom:1px solid #E6E7EA;background:#fff;} /* 스크롤 중에는 사이트 헤더가 첫 줄만 남는다(new-header.css 와 같은 기준). */ .scrolling .guide-detail-page .guide-inpage-bar {top:var(--header-height);} /* 대분류 대표 글·목록(main-content)의 바에는 메뉴 버튼만 있다. 제목이 없으므로 제목 자리만큼 본문을 띄운다. */ .guide-detail-page #guideContent.main-content .guide-inpage-bar {margin-bottom:var(--guide-detail-head);} /* 경로는 한 줄로 둔다. 앞 칸(사용가이드·대분류)은 줄지도 꺾이지도 않고, 남는 폭은 마지막 칸만 받아 넘치면 … 로 자른다(시안 브레드크럼 19504:41144 — 앞 칸 shrink-0, 마지막 칸만 채움). */ .guide-detail-page #guideContent .guide-path {flex-wrap:nowrap;min-width:0;} .guide-detail-page #guideContent .guide-path li:not(:last-child) {flex:none;white-space:nowrap;} .guide-detail-page #guideContent .guide-path li:last-child {min-width:0;} .guide-detail-page #guideContent .guide-path li:last-child > * {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} /* 목차는 오른쪽에서 나오는 서랍이 된다. 패널 위 30, 좌우 28(시안 20460:56951). 글자는 기둥일 때와 같다. */ .guide-detail-page .toc-rail {display:contents;} .guide-detail-page .guide-toc {--toc-mode:drawer;max-height:none;padding:30px 28px;} /* 콘텐츠 열 간격 30(시안 20392:53456 / 20418:55661 / 20418:55826). 카드 사이는 넓은 화면과 같은 24 라 카드가 1000 에서 438, 700 에서 308 이다. */ .guide-detail-page .guide-detail-updated, .guide-detail-page .guide-detail-nav {margin-top:30px;} } /* ── 700px 이하 : 시안 360 프레임 단계 ─────────────────────────────── 시안 주석(수납 바 20418:56377 / H1 20418:55834)은 목차 숨김, 브레드크럼 '···' 을 '360px 일 때부터'로 적었지만, 2026-09-22 사용자 결정으로 이 화면은 하단 시트 전환과 같은 700px 에 붙인다. 360 프레임의 머리(제목 30·바 gap 8)와 카드 글자(14/16)·최종 수정일(12)도 함께 여기 둔다. 컴포넌트·글자만 700 단계이고, 배치 값 — 좌우 여백(30 → 16), 바 → 제목 간격(50 → 16) — 은 시안 프레임대로 360px 에 둔다(2026-09-24 결정). 글 본문은 이 폭에서도 공용 markdown-content.css 의 값을 그대로 따른다. */ @media screen and (max-width:700px) { .user-guide.guide-detail-page {--guide-detail-edge:30px;} /* 목차(인페이지 네비게이션)는 쓰지 않는다. 버튼 하나가 빠진 바는 메뉴 버튼과 경로 사이가 8 이다(20418:56378). */ .guide-detail-page .guide-inpage-bar {gap:8px;} .guide-detail-page .guide-inpage-bar > .guide-inpage-toc {display:none;} /* 경로 가운데 칸(대분류)을 ··· 로 접는다(U+00B7 세 개, I20418:56381;19504:42619). ::after 는 위 기본 규칙(content:none)이 #guideContent 로 더 세게 잡고 있어 같은 무게로 쓴다. guide.css 의 옛 경로 화살표(li:after — absolute, 6x12, 배경 그림)가 content 만 빼고 그대로 걸리므로 자리·크기·배경을 함께 되돌린다. 그대로 두면 ··· 가 칸 왼쪽 화살표 위에 겹쳐 그려진다. */ .guide-detail-page #guideContent .guide-inpage-path .guide-path li:not(:first-child):not(:last-child) > * {display:none;} .guide-detail-page #guideContent .guide-inpage-path .guide-path li:not(:first-child):not(:last-child)::after {content:'\00B7\00B7\00B7';position:static;width:auto;height:auto;margin:0;background:none;color:#AAACB0;} .guide-detail-page .guide-detail-title {font-size:30px;} .guide-detail-page .guide-detail-updated {font-size:12px;} .guide-detail-page .guide-nav-label {font-size:14px;} .guide-detail-page .guide-nav-title {font-size:16px;} } /* 카드 두 장이 한 줄에 서기 어려워지는 폭부터 한 장씩 쌓는다. 시안 360(20418:55893)은 gap 24 이고 다음 카드는 쌓여도 라벨·제목을 오른쪽에 맞춘다. 시안에 없는 361~480 도 좁아 480 부터 쌓는다. */ @media screen and (max-width:480px) { .guide-detail-page .guide-detail-nav {flex-direction:column;gap:24px;} .guide-detail-page .guide-nav-card {flex:none;width:100%;} .guide-detail-page .guide-nav-next {margin-left:0;} } @media screen and (max-width:360px) { .user-guide.guide-detail-page {--guide-detail-edge:16px;--guide-detail-head:16px;} } @media (prefers-reduced-motion:reduce) { .guide-detail-page .guide-top,.guide-detail-page a {transition:none !important;} }