/* ========================================================================== 헤더 · GNB · 푸터 반응형 모든 페이지가 _Layout 안에 들어가므로 여기가 되지 않으면 어떤 페이지도 반응형이 될 수 없다. 페이지별 작업보다 먼저 잡는다. 기존 스크립트를 건드리지 않는다 Scripts/renew/common.js 가 menu.more 클릭으로 .active 를 토글하고 바깥 클릭으로 닫는다. 좁은 화면에서도 이 동작을 그대로 쓰고, .sub_depth 를 절대배치 드롭다운 대신 아코디언으로 렌더링만 바꾼다. 1024px 을 경계로 삼은 이유 GNB 4개 + 로고 240px + CTA 버튼이 한 줄에 들어가는 하한이다. 이보다 좁으면 메뉴가 눌리기 시작한다. 로드 순서: bundle.css -> css.css -> tokens.css -> responsive-base.css -> header-responsive.css ========================================================================== */ /* ========================================================================== 상단 배너 슬라이더 가로 넘침 차단 Swiper 가 슬라이드 폭을 window.innerWidth 기준으로 잡는다. 수직 스크롤바가 자리를 차지하는 환경(좁은 데스크톱 창, 데스크톱 브라우저의 기기 모드)에서는 콘텐츠 폭이 innerWidth 보다 작아 슬라이드가 그만큼 넘친다. 실측: clientWidth 375 인데 .swiper-slide 가 390 -> 문서에 가로 스크롤 발생 슬라이더는 자체 transform 으로 넘기므로 래퍼를 잘라도 동작에 영향이 없다. 폭과 무관한 문제라 미디어쿼리 밖에 둔다. ========================================================================== */ #topbnr { overflow-x: hidden; } /* 햄버거 버튼은 넓은 화면에서 숨긴다 */ .mnav_toggle, .mnav_dim { display: none; } @media (max-width: 1024px) { /* ---- 상단 유틸 바 ---- 로그아웃·마이페이지·결제하기·전화번호를 좁은 화면에서는 슬라이드 패널로 옮긴다. 상단에 그대로 두면 좁게 눌려 읽기 어렵고 헤더 높이만 잡아먹는다. DOM 이동은 Scripts/common/nav-mobile.js 가 한다. bundle.css 의 링크 스타일과 구분선(li.line 배경 이미지)은 .header .header_bar .link_bar 로 스코프돼 있어, 패널로 옮기면 자동 해제된다. */ .header .header_bar { display: none; } /* ---- 패널 안 유틸 링크 ---- */ .header_wrap nav .link_bar { display: block; /* 하단에 붙인다. 내용이 길어져 스크롤이 생기면 아래 sticky 가 화면 하단에 고정하므로 밖으로 밀려나지 않는다. */ margin-top: auto; padding-top: 10px; border-top: 1px solid var(--mc-border, #e7ebf5); list-style: none; } .header_wrap nav .link_bar li, .header_wrap nav .link_bar li.line { display: block; width: auto; margin: 0; padding: 0; border: 0; background: none; line-height: normal; } .header_wrap nav .link_bar :is(a, .txt_callnum) { display: flex; align-items: center; gap: 6px; /* 34px 이었다. 손가락 기준을 맞춘다. */ min-height: 44px; padding: 8px 22px; font-size: 14px; color: var(--mc-body, #4a5468); } .header_wrap nav .link_bar .txt_callnum { font-weight: 700; color: var(--mc-ink, #0b1220); } /* 로그아웃은 form 안에 들어 있다. form 이 레이아웃을 만들지 않게 둔다. */ .header_wrap nav .link_bar form { display: block; margin: 0; } /* ---- 헤더 바 ---- */ .header_wrap .inwrap { display: flex; align-items: center; justify-content: space-between; gap: var(--mc-gap, 16px); } /* bundle.css 가 로고 h1 에 margin-left:-24px 를 준다. 1080px 고정폭 시절 좌측 정렬을 맞추려던 값이라, 여백이 좁아지면 화면 밖으로 나간다. */ .header_wrap h1, .header_wrap h1 > a, .header_wrap h1 img, #footer h1 { margin-left: 0 !important; } .header_wrap h1 img { width: 180px; height: auto; } #footer h1 img { max-width: 100%; height: auto; } /* ---- 햄버거 ---- */ .mnav_toggle { display: block; position: relative; z-index: 1002; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; } .mnav_toggle span, .mnav_toggle::before, .mnav_toggle::after { content: ""; position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 2px; background: var(--mc-ink, #0b1220); transition: transform .22s ease, opacity .18s ease; } .mnav_toggle::before { top: 15px; } .mnav_toggle span { top: 21px; } .mnav_toggle::after { top: 27px; } /* 열린 상태에서는 패널 상단 우측으로 옮긴다. 헤더 원위치에 두면 패널 중간에 X 가 떠 있는 것처럼 보인다. */ .mnav_open .mnav_toggle { position: fixed; top: 14px; right: 14px; } /* 열린 상태에서 X 로 바뀐다 */ .mnav_open .mnav_toggle::before { transform: translateY(6px) rotate(45deg); } .mnav_open .mnav_toggle span { opacity: 0; } .mnav_open .mnav_toggle::after { transform: translateY(-6px) rotate(-45deg); } /* ---- 슬라이드 패널 ---- nav 자체를 패널로 쓴다. 마크업을 옮기지 않으므로 기존 스크립트의 셀렉터(#gnb, menu.more)가 그대로 유효하다. */ .header_wrap nav { position: fixed; top: 0; right: 0; z-index: 1001; display: flex; flex-direction: column; /* bundle.css 가 align-items:center 를 준다. column 방향에서는 이게 가로 정렬이라 자식이 늘어나지 않고 콘텐츠 폭으로 줄어든다. 패널 폭을 채우려면 stretch 여야 한다. */ align-items: stretch; width: min(340px, 86vw); height: 100vh; height: 100dvh; /* 위쪽 76px 자리는 아래 ::before 띠가 대신한다 */ padding: 0 0 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--mc-surface, #fff); box-shadow: -18px 0 48px -24px rgba(11, 18, 32, .35); transform: translateX(100%); transition: transform .26s cubic-bezier(.22, .61, .36, 1); visibility: hidden; } /* ---- 패널 상단 띠 ---- 닫기 버튼(.mnav_toggle)은 fixed 라 스크롤해도 제자리인데 뒤가 비어 있어, 메뉴를 펼쳐 내리면 상단 유틸 카드가 X 뒤로 지나갔다. 패널의 첫 자식으로 흰 띠를 세우고 sticky 로 붙잡는다. nav 는 flex column 이므로 ::before 는 그냥 첫 flex 아이템이 된다. 버튼이 top:14 ~ bottom:58 이라 72px 이면 아래로 14px 남는다. */ .header_wrap nav::before { content: ""; flex: 0 0 76px; position: sticky; top: 0; z-index: 2; /* 실선을 그으면 아무것도 안 가린 상태에서도 로그인·회원가입 카드 위에 선이 하나 떠 있는 것으로 보인다(무엇을 나누는 선인지 알 수 없다). 대신 아래 10px 을 흐리게 떨어뜨려, 스크롤할 때 내용이 띠 밑으로 사라지는 것만 보이게 한다. */ background: linear-gradient(to bottom, var(--mc-surface, #fff) 0 66px, rgba(255, 255, 255, 0) 76px); } .mnav_open .header_wrap nav { transform: none; visibility: visible; } /* 뒤 배경 */ .mnav_dim { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(11, 18, 32, .45); opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility .26s ease; } .mnav_open .mnav_dim { opacity: 1; visibility: visible; } /* 패널이 열린 동안 본문 스크롤을 막는다 */ body.mnav_open { overflow: hidden; } /* ---- 패널 안 메뉴 ---- 가로 배치를 세로로 bundle.css 가 #gnb 와 그 자식 li 에 고정폭을 준다. 풀지 않으면 메뉴와 하위 메뉴가 패널 폭을 못 채우고 가운데 몰린 것처럼 보인다. */ .header_wrap nav #gnb { order: 1; display: block !important; float: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; /* CTA·계정 블록과 같은 좌우 여백. 항목이 카드라 목록이 여백을 갖는다. */ padding: 4px 10px !important; } .header_wrap nav #gnb > li { display: block !important; float: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; /* 구분선으로 줄 세우지 않는다. 항목 자체가 카드다. */ border-bottom: 0; } .header_wrap nav #gnb > li + li { margin-top: 2px !important; } /* bundle.css 의 .header #gnb > li menu:not(...) 가 (1,2,2) 라 .header 를 하나 더 얹어야 이긴다. 안 그러면 padding 이 통째로 무시되어 항목이 34px 로 눌린다. */ .header .header_wrap nav #gnb > li > menu { display: flex; align-items: center; /* 블로그 항목은 마크업에 인라인 justify-content:center 가 박혀 있어 같은 강도로 받는다 */ justify-content: flex-start !important; gap: 6px; margin: 0; /* 손가락으로 누르는 목록이다 */ min-height: 52px; padding: 14px 12px; border-radius: 12px; font-size: 16px; font-weight: 700; transition: background-color .15s ease; /* bundle.css 가 가운데 정렬이라 되돌린다 */ text-align: left; color: var(--mc-ink, #0b1220); cursor: pointer; } /* ---- 글자만 클릭되던 항목 ---- 블로그·공지사항은 글자 구조다. menu 를 키워도 a 는 글자 크기(43x17) 그대로라 여백을 누르면 이동하지 않았다. 패딩을 a 로 옮겨 칸 전체가 링크가 되게 한다. */ .header .header_wrap nav #gnb > li > menu:has(> a) { position: relative; /* 좌우 여백은 menu 가 맡는다. a 는 글자 크기로 둬야 옆의 배지가 글자에 붙는다. */ padding: 0 12px; border-radius: 12px; gap: 6px; } .header .header_wrap nav #gnb > li > menu > a { display: flex; flex: 0 1 auto; align-items: center; min-height: 52px; padding: 14px 0; color: inherit; } /* 글자만 눌리던 문제는 오버레이로 푼다. a 를 늘리면 배지가 칸 끝으로 밀린다. */ .header .header_wrap nav #gnb > li > menu > a::after { content: ""; position: absolute; inset: 0; } /* 배지는 오버레이 위로 올려 가려지지 않게 한다 */ .header .header_wrap nav #gnb > li > menu > a ~ * { position: relative; z-index: 1; } /* 하위 메뉴가 있는 항목에 화살표 */ .header .header_wrap nav #gnb > li > menu.more::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--mc-muted, #7c87a0); border-bottom: 2px solid var(--mc-muted, #7c87a0); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; } .header .header_wrap nav #gnb > li > menu.more.active::after { transform: rotate(-135deg) translate(-2px, -2px); } /* ---- 하위 메뉴 ---- 데스크톱은 절대배치 드롭다운이다. 여기서는 아코디언으로 편다. 열림 여부는 기존 스크립트가 붙이는 menu.more.active 를 그대로 쓴다. */ /* 데스크톱 드롭다운은 left:50% + translateX(-50%) 로 가운데 정렬돼 있고 폭도 고정이다. position 만 static 으로 바꾸면 transform 이 남아 패널 왼쪽으로 삐져나간다. 기하 속성은 전부 되돌려야 하고, bundle.css 쪽 선택자가 더 강한 경우가 있어 이 블록에서는 !important 로 받는다. */ .header_wrap nav #gnb .sub_depth { position: static !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; display: none; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 4px 0 12px; border: 0; box-shadow: none; background: var(--mc-tint, #f4f7fe); } .header_wrap nav #gnb > li > menu.more.active + .sub_depth { display: block; } /* bundle 의 float·고정폭을 푸는 규칙이다. display 는 여기서 정하지 않는다 — 아래에서 묶음을 2열 grid 로 배치하는데 여기에 block !important 가 있으면 그게 이긴다. */ .header_wrap nav #gnb .sub_depth ul, .header_wrap nav #gnb .sub_depth li { float: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; /* margin 은 여기서 정하지 않는다. 0 !important 로 박아 두면 아래에서 묶음 간격을 줄 수 없다. */ padding: 0; border: 0; } /* 열린 하위 메뉴는 옅은 바탕으로 묶어 어디까지가 그 메뉴인지 보이게 한다 (모바일 사이트도 #f3f6f9 를 쓴다) */ .header .header_wrap nav #gnb > li > menu.more.active + .sub_depth { background: var(--mc-tint, #f3f6f9); } /* 묶음은 세로로 쌓고, 묶음 안의 링크만 칩으로 가로 배열한다. 2열 그리드는 묶음 높이가 176/132 로 어긋나고 5개 중 하나가 혼자 남아 어색했다. */ .header .header_wrap nav #gnb .sub_depth > ul { display: block !important; padding: 0 !important; } /* 묶음 안쪽의 중첩 ul 도 흐름대로 */ .header .header_wrap nav #gnb .sub_depth ul ul { display: block; } .header .header_wrap nav #gnb .sub_depth > ul > li { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; min-width: 0; padding: 6px 0 !important; } /* 묶음 사이 경계. 선 바로 아래 7px 에 제목이 붙어 있었다. 위 묶음의 마지막 칩(높이 40, 글자 12)이 아래로 14px 을 남기고 끝나 선 위는 20px 인데 아래는 7px 이라 제목이 윗 묶음에 딸려 보였다. 위 규칙의 padding 이 shorthand + !important 라 여기서도 받는다. */ .header .header_wrap nav #gnb .sub_depth > ul > li + li { border-top: 1px solid rgba(11, 18, 32, .06); padding-top: 16px !important; } /* ---- 대표 칸 (모바일) ---- PC 의 틴트 면·큰 제목·둥근 모서리를 전부 min-width:1025px 안에 두어 모바일에는 하나도 안 갔다. 실측하면 면 투명 · 모서리 0 · 패딩 6px 0 · 제목 12px/700/muted 로, 설명 한 줄만 더 붙은 '첫 번째 묶음' 이었다. 여기서는 반대로 간다. 아코디언 지면이 이미 틴트(#f4f7fe)라 PC 처럼 틴트를 깔면 묻힌다 — 흰 카드로 띄운다. */ .header .header_wrap nav #gnb .sub_depth > ul > li.feature { margin-bottom: 12px; padding: 16px 16px 14px !important; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px -12px rgba(11, 18, 32, .22); } /* 카드가 이미 경계를 만든다. 바로 아래 묶음의 윗선은 중복이다. */ .header .header_wrap nav #gnb .sub_depth > ul > li.feature + li { border-top: 0; padding-top: 6px !important; } /* 제목은 라벨이 아니라 제목이다 */ .header .header_wrap nav #gnb .sub_depth > ul > li.feature menu a { font-size: 16px; font-weight: 700; color: var(--mc-ink, #0b1220); } /* 카드 안에서는 한 선에서 시작한다. 실측(390, 카드 왼쪽 기준): 설명 16px · 제목 26px · 링크 34px 로 셋이 다 달랐다. 일반 묶음의 들여쓰기(menu 10px, a 18px)가 카드 안까지 따라 들어온 탓이다. 그 들여쓰기는 '라벨 아래 항목' 관계를 보여 주려는 것인데, 카드에서는 제목이 라벨이 아니라 카드의 제목이라 항목을 들여쓸 이유가 없다. 묶음 제목 규칙이 padding 을 !important 로 박아 두어 여기서도 !important 로 받는다. */ .header .header_wrap nav #gnb .sub_depth > ul > li.feature menu { padding-left: 0 !important; } .header .header_wrap nav #gnb .sub_depth > ul > li.feature > a { padding-left: 0; } /* 대표 칸 설명 — PC 에서 추가한

가 여기서는 항목 2열 그리드의 한 칸으로 들어가, 왼쪽 칸에서 좁게 접히고 '서비스 소개' 가 옆으로 밀려 읽는 순서가 엉켰다. 제목처럼 한 줄을 통째로 쓰게 한다. 가운데 정렬도 헤더에서 물려받은 것이라 왼쪽으로 되돌린다. */ .header .header_wrap nav #gnb .sub_depth > ul > li.feature p { grid-column: 1 / -1; margin: 2px 0 6px; font-size: 13px; line-height: 1.5; text-align: left; color: var(--mc-body, #4a5468); word-break: keep-all; } /* 묶음 제목 — 한 줄을 통째로 쓰고, 링크와 확실히 다르게 */ .header .header_wrap nav #gnb .sub_depth menu { /* 제목은 두 열을 가로질러 한 줄을 차지한다 */ grid-column: 1 / -1; margin: 0 0 4px !important; padding: 0 10px !important; font-size: 12px; font-weight: 700; letter-spacing: .01em; color: var(--mc-muted, #7c87a0); } .header .header_wrap nav #gnb .sub_depth menu a { display: inline; min-height: 0; padding: 0; font: inherit; color: inherit; } .header .header_wrap nav #gnb .sub_depth > ul > li > a { display: flex; align-items: center; min-height: 36px; /* 제목보다 한 단 들여쓴다. 2열이라 좌우 여백은 줄인다. */ padding: 0 6px 0 18px; border-radius: 8px; font-size: 14px; line-height: 1.4; color: var(--mc-body, #4a5468); } /* 하위 그룹 제목 */ .header_wrap nav #gnb .sub_depth menu { margin: 0; padding: 0; } .header_wrap nav #gnb .sub_depth menu a { padding-left: 22px; font-weight: 600; color: var(--mc-ink, #0b1220); } /* ---- 패널 하단 CTA ---- */ .header_wrap nav > button { /* calc(100% - 44px) 를 쓰면 flex 자식이라 기준이 어긋나 패널 폭 그대로가 되고, 거기에 좌우 여백 44px 이 더 붙어 22px 잘렸다. 폭은 stretch 에 맡긴다. */ width: auto; align-self: stretch; margin: 20px 22px 0; padding: 14px 0; border: 0; border-radius: var(--mc-radius-sm, 10px); background: var(--mc-grad, #2b5bff); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; } /* ---- 푸터 ---- 다단을 세로로 */ #footer .footer_m .inwrap, #footer .footer_bottom .inwrap { display: flex; flex-direction: column; gap: var(--mc-gap, 16px); } #footer .foot_link { flex-wrap: wrap; gap: 6px 14px; } #footer .family_site { position: static; width: 100%; max-width: 320px; } #footer .foot_info { line-height: 1.7; } } /* ========================================================================== 광고상담 · TOP 플로팅 버튼 — 모든 폭 공통 생김새 1280px 실측(고치기 전) .cs 80px(→scale .8 로 64) 원 안에 '광고상담' 네 글자. 글자가 원 좌우로 삐져나왔다. 아이콘은 fill #e3e3e3 이라 보라 배경에서 흐렸다. .btn_top 흰 원에 1px #e0e0e0 테뿐. 바로 위 배너는 그림자가 있는데 버튼 둘만 없어서 같은 묶음으로 안 보였다. 원에 안 들어가는 네 글자는 알약으로 눕히고, 결제 버튼과 같은 --mc-grad 를 쓴다. 크기만 아래 768 블록에서 줄인다. index_pc.css 가 이 파일보다 뒤에 로드되고 선택자가 #footer .quick_menu (1,1,0) 로 같다. 순서로 지므로 body 를 붙여 (1,1,1) 로 받는다. ========================================================================== */ body #footer .quick_menu .cs { flex-direction: row; gap: 8px; width: auto; height: 56px; padding: 0 22px; border-radius: var(--mc-radius-pill); /* background 축약은 쓰지 않는다. ::before 의 아이콘까지 지운 적이 있다. */ background-color: var(--mc-blue, #2b5bff); background-image: var(--mc-grad, linear-gradient(96deg, #2b5bff 8%, #7c3aed 92%)); /* 그림자는 파란 번짐을 줄이고 잉크 접지를 얇게 더한다. 예전 값(0 14px 30px -10px, 파랑 .55)은 흰 카드 톤의 소개 화면에서 버튼 둘레에 파란 안개가 퍼져, 색보다 그림자가 먼저 눈에 띄었다. */ box-shadow: 0 8px 20px -8px rgba(43, 91, 255, .36), 0 2px 6px rgba(11, 18, 32, .08); font-size: 16px; font-weight: 700; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease; } body #footer .quick_menu .cs:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(43, 91, 255, .44), 0 2px 6px rgba(11, 18, 32, .08); } body #footer .quick_menu .cs::before { width: 22px; height: 22px; aspect-ratio: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'%3E%3Cpath d='M320-520q17 0 28.5-11.5T360-560q0-17-11.5-28.5T320-600q-17 0-28.5 11.5T280-560q0 17 11.5 28.5T320-520Zm160 0q17 0 28.5-11.5T520-560q0-17-11.5-28.5T480-600q-17 0-28.5 11.5T440-560q0 17 11.5 28.5T480-520Zm160 0q17 0 28.5-11.5T680-560q0-17-11.5-28.5T640-600q-17 0-28.5 11.5T600-560q0 17 11.5 28.5T640-520ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z'/%3E%3C/svg%3E"); background-size: contain; } /* 광고대행(/Ads/*) 화면 — PC 는 떠 있는 "무료 상담 신청" 폼이 상담 경로라 알약을 숨긴다. 좁은 화면은 그 폼을 접으므로(아래 768 블록) 알약이 대신 선다. .has-counsel 은 _Layout.cshtml 의 FREE_COUNSEL_PAGES 분기가 붙인다. */ @media (min-width: 769px) { body #footer .quick_menu.has-counsel .cs { display: none; } } body #footer .quick_menu .btn_top { width: 56px; height: 56px; border: 1px solid var(--mc-border, #e7ebf5); border-radius: 50%; background-color: var(--mc-surface, #fff); box-shadow: 0 8px 20px -8px rgba(11, 18, 32, .28); transition: transform .15s ease, border-color .15s ease; } body #footer .quick_menu .btn_top:hover { transform: translateY(-2px); border-color: var(--mc-blue, #2b5bff); } /* 원 안에 화살표와 'TOP' 을 같이 넣으면 둘 다 작아진다. 글자만 접는다. font-size:0 이라 화면에서만 사라지고 링크 텍스트는 남는다. */ body #footer .quick_menu .btn_top span { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0; font-size: 0; } body #footer .quick_menu .btn_top span img { width: 20px; height: 20px; } /* index_pc.css 는 1660 이하에서 묶음 전체에 scale:.8 을 건다. 배너를 줄이려던 것인데 글자까지 12.8px 이 된다. 줄이는 대상을 배너 하나로 좁힌다. 묶음이 차지하는 폭은 192px 로 같다. */ @media (max-width: 1660px) { body #footer .quick_menu { scale: 1; } /* width 만 줄이면 Swiper 가 잡아 둔 높이가 남아 아래에 빈 자리가 생긴다. zoom 은 레이아웃 상자까지 함께 줄여 비율이 그대로 간다. */ body #footer .quick_menu .quick-slider { zoom: .8; } } /* 햄버거 패널이 열리면 플로팅 버튼을 감춘다. .quick_menu 는 z-index 10002 라 패널(1001)·딤(1000) 위로 떠서 메뉴를 가렸다. 스크립트가 body 에 .mnav_open 을 붙인다. opacity 로는 못 끈다. Scripts/renew/common.js 가 스크롤에 맞춰 .animate({opacity}) / .show() 로 인라인 값을 잡고 있어서 CSS 가 진다. 인라인이 없는 visibility 로 끈다. */ body.mnav_open #footer .quick_menu { visibility: hidden; pointer-events: none; } /* ========================================================================== 768px 이하 ========================================================================== */ @media (max-width: 768px) { .header_wrap h1 img { width: 150px; } .header_bar .link_bar { font-size: 12px; } #footer .sns_area { flex-wrap: wrap; } } /* ========================================================================== 헤더 CTA — [다이애드 시작하기] 마크업에 클래스가 없다(_Layout 의 nav > button). 구조로 집는다. 전역이다. 헤더는 페이지 콘텐츠가 아니라 공통 뼈대이고, 같은 버튼이 모든 화면 우측 상단에 그대로 나온다. ========================================================================== */ .header_wrap nav > button { height: 40px; padding: 0 20px; border: 0; border-radius: var(--mc-radius-pill); background: var(--mc-grad, linear-gradient(96deg, #2b5bff 8%, #7c3aed 92%)); font-family: inherit; font-size: 14px; /* 레거시는 400 이었다. 가장 중요한 CTA 가 본문 주 버튼(700)보다 약했다. */ font-weight: 700; /* -1px 은 15px 글자에 너무 좁다 */ letter-spacing: -.02em; line-height: 1; color: #fff; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(43, 91, 255, .65); transition: filter .15s ease, box-shadow .15s ease; } .header_wrap nav > button:hover { filter: brightness(1.06); box-shadow: 0 12px 26px -12px rgba(43, 91, 255, .8); } .header_wrap nav > button:active { filter: brightness(.97); } @media (max-width: 1024px) { /* 좁은 화면에서는 nav 가 슬라이드 패널이 된다. 폭은 위 블록의 stretch 가 정한다. 여기서 width:100% 를 주면 좌우 여백 44px 이 그대로 더해져 패널 밖으로 22px 나간다. */ .header_wrap nav > button { /* 패널은 flex column 이다. 아코디언이 펼쳐져 내용이 길어지면 shrink 기본값 1 때문에 버튼이 눌린다. */ flex: 0 0 auto; min-height: 48px; font-size: 16px; /* 패널 맨 아래. 계정이 위로 갔으니 하단에 고정할 것은 이것뿐이다. */ order: 2; position: sticky; bottom: 0; z-index: 1; } } /* ========================================================================== 사이드 패널 — 마감 항목을 카드로 바꾼 뒤의 상태 표현과 묶음 처리. ========================================================================== */ @media (max-width: 1024px) { /* 누르는 중 · 펼친 상태를 배경으로 알린다 */ .header .header_wrap nav #gnb > li > menu:active, .header .header_wrap nav #gnb > li > menu.more.active { background: var(--mc-tint, #f4f7fe); } .header .header_wrap nav #gnb > li > menu.more.active { color: var(--mc-blue, #2b5bff); } .header .header_wrap nav #gnb > li > menu.more.active::after { border-color: var(--mc-blue, #2b5bff); } /* 펼친 하위 메뉴는 카드로 묶어 부모 항목에 딸린 것으로 보이게 한다 */ .header .header_wrap nav #gnb > li > menu.more.active + .sub_depth { margin: 8px 0 10px !important; padding: 8px !important; border-radius: 12px; background: var(--mc-tint, #f4f7fe); } .header .header_wrap nav #gnb .sub_depth > ul { padding: 0 !important; } .header .header_wrap nav #gnb .sub_depth a { border-radius: 8px; font-weight: 500; } .header .header_wrap nav #gnb .sub_depth a:active { background: #fff; } /* 그룹 제목이 없는 항목(솔루션문의 · 매뉴얼/FAQ, 광고상담 · 포트폴리오)은 다른 묶음과 성격이 달라 흰 카드로 묶는다. 로그인 상태에서는 솔루션문의가 form 안에 들어가므로 form 도 같이 편다. */ .header .header_wrap nav #gnb .sub_depth > ul > li:not(:has(menu)) { grid-template-columns: 1fr; margin-top: 8px !important; padding: 2px !important; border-top: 0; border-radius: 10px; background: #fff; } .header .header_wrap nav #gnb .sub_depth > ul > li:not(:has(menu)) + li:not(:has(menu)) { margin-top: 6px !important; } .header .header_wrap nav #gnb .sub_depth > ul > li:not(:has(menu)) form { display: contents; } .header .header_wrap nav #gnb .sub_depth > ul > li:not(:has(menu)) a { display: flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--mc-ink, #0b1220); } /* 외부 링크 표시가 background-position:100% 라 카드 오른쪽 끝에 딱 붙었다. 링크를 글자 폭으로 줄여 아이콘이 글자를 따라오게 하고, 클릭 영역은 카드 전체를 덮는 오버레이로 유지한다. */ .header .header_wrap nav #gnb .sub_depth li:has(> .ico-link), .header .header_wrap nav #gnb .sub_depth li:has(> form > .ico-link) { position: relative; } .header .header_wrap nav #gnb .sub_depth .ico-link { width: -moz-fit-content; width: fit-content; padding-right: 26px; background-position: right 4px center; } .header .header_wrap nav #gnb .sub_depth .ico-link::before { content: ""; position: absolute; inset: 0; } /* 계정 링크는 흘려보내지 않고 한 덩어리로 묶는다 */ .header_wrap nav .link_bar { /* 패널 맨 위. 메뉴보다 먼저 온다. */ order: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 0 10px 10px; padding: 6px; border-top: 0; border-radius: var(--mc-radius); background: var(--mc-tint, #f4f7fe); } /* 로그인 상태에서는 링크들이 form 안에 들어간다 */ .header_wrap nav .link_bar form { display: contents; } .header_wrap nav .link_bar li { min-width: 0; } /* 전화번호는 푸터에 크게 있다. 패널에서는 뺀다. */ .header_wrap nav .link_bar li:has(.txt_callnum) { display: none; } .header_wrap nav .link_bar :is(a, .txt_callnum) { justify-content: center; min-height: 38px; padding: 0 6px; border-radius: var(--mc-radius-sm); font-size: 14px; font-weight: 600; white-space: nowrap; } .header_wrap nav .link_bar a:active { background: #fff; } /* 전화번호는 링크가 아니라 정보다. 색으로 구분한다. */ .header_wrap nav .link_bar .txt_callnum { color: var(--mc-blue, #2b5bff); font-weight: 700; } /* CTA 와 계정 블록 사이 숨통 */ .header_wrap nav > button { /* auto 가 남은 공간을 밀어 하단에 붙인다 */ margin: 16px 10px 0; margin-top: auto; border-radius: 12px; } } /* ========================================================================== 상단 배너 — 좁은 화면 (모바일 사이트 스타일 이식) 두 프로젝트의 마크업이 클래스까지 같고 이미지도 같은 파일(1360x200)이라 CSS 만 옮기면 된다. 참조: MC_mobile/.../Content/css/bundle.css PC 기본값은 좁은 화면에 안 맞는다. .swiper-slide > a { height: 100px } — 이미지 비율(6.8:1)과 무관한 고정 높이 .texts b { clamp(18px, 1.9vw, 24px) } — 390px 에서 18px. 배너가 57px 인데 크다 .swiper-navigation button { 50px, left/right 30% } — 문구 위를 덮는다 .topbnr_close — "오늘 하루 보지 않기" 14px 텍스트가 폭을 많이 먹는다 ========================================================================== */ @media (max-width: 768px) { /* 모바일 프로젝트는 100vw 로 못박았다. 그쪽 #wrap 이 inline-table 이라 슬라이드가 늘면 폭이 증식하기 때문이다. PC 의 #wrap 은 block 이라 그 위험이 없고, 100vw 는 세로 스크롤바를 포함해 그만큼 넘친다. */ #topbnr .topbnr-slider { width: 100%; overflow: hidden; } /* 이미지가 높이를 정한다. 390px 에서 1360x200 -> 57px */ #topbnr .swiper-slide > a { display: block; height: auto; } #topbnr .swiper-slide > a > img { display: block; width: 100%; height: auto; } #topbnr .texts { left: 15px; top: 0; bottom: 0; width: calc(100% - 30px); height: auto; gap: 3px; text-align: center; } /* 1360x200 배너가 390px 에서 57px 띠가 된다. 그 안에 두 줄이 들어가면 좌우 아트워크(캐릭터·목업)에 글자가 닿는다. 이미지는 마케팅 자산이라 그대로 두고, 글자에 그림자를 넣어 어디에 얹혀도 읽히게 한다. */ #topbnr .texts b, #topbnr .texts span { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); } #topbnr .texts b { font-size: 14px; font-weight: 500; line-height: 1.2; } #topbnr .texts span { font-size: 12px; font-weight: 400; line-height: 1.25; } /* 퍼스트몰 배너는 좌측 캐릭터보다 우측 채팅 목업이 넓어 비어 있는 구간의 중심이 배너 중심보다 왼쪽에 있다. %는 스와이퍼 래퍼 폭 기준으로 잡혀 엉뚱한 값이 나오므로 px 로 고정한다. */ #topbnr .swiper-slide.firstmall-promo .texts { transform: translateX(-13px); } /* 좌우 화살표는 50px 짜리가 문구 위를 덮는다. 좁은 화면에서는 스와이프로 넘긴다. */ #topbnr .swiper-navigation { display: none; } /* 닫기 버튼이 둘이다. .topbnr_close_bnr 배너만 닫기 (16px, PC 전용) .topbnr_close 오늘 하루 보지 않기 좁은 화면에서는 364/355 위치로 겹쳐 보인다. 모바일 프로젝트에는 앞엣것이 아예 없다 — 여기서도 접고 '오늘 하루' 만 남긴다. */ #topbnr .topbnr_close_bnr { display: none; } /* 닫기는 문구 자리를 먹지 않게 원형 아이콘으로. 모바일 사이트는 icon_close.png 를 쓰지만 PC 에는 이미 흰색 ico_close_white.svg 가 있어 그걸 쓴다(filter:invert 불필요). 누르는 면은 40x40 이고 보이는 것은 가운데 12px 아이콘뿐이다. 상자에 배경도 테두리도 없어서, 상자를 키워도 화면은 달라지지 않는다. 스와이퍼 점·물음표 툴팁은 ::after 로 면을 넓혔지만 여기서는 못 쓴다 — text-indent 로 밀어낸 글자를 감추려고 overflow:hidden 을 걸어 둬서 가상요소가 잘린다. 그래서 상자 자체를 키우고 위치로 되돌린다. right 15 -> 5 (상자가 왼쪽으로 20 커지므로 10 을 되돌린다) bottom -10 -> -20 (세로 중심을 50% 에 유지한다) 아이콘 중심은 두 값 모두 바뀌기 전과 같은 자리다. */ #topbnr .topbnr_close { display: block; overflow: hidden; position: absolute; bottom: calc(50% - 20px); right: 5px; z-index: 10; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: url("/Content/images/main/ico_close_white.svg") center/12px no-repeat; font-size: 0; text-indent: -100vw; } /* 밝은 배경 프로모션에서는 아이콘을 어둡게 */ #topbnr.light-promo .topbnr_close { filter: invert(1); } } /* ========================================================================== 터치 타깃 — 헤더 · 푸터 (전 페이지 공통) 실측(메인 448px): 누를 수 있는 요소 61개 중 33개가 44px 미달이었고, 그중 상당수가 모든 페이지에 나오는 헤더·푸터 요소다. ul.foot_link a 46x28 / 93x28 / 104x28 로고 링크 a 150x25 / 264x30 글자 크기는 그대로 두고 눌리는 영역만 넓힌다(iOS 44 기준). ========================================================================== */ @media (max-width: 768px) { #footer .foot_link a, #footer .family_site .btn_familysite { display: inline-flex; align-items: center; min-height: 44px; } /* 로고는 이미지 높이가 정해져 있어 padding 으로 영역만 넓힌다 */ .header_wrap h1 > a, #footer h1 > a, #footer .footer_m h1 > a { display: inline-flex; align-items: center; min-height: 44px; } } /* 터치 타깃 — 푸터 SNS · 상단 배너 닫기 (전 페이지 공통) 실측: 푸터 SNS 아이콘 28x18 x3, 상단 배너 닫기 20x20 / 16x16. 닫기 히트 영역 확장을 처음에 css/Home/Index.css 에 넣었는데 그 파일은 메인에서만 링크한다. 배너는 _Layout 에 있어 전 페이지에 나온다. 여기가 맞는 자리다. */ @media (max-width: 768px) { #footer .sns_area a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* 아이콘 자체는 그대로 두고 눌리는 영역만 겹쳐 넓힌다 (실제 크기를 키우면 배너 문구 자리를 먹는다) position 은 절대 건드리지 않는다. 두 버튼은 배너 위에 absolute 로 겹쳐 놓은 것이라, relative 로 바꾸면 흐름으로 돌아와 배너 아래에 빈 줄이 생긴다. ::after 는 absolute 조상도 기준으로 삼으므로 relative 를 줄 필요가 없다. */ #topbnr .topbnr_close::after, #topbnr .topbnr_close_bnr::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } } /* 헤더 우측 메뉴 항목 터치 높이 (실측 335x40) */ @media (max-width: 1024px) { /* 로그인 상태에서는 li 가 form.navbar-right 안에, 비로그인 상태에서는 ul.link_bar 바로 아래에 온다. 둘 다 잡으려면 .link_bar 기준이어야 한다. */ .link_bar li > a, #header .link_bar li > a, .navbar-right li > a, #header .navbar-right li > a { display: flex; align-items: center; min-height: 44px; } } /* ========================================================================== 우측 퀵메뉴 — 좁은 화면 ========================================================================== */ @media (max-width: 768px) { /* 사이드 프로모션 배너는 접는다. 192x270 이 화면 절반을 덮었다. */ #footer .quick_menu .quick-slider { display: none; } /* 광고 소개 페이지의 플로팅 상담 폼(296x426)도 접는다. 초기부터 펼쳐져 있어 본문의 3분의 2를 가렸다. 본문 하단 .section-contact 에 같은 상담 경로가 있다. */ #footer .quick_menu :is(#submit_form, .free_cs).counselArea { display: none; } /* ---- 광고상담 · TOP ---- 생김새는 위 공통 블록에 있다. 여기서는 크기만 줄인다. 390px 에서 알약 104x48, TOP 44px. 둘이 세로로 102px 을 차지한다. */ body #footer .quick_menu { right: 16px; bottom: 16px; gap: 10px; } body #footer .quick_menu .cs { gap: 6px; height: 48px; padding: 0 16px; box-shadow: 0 6px 16px -6px rgba(43, 91, 255, .34), 0 2px 5px rgba(11, 18, 32, .08); font-size: 14px; /* 스크롤하는 동안은 원으로 접는다(.is-compact 는 renew/common.js 가 붙이고 멈추면 1초 뒤 뗀다). 390px 실측: 알약 104x48 이 스크롤 내내 본문 오른쪽 글줄을 가렸다(기능 목록 설명이 두세 줄씩 묻혔다). width:auto 는 전이가 안 되므로 max-width 로 접고 글자는 넘침으로 숨긴다. 글자는 DOM 에 그대로 있어 링크 이름은 바뀌지 않는다. */ max-width: 160px; overflow: hidden; justify-content: flex-start; transition: max-width .24s ease, padding .24s ease, color .12s ease, transform .15s ease, box-shadow .15s ease; } body #footer .quick_menu .cs::before { flex: none; width: 20px; height: 20px; } /* 48 원 = 아이콘 20 + 좌우 14 */ body #footer .quick_menu.is-compact .cs { max-width: 48px; padding: 0 14px; /* 아이콘 20 + gap 6 뒤 글자 앞부분이 원 안에 걸쳐 '광' 조각이 비쳤다 */ color: transparent; } body #footer .quick_menu .btn_top { width: 44px; height: 44px; box-shadow: 0 6px 16px -6px rgba(11, 18, 32, .28); } body #footer .quick_menu .btn_top span img { width: 18px; height: 18px; } } /* ========================================================================== 메인 — 하단 플로팅이 셋이 되는 자리 메인에만 .search-wrapper(14일 무료 배너 + 검색바)가 화면 아래에 고정된다. 390px 실측(고치기 전) 검색 래퍼 T680 B814 z 990 14일 배너 T680 B724 검색바 T736 B814 광고상담 T726 B774 검색바와 가로 100 세로 38 겹침 TOP T784 B828 검색바와 가로 40 세로 30 겹침, 화면 바닥까지 16px quick_menu 가 z 10002 라 검색 패널 위에 올라타 오른쪽 끝을 덮었다. 광고상담은 메인에서도 살린다(본문 진입점이 일곱 곳 있지만 상시 노출이 필요). 대신 오른쪽 아래를 비우고 14일 배너 위에 얇게 한 줄로 올린다. 검색 래퍼가 bottom:30 에 높이 106(390px 실측) 이다. 배너-검색패널 사이가 12px 인데 버튼-배너를 10px 로 두니 다른 묶음인데도 10 → 24 → 36 → 28 을 거쳐 12 로 맞췄다. 배너-검색패널 사이가 12px 이므로 셋을 같은 간격으로 세운다. 래퍼가 106(패널 50 + 여백 12 + 배너 44) 이므로 30+106+12 = 148. 배너가 두 줄이 되는 폭(360)에서는 래퍼가 3px 커져 간격이 9 가 된다. 패널 높이가 바뀌면 이 값도 같이 바꿔야 한다. 2026-09-28 재실측: 래퍼가 116(배너 44 + 여백 10 + 패널 62)으로 커져 148 로는 버튼 바닥 696 · 배너 머리 698, 간격이 2px 로 붙어 있었다. 배너-패널 사이(10)보다 넓게 16 을 두어 다른 묶음으로 읽히게 한다. 30 + 116 + 16 = 162. 둘은 오른쪽에 붙여 한 묶음으로 둔다. 처음에 광고상담만 가운데, TOP 은 오른쪽 끝에 뒀더니 정렬 기준이 둘로 갈려 따로 떠 보였다. 메인에만 있는 .search-wrapper 를 후크로 삼는다. ========================================================================== */ @media (max-width: 768px) { body:has(.search-wrapper) #footer .quick_menu { /* 검색 패널의 오른쪽 끝에 맞춘다. 패널은 .search-wrapper 의 좌우 20px 안에서 max-width:600 이라 화면이 640 미만 : 20 .. W-20 → right 20 640 이상 : 가운데 600 → right (50% - 300) 둘을 max() 로 한 줄에 담는다. 390 은 20, 768 은 84 가 된다. */ right: max(20px, calc(50% - 300px)); bottom: 162px; flex-direction: row; align-items: center; gap: 8px; } /* 얇게. 48 → 40, 글자 13, 아이콘 18 */ body:has(.search-wrapper) #footer .quick_menu .cs { height: 40px; padding: 0 16px; font-size: 12px; } body:has(.search-wrapper) #footer .quick_menu .cs::before { width: 18px; height: 18px; } /* 40 원 = 아이콘 18 + 좌우 11 */ body:has(.search-wrapper) #footer .quick_menu.is-compact .cs { max-width: 40px; padding: 0 11px; } /* TOP 이 보조라 알약 왼쪽에 둔다. 알약이 오른쪽 끝에 붙는다. */ body:has(.search-wrapper) #footer .quick_menu .btn_top { order: -1; width: 40px; height: 40px; } } /* ========================================================================== 푸터 — 좁은 화면 데스크톱은 각 줄을 좌우로 나눠 놓는다(운영시간|전화, 로고|패밀리사이트, 카피라이트|SNS). 390px 에서는 그 둘이 같은 자리에 겹친다. 세로로 펴고 간격을 준다. ========================================================================== */ @media (max-width: 768px) { /* 고객센터 — 카드 한 장. 결제 화면(.pcx-card)·표와 같은 언어를 쓴다. 위아래 경계선으로 구분하던 것을 옅은 카드로 바꾼다. 마크업은 운영시간 문장 다음에 전화번호가 온다. 연락처가 먼저 읽혀야 하므로 순서를 뒤집는다(마크업은 건드리지 않는다). */ #footer .footer_top { padding: 16px 0 20px; border-top: 0; border-bottom: 0; } #footer .footer_top .inwrap { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; height: auto; margin: 0 16px; padding: 16px 18px; border-radius: var(--mc-radius-sm, 10px); background: var(--mc-tint, #f4f7fe); width: auto; } #footer .footer_top .info_txt { float: none; width: auto; padding: 0; color: var(--mc-muted, #7c87a0); font-size: 12px; line-height: 1.6; } /* Content/renew/index_pc.css 가 이 파일보다 뒤에 로드되면서 같은 특이도(1,2,0)로 20px 을 준다. .inwrap 을 끼워 넘는다. */ #footer .footer_top .inwrap .txt_callnum { float: none; padding: 0; /* 레거시 수화기 아이콘은 padding-left:20px 자리에 그려진다. 왼쪽 정렬을 맞추느라 padding 을 걷으면 '1' 자 뒤로 들어간다. */ background-image: none; color: var(--mc-ink, #0b1220); font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } /* ---- 회사 정보 ---- */ /* 레거시 30/56. 아래 56 은 데스크톱 값이라 좁은 화면에서는 카피라이트 띠 앞이 휑하다. */ #footer .footer_m { padding: 24px 0 32px; } #footer .footer_m .inwrap { display: flex; flex-direction: column; align-items: stretch; gap: 14px; height: auto; } /* index_pc.css 가 뒤에서 margin-bottom:20px 을 준다(동률 1,2,0). 로고 아래 간격이 gap 14 위에 20 이 더 붙어 41px 이 됐다. .inwrap 을 끼워 넘고, 간격은 gap 하나가 정하게 둔다. */ #footer .footer_m .inwrap h1 { float: none; margin: 0; } /* 네 항목이 한 줄에 들어가야 로고·사업자정보와 리듬이 맞는다. 13px x 25자 + 여백이면 358px 를 넘는다. 12.5px 로 줄이고 여백을 좁혀 한 줄에 담는다. */ #footer .footer_m .foot_link { float: none; display: flex; flex-wrap: nowrap; gap: 0 12px; width: auto; margin: 0; padding: 0; } #footer .footer_m .foot_link li { flex: 0 0 auto; } /* bundle / css.css 가 .foot_link li a (1,2,2) 로 잡는다. li 를 빼면 14px 이 남아 네 링크가 387px 까지 넘친다. */ /* 색이 #b0afaf 였다. 어두운 푸터 시절 값이라 흰 바탕에서는 대비가 2.3:1 밖에 안 나온다. 누를 수 있는 줄이므로 ink 로 올리고 굵기로 아래 고지와 위계를 만든다. */ #footer .footer_m .foot_link li a { color: var(--mc-ink, #0b1220); font-size: 12px; font-weight: 600; white-space: nowrap; } #footer .footer_m .foot_info { float: none; width: auto; margin: 0; /* 링크 줄과 고지를 옅은 선으로 나눈다 */ padding-top: 14px; border-top: 1px solid var(--mc-border, #e7ebf5); /* 같은 #b0afaf 였다. 법적 고지라 읽혀야 한다. */ color: var(--mc-body, #4a5468); font-size: 12px; line-height: 1.7; } /* 구분자는 span::after 의 '|' 다. 각 줄 마지막 항목에만 .none_line 으로 빼 두는데, 좁은 화면에서 줄이 접히면 그 표시가 없는 항목이 줄 끝에 와서 | 만 남는다. 구분자를 걷고 여백으로만 나눈다. */ #footer .footer_m .foot_info span { display: inline-block; margin-right: 10px; } #footer .footer_m .foot_info span::after { content: none; } /* 패밀리사이트는 로고 오른쪽에 떠 있었다. 한 줄을 차지하게 둔다. */ #footer .footer_m .family_site { position: relative; float: none; /* 레거시 width:150px. 100% 로 덮으면 부모의 좁은 기준을 따라 320px 이 된다. auto 로 두면 이번엔 안쪽 버튼(width:100%)과 서로를 참조하는 순환이 되어 content 크기(320)로 굳는다. stretch 를 명시해 끊는다. */ align-self: stretch; width: auto; max-width: none; margin: 0; } /* 레거시 배경이 #515151 이다. 어두운 푸터에 놓였던 버튼이라 흰 바탕에서는 저 혼자 검은 덩어리로 떠 보인다. 결제 화면의 선택 버튼과 같은 언어로 — 흰 바탕, 1px 테두리, radius 10. */ #footer .footer_m .family_site .btn_familysite { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--mc-border, #e7ebf5); border-radius: var(--mc-radius-sm, 10px); /* background shorthand 를 쓰면 레거시가 깔아 둔 화살표 아이콘(background-image)까지 지워진다. 색만 바꾼다. */ background-color: var(--mc-surface, #fff); color: var(--mc-ink, #0b1220); font-size: 12px; font-weight: 600; } /* 레거시가 안쪽 글자에 line-height:40px 을 준다. 46px 버튼 안에서 글자가 아래로 쏠린다. */ #footer .footer_m .family_site .btn_familysite span { line-height: 1.2; /* 레거시 화살표는 어두운 배경용 흰 이미지라 흰 카드 위에서는 보이지 않는다. 아래에서 CSS 로 다시 그린다. */ padding-right: 0; background-image: none; } /* 화살표. 열리면 뒤집힌다. */ #footer .footer_m .family_site .btn_familysite::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid var(--mc-muted, #7c87a0); border-bottom: 1.5px solid var(--mc-muted, #7c87a0); transform: rotate(45deg); transition: transform .15s ease; } /* 열림 상태. JS 가 버튼 배경을 인라인(#767575)으로 박는다. 어두운 푸터 시절 색이라 흰 카드와 맞지 않아 눌러 둔다. 대신 목록이 열렸는지를 보고(jQuery .show() 가 style="display: block") 테두리와 바탕으로 알린다. */ #footer .footer_m .family_site .btn_familysite { background-color: var(--mc-surface, #fff) !important; } #footer .footer_m .family_site:has(.site_list[style*="block"]) .btn_familysite { border-color: var(--mc-blue, #2b5bff); background-color: var(--mc-tint, #f4f7fe) !important; color: var(--mc-blue, #2b5bff); } #footer .footer_m .family_site:has(.site_list[style*="block"]) .btn_familysite::after { margin-top: 3px; border-color: var(--mc-blue, #2b5bff); transform: rotate(-135deg); } /* ---- 목록 ---- 버튼과 같은 카드 언어로 */ #footer .footer_m .family_site .site_list { width: 100%; margin-top: 6px; padding: 4px; border: 1px solid var(--mc-border, #e7ebf5); border-radius: var(--mc-radius-sm, 10px); background: var(--mc-surface, #fff); } #footer .footer_m .family_site .site_list li a { display: flex; align-items: center; width: auto; height: auto; min-height: 44px; padding: 0 12px; border-radius: 8px; background: none; color: var(--mc-body, #4a5468); font-size: 12px; line-height: 1.4; text-align: left; } #footer .footer_m .family_site .site_list li:hover a { background: var(--mc-tint, #f4f7fe); color: var(--mc-ink, #0b1220); } /* ---- 맨 아래 줄 ---- */ #footer .footer_bottom { height: auto; } #footer .footer_bottom .inwrap { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; height: auto; padding-top: 16px; padding-bottom: 16px; } #footer .footer_bottom .copyright { float: none; width: auto; margin: 0; padding: 0; line-height: 1.4; } #footer .footer_bottom .sns_area { /* absolute(top:7px right:18px) 로 떠 있어 카피라이트를 덮었다 */ position: static; float: none; display: flex; gap: 4px; width: auto; margin: 0; padding: 0; } } /* ========================================================================== 퀵배너 두 장이 겹쳐 보이던 것 common.js 는 이 슬라이더를 effect:"fade" 로 띄운다. 그런데 Swiper 의 fade 효과 CSS 가 저장소에 없다(swiper-container-fade 규칙이 어디에도 없음). 클래스만 붙고 스타일이 없으니 슬라이드가 겹쳐 쌓이지 않고 옆으로 늘어선다. 1440 실측 — 슬라이드 넷이 나란히, 전부 불투명 1232 modal_260604 (duplicate) 1424 modal_260901 (prev) 1616 modal_260604 (active) 1808 modal_260901 (duplicate) opacity 는 넷 다 1 · transform 없음 상자가 192px 인데 슬라이드가 그 밖으로 나가 두 장의 글자가 포개져 읽혔다. fade 가 하는 일을 CSS 로 적는다 — 전부 같은 자리에 겹쳐 두고 활성만 보인다. 활성만 position:relative 로 남겨 상자 높이를 만든다(전부 absolute 면 높이가 0). ========================================================================== */ #footer .quick_menu .quick-slider { position: relative; overflow: hidden; } #footer .quick_menu .quick-slider .swiper-wrapper { position: relative; } #footer .quick_menu .quick-slider .swiper-slide { position: absolute; top: 0; left: 0; width: 100%; /* Swiper 가 슬라이드마다 인라인으로 opacity 를 박는데, 이 빌드에서는 넷 다 1 을 넣는다(실측). 인라인은 CSS 를 이기므로 !important 로 받는다. 보이고 감추는 것은 Swiper 가 갈아 끼우는 swiper-slide-active 로 판단한다. */ opacity: 0 !important; pointer-events: none; transition: opacity .6s ease; } #footer .quick_menu .quick-slider .swiper-slide-active { position: relative; opacity: 1 !important; pointer-events: auto; } /* ========================================================================== 헤더 — 토큰 색과 스크롤 상태 색 레거시는 헤더를 이 사이트의 토큰이 생기기 전 값으로 그린다. GNB 글자 body 의 #333 을 그대로 상속 -> --mc-ink #0b1220 아래 선 #dde2e6 -> --mc-border #e7ebf5 GNB 는 직접 color 를 주는 규칙이 없어 body 상속으로만 #333 이었다. 제목·본문이 모두 잉크색인 화면 위에서 메뉴만 한 단 흐렸다. 스크롤 상태 헤더는 sticky 인데 스크롤해도 생김새가 그대로라, 본문이 그 아래로 지나가는 동안에도 문서의 일부처럼 보였다. 위에 떠 있는 것으로 읽히려면 경계가 선이 아니라 그림자여야 한다. 선 -> 투명, 그림자 -> --mc-shadow-sm, 바탕 -> 82% + 블러 scroll() 타임라인으로 스크롤 0~120px 동안 바꾼다. JS 가 없으므로 뷰를 고치지 않아도 되고, 이 기능이 없는 브라우저는 @supports 밖에서 지금과 같은(단, 토큰 색으로 맞춘) 평평한 헤더를 그대로 본다. .header_wrap · .inwrap · #gnb 는 배경이 투명하고 .sub_depth 는 자체 흰 배경이라(실측) 반투명으로 바꿔도 메뉴 글자가 비치지 않는다. 불투명한 자식은 상단 유틸 띠 하나뿐이라 같이 반투명으로 맞춘다. ========================================================================== */ .header { border-bottom: 1px solid var(--mc-border, #e7ebf5); } .header #gnb > li menu:not(.sub_depth menu), .header #gnb > li menu:not(.sub_depth menu) a { color: var(--mc-ink, #0b1220); } @supports (animation-timeline: scroll()) { .header { animation-name: mc-header-lift; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root block); animation-range: 0 120px; } .header .header_bar { animation-name: mc-header-bar-lift; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root block); animation-range: 0 120px; } /* 헤더에 backdrop-filter 를 다시 걸지 말 것. 값이 none 이 아니기만 하면 position:fixed 자손의 컨테이닝 블록이 된다. 1024 이하에서 nav 는 화면 밖에 세워 둔 fixed 슬라이드 패널인데, 헤더가 컨테이닝 블록이 되는 순간 이 패널이 뷰포트가 아니라 헤더 기준으로 잡혀 문서의 가로 스크롤 영역에 들어간다 (실측 390: 문서폭 390 -> 725, 가로 넘침 335px). 지금은 헤더가 불투명이라 서리 자체가 필요 없다. */ } /* 스크롤해도 헤더는 불투명한 흰색이다. 한때 88% + blur(18px) 로 '간유리' 를 만들었다. 떠 있다는 신호는 그림자가 이미 주고 있는데, 12% 비침은 아래 내용의 색과 대비에 따라 GNB 글자 뒤가 지저분해지는 쪽으로만 작용했다. 특히 1024 이하에서는 blur 를 걸 수 없어(아래 주석 참고) 비침만 남았다. 떠 있는 표현은 그림자와 테두리 페이드에 맡기고 바탕은 흰색으로 둔다. */ @keyframes mc-header-lift { from { background-color: rgb(255, 255, 255); border-bottom-color: var(--mc-border, #e7ebf5); box-shadow: 0 0 0 0 rgba(11, 18, 32, 0); } to { background-color: rgb(255, 255, 255); border-bottom-color: rgba(231, 235, 245, 0); box-shadow: var(--mc-shadow-sm, 0 8px 24px -12px rgba(11, 18, 32, .18)); } } @keyframes mc-header-bar-lift { from { background-color: rgb(236, 240, 245); } to { background-color: rgba(236, 240, 245, .72); } } /* ========================================================================== 무료 상담 신청 폼이 본문을 덮던 것 #footer .quick_menu > #submit_form { width: 370px; padding: 34px 23px } 광고대행 화면에서 기본으로 열려 있고, 모든 데스크톱 폭에서 본문과 겹친다. 폭 폼 왼쪽 본문 오른쪽 겹침 1280 904 1240 336px 1440 1064 1320 256px 1600 1224 1400 176px 1920 1525 1560 35px 폭을 줄인다. 다만 이것만으로 다 없어지지는 않는다 — 본문 열이 1200px 고정 이라 1440 에서 좌우 여백이 120px 씩뿐이고, 겹치지 않으려면 폼이 114px 이하여야 한다. 그 폭에는 선택 상자가 들어가지 않는다. 370 -> 300 1920 에서는 겹침이 사라지고, 나머지 폭에서는 70px 씩 줄어든다 글자도 한 단 내린다. 제목 21px 는 이 사이트의 '절 제목'(24px) 에 가까운 크기인데, 본문 옆에 떠 있는 보조 패널이 절 제목만큼 클 이유가 없다. 제목 21 -> 18 매체 항목 16 -> 14 안내 15 -> 13 패딩 34/23 -> 24/18 1440 이하에서 겹침을 완전히 없애려면 폭이 아니라 다른 결정이 필요하다 (일정 폭 미만에서 감추거나, 본문 열을 줄이거나). ========================================================================== */ #footer .quick_menu > #submit_form.counselArea { width: 300px; /* 안쪽 여백은 줄마다 따로 준다. 머리(제목·전화)와 몸(입력)의 경계선이 카드 끝까지 닿아야 해서 폼 전체에 패딩을 두면 안 된다. */ padding: 0; gap: 0; background: var(--mc-surface, #fff); border: 1px solid var(--mc-border, #e7ebf5); border-radius: 18px; box-shadow: var(--mc-shadow, 0 24px 60px -28px rgba(11, 18, 32, .22)); overflow: hidden; } /* ---- 머리 ---- 제목과 전화를 위로 묶는다. 전화번호는 폼을 못 쓰는 사람의 대안 경로인데 맨 아래 있었다. 폼을 끝까지 내려본 사람만 본다. 게다가 폭을 300 으로 줄인 뒤 1644-4527 이 두 줄로 꺾여 있었다. 제목 바로 아래 한 줄로 올린다. 글자뿐이라 키보드 이동 순서에는 영향이 없다 — DOM 은 그대로 두고 order 로만 올린다. */ #footer .quick_menu > #submit_form.counselArea > h3 { order: -2; margin: 0; padding: 19px 46px 0 18px; text-align: left; font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; color: var(--mc-ink, #0b1220); } #footer .quick_menu > #submit_form.counselArea > .close_btn { top: 16px; right: 12px; width: 28px; height: 28px; opacity: .45; transform: scale(.74); z-index: 3; } #footer .quick_menu > #submit_form.counselArea > .close_btn:hover { opacity: .9; } /* baseline 정렬은 여기서 듣지 않는다. .contact_tel 이 그 자체로 flex 컨테이너라(아이콘 ::before + p) 부모가 쓰는 기준선이 p 가 아니라 첫 아이템인 아이콘의 것이 된다. 실측으로 시간 글자가 7.2px 내려가 있었다. 두 글자에 같은 줄높이를 주고 가운데로 맞춘다. */ #footer .quick_menu > #submit_form.counselArea .contact { order: -1; display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 18px 15px; border-bottom: 1px solid var(--mc-border, #e7ebf5); } #footer .quick_menu > #submit_form.counselArea .contact_tel { align-items: center; } #footer .quick_menu > #submit_form.counselArea .contact_tel p { margin: 0; font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0; white-space: nowrap; color: var(--mc-blue, #2b5bff); } #footer .quick_menu > #submit_form.counselArea .contact_time { display: flex; align-items: center; } #footer .quick_menu > #submit_form.counselArea .contact_time span { font-size: 11px; line-height: 20px; white-space: nowrap; /* muted(#7c87a0) 는 흰 바탕에서 대비 3.6 이라 4.5 에 못 미친다 */ color: #667082; } /* ---- 쓰는 것 · 고르는 것 ---- 입력 3개와 선택 2개가 모두 같은 회색 상자(#F3F4F6)였다. 다섯 줄이 똑같이 보여서 무엇을 쓰고 무엇을 고르는지가 형태로 구분되지 않았다. 쓰는 것 -> 밑줄만 고르는 것 -> 칠한 상자 + 꺾쇠 마크업 순서는 건드리지 않으므로 Tab 순서는 그대로다. */ /* 밑줄만 그었더니 입력 칸으로 안 보였다. 테두리를 두르되 고르는 상자와는 바탕으로 가른다 — 쓰는 것은 흰 바탕, 고르는 것은 tint 바탕. */ #footer .quick_menu > #submit_form.counselArea > input[type=text] { width: calc(100% - 36px); min-height: 0; height: 46px; box-sizing: border-box; margin: 0 18px 8px; padding: 0 13px; background: var(--mc-surface, #fff); border: 1px solid var(--mc-border, #e7ebf5); border-radius: 11px; font-size: 14px; color: var(--mc-ink, #0b1220); transition: border-color .15s ease, box-shadow .15s ease; } /* :first-of-type 은 여기서 아무것도 맞지 않는다. 폼의 첫 input 은 type=hidden 인 UserId 라 'input 중 첫 번째이면서 type=text' 인 요소가 없다(실측: 매치 null). 그래서 구분선과 이름 칸이 딱 붙어 있었다. 여백은 구분선을 가진 .contact 의 아래쪽에서 준다. */ #footer .quick_menu > #submit_form.counselArea .contact { margin-bottom: 14px; } #footer .quick_menu > #submit_form.counselArea > input[type=text]:hover { border-color: #c9d3ea; } /* 기존 #757575 on #F3F4F6 은 대비 4.19 였다 */ #footer .quick_menu > #submit_form.counselArea > input[type=text]::placeholder { color: #6b7488; } #footer .quick_menu > #submit_form.counselArea > input[type=text]:focus { outline: none; border-color: var(--mc-blue, #2b5bff); box-shadow: var(--mc-ring, 0 0 0 3px rgba(43, 91, 255, .18)); } #footer .quick_menu > #submit_form.counselArea .select_list { width: calc(100% - 36px); box-sizing: border-box; margin: 8px 18px 0; background: var(--mc-tint, #f4f7fe); border: 1px solid #e2e8f6; border-radius: 11px; font-size: 14px; } /* 열린 높이(232px)는 레거시가 정한다. 닫힌 높이만 50 -> 46 으로 줄인다. 여기에 height 를 고정으로 주면 펼쳐지지 않는다. */ #footer .quick_menu > #submit_form.counselArea .select_list.close { height: 46px; } #footer .quick_menu > #submit_form.counselArea .select_list > div, #footer .quick_menu > #submit_form.counselArea .AdMethod_list, #footer .quick_menu > #submit_form.counselArea .AdPrice_list { background: none; } #footer .quick_menu > #submit_form.counselArea .select_list > div:first-child { min-height: 44px; height: 44px; padding: 0 13px; align-items: center; } #footer .quick_menu > #submit_form.counselArea .select_list span { font-size: 13.5px; /* 기존 #7C8791 on #F3F4F6 은 대비 3.33 으로 이 폼에서 가장 낮았다 */ color: var(--mc-body, #4a5468); } #footer .quick_menu > #submit_form.counselArea .AdMethod_list, #footer .quick_menu > #submit_form.counselArea .AdPrice_list { min-height: 0; /* 위 3px / 아래 0 이라 첫 항목이 구분선에 붙고 끝 항목이 상자에 닿아 잘린 것처럼 보였다. 스크롤되는 목록이라 스크롤 여백도 준다. */ padding: 12px 13px 14px; gap: 10px 4px; scroll-padding-block: 12px 14px; border-top: 1px solid #e2e8f6; } #footer .quick_menu > #submit_form.counselArea .AdMethod_list label, #footer .quick_menu > #submit_form.counselArea .AdPrice_list label { font-size: 12.5px; letter-spacing: -.03em; color: var(--mc-body, #4a5468); } #footer .quick_menu > #submit_form.counselArea .AdMethod_list input, #footer .quick_menu > #submit_form.counselArea .AdPrice_list input { width: 15px; height: 15px; accent-color: var(--mc-blue, #2b5bff); } /* controls.css 는 체크를 12x9, 점을 8x8 로 그린다. 상자가 15px 인 이 폼에서는 표시가 상자를 꽉 채워 답답했다. 상자는 그대로 두고 표시만 줄인다. */ #footer .quick_menu > #submit_form.counselArea input[type=checkbox]:checked { background-size: 9px 7px; } #footer .quick_menu > #submit_form.counselArea input[type=radio]:checked { background-size: 6px 6px; } /* ---- 약관 ---- */ #footer .quick_menu > #submit_form.counselArea > .terms { margin: 16px 18px 0; font-size: 13px; } #footer .quick_menu > #submit_form.counselArea > .terms > div:nth-child(1) { flex-wrap: nowrap; gap: 6px; } #footer .quick_menu > #submit_form.counselArea > .terms label { font-size: 11.5px; letter-spacing: -.04em; white-space: nowrap; color: var(--mc-body, #4a5468); } /* 필수 표시. 이 폼만 '[필수]' 대괄호를 쓰고 있었다 — 사이트의 다른 여섯 화면(회원가입 · 아이디찾기 · 비밀번호찾기 · 회원정보수정 · 광고문의 회원/비회원)은 라벨 뒤 오른쪽 위에 tomato 색 ⁎ 를 붙인다(components.css '필수 입력 표시'). 같은 기호 · 같은 색 · 같은 자리로 맞춘다. */ #footer .quick_menu > #submit_form.counselArea > .terms label.asterisk::after { content: "⁎"; margin-left: 3px; color: tomato; font-size: .8em; font-weight: 700; vertical-align: super; line-height: 0; } #footer .quick_menu > #submit_form.counselArea > .terms .collapse { margin-left: auto; flex: none; } #footer .quick_menu > #submit_form.counselArea > .terms .collapse > span { font-size: 11.5px; color: #667082; } #footer .quick_menu > #submit_form.counselArea > .terms input[type=checkbox] { width: 15px; height: 15px; flex: none; accent-color: var(--mc-blue, #2b5bff); } #footer .quick_menu > #submit_form.counselArea > .terms > div:nth-child(2) { min-height: 0; padding: 12px 13px; /* 세 묶음(이용목적 · 항목 · 보유기간) 사이를 벌린다. gap 2px 로는 제목과 앞 묶음의 본문이 붙어 어디서 끊기는지 안 보였다. */ gap: 0; background: var(--mc-tint, #f4f7fe); border: 1px solid #e2e8f6; border-radius: 10px; font-size: 11.5px; line-height: 1.5; color: #5a6478; } #footer .quick_menu > #submit_form.counselArea > .terms > div:nth-child(2) h5 { margin: 12px 0 0; font-size: 11.5px; /* 700 은 11.5px 에서 뭉쳐 보였다. 본문이 400 이라 600 으로도 충분히 갈린다. */ font-weight: 600; color: var(--mc-ink, #0b1220); } #footer .quick_menu > #submit_form.counselArea > .terms > div:nth-child(2) h5:first-child { margin-top: 0; } #footer .quick_menu > #submit_form.counselArea > .terms > div:nth-child(2) ul { margin: 3px 0 0; } #footer .quick_menu > #submit_form.counselArea > .terms.close > div:nth-child(2) { padding: 0; border-width: 0; } /* ---- 행동 ---- 단색 #0045db 는 이 사이트 어디에도 없는 값이다. 공통 그라데이션으로 맞춘다. */ #footer .quick_menu > #submit_form.counselArea > button.submit_form_btn { width: calc(100% - 36px); height: 50px; margin: 16px 18px 18px; border: 0; border-radius: 11px; background: var(--mc-grad, linear-gradient(96deg, #2b5bff 8%, #7c3aed 92%)); font-size: 15px; font-weight: 700; color: #fff; box-shadow: 0 12px 26px -10px rgba(76, 104, 255, .5); transition: box-shadow .15s ease, filter .15s ease, transform .1s ease; } /* ---- 작동 중 상태 ---- 기본 화면만 그리고 끝내면 만지는 순간 어색해진다. 실측(1440)에서 비어 있던 것: 버튼 hover 없음 · 키보드 포커스 표시 없음(outline 리셋) · 고른 값과 안내문이 같은 색 · 옵션에 손 얹어도 반응 없음 · 광고비 목록이 232px 고정이라 6개 아래가 텅 빔 · 매체 목록 9개 중 8개만 보이는데 스크롤바가 0px. */ #footer .quick_menu > #submit_form.counselArea > button.submit_form_btn:hover { filter: brightness(1.06); box-shadow: 0 16px 30px -10px rgba(76, 104, 255, .6); } #footer .quick_menu > #submit_form.counselArea > button.submit_form_btn:active { transform: translateY(1px); box-shadow: 0 8px 18px -10px rgba(76, 104, 255, .5); } /* 레거시가 outline 을 지운다. 프로젝트 관례(controls.css)대로 ring 으로 대신한다. */ #footer .quick_menu > #submit_form.counselArea > button.submit_form_btn:focus-visible { outline: 0; box-shadow: var(--mc-ring, 0 0 0 3px rgba(43, 91, 255, .18)), 0 12px 26px -10px rgba(76, 104, 255, .5); } #footer .quick_menu > #submit_form.counselArea input[type=checkbox]:focus-visible, #footer .quick_menu > #submit_form.counselArea input[type=radio]:focus-visible, #footer .quick_menu > #submit_form.counselArea > .close_btn:focus-visible { outline: 0; box-shadow: var(--mc-ring, 0 0 0 3px rgba(43, 91, 255, .18)); border-radius: 4px; } /* 고르는 상자 — 손을 얹으면 테두리가 한 단 진해진다 */ #footer .quick_menu > #submit_form.counselArea .select_list { transition: border-color .15s ease; } #footer .quick_menu > #submit_form.counselArea .select_list:hover { border-color: #c9d3ea; } /* 값을 고르면 안내문이 아니라 값이다. 잉크색으로 올려 구분한다. 머리글은 스크립트가 textContent 만 바꾸므로 :has() 로 체크 여부를 본다. */ #footer .quick_menu > #submit_form.counselArea .select_list:has(input:checked) > div:first-child span { color: var(--mc-ink, #0b1220); font-weight: 600; } /* 옵션 — 라벨도 누르는 면이다 */ #footer .quick_menu > #submit_form.counselArea .AdMethod_list label, #footer .quick_menu > #submit_form.counselArea .AdPrice_list label { cursor: pointer; transition: color .12s ease; } #footer .quick_menu > #submit_form.counselArea .AdMethod_list label:hover, #footer .quick_menu > #submit_form.counselArea .AdPrice_list label:hover, #footer .quick_menu > #submit_form.counselArea .AdMethod_list input:checked + label, #footer .quick_menu > #submit_form.counselArea .AdPrice_list input:checked + label { color: var(--mc-ink, #0b1220); } #footer .quick_menu > #submit_form.counselArea .AdMethod_list input:checked + label, #footer .quick_menu > #submit_form.counselArea .AdPrice_list input:checked + label { font-weight: 600; } /* 열린 높이를 내용에 맞춘다. 레거시는 두 목록을 똑같이 232px 로 열어 광고비(6개)는 아래가 비고 매체(9개)는 넘친다. height 전환(.3s)은 auto 로 가면 끊기지만, 빈 칸과 잘림이 남는 것보다 낫다. */ #footer .quick_menu > #submit_form.counselArea .select_list:not(.close) { height: auto; } /* 접힌 목록은 높이만 0 이라 안 보여도 Tab 은 그 안의 체크박스 15개와 약관 본문을 다 거친다(실측: 이메일에서 Tab 을 치면 보이지 않는 AdMethod_naver 로 간다). visibility 로 순서에서 빼고, 펼치면 돌려준다. */ #footer .quick_menu > #submit_form.counselArea .select_list.close .AdMethod_list, #footer .quick_menu > #submit_form.counselArea .select_list.close .AdPrice_list, #footer .quick_menu > #submit_form.counselArea > .terms.close > div:nth-child(2) { visibility: hidden; } /* 매체 목록은 9개라 180px 안에서 스크롤된다. 스크롤바가 0px 이면 8개가 전부인 줄 안다. 가는 막대로 보이게 한다. */ #footer .quick_menu > #submit_form.counselArea .AdMethod_list { scrollbar-width: thin; scrollbar-color: #c9d3ea transparent; scrollbar-gutter: stable; } /* 닫기 — 보이는 X 는 그대로 두고 누르는 면만 36px 로 넓힌다 */ #footer .quick_menu > #submit_form.counselArea > .close_btn { top: 12px; right: 8px; width: 36px; height: 36px; transform: none; background-size: 15px 15px; border-radius: 8px; } /* ---- 접힌 상태(빠른상담 원형 버튼) ---- #2F6EEE 는 토큰에 없는 파랑이고 그림자는 검정 1px 8px 다. 폼과 같은 색·그림자로. 두 가지를 뒤늦게 맞춘다 (실측). · 그림자가 rgba(76,104,255) 였다. 배경은 --mc-blue rgb(43,91,255) 이고 옆 알약(.cs)은 rgba(43,91,255,.55) 를 쓴다. 같은 파랑에서 나온 그림자만 혼자 다른 파랑이라 위에 뜬 색이 미묘하게 어긋났다. 자기 색으로 맞춘다. · 상담으로 가는 버튼이 셋인데 채움이 두 벌이었다 — 폼 안 '신청하기' 와 알약 '광고상담' 은 --mc-grad, 이 원형만 솔리드. 셋 다 같은 동작(상담)으로 가므로 채움도 한 벌로 둔다. background 축약은 쓰지 않는다 — 아이콘(::before)까지 지운 적이 있다. */ #footer .quick_menu .free_cs.counselArea { background-color: var(--mc-blue, #2b5bff); background-image: var(--mc-grad, linear-gradient(96deg, #2b5bff 8%, #7c3aed 92%)); box-shadow: 0 12px 26px -10px rgba(43, 91, 255, .55); transition: box-shadow .15s ease, filter .15s ease; } #footer .quick_menu .free_cs.counselArea:hover { filter: brightness(1.06); box-shadow: 0 16px 30px -10px rgba(43, 91, 255, .65); } #footer .quick_menu .free_cs.counselArea:focus-visible { outline: 0; box-shadow: var(--mc-ring, 0 0 0 3px rgba(43, 91, 255, .18)), 0 12px 26px -10px rgba(43, 91, 255, .55); } /* ========================================================================== 좁은 화면 패널 머리 — 지금 누구로 들어와 있는가 패널 맨 위 카드에 '로그아웃 · 마이페이지 · 결제하기' 만 있어서, 로그인은 했다는 것을 짐작할 수 있을 뿐 어느 계정인지는 알 수 없었다. PC 는 상단 유틸 바가 늘 보이지만 모바일은 그 바를 이 패널 안으로 옮겨 넣는 구조(nav-mobile.js)라 더 그렇다. 계정 링크 카드(.link_bar, order: 0) 바로 위에 한 줄을 둔다. ========================================================================== */ .header_wrap nav .mnav_user { display: none; } @media (max-width: 1024px) { .header_wrap nav .mnav_user { /* order 를 음수로 두면 상단 흰 띠(nav::before, 기본 order 0)보다 앞서서 닫기(X) 버튼 뒤로 들어간다. 띠와 같은 조로 두고, #gnb 가 order: 1 이라 계정 카드(.link_bar, order: 0)와 함께 자연스럽게 위쪽에 남는다. */ order: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 10px 6px; padding: 0 6px; } .header_wrap nav .mnav_user .mnav_user_mark { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--mc-tint, #f4f7fe); color: var(--mc-blue, #2b5bff); } .header_wrap nav .mnav_user .mnav_user_mark svg { width: 18px; height: 18px; } .header_wrap nav .mnav_user .mnav_user_name { min-width: 0; font-size: 15px; line-height: 1.3; letter-spacing: -.02em; color: var(--mc-body, #4a5468); /* 아이디가 길면 말줄임. 패널이 340px 이라 넘칠 수 있다. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 리셋 CSS 가 굵기를 눌러서 직접 준다 */ .header_wrap nav .mnav_user .mnav_user_name .id { font-weight: 700; color: var(--mc-ink, #0b1220); } } /* ========================================================================== GNB 드롭다운 리디자인 (PC) 실측 진단 (1440) 패널 광고솔루션 1008x193 (left 216) 광고대행 816x353 (left 312) 칸 폭 124 / 116 / 116 / 181 / 139 91 / 91 / 121 / 134 그룹 라벨 15px / 400 / slategray 항목 16px / 600 / black(#000) 네 가지가 걸렸다. 1) 메뉴를 옮기면 패널이 튄다. 원인은 개별 override 다 — 기본은 .header .sub_depth { width: calc(100% - 24rem) } 인데 #ad-solution-submenu 에만 calc(100% - 12rem) 이 따로 걸려 있다. 12rem(192px) 차이가 1008 대 816 을 만들고, 가운데 정렬(left:50%)이라 좌우로도 96px 씩 움직인다. 한 값으로 되돌린다. 2) 칸 폭이 내용 폭이라 열이 안 맞는다(124/116/116/181/139). 균등 그리드로 바꿔 어느 메뉴를 열어도 같은 자리에 열이 선다. 3) 항목 글자가 순검정(#000) 이다. 이 사이트 잉크는 #0b1220 이고 #000 은 여기 말고 쓰는 데가 없다. 굵기도 600 이라 메가메뉴 항목치고 본문보다 무겁다. 잉크 15px/500 으로 내리고, 그룹 라벨은 13px/600 muted 로 올려 '분류'와 '목적지'의 역할을 분명히 한다(라벨은 작지만 또렷하게). 4) 광고대행은 앱광고만 항목이 8개라 패널이 353px 인데 AI 광고는 1개다. 오른쪽 아래가 250px 넘게 빈다. 항목이 많은 칸은 두 줄로 흘려 높이를 낮춘다. 전부 --mc-* 토큰으로 맞춘다. 우측 레일의 #ecf0f5 도 토큰 밖 값이었다. ========================================================================== */ @media (min-width: 1025px) { /* 1) 패널 기하를 한 벌로. 좌우 여백이 24rem(384px) 고정이라 좁은 PC 에서 패널이 쪼그라들었다. 실측: 1100 -> 716px(칸 80px, 라벨이 옆 칸 7px 침범) 1025 -> 641px(칸 65px, 22px 침범) vw 로 여백을 줄여 봤더니 칸 침범은 사라졌지만 곡선이 뒤집혔다 — 1920 에서 816px, 1280 에서 1066px 로 좁은 화면일수록 패널이 넓어졌다. (여백은 vw 를 따라 줄지만 100% 는 고정 폭 1200px 컨테이너라 그렇다.) 폭은 한 값이어야 한다. 상한만 두고 좌우는 4rem 으로 고정한다. 넓은 화면에서는 1080px 로 일정하고, 컨테이너가 그보다 좁아지는 구간에서만 따라 줄어든다 — 단조롭다. */ .header #ad-solution-submenu, .header .sub_depth { width: min(1200px, calc(100% - 2rem)); border-radius: var(--mc-radius, 16px); box-shadow: 0 18px 44px -16px rgba(11, 18, 32, .18), 0 2px 6px -2px rgba(11, 18, 32, .06); } /* 2) 칸을 균등 그리드로. 개별 min-width override 를 덮는다. */ .header .sub_depth > ul:first-of-type, .header #ad-solution-submenu > ul:first-of-type { display: grid; /* 트랙은 6개다. 대표 칸이 2트랙을 먹으므로 광고솔루션 대표2 + 자동입찰1 + 순위1 + 키워드1 + AI도구1 = 6 광고대행 대표2 + 포털1 + 마켓1 + 앱2 = 6 5개로 두었더니 마지막 칸이 둘째 줄로 밀렸다. */ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 24px; /* 레거시는 2rem 2rem 3rem(32/32/48) 이었다. 26/28/28 로 깎았더니 패널이 144px 까지 내려앉아 답답했다. 아래는 조금 더 두어 마지막 줄이 모서리에 붙지 않게 한다. */ padding: 52px 40px 58px; align-items: start; } .header .sub_depth > ul:first-of-type > li, .header #ad-solution-submenu > ul:first-of-type > li { min-width: 0; /* 라벨과 항목 사이, 항목끼리 모두 이 간격을 쓴다. 10px 은 15px 글자에 비해 빽빽했다. 14px 도 패널이 190px 대로 낮아 답답해 18px 로 올렸다가, 패널을 더 키우면서 22px 로 맞췄다. */ gap: 22px; /* 헤더 nav 의 가운데 정렬을 물려받아 항목이 가운데로 섰다. 칸 안은 왼쪽 정렬이 기준이다. */ text-align: left; } /* 3) 그룹 라벨은 작지만 또렷하게, 항목은 잉크로 */ /* 라벨이 칸을 넘지 않게. '지마켓 광고관리' + NEW 칩이 한 줄에 안 들어가 옆 칸(AI 도구)을 덮고 있었다. 칸 폭이 816/5 = 약 145px 이라 긴 라벨은 줄바꿈으로 받아 준다. */ .header .sub_depth menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; } .header .sub_depth menu a { font-size: 13px; font-weight: 600; color: var(--mc-muted, #7c87a0); min-width: 0; word-break: keep-all; } /* 패널 여백을 52/40/58 까지 키우고 나니 15px 이 상대적으로 작아 보였다. 굵기는 500 그대로 두고 크기만 한 단 올린다 — 굵기를 600 으로 되돌리면 처음에 지적했던 '본문보다 무거운 메뉴' 로 돌아간다. */ .header .sub_depth ul li > a { font-size: 16px; font-weight: 500; color: var(--mc-ink, #0b1220); transition: color .12s ease; } .header .sub_depth ul li > a:hover, .header .sub_depth menu a:hover { color: var(--mc-blue, #2b5bff); } /* 4) 항목이 많은 칸(앱광고 8개)은 두 줄로 흘린다. :has 로 여섯째 항목이 있는 칸만 잡는다 — 나머지는 한 줄 그대로. */ .header .sub_depth > ul:first-of-type > li:has(> a:nth-of-type(6)) { display: block; columns: 2; column-gap: 20px; grid-column: span 2; } .header .sub_depth > ul:first-of-type > li:has(> a:nth-of-type(6)) menu { column-span: all; margin-bottom: 10px; } .header .sub_depth > ul:first-of-type > li:has(> a:nth-of-type(6)) > a { display: block; /* 이 칸만 columns 흐름이라 gap 이 안 먹는다. 위 gap(14px)과 같은 리듬이 되도록 위아래 7px 씩 준다. */ padding: 11px 0; break-inside: avoid; } /* ---- 대표 칸 ---- 메뉴가 '있는 것을 다 늘어놓은 안내판' 에서 '지금 알려야 할 것이 정해진 자리' 가 된다. 광고솔루션은 신규(지마켓 광고관리), 광고대행은 항목이 하나뿐이라 칸을 놀리던 AI 광고를 세운다 — 빈 자리가 강조 자리가 된다. 면은 --mc-tint 한 겹만. 테두리·그림자를 더하면 흰 패널 위에 상자가 두 겹이 되어 메뉴가 무거워진다. 대비는 면 하나로 충분하다. */ .header .sub_depth > ul:first-of-type > li.feature { grid-column: span 2; /* 부모가 세로 flex 라 inline-block 을 줘도 링크가 한 줄에 하나씩 섰다. 행 방향 + 줄바꿈으로 바꾸고, 제목과 설명만 한 줄을 다 쓰게 한다. */ flex-flow: row wrap; align-content: start; gap: 16px 20px; margin: -10px 0 -10px -12px; padding: 30px 28px 32px; border-radius: var(--mc-radius-sm, 12px); background: var(--mc-tint, #f4f7fe); } /* 대표 칸의 제목은 라벨이 아니라 제목이다 — 목록의 13px muted 를 덮는다 */ .header .sub_depth > ul:first-of-type > li.feature menu a { font-size: 18px; font-weight: 700; color: var(--mc-ink, #0b1220); } .header .sub_depth > ul:first-of-type > li.feature menu, .header .sub_depth > ul:first-of-type > li.feature p { flex: 0 0 100%; } .header .sub_depth > ul:first-of-type > li.feature p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mc-body, #4a5468); word-break: keep-all; } /* 하위 링크는 가로로 눕힌다. 대표 칸은 두 칸 폭이라 세로로 쌓으면 오른쪽이 빈다. */ .header .sub_depth > ul:first-of-type > li.feature > a { flex: 0 0 auto; font-size: 14px; color: var(--mc-blue, #2b5bff); } /* 우측 레일 — #ecf0f5 는 토큰 밖 값이었다. 위 패딩도 맞춘다. 본목록을 52px 로 키우는 동안 레일은 레거시 32px 을 쓰고 있어, 첫 줄이 좌측 라벨(패널 상단에서 53px)보다 20px 위(33px)에 떠 있었다. 두 목록의 첫 줄은 같은 선에서 시작해야 한다. 아래도 같이 맞춰 두 기둥의 끝이 함께 떨어지게 한다. */ .header .sub_depth > ul:last-of-type:not(:first-of-type) { padding: 52px 32px 58px; background: var(--mc-tint, #f4f7fe); border-left: 1px solid var(--mc-line, #e7ebf5); } } /* ========================================================================== 블로그 N 뱃지 — 브랜드 그라데이션 + 글로우 링 레거시(index_pc.css)는 빨강 그라데이션(#FF3A4A -> #FF7B84) + 그림자 + 2초 무한 펄스였다. 세 가지가 한꺼번에 걸려 있고, 빨강은 이 사이트에서 오류·필수 표시가 가져가 있어 의미가 겹친다. 무한 펄스는 가만히 있는 화면에서 계속 시선을 붙잡아 읽기를 방해한다(메인 검색창에서 걷어낸 것과 같은 종류다). 색을 브랜드 파랑->보라로 바꾸고, 움직임 대신 바깥으로 번지는 링으로 존재감을 만든다. 정지 상태에서 화려하되 읽기를 방해하지 않는다. 그라데이션 각도는 --mc-grad(96deg) 대신 135deg 다. 96deg 는 가로로 긴 버튼용이라 18px 원에서는 색이 거의 한 가지로 보인다. index_pc.css 가 이 파일보다 뒤에 로드되고 선택자가 .header #gnb .badge_n (1,2,0) 로 같다. 순서로 지므로 body 를 붙여 (1,2,1) 로 받는다. ========================================================================== */ body .header #gnb .badge_n, body .header .sub_depth menu span { background: linear-gradient(135deg, #2b5bff 0%, #7c3aed 100%); box-shadow: 0 0 0 3px rgba(80, 72, 215, .16), 0 4px 10px -2px rgba(80, 72, 215, .5); animation: none; } /* 드롭다운 칩도 한 글자('N')가 되었으니 헤더 뱃지와 같은 원이어야 한다. 레거시는 NEW 를 담던 알약(39x16 · radius 12 · padding 2px 6px · rgba(80,72,215,.2) 면 / #5048d7 글자)이라 모양부터 다시 준다. */ body .header .sub_depth menu span { display: inline-flex; align-items: center; justify-content: center; width: 18px; min-width: 18px; height: 18px; padding: 0; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: -.3px; } /* N 뱃지 두 개(GNB 블로그 옆 · 광고솔루션 드롭다운 지마켓 광고관리 옆)의 글꼴을 하나로. 모양은 위 규칙이 같이 칠하지만 글꼴은 부모를 물려받아 블로그는 Poppins, 드롭다운은 Pretendard 로 갈렸다(자간도 -0.5 / -0.3). 사이트 글꼴로 맞추고 자간은 0 — 한 글자 원에서 음수 자간은 글자 뒤에만 붙어 N 이 가운데서 왼쪽으로 치우친다. */ body .header #gnb .badge_n, body .header .sub_depth menu span { font-family: var(--mc-font, 'Pretendard', sans-serif); letter-spacing: 0; } /* ========================================================================== 드롭다운 대표 칸 — 밝은 강조 카드 (2026-09-29) 연한 틴트 면 하나라 옆 목록과 무게가 같아 눈이 먼저 가지 않았다. 광원 다크 카드도 입혀 봤지만, 광원은 페이지를 닫는 장면(문의 밴드 · CTA)의 어법이라 흰 드롭다운 안에서는 광고 배너처럼 튀었고 마무리 장면의 힘도 흐려졌다. 흰 카드에 브랜드 그라데이션 테두리 1px, 모서리의 옅은 파랑 빛, 파랑 알약 링크로 메뉴 톤 안에서 강조한다. N 뱃지는 흰 바탕에서 가장 잘 보인다. ========================================================================== */ @media (min-width: 1025px) { .header .sub_depth > ul:first-of-type > li.feature { position: relative; isolation: isolate; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #2b5bff, #7c3aed) border-box; box-shadow: 0 14px 30px -18px rgba(43, 91, 255, .45); /* 옆 칸과의 간격. 그리드 간격(24)은 글자 칸끼리엔 넉넉하지만, 테두리 상자 옆에서는 바짝 붙어 보였다. 카드 오른쪽만 20 더 띄워 44 로 둔다. */ margin-right: 20px; } .header .sub_depth > ul:first-of-type > li.feature::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 70% at 100% 0%, rgba(43, 91, 255, .12), rgba(43, 91, 255, 0) 70%), radial-gradient(50% 60% at 0% 100%, rgba(124, 58, 237, .08), rgba(124, 58, 237, 0) 70%); } .header .sub_depth > ul:first-of-type > li.feature menu a { font-size: 19px; } .header .sub_depth > ul:first-of-type > li.feature > a { padding: 7px 14px; border-radius: 999px; background: #eef3ff; font-size: 13px; font-weight: 600; color: var(--mc-blue, #2b5bff); transition: filter .15s ease; } .header .sub_depth > ul:first-of-type > li.feature > a:first-of-type { background: var(--mc-blue, #2b5bff); color: #fff; } .header .sub_depth > ul:first-of-type > li.feature > a:hover { filter: brightness(.96); color: var(--mc-blue, #2b5bff); } .header .sub_depth > ul:first-of-type > li.feature > a:first-of-type:hover { color: #fff; } .header .sub_depth > ul:first-of-type > li.feature > a::after { /* 공백 대신 여백 — 모바일 링크는 flex 라 앞 공백이 사라져 화살표가 글자에 붙었다 */ content: "\2192"; margin-left: 4px; } } /* 모바일 아코디언 — 흰 카드는 그대로, 같은 테두리와 알약만 입힌다 */ @media (max-width: 1024px) { .header .header_wrap nav #gnb .sub_depth > ul > li.feature { border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #2b5bff, #7c3aed) border-box; box-shadow: 0 10px 24px -16px rgba(43, 91, 255, .45); } .header .header_wrap nav #gnb .sub_depth > ul > li.feature > a { justify-self: start; padding: 7px 14px; border-radius: 999px; background: #eef3ff; font-size: 13px; font-weight: 600; color: var(--mc-blue, #2b5bff); } .header .header_wrap nav #gnb .sub_depth > ul > li.feature > a:first-of-type { background: var(--mc-blue, #2b5bff); color: #fff; } .header .header_wrap nav #gnb .sub_depth > ul > li.feature > a::after { /* 공백 대신 여백 — 모바일 링크는 flex 라 앞 공백이 사라져 화살표가 글자에 붙었다 */ content: "\2192"; margin-left: 4px; } } /* ========================================================================== 드롭다운 리뷰 반영 (2026-09-29) 1) 우측 레일 — 항목과 같은 글자(16/500 잉크)라 여섯 번째 칸처럼 읽혔다. 레일 두 줄을 본문색으로 내려 목록 항목(잉크)과 가른다. 크기는 같은 16px. (첫 줄만 알약 버튼으로 세워 봤지만 혼자 튀어서 접었다.) 2) 패널 아래 여백 — 광고솔루션은 항목이 2~3개라 목록이 y387 에서 끝나는데 패널은 y491 까지 갔다(빈 104px). 대표 카드 안쪽 위아래 30/32 → 26/26, 본목록 · 레일 아래 패딩 58 → 48. 3) 모바일 항목 — 터치 높이 36 → 44, 글자색 본문 회색 → 잉크(PC 와 같게). ========================================================================== */ @media (min-width: 1025px) { .header #gnb .sub_depth > ul:first-of-type { padding-bottom: 48px; } .header #gnb .sub_depth > ul:last-of-type:not(:first-of-type) { padding-bottom: 48px; } .header #gnb .sub_depth > ul:first-of-type > li.feature { padding-top: 26px; padding-bottom: 26px; } .header #gnb .sub_depth > ul:last-of-type:not(:first-of-type) > li + li { margin-top: 16px; } .header #gnb .sub_depth > ul:last-of-type:not(:first-of-type) a { /* 크기는 목록 항목과 같은 16 — 14 는 너무 작았다. 구분은 색과 연파랑 면으로만 */ font-size: 16px; font-weight: 500; color: var(--mc-body, #4a5468); } .header #gnb .sub_depth > ul:last-of-type:not(:first-of-type) a:hover { color: var(--mc-blue, #2b5bff); } @media (max-width: 1024px) { .header .header_wrap nav #gnb .sub_depth > ul > li > a { min-height: 44px; color: var(--mc-ink, #0b1220); } }