/* 망고소식 목록(/notice) 전용. Figma 20552:12338(1920 19981:42555, 반응형 1400·1200·1000·700·360)과 상태 컴포넌트를 따른다. - 페이지네이션: 화살표 20139:46542, 숫자 20134:46503 - 더보기: 20562:248868(나의작업/더보기), 화살표 8408:14623 분류 필터·검색창은 템플릿 페이지와 같은 MangoReact 컨트롤(checkComboBox·searchField)에 Figma 값을 덮어 쓴다. 카드(게시물 리스트 썸네일형)와 링크 카드(게시물 링크)는 사용가이드 홈과 함께 쓰는 article/articleCard.css 규칙을 그대로 쓴다. 가이드 홈 폭 단계를 따르지 않는 카드 제목 크기만 여기서 다시 정한다. 아이콘은 Figma 에서 내보낸 원본이다(/common/responsive/images/notice/, 사용가이드 홈과 함께 쓰는 더보기 화살표는 images/article/). */ /* 1920·1400 프레임의 본문은 1120 이고 1200·1000 프레임은 좌우 100 을 남긴다. 1320 보다 넓으면 1120 고정, 좁으면 화면 폭 - 200 이다. 위는 50, 아래는 콘텐츠 50 + 하단 칸 50 = 100 이다(1920 19981:42559 에서 푸터 앞까지, 반응형 프레임도 같다). 360 은 아래 600px 규칙. */ .notice-home {box-sizing:border-box;max-width:1320px;margin:0 auto;padding:50px 100px 100px;color:#20232a;letter-spacing:-.015em;} .notice-home [hidden] {display:none !important;} /* 구역(대표 글·목록·채널 링크) 사이는 모든 폭에서 95 다. */ .notice-home > section + section {margin-top:95px;} .notice-home-featured a:focus-visible,.notice-home-pagination button:focus-visible,.notice-home-more:focus-visible {outline:3px solid #a38700;outline-offset:2px;} /* 대표 글(1920 19981:42583). 모든 폭에서 좌우 16 을 들여 목록 제목·필터·카드 썸네일과 시작선·끝선을 맞춘다(2026-09-24 시안 변경 — 처음 시안은 1920 에 여백이 없었다). 1920 은 안쪽 1120 − 32 = 1088 에 썸네일 534x300 + 간격 50 + 글 504 다. 글 칸은 제목·설명을 위로, 넘김 화살표를 아래로 붙인다. */ .notice-home-featured {display:flex;gap:50px;padding:0 16px;} .notice-home-featured-thumb {flex:0 1 534px;min-width:0;} .notice-home-featured .guide-home-thumb {width:100%;height:auto;aspect-ratio:534/300;border-radius:15px;background:#f6f7f9;} .notice-home-featured-text {display:flex;flex:1 1 0;flex-direction:column;justify-content:space-between;gap:24px;min-width:0;} .notice-home-featured-copy {display:flex;flex-direction:column;gap:16px;color:#20232a;} .notice-home-featured-copy h2 {margin:0;font-size:30px;line-height:1.5;font-weight:600;letter-spacing:-.015em;color:#20232a;word-break:keep-all;overflow-wrap:anywhere;} .notice-home-featured-copy p {display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;margin:0;font-size:16px;line-height:1.5;letter-spacing:-.015em;color:#70777f;word-break:keep-all;overflow-wrap:anywhere;} .notice-home-featured-nav {display:flex;gap:16px;} .notice-home-featured-nav button {box-sizing:border-box;width:48px;height:48px;padding:0;border:1px solid #e0e1e5;border-radius:50%;background:rgba(255,255,255,.9) url('/common/responsive/images/notice/icon_arrow-12x18.svg') center/12px 18px no-repeat;cursor:pointer;} /* 시안의 다음 버튼은 같은 화살표를 좌우로 뒤집은 것이다. */ .notice-home-featured-next {transform:scaleX(-1);} /* 대표 글을 한 장으로 고정해 두 버튼 모두 비활성이다(2026-09-17). */ .notice-home-featured-nav button:disabled {cursor:default;opacity:.4;} /* 목록 구역. 제목·도구 줄·카드·페이지 번호(또는 더보기)를 30px 간격으로 쌓는다. */ /* 페이지를 넘기면 목록 머리로 올린다(noticeHome.js). 고정 헤더 아래에 가리지 않게 헤더 높이만큼 띄운다. */ .notice-home-list {display:flex;flex-direction:column;gap:30px;scroll-margin-top:calc(var(--header-total-height, 0px) + 30px);} /* 제목·도구 줄은 카드 상자선에서 16 들인다. 카드 썸네일(카드 안쪽 여백 16)과 시작선이 같다. */ .notice-home-list > h2 {margin:0;padding:0 16px;font-size:20px;line-height:1.5;font-weight:600;letter-spacing:-.01em;color:#20232a;} .notice-home-tools {display:flex;gap:16px;padding:0 16px;} /* 분류 필터·검색창은 템플릿 페이지와 같은 MangoReact 컨트롤이다. hover·열림 애니메이션·체크 hover 같은 효과는 컨트롤 그대로 두고, 크기·색·여백만 Figma 값으로 덮는다. 컨트롤의 클래스 이름은 빌드마다 바뀌므로 마크업 순서로 잡는다. 분류 필터(checkComboBox) — 기본 20139:46900, hover 46904, 열림 46911, 목록 20139:46664. 버튼은 폭 200, 높이는 옆 검색창(60)과 같다. 열린 상태는 noticeHome.js 가 자리에 data-open 을 달아 알려 준다. */ .notice-home-filter {position:relative;flex:0 0 200px;} .notice-home-filter .comboBox {display:block;} /* 닫힌 버튼은 분류를 골라 둬도 기본 모양(테두리 #E0E1E5, 글자·화살표 #70777F)이다. 시안 상태값(20552:12646)에 '골라 둔' 모양이 없고, '모든 콘텐츠'가 늘 체크돼 있어 컨트롤의 .selected(진한 테두리·화살표)가 늘 붙는다. 화살표는 컨트롤 기본값을 다시 그리고, 열림 모양은 [data-open] 이 입힌다. */ .notice-home-filter .comboBox > button {box-sizing:border-box;justify-content:space-between;width:100%;height:60px;padding:9px 16px;border:1px solid #e0e1e5;border-radius:11px;color:#70777f;line-height:1.4;letter-spacing:0;text-align:left;} .notice-home-filter .comboBox > button::after {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2370777F' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;} .notice-home-filter[data-open] .comboBox > button {color:#3f4250;} /* 뒤집기(rotate)는 컨트롤의 열림 규칙이 그대로 준다. */ .notice-home-filter[data-open] .comboBox > button::after {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M0.65 0.65L5.65 5.65L10.65 0.65' stroke='%233F4248' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;} /* 목록은 기본이 흐름 안(position:relative)이라 아래 카드를 밀어낸다. 시안처럼 버튼 아래 1px 을 겹쳐 띄운다. 컨트롤은 스크롤 막대 자리를 늘 비워 둬서(scrollbar-gutter:stable) 공통 막대(scroll.css 14px)만큼 오른쪽이 넓어진다. 항목이 다섯 개라 스크롤할 일이 없으니 막대 자리를 두지 않고, 열리는 동안(높이 애니메이션) 막대가 잠깐 생기지 않게 넘침도 자른다. */ .notice-home-filter .comboBox > div {position:absolute;top:calc(100% - 1px);left:0;z-index:20;box-sizing:border-box;width:200px;max-width:none;padding:8px 10px 12px;border:1px solid #e0e1e5;gap:0;overflow:hidden;scrollbar-gutter:auto;} /* 항목은 8 15 여백에 글자 14/1.4 다. mango.css 의 [data-rm] :where(*){line-height:1} 이 목록의 1.4 상속을 끊어 글자에 다시 준다. 시안 글자에는 자간이 없다. */ .notice-home-filter .comboBox > div label {height:auto;padding:8px 15px;letter-spacing:0;} .notice-home-filter .comboBox > div label > span {line-height:1.4;} .notice-home-filter .comboBox > div label > input:checked {background-color:#1c1d1f;} /* 검색창(searchField) — 기본 20139:46918, hover 46926, 입력 중 46941. 높이·테두리·hover 그림자·입력 중 배경·노란 커서는 컨트롤 값이 시안과 같다. 컨트롤이 아이콘 자리()만 두므로 Figma 아이콘을 채운다. */ .notice-home-search {flex:1 1 0;min-width:0;min-height:60px;} .notice-home-search i:first-child {background:url('/common/responsive/images/notice/icon_search.svg') center/20px 20px no-repeat;} .notice-home-search input + i, .notice-home-search input + i:hover {background-image:url('/common/responsive/images/notice/icon_close.svg');background-position:center;background-size:14px 14px;background-repeat:no-repeat;} .notice-home-search input {text-overflow:ellipsis;} /* 공통 입력 포커스 테두리를 끈다. 입력 중 표시는 상자 배경(#F6F7F9)이 맡는다(템플릿 검색창과 같다). */ .notice-home-search input:focus {border:none;outline:none;} .notice-home-search input::placeholder {font-size:16px;letter-spacing:-.32px;} /* 템플릿 검색창처럼 입력을 시작하면 안내 문구를 감춘다. */ .notice-home-search input:focus::placeholder {visibility:hidden;} /* 카드 목록. 시안은 340 카드 세 장을 50 간격으로 놓는다. */ .notice-home-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px;align-items:start;} .notice-home-card .guide-home-list-copy {gap:8px;} /* 카드 제목은 1920~1000 프레임 22px 이다(700px 이하는 360 프레임의 16 — 아래 700px 규칙). 가이드 홈의 폭 단계(1200px 부터 18px 등)는 guideHome.css 가 .guide-home-page 로 좁혀 두었지만, 같은 카드 클래스(articleCard.css)를 빌려 쓰므로 불러오는 순서와 상관없이 이 값이 서게 한 단계 세게 둔다. */ .notice-home .notice-home-card h3 {font-size:22px;line-height:1.5;} /* 배지(Figma 망고소식/대분류 20477:57767·소분류 20477:57891). 중분류는 색 배지, 소분류가 있으면 옆에 회색 배지가 붙는다. */ .notice-home-badges {display:flex;flex-wrap:wrap;gap:8px;} .notice-home-badge {padding:5px 10px;border-radius:30px;background:#f6f7f9;color:#70777f;font-size:14px;line-height:1.4;font-weight:600;letter-spacing:0;white-space:nowrap;} .notice-home-badge[data-tone="notice"] {background:rgba(45,153,234,.2);color:#2d99ea;} .notice-home-badge[data-tone="insight"] {background:rgba(150,85,240,.2);color:#9655f0;} .notice-home-badge[data-tone="feature"] {background:rgba(254,222,41,.2);color:#a47e15;} /* 시안에 없는 색이다(2026-09-17 결정). 망고보드 NEW 딱지의 초록(#5AD1A7)을 다른 배지와 같은 20% 배경 규칙으로 옮겼다. */ .notice-home-badge[data-tone="template"] {background:rgba(90,209,167,.2);color:#1f9b70;} /* 카드 hover 배경(#F6F7F9)과 같은 색이라 시안은 5% 검정을 한 겹 더 얹는다. */ .notice-home-badge.is-sub {background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05)),#f6f7f9;font-weight:400;} .notice-home-date {font-size:14px;line-height:1.4;letter-spacing:0;color:#aaacb0;} /* 빈 결과(360 프레임 20586:250548). 도구 줄에서 목록 구역 gap 만큼만 띄운다. 빈 카드 목록·페이지 번호·더보기는 noticeHome.js 가 흐름에서 뺀다. */ .notice-home-empty {margin:0;text-align:center;font-size:14px;line-height:1.4;letter-spacing:0;color:#aaacb0;} /* 페이지네이션(1201px 이상). 28px 칸, hover 는 #F6F7F9, 지금 페이지는 #F3F5F8 + 진한 글자다. */ .notice-home-pagination {display:flex;justify-content:center;align-items:center;gap:8px;} .notice-home-pagination button {display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:28px;height:28px;padding:0;border:0;border-radius:5px;background:none; color:#70777f;font-family:inherit;font-size:14px;line-height:1.4;letter-spacing:0;cursor:pointer;transition:background-color .2s;} .notice-home-pagination button:hover:not(:disabled):not([aria-current]) {background-color:#f6f7f9;} .notice-home-pagination button[aria-current="page"] {background-color:#f3f5f8;color:#3f4250;cursor:default;} /* 원본 화살표는 위를 가리킨다. 이전은 왼쪽, 다음은 오른쪽으로 돌린다. */ .notice-home-page-arrow:before {content:'';flex:none;width:20px;height:20px;background:url('/common/responsive/images/notice/icon_page-arrow.svg') center/20px 20px no-repeat;transform:rotate(-90deg);} .notice-home-page-arrow.is-next:before {transform:rotate(90deg);} .notice-home-pagination .notice-home-page-arrow:disabled {cursor:default;} .notice-home-page-arrow:disabled:before {background-image:url('/common/responsive/images/notice/icon_page-arrow-disabled.svg');} /* 더보기(701~1200px). 공통 .btn-more(테두리 #E5E5E5·r30·#555 15px, hover·focus 검정 반전)를 그대로 쓰고 시안과 다른 값만 덮는다. 위 간격은 목록 구역 gap(30)이 맡는다. 버튼 요소는 box-sizing 이 border-box 라 폭 245 를 테두리까지 넣어 둔다(높이 49 는 공통 줄 높이 47 + 테두리). 화살표 14 + 사이 14 를 글 앞에 둔다. hover·focus 때는 공통 규칙이 화살표를 공통 회색 화살표로 바꾼다. */ .notice-home-more {box-sizing:border-box;width:245px;margin:0 auto;padding:0 12px 0 16px;background:#fff;font-weight:500;letter-spacing:-.03em;} .notice-home-more span {padding-left:28px;background:url('/common/responsive/images/article/icon_more-arrow-14x8.svg') 0 50% no-repeat;} /* 다른 화면의 더보기는 href 없는 a 라 초점을 받지 않지만 이 버튼은 button 이라, 크롬에서는 누른 뒤 초점이 남아 공통 :focus 반전(검정)에 머문다. 마우스로 누른 초점(:focus-visible 아님)은 올려 두지 않았을 때 기본 모양으로 되돌린다. 키보드 초점은 공통 반전과 윤곽선 그대로다. */ .notice-home-more:focus:not(:focus-visible):not(:hover) {border-color:#e5e5e5;background:#fff;color:#555;} .notice-home-more:focus:not(:focus-visible):not(:hover) span {background-image:url('/common/responsive/images/article/icon_more-arrow-14x8.svg');} /* 하단 채널 링크. 시안은 카드 줄을 양옆 16px 들여 카드 글의 시작선에 맞춘다. */ .notice-home-channels .guide-home-links {padding:0 16px;} /* 공통 푸터(1920 프레임 20516:12147). 공통 규칙(default.css)은 페이지 맨 아래 absolute 인데 이 화면의 #contents 는 푸터 자리를 비워 두지 않으므로(no-footer) 흐름 안에 두고, 흐르는 로고 띠(목록 폭 300% 이상)가 가로 스크롤을 만들지 않게 자른다(guideHome.css .guide-home-footer 와 같다). */ .notice-home-footer > footer {position:static;overflow:hidden;} /* 반응형 프레임(1400 이하)의 대표 글은 그림·글을 1:1 로 나눈다(1401 이상은 그림 534 고정, 글 504). 498/280 은 360 프레임(480.21/270)과 같은 비율이다. */ @media screen and (max-width:1400px) { .notice-home-featured-thumb {flex:1 1 0;} .notice-home-featured .guide-home-thumb {aspect-ratio:498/280;} } /* 1200·1000 프레임은 카드 2열(열 20·줄 50)이고 페이지 번호 대신 더보기다(noticeHome.js). 대표 글 제목 30·간격 50 은 그대로다. */ @media screen and (max-width:1200px) { .notice-home-cards {grid-template-columns:repeat(2,minmax(0,1fr));gap:50px 20px;} } /* 1000 프레임은 좌우 100(안쪽 800), 700 프레임은 50(안쪽 600)이다. 그 사이는 안쪽 800 을 지키다가 900px 부터 50 으로 줄어 700 과 이어진다. 대표 글은 가로 1:1 그대로 제목·설명만 24·14 로 줄인다. */ @media screen and (max-width:1000px) { .notice-home {padding-left:max(50px, calc(50vw - 400px));padding-right:max(50px, calc(50vw - 400px));} .notice-home-featured-copy h2 {font-size:24px;} .notice-home-featured-copy p {font-size:14px;} } /* 700 이하. 배치(레이아웃)는 700 프레임, 컴포넌트 모양·글자는 360 프레임 값이다(2026-09-24 결정 — 360 시안에서 바뀌는 컴포넌트는 700 단계에 붙이고, 여백·간격·쌓기 같은 배치만 아래 600px(360 프레임) 단계에 둔다). - 배치: 대표 글은 그림 아래 20 에 글을 두고, 카드는 한 장씩 5 간격으로 쌓는다. 채널 링크는 없다(목록이 스크롤로 계속 늘어나 그 아래에 닿기 어렵다). - 넘김 버튼(360 20562:249770): 글 아래가 아니라 그림 안쪽 좌우 끝에서 세로 가운데에 뜨는 40 반투명 원이다. 비활성 .4 는 그대로 겹친다. 버튼이 글 칸 안에 있어 대표 글을 한 칸 격자로 바꾸고 글 칸을 풀어(display:contents) 그림과 버튼 줄을 같은 칸에 겹친다. 버튼 줄이 그림 가운데를 가로지르므로 줄은 누름을 통과시켜 그림 링크를 살린다. - 글자(360 프레임): 대표 글 제목 20·설명 13, 목록 제목 15, 카드 제목 16. 필터·검색창 높이 45, 안내 문구 14. */ @media screen and (max-width:700px) { .notice-home-featured {display:grid;grid-template-columns:minmax(0,1fr);gap:20px;} .notice-home-featured-text {display:contents;} .notice-home-featured-thumb, .notice-home-featured-nav {grid-area:1/1;} .notice-home-featured-copy {grid-row:2;} .notice-home-featured-copy h2 {font-size:20px;} .notice-home-featured-copy p {font-size:13px;} .notice-home-featured-nav {align-self:center;justify-content:space-between;pointer-events:none;} .notice-home-featured-nav button {width:40px;height:40px;border:2px solid rgba(255,255,255,.3);background-color:rgba(253,253,253,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto;} .notice-home-list > h2 {font-size:15px;} .notice-home-filter .comboBox > button {height:45px;} .notice-home-search {min-height:45px;} .notice-home-search > div {height:45px;gap:10px;} .notice-home-search input::placeholder {font-size:14px;letter-spacing:-.28px;} .notice-home-cards {grid-template-columns:minmax(0,1fr);gap:5px;} .notice-home .notice-home-card h3 {font-size:16px;} .notice-home-channels {display:none;} } /* 휴대폰 폭은 Figma 360 프레임의 배치다. 좌우 여백 없이 카드가 화면 끝부터 서고(썸네일은 카드 안쪽 16), 위 30·아래 50 이다. 목록 구역은 16 간격, 제목은 20 들이고, 필터를 검색창 위 한 줄로 올린다. */ @media screen and (max-width:600px) { .notice-home {padding:30px 0 50px;} .notice-home-featured-copy {padding:0 4px;} .notice-home-list {gap:16px;} .notice-home-list > h2 {padding:0 20px;} .notice-home-tools {flex-direction:column;gap:16px;} /* 컨트롤 자리에는 mango.css 의 [data-rm]{width:fit-content} 가 걸린다. 세로로 쌓을 때는 한 줄 폭으로 편다. */ .notice-home-tools > .notice-home-filter, .notice-home-tools > .notice-home-search {flex:none;width:100%;} .notice-home-filter .comboBox > div {width:100%;} /* 공통 규칙은 600px 이하에서 로고 띠 폭을 화면의 800%(글자 55px)로 둔다. 칸 하나가 목록 폭의 1/7 이라 화면이 약 470px 보다 좁으면 칸이 글자(약 510px)보다 좁아져 문구끼리 겹친다. guideHome.css 와 같은 최소 폭을 둔다. */ .notice-home-footer > footer .footer-inner .new-top .logo-wrapper .logo-list {min-width:3780px;} } /* 휴대폰 폭에서는 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 블록과 같다. 공지 상세는 noticeDetail.css 에 같은 규칙이 있다(두 화면이 서로의 CSS 를 싣지 않는다). */ @media screen and (max-width:700px) { main:has(.notice-home) {scrollbar-width:none;scrollbar-gutter:auto;} main:has(.notice-home)::-webkit-scrollbar {width:0;height:0;} }