/* ========================================================================== 페이지 공통 뼈대 — 디자인 + 반응형 리디자인 대상 51개 화면은 제목 / 탭 / 서브탭 / 필터 / 표 / 폼행 / 버튼이라는 같은 부품을 공유한다. 화면마다 CSS 를 쓰면 같은 부품이 갈라지므로 여기 모은다. 왜 컨테이너 목록으로 스코프를 잡는가 본문(카드·폼·표)은 컨테이너 클래스로 묶는다. 제목(.content_title)과 탭(.content_tab)은 공통 뼈대라 전역으로 둔다. 제외 페이지에서도 제목·탭은 같아야 하고, 그 둘은 콘텐츠가 아니다. 그래서 대상 화면의 컨테이너 클래스만 :is() 로 묶는다. :is() 는 인자 중 가장 높은 특이도를 따르므로 #container.service_history 와 동일하다. 대상 컨테이너 (Views 의 #container class 기준) MyPage service_history pay_processing coupon relax_policy member_modify withdraw_info pay_finish payment recommend withdraw Account login_wrap content-sign-up sign_in account_find Customer faq notice AdInquire inquiry Policy terms 새 화면을 리디자인 대상에 넣을 때는 아래 목록에 컨테이너 클래스만 추가하면 된다. 기능은 건드리지 않는다. 마크업·스크립트는 그대로 두고 표시만 덮는다. 토큰은 css/common/tokens.css 를 따른다. ========================================================================== */ /* 토큰은 :root 에 둔다. 컨테이너에 묶어 뒀더니 제목·탭을 전역으로 돌린 뒤 제외 페이지에서 --pc-ink 가 정의되지 않아 색이 상속값(#333)으로 남았다. 커스텀 속성만 선언하므로 전역이어도 아무 요소도 바뀌지 않는다. */ :root { --pc-ink: var(--mc-ink, #0b1220); --pc-body: var(--mc-body, #4a5468); --pc-muted: var(--mc-muted, #7c87a0); --pc-border: var(--mc-border, #e7ebf5); --pc-tint: var(--mc-tint, #f4f7fe); } /* ---- 서체 ---- 실측 폰트 체인 .content_title Roboto, "Noto Sans KR", sans-serif, NSR, ... -> 한글 Noto Sans KR 서브탭 / 본문 Pretendard, Roboto, "Noto Sans KR", ... -> 한글 Pretendard bundle.css 가 제목류와 상단 탭에 Roboto 우선 체인을 직접 박는다. Roboto 에는 한글 글리프가 없어 다음 후보로 떨어지는데, 그 후보가 본문(Pretendard)과 달라서 같은 페이지 안에서 제목만 다른 서체로 보인다. 본문 체인을 그대로 물려받게 한다. 새 서체를 고르는 게 아니다. */ #container:not(.blog) :is(.content_title, .content_tab li a, .bulletin_tab li a) { font-family: inherit; } /* ---- 페이지 제목 ---- */ #container:not(.blog) .content_title { margin-bottom: 28px; font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--pc-ink); } /* 탭 줄을 본문 축에 맞춘다. 레거시는 .content_tab 을 화면 전체 폭으로 흘린다. 본문이 1080 인데 탭 하나가 472px 이 되어 글자 사이가 텅 비고 좌우 축도 어긋났다. 아래 선은 화면을 가로지르는 게 자연스러우니 폭 제한은 ul 에만 준다. */ #container:not(.blog) .content_tab ul { max-width: var(--mc-content, 1080px); margin: 0 auto; } /* ---- 상단 탭 ---- 밑줄형 */ #container:not(.blog) .content_tab ul { display: flex; justify-content: center; gap: 4px; border-bottom: 1px solid var(--pc-border); } #container:not(.blog) .content_tab li { flex: 1 1 0; /* 탭이 둘뿐인 화면(광고대행 계열)에서 한 칸이 536px 까지 늘어났다. 글자 사이가 텅 비어 탭으로 안 읽힌다. 위쪽에서 가운데로 모으고 한 칸 폭에 상한을 둔다. */ max-width: 260px; min-width: 0; /* a 를 글자 폭으로 줄이고 칸 안에서 가운데 정렬한다. 아래 표시선이 글자를 가리키게 하려면 a 가 칸 전체를 채우면 안 된다. */ display: flex; justify-content: center; } #container:not(.blog) .content_tab li a { position: relative; /* block -> inline-flex. 칸이 260px 인데 글자는 70px 이라 칸 전체를 채우면 표시선이 글자보다 네 배 길어진다. 누르는 면은 좌우 여백을 8 -> 18 로 늘려 보전한다(106 x 52). */ display: inline-flex; align-items: center; padding: 14px 18px 15px; text-align: center; font-size: 16px; font-weight: 500; /* 2026-09-16 — muted 는 보조 설명용 색이다. 누를 수 있는 것에 쓰면 비활성으로 읽힌다(실측 rgb(124,135,160)). body 로 한 단 올린다. */ color: var(--pc-body); white-space: nowrap; /* 레거시가 a 에 3px #333 밑선을 깐다. 표시선은 아래 ::after 가 그리므로 여기서 0 으로 지운다. 안 지우면 두 선이 겹쳐 보인다. */ border-bottom: 0; transition: color .15s ease; } /* 표시선은 의사요소로 그린다. border-bottom 은 a 의 폭을 그대로 따라가므로 좌우 여백까지 밑줄이 뻗는데, 여백은 누르는 면이지 가리키는 대상이 아니다. 여기서 좌우로 12 씩 들여 글자에 맞춘다. 아래 1px 구분선 위에 얹히도록 -1px 으로 내린다. */ #container:not(.blog) .content_tab li a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background-color .15s ease; } /* 안 눌린 탭도 손을 얹으면 표시선 자리를 미리 보여 준다. 어디를 누르면 무엇이 바뀌는지가 먼저 보인다. */ #container:not(.blog) .content_tab li:not(.on) a:hover::after { background: var(--pc-border); } #container:not(.blog) .content_tab li.on a { font-weight: 700; color: var(--pc-ink); } /* 한때 브랜드 색(파랑)으로 그었다가 되돌린다. 탭은 지금 어디에 있는지를 알려 주는 표시지 누르라고 권하는 자리가 아니다. 파란 선은 링크·버튼과 같은 색이라 아직 안 누른 것처럼 읽혔다. 글자와 같은 잉크색으로 두면 굵어진 글자와 선이 한 덩어리로 읽힌다. */ #container:not(.blog) .content_tab li.on a::after { background: var(--pc-ink); } /* ---- 서브 탭 ---- 알약형 */ #container:not(.blog) .bulletin_tab ul { display: flex; justify-content: center; gap: 8px; margin: 28px 0 24px; } #container:not(.blog) .bulletin_tab li a { display: inline-flex; align-items: center; /* 44 기준. 알약이 조금 두꺼워지지만 손가락으로 누르는 탭이다. */ height: 44px; padding: 0 20px; border: 1px solid var(--pc-border); border-radius: var(--mc-radius-pill); background: #fff; font-size: 14px; font-weight: 500; color: var(--pc-body); white-space: nowrap; } #container:not(.blog) .bulletin_tab li.on a { border-color: var(--pc-ink); background: var(--pc-ink); color: #fff; font-weight: 600; } /* ---- 표 ---- 표 스타일은 css/common/table-responsive.css 한 곳에서 정한다. 여기 있던 10개 화면 전용 사본을 걷었다. 상단 2px 굵은 선이 그대로 남아 있었고, 셀 값(14px / 8px)도 전역 계단(15px / 16px)과 갈렸다. 한 컴포넌트는 한 곳에서만 정의한다 — 이 프로젝트에서 제목·탭·서브탭을 두고 이미 겪은 문제다. */ /* ========================================================================== 반응형 — 브레이크포인트는 css/common/tokens.css 의 표를 따른다 ========================================================================== */ @media (max-width: 1024px) { #container:not(.blog) .content_title { font-size: 28px; } /* 탭이 3~4개라 좁아지면 글자가 눌린다. 컨테이너 안에서 가로 스크롤로 흘린다. */ #container:not(.blog) :is(.content_tab, .bulletin_tab) ul { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* 여백이 없으면 첫 탭이 화면 모서리에 붙는다 */ padding-left: 12px; padding-right: 12px; scroll-padding-left: 12px; } #container:not(.blog) :is(.content_tab, .bulletin_tab) ul::-webkit-scrollbar { display: none; } /* 넘치는 줄을 가운데 정렬하면 넘친 만큼이 양쪽으로 갈려 첫 탭이 왼쪽 밖으로 밀리고, 스크롤로도 되돌릴 수 없다(구글 탭 4개 · 390: 줄 441 > 화면 390, 첫 탭 left -39). 시작을 왼쪽에 두고 첫 · 끝 탭의 auto 여백으로 가운데를 만든다 — 들어갈 땐 가운데, 넘치면 auto 가 0 이 되어 첫 탭부터 보이며 흐른다. */ #container:not(.blog) :is(.content_tab, .bulletin_tab) ul { justify-content: flex-start; } #container:not(.blog) :is(.content_tab, .bulletin_tab) ul > li:first-child { margin-left: auto; } #container:not(.blog) :is(.content_tab, .bulletin_tab) ul > li:last-child { margin-right: auto; } #container:not(.blog) .content_tab li { flex: 0 0 auto; /* flex:0 0 auto 로 돌리는 순간 레거시의 colNN 폭이 되살아난다. css.min.css .content_tab.col02 ul li { width:50% } .content_tab.col03 ul li { width:360px } .content_tab.col04 ul li { width:25% } colNN 은 실제 탭 수와 어긋난 곳이 많아(col02 에 탭 6개, col05 에 탭 1~3개, col06 에 탭 5개, 아예 없는 곳 15개) 같은 탭 수인데 화면마다 줄 길이가 달랐다. 탭 2개 358 / 390 / 394 탭 3개 390 / 603 탭 6개 402 / 430 / 768 ← col02 인 SNS 4개만 두 배 폭은 글자가 정한다. colNN 은 무시한다. */ width: auto; } /* 좌우 16px 이면 탭 4개(마이페이지)에서 화면을 넘긴다. 넘치면 활성 탭을 보이려고 자동 스크롤이 걸려 첫 탭이 잘린 채 시작한다(실측 390px: 내용폭 407 / 보이는폭 375, scrollLeft 32). 글자 크기는 두고 좌우만 줄인다. */ #container:not(.blog) .content_tab li a { padding: 14px 12px 15px; } #container:not(.blog) .content_tab li a::after { left: 8px; right: 8px; } } @media (max-width: 768px) { /* ====================================================================== 기준선 · 세로 리듬 · 터치 타깃 전수 리뷰(390px 실측)에서 나온 세 가지를 공통으로 처리한다. ====================================================================== */ /* ---- 1) 여백 누적 차단 ---- 거터(responsive-base 의 --mc-pad)는 .section 한 곳에서만 준다. 그 안쪽 래퍼가 좌우 여백을 또 얹으면 페이지마다 기준선이 달라진다 (실측 14 / 24 / 27 / 28 / 44). 안쪽은 0 으로 눌러 거터를 한 번만 쓴다. */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) :is(.con, .box_area, .txt_area, .con_box, .inner, .sub_content_except) { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* 카드처럼 배경·테두리를 가진 블록만 안쪽 패딩을 갖는다. 거터 16 + 카드 16 = 텍스트가 항상 32 에 온다. */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) :is(.date_search_wrap, .tb_cards tr) { padding-left: var(--mc-pad-in, 16px); padding-right: var(--mc-pad-in, 16px); } /* ---- 데스크톱 세로 여백 축소 ---- 1080px 화면 기준 여백이 그대로 내려와 390px 에서 빈 공간이 100px 을 넘었다. 실측: 제목 아래 125px, 검색 아래 106px 로 첫 화면에 목록이 거의 안 보였다. 원인은 .section 의 padding-top:70px(2곳), section 의 margin-bottom:101px, 제목의 padding-bottom:32px, .bulletin_tab 의 margin-top:42px 누적이다. 바깥 여백은 아래 리듬 스케일 하나로 통일한다. */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .section { /* 0 으로 없애면 위 요소(알약 탭 등)와 붙어 겹친다. 데스크톱 70px 를 리듬 값으로 바꿔 최소 간격을 유지한다. */ padding-top: var(--mc-rhythm, 24px); padding-bottom: 0; } /* :not(#content) — 이 규칙은 '절 사이 간격'을 위한 것인데, 화면에 따라 #content 자체가
이라 그때만 화면 아래 여백까지 24 로 눌렸다. 공지사항 모바일이 24px 로 푸터에 붙어 있던 이유다. 화면 아래 여백은 아래 '#container #content' 규칙이 따로 정한다. */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) section:not(#content) { /* 레거시 선택자가 더 강해 !important 로 받는다. 데스크톱 기준 101px 하단 여백이 페이지 끝에 그대로 남는다. */ margin-bottom: var(--mc-rhythm, 24px) !important; } /* 데스크톱에서 검색창을 섹션 위로 끌어올리려 넣은 음수 마진(-50px)이 모바일에서는 위 요소(알약 탭) 위로 파고들어 겹친다. */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) :is(.search_wrap, .sch_wrap, .ipt_wrap) { margin-top: 0 !important; margin-bottom: 0 !important; } #container:not(.blog) .content_title { padding-top: 0; padding-bottom: 0; } #container:not(.blog) :is(.bulletin_tab, .content_tab) { margin-top: 0; } /* ---- 2) 세로 리듬 ---- 실측에서 섹션 간격이 0인 페이지가 5개였다(결제내역·공지목록·결제·FAQ·쿠폰관리). 어디까지가 한 덩어리인지 읽히지 않는다. 스케일을 하나로 준다. */ /* .section 은 위에서 padding-top 으로 간격을 주므로 여기서는 제외한다. 둘 다 주면 48px 이 되어 다시 벌어진다. */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) section + section { margin-top: var(--mc-rhythm, 24px); } #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .con > * + * { margin-top: var(--mc-rhythm, 24px); } /* 카드 목록 사이는 좁게 */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .tb_cards tr + tr { margin-top: var(--mc-rhythm-sm, 12px); } /* ---- 3) 터치 타깃 ---- iOS 44px / Material 48px 기준. 글자 크기는 그대로 두고 padding 으로 눌릴 영역만 넓힌다. 실측: 공지목록 목록 링크 18px 24개, 결제내역·FAQ 26px, 광고문의 22px */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .tb_style :is(td, th) a { display: inline-block; padding: 12px 0; line-height: 1.4; } /* 페이징 */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) :is(.pagination, .PagedList-pager) a, #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) :is(.pagination, .PagedList-pager) span { display: inline-flex; align-items: center; justify-content: center; /* 40 은 iOS 44 기준에 4px 미달이다(실측: 공지사항에서 40x40 이 13개). */ min-width: 44px; min-height: 44px; } /* ---- 6) 잘림 페이드 ---- 가로 스크롤되는 탭 줄에 "더 있다"는 단서를 준다. 스크롤이 실제로 필요할 때만 Scripts/common/nav-mobile.js 가 is-xscroll 을 붙이고, 양 끝에 닿으면 at-start / at-end 로 그쪽을 끈다. */ .is-xscroll { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); } .is-xscroll.at-start { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%); } .is-xscroll.at-end { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px); mask-image: linear-gradient(to right, transparent 0, #000 20px); } /* 양 끝 모두 닿았다면(스크롤 여유가 거의 없음) 페이드를 없앤다 */ .is-xscroll.at-start.at-end { -webkit-mask-image: none; mask-image: none; } /* ---- 4) 컬럼이 적은 표는 화면에 맞춘다 ---- responsive-base 는 표를 기본적으로 가로 스크롤로 흘린다. 컬럼이 12개인 결제내역에는 맞지만, 3컬럼(번호/제목/작성일)인 목록에는 과하다. 실측: 공지목록 제목 칸이 618px 를 먹어 scrollWidth 709 / client 362. 제목을 줄바꿈 허용해 화면 안에 넣는다. */ #container:is(.notice, .faq):not(.blog) .tb_style { display: table; width: 100%; table-layout: fixed; overflow: visible; } /* colgroup 의 고정폭이 table-layout:fixed 보다 우선하므로 먼저 푼다 */ #container:is(.notice, .faq):not(.blog) .tb_style col { width: auto !important; } #container:is(.notice, .faq):not(.blog) .tb_style :is(th, td):nth-child(1) { width: 44px; } /* 날짜는 줄바꿈하면 두 줄이 되어 행 높이만 커진다. 한 줄에 들어가도록 폭을 주고 글자를 한 단계 줄인다. */ #container:is(.notice, .faq):not(.blog) .tb_style :is(th, td):nth-child(3) { width: 84px; white-space: nowrap; font-size: 12px; } /* 제목만 줄바꿈을 허용한다 */ #container:is(.notice, .faq):not(.blog) .tb_style :is(th, td):nth-child(2) { white-space: normal; word-break: break-word; } /* 좁은 화면에서는 좌우 칸 패딩을 줄여 제목에 폭을 넘긴다. 상하 패딩도 줄인다. 링크에 이미 터치용 상하 패딩 12px 이 있어 셀 패딩과 겹치면 행 높이가 74px 까지 커진다. */ #container:is(.notice, .faq):not(.blog) .tb_style :is(th, td) { padding: 4px; } #container:is(.notice, .faq):not(.blog) .tb_style th { padding-top: 12px; padding-bottom: 12px; } /* ---- 5) 정렬 축 통일 ---- 한 화면에서 제목은 가운데, 본문은 가운데, 폼은 좌측으로 축이 계속 바뀌었다. 긴 문장을 가운데 정렬하면 줄 시작점이 매 줄 달라져 읽기 나쁘다. 제목(.content_title)만 가운데로 두고 나머지는 좌측으로 맞춘다. 결제완료·가상계좌 안내(pay_finish)는 완료 화면이라 가운데 정렬이 의도이므로 제외한다. */ #container:is(.service_history, .coupon, .relax_policy, .member_modify, .withdraw_info, .payment, .recommend, .withdraw, .faq, .notice, .inquiry):not(.blog) :is(.con, .box_area, .txt_area, .con_box, .ipt_wrap, .search_wrap, .con_text, .con_txt, .coupon_register, .list_style) { text-align: left; } /* 광고문의의 연락처·안내 링크가 22px 이라 누르기 어렵다. 전화·이메일은 실제로 누르는 대상이라 특히 중요하다. */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) :is(.l_box, .r_box, .con_text, .con_txt, .section_contact, .caution) a { display: inline-flex; align-items: center; min-height: 44px; } /* 알약형 서브탭·카테고리 필터 */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) :is(.bulletin_tab, .category_tab) li a { min-height: 44px; } #container:not(.blog) .content_title { margin-bottom: 20px; font-size: 24px; } #container:not(.blog) .bulletin_tab ul { justify-content: flex-start; margin: 20px 0 18px; } /* 알약은 줄이지 않는다. li 가 줄면 안쪽 a 가 밖으로 삐져나와 옆 알약과 겹친다(실측 8px). 넘치면 가로로 흘린다. */ #container:not(.blog) .bulletin_tab li { flex: 0 0 auto; } /* ---- 폼 행 ---- 라벨/입력 2단을 1단으로. 마이페이지·문의·계정 화면이 같은 .title / .inputs 구조를 쓴다. */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .inquiry) :is(section, .con, .section) ul li:has(> .inputs) { display: flex; flex-direction: column; align-items: stretch; gap: 6px; } #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .inquiry) :is(.title, .inputs) { /* レ거시는 2단 레이아웃의 라벨 칸 폭을 flex-basis 로 주는 경우가 있다(예: flex:0 0 175px). 행을 column 으로 바꾸면 그 값이 높이로 해석되어 라벨과 입력 사이가 톰게 벌어진다. flex 를 반드시 해제해야 한다. */ flex: none; width: 100%; min-width: 0; min-height: 0; } #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) :is(.box_area, .txt_area, .con_box, .inner, .line, .search_wrap, .ipt_wrap, .sch_wrap, .input_wrap) { /* 레거시 선택자가 #container.x .con .section .box_area .txt_area 처럼 길어 특이도로는 이길 수 없다. 이 블록은 고정폭을 덮는 것이 목적이므로 !important 로 통일한다. */ width: auto !important; min-width: 0 !important; max-width: 100% !important; } /* 검색·입력 묶음은 좁아지면 접고 입력이 남은 폭을 채운다 */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) :is(.search_wrap, .ipt_wrap, .sch_wrap) { display: flex; flex-wrap: wrap; gap: 8px; } #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) :is(.search_wrap, .ipt_wrap, .sch_wrap) > :is(input, select) { flex: 1 1 160px; min-width: 0; } /* 입력 + 버튼이 한 줄에 붙는 묶음(.line)은 좁아지면 접는다 */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .line { display: flex; flex-wrap: wrap; gap: 8px; } #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .line > :is(input, select) { flex: 1 1 180px; min-width: 0; } /* ---- float 2단 해제 ---- l_box(좌) + r_box(우) 로 1080px 을 나눠 갖는 구조가 약관·문의 등 여러 화면에 같은 클래스로 있다. 고정폭을 풀지 않으면 r_box 가 부모를 넘겨 좌측으로 밀려나 앞부분이 잘린다. */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) :is(.l_box, .r_box) { float: none !important; width: auto !important; max-width: none !important; } #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .l_box { margin-bottom: 14px; } /* ---- 레거시 장식 배경 ---- 안심보안정책(relax_policy)은 box_area 배경에 아이콘을 깔고 txt_area 에 padding-left:420px 로 자리를 비워 둔다. 좁은 화면에서는 그 여백만으로 화면을 넘기므로 배경과 여백을 함께 걷는다. */ #container.relax_policy .box_area { min-height: 0; background-image: none; } #container.relax_policy .txt_area { padding-left: 0 !important; } #container.relax_policy .txt_area :is(input, .btn) { width: 100% !important; } /* ---- 레거시 고정폭 방어 ---- 마크업과 bundle.css 에 데스크톱 기준 고정폭 input 이 많다. 컨테이너를 넘지 않게 일괄로 막는다. */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) :is(input, select, textarea) { max-width: 100%; } #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .inquiry) .inputs :is(input[type=text], input[type=password], input[type=email], input[type=tel], select) { width: 100%; } /* 폼 블록 안의 단독 주 버튼은 전체폭으로 둔다. 모바일에서 가운데 놓인 좁은 버튼은 누를 대상으로 잘 읽히지 않는다. */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) :is(.coupon_register, .ipt_wrap, .line) > .btn.point { width: 100%; } /* 폼 라벨 */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .coupon_register > label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--mc-ink, #0b1220); } /* ---- 버튼 묶음 ---- 전체폭으로 쌓는다 */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .inquiry) :is(.btn_group, .btn_area, .section-buttons) { display: flex; flex-direction: column; gap: 10px; } #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .inquiry) :is(.btn_group, .btn_area, .section-buttons) > :is(a, button) { width: 100%; min-width: 0; } /* 폼 맨 아래 단독 제출 버튼(.btn_r.fin — 문의하기 · 완료 · 결제하기 · 목록). components.css 가 max-width:340px + 가운데로 묶어, 390px 에서 위 카드(16~374)보다 양쪽 9px 씩 좁았다(버튼 25~365). 모바일에서는 버튼 묶음과 같이 열을 채운다. PC 는 340px 가운데 그대로. */ #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .notice, .inquiry):not(.blog) .section > :is(.btn_r, .btn).fin { width: 100%; max-width: none; } } /* ========================================================================== 데스크톱 여백 실측: .section 의 padding-top 이 70px, 제목이 padding-bottom 32 + margin 28. 제목 위아래로 130px 이 비어서 한 화면에 본문이 거의 안 들어왔다. ========================================================================== */ #container:not(.blog) .content_title { /* 레거시 padding-bottom:32px 를 걷는다. 간격은 margin 하나로만 준다. */ padding-bottom: 0; } @media (min-width: 769px) { #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .section { padding-top: 40px; } #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify, .withdraw_info, .pay_finish, .payment, .recommend, .withdraw, .faq, .notice, .inquiry, .terms):not(.blog) .section + .section { padding-top: 32px; } } /* ========================================================================== 제목 + 탭 바(.sub_content_except)가 헤더 뒤에 붙던 문제 레거시 css.css 가 이 바를 sticky 로 만들어 둔다. #content .sub_content_except top:-1.5rem padding:70px 0 0 #container.solution_intro .sub_.. top:-1rem top 이 음수라 내용은 46px 에서 시작한다. 헤더가 45px 이던 시절 기준이다. 1025px 이상에서 헤더는 113px 이라 제목과 탭 위쪽이 헤더 뒤로 들어간다 (실측 /Ads/NaverSearch 1440px: 요소 -24~156, 헤더 0~113, 보이는 건 43px). 패딩(70px)만큼 되돌려 내용이 헤더 바로 아래에서 시작하게 한다. 패딩 영역은 헤더 뒤에 깔리지만 둘 다 흰 배경이라 드러나지 않는다. 1024 이하에서는 --mc-header-h 가 45px 이라 기존(-24px)과 사실상 같다. .sub_content_except 는 102개 뷰가 쓴다. 한 곳에서 맞춘다. ========================================================================== */ #content .sub_content_except, #container.solution_intro .sub_content_except { top: calc(var(--mc-header-h) - 70px); } /* ---- 멈춘 띠에 아래 여백이 없던 것 ---- 1440px 실측. 이 바는 padding: 70px 0 0 이라 아래 패딩이 0 이다. 제목만 있는 화면은 h2 의 margin-bottom:28px 이 마진 상쇄로 상자 *밖으로* 새고, 탭이 있는 화면은 탭 바의 margin 이 아예 0 이다. 그래서 어느 쪽이든 sticky 상자가 제목/탭에서 딱 끝난다. 멈춰 있는 동안 본문이 그 아래 0px 까지 파고든다. /Policy/Service 스크롤 1500 에서 제목과 '제 5 조 …' 가 겹침 /Customer/FaqList 겹친 본문 3개 /SnsMarketing/BlogMarketing 2개 정지 상태의 시각 여백(28 / 24 / 0)은 아래 본문이 제 몫으로 갖고 있던 것이라 스크롤하면 같이 올라가 버린다. 두 가지로 나눠 고친다. */ /* (1) 제목만 있는 바는 아예 붙들지 않는다. 붙들어 두는 값은 '탭을 계속 누를 수 있게'다. 제목 하나뿐이면 얻는 것 없이 본문만 가린다. 표가 있는 화면(table-responsive.css)과 결제(PaymentCheckout.css)가 이미 같은 이유로 static 이다. */ #content .sub_content_except:not(:has(.content_tab, .bulletin_tab, .tag_tab)) { position: static; } /* (2) 탭이 있어 계속 붙어 있는 바의 아래 여백. 한때 16px 을 줬다. 멈춰 있는 동안 본문이 탭 밑줄에 바로 닿는 것을 막으려는 값이었다. 그런데 이 여백은 바의 일부(흰 배경)라 맨 위에서도 늘 보인다. 탭 아래가 색 띠로 시작하는 화면에서는 탭과 띠 사이에 흰 줄이 그어진 것처럼 보였다 — 자동입찰 소개 · 순위추적 소개/기능 · 키워드분석 요금. 390 과 1600 에서 똑같이 16px 이었다. 0 으로 둔다. 멈춰 있을 때 본문이 밑줄 바로 아래로 지나가지만, 탭 바의 아래 테두리가 경계를 맡아 읽는 데 지장이 없다(스크롤 상태 대조 확인). 맨 위에서는 띠가 탭에 그대로 붙는다. */ #content .sub_content_except:has(.content_tab, .bulletin_tab, .tag_tab) { padding-bottom: 0; } /* (3) 붙드는 것은 탭까지다 — 제목은 흘려보낸다. 실측(스크롤 1400) : 묶음 전체가 sticky 라 제목까지 화면에 남았다. 1440 헤더 108 + 제목 34 + 아래 여백 28 + 탭 47 = 화면 위 217px 390 헤더 45 + 제목 24 + 아래 여백 20 + 탭 47 = 136px 붙들어 두는 값은 '탭을 계속 누를 수 있게' 다. 어느 화면인지는 탭이 이미 말해 주므로 제목은 같은 말을 두 번 하면서 본문만 밀어낸다. 막힌 곳 : 탭만 sticky 로 바꾸면 안 붙는다. sticky 는 부모의 상자 안에서만 움직이는데 .sub_content_except 는 제목+탭 높이가 전부라 움직일 자리가 0 이다 (실측: 탭이 그냥 -1060 까지 흘러가 버렸다). 그래서 묶음의 상자 자체를 없앤다(display:contents). 제목과 탭이 #content 의 자식이 되어, 탭은 페이지 전체를 기준으로 붙는다. 묶음이 갖고 있던 것은 padding-top 과 흰 배경뿐이라(실측: 폭 제한도 max-width 도 없다) 제목으로 옮기면 그대로다. */ #content .sub_content_except:has(.content_tab, .bulletin_tab, .tag_tab), #container.solution_intro .sub_content_except:has(.content_tab, .bulletin_tab, .tag_tab) { display: contents; } /* 묶음이 갖고 있던 위 여백을 제목이 이어받는다 */ #content .sub_content_except:has(.content_tab, .bulletin_tab, .tag_tab) > .content_title, #container.solution_intro .sub_content_except:has(.content_tab, .bulletin_tab, .tag_tab) > .content_title { padding-top: 70px; background: var(--mc-surface, #fff); } /* 탭 바탕이 투명이라 그대로 두면 본문이 비쳐 지나간다 */ #content .sub_content_except > :is(.content_tab, .bulletin_tab, .tag_tab), #container.solution_intro .sub_content_except > :is(.content_tab, .bulletin_tab, .tag_tab) { position: sticky; top: var(--mc-header-h, 113px); z-index: 1999; background: var(--mc-surface, #fff); } @media (max-width: 768px) { #content .sub_content_except:has(.content_tab, .bulletin_tab, .tag_tab) > .content_title, #container.solution_intro .sub_content_except:has(.content_tab, .bulletin_tab, .tag_tab) > .content_title { padding-top: 32px; } } /* ========================================================================== .sub_content_inwrap 계열 — 솔루션 매뉴얼·주요기능 8개 + AdProduct/DaumAdam 이 9개는 같은 마크업(content_title + content_tab + tag_tab + 본문)을 쓰면서도 .sub_content_except 를 쓰는 22개 화면이 받는 스타일을 한 번도 받은 적이 없다. 1280px 실측: 제목·태그·본문이 전부 L0, 태그 li 가 display:list-item 이라 '#자동입찰' '#서비스소개' 가 한 줄에 하나씩 세로로 쌓였다. 본문 폭과 태그 바를 형제 화면과 같은 1080 기준으로 맞춘다. .section 을 쓰는 화면(매뉴얼 3개)은 이미 L100 R1180 이라 손대지 않는다. ========================================================================== */ /* 제목 위 여백. .sub_content_except 는 padding-top:70px 인데 여기만 0 이라 9개 화면만 제목이 헤더에 딱 붙어 있었다(390px 실측 T102 vs T172). 전수 조사 기준값은 70px — 70개 화면이 이 값이다. */ /* Policy/EmailPrivacy 한 곳만 .sub_content_inwrap 안에 .sub_content_except 를 또 감싸고 있다. 둘 다 주면 70+70=140 이 되어 제목이 혼자 내려간다. */ #container .sub_content_inwrap:not(:has(.sub_content_except)) { padding-top: 70px; } #container .sub_content_inwrap > .ad_product_content { max-width: var(--mc-content, 1080px); margin-left: auto; margin-right: auto; } /* ---- 태그 바 ---- 형제 화면(.sub_content_except .tag_tab)과 같은 회색 띠 */ #container .sub_content_inwrap .tag_tab { padding: 22px 0 20px; /* background 축약을 쓰면 이 프로젝트에서 여러 번 그랬듯 배경 이미지까지 지운다 */ background-color: #f3f4f6; } #container .sub_content_inwrap .tag_list { display: flex; align-items: baseline; box-sizing: border-box; width: auto; max-width: var(--mc-content, 1080px); margin: 14px auto 0; padding: 0; } #container .sub_content_inwrap .tag_list:first-child { margin-top: 0; } /* 두 번째 줄의 strong 은   하나짜리 자리맞춤이다. 폭을 고정해야 축이 맞는다. */ #container .sub_content_inwrap .tag_list > strong { flex: 0 0 180px; font-size: 18px; color: var(--mc-ink, #0b1220); } #container .sub_content_inwrap .tag_list ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; } #container .sub_content_inwrap .tag_list ul li { float: none; margin: 0; } #container .sub_content_inwrap .tag_list ul li a { padding: 3px 6px 2px; font-size: 16px; color: var(--mc-ink, #0b1220); opacity: .6; } #container .sub_content_inwrap .tag_list ul li.on a { color: #359be0; opacity: 1; } /* 좁은 화면에서는 responsive-base 가 .sub_content_inwrap 에 거터를 준다. 그대로 두면 회색 띠만 좌우가 잘려 카드처럼 보인다. 띠는 끝까지 가게 되돌린다. */ @media (max-width: 1240px) { #container .sub_content_inwrap .tag_tab { margin-left: calc(var(--mc-pad, 20px) * -1); margin-right: calc(var(--mc-pad, 20px) * -1); padding-left: var(--mc-pad, 20px); padding-right: var(--mc-pad, 20px); } } /* ========================================================================== 본문 줄간격 · 누르는 면 — 390px 전수 실측에서 나온 것 Content/renew/css.css 의 리셋이 body { line-height: 1 } 이다. 스스로 line-height 를 정하지 않은 요소는 글줄이 서로 닿는다. ========================================================================== */ /* 매뉴얼 3개 화면(자동입찰 사용방법)의 목록이 fs16 / lh16 이었다. 폭과 무관한 문제라 데스크톱에도 같이 적용한다. */ #container:not(.blog) .use_info > li { line-height: 1.6; } @media (max-width: 768px) { /* 소개 화면의 리드문. fs17 / lh21~22 (1.25~1.29) 로 좁은 화면에서 답답했다. 데스크톱 값은 건드리지 않는다. */ #container:not(.blog) .con_text { line-height: 1.6; } /* 누르는 면이 40px 을 밑돌던 링크 두 종(실측 120x33 / 350x39). 글자 크기는 두고 높이만 채운다. */ #container:not(.blog) :is(a.right-arrow, a.ab-banner) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } } /* ========================================================================== 광고문의 — 페이지 제목과 첫 소제목 사이 93px 1440px 실측 사슬 제목 아래 28(제목 margin) + 40(.section padding-top) + 25(.box_area margin-top) = 93 앞의 두 값이 이미 구간을 만드는데 .box_area 가 한 번 더 띄운다. 레거시가 박스마다 주던 25px 이라 첫 박스에서는 겹친다. 섹션 사이(40)는 그대로 두고 중복만 걷는다. 93 → 56. ========================================================================== */ #container.inquiry .section > .box_area:first-child { margin-top: 0; } #container.inquiry form > .section:first-child { padding-top: 28px; } /* ========================================================================== 좁은 화면 — 화면 위쪽 세로 여백 레거시가 두 군데에 70px 을 박아 뒀다. .sub_content_except padding: 70px 0 0 제목/탭 바 위 #container .section padding-top: 70px 본문 절 위 데스크톱에서는 안 보인다. 위 규칙이 sticky top 을 calc(--mc-header-h - 70px) 로 맞춰 둬서, 70px 패딩이 헤더(113px) 뒤에 깔리기 때문이다. 그런데 좁은 화면은 헤더가 45px 뿐이라 그 70px 이 그대로 드러난다. 390px 실측 헤더 밑 -> 타이틀 광고솔루션 68 · 광고대행/공지사항/광고상품 70px 탭 밑 -> 콘텐츠 탭 묶음 아래 16 + 절 위 70 = 86px 화면에 보이는 첫 잉크까지 재면 16 ~ 106px 로 화면마다 들쭉날쭉했다 (탭 있는 72개 화면, 중앙값 30 · 최빈 16 · 60px 9개 · 89~106px 5개) 32px 로 통일한다. sticky top 도 같은 값으로 따라가야 붙어 있을 때 제목이 헤더 바로 밑에 온다(top = 헤더높이 - 패딩). 블로그는 히어로형이라 이 구조를 쓰지 않는다. 그쪽 타이틀이 헤더 밑 40px 쯤에 앉는데, 그 간격을 기준으로 삼았다. ========================================================================== */ @media (max-width: 768px) { #content .sub_content_except, #container.solution_intro .sub_content_except { padding-top: 32px; top: calc(var(--mc-header-h) - 32px); } #container .section { padding-top: 32px; } } /* 핫리뷰·진짜리뷰 — 레거시가 .con 에 padding-top:100px 을 준다. 탭 바로 아래 첫 여백이라 390px 에서 87px 이 비었다(픽셀 실측). 다른 화면과 같은 32px 로 맞춘다. */ @media (max-width: 768px) { #container:is(.hot_reiview, .real_review) .con { padding-top: 32px; } } /* ========================================================================== 화면 아래 여백 — 마지막 절이 자기 여백을 얹지 않게 한다 헤더 아래는 이미 한 값이다(PC 70 · 모바일 32, 도달 가능한 44화면 중 각각 32 · 36개). 푸터 위는 그렇지 않았다. #content { margin-bottom: 108px } 모든 화면 공통 — 이것이 기준 그 위에 마지막 절의 padding-bottom 이 그대로 얹힌다 절의 아래 패딩은 '다음 절과 띄우기' 위한 값이다. 마지막 자리에는 다음 절이 없으므로 공통 여백 위에 얹혀 죽은 공간이 된다. 실측(1440) 회원가입 · 아이디찾기 · 비번찾기 #content pb 100 -> 208 자동입찰 소개 .ab-section pb 84 -> 305 자동입찰 기능 .ab-fn pb 110 -> 245 자동입찰 요금 .ab-fee pb 110 -> 194 지마켓 소개 .gma-finale pb 84 -> 224 블로그 상세 .related-section 80 -> 188 공지사항 · FAQ · 약관 없음 -> 108 마지막 절의 아래 패딩만 걷는다. 색이 칠해진 띠로 끝나는 화면(25개)은 그 패딩이 띠의 높이이므로 대상이 아니다 — 확인해 보니 이 화면들의 마지막 절은 모두 배경이 없다(gma-finale 안쪽 패널만 칠해져 있고 절 자체는 아니다). ========================================================================== */ #content > [id$="-page"] > :last-child { padding-bottom: 0; } #content .post-wrap > .related-section:last-child { padding-bottom: 0; } 로그인 계열은 #content 자체가 아래 패딩(100)을 갖고 있었다. 같은 특이도의 기존 규칙이 뒤에 실려 여기서는 못 이긴다 — Auth.css 원본을 고쳤다. /* ========================================================================== 화면 아래 여백은 한 값이다 레거시(bundle.css:493)가 #container #content 에 margin-bottom:12vh 를 준다. 화면 높이에 비례하는 값이라 모니터가 길면 커지고 짧으면 작아진다. 높이 900 -> 108px 높이 1080 -> 130px 높이 700 -> 84px 같은 화면인데 보는 사람마다 아래 여백이 다르다. 위 여백은 70 · 32 로 고정인데 아래만 흔들리니 균형이 사람마다 달라진다. 고정값으로 바꾼다. PC 108 (지금까지의 최빈값. 위 70 의 1.5배) 모바일 64 (위 32 의 2배. 좁은 화면에서 108 은 스크롤만 늘린다) ========================================================================== */ #container #content { margin-bottom: 108px; } @media (max-width: 768px) { #container #content { margin-bottom: 64px; } } /* 예외 — 색 띠로 끝나는 광고대행 화면(/Ads/* 16곳 + 앱광고, _AdsContact.cshtml 의 .section-contact). 이 띠는 짙은 남색 풀폭이라, 위 공통 여백(108 · 64)이 띠와 짙은 푸터 사이에 흰 띠로 끼어 '짙음 → 흰 줄 → 짙음' 으로 끊겨 보였다(1440 실측 108px · 390 64px). 띠가 마지막 자리일 때만 여백을 걷어 푸터에 붙인다. 메인은 이미 0 이다. */ /* 지마켓(/Ads/Gmarket)은 같은 자리의 띠가 .gm-cta 라 위 선택자에 걸리지 않아 108 · 64 가 남아 있었다. */ #container #content:has(.section-contact:last-child), #container #content:has(.gm-finale:last-child > .gm-cta:last-child), #container #content:has(.content-ads > .ads-fin:last-child) { margin-bottom: 0; }