/* 사용자 가이드 */ .user-guide {max-width:1920px;margin:0 auto;} .user-guide .guide-top {position:fixed;top: calc(var(--header-height) + var(--header-top-height) + var(--top-banner-height) - 2px);left:0;width: 100%;border-bottom:1px solid #e5e5e5;z-index: 1;} .user-guide .guide-top .inner {display:flex;box-sizing:border-box;width:100%;max-width:1935px;margin:0 auto;padding:0 15px 0 0;background:#fff;} /* 2026 사이드 메뉴 컴포넌트(Figma 홈 20192:102175 / 상세 20192:106550) — 폭 331(구분선 1px 포함), 위아래 50·왼쪽 30, 자식 사이 gap 20. 사용가이드 홈·상세가 이 한 벌을 함께 쓴다(공지 상세는 2026-09-22 부터 좌측 메뉴가 없다). 메뉴 안의 검색창(.guide-drawer-search)은 상세는 늘 보이고, 홈은 1000px 이하 서랍에서만 보인다(guideHome.css). 오른쪽은 시안의 목록 270 + 간격 20 + 스크롤 막대 6 + 여백 4 다. 여백을 이 상자가 아니라 목록(.guide-lnb)이 padding 16 + 스크롤바 트랙 14 로 진다 — 공통 스크롤바(scroll.css)가 14px 트랙에 투명 테두리 4px 이라 보이는 막대 6px 이 시안 자리(320~326)에 온다. height 의 +2px 은 .guide-top 이 top:calc(... - 2px) 로 2px 올라가 있기 때문이다. */ .user-guide .guide-top .lnb-wrap {display:flex;flex-direction:column;gap:20px;box-sizing:border-box;width:331px; height:calc(100vh - var(--header-height) - var(--header-top-height) - var(--top-banner-height) + 2px); padding:50px 0 50px 30px;border-right:1px solid #E6E7EA;} .user-guide .guide-top .top-right {position:relative;width:calc(100% - 331px);} .user-guide .guide-top .top-right .search-box {width:calc(100% - 250px);} .user-guide .guide-top .top-right .search-box input {border:none;padding:18px 18px 18px 67px;background:url(/common/responsive/images/default/search/icon_search-16x16b.svg) 25px 50% no-repeat;background-size: 22px 22px;letter-spacing:-0.05em;font-weight:600;} .user-guide .guide-top .top-right .btn-guide {font-size:0;position:absolute;top:0;right:0;padding-left:24px;border-left:1px solid #e5e5e5;} .user-guide .guide-top .top-right .btn-guide a {display:inline-block;vertical-align:middle;margin-left:27px;font-size:14px;font-weight:500;height: 58px;line-height:58px;letter-spacing:-0.05em;color:#777;} .user-guide .guide-top .top-right .btn-guide a:first-child {margin-left:0;} .user-guide .guide-top .ico-manual {padding-left:26px;background:url('/common/responsive/images/guide/bg_manual.svg') 0 50% no-repeat;background-size: 19px 19px;} .user-guide .guide-top .ico-pdf {padding-left:23px;background:url('/common/responsive/images/guide/bg_pdf.svg') 0 50% no-repeat;background-size: 16px 16px;} .user-guide .guide-top .ico-font {padding-left:23px;background:url('/common/responsive/images/guide/bg_font.svg') 0 50% no-repeat;background-size: 16px 16px;} /* .user-guide .lnb-wrap .btn-use {position:relative;display:block;font-size:15px;font-weight:700;line-height:58px;letter-spacing:-0.05em;color:#111;} .user-guide .lnb-wrap .btn-use:after {content:'';position:absolute;top:26px;right:24px;width:12px;height:7px;background:url('/common/responsive/images/guide/bg_dropdown.png') no-repeat;transition:transform .2s;-webkit-transition:transform .2s;-ms-transition:transform .2s;} .user-guide .lnb-wrap .btn-use.on:after {transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);} .user-guide .lnb-wrap .btn-use span {display:inline-block;padding-left:34px;background:url('/common/responsive/images/guide/btn_menu.png') 0 50% no-repeat;} */ /* 스크롤바 모양(막대 6px #D2D5DD)은 공통 scroll.css 가 이미 시안과 같다. 여기서 scrollbar-width 나 scrollbar-color 를 주면 크롬이 ::-webkit-scrollbar 규칙을 버리고 기본 막대로 돌아가므로 두지 않는다. */ .user-guide .lnb-wrap .guide-lnb {position:relative;top:auto;box-sizing:border-box;width:100%;padding-right:16px;scrollbar-gutter:stable; flex:1 1 auto;min-height:0;overflow-y:auto;overflow-wrap:anywhere;} /* 2026 시안(Figma 사이드 메뉴 19937 계열)에서 알약이 글자보다 왼쪽으로 삐져나오지 않게 되어 컨테이너를 밀어 보상하던 규칙(margin-left:-10 / padding-left:10 / width:234)을 없앴다. 들여쓰기는 이제 알약 '안쪽' padding(12px)이 진다. */ .user-guide .lnb-wrap .guide-lnb .depth02 > li {margin-top:0;} /* 중분류 묶음 사이 숨. 시안의 세로 리듬은 블록 사이 10 / 행 사이 0 한 쌍뿐이다. 묶음을 가르는 일은 이제 간격이 아니라 12px 회색 캡션(.lnb-mid > span)이 진다. */ /* 중분류 묶음 사이 숨. 시안에서 대분류 그룹의 gap 이 10 이고, 그 그룹의 자식이 '라벨 / 중분류 묶음들' 이다(묶음 = 캡션 + 그 아래 글·소분류). 묶음 '안'은 gap 0 이라 캡션과 항목, 항목과 항목은 붙고, 묶음과 묶음 사이에만 10 이 든다. */ .user-guide .lnb-wrap .guide-lnb .depth02 > .lnb-mid {margin-top:10px;} .user-guide .lnb-wrap .guide-lnb .depth02 > .lnb-mid:first-child {margin-top:0;} /* 대분류 직속 글. 시안에 없는 층이라 '글'로 보고 4Depth 타이포를 준다. 중분류 캡션 없이 대분류 바로 아래 오므로 들여쓰기는 하지 않는다. */ .user-guide .lnb-wrap .guide-lnb .depth02 > .lnb-item > a {font-size:14px;font-weight:400;line-height:1.5;letter-spacing:-0.01em;color:#3F4250;} .user-guide .lnb-wrap .guide-lnb .depth02 > .lnb-item.curr > a {background-color:#F6F7F9;color:#20232A;font-weight:500;} /* 소분류 목록. 시안은 캡션 바로 아래 간격 0, 들여쓰기 0 이다(글자는 알약 padding 이 민다). */ .user-guide .lnb-wrap .depth03 {margin:0;} .user-guide .lnb-wrap .depth03 li {margin-top:0;} /* 중분류 직속 글도 글이므로 4Depth 타이포를 따른다. */ .user-guide .lnb-wrap .depth03 li a {font-size:14px;font-weight:400;line-height:1.5;letter-spacing:-0.01em;color:#3F4250;} /* 지금 보고 있는 글. 소분류 안의 글과 중분류 직속 글 둘 다 잡는다. Figma 4Depth State=Selected(19937:4582) 그대로다 — 배경 #F6F7F9 + #20232A + Medium(500). 예전 시안은 여기가 망고색 알약(#FFCC01 글자 + #FFFCEF 배경)이었고, 그 조합은 명도 대비가 1.6:1 이라 WCAG AA 에 한참 못 미쳤다(선택된 항목이 오히려 가장 흐리게 보였다). 갱신 시안이 회색 알약 + 진한 글자로 바꾸면서 대비가 약 14:1 이 되어 그 문제가 사라졌다. 즉 이 색은 취향이 아니라 고쳐진 것이므로 되돌리지 않는다. */ .user-guide .lnb-wrap .depth04 > li.is-current > a, .user-guide .lnb-wrap .depth03 > li.is-current:not(.lnb-sub) > a {background-color:#F6F7F9;color:#20232A;font-weight:500;} /* 2026 사이드 메뉴 시안(Figma 19937-4509 사용예시 / 19937-4583 3Depth / 19937-4579 4Depth). 층은 1Depth 대분류 > 2Depth 중분류(캡션) > 3Depth 소분류(토글) > 4Depth 글 이다. 색 이름은 Figma 토큰을 그대로 옮겼다 — #3F4250 텍스트(05) / #20232A 텍스트 강조(04) / #F6F7F9 토글 선택(12) / #AAACB0 비활성(13) 갱신 시안에서 글자색이 #70777F 에서 #3F4250 으로 한 단 진해졌고, 알약 배경도 #F3F5F8 → #F6F7F9 로 바뀌었다. 선택 상태는 더 이상 망고색이 아니다(아래 4Depth 주석 참고). */ /* inline 이면 세로 padding 이 라인박스를 늘리지 않아 배경만 위아래 항목 위로 삐져나온다. 들여쓰기는 알약 바깥이 아니라 안쪽 padding 12px 이 진다(시안 기준). */ .user-guide .lnb-wrap .guide-lnb .depth02 > li > a, .user-guide .lnb-wrap .guide-lnb .depth02 > li > span {display:block;border-radius:5px;padding:8px 12px;transition:background-color .2s;} /* hover 는 a 에만 — 중분류 캡션(span)은 누를 것이 없으므로 반응하지 않는다. */ .user-guide .lnb-wrap .guide-lnb .depth02 > li > a:hover {background-color:#F6F7F9;} /* 1Depth 대분류(망고보드 에디터 / AI 디자이너) — 최상위다. 접지 않는다 — 라벨은 그 대분류의 대표 글(중분류·소분류가 없는 글)로 가는 링크다. 예전에는 망고색 18px 과 라벨 아래 구분선이 트리의 기준점이었다. 시안은 라벨을 회색 16px 알약으로 낮추고, 구분선을 라벨 아래가 아니라 대분류와 대분류 '사이'로 옮겼다 (컴포넌트 안의 구분선은 꺼져 있고 조립본 최상위에 별도 vector 로 있다). 기준점 역할은 이제 ①크기 점프(16 vs 캡션 12) ②그 구분선 ③10px 리듬 안의 유일한 46px 행이 나눠 진다. */ .user-guide .lnb-wrap .guide-lnb > .lnb-group {margin-top:0;} /* 대분류 사이 구분선. 첫 대분류 위에는 긋지 않으므로 인접 선택자로 둔다. 시안의 '아코디언' 프레임(19937:4684 / 19596:55905)은 대분류와 구분선을 gap 20 으로 쌓고, 구분선은 높이 0 에 1px 선을 가운데 정렬로 그린다. 선이 자리를 차지하지 않아 대분류와 대분류 사이는 20 + 20 = 40 이다. CSS 의 border 는 1px 을 차지하므로 아래쪽을 19 로 줄여 40 을 맞춘다. */ .user-guide .lnb-wrap .guide-lnb > .lnb-group + .lnb-group {margin-top:20px;padding-top:19px;border-top:1px solid #E6E7EA;} /* 대분류 라벨 아래에는 선을 긋지 않는다. 컴포넌트에 border-bottom 속성이 있지만 배치본 (19937:4684 / 19596:55905)에서 라벨 아래는 비어 있고, 선은 대분류와 대분류 '사이'에만 있다 (아코디언의 별도 '구분선' 요소 = 아래 .lnb-group + .lnb-group). 둘 다 그으면 라벨이 위아래로 갇힌다. */ /* 대분류 라벨 컴포넌트(Figma '사이드 메뉴/2Depth' 19377:62465)의 안쪽 틀(19450:63442)이 px12 py4 라 글자가 위에서 4 떨어진다. 행 높이 41 = 4 + 33 + 4. 라벨은 2026-10-08 부터 링크가 아니라 span 제목이다(대표 글 링크를 비공개로 돌린다). 중분류 캡션처럼 커서를 default 로 못 박아 글자 위에서 텍스트 I-beam 이 떠 눌리는 것처럼 보이지 않게 한다. */ .user-guide .lnb-wrap .guide-lnb > .lnb-group > .group-label {display:block;box-sizing:border-box;min-height:41px;padding:4px 12px;border-radius:0; font-size:22px;font-weight:700;line-height:1.5;letter-spacing:-0.01em;color:#3F4250;cursor:default;} /* 대분류에는 '선택됨' 표시를 두지 않는다. Figma 1Depth State=Selected(19377:62487)와 그 안쪽 프레임(19450:63450) 모두 fill 이 없어 Enabled 와 시각적으로 같다 — 즉 시안은 대분류에 현재 위치를 표시하지 않기로 한 것이다. 회색 알약은 Hover 에만 있고(19377:62473), 지금 어디를 보는지는 4Depth 의 노란 알약이 맡는다. 대표 글(중분류·소분류가 없는 글)을 보는 중일 때만 예외적으로 표시가 사라지는데, 그 글은 아래 글 목록에 나오지 않기 때문이다. 시안을 따르기로 한 결정이라 그대로 둔다. */ /* 대분류 안쪽(중분류·대분류 직속 글)은 늘 보인다. 접는 것은 소분류부터다. */ .user-guide .lnb-wrap .guide-lnb .depth02 {margin-top:10px;} /* 2Depth 중분류 — 누르는 것이 아니라 소분류 목록의 제목이다(그래서 span). 시안에서 이 층은 알약이 아니라 12px 회색 캡션으로 내려왔다. 배경도 상태도 없다. 묶음을 가르는 일을 간격 대신 이 캡션이 맡으면서 세로 리듬이 10px 하나로 정리됐다. 커서를 default 로 못 박는 이유는 그대로다 — span 이라 지정이 없으면 글자 위에서 텍스트 I-beam 이 떠 눌리는 것처럼 보인다. */ .user-guide .lnb-wrap .guide-lnb .depth02 > .lnb-mid > span {cursor:default;padding:0 12px; font-size:12px;font-weight:400;line-height:1.5;letter-spacing:-0.01em;color:#AAACB0;} .user-guide .lnb-wrap .guide-lnb .depth02 > .lnb-mid > span {display:flex;align-items:center;box-sizing:border-box;min-height:39px;} /* 시안 2Depth 에는 상태가 없다. '현재 글이 이 묶음 안에 있다'는 표시는 4Depth 의 노란 알약이 훨씬 강해져 중복이므로 캡션에는 남기지 않는다. JSP 의 is-current 클래스는 그대로 둔다 — guide.js scrollGuideLnbToCurrent 가 대표 글처럼 li 로 그려지지 않는 글에서 그 대분류를 찾는 폴백으로 읽는다. */ /* 검색 결과 → 본문 복귀. 결과 제목 위에 얌전히 둔다. */ .user-guide #searchContent .search-back {margin:0 0 14px;font-size:14px;line-height:20px;} .user-guide #searchContent .search-back a {color:#70777F;text-decoration:none;} .user-guide #searchContent .search-back a:hover {color:#20232A;text-decoration:underline;} /* 시안은 hover 에서 글자색을 바꾸지 않는다. 알약 배경 하나로만 알린다 — 색까지 함께 움직이면 선택 상태(노란 알약)와 신호가 두 벌이 된다. */ .user-guide .lnb-wrap .depth03 li a {color:#3F4250;} /* 3Depth 소분류 — 눌러서 그 안의 글 목록을 접었다 편다. 시안은 이 층을 15px Medium 회색 알약으로 잡는다(예전에는 14px 700 이었다). .sub-label 을 함께 걸어 위의 .depth03 li a 색 규칙을 이긴다. 시안 행(19361:50692)은 pl12 pr6 에 글과 꺾쇠 사이 gap 8, 꺾쇠 상자 20 이라 글 오른쪽에 34 가 빈다. 긴 소분류(차트 · 지도 · 표 …)가 접히는 자리가 시안과 같아지려면 이 34 를 지켜야 한다. */ .user-guide .lnb-wrap .depth03 > .lnb-sub {margin-top:0;} .user-guide .lnb-wrap .depth03 > .lnb-sub > a.sub-label {position:relative;display:block;box-sizing:border-box;min-height:39px;border-radius:5px; padding:8px 34px 8px 12px;font-size:15px;font-weight:500;line-height:1.5;letter-spacing:-0.01em;color:#3F4250; transition:background-color .2s;} /* 글이 하나뿐인 소분류는 누르면 곧장 그 글로 간다(guide_lnb.jsp is-direct). 펼칠 것이 없으므로 꺾쇠를 빼고 글 칸을 오른쪽 6 까지 쓴다. 시안과 다르다 — 시안(19504:42421 'AI 디자이너란?', 사이드 메뉴 19596:55905, 서랍 20392:50478, 시트 20418:56404)은 이 행에도 펼침 꺾쇠를 그린다. '펼치지 않는 행에 아래 꺾쇠는 오해를 준다'는 판단으로 일부러 뺀 것이며, 디자이너 확인 전까지 유지한다(2026-09-24). */ .user-guide .lnb-wrap .depth03 > .lnb-sub > a.sub-label.is-direct {padding-right:6px;} /* 회색 알약은 마우스를 올렸을 때만이다. Figma 3Depth 의 네 상태 중 배경이 있는 것은 Hover(19361:50693)와 Selected Hover(19377:62524) 둘뿐이고, Enabled 와 Selected 에는 없다 — 즉 이 배경은 '펼쳐져 있다'가 아니라 '지금 가리키고 있다'는 신호다. :hover 는 .curr 여부와 무관하게 걸리므로 이 한 줄이 두 상태를 모두 덮는다. 펼침 여부는 오른쪽 꺾쇠 방향이 맡는다. 글자색은 시안대로 바꾸지 않는다. */ .user-guide .lnb-wrap .depth03 > .lnb-sub > a.sub-label:hover {background-color:#F6F7F9;} /* 열림/닫힘 화살표. 닫히면 아래쪽, 열리면 위쪽을 가리킨다. 시안 아이콘(19361:51132)을 그대로 옮긴 20x20 SVG 다 — 상자가 오른쪽 끝에서 6 떨어지고, 글리프(M5 7.5 L10 12.5 L15 7.5, 10x5 에 45도 두 팔)가 상자 가운데에 온다. 닫힘은 #969FAC, 열림(3Depth Selected, 아이콘 1810:16916)은 #1C1D1F 로 색이 바뀐다. 배경 이미지로는 currentColor 를 쓸 수 없어 색마다 한 벌씩 두고, 열림은 회전으로 위를 가리키게 한다. */ .user-guide .lnb-wrap .depth03 > .lnb-sub > a.sub-label:after {content:'';position:absolute;top:50%;right:6px;width:20px;height:20px;margin-top:-10px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' fill='none' stroke='%23969FAC' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px 20px no-repeat; transition:transform .2s;} .user-guide .lnb-wrap .depth03 > .lnb-sub.curr > a.sub-label:after {transform:rotate(180deg); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' fill='none' stroke='%231C1D1F' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} .user-guide .lnb-wrap .depth03 > .lnb-sub > a.sub-label.is-direct:after {display:none;} /* 4Depth 글 목록. 시안의 아코디언 패널은 자식을 12px 만 들여쓰고 세로 레일은 두지 않는다. 레일(border-left)과 현재 글 3px 막대를 함께 걷어낸 자리를 노란 선택 알약이 대신한다. 소분류 행과 패널 사이, 글과 글 사이는 3 이다(아코디언·패널 gap 3). 패널 뒤에는 간격이 없다. margin 이라 slideToggle 이 여닫을 때 함께 줄고 늘어난다. */ .user-guide .lnb-wrap .depth04 {display:none;margin-top:3px;padding-left:12px;} .user-guide .lnb-wrap .depth04 li {margin-top:0;} .user-guide .lnb-wrap .depth04 > li + li {margin-top:3px;} .user-guide .lnb-wrap .depth04 li > a {display:block;box-sizing:border-box;min-height:37px;border-radius:5px;padding:8px 12px;transition:background-color .2s;} .user-guide .lnb-wrap .depth04 li > a:hover {background-color:#F6F7F9;} /* 중분류 직속 글(소분류 없이 캡션 아래 바로 오는 글)도 같은 알약을 쓴다. */ .user-guide .lnb-wrap .depth03 > li:not(.lnb-sub) > a {display:block;box-sizing:border-box;min-height:37px;border-radius:5px;padding:8px 12px;transition:background-color .2s;} .user-guide .lnb-wrap .depth03 > li:not(.lnb-sub) > a:hover {background-color:#F6F7F9;} /* '자료' 묶음(guide_lnb.jsp li.lnb-extra) — DB 분류가 아니라 고정 링크 두 개다. 시안(홈 I20192:102175;19698:33514 / 상세 I19596:55905;19698:33514)은 마지막 대분류 뒤 20 에 구분선 없이 둔다. 캡션은 중분류 캡션(.lnb-mid > span)과, 항목은 꺾쇠 없는 3Depth(pl12 pr6)와 같은 값이다. .lnb-group 을 쓰지 않는다 — 대분류 사이 구분선과 guide.js 의 현재 대분류 찾기가 이 묶음을 대분류로 읽지 않게 한다. */ .user-guide .lnb-wrap .guide-lnb > .lnb-extra {margin-top:20px;} .user-guide .lnb-wrap .guide-lnb > .lnb-extra > .lnb-extra-caption {display:flex;align-items:center;box-sizing:border-box;min-height:39px;padding:0 12px;cursor:default; font-size:12px;font-weight:400;line-height:1.5;letter-spacing:-0.01em;color:#AAACB0;} .user-guide .lnb-wrap .lnb-extra-list {margin:0;padding:0;} .user-guide .lnb-wrap .lnb-extra-list > li {margin-top:0;} .user-guide .lnb-wrap .lnb-extra-list > li > a {display:block;box-sizing:border-box;min-height:39px;border-radius:5px;padding:8px 6px 8px 12px; font-size:15px;font-weight:500;line-height:1.5;letter-spacing:-0.01em;color:#3F4250;transition:background-color .2s;} .user-guide .lnb-wrap .lnb-extra-list > li > a:hover {background-color:#F6F7F9;} /* 961~1450px 구간의 글자 사다리는 없앴다. 새 기준값(16 / 12 / 14 / 13)이 예전 축소값(17 / 15 / 14 / 13)보다 이미 작거나 같아 더 줄일 것이 없다. 이 구간에서 컬럼 폭도 변하지 않는다. 예전 주석이 걱정하던 '자식이 부모보다 굵어지는' 문제도 중분류가 캡션이 되면서 사라졌다. */ /* 960px 이하의 '터치 확대' 사다리(글자 한 단씩 키우기)도 없앴다(2026-09-22). 1000px 이하에서 메뉴는 서랍·시트가 되고, 시안(서랍 20392:50478 / 시트 20418:56404)은 그 안의 글자·간격을 넓은 화면과 같게 둔다. 수납 바 분류 경로의 점선 밑줄도 소분류 칸이 진짜 링크가 되면서 함께 뺐다. */ /* 메뉴 안 검색창. 사용가이드 상세는 넓은 화면의 좌측 메뉴 맨 위에, 홈·상세 모두 1000px 이하 서랍 맨 위에 둔다. 모양은 Figma '템플릿검색' 인스턴스(상세 20192:106550 / 서랍 I20392:50974;19361:51111)다: 270x40(서랍은 목록 폭), 테두리 1px #DEDEDE(comp/#DE), 모서리 6, 돋보기 16(왼쪽 11), 글자 Pretendard 14/400 -0.42px #222(placeholder 50%), 글 시작 38. 서버 폼(form.guide-drawer-search)은 번들이 없을 때 쓰고, 번들이 있으면 guide.js mountGuideSearchField 가 MangoReact SearchField 를 그 앞 자리(.guide-drawer-search-field)에 그린 뒤 폼을 숨긴다. 상태는 템플릿 검색창(mango.css searchField)과 같다. 테두리는 그대로 두고 hover 는 옅은 그림자, 입력 중에는 배경만 바꾼다. */ .guide-drawer-search {display:flex;align-items:center;box-sizing:border-box;width:270px;max-width:100%;height:40px;margin:0;border:1px solid #DEDEDE;border-radius:6px;background:#fff;} .guide-drawer-search[hidden] {display:none;} .guide-drawer-search:hover {box-shadow:0 1px 4px 0 rgba(0,0,0,.1);} .guide-drawer-search:focus-within {background:#F6F7F9;} .guide-drawer-search > button {flex:0 0 38px;width:38px;height:38px;padding:0;border:0;background:transparent url('/common/responsive/images/default/search/icon_search-16x16b.svg') 11px center no-repeat;background-size:16px 16px;cursor:pointer;} .guide-drawer-search > input {flex:1;min-width:0;width:100%;height:38px;padding:0 12px 0 0;border:0;border-radius:0;background:none;font:400 14px/normal 'Pretendard',sans-serif;letter-spacing:-.42px;color:#222;outline:none;text-overflow:ellipsis;caret-color:#FEDE29;} .guide-drawer-search > input::placeholder {color:rgba(34,34,34,.5);} .guide-drawer-search > input:focus::placeholder {visibility:hidden;} .guide-drawer-search > input::selection {background-color:#FEDE29;} .guide-drawer-search > input::-webkit-search-cancel-button {display:none;} /* SearchField 컴포넌트. 자리(.guide-drawer-search-field) 바로 아래 div 가 컴포넌트 뿌리다. 아이콘·글 시작선 12·39(시안 테두리는 안쪽 선이라 CSS padding 은 1px 적다), gap 11. hover 그림자·입력 중 배경(#F6F7F9)·커서 색은 컴포넌트가 그린다. 입력 규칙과 아이콘 스프라이트는 템플릿 검색창(templates.css #mainSearchField)과 같다. 컴포넌트를 그리면 자리에 data-rm 이 붙고 공통 mango.css 가 [data-rm]{width:fit-content} 로 줄인다. 폼과 같은 폭으로 되돌린다. 컴포넌트 모듈 클래스는 한 단(0,1,0)이라 '자리 > div' 로 잡으면 이긴다. */ .guide-drawer-search-field,.guide-drawer-search-field[data-rm] {box-sizing:border-box;width:270px;max-width:100%;margin:0;} .guide-drawer-search-field > div {box-sizing:border-box;width:100%;height:40px;padding:0 7px 0 11px;gap:11px;border-color:#DEDEDE;border-radius:6px;} .guide-drawer-search-field > div > i {box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;} .guide-drawer-search-field > div > input {min-width:0;height:100%;padding:0;font-family:'Pretendard',sans-serif;font-size:14px;line-height:normal;letter-spacing:-.42px;color:#222;text-overflow:ellipsis;} .guide-drawer-search-field > div > input::placeholder {color:rgba(34,34,34,.5);font-size:14px;line-height:normal;letter-spacing:-.42px;} .guide-drawer-search-field > div > input:focus {border:none;outline:none;} .guide-drawer-search-field > div > input:focus::placeholder {visibility:hidden;} /* 지우기 단추는 누르기 쉽게 24px 로 두고 아이콘만 16px 이다. hover 원형 배경은 컴포넌트 값이다. */ .guide-drawer-search-field > div > input + i {width:24px;height:24px;border-radius:12px;} .guide-drawer-search-field > div > i:first-child::after, .guide-drawer-search-field > div > input + i::after {content:'';display:block;width:16px;height:16px;background:url('/common/responsive/images/template/Search_Icon.png') no-repeat 0 0/16px 32px;} .guide-drawer-search-field > div > input + i::after {background-position:0 -16px;} /* 1000px 이하 : 메뉴 서랍·하단 시트의 안쪽(홈·상세 공용). #guideLnbPanel 은 두 화면 모두 이 폭에서 서랍(701~1000)이나 하단 시트(700 이하)가 된다(guideDrawer.js). 서랍 : 시안 20392:50478 / 사이드 메뉴 20392:50974. 위 30, 왼쪽 28. 오른쪽은 넓은 화면과 같이 목록 padding 16 + 스크롤바 트랙 14 가 진다(목록 302 + 간격 20 + 막대 6 + 4). 아래 50 은 목록 끝의 여유라 스크롤 영역(.guide-lnb) 안쪽에 둔다. 밖에 두면 스크롤 상자가 50 짧아질 뿐이다. 시트 : 시안 20418:56404. 손잡이 자리 28 + 4 = 위 32, 좌우 16. 휴대폰은 스크롤바가 글 위에 겹쳐 그려져(트랙 0) 목록이 시안과 같은 328 이 된다. 두 화면 CSS 가 따로 들고 있던 값을 여기 한 곳으로 모았다. 여백은 id 로 잡아 화면 쪽 규칙보다 세다. 높이 100% 는 서랍이 붙기 전(높이 0 인 .guide-top 안)에는 메뉴를 접어 두고, 붙은 뒤에는 서랍·시트가 정한 높이에 진다 (MangoReact drawer 는 !important, 기본 구현 시트는 guideDrawer.css 가 더 센 선택자로 준다). 그래서 id 로 올리지 않는다. */ @media screen and (max-width:1000px) { .user-guide .guide-top .lnb-wrap.guide-drawer {height:100%;border-right:0;} .user-guide #guideLnbPanel {padding:30px 0 0 28px;} .user-guide #guideLnbPanel .guide-lnb {padding-bottom:50px;} /* 서랍 안 검색창은 목록 글자 폭과 같다(시안 302 = 패널 안쪽 - 목록 오른쪽 16 - 트랙 14). */ .user-guide #guideLnbPanel .guide-drawer-search, .user-guide #guideLnbPanel .guide-drawer-search-field, .user-guide #guideLnbPanel .guide-drawer-search-field[data-rm] {width:calc(100% - 30px);} } /* 좌측 메뉴가 하단 시트로 바뀌는 폭. guideDrawer.js 의 sheetUnder(700)와 같은 값이어야 한다. */ @media screen and (max-width:700px) { .user-guide #guideLnbPanel.is-sheet {padding:32px 0 0 16px;} .user-guide #guideLnbPanel.is-sheet .guide-drawer-search, .user-guide #guideLnbPanel.is-sheet .guide-drawer-search-field, .user-guide #guideLnbPanel.is-sheet .guide-drawer-search-field[data-rm] {width:calc(100% - 16px);} } /* 휴대폰 폭에서는 main 의 스크롤바 자리를 비운다(홈·상세·랜딩·검색 결과 모두 section.user-guide 안이다). 공통 규칙(default.css 의 main{scrollbar-gutter:stable} + scroll.css 의 14px 막대)이 main 오른쪽 14px 을 늘 비워 두므로, 시안(Figma 360px 프레임: 좌우 여백 16)과 달리 본문이 화면 가운데에서 7px 왼쪽으로 치우쳐 보였다 (홈 카드 좌우 여백 16/30, 상세 본문 30/44. 헤더와 고정 상단 바는 전체 폭이라 본문과도 어긋났다). 휴대폰에서는 막대를 보일 일이 없으니 숨기고 자리도 없앤다. 스크롤은 그대로 된다. scrollbar-width:none 이 막대를 숨기고(크롬 121+·파이어폭스·사파리 18.2+), 아래 ::-webkit-scrollbar 는 그보다 오래된 크롬·사파리용이다. 폭 기준은 위 시트 전환(700px)과 같다. 공지 화면은 이 파일을 싣지 않으므로 이 규칙이 닿지 않는다. */ @media screen and (max-width: 700px) { main:has(section.user-guide) {scrollbar-width:none;scrollbar-gutter:auto;} main:has(section.user-guide)::-webkit-scrollbar {width:0;height:0;} } /* 검색 결과 목록 반응형 */ @media screen and (max-width: 700px) { .user-guide .result-wrap .result-list li a.has-thumb {gap:12px;} .user-guide .result-wrap .result-list li a.has-thumb .result-thumb {flex:0 0 96px;width:96px;height:60px;border-radius:6px;} } .user-guide .guide-cont {position:relative;width:1040px;padding-top:119px;padding-left:430px;padding-bottom:150px;} /* 이 글의 목차 스킨은 guideToc.css 가, 자리(기둥·서랍)는 각 상세 화면 CSS 가 진다(2026-09-22 에 이 파일에서 옮겼다). 공지 상세는 이 파일을 싣지 않으므로 여기에 공지용 규칙을 두지 않는다. */ .user-guide .guide-cont > .desc, .user-guide .guide-cont > .md-guide > .desc {margin-top:15px;font-size:16px;font-weight:500;line-height:22px;letter-spacing:-0.05em;color:#555;} .user-guide .guide-cont .banner {margin-top:-6px;} .user-guide .guide-cont .link-banner {position:relative;display:inline-block;} .user-guide .guide-cont .link-banner .text {position:absolute;top:60px;left:72px;} .user-guide .guide-cont .link-banner strong {display:block;font-size:38px;font-weight:700;line-height:33px;letter-spacing:-0.05em;color:#111;} .user-guide .guide-cont .link-banner p {margin-top:18px;font-size:18px;font-weight:600;line-height:17px;letter-spacing:-0.05em;color:#222;} .user-guide .guide-cont .link-banner a {display:block;margin-top:28px;width:149px;border-radius:30px;background:#222;font-size:15px;font-weight:600;line-height:44px;letter-spacing:-0.05em;color:#fff;text-align:center;} .user-guide .guide-cont .guide-box + .guide-box {margin-top:60px;} .user-guide .guide-cont .tit-box {padding:20px 0;} .user-guide .guide-cont .guide-path {line-height: 38px;letter-spacing: -0.025em;} .user-guide .guide-cont .guide-path li {position:relative;display:inline-block;vertical-align:middle;margin-left:7px;padding-left:16px;width: max-content;} .user-guide .guide-cont .guide-path li a {color:#aeaeae;letter-spacing:-0.075em;font-weight:400;} .user-guide .guide-cont .guide-path li:after {content:'';position:absolute;top:50%;left:0;margin-top:-6px;width:6px;height:12px;background:url('/common/responsive/images/guide/bg_nav-arrow.jpg') 50% no-repeat;} .user-guide .guide-cont .guide-path li:first-child {margin-left:0;padding-left:0;} .user-guide .guide-cont .guide-path li:first-child:after {display:none;} .user-guide .guide-cont .guide-path li.curr a {color:#111;font-weight:700;} .user-guide .guide-cont .guide-path li.curr h1 { font-size: 20px; font-weight:bold; } .user-guide .use-list {overflow:hidden;} .user-guide .use-list:after {content:'';display:block;clear:both;} .user-guide .use-list li {float:left;width:507px;padding-top:29px;margin-top:30px;border-top:1px solid #f4f4f4;box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;} .user-guide .use-list li:nth-child(2n) {padding-left:26px;} .user-guide .use-list li:nth-child(-n+2) {padding-top:0;border-top:none;} .user-guide .use-list li > div {display:flex;} .user-guide .use-list .text {margin-left:30px;padding-top:9px;} .user-guide .use-list .text strong {display:block;font-size:17px;font-weight:600;line-height:16px;letter-spacing:-0.065em;color:#111;} .user-guide .use-list .text p {margin-top:9px;font-size:15px;font-weight:500;line-height:23px;letter-spacing:-0.05em;color:#777;word-break: auto-phrase;} .user-guide .use-list .more {display:inline-block;margin-top:34px;padding-right:12px;background:url('/common/responsive/images/guide/bg_more-arrow.png') 100% 50% no-repeat;font-size:14px;font-weight:500;line-height:14px;letter-spacing:-0.065em;color:#555;} .user-guide .use-list.use-list-top{margin-bottom:49px;} .user-guide .use-list.use-list-top li{margin-top:25px;width:310px;padding:0;border-top:none;margin-left:27px;margin-right:27px} .user-guide .use-list.use-list-top li:first-child {margin-left:0;} .user-guide .use-list.use-list-top li:last-child {margin-right:0;border-right:none;} .user-guide .use-list.use-list-top li > div{display:block} .user-guide .use-list.use-list-top li > div > figure{width:310px;padding-right:27px;border-right:1px solid #F4F4F4} .user-guide .use-list.use-list-top li > div > figure:last-child{border-right:none} .user-guide .use-list.use-list-top .text{margin-left:0;padding-top:19px;} .user-guide .use-list.use-list-top .more {margin-top:21px} .use-list-top-line{width:1px;height:190px;border-right:1px solid #F4F4F4} .guide-box.gouide-box-margin1{margin-bottom:49px;border-bottom:1px solid #F4F4F4} .guide-box.gouide-box-margin2{margin-top:49px;} .user-guide .follow-wrap {margin-top:77px;} .user-guide .follow-wrap.follow-wrap02 {margin-top:81px;} .user-guide .follow-wrap .sub-tit {padding-left:20px;} .user-guide .follow-wrap .sub-tit + .follow-box {margin-top:30px;} .user-guide .follow-box {display:flex;margin-top:10px;padding:20px;height:230px;background:#fafafa;border-radius:5px;} .user-guide .follow-box .follow-tit {position:relative;overflow:hidden;border-radius:5px;width:350px;margin-right:70px;} .user-guide .follow-box .follow-tit figcaption {position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);text-align:center;} .user-guide .follow-box .follow-tit em {display:block;width:90px;margin:0 auto;background:#fff;border-radius:20px;font-size:13px;font-weight:800;line-height:27px;color:#222;text-transform:uppercase;} .user-guide .follow-box .follow-tit strong {display:block;margin-top:15px;font-size:23px;font-weight:800;line-height:22px;letter-spacing:-0.05em;color:#fff;} .user-guide .follow-box .follow-tit.black em {background:#222;} .user-guide .follow-box .follow-tit.black strong {color:#222;} .user-guide .follow-box.follow04 .follow-tit.black em {color:#ffd667;} .user-guide .follow-list {padding-top:9px;} .user-guide .follow-list li a {font-size:15px;font-weight:500;line-height:35px;letter-spacing:-0.035em;color:#555;} .user-guide .follow-list + .follow-list {margin-left:50px;} .user-guide .result-wrap .tit {text-align:left;font-weight:400;} .user-guide .result-wrap .tit strong {font-weight:600;} /* 검색 결과는 대분류 묶음으로 그린다. 묶음마다 제목 - 목록 - 모두보기 한 벌이다. */ .user-guide .result-wrap + .result-wrap {margin-top:70px;} /* 묶음 제목은 검색어까지 통째로 굵게 쓴다. */ .user-guide .result-wrap .result-tit {display:block;font-size:20px;font-weight:700;line-height:30px;letter-spacing:-0.04em;color:#111;} .user-guide .result-wrap .result-tit strong {font-weight:700;color:inherit;} .user-guide .result-wrap .result-list {margin-top:16px;padding-top:0;border-top:1px solid #f4f4f4;} /* 처음에는 5건만 보여 주고 모두보기로 나머지를 펼친다. 그 전에는 규칙이 없어 늘 다 보였다. */ .user-guide .result-wrap .result-list.list-more > li:nth-child(n+6) {display:none;} .user-guide .result-wrap .result-list li {border-bottom:1px solid #f4f4f4;} .user-guide .result-wrap .result-list li a {display:block;padding:26px 0 23px;letter-spacing:-0.05em;} /* 대표 이미지가 있으면 제목이 .result-text 안으로 한 단 들어간다. FAQ 결과는 감싸는 상자가 없으므로 두 형태를 모두 잡는다. */ .user-guide .result-wrap .result-list li a > strong, .user-guide .result-wrap .result-list li a.has-thumb .result-text > strong {display:block;font-size:18px;font-weight:600;line-height:25px;color:#111;} .user-guide .result-wrap .result-list li span {display:block;margin-top:9px;font-size:15px;font-weight:500;line-height:28px;color:#ffb400;} /* 발췌는 두 줄까지만 보여 주고 넘치면 말줄임한다. 공지 목록과 같은 방식이다. 글마다 높이가 달라지면 이미지와 줄이 맞지 않아 목록이 들쭉날쭉해진다. */ .user-guide .result-wrap .result-list li p {font-size:16px;font-weight:500;line-height:28px;color:#777; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .user-guide .result-wrap .result-list li p strong {color:#111;font-weight:500;} /* 대표 이미지가 있는 검색 결과만 좌우로 나눈다. FAQ 결과는 감싸는 상자가 없으므로 has-thumb 없이 예전 그대로 그려진다. */ .user-guide .result-wrap .result-list li a.has-thumb {display:flex;align-items:flex-start;gap:24px;} .user-guide .result-wrap .result-list li a.has-thumb .result-text {flex:1 1 auto;min-width:0;} .user-guide .result-wrap .result-list li a.has-thumb .result-thumb {flex:0 0 168px;width:168px;height:105px;overflow:hidden;border-radius:8px;background:#F3F5F8;} .user-guide .result-wrap .result-list li a.has-thumb .result-thumb img {display:block;width:100% !important;height:100% !important;max-width:100% !important;object-fit:cover;} .user-guide .btn-more {width:135px;margin:30px auto 0;} .editor-area {padding:200px 0;background:#f4f4f4;text-align:center;} /** 사용 가이드 */ /* 기본 폰트 스타일 */ #guideContent { font-family: 'Pretendard'; color: #000000; font-size: 15px; line-height: 1; padding-top: 58px; padding-left: 430px; } #guideContent.main-content { padding-top: 119px; padding-left: 430px; } #searchContent { display: none } #searchTitle { line-height: 36px; text-align: left; font-weight: 400; margin-bottom: 40px; }