/* ============================================================
STIZ 디자인 → 카페24 스마트디자인 오버레이 v0.3 · 2026-08-06
대상 화면: 메인 / 상품목록 / 상품상세 / 장바구니 / 주문서 / 로그인 / 게시판 / 마이페이지
원리
카페24가 그려주는 마크업(xans-*, brushlab 스킨) 위에 우리 토큰을 얹는다.
카페24 원본 CSS는 손대지 않고 이 파일 하나만 뒤에 로드해 덮어쓴다.
전면 이식한 마크업(헤더·푸터·상품카드)은 .stiz-* / .stz-* 클래스를 쓴다.
적용 방법
A) 스마트디자인 직전에
B) 또는 스크립트태그 API 로 주입
→ 우리 서버에서 서빙하므로, 디자인 수정 시 카페24를 다시 건드릴 필요가 없다.
⚠️ !important 가 필요한 이유 (실측 확인)
1) 상품명·가격이 관리자 진열설정의 인라인 style 로 찍힌다
예:
2) 상품목록 격자가 JS 절대배치(portfolio-list)라 CSS 격자로 되돌려야 한다
→ 관리자에서 진열설정 인라인 스타일을 비우면 1)은 없앨 수 있다. 테스트몰에서 확인할 것.
============================================================ */
/* ── 0. 자체몰 원본 스타일시트를 그대로 불러온다 ──────────────
왜 복사가 아니라 @import 인가
헤더·푸터·검색 오버레이·모바일 드로어는 자체몰 css/layout.css 에 이미 완성돼 있다.
그걸 여기 베껴 넣으면 자체몰을 고칠 때마다 두 벌을 맞춰야 해서 반드시 어긋난다.
원본을 그대로 부르면 자체몰을 고치는 순간 카페24도 같이 바뀐다.
충돌하지 않는 이유 (실측 확인)
tokens.css : :root 변수 + prefers-reduced-motion 뿐. 전역 선택자 0개.
layout.css : 전부 .stiz-* 네임스페이스. body.page-main 한정자 외 전역 규칙 0개.
components.css : 전부 .stiz-* 네임스페이스. 전역 선택자 0개.
pages/list.css : .list-* / .product-grid / .hide-scroll 같은 무접두 이름이 있지만,
카페24 페이지에서 **DOM 사용 0건 · CSS 정의 0건**을 실측했다(2026-08-06).
→ 카페24(brushlab/Bootstrap) 마크업에는 아무것도 걸리지 않는다.
⚠️ components.css 에도 .stiz-product-card 계열이 있다. 아래 5장(상품카드)이 @import 보다
뒤에 있으므로 5장이 이긴다 — 순서를 바꾸면 카드가 원본 규칙으로 되돌아간다.
(실측: 이 4줄을 넣기 전후로 카드 392×620 · 4열 · 114개 모두 동일)
⚠️ @import 는 반드시 다른 규칙보다 위에 있어야 한다. 아래로 내리면 통째로 무시된다.
⚠️ 레이아웃 템플릿에 를 8개씩 넣지 않으려고 여기 모았다. 순서를 바꾸지 말 것. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap");
@import url("https://stiz-shopping-mall.vercel.app/css/tokens.css");
@import url("https://stiz-shopping-mall.vercel.app/css/layout.css");
@import url("https://stiz-shopping-mall.vercel.app/css/components.css");
@import url("https://stiz-shopping-mall.vercel.app/css/pages/list.css");
@import url("https://stiz-shopping-mall.vercel.app/css/pages/detail.css");
@import url("https://stiz-shopping-mall.vercel.app/css/pages/home.css");
/* ── 1. 디자인 토큰 (자체몰 css/tokens.css 발췌) ───────────── */
:root {
--stiz-black: #111111;
--stiz-white: #ffffff;
--stiz-blue: #2563eb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--text-primary: #111111;
--text-secondary: #4b5563;
--text-muted: #9ca3af;
--border: #e5e7eb;
--surface: #ffffff;
--surface-muted: #f9fafb;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--surface-sunken: #f3f4f6;
--fs-sm: 14px;
--fs-caption: 12px;
--fw-semibold: 600;
--fw-bold: 700;
--dur-slow: 500ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--radius-none: 0;
--radius-card: 8px;
--radius-well: 12px;
--font-sans: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo",
"Malgun Gothic", "맑은 고딕", sans-serif;
--dur-base: 180ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
}
/* ── 2. 공통 · 타이포 기반 교체 (Heebo → Pretendard) ───────── */
body,
body .prdName, body .prdName span,
body .title,
body h1, body h2, body h3, body h4,
body .btn, body button, body input, body select, body textarea,
body #prdInfo span {
font-family: var(--font-sans) !important;
-webkit-font-smoothing: antialiased;
}
body {
color: var(--text-primary);
background: var(--surface);
letter-spacing: -0.01em;
}
/* ── 3. 헤더 (전 화면 공통) ────────────────────────────────── */
/* 헤더 본체 스타일은 위에서 @import 한 자체몰 layout.css 가 담당한다.
여기엔 (가) layout.css 가 참조하지만 components.css 에 있는 조각과
(나) 카페24(brushlab/Bootstrap) 가 방해하는 것을 막는 방어 규칙만 둔다. */
/* 메인 페이지에서 헤더가 안 보이던 문제 (2026-08-06 실측)
카페24 home 레이아웃은 히어로를 position:fixed · z-index:9999 로 화면 전체에 깐다.
자체몰 layout.css 의 --z-header 는 50 이라 그 밑에 깔려 아예 안 보였다.
→ 카페24에서만 헤더를 그 위로 올린다. 자체몰 토큰은 건드리지 않는다. */
.stiz-header { z-index: 10000; }
/* 헤더를 10000 으로 올리면서 모바일 드로어(layout.css z 150)가 헤더 밑에 깔렸다(2026-08-19 모바일 실측:
드로어 머리·닫기 버튼이 헤더에 가려짐). 드로어는 헤더보다 위여야 한다. */
.stiz-drawer-overlay { z-index: 10001; }
/* ── 티즈 챗봇(custom.stiz.kr/js/chatbot.js 를 스크립트태그로 얹음) — 우하단 자리는 티즈, 카카오 버튼은 그 위로 (2026-08-19 사용자 지시) */
#stiz-chat-btn, #stiz-chat-window { z-index: 10002 !important; }
.mbi-simpletalk-kakao { bottom: 100px !important; }
@media (max-width: 639px) { .mbi-simpletalk-kakao { bottom: 84px !important; right: 16px !important; } }
/* ── 방문한 링크가 검게 변하는 것 방어 (2026-08-19 대표 전환 직후 실측) ──────────
brushlab style.css 에 «h1, a, a:visited, … { color:#000 }» 이 있다. a:visited 는 (0,1,1) 이라
우리 클래스 한 개(0,1,0)를 이기고, 색을 «상속» 만 하는 링크(.fork-link 등)는 그대로 검게 된다.
→ 한 번 들어갔던 분류 링크가 검은 카드 위에서 안 보였다(사장님 화면 실측). 우리 링크는 방문 여부로
색이 바뀌면 안 되므로, 방문 상태에서 평소 색을 다시 선언한다(:visited 에는 색만 바꿀 수 있어 색만 적는다). */
.stiz-nav-item:visited { color: var(--gray-700); }
.stiz-nav-item[data-accent="true"]:visited { color: var(--accent); }
.stiz-nav-item.is-active:visited { color: var(--stiz-black); }
body.page-main .stiz-header:not(.is-scrolled) .stiz-nav-item:visited { color: var(--text-on-dark-muted); }
.stiz-header-logo:visited { color: var(--stiz-black); }
.stiz-header-utils .stiz-icon-btn:visited { color: var(--stiz-black); }
.stiz-mega-link:visited { color: var(--gray-800); }
.stiz-mega-foot-link:visited { color: var(--stiz-black); }
.stiz-mega-foot-link[data-accent="true"]:visited { color: var(--accent); }
.stiz-drawer-link:visited { color: var(--stiz-black); }
.stiz-drawer-link[data-accent="true"]:visited { color: var(--accent); }
.stiz-drawer-sub:visited { color: var(--gray-600); }
.stiz-footer-link:visited { color: rgba(255, 255, 255, 0.65); }
.stiz-footer-social a:visited { color: #999; }
.stiz-footer-legal-links a:visited { color: #aaa; }
.stiz-section-header-action:visited { color: var(--text-secondary); }
.stiz-crumb-link:visited { color: var(--text-muted); }
.stiz-product-card a:visited, .stiz-product-card-well:visited { color: inherit; }
.stiz-btn:visited { color: var(--stiz-white); }
.stiz-btn[data-variant="secondary"]:visited { color: var(--stiz-black); }
.fork-link:visited, .fork-title-link:visited { color: #fff; }
.home-hero-cta a:visited { color: inherit; }
.identity-item a:visited, .stiz-footer a:visited { color: inherit; }
/* ⚠️ body 의 margin-top:61px 은 건드리지 말 것.
카페24 관리자 툴바(#front-linker, position:fixed · 61px)를 피하려고 붙는 값이고,
**관리자로 로그인했을 때만** 생긴다. 실제 방문자 화면에는 없다.
"위에 빈 띠가 있다"고 지우면 관리자 화면에서 헤더가 툴바 밑으로 숨는다. */
/* 🗑️ 2026-08-06 제거: body.top-page .main-container{min-height:100vh} 와
body.top-page .swiper-pagination.main{position:absolute}
메인을 자체몰 구조로 통째로 갈아 brushlab 풀스크린 히어로(.viewer)가 사라졌다.
두 규칙은 그 히어로가 있다는 전제에서만 의미가 있었다. 원본 백업은
cafe24/original/index.html — 되돌리면 이 두 줄도 함께 되살려야 한다. */
/* (가) IconButton — 자체몰 css/components.css 2번 항목. 헤더가 이것만 필요로 한다.
components.css 전체를 부르면 상품카드 규칙이 아래 5장과 충돌하므로 이 조각만 옮겼다. */
.stiz-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid transparent;
background: transparent;
color: var(--text-primary);
cursor: pointer;
border-radius: var(--radius-full);
transition: opacity var(--dur-base) var(--ease-standard),
background-color var(--dur-base) var(--ease-standard);
}
.stiz-icon-btn:not(:disabled):hover { opacity: 0.65; }
/* 카페24 로그인/로그아웃 모듈 래퍼.
왜 필요한가: 카페24는 module= 이 붙은 "그 요소 자체"를 상태에 따라 보였다/숨겼다 한다(E-33).
그래서 아이콘을 감쌀 요소가 하나 더 필요한데, 그게 flex 아이템으로 끼면 간격이 틀어진다.
display:contents 는 "상자는 없던 걸로 하고 자식만 남겨라"는 뜻이라 간격이 그대로 유지된다. */
.stiz-auth-slot { display: contents; }
/* (나) 방어 — brushlab/Bootstrap 이 링크·버튼에 걸어 둔 기본값이 헤더를 흐트러뜨리지 않게 한다.
⚠️ 색은 지정하지 않는다. layout.css 가 상태별(스크롤/메인)로 이미 관리하고 있어
여기서 덮으면 그 분기가 죽는다. */
.stiz-header a,
.stiz-drawer a { text-decoration: none; }
.stiz-header button,
.stiz-drawer button { font-family: inherit; }
/* 부트스트랩 .container-fluid 등이 헤더 안에 남아 있지 않은지 확인용 여백 초기화 */
.stiz-header-inner::before,
.stiz-header-inner::after { content: none; }
/* ══════════════════════════════════════════════════════════
4. 메인 페이지
══════════════════════════════════════════════════════════ */
/* 섹션 대형 타이틀 (Replica / Training Wear …) — 50px Heebo → 우리 타이포
🚨 색은 절대 건드리지 말 것 (2026-08-04 실측으로 사고 직전에 발견)
.title 은 .swiper-slide.white 안에 있고, 그 white 클래스가
"이 슬라이드는 어두운 배너 이미지 위이므로 흰 글씨" 라는 뜻이다.
color:#111 로 덮으면 배너 위에서 글자가 사라진다.
→ 폰트·굵기·자간만 바꾸고 색상은 스킨 판단에 맡긴다. */
body .title {
font-weight: 800 !important;
letter-spacing: -0.03em !important;
line-height: 1.1;
}
@media (max-width: 768px) {
body .title { font-size: 32px !important; }
}
/* 배너/슬라이드 모서리 — 자체몰 --radius-well 규격 */
.swiper-slide img,
.slick-slide img {
border-radius: var(--radius-well);
}
/* ══════════════════════════════════════════════════════════
5. 상품 목록 — 템플릿 전면 이식본
카페24 기본 카드(.img-holder.prjct-item)를 우리 .stiz-product-card 구조로
교체했으므로, 자체몰 css/components.css 의 ProductCard 규칙을 그대로 옮겨온다.
(모듈 바인딩 {$product_name} 등은 템플릿에 그대로 살아 있다)
══════════════════════════════════════════════════════════ */
/* 상단 여백 — 옛 고정 헤더 자리 (목록·장바구니 등 portfolio-page 계열 공통)
main 에 padding-top:139px 이 박혀 있었다(옛 fixed 헤더를 피하려던 값).
우리 헤더는 sticky 라 문서 흐름에 자리를 차지하므로 그 여백이 그대로 빈 띠로 남았다.
⚠️ 화면마다 클래스가 붙는 위치가 다르다 — 목록은 main 에, 장바구니는 body 에 붙는다.
그래서 두 경우를 모두 적는다. main#main 만 쓰면 전 화면에 걸려 너무 넓다. */
main#main.portfolio-page,
body.portfolio-page main#main { padding-top: var(--space-6) !important; }
/* 제목·칩·상품격자의 왼쪽 기준선 통일
원래 셋은 기준이 제각각이었다 — 셸은 .stiz-container-wide(1280),
분류행은 부트스트랩 col-md-3+6, 격자는 col-xs-10 col-xs-push-1 오프셋.
전부 자체몰 컨테이너 규격(--container-max / --container-pad)으로 맞춘다. */
/* ⚠️ 분류행을 flex 로 묶으려다 실패했다 (2026-08-06 실측, 되돌림)
.viewType 은 스킨 JS(stickyWrap)가 스크롤 중 position:fixed 로 바꾼다.
flex 자식이 fixed 가 되면 행에서 빠져나가 나머지 폭 계산이 무너진다.
→ 부트스트랩 열 구조는 건드리지 않고, 폭·정렬만 맞춘다. */
.container-fluid > .col-md-3:empty { display: none !important; }
#ctgWrap {
max-width: var(--container-max) !important;
margin: 0 auto var(--space-6) !important;
padding: 0 var(--container-pad) !important;
text-align: left !important;
float: none !important;
width: 100% !important;
}
.post-body.col-xs-10.col-xs-push-1 {
width: 100% !important;
left: 0 !important;
float: none !important;
max-width: var(--container-max) !important;
margin: 0 auto !important;
padding: 0 var(--container-pad) !important;
}
/* 하위 분류 메뉴 → 자체몰 카테고리 칩 모양으로
왜 마크업을 안 바꾸고 CSS 로만 하는가
이 목록은 product_displaycategory · product_children 3단 중첩 모듈이라
마크업을 다시 짜면 모듈 바인딩이 깨질 위험이 크다(E-33). 겉모습만 칩으로 맞춘다.
⚠️ .menuCategory 는 카페24 목록 화면 전용이라 다른 화면에 영향이 없다. */
.menuCategory {
display: flex !important;
flex-wrap: wrap;
justify-content: flex-start;
gap: var(--space-2);
margin: 0 !important; /* 인라인 margin-top:50px 를 지운다 */
padding: 0;
list-style: none;
}
.menuCategory > li { margin: 0; float: none !important; }
.menuCategory > li > a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-full);
background: var(--surface);
color: var(--text-secondary) !important;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
text-decoration: none !important;
transition: border-color var(--dur-base) var(--ease-standard),
background-color var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard);
}
.menuCategory > li > a:hover {
border-color: var(--stiz-black);
color: var(--stiz-black) !important;
}
/* 상품수는 이 몰에서 꺼져 있어 "()" 만 찍힌다 — 빈 괄호를 숨긴다 */
.menuCategory .count.displaynone { display: none !important; }
/* 격자 — 자체몰 .product-grid 와 동일 규격 */
.stiz-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-8) var(--space-6);
height: auto !important;
position: static !important;
padding: 0; margin: 0; list-style: none;
}
@media (max-width: 960px) { .stiz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stiz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); } }
/* 카드 — components.css 9번 ProductCard 이식 */
.stiz-product-card {
display: block; text-decoration: none; color: inherit; cursor: pointer;
position: static !important; width: auto !important;
}
.stiz-product-card-well {
position: relative; display: block;
aspect-ratio: 3 / 4; width: 100%;
background: var(--surface-sunken);
overflow: hidden; border-radius: var(--radius-none);
margin-bottom: var(--space-3);
}
.stiz-product-card-img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform var(--dur-slow) var(--ease-out);
/* brushlab style.css 의 .post-body img { margin:1em 0 2.55em } 이 카드 이미지를 16px 내리고 아래를 잘랐다
(2026-08-19 실측 — 위 회색 띠·상품 하단 잘림). 카드 안 이미지는 여백 0. */
margin: 0 !important;
}
.stiz-product-card:hover .stiz-product-card-img { transform: scale(1.05); }
.stiz-product-card-badge { position: absolute; top: 8px; left: 8px; }
.stiz-product-card-badge img { max-height: 20px; width: auto; }
.stiz-product-card-name {
font-size: var(--fs-sm) !important;
font-weight: var(--fw-bold) !important;
color: var(--text-primary) !important;
margin: 0 !important;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.4;
}
.stiz-product-card:hover .stiz-product-card-name { text-decoration: underline; }
/* 메타(판매가·배송주기) — 카페24 product_ListItem 이 반복해 찍는다 */
.stiz-product-card-meta { margin: var(--space-2) 0 0 !important; padding: 0 !important; list-style: none; }
.stiz-product-card-meta li { margin: 0 0 2px; line-height: 1.45; }
.stiz-meta-label { font-size: var(--fs-caption); color: var(--text-muted); margin-right: 4px; }
.stiz-meta-value { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-primary); }
/* 첫 줄(판매가/상담 후 결제)은 자체몰 data-consult 표기와 같은 파랑 */
.stiz-product-card-meta li:first-child .stiz-meta-value { color: var(--stiz-blue); }
/* 둘째 줄 이후(배송주기 등)는 보조 정보 톤 */
.stiz-product-card-meta li:nth-child(n+2) .stiz-meta-value {
color: var(--text-muted); font-weight: 400; font-size: var(--fs-caption);
}
/* 페이징 */
.xans-product-normalpaging { margin-top: var(--space-12); }
.xans-product-normalpaging a { color: var(--text-secondary); }
.xans-product-normalpaging .this { color: var(--stiz-black); font-weight: 700; }
/* ══════════════════════════════════════════════════════════
6. 상품 상세
══════════════════════════════════════════════════════════ */
/* 6-1. 상품 이미지 */
.xans-product-detail .addimgZoom img,
.xans-product-image img {
border-radius: var(--radius-well);
}
/* 6-2. 정보 표 (#prdInfo)
⚠️ brushlab 스킨이 이미 !important 를 쓴다 — 실측 확인:
.xans-product #prdInfo tr:first-child td span
{ font-size:25px !important; color:#000 !important; font-weight:600 !important }
!important 끼리는 특이성이 높은 쪽이 이기므로, 우리 선택자를 한 단계 더 길게 잡는다.
(앞에 body 를 붙여 요소 수를 늘림 — 클래스 수는 그대로라 부작용이 적다) */
#prdInfo { width: 100%; border-collapse: collapse; }
#prdInfo tr { line-height: 1.5 !important; }
#prdInfo td { padding: var(--space-2) 0 !important; border: 0 !important; }
/* 1행 = 상품명 */
body .xans-product #prdInfo tr:first-child td span {
font-size: 22px !important;
font-weight: 800 !important;
color: var(--text-primary) !important;
letter-spacing: -0.02em;
line-height: 1.25 !important;
}
/* 2행 = 가격 / "상담 후 결제" */
body .xans-product #prdInfo tr:nth-child(2) td span {
font-size: 16px !important;
font-weight: 600 !important;
color: var(--stiz-blue) !important;
}
/* 3행 이후 = 배송비 등 보조 정보 */
body .xans-product #prdInfo tr:nth-child(n+3) td span {
font-size: 13px !important;
color: var(--text-secondary) !important;
}
#prdInfo .title-delv {
font-weight: 600;
color: var(--text-muted);
font-size: 12px;
}
/* 6-3. 보조 링크 (사이즈 가이드 / 구매후기 / 문의하기) */
.buttonArea .textBtnSub { margin: 0 0 var(--space-2) !important; }
body .buttonArea .textBtnSub a {
font-size: 13px !important;
color: var(--text-secondary) !important;
text-decoration: none;
border-bottom: 1px solid var(--border);
padding-bottom: 2px !important;
transition: color var(--dur-base) var(--ease-standard);
}
.buttonArea .textBtnSub a:hover {
color: var(--stiz-black) !important;
border-bottom-color: var(--stiz-black);
}
/* 6-4. 이전/다음 화살표 */
.naviArrow .arrow-detail a { color: var(--text-muted); }
.naviArrow .arrow-detail a:hover { color: var(--stiz-black); }
/* 6-5. 상세 설명 이미지 폭 정리 */
.xans-product-detaildesign img { max-width: 100%; height: auto; }
/* ══════════════════════════════════════════════════════════
7. 버튼 (전 화면 공통) — 자체몰 .stiz-btn 규격(각진 검정 CTA)
══════════════════════════════════════════════════════════ */
.btn, button.btn, a.btn,
.xans-product .btnSubmit, .btnSubmit {
border-radius: var(--radius-none) !important;
font-family: var(--font-sans) !important;
font-weight: 700 !important;
letter-spacing: 0.02em;
min-height: 44px;
transition: background-color var(--dur-base) var(--ease-standard);
}
.btn-primary, .btnSubmit {
background: var(--stiz-black) !important;
border-color: var(--stiz-black) !important;
color: var(--stiz-white) !important;
}
.btn-primary:hover, .btnSubmit:hover { background: #000 !important; }
/* ── 8. 폼 요소 ────────────────────────────────────────────── */
/* 🚨 brushlab 은 입력창을 "평소 흐리게(opacity:.15) → 포커스 시 진하게" 밑줄 스타일로 만들었다.
style.css: .form-control { border-width:0 0 1px; opacity:.15; transition:opacity .2s }
그냥 테두리를 그리면 그 테두리도 15%로 흐려진다.
⚠️ 그런데 opacity:1 !important 로도 안 바뀐다 — 그 opacity 트랜지션이 계속 돌고 있고,
CSS 우선순위상 **트랜지션은 author !important 보다 위**다(인라인 !important 로도 못 이김).
→ transition 을 먼저 끈 다음 opacity 를 잡아야 한다. 순서가 중요하다. (2026-08-04 실측) */
input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], select, textarea,
.form-control {
transition: none !important; /* ← 이 줄이 없으면 아래 opacity 가 안 먹는다 */
opacity: 1 !important;
border-width: 1px !important;
border-style: solid !important;
border-color: var(--border) !important;
border-radius: var(--radius-card) !important;
padding: 10px 12px !important;
margin-bottom: var(--space-4) !important;
font-family: var(--font-sans) !important;
font-size: 14px !important;
color: var(--text-primary) !important;
box-shadow: none !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
outline: 0;
border-color: var(--stiz-black) !important;
box-shadow: none !important;
}
input::placeholder, textarea::placeholder, .form-control::placeholder {
color: var(--text-muted) !important;
}
label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
/* ══════════════════════════════════════════════════════════
9. 페이지 공통 뼈대
(장바구니 · 주문서 · 마이페이지 · 게시판 · 로그인에 공통 적용)
══════════════════════════════════════════════════════════ */
/* 페이지 제목 */
.titleArea, .titleArea h2, .titleArea h3 {
font-family: var(--font-sans) !important;
color: var(--text-primary) !important;
font-weight: 800 !important;
letter-spacing: -0.02em;
}
.titleArea { margin: var(--space-12) 0 var(--space-6) !important; }
/* 도움말 문구 */
.ec-base-help, .ec-base-help li, .ec-base-help p {
font-size: 13px !important;
color: var(--text-secondary) !important;
line-height: 1.6;
}
/* 안내 박스 */
.ec-base-box {
border: 1px solid var(--border) !important;
border-radius: var(--radius-card) !important;
background: var(--surface-muted) !important;
padding: var(--space-4) !important;
}
/* 빈 상태 (장바구니 비었음 등) */
.ec-base-table .message, .xans-order-empty td {
color: var(--text-muted) !important;
font-size: 14px !important;
padding: var(--space-16) 0 !important;
}
/* ══════════════════════════════════════════════════════════
10. 표 (.ec-base-table) — 장바구니·주문서·마이페이지 공통
카페24 기본 표는 border="1" 속성이 HTML 에 박혀 있어
CSS 로 테두리를 지우고 우리 규격(가로줄만)으로 다시 그린다.
══════════════════════════════════════════════════════════ */
.ec-base-table table {
border: 0 !important;
border-collapse: collapse !important;
width: 100%;
font-family: var(--font-sans) !important;
}
.ec-base-table caption {
/* 카페24는 접근성용 caption 을 숨겨 쓴다 — 원래 동작 유지 */
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.ec-base-table th, .ec-base-table td {
border: 0 !important;
border-bottom: 1px solid var(--border) !important;
padding: var(--space-3) var(--space-2) !important;
font-size: 14px !important;
color: var(--text-primary);
vertical-align: middle;
}
.ec-base-table thead th {
background: var(--surface-muted) !important;
border-bottom: 1px solid var(--gray-200) !important;
font-weight: 700 !important;
color: var(--text-secondary) !important;
font-size: 13px !important;
}
.ec-base-table th[scope="row"] {
background: transparent !important;
font-weight: 600 !important;
color: var(--text-secondary) !important;
text-align: left;
}
/* 필수 표시 */
.icoRequired {
color: var(--stiz-red, #e63946) !important;
font-size: 11px !important;
font-weight: 700;
margin-left: 2px;
}
/* 합계 강조 */
.ec-base-table .txtEm, .txtEm { color: var(--text-primary) !important; font-weight: 700 !important; }
/* ══════════════════════════════════════════════════════════
11. 버튼 (카페24 표준 클래스 전반)
══════════════════════════════════════════════════════════ */
.ec-base-button { margin: var(--space-6) 0 !important; }
.btnNormal, .btnAgree, .btnView, .btnClose, .btnRemove, .btnBag,
.btnSubmit, .btnSubmitFix, a.btnNormal, button.btnNormal {
font-family: var(--font-sans) !important;
font-weight: 700 !important;
border-radius: var(--radius-none) !important;
letter-spacing: 0.01em;
min-height: 40px;
padding: 10px 18px !important;
transition: background-color var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard);
}
/* 주요 액션 = 검정 채움 */
.btnSubmit, .btnSubmitFix, .btnBag {
background: var(--stiz-black) !important;
border: 1px solid var(--stiz-black) !important;
color: var(--stiz-white) !important;
min-height: 48px;
}
/* 보조 액션 = 아웃라인 */
.btnNormal, .btnView, .btnAgree {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
color: var(--text-primary) !important;
}
.btnNormal:hover, .btnView:hover, .btnAgree:hover {
border-color: var(--stiz-black) !important;
}
/* brushlab 커스텀 CTA — 로그인·회원가입 버튼이 카페24 표준 클래스가 아니다.
실제 마크업: 로그인
→ .btnSubmit 으로는 안 잡히므로 별도 지정 */
.button_blue {
background: var(--stiz-black) !important;
color: var(--stiz-white) !important;
border-radius: var(--radius-none) !important;
font-family: var(--font-sans) !important;
font-weight: 700 !important;
font-size: 14px !important;
min-height: 48px;
display: flex !important;
align-items: center;
justify-content: center;
padding: 12px 20px !important;
letter-spacing: 0.01em;
transition: background-color var(--dur-base) var(--ease-standard);
}
.button_blue:hover { background: #000 !important; }
/* 삭제 = 조용한 톤 (빨강 남용 금지) */
.btnRemove {
background: transparent !important;
border: 1px solid var(--border) !important;
color: var(--text-muted) !important;
min-height: 32px;
padding: 4px 10px !important;
}
/* ══════════════════════════════════════════════════════════
12. 로그인 / 회원가입
brushlab 이 Bootstrap .form-control 을 쓴다 (8장에서 이미 처리)
══════════════════════════════════════════════════════════ */
.xans-member-login .input-row { margin-bottom: var(--space-4); }
.xans-member-login label {
display: block;
margin-bottom: var(--space-1);
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
}
.xans-member-join fieldset { border: 0; padding: 0; }
/* ══════════════════════════════════════════════════════════
13. 장바구니 / 주문서
══════════════════════════════════════════════════════════ */
.xans-order-basketpackage,
.xans-order-form { font-family: var(--font-sans) !important; }
/* 상품 썸네일 */
.ec-base-prd img, .xans-order-normallist img {
border-radius: var(--radius-card);
background: var(--surface-muted);
}
/* 옵션 선택 블록 */
.xans-order-optionset {
border: 1px solid var(--border) !important;
border-radius: var(--radius-card) !important;
padding: var(--space-3) !important;
background: var(--surface-muted) !important;
}
/* 접기/펼치기 */
.ec-base-fold { border-color: var(--border) !important; }
/* ══════════════════════════════════════════════════════════
14. 게시판 (공지 · 후기 · 문의)
══════════════════════════════════════════════════════════ */
.xans-board-title, .xans-board-title h2 {
font-family: var(--font-sans) !important;
font-weight: 800 !important;
color: var(--text-primary) !important;
letter-spacing: -0.02em;
}
.xans-board-listheader, .xans-board-list {
font-family: var(--font-sans) !important;
font-size: 14px !important;
}
.xans-board-list td, .xans-board-listheader th {
border-bottom: 1px solid var(--border) !important;
padding: var(--space-3) var(--space-2) !important;
}
.xans-board-listheader th {
background: var(--surface-muted) !important;
color: var(--text-secondary) !important;
font-weight: 700 !important;
font-size: 13px !important;
}
.xans-board-paging, .paginate { margin-top: var(--space-8) !important; }
.xans-board-paging a, .paginate a { color: var(--text-secondary) !important; }
.xans-board-paging .this, .paginate .this {
color: var(--stiz-black) !important;
font-weight: 700 !important;
}
.xans-board-empty td { color: var(--text-muted) !important; }
/* ══════════════════════════════════════════════════════════
15. 마이페이지
══════════════════════════════════════════════════════════ */
.xans-myshop-orderstate,
.xans-myshop-asyncbankbook { font-family: var(--font-sans) !important; }
.xans-myshop-orderstate td, .xans-myshop-orderstate th {
border-bottom: 1px solid var(--border) !important;
padding: var(--space-3) var(--space-2) !important;
}
/* 주문 상태 숫자 강조 */
.xans-myshop-orderstate .num, .xans-myshop-orderstate strong {
color: var(--stiz-black) !important;
font-weight: 800 !important;
}
/* ══════════════════════════════════════════════════════════
9. 상품 상세
구조: 왼쪽 긴 이미지 열(.addimgZoom) + 오른쪽 고정 구매패널(.infoArea)
옵션·수량·장바구니 마크업은 손대지 않는다 — 카페24 구매 흐름이 걸려 있어
다시 짜면 담기/주문이 깨질 위험이 크다. 폭·정렬·여백만 맞춘다.
══════════════════════════════════════════════════════════ */
/* 컨테이너 폭을 헤더·목록과 같은 기준으로 (원래 1440 이라 혼자 넓었다) */
.xans-product-detail > .container.stickyWrap {
max-width: var(--container-max) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--container-pad) !important;
padding-right: var(--container-pad) !important;
}
/* 상세 이미지가 컨테이너를 넘지 않게 (원본 1333px 를 그대로 깔고 있었다) */
#detailImage img { max-width: 100% !important; height: auto !important; }
/* 상단 여백 — 목록과 같은 이유(옛 fixed 헤더용 padding-top 111px 이 남아 있었다) */
main#main.xans-product-detail { padding-top: var(--space-6) !important; }
/* ══════════════════════════════════════════════════════════
10. 장바구니
⚠️ 표·수량·주문 버튼 마크업은 손대지 않는다 — 카페24 결제 흐름이 걸려 있다.
폭·제목·여백만 자체몰 규격으로 맞춘다.
══════════════════════════════════════════════════════════ */
.stiz-cart-wrap {
max-width: var(--container-max) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--container-pad) !important;
padding-right: var(--container-pad) !important;
}
/* 페이지 제목 — 자체몰 .cart-title(36px·900·아래 2px 선) 규격
원본은 가운데정렬 파란 글씨(p.text-center.blueF)였다. */
.stiz-page-title {
text-align: left !important;
color: var(--stiz-black) !important;
font-size: 36px !important;
font-weight: 900 !important;
letter-spacing: -0.03em;
margin: 16px 0 24px !important;
padding-bottom: 16px !important;
border-bottom: 2px solid var(--stiz-black);
}
@media (max-width: 640px) {
.stiz-page-title { font-size: 28px !important; }
}
/* ── 9-b. 상세 전면 이식 (레이아웃 상자 교체분) ──────────────
템플릿에서 부트스트랩 열(col-md-9 / col-md-3)을 자체몰 구조로 바꿔 끼웠다.
.detail-grid / .detail-media / .detail-info 는 위에서 @import 한
자체몰 pages/detail.css 가 그대로 그려 준다.
⚠️ 안쪽 카페24 기능 블록(이미지 모듈·구매패널·옵션·수량·버튼)은 손대지 않았다. */
/* 컨테이너 여백 — detail.css 의 .detail-wrap(좌우 20px)보다
다른 화면과 맞춘 --container-pad 를 우선한다. */
.stiz-container-wide.detail-wrap {
padding-left: var(--container-pad) !important;
padding-right: var(--container-pad) !important;
padding-top: 28px !important;
padding-bottom: 72px !important;
}
/* ⚠️ 자체몰과 좌우 역할이 반대다.
자체몰: 이미지가 sticky, 정보가 스크롤 (사진 몇 장 + 긴 옵션)
카페24: 상세페이지 이미지가 통째로 길게 흐르고, 구매패널이 따라와야 한다
→ media 는 흐르게(static), info 를 sticky 로 뒤집는다. */
.stiz-detail-media {
position: static !important;
width: auto !important;
float: none !important;
padding: 0 !important;
}
.stiz-detail-info {
position: sticky !important;
top: 96px;
align-self: start;
width: auto !important;
float: none !important;
padding: 0 !important;
}
/* ══════════════════════════════════════════════════════════
11. 나머지 화면 공통 폭 (로그인·회원가입·게시판·마이쇼핑 등)
카페24 콘텐츠 페이지는 부트스트랩 .container(1440)를 쓴다.
헤더·목록·상세·장바구니와 기준이 달라 혼자 넓었다 → 같은 규격으로 맞춘다.
⚠️ .container 는 부트스트랩 전역 클래스라 범위를 반드시 좁혀야 한다.
실측으로 확인한 것: 우리 헤더(.stiz-header)·푸터(.stiz-footer)·
카페24 관리자바(#front-linker) 안에는 .container 가 **하나도 없다**.
그래서 body 한정자만으로 충분하다. 이 전제가 깨지면 헤더 폭이 같이 줄어든다.
══════════════════════════════════════════════════════════ */
body.portfolio-page .container,
body.single-post .container {
max-width: var(--container-max) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--container-pad) !important;
padding-right: var(--container-pad) !important;
}
/* ══════════════════════════════════════════════════════════
12. 메인 페이지 섹션 (베스트셀러 · 신상품)
자체몰 메인의 섹션 구조를 카페24 메인 아래쪽에 붙였다.
히어로 슬라이더는 이 몰이 만든 브랜드 자산이라 그대로 두고, 그 아래로 흐르게 한다.
══════════════════════════════════════════════════════════ */
/* ⚠️ 히어로(.viewer)가 position:absolute 라 문서 흐름에서 빠져 있다.
그래서 이 블록을 100vh 만큼 내리지 않으면 히어로와 겹친다.
템플릿의 .stiz-home-sections 와 이 규칙은 세트다 — 한쪽만 지우면 겹쳐 보인다. */
/* 섹션 사이 간격 — 두 번째 섹션 머리글 위를 띄운다 */
/* ══════════════════════════════════════════════════════════
13. 폼 요소 공통 (로그인·회원가입·게시판·주문서·마이쇼핑)
화면마다 템플릿을 고치는 대신 입력칸·선택박스를 한 번에 자체몰 규격으로 맞춘다.
⚠️ 범위를 form 과 #main 으로 좁힌 근거 (실측)
- 로그인 입력칸은 #main **밖**의