/* 사용가이드 홈·검색 전용. 기존 상세 본문과 좌측 메뉴의 스타일은 공유한다. */ /* Figma 사용가이드 홈(20192:102100)의 1400·1200·1000·700·360px 프레임을 따른다. 넓은 화면은 메뉴 331px + 콘텐츠다. 새 시안에는 1401px 이상 프레임이 없어 예전 1920px 시안(19349:50350)의 최대 폭을 그대로 둔다(2026-09-22 결정). 그 본문 폭 1070 은 카드 상자의 안쪽 여백 16px 을 양쪽에 포함한 값이라, 글과 썸네일이 놓이는 선은 1038 이다. 구역 제목·링크 카드는 이 1038 선에 두고, hover 배경이 있는 카드 목록만 양옆으로 16px 내어 쓴다. 게시물 카드·링크 카드의 공통 규칙은 망고소식 홈(noticeHome.jsp)과 함께 쓰는 article/articleCard.css 에 있고, 이 파일 바로 앞에 싣는다. 가이드 홈에만 맞춘 카드 제목 크기·말줄임·썸네일 선은 여기에 .guide-home-page 로 범위를 좁혀 둔다. */ .user-guide.guide-home-page {--guide-home-content-width:1038px;display:grid;grid-template-columns:331px minmax(0,1fr);max-width:1920px;} /* 홈에서는 보조 링크 바를 제거하되 그 안의 기존 좌측 메뉴는 같은 자리에 유지한다. */ .guide-home-page .guide-top {border-bottom:0;} .guide-home-page .guide-top .top-right {display:none;} /* 본문은 2열을 차지한다. 폭 제한(1038)은 이 박스가 아니라 직계 자식에 둔다. 양옆 66px 은 시안 콘텐츠 여백 50(주석 '1400px부터 좌우 여백 50px으로 줄어듬') + 카드 안쪽 16 이다. 글·썸네일 선이 1000px 이하와 같은 66 에서 시작한다. 아래 50 뒤에는 공통 푸터가 온다(시안의 아래 100 은 고객센터 버튼 자리). */ .guide-home-content {grid-column:2;grid-row:1;justify-self:stretch;box-sizing:border-box;width:auto;max-width:none; padding:50px 66px 50px;color:#20232a;font-family:inherit;letter-spacing:-.015em;} .guide-home-content > * {max-width:var(--guide-home-content-width);margin-left:auto;margin-right:auto;} /* 페이지(main) 전체가 스크롤한다(2026-09-17). 넓은 화면에서 왼쪽 메뉴는 화면 왼쪽에 붙어 따라 내려온다(sticky). 공통 푸터는 같은 그리드의 오른쪽 칸 둘째 줄이고 메뉴는 두 줄에 걸쳐 있어, 푸터가 보여도 메뉴가 밀려 올라가지 않는다. 메뉴 안쪽 목록은 예전처럼 따로 스크롤한다(Figma 개발 주석: 사이드 메뉴와 콘텐츠가 각각 스크롤, 우측 콘텐츠 맨 아래에 푸터). 공통 #contents 의 overflow:hidden 은 sticky 를 막는다(가장 가까운 스크롤 상자가 스크롤하지 않는 #contents 가 된다). 이 페이지만 clip 으로 바꾼다. 넘친 내용을 자르는 것은 같고 스크롤 상자를 만들지 않는다. clip 을 모르는 브라우저는 visible 이다. */ #contents.guide-home-root {overflow:visible;overflow:clip;} @media screen and (min-width:1001px) { /* 홈의 .guide-top 은 왼쪽 메뉴 전용이다(오른쪽 보조 링크 바는 위에서 display:none). 공통 규칙은 이 레이어를 화면 고정·폭 100% 로 둬서 그대로 두면 본문을 덮는다. 그리드 1열 안의 sticky 로 바꾼다. top 은 공통 규칙과 같은 헤더 식이다. 1000px 이하에서 헤더가 접히면 공통 규칙(new-guide.css)이 top 을 함께 줄인다. sticky 는 자기 그리드 칸 안에서만 따라온다. 본문(1줄)과 푸터(2줄)에 걸쳐 두어야 페이지 끝까지 제자리에 남는다. .inner 의 오른쪽 15px 여백은 보조 링크 바 자리였다. 남겨 두면 메뉴가 그만큼 좁아지므로 뺀다. */ .user-guide.guide-home-page .guide-top {position:sticky;grid-column:1;grid-row:1 / span 2;align-self:start;width:331px;} /* 메뉴(화면 높이)가 본문+푸터보다 길면(검색결과 없음·불러오는 중, 세로로 긴 화면) 남는 높이가 줄마다 나뉜다. 기본(auto auto)이면 푸터 줄이 늘어나 검은 푸터 아래 흰 띠가 생긴다. 남는 높이는 본문 줄이 갖고 푸터 줄은 푸터 높이 그대로 둔다. */ .user-guide.guide-home-page {grid-template-rows:1fr auto;} .user-guide.guide-home-page .guide-top .inner {padding-right:0;} /* 메뉴 맨 위 검색창은 서랍(1000px 이하, 시안 I20392:50974;19361:51111)에만 있다. 넓은 화면 메뉴(20192:102175)의 '템플릿검색'은 숨김이고 히어로 검색창이 그 몫을 한다. 컴포넌트가 그려지면 폼은 hidden 이 되고 자리(.guide-drawer-search-field)가 대신 서므로 둘 다 숨긴다. */ .guide-home-page .guide-drawer-search, .guide-home-page .guide-drawer-search-field {display:none;} } /* 공통 푸터(default.css)는 페이지 맨 아래 absolute 다. 이 페이지는 #contents 가 푸터 자리를 비워 두지 않으므로(no-footer) 흐름 안에 두고, 흐르는 로고 띠(목록 폭 300% 이상)가 가로 스크롤을 만들지 않게 자른다. 1000px 이하에서는 그리드가 풀려(display:block) 본문 아래 화면 폭 전체를 쓴다. */ .guide-home-footer {box-sizing:border-box;min-width:0;} .guide-home-footer > footer {position:static;overflow:hidden;} @media screen and (min-width:1001px) { /* 메뉴가 보이는 동안 푸터는 화면보다 331px 좁은 오른쪽 칸(그리드 2열 둘째 줄)에 있다. 공통 푸터는 화면 폭을 기준으로 최소 폭 1160·정보 영역 1360 을 고정하므로 이 칸에 맞춰 최대 폭으로 바꾼다. */ .guide-home-footer {grid-column:2;grid-row:2;} .guide-home-footer > footer .footer-inner {min-width:0;} .guide-home-footer > footer .footer-info, .guide-home-footer > footer .footer-bottom {box-sizing:border-box;width:auto;max-width:1440px;margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px;} .guide-home-footer > footer .bottom > .footer-hr {width:calc(100% - 80px);max-width:1360px;margin-left:auto;margin-right:auto;} /* 흐르는 'No.1 Design Platform' 띠의 폭 단계(1700·1380·1100·900)도 칸 폭 기준으로 331px 옮겨 건다. 글자가 겹치지 않는다. */ .guide-home-footer > footer .footer-inner .new-top .logo-wrapper .logo-list {width:400%;} } /* 1920px 보다 넓으면 그리드(최대 1920)가 가운데에 서고 푸터가 그 오른쪽 끝에서 잘려 흰 여백이 붙는다. 푸터만 화면 오른쪽 끝까지 늘린다. 스크롤바 폭만큼 넘치는 몫은 #contents 의 overflow:clip 이 자른다. */ @media screen and (min-width:1921px) { .guide-home-footer {margin-right:calc(960px - 50vw);} } @media screen and (min-width:1001px) and (max-width:1711px) { .guide-home-footer > footer .footer-inner .new-top .logo-wrapper .logo-list {width:500%;} } @media screen and (min-width:1001px) and (max-width:1431px) { .guide-home-footer > footer .footer-inner .new-top .logo-wrapper .logo-list {width:600%;} } @media screen and (min-width:1001px) and (max-width:1231px) { .guide-home-footer > footer .footer-inner .new-top .logo-wrapper .logo-list {width:700%;font-size:60px;} } /* 공통 규칙은 600px 이하에서 띠 폭을 화면의 800%(글자 55px)로 둔다. 칸 하나가 목록 폭의 1/7 이라 화면이 약 470px 보다 좁으면 칸(글자 약 510px)보다 좁아져 문구끼리 겹친다. 칸이 글자보다 좁아지지 않게 최소 폭을 둔다. */ @media screen and (max-width:600px) { .guide-home-footer > footer .footer-inner .new-top .logo-wrapper .logo-list {min-width:3780px;} } .guide-home-hero {margin-bottom:64px;text-align:center;} .guide-home-hero h1 {font-size:52px;line-height:62px;font-weight:600;letter-spacing:-.02em;word-break:keep-all;overflow-wrap:anywhere;} /* 히어로 검색 줄. 1000px 이하에서는 왼쪽에 좌측 메뉴를 여는 버튼이 함께 선다(시안 홈 1000·700·360 프레임). 바깥 여백(위 50, 가운데 정렬, 최대 750)은 줄이 가지고 검색창은 남는 폭을 채운다. 버튼과 검색창 사이는 모든 폭에서 8 이다. 넓은 화면에서는 본문 선(66)보다 16 까지 밖으로 나가 750 을 채운다(1200 프레임 20192:102977: 콘텐츠 870 가운데 검색 750). 더 좁으면 카드 상자선(50)에서 멈춘다. */ .guide-home-search-row {display:flex;align-items:center;gap:8px;box-sizing:border-box;width:auto;max-width:750px;margin:50px max(-16px, calc((100% - 750px) / 2)) 0;} .guide-home-page .guide-home-search-row > .guide-nav-btn {display:none;} /* 메뉴 버튼(시안 '전체보기' 20392:50459·50471). 상세 수납 바의 34px 원형과 달리 검색창과 같은 높이의 사각이다 — 60x60(360px 은 50x50), 테두리 1px #E0E1E5, 모서리 11, 흰 배경, 필터검색 아이콘 20(20418:55625). 서버 버튼(.guide-nav-btn)과 컴포넌트 버튼(guideHome.js 가 넘긴 .guide-home-menu-button) 모두 여기서 모양을 잡는다. 컴포넌트 버튼에는 IconButton 의 .default(모서리 7·아이콘 30)가 걸려 있어 두 단으로 덮는다. hover(#F3F3F3)는 둘 다 기본값이다. */ .guide-home-page .guide-home-search-row > .guide-nav-btn, .guide-home-page .guide-home-menu-button {box-sizing:border-box;flex:none;width:60px;height:60px;padding:0;border-radius:11px;} .guide-home-page .guide-home-search-row > .guide-nav-btn > i, .guide-home-page .guide-home-menu-button > i {width:20px;height:20px;background-repeat:no-repeat;background-position:center;background-size:20px 20px;} /* 터치 기기에서는 한 번 누른 버튼에 :hover 가 그 자리에 남는다. 서랍을 열고 조작하는 내내 버튼이 hover 색(#F3F3F3)으로 있었다(2026-10-08 실기기 점검). 컴포넌트(IconButton.module.css)의 hover 는 고치지 않으므로, 손가락만 있는 기기(hover:none)에서만 hover 배경을 흰색으로 되돌리고 누르는 동안은 :active 가 같은 색으로 눌림을 보인다. 마우스가 있는 기기(hover:hover)는 그대로 hover 가 쓰인다. :active 가 :hover 보다 뒤에 있어야 누르는 동안 이긴다. 같은 규칙이 상세 수납 바의 원형 버튼에도 있다(guideDrawer.css). */ @media (hover:none) { .guide-home-page .guide-home-menu-button:hover {background-color:#fff;} .guide-home-page .guide-home-menu-button:active {background-color:#F3F3F3;} } /* 컴포넌트 버튼은 아이콘을 인라인 배경으로 받는다. 번들이 없을 때 쓰는 서버 버튼에만 같은 아이콘을 준다. */ .guide-home-page .guide-home-search-row > .guide-nav-btn > i {background-image:url('/common/responsive/images/guide/home/menu-filter-search.svg');} .guide-home-search {display:flex;flex:1 1 auto;align-items:center;position:relative;box-sizing:border-box;width:100%;min-width:0;max-width:none;height:60px;margin:0;padding:0 16px 0 60px;border:1px solid #e0e1e5;border-radius:11px;background:#fff;} /* 상태는 템플릿 검색창(mango.css searchField)과 같다. 테두리는 그대로 두고 hover 는 옅은 그림자, 입력 중에는 배경만 바꾼다. */ .guide-home-search:hover {box-shadow:0 1px 4px 0 rgba(0,0,0,.1);} .guide-home-search:focus-within {background:#f6f7f9;} .guide-home-search input {flex:1;min-width:0;height:100%;padding:0;border:0;border-radius:0;background:none;font-size:16px;line-height:140%;letter-spacing:-.32px;color:#20232a;caret-color:#fede29;outline:none;text-overflow:ellipsis;} /* placeholder 는 시안(I20192:102110;1810:14540) 16px / -0.32px 다. 템플릿 검색창(컴포넌트 기본 15px)보다 한 단 크다. 스크립트가 없어 서버 폼이 그대로 쓰일 때도 컴포넌트(#guideHomeSearchField, 아래)와 같은 값이다. */ .guide-home-search input::placeholder {color:#aaacb0;font-size:16px;letter-spacing:-.32px;} .guide-home-search input:focus::placeholder {visibility:hidden;} .guide-home-search input::selection {background-color:#fede29;} .guide-home-search input::-webkit-search-cancel-button {display:none;} .guide-home-search button {flex:none;width:32px;height:32px;padding:0;border:0;background-color:transparent;background-position:center;background-repeat:no-repeat;cursor:pointer;} .guide-home-search-submit {position:absolute;left:17px;top:13px;background-image:url('/common/responsive/images/default/search/icon_search-16x16b.svg');background-size:24px 24px;} .guide-home-search-clear {background-image:url('/common/responsive/images/default/button/btn_delete-search.svg');background-size:20px 20px;} .guide-home-page [hidden] {display:none !important;} /* MangoReact SearchField(guide.js mountGuideSearchField). 모양·hover·입력 중 배경·커서 색은 컴포넌트(SearchField.module.css)가 그린다. 입력 관련 규칙과 아이콘은 템플릿 검색창(templates.css #mainSearchField)과 같다. - 긴 검색어는 말줄임, 입력 중에는 placeholder 를 숨긴다. - 아이콘은 같은 스프라이트(Search_Icon.png 20x40: 위 검색, 아래 지우기)다. 여기서는 폼과 같은 자리·폭만 더 정한다. */ /* 컴포넌트를 그리면 자리에 data-rm 이 붙고 공통 mango.css 가 [data-rm]{width:fit-content} 로 줄인다. 폼과 같은 폭으로 되돌린다. */ .guide-home-search-field,.guide-home-search-field[data-rm] {box-sizing:border-box;flex:1 1 auto;width:100%;min-width:0;max-width:none;margin:0;} #guideHomeSearchField {box-sizing:border-box;width:100%;height:60px;} #guideHomeSearchField > i {box-sizing:border-box;} #guideHomeSearchField input {min-width:0;text-overflow:ellipsis;} #guideHomeSearchField input::placeholder {font-size:16px;letter-spacing:-.32px;} #guideHomeSearchField input:focus {border:none;outline:none;} #guideHomeSearchField input:focus::placeholder {visibility:hidden;} #guideHomeSearchField > i:first-child::after, #guideHomeSearchField > input + i::after {content:'';display:block;width:20px;height:20px;background:url('/common/responsive/images/template/Search_Icon.png') no-repeat center/cover;background-position-y:0;} #guideHomeSearchField > input + i::after {background-position-y:-20px;} .guide-home-keywords {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:25px;} /* 빠른 검색의 접근성 이름은 nav에 제공하고, 화면에는 시안처럼 키워드만 배치한다. */ .guide-home-keywords > span {display:none;} /* 글자색과 hover 는 MangoReact 태그(rmate Tags: #70777F, hover 안쪽 테두리 #E0E1E5·글자 #3F4250 500)와 같다. 크기는 시안 칩(검색창/RecommendedTag 20192:102112) 15px/1.5, 좌우 15 — 높이 35 이고 360px 에서 두 줄 2+2 로 감긴다. */ .guide-home-keywords a {padding:6px 15px;border-radius:50px;background:#f6f7f9;color:#70777f;font-size:15px;line-height:1.5;letter-spacing:-.01em;} .guide-home-keywords a:hover {box-shadow:inset 0 0 0 1px #e0e1e5;color:#3f4250;font-weight:500;} .guide-home-section + .guide-home-section {margin-top:64px;} /* 구역 제목. 시안에서 이모지를 뺐다(2026-09-17). 글자는 카드 글·썸네일 선보다 4 안쪽에서 시작한다(타이틀 pl20 = 카드 안쪽 16 + 4). 360px 까지 같은 크기다. */ .guide-home-section > h2 {margin-bottom:15px;padding-left:4px;font-size:20px;line-height:30px;font-weight:600;letter-spacing:-.01em;color:#20232a;} .guide-home-notice:focus-visible,.guide-home-keywords a:focus-visible,.guide-home-search button:focus-visible,.guide-home-result-more:focus-visible,.guide-home-more:focus-visible {outline:3px solid #a38700;outline-offset:4px;} /* 게시물 리스트 카드 목록. 카드는 망고소식 홈과 함께 쓰는 article/articleCard.css 가 그린다. 목록을 양옆으로 16px 내어 썸네일과 글이 구역 제목·링크 카드와 같은 선에서 시작하게 한다. 본문 좌우 여백 안이라 가로 스크롤은 생기지 않는다. */ .guide-home-contents {display:flex;flex-direction:column;gap:5px;margin:0 -16px;} /* 썸네일형 줄은 카드를 줄 높이로 늘이지 않는다(시안 items-start). 설명 줄 수가 다른 카드끼리 hover 배경 높이가 달라진다. */ .guide-home-thumbs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:5px;margin:0 -16px;} /* 그림이 든 썸네일에만 안쪽 1px 5% 선을 두른다(시안 I20192:102142;20170:47345;20192:102185). 흰 바탕 그림이 배경에 묻히지 않는다. img 에는 inset 그림자가 보이지 않아 상자 위에 ::after 로 덮는다. 404 면 article.js 가 img 를 지우므로 빈 회색 상자에는 선이 없다. 망고소식 썸네일에는 선이 없다(시안 20562:248119). */ .guide-home-page .guide-home-thumb:has(img) {position:relative;} .guide-home-page .guide-home-thumb:has(img)::after {content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(21,25,32,.05);pointer-events:none;} /* 썸네일형 카드 제목은 한 줄에서 말줄임한다(시안 20192:102137·103959, 모든 폭). 글 칸이 stretch 라 폭은 카드 안으로 막힌다. 망고소식 카드는 제목을 접으므로(시안 20562:248943) 가이드 홈에만 건다. */ .guide-home-page .is-thumb .guide-home-list-text h3 {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .guide-home-list-more {display:inline-flex;align-items:center;gap:2px;margin-top:12px;padding-left:4px;color:#70777f;font-size:15px;line-height:18px;letter-spacing:-.01em;} /* 화살표는 시안 '화면크기_화살표'(4334:1916) 9x13 채운 꺾쇠다. hover(20192:51070)에서는 글자만 #3F4250 으로 진해지고 화살표 색은 그대로다. */ .guide-home-list-more:after {content:'';flex:none;width:9px;height:13px;background:url('/common/responsive/images/guide/home/more-arrow.svg') center/9px 13px no-repeat;} .guide-home-list-card:hover .guide-home-list-more {color:#3f4250;} /* 링크 카드 설명 줄(p). 망고소식 채널 카드에는 없어 가이드 홈에만 둔다. */ .guide-home-link-card p {margin:0;font-size:16px;line-height:24px;font-weight:400;letter-spacing:-.015em;color:#70777f;word-break:keep-all;overflow-wrap:anywhere;} /* 옅은 노란 안내 띠(Figma 큐레이션). 띠 전체가 FAQ 링크이고 오른쪽 알약은 표시일 뿐이다. */ .guide-home-notice {display:flex;align-items:center;gap:10px;margin-top:30px;padding:27px;border:1px solid #f0e7b3;border-radius:15px;background:#fffdf0;color:#20232a;} .guide-home-notice-text {display:flex;flex:1 1 0;flex-direction:column;gap:8px;min-width:0;padding-left:4px;} .guide-home-notice-text strong {font-size:22px;line-height:33px;font-weight:600;letter-spacing:-.015em;color:#20232a;word-break:keep-all;} .guide-home-notice-text span {font-size:16px;line-height:24px;font-weight:400;letter-spacing:-.015em;color:#70777f;word-break:keep-all;} .guide-home-notice-button {display:flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;height:41px;padding:10px 30px;border-radius:100px;background:#ffea93;color:#976700;font-size:16px;font-weight:500;letter-spacing:-.03em;white-space:nowrap;} /* 검색 결과(시안 19596:46069, 1920 프레임 19698:13833 — 검색 결과 시안은 이 한 폭뿐이다). 주소의 q 로 재현하며, 결과에는 이미지 없이 제목·경로·요약만 보여 준다. - 제목(19698:13839): 홈 히어로와 같은 52px 에 검색어(‘…’)만 SemiBold, 뒤 문장은 Regular, 두 글 사이 4. 제목 → 검색 줄 50 은 홈과 같다. 검색 줄 → 첫 묶음 64. - 묶음(19698:13848, gap 20): 머리 16px(묶음 이름 SemiBold #3F4250 + 'N개의 결과를 찾았어요' Regular #70777F, 사이 16) / 구분선 / 결과·구분선 반복 / 더보기. 마지막 결과와 더보기 사이에는 선이 없다. 묶음 사이 64. - 결과(19698:33575): py24·gap16 에 제목 22 SemiBold #20232A / 분류 경로 14 #AAACB0 / 요약 16 #70777F 한 줄 말줄임, 강조는 SemiBold #3F4250. 결과와 구분선 사이가 묶음 gap 20 이라 a 의 위아래는 44(= 24 + 20)다. 선 사이 전체를 누를 수 있게 a 가 다 가진다. 분류 경로 글은 지금 형식('망고보드 > 대분류 > …' 문자열)을 그대로 쓴다(2026-09-24 결정). 시안의 두 단 + 화살표 아이콘은 따르지 않고 글자만 맞춘다. 좁은 폭 시안은 없다. 제목은 홈 히어로 단계를 그대로 따르고, 좁은 폭에서 결과 글자만 홈 카드 값(16 / 14)으로 줄인다(아래 700px). */ @media screen and (min-width:1001px) { /* 콘텐츠 위 여백 64(19698:13838). 메뉴가 서는 폭에만 둔다. 1000px 이하는 홈과 같은 값이다. */ .guide-home-content.is-search {padding-top:64px;} } .guide-home-content.is-search .guide-home-hero {margin-bottom:64px;} .guide-home-content.is-search .guide-home-hero h1 {font-weight:400;} .guide-home-content.is-search .guide-home-hero h1 strong {margin-right:4px;font-weight:600;} .guide-home-search-status {padding:40px 0;text-align:center;color:#777e87;font-size:16px;line-height:1.7;} /* 결과 목록 폭은 1070 이다. 본문 선(1038)에서 양옆 16 을 내어 쓴다 — 카드 목록과 같은 방식이라 좁아져도 글이 칸 끝에서 50 에 선다. */ #guideHomeSearchGroups {margin:0 -16px;} .guide-home-result-group + .guide-home-result-group {margin-top:64px;} .guide-home-result-group h2 {font-size:16px;line-height:1.5;font-weight:600;letter-spacing:-.01em;color:#3f4250;} .guide-home-result-group h2 span {margin-left:16px;font-weight:400;color:#70777f;} .guide-home-result-list {margin-top:20px;border-top:1px solid #e9ebee;} .guide-home-result-list li + li {border-top:1px solid #e9ebee;} .guide-home-result-list a {display:block;padding:44px 0;} .guide-home-result-title {display:block;font-size:22px;line-height:1.5;font-weight:600;letter-spacing:-.015em;color:#20232a;word-break:keep-all;overflow-wrap:anywhere;} .guide-home-result-path {display:block;margin-top:16px;color:#aaacb0;font-size:14px;line-height:1.4;letter-spacing:0;overflow-wrap:anywhere;} /* 요약은 p 라 공통 notification.css 의 '.user-guide p {margin:0 0 10px}'(0,1,1)이 걸린다. 한 단 세게 두어 위 16·아래 0 을 지킨다. */ .guide-home-result-list .guide-home-result-summary {overflow:hidden;margin:16px 0 0;color:#70777f;font-size:16px;line-height:1.5;letter-spacing:-.015em;white-space:nowrap;text-overflow:ellipsis;} .guide-home-result-summary strong {font-weight:600;color:#3f4250;} /* 시안 제목은 통째로 SemiBold #20232A 라 따로 강조하지 않는다. 검색어 강조가 제목보다 흐려 보이지 않게 물려받기만 한다. */ .guide-home-result-title strong {font-weight:inherit;color:inherit;} /* 더보기(19698:33333 '나의작업/더보기', 주석 19698:34490 '더보기 클릭 시 이어서 검색 결과 5건씩 추가 노출' — guideHome.js). 망고소식 더보기(noticeHome.css .notice-home-more)와 같은 컴포넌트다. 공통 .btn-more(테두리 #E5E5E5·r30·#555 15px·줄 높이 47, hover·focus 검정 반전)를 쓰고 시안과 다른 값만 덮는다: 245x49, pl16 pr12, Medium, 자간 -0.45px, 화살표 14x8(8408:14623 — 망고소식과 같은 파일) + 사이 14. 폭·여백은 guide.css 의 .user-guide .btn-more(상세 검색 결과용 135 / 위 30, 0,2,0)를 이겨야 해 싣는 순서와 상관없이 한 단 세게(0,3,0) 둔다. 위 간격은 마지막 결과 a 의 아래 44(= 24 + 20)가 맡는다. */ .guide-home-more {box-sizing:border-box;padding:0 12px 0 16px;background:#fff;font-weight:500;letter-spacing:-.03em;} .user-guide.guide-home-page .guide-home-more {width:245px;margin:0 auto;} .guide-home-more span {padding-left:28px;background:url('/common/responsive/images/article/icon_more-arrow-14x8.svg') 0 50% no-repeat;} /* 불러오기 실패 때의 '다시 시도'(guideHome.jsp). 시안이 없어 예전 알약 모양을 그대로 둔다. */ .guide-home-result-more {display:block;min-width:132px;height:42px;margin:20px auto 0;padding:0 24px;border:1px solid #e1e4e8;border-radius:22px;background:#fff;color:#666d76;font-size:14px;cursor:pointer;} .guide-home-result-more:hover {background:#f7f8fa;} .guide-home-search-retry {margin-top:0;} /* 반응형은 Figma 반응형 섹션(20192:102100)의 1400·1200·1000·700·360px 프레임과 주석을 따른다. - 히어로 제목 52px 은 1000px 프레임까지 그대로다. 700px 이하는 360 프레임의 36px(2026-09-24 결정, 아래 700px 참고). - 1200px 부터 게시물 리스트 카드 제목 22 -> 18px(주석 '1200px일 때부터 텍스트 22 -> 18px로 변경'). 700px 이하는 16px. FAQ 안내 띠 제목은 이 주석에 없다. 1000px 까지 22px, 700px 이하 15px. - 위 여백과 구역 간격(배치): 1000·700px 은 50·64px, 360px(600px 이하)은 30·95px. 카드 제목 크기는 망고소식 카드(같은 클래스)와 다르므로 .guide-home-page 로 좁힌다. */ @media screen and (max-width:1200px) { .guide-home-page .guide-home-list-card h3 {font-size:18px;line-height:27px;} } /* 왼쪽 메뉴를 수납하는 구간. 시안 1000px 프레임부터 메뉴가 화면에서 빠지고 공통 헤더도 모바일형이다. 메뉴는 히어로 검색창 왼쪽 버튼으로 여는 서랍이 된다(guideDrawer.css / guideDrawer.js). 시안 1000·700px 프레임은 좌우 여백 50px 이고 카드 안쪽 16px 을 더해 글·썸네일이 66px 선에서 시작한다. 우리는 카드 목록만 양옆으로 내어 쓰므로 본문 여백을 66px 로 둔다. 위 여백은 시안의 50px 이다(상단 바가 없어졌다). 아래도 시안 콘텐츠의 50 이다 — 시안이 그 뒤에 더 둔 100 은 떠 있는 고객센터 버튼 자리인데, 이 화면은 본문 뒤에 공통 푸터가 이어져 끝까지 굴리면 버튼이 푸터 위에 온다. 검색 줄은 본문보다 34 씩 안쪽(화면 끝에서 100)이다 — 시안 1000px 800, 700px 500. */ @media screen and (max-width:1000px) { .user-guide.guide-home-page {display:block;} .guide-home-content {width:auto;max-width:none;padding:50px 66px 50px;} /* 메뉴 자리는 사라지고, 그 안의 상자만 서랍이 된다. 서랍 폭·자리는 guideDrawer.css, 서랍·시트 안쪽 여백과 검색창 폭은 guide.css(상세와 공용)가 잡는다. */ .guide-home-page .guide-top {position:static;height:0;border:0;background:none;} .guide-home-page .guide-top .inner {display:block;width:100%;max-width:none;padding:0;background:none;} /* 옛 모바일 메뉴 규칙(new-guide.css 960px)이 메뉴 목록을 감춘다. 서랍 안에서는 늘 보여야 한다. */ .user-guide.guide-home-page .lnb-wrap #guideMenu {display:block;} /* 옛 모바일 메뉴의 닫기(X) 버튼은 쓰지 않는다. 시안에 없고, 서랍은 딤을 누르거나 Esc 로 닫는다. */ .user-guide.guide-home-page .lnb-wrap .closeGuideMenu {display:none;} .guide-home-search-row {width:auto;max-width:none;margin:50px 34px 0;} .guide-home-page .guide-home-search-row > .guide-nav-btn {display:flex;} .guide-home-page .guide-home-search-row > .guide-nav-btn.is-component {display:contents;} } /* 700px 이하. 배치(레이아웃)는 700 프레임이고, 컴포넌트 모양·글자는 360 프레임 값이다(2026-09-24 결정 — 360 시안에서 바뀌는 컴포넌트는 700 단계에 붙이고, 여백·간격 같은 배치만 아래 600px(360 프레임) 단계에 둔다). - 배치: 모든 카드 줄이 한 장씩 쌓인다. 자료 카드 사이 24, FAQ 질문 사이 30(시안 20192:105369 / 20192:105349). - 컴포넌트(360 프레임): 히어로 제목 36, 검색창·메뉴 버튼 50(검색창 안쪽 좌우 16, 아이콘 상자 30 과 글 사이 10 — 20192:106273, 서버 폼 값은 테두리 1px 을 뺀 것), placeholder 14(입력 글자는 16 — iOS 는 16 보다 작은 입력 칸에 포커스하면 화면을 확대한다), 카드 제목 16 / 설명 14, FAQ 질문 14, 자료 제목 16, 안내 띠는 글 아래로 버튼을 내려 폭을 채운다. 검색 결과 글자도 카드 값(16 / 14)을 따른다. - 활용 팁 카드도 360 모양(20192:106030)이다 — 썸네일을 위로 올리고 '자세히 보기'를 뺀다. */ @media screen and (max-width:700px) { .guide-home-hero h1 {font-size:36px;line-height:1.2;} .guide-home-page .guide-home-search-row > .guide-nav-btn, .guide-home-page .guide-home-menu-button {width:50px;height:50px;} .guide-home-search {height:50px;padding-left:55px;padding-right:15px;} #guideHomeSearchField {height:50px;padding:10px 16px;gap:10px;} .guide-home-search-submit {top:8px;left:14px;} .guide-home-search input::placeholder, #guideHomeSearchField input::placeholder {font-size:14px;letter-spacing:-.28px;} .guide-home-thumbs {grid-template-columns:minmax(0,1fr);} .guide-home-links.is-faq {gap:30px;} .guide-home-list-more {display:none;} .guide-home-page .guide-home-list-card h3 {font-size:16px;line-height:24px;} .guide-home-links.is-faq .guide-home-link-card h3 {font-size:14px;line-height:21px;} .guide-home-link-card p {font-size:14px;line-height:21px;} .guide-home-notice {flex-direction:column;align-items:stretch;gap:20px;} .guide-home-notice-text strong {font-size:15px;line-height:22px;} .guide-home-notice-text span {font-size:14px;line-height:21px;} .guide-home-result-title {font-size:16px;line-height:24px;} .guide-home-result-list .guide-home-result-summary {font-size:14px;line-height:21px;} } /* 휴대폰 폭은 Figma 360px 프레임의 배치다. 좌우 여백 16px, 위 30, 구역 간격 95px(검색 영역 → 첫 구역도 같다, 20192:105993 gap), 제목과 검색 줄 사이 30. 검색 결과 목록은 칸 끝 여백이 16 이라 양옆으로 내어 쓰지 않는다. */ @media screen and (max-width:600px) { .guide-home-content {padding:30px 16px 50px;} .guide-home-hero {margin-bottom:95px;} .guide-home-search-row {margin:30px 0 0;} .guide-home-section + .guide-home-section {margin-top:95px;} #guideHomeSearchGroups {margin:0;} }