`), overrides.css 는
`.select-field` 를 겨냥한다. `.select-field` 는 배송지 국가코드
처럼 로컬 JSX 가 직접 붙이는 클래스라 **여기엔 안 닿는다.**
그래서 이 폼의 셀렉트만 모서리 없는 회색 박스로 남아 있다.
(전역 `.select-box` 를 건드리면 주문·클레임까지 번지므로
아이디찾기 폼 안으로 범위를 묶는다)
------------------------------------------------------------ */
.find-id-form__input-wrap .select-box {
height: 48px;
border: 1px solid var(--sc-line);
border-radius: var(--sc-rm);
background-color: var(--sc-white);
overflow: hidden; /* 둥근 모서리 밖으로 select 가 새지 않게 */
transition: border-color 0.15s var(--sc-ease);
}
.find-id-form__input-wrap .select-box:focus-within {
border-color: var(--sc-blue);
}
/* 패키지가 `.find-id-form__input-wrap select` 로 padding:17px 을 박아
높이가 51px 이 된다 → 한 칸 더 깊게 겨눠 48px 로 맞춘다.
오른쪽 여백 36px 은 `.select-box::after` 화살표(right:10px) 자리. */
.find-id-form__input-wrap .select-box select {
height: 48px;
padding: 0 36px 0 14px;
background-color: transparent;
font-size: 14.5px;
color: var(--sc-black);
}
/* ------------------------------------------------------------
6. 휴대폰번호 입력 — 한 줄 정렬
무엇을: 통신사 셀렉트(51px)와 번호 입력(47px)의 높이를 48px 로 맞추고,
사이의 하이픈 막대를 검정에서 선 색으로 낮춘다.
왜: 지금은 셀렉트만 4px 커서 세 칸이 같은 줄에서 어긋난다.
하이픈은 `border-top:1px solid var(--black-color)` 라 순검정이다.
------------------------------------------------------------ */
.find-id-form__input-wrap .phone-number-input {
gap: 2px;
}
.find-id-form__input-wrap .phone-number-input .select-box,
.find-id-form__input-wrap .phone-number-input .text-field {
height: 48px;
}
.find-id-form__input-wrap .phone-number-input__bar {
border-top-color: var(--sc-line-2);
}
/* ------------------------------------------------------------
7. 오류 문구
무엇을: "회원정보를 찾을 수 없습니다." 위아래 여백을 줄이고
입력값 옆에서 읽히도록 왼쪽 정렬 + 본문 크기로 낮춘다.
왜: 패키지는 `margin-top:30px; text-align:center; font-size:1rem`
(450px 이상에서 16px)이라, 필드 → 30px 공백 → 큰 빨강 문장 →
30px 공백 → 버튼 순으로 폼이 두 동강 난다.
⚠️ 색은 손대지 않는다. --caution-color 는 tokens.css 에서 이미
--sc-danger 로 매핑돼 있고, 경고는 의미색이라 브랜드색으로
덮으면 안 된다(DESIGN.md §5).
------------------------------------------------------------ */
.find-id-form__caution,
.find-password-form__caution {
margin-top: 12px;
font-size: 13.5px;
line-height: 1.5;
text-align: left;
}
/* 비밀번호 변경/인증의 안내문은 항상 렌더되고 값이 없을 때만 비어 있다
(ChangePasswordContent.jsx L102 · FindPasswordAuthentication.jsx L90).
빈 가 margin 만 남겨 유령 간격을 만든다 → 비었을 때 접는다. */
.change-password-form__caution,
.find-password-authentication__caution {
font-size: 13.5px;
line-height: 1.5;
}
.change-password-form__caution:empty,
.find-password-authentication__caution:empty {
margin-top: 0;
}
/* ------------------------------------------------------------
8. 주요 버튼 — 모서리와 높이
무엇을: 세 폼의 CTA 를 프로토타입 모양(12px 모서리 · 50px)으로.
왜 그 클래스인가: aurora.css 가 `.find-id-form__btn-wrap button`
(0,1,1) 로 `border-radius:0` 을 박아, overrides.css 의
`.btn{border-radius:var(--sc-rm)}`(0,1,0)를 이겨버린다.
→ **이 세 페이지의 CTA 만 아직 각져 있다.** `.btn` 을 한 단계
깊게(0,2,0) 겨눠야 둥글어진다.
색은 건드리지 않는다 — overrides.css 의 `주요 동작 승격` 블록이
이미 파랑 채움을 준다.
------------------------------------------------------------ */
.find-id-form__btn-wrap .btn,
.find-password-form__btn-wrap .btn,
.change-password-form__btn-wrap .btn {
height: 50px;
border-radius: var(--sc-rm);
font-size: 15px;
}
.find-id-form__btn-wrap,
.find-password-form__btn-wrap,
.change-password-form__btn-wrap {
margin-top: 22px;
}
/* ------------------------------------------------------------
9. 비밀번호 찾기 — 버튼 줄의 위계
무엇을: '아이디 찾기' 링크를 조용한 텍스트 링크로 낮추고,
'비밀번호 찾기' CTA 가 남는 폭을 채우게 한다.
왜: 지금은 링크와 CTA 가 나란히 각각 40% 폭에 테두리를 두르고 있어
(a=검정 테두리, button=파랑 테두리) 무게가 같고, 가운데 20% 가
그냥 빈다. 이 화면의 주 동작은 하나뿐이다.
------------------------------------------------------------ */
.find-password-form__btn-wrap {
gap: 14px;
}
.find-password-form__btn-wrap a {
width: auto;
height: 50px;
padding: 0 4px;
border: none;
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
color: var(--sc-gray);
transition: color 0.15s var(--sc-ease);
}
.find-password-form__btn-wrap a:hover {
color: var(--sc-blue);
}
.find-password-form__btn-wrap .btn {
width: auto;
flex: 1;
}
/* ============================================================
여기부터는 FullModal 안에서 그려지는 세 화면이다.
⚠️ 중요: CustomModal 은 createPortal 로
끝에 붙는다
(react-components .../modal/Portal/Portal.js).
즉 이 DOM 은 `.find-id` / `.find-password` **바깥**이다.
→ overrides.css 의 `.find-password .btn--default { 파랑 채움 }`
같은 페이지 스코프 승격이 여기엔 절대 안 닿는다.
아래 규칙들은 그 사각지대를 메우는 것이지 중복이 아니다.
============================================================ */
/* ------------------------------------------------------------
10. 아이디 찾기 결과
무엇을: 찾은 아이디를 브랜드 틴트 면에 얹어 이 화면의 주인공으로
만들고, 아래 두 링크에 위계를 준다(로그인=주요).
왜: 지금은 아이디가 #f8f8f8 회색 띠에 검정 글자로 얹혀 있어
주변 안내문과 무게가 같다. 링크 둘은 각각 40% 폭 각진 상자라
역시 구분이 없다.
부수 수정
- height:80vh → auto. 콘텐츠 높이를 뷰포트로 못 박을 이유가 없고,
모달 콘텐츠가 이미 calc(100dvh - 60px) 로 스크롤을 갖는다.
- padding 0 10px → 좌우 24px. 모달 폭 500px 에서 10px 은 너무 붙는다.
- line-height:3rem(=48px)가 height:44px 상자 안에 있어 4px 어긋난다.
------------------------------------------------------------ */
.find-id-result {
height: auto;
margin-top: 24px;
padding: 0 24px 32px;
}
.find-id-result__tit {
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: var(--sc-ink-3);
}
.find-id-result__id-text {
margin-top: 14px;
padding: 18px 16px;
border-radius: var(--sc-rm);
background-color: var(--sc-tint);
color: var(--sc-blue);
font-size: 17px;
font-weight: 700;
line-height: 1.4;
word-break: break-all; /* 아이디가 긴 이메일일 수 있다 */
}
/* '(휴면)' 표시. 휴면이 아니면 빈 span 이라 여백만 남는다 → 접는다. */
.find-id-result__dormant-text {
font-size: 13px;
font-weight: 600;
color: var(--sc-gray);
}
.find-id-result__dormant-text:empty {
margin-left: 0;
}
.find-id-result__link-wrap {
margin-top: 28px;
gap: 10px;
}
.find-id-result__link {
flex: 1;
width: auto;
height: 50px;
line-height: 50px;
border-radius: var(--sc-rm);
font-size: 15px;
font-weight: 700;
transition: background-color 0.15s var(--sc-ease), filter 0.15s var(--sc-ease);
}
/* 보조 */
.find-id-result__link--password {
border: 1px solid var(--sc-line);
color: var(--sc-black);
}
.find-id-result__link--password:hover {
background-color: var(--sc-off);
}
/* 주요 */
.find-id-result__link--login {
border: 1px solid var(--sc-blue);
background-color: var(--sc-blue);
color: var(--sc-white);
}
.find-id-result__link--login:hover {
filter: brightness(1.08);
}
/* ------------------------------------------------------------
11. 비밀번호 찾기 — 인증번호 입력
무엇을: '확인/재인증' 버튼을 주요 동작(파랑 채움 · 둥근 모서리)으로,
유효시간 타이머를 읽히는 보조 정보로 정리한다.
왜: 패키지는 이 버튼에 `border:1px solid var(--black-color);
border-radius:0` 을 준다 → 흰 바탕 검정 테두리 각진 상자.
이 화면의 유일한 진행 버튼인데 취소 버튼처럼 보인다.
위 ⚠️ 대로 포털 밖 승격 규칙이 닿지 않으므로 여기서 직접 준다.
------------------------------------------------------------ */
.find-password-authentication {
height: auto;
margin-top: 24px;
padding: 0 24px 32px;
}
.find-password-authentication__tit {
font-size: 16px;
font-weight: 700;
line-height: 1.5;
color: var(--sc-black);
}
.find-password-authentication__input-wrap {
margin-top: 16px;
}
.find-password-authentication .timer {
margin-top: 10px;
font-size: 12.5px;
color: var(--sc-gray);
}
/* 남은 시간 숫자만 또렷하게 (Timer.jsx: .count-down > span) */
.find-password-authentication .timer .count-down span {
font-weight: 700;
color: var(--sc-black);
}
.find-password-authentication__btn-wrap {
margin-top: 20px;
}
.find-password-authentication__btn-wrap .btn {
height: 50px;
border: 1px solid var(--sc-blue);
border-radius: var(--sc-rm);
background-color: var(--sc-blue);
color: var(--sc-white);
font-size: 15px;
}
.find-password-authentication__btn-wrap .btn:hover {
filter: brightness(1.08);
}
/* ------------------------------------------------------------
12. 비밀번호 변경 완료
무엇을: '로그인' 링크를 폭 100% 주요 버튼으로 올리고 좌우 여백을 준다.
왜: 지금은 폭 80% 검정 테두리 상자다. 변경이 끝난 뒤 유일한 다음
걸음인데 시각적으로 가장 약하다. 여기도 포털 밖이라 overrides 의
승격이 닿지 않는다.
또 이 블록엔 좌우 padding 이 없어 문구가 모달 벽에 붙는다.
------------------------------------------------------------ */
.change-password-confirm {
margin-top: 24px;
padding: 0 24px 32px;
}
.change-password-confirm__tit {
font-size: 17px;
font-weight: 700;
line-height: 1.5;
color: var(--sc-black);
}
.change-password-confirm__link-wrap {
margin-top: 24px;
}
.change-password-confirm__link-wrap a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
padding: 0;
border: 1px solid var(--sc-blue);
border-radius: var(--sc-rm);
background-color: var(--sc-blue);
color: var(--sc-white);
font-size: 15px;
font-weight: 700;
transition: filter 0.15s var(--sc-ease);
}
.change-password-confirm__link-wrap a:hover {
filter: brightness(1.08);
}
/* ------------------------------------------------------------
13. 키보드 포커스
무엇을: 이 세 페이지의 조작 요소에 포커스 링을 준다.
왜: common.css 의 `*{all:unset}` 리셋이 브라우저 기본 outline 까지
지운다. base.css 는 `.sc-btn` 에만 링을 달아뒀는데, 여기 버튼들은
전부 패키지 컴포넌트(.btn / a)라 해당이 없다.
값은 base.css `.sc-btn:focus-visible` 과 같은 규격으로 맞춘다.
------------------------------------------------------------ */
.find-id .tabs__item button:focus-visible,
.find-password .tabs__item button:focus-visible,
.find-id-form__btn-wrap .btn:focus-visible,
.find-password-form__btn-wrap a:focus-visible,
.find-password-form__btn-wrap .btn:focus-visible,
.change-password-form__btn-wrap .btn:focus-visible,
.find-password-authentication__btn-wrap .btn:focus-visible,
.find-id-result__link:focus-visible,
.change-password-confirm__link-wrap a:focus-visible {
outline: 2px solid var(--sc-blue);
outline-offset: 2px;
}
@charset 'utf-8';
/* ============================================================
게이트 · 에러 페이지 — 선데이클럽 오버라이드
------------------------------------------------------------
대상 라우트 6개
/not-found /service-check /expired-mall
/member-only /no-access /adult-certification
★ 이 파일은 overrides 성격이다. 전부 @shopby 패키지 클래스를
겨냥한다 — 이 여섯 페이지의 JSX 는 전부 패키지가 정한
className 만 쓰고 sc- 마크업이 하나도 없기 때문이다.
각 블록마다 "왜 이 클래스인지"를 남겼다.
★ 오버라이드 3원칙(docs/DESIGN.md §2)을 그대로 따른다.
!important 없음. 패키지 CSS 뒤에 실리므로 동일 특이성이면 이긴다.
------------------------------------------------------------
먼저 알아야 할 사실 두 가지 (이 파일의 모든 결정 근거)
------------------------------------------------------------
① 여섯 중 넷은 셸 밖에서 렌더된다.
src/router/index.js 에서 /not-found · /no-access ·
/service-check · /expired-mall 는 의 children 이
아니라 **최상위 라우트**다. 즉 이 네 페이지에는
- 헤더 · 푸터 · 탭바가 없고
- .page__content(흰 면, max-width:500px) 도 없고
- .l-content[data-content-width] 도 붙지 않는다.
→ src/constants/layout.js 에 이 넷을 NARROW 로 등록해 뒀지만
**그 선언은 도달하지 않는다.** 폭·면·중앙정렬을 여기서
직접 줘야 한다. (§1)
② 패키지가 rem 을 쓰는데 rem 기준이 450px 에서 점프한다.
common.css: html{font-size:87.5%} + @media(min-width:450px)
{html{font-size:100%}} → 449px 까지 14px, 450px 부터 16px.
그래서 이 페이지들의 본문이 450px 이상에서 20~23px 로 뛴다
(.not-found p = 1.4285714286rem = 22.9px).
스킨의 나머지 본문은 14~15px 다. px 로 다시 잡는다.
============================================================ */
/* ============================================================
1. 셸 밖 4페이지 — 면과 폭을 직접 준다
------------------------------------------------------------
무엇을: .not-found / .no-access / .service-check /
.expired-mall 네 페이지 루트에 Aurora 셸과 같은
"흰 기둥"(폭 500 · 중앙 · 화면 높이)을 만든다.
왜: 위 ①대로 이 넷은 .page__content 밖이라 지금 회색 body
(--background-color = --sc-off) 위에 텍스트만 떠 있다.
나머지 45개 페이지는 전부 흰 면 위라 혼자 다른 세계로 보인다.
패키지 .page__content{margin:0 auto;max-width:500px;
min-height:100vh} + .page__content.site{background:#fff}
와 같은 값을 그대로 재현해 셸과 어긋나지 않게 한다.
⚠️ padding 은 여기서 주지 않는다. .expired-mall 안에 폭 380px
고정 ![]()
가 있어서 좌우 padding 을 주면 375px 화면에서
가로 스크롤이 생긴다. 이미지에 max-width 를 걸어 해결하는
길은 막혀 있으므로(DESIGN.md 함정 노트), 각 페이지에서
**텍스트에만** 여백을 준다. (§5)
------------------------------------------------------------ */
.not-found,
.no-access,
.service-check,
.expired-mall {
width: 100%;
max-width: 500px;
margin: 0 auto;
/* 100vh 는 모바일 주소창 때문에 실제보다 크다.
svh 를 지원하면 그쪽을 쓰고, 아니면 100vh 로 떨어진다. */
min-height: 100vh;
min-height: 100svh;
background-color: var(--sc-white);
color: var(--sc-black);
}
/* ============================================================
2. /not-found — 페이지를 못 찾음
------------------------------------------------------------
패키지 원본:
.not-found{display:flex;flex-direction:column;
justify-content:center;align-items:center;
margin-top:12.8571428571rem;padding:20px}
.not-found p{margin-bottom:1.4285714286rem;font-size:1.4285714286rem}
.not-found__title{font-size:2.4285714286rem !important;font-weight:600}
.not-found__btns button{height:4.2857142857rem;width:35%}
============================================================ */
/* 무엇을: margin-top 을 걷어내고 padding 으로 바꾼다.
왜: 12.857rem = 450px 이상에서 **205px**. 이미 flex 세로
중앙정렬이 걸려 있는데 거기에 205px 를 더 밀어 넣어서
짧은 화면에서는 첫 화면에 제목이 안 들어온다.
중앙정렬에 맡기고 위아래로 숨 쉴 여백만 남긴다. */
.not-found {
margin-top: 0;
padding: 56px var(--sc-gut);
}
/* 무엇을: 본문 22.9px → 15px, 회색.
왜: 스킨 본문 기준(overrides.css 의 15px / 14.5px)과 맞춘다.
line-height 는 여기서만 준다 — 전역 변경 금지(DESIGN.md §5). */
.not-found p {
margin-bottom: 6px;
font-size: 15px;
line-height: 1.65;
color: var(--sc-gray);
}
/* 무엇을: 제목의 무게·자간·색·아래여백만 손본다.
왜: font-size 는 손대지 못한다 — .not-found__title 의
font-size 가 패키지 194KB 안에 11개뿐인 !important 중
하나다(§0). !important 로 맞불을 놓지 않는다는 게
이 프로젝트의 1원칙이라 크기는 그대로 두고
나머지로 브랜드 톤을 맞춘다.
선택자는 .not-found .not-found__title (0,2,0) —
위의 .not-found p (0,1,1) 를 이겨야 색이 먹는다. */
.not-found .not-found__title {
margin-bottom: 14px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.2;
color: var(--sc-black);
}
/* 무엇을: 고객센터 번호를 본문 안에서 들어올린다.
왜: JSX 가 전화번호만 으로 감싸 놨는데
(NotFound.jsx: 문의는 {phoneNo}로)
지금은 주변 문장과 완전히 같아서 감싼 의미가 없다.
에러 페이지에서 유일하게 행동으로 이어지는 정보다. */
.not-found p > span {
font-weight: 600;
color: var(--sc-black);
}
/* 무엇을: 버튼 줄 여백을 좁힌다.
왜: 3.571rem = 57px. 문단과 버튼 사이가 한 화면을 먹는다. */
.not-found__btns {
margin-top: 28px;
}
/* 무엇을: width:35% 를 폭 기반 버튼으로 바꾼다.
왜: 패키지가 .not-found__btns button{width:35%} 로 잡아 놨는데
부모가 width:100% 라 화면이 넓어질수록 버튼이 같이 커진다.
셸이 없는 페이지라 상한도 없어서 1440px 화면에서
504px 짜리 버튼이 된다. 내용 폭 + 최소폭으로 고정한다. */
.not-found__btns button {
width: auto;
min-width: 200px;
height: 52px;
padding: 0 28px;
font-size: 15px;
}
/* 무엇을: 이 페이지의 유일한 행동을 브랜드 블루로 승격한다.
왜: theme="dark" 라 .btn--dark{background:var(--blue-gray-color)}
= 회색빛 먹색이다. 에러 페이지에서 나가는 문이 하나뿐인데
그게 보조 버튼처럼 보인다.
⚠️ :first-of-type 으로 올리지 않는다(DESIGN.md 함정 노트).
실제 컨테이너 .not-found__btns 를 겨냥해
(0,2,0) 으로 .btn--dark (0,1,0) 를 이긴다. */
.not-found__btns .btn--dark {
background-color: var(--sc-blue);
}
/* overrides.css 의 .btn--dark:hover{filter:brightness(1.4)} 는
먹색 기준 값이라 파랑에 걸면 하얗게 뜬다.
주요 CTA(.btn--caution:hover) 와 같은 1.08 로 맞춘다. */
.not-found__btns .btn--dark:hover {
filter: brightness(1.08);
}
/* ============================================================
3. /no-access — 서비스 준비중
------------------------------------------------------------
패키지 원본:
.no-access{display:flex;flex-direction:column;...;
margin-top:12.8571428571rem;padding:20px}
.no-access__title{margin-top:4.2857142857rem;font-size:2.4285714286rem}
.no-access__content{margin-top:1.4285714286rem;line-height:2rem;
font-size:1.2857142857rem}
============================================================ */
/* 무엇을: not-found 와 같은 이유로 margin-top(205px) → padding. */
.no-access {
margin-top: 0;
padding: 56px var(--sc-gut);
}
/* 무엇을: 경고 아이콘을 94px → 58.75px 로 줄이고 톤을 낮춘다.
왜: .ico--exclamation-white-bg 는 sprite.png 를 94px 로 잘라
쓰는 규칙이라 width/height 만 바꾸면 스프라이트가 잘린다.
아래 네 값은 패키지가 같은 아이콘을 작게 쓸 때 쓰는 조합
(.product-board-list .ico--exclamation-white-bg) 을 그대로
가져온 것이다 — 0.625 배로 position/size 가 전부 맞춰져 있어
새 숫자를 지어내지 않아도 된다.
opacity 는 "준비중"이라는 조용한 메시지에 맞춘 것. */
.no-access .ico--exclamation-white-bg {
width: 58.75px;
height: 58.75px;
background-position: -413.75px -27.5px;
background-size: 570px 314.375px;
opacity: 0.7;
}
/* 무엇을: 제목 38.9px → 반응형 24~28px, 아이콘과의 간격 68px → 24px.
왜: 4.2857rem(68.6px) 은 아이콘과 제목을 서로 다른 블록처럼
떼어 놓는다. 크기는 overrides.css 의
.product-section__title clamp() 와 같은 방식으로 잡아
스킨 전체의 제목 스케일과 어긋나지 않게 한다. */
.no-access__title {
margin-top: 24px;
font-size: clamp(24px, 3vw, 28px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.25;
color: var(--sc-black);
}
/* 무엇을: 본문 20.6px → 15px, 고정 line-height:2rem(32px) → 1.7. */
.no-access__content {
margin-top: 12px;
font-size: 15px;
line-height: 1.7;
color: var(--sc-gray);
}
/* ============================================================
4. /service-check — 서비스 점검중
------------------------------------------------------------
여섯 중 브랜드 이탈이 가장 심한 페이지다. 패키지 원본:
.service-check{margin-top:56px;
font-family:"NanumBarunGothic",sans-serif;
background:url("https://rlyfaazj0.toastcdn.net/error/
vis_500_error.png") center top no-repeat;
padding-top:337px}
@media(max-width:720px){.service-check{
background-image:url(".../vis_m_500_error.png");
padding-top:216px}}
.service-check p{color:#727171}
.service-check p:first-child{font-family:나눔스퀘어,...;color:#000}
→ 외부 CDN(toastcdn) 의 NHN 500 에러 일러스트 + 나눔 계열 폰트다.
★ font-family 는 base.css 가 이미 var(--sc-font) 로 덮었다.
여기서 다시 쓰지 않는다.
============================================================ */
/* 무엇을: 외부 CDN 배경 이미지와 그 자리를 비워 둔 padding 을 걷어낸다.
왜: (1) 남의 브랜드 자산이다 — 선데이클럽 점검 화면에 NHN
일러스트가 뜬다.
(2) 우리가 통제하지 못하는 원격 호스트다. 그 CDN 이 죽으면
337px(모바일 216px) 짜리 빈 구멍만 남는다. 하필
"서비스가 안 되는 상황"에 뜨는 페이지다.
모바일 블록의 padding-top:216px 도 같이 무효화된다 —
미디어쿼리는 특이성을 올리지 않고 이 시트가 더 뒤에 있다. */
.service-check {
margin-top: 0;
padding: 88px var(--sc-gut) 64px;
background-image: none;
}
/* 무엇을: 본문 색을 토큰으로, 고정 36px 행간을 비율로.
왜: #727171 은 하드코딩 회색이고 --sc-gray(#71717a) 와
사실상 같은 값이다. 토큰으로 옮겨 두면 색을 한 곳에서 돈다.
line-height:36px 은 폰트 크기를 바꾸면 같이 깨진다. */
.service-check p {
font-size: 15px;
line-height: 1.7;
color: var(--sc-gray);
}
/* 무엇을: 첫 문단(=사실상 제목)의 색·자간·간격.
왜: 패키지가 이 문단만 26px/700/#000 으로 제목처럼 쓴다.
색만 토큰으로 옮기고 자간을 스킨 제목과 맞춘다. */
.service-check p:first-child {
margin-bottom: 14px;
font-size: clamp(22px, 2.8vw, 26px);
letter-spacing: -0.03em;
line-height: 1.3;
color: var(--sc-black);
}
/* ============================================================
5. /expired-mall — 접근이 제한된 쇼핑몰
------------------------------------------------------------
패키지 원본:
.expired-mall{margin-top:-56px;display:flex;...;height:100vh}
.expired-mall p{font-size:26px;line-height:38px;color:#111}
.expired-mall em{color:red}
============================================================ */
/* 무엇을: 유령 헤더 보정(margin-top:-56px)과 height:100vh 를 없앤다.
왜: -56px 은 56px 짜리 헤더가 있다고 가정한 값인데 이 라우트는
셸 밖이라 헤더가 없다(§0 ①). 그래서 내용이 화면 중앙보다
56px 위로 밀려 있다.
height(고정) 대신 §1 의 min-height 를 쓰게 두면 내용이
길어져도 잘리지 않는다.
⚠️ 좌우 padding 은 주지 않는다 — 안에 width=380 고정 ![]()
가
있어서 375px 화면에서 가로 스크롤이 생긴다.
이미지에 max-width 를 거는 길은 막혀 있으므로(DESIGN.md)
여백은 아래 문단에만 준다. */
.expired-mall {
height: auto;
margin-top: 0;
padding: 40px 0;
}
/* 무엇을: 문단에만 좌우 여백 + 색 토큰화.
왜: 위 이유로 컨테이너에 padding 을 못 주니, 실제로 여백이
필요한 텍스트에 직접 준다. #111 → --sc-black. */
.expired-mall p {
margin-top: 8px;
padding: 0 var(--sc-gut);
font-size: clamp(20px, 2.8vw, 26px);
letter-spacing: -0.03em;
line-height: 1.4;
color: var(--sc-black);
}
/* 무엇을: 강조어("제한된")의 순색 red 를 의미색 토큰으로.
왜: color:red 는 하드코딩이고 채도가 너무 높아 문장 안에서
튄다. --sc-danger(#E5484D) 는 경고 의미를 유지하면서
스킨의 다른 경고(.caution, --caution-color)와 같은 색이다. */
.expired-mall em {
color: var(--sc-danger);
font-weight: 700;
}
/* ============================================================
6. /member-only — 회원 전용 몰
------------------------------------------------------------
이 페이지는 셸 **안**이다. .l-content[data-content-width='narrow']
가 붙어 데스크톱에서 560px 로 잡힌다(layout.css).
패키지가 가진 규칙은 .member-only__text 하나뿐이고
.member-only 컨테이너에는 아무 규칙이 없다.
그 아래는 SignInForm 이 그대로 들어온다(,
.sign-in{padding:20px}).
★ .normal-sign-in .btn--default 브랜드 승격은 overrides.css 에
이미 있다. 여기서 다시 쓰지 않는다.
============================================================ */
/* 무엇을: 안내 문구를 옅은 면 위에 올린 '알림 블록'으로 만든다.
왜: 지금은 22.9px 짜리 큰 회색 문장이 로그인 폼 바로 위에
맨몸으로 떠 있어서, "제목"인지 "안내"인지 "폼 레이블"인지
읽히지 않는다. 면을 주면 '왜 여기로 왔는지'가 폼과 분리된다.
좌우 margin 20px 은 아래 .sign-in{padding:20px} 과 같은
세로선을 만들기 위한 값이다 — 컨테이너에 padding 을 주면
.sign-in 의 20px 과 겹쳐 40px 이 된다.
⚠️ 배경에 --sc-tint 를 쓰지 않았다. tint 는 후원 하이라이트
전용색이라(DESIGN.md §5) 게이트 안내에 재사용하면
브랜드 신호가 흐려진다. */
.member-only__text {
margin: 24px 20px 4px;
padding: 20px;
border-radius: var(--sc-rl);
background-color: var(--sc-off);
font-size: 15px;
line-height: 1.7;
color: var(--sc-ink-3);
}
/* ============================================================
7. /adult-certification — 성인인증
------------------------------------------------------------
이 페이지도 셸 안이고 narrow(560px) 다.
패키지 원본:
.adult-certification{padding:20px;text-align:left}
.adult-certification__title{font-size:2.1428571429rem;
line-height:2.8571428571rem;font-weight:500}
.adult-certification__description{font-size:1.1428571429rem;
line-height:1.8571428571rem}
.adult-certification__exit-button{border-radius:0;height:60px}
.adult-certification__certification-btn{height:60px}
.adult-certification__sign-in-title{font-size:1.1428571429rem}
============================================================ */
/* 무엇을: 19+ 배지와 제목 사이 간격.
왜: .adult-certification__image 는 60x60 배경 아이콘인데
바로 아래 제목이 20px 밖에 안 떨어져 있어 붙어 보인다.
(크기 자체는 패키지 값을 유지 — adult.png 가 스프라이트가
아니라 단일 이미지라 60px 에서 선명하다) */
.adult-certification__image {
margin-bottom: 4px;
}
/* 무엇을: 제목 34.3px/500 → 반응형 24~28px/700, 자간 조임.
왜: weight 500 은 스킨의 어떤 제목보다 가볍다
(.product-section__title = 700). 크기도 560px 폭에서
두 줄이 화면을 다 먹는다. */
.adult-certification__title {
margin-top: 16px;
font-size: clamp(24px, 3vw, 28px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.3;
color: var(--sc-black);
}
/* 무엇을: 설명문 18.3px → 14.5px.
왜: 이 문단은 청소년보호법 고지문이라 길다. 18px 로 깔면
본문이 아니라 또 하나의 제목처럼 보여서 위계가 무너진다.
색은 패키지가 이미 --gray-font-color(=--sc-gray) 를 쓴다. */
.adult-certification__description {
margin-top: 12px;
font-size: 14.5px;
line-height: 1.75;
}
/* 무엇을: 경고 문장(.caution)에 무게를 준다.
왜: 패키지 .caution{color:var(--caution-color)} 는 색만 준다.
고지문 안에서 실제 경고 부분을 색만으로 구분하기엔 약하다.
색은 tokens.css 가 --caution-color 를 --sc-danger 로
고정해 뒀으므로 여기서 색을 다시 쓰지 않는다. */
.adult-certification__description .caution {
font-weight: 600;
}
/* 무엇을: 로그인 패널의 판때기 그림자를 걷어내고 테두리를 토큰으로.
왜: 패키지 .l-panel 은 box-shadow:0 10px 1px #f5f5f5 —
흐림 0짜리 회색 띠가 패널 밑에 깔린다. Aurora 특유의
각진 인상을 만드는 원인이고 선데이클럽 카드와 안 맞는다.
⚠️ .l-panel 전역이 아니라 이 페이지의 패널만 겨냥한다.
.l-panel 은 마이페이지·주문서 등이 공유하는 클래스라
여기서 손대면 담당 범위를 넘는다. */
.adult-certification__sign-in {
margin-top: 24px;
border-color: var(--sc-line);
box-shadow: none;
}
/* 무엇을: '회원 로그인' 레이블을 섹션 제목답게.
왜: 18.3px 회색이라 위의 큰 제목과 크기 차이가 거의 없어
두 개의 제목이 경쟁한다. 작고 진하게 = 하위 레이블. */
.adult-certification__sign-in-title {
margin: 4px 0 16px;
font-size: 15px;
font-weight: 700;
color: var(--sc-black);
}
/* 무엇을: 버튼 높이 60px → 52px, 16px → 15px.
왜: 스킨의 다른 CTA(overrides.css 기준 .btn 계열)와 높이를
맞춘다. 60px 는 이 페이지에서만 큰 슬래브가 된다.
⚠️ .adult-certification__certification-btn 은 JSX 에서
'19세 미만 나가기'(보조)와 '회원 성인인증'(주요)에
**똑같이** 붙어 있다. CSS 로는 둘을 구분할 수 없으므로
여기서는 크기만 맞추고 색 위계는 손대지 않는다.
(:first-of-type / :last-of-type 으로 한쪽만 올리는 건
DESIGN.md 함정 노트가 금지한 방식이다 — 로그인 분기에서는
.adult-certification__exit-button 이 유일한 button 이라
같은 선택자가 보조 버튼을 승격시킨다) */
.adult-certification__certification-btn,
.adult-certification__exit-button {
height: 52px;
font-size: 15px;
font-weight: 600;
}
/* 무엇을: 비로그인 분기의 '19세 미만 나가기'를 조용한 버튼으로.
왜: 이 버튼은 로그인 패널보다 **위에** 있고 지금은
테두리 있는 60px 짜리 큰 버튼이라 페이지의 첫 행동처럼
보인다. 실제 주요 행동은 그 아래 로그인이다.
이탈 버튼이라 없앨 수는 없으니 무게를 낮춘다.
(DOM 순서를 바꾸는 flex order 는 쓰지 않았다 — 시각 순서와
탭 순서가 어긋나 키보드 사용자에게 더 나빠진다) */
.adult-certification__exit-button {
background-color: transparent;
border-color: var(--sc-line);
color: var(--sc-gray);
}
.adult-certification__exit-button:hover {
background-color: var(--sc-off);
color: var(--sc-ink-3);
}
/* ============================================================
8. 데스크톱 (>= 1001px)
------------------------------------------------------------
★ 브레이크포인트는 1001px 하나만 쓴다(DESIGN.md §4).
1001px 미만은 Aurora 기본 동작 그대로 둔다.
============================================================ */
@media (min-width: 1001px) {
/* 무엇을: 셸 밖 4페이지를 '화면 높이 흰 기둥'에서
'가운데 놓인 카드'로 바꾼다.
왜: 데스크톱에는 헤더·푸터가 없어서 500px 짜리 흰 기둥이
1920px 회색 바탕을 세로로 가르는 모양이 된다.
카드로 바꾸면 페이지가 '끝난 상태'라는 게 읽힌다.
560px 는 layout.css 의 narrow 폭과 같은 값이다 —
이 넷도 constants/layout.js 에서 NARROW 로 선언돼 있으니
(도달만 못 할 뿐) 의도한 폭을 그대로 따른다. */
.not-found,
.no-access,
.service-check,
.expired-mall {
max-width: 560px;
min-height: 0;
margin-top: 88px;
margin-bottom: 88px;
border: 1px solid var(--sc-line);
border-radius: var(--sc-rl);
}
/* 카드가 되면 세로 중앙정렬용 여백이 필요 없다 */
.not-found,
.no-access {
padding: 64px var(--sc-gut);
}
.service-check {
padding: 64px var(--sc-gut);
}
.expired-mall {
padding: 56px 0;
}
/* 무엇을: 성인인증 로그인 패널에 4면 테두리를 준다.
왜: overrides.css 가 데스크톱에서 .l-panel 에
border-radius 를 주는데, 패키지 .l-panel 의
border-width 는 1px 0(위아래만)이다. 위아래만 있는
선에 라운드를 주면 모서리가 잘린 것처럼 보인다.
이 페이지의 패널에 한해 4면을 채워 카드로 완성한다. */
.adult-certification__sign-in {
border-width: 1px;
}
}
@charset 'utf-8';
/* ============================================================
검색 · 목록 툴바 — 선데이클럽 오버라이드 제안
------------------------------------------------------------
대상 라우트 : /products?keyword=… (검색결과) · /products?categoryNo=… (카테고리)
대상 JSX : src/pages/DisplayCategoryList/
src/components/TotalCountAndSort/
src/components/SearchKeyword/
src/components/GalleryListPage/ (빈 상태 두 종)
★ 성격: 이 파일은 overrides.css 와 같은 성격이다.
전부 @shopby 패키지 클래스를 겨냥한다. 각 블록마다
"어떤 JSX 가 그 클래스를 찍는지 / 패키지 기본값이 무엇인지"를
주석으로 남겼다.
★ 지킨 규칙 (docs/DESIGN.md §2)
- `!important` 없음. 패키지 특이성이 낮아(단일 클래스 56%)
뒤에 실은 시트가 그냥 이긴다.
- 빈 상태(.no-search)에 display:flex 를 걸지 않는다.
아이콘 + 여러 줄 구조라 한 행으로 눌리면 겹친다. 면만 준다.
- line-height 를 전역으로 건드리지 않는다.
줄바꿈이 실제로 일어나는 개별 요소에만 준다.
- 색·모서리는 전부 --sc-* 토큰.
- 레이아웃을 바꾸는 규칙만 @media (min-width: 1001px) 안에 둔다.
색·모서리·타이포 보정은 overrides.css 선례대로 전 구간 공통.
⚠️ .total-sort 는 검색/카테고리 외에 기획전(Event)·상품섹션
(ProductSectionList)에서도 같은 컴포넌트로 쓰인다.
여기 손대면 그 화면들도 같이 바뀐다 — 의도한 것이다(일관성).
============================================================ */
/* ============================================================
1. 툴바 본체 (.total-sort)
------------------------------------------------------------
찍는 곳: components/TotalCountAndSort/TotalCountAndSort.jsx
— GalleryListPage 의 .l-panel 첫 자식
패키지 기본값(aurora.css):
position:sticky; top:90px; z-index:1; padding:10px 20px;
margin-bottom:32px; border-bottom:1px solid var(--light-gray-border-color)
▸ 무엇이 문제인가
`top:90px` 은 **Aurora 기본 헤더 높이 기준**이다. 우리는 헤더를
로컬 JSX 로 교체했고(components.css `.sc-hd{height:64px}`),
그 헤더는 데스크톱·모바일 모두 64px 이다.
그래서 지금은 툴바가 헤더보다 26px 아래에 고정된다 →
헤더와 툴바 사이 26px 띠로 상품 카드가 그대로 흘러 지나간다.
프로토타입(search.html `.filterbar{top:64px}`,
list.html `.toolbar{top:64px}`)과도 어긋난다.
▸ 왜 미디어쿼리 밖인가
이건 데스크톱 전용 디자인이 아니라 **헤더 교체로 생긴 값 불일치**다.
모바일 헤더도 64px 이므로 두 구간 모두 틀렸다. 그래서 공통으로 고친다.
(64px 은 components.css 의 .sc-hd 높이와 짝. 둘을 함께 고칠 것)
▸ 가로 패딩 20px 은 그대로 둔다
패키지 `.thumb-GALLERY{padding:0 20px}` 와 같은 값이라 툴바 좌우 끝이
첫/마지막 카드와 정확히 맞는다. --sc-gut(24px)로 바꾸면 4px 어긋난다.
============================================================ */
.total-sort {
top: 64px; /* ← .sc-hd 높이. 헤더가 z-index:50 이라 1px 겹쳐도 가려진다 */
gap: 12px; /* 좁은 화면에서 건수와 정렬이 붙는 것을 막는다 (flex 는 패키지가 이미 걸었다) */
padding: 12px 20px;
margin-bottom: 20px;
/* 배경은 다시 쓰지 않는다 — 패키지가 var(--whole-color) 를 쓰고
tokens.css 가 그것을 --sc-white 로 매핑해 뒀다(이미 불투명 흰색). */
border-bottom-color: var(--sc-line); /* --light-gray-border-color(#EEEFF1) → 헤어라인 */
}
/* ------------------------------------------------------------
건수 표시 — "총 N개"
찍는 곳:
총 N개
지금은 라벨('총','개')과 숫자가 같은 크기라 위계가 없다.
프로토타입(search.html `.rcount`)은 라벨을 회색으로 눕히고
숫자만 크고 굵게 세운다.
⚠️ `.highlight` 는 패키지 **전역 유틸리티**(common.css
`.highlight{color:var(--point-color)}`)라 지금 숫자가 브랜드
블루로 나온다. 블루는 이 스킨에서 '후원'을 뜻하는 색이므로
(components.css .sc-dona 계열) 단순 건수에 쓰면 의미가 흐려진다.
→ 이 자리에서만 잉크색으로 되돌린다. 전역 .highlight 는 안 건드린다.
------------------------------------------------------------ */
.total-sort__count {
font-size: 13.5px;
font-weight: 500;
color: var(--sc-gray);
line-height: 1.4; /* 개별 지정. 전역 line-height 는 건드리지 않는다 */
}
.total-sort__count .highlight {
margin: 0 3px; /* 패키지 기본 `0 4px 0 8px` 은 '총'과 숫자 사이가 8px 로 벌어진다 */
font-size: 15px;
font-weight: 800;
color: var(--sc-black);
letter-spacing: -0.02em;
}
/* ============================================================
2. 정렬 드롭다운 (.total-sort .select-box)
------------------------------------------------------------
▸ 왜 `.select-box` 인가 — 여기가 이 파일의 핵심 발견이다.
TotalCountAndSort 는 `
`
를 쓰는데, 패키지 SelectBox 가 실제로 뱉는 DOM 은
이다. **`.select-field` 가 아니다.**
그런데 overrides.css 의 폼 규칙은 `.select-field > select` 만
겨냥한다 → 이 정렬 드롭다운에는 브랜드 스타일이 **하나도 안 걸린다.**
지금 화면에 나오는 건 패키지 기본값 그대로:
.select-box{border:1px solid #000; color:#3f444c} ← 검은 각테두리
.total-sort__select-box{border-color:#d2d2d2; font-weight:lighter}
.select-box--sort::before{ 스프라이트 정렬아이콘, left:20px }
.select-box--sort select{ padding-left:52px }
= 각진 회색 상자 + 좌측 스프라이트 아이콘 + 52px 들여쓰기.
프로토타입(list.html `.sortsel`)은 pill 테두리 + 우측 셰브론이다.
▸ 선택자 형태
`.total-sort .select-box`(0,2,0)로 쓴다. 패키지의
`.select-box--sort::before`(0,1,1) / `.total-sort__select-box`(0,1,0)
를 특이성으로 확실히 넘기기 위해서다. (!important 불필요)
============================================================ */
.total-sort .select-box {
width: auto;
border: 1px solid var(--sc-line);
border-radius: var(--sc-rpill);
background-color: var(--sc-white);
color: var(--sc-ink-3);
transition: border-color 0.15s var(--sc-ease), box-shadow 0.15s var(--sc-ease);
}
.total-sort .select-box:hover {
border-color: var(--sc-line-2);
}
/* 테두리가 에 있고 포커스는