/* ===================================================== 업무형(ERP 스타일) UI 샘플 ERP(IVI-EPMS) 실측: slate 중립 · 13px 본문 · rounded-lg · Inter 한글이 주라 폰트는 Pretendard 를 쓴다(Inter 는 한글 글리프가 없어 어차피 대체된다). ===================================================== */ .erp-ui { --s-50: #F8FAFC; --s-100: #F1F5F9; --s-200: #E2E8F0; --s-300: #CBD5E1; --s-400: #94A3B8; --s-500: #64748B; --s-600: #475569; --s-700: #334155; --s-800: #1E293B; --s-900: #0F172A; --brand: #2E6A9E; /* 로고 파랑 — ERP 의 sky 대신 우리 브랜드색을 쓴다 */ --brand-soft: #EAF2F8; --danger: #DC2626; --ok: #059669; /* 셸 크롬 색 — 모바일 하단바가 쓴다. 레일·배너패널은 걷어내며 같이 정리했다. */ --chrome: #EEF4FA; --chrome-2: #F6F9FC; /* 헤더 색 — 흰색(2026-08-25, 레일·사이드패널을 걷어내며 예전 쇼핑몰 느낌으로 되돌렸다). 하늘색(#0EA5E9)이던 시절엔 흰 아이콘을 썼는데, 흰 바탕에서는 흰 아이콘이 그대로 사라진다 — 그래서 아이콘도 글자와 같은 어두운 잉크로 바꿨다(.t_btn i 의 하드코딩된 color:#fff 세 곳을 지웠다). --top-fg/--top-dim 은 원래도 어두운 색이라 흰 바탕에서 대비가 오히려 더 좋아져 값은 그대로 둔다. */ --top: #FFFFFF; --top-2: #FFFFFF; /* 위아래 같은 색 = 민색. 다르게 주면 그라데이션이 된다 */ --top-fg: #020617; /* 주 글자·아이콘 */ --top-dim: #082F49; /* 보조 글자·기본 아이콘 */ --top-line: var(--s-200); /* 헤더 안의 경계선 — 흰 바탕이라 옅은 회색이면 된다 */ --top-hover: var(--s-100); /* 호버 바탕 */ /* 민화샵 벤치마크 4단 헤더(doc/SHOP_UPGRADE_TODO.md, 커밋 1328f8f, 2026-08-25 복원) — 유틸바 / 헤더 / GNB. 셋 다 고정이고 위에서부터 차곡차곡 쌓인다. --head-stack-h 하나로 합쳐 둬서, 본문 padding-top 이나 다른 sticky 요소들의 top 오프셋을 계산할 때 변수를 일일이 더할 필요가 없다. (2026-08-25 — 알약줄은 GNB 와 한 줄로 합쳤다. 실측해 보니 참고 사이트가 그랬다. 3단 구조가 됐다.) */ --utilbar-h: 36px; /* 1단 — 공지 + 계정 */ --topbar-h: 78px; /* 2단 — 로고(54px) + 위아래 12px. 로고를 키우면 여기도 키운다 */ --gnb-h: 46px; /* 3단 — 전체보기 + 대분류·신상품·베스트 + 기획전 등 우측 메뉴 */ --head-h: calc(var(--utilbar-h) + var(--topbar-h)); /* 1+2단 — 검색창 펼침이 여기 아래로 내려온다 */ --head-stack-h: calc(var(--head-h) + var(--gnb-h)); /* 3단 전체 */ --head-w: 1280px; /* 헤더의 안쪽 폭 — 본문과 같은 1280 로 정렬(지시, 2026-09-01) */ --r: 8px; /* rounded-lg */ font-size: 13px; color: var(--s-700); background: var(--s-50); } .erp-ui * { box-sizing: border-box; } /* :where 로 특정도를 죽인다(0,1,0) — 예전 .erp-ui a(0,1,1)는 화면 CSS 의 단일 클래스 버튼(.og_btn_main 등 0,1,0)까지 이겨서, 남색 버튼 위에 글자가 흰색 대신 상속된 어두운 잉크로 찍혔다(실측 캡처, 2026-08-31 — 기관구매 안내의 '기관 구매 신청하기'). 화면 CSS 는 셸보다 뒤에 실리므로 특정도만 안 밀리면 이긴다. */ .erp-ui :where(a) { color: inherit; text-decoration: none; } .erp-ui ul { margin: 0; padding: 0; list-style: none; } .erp-ui h1, .erp-ui h2, .erp-ui h3, .erp-ui p { margin: 0; } .erp-ui .num { font-variant-numeric: tabular-nums; } /* ── 스크롤바 ────────────────────────────────── 기본 스크롤바(Windows 17px)가 화면 폭을 그만큼 먹고 업무형 톤에도 튄다. 표준 속성과 WebKit 을 둘 다 준다 — Firefox 는 scrollbar-width 만, Chrome/Edge/Safari 는 ::-webkit-scrollbar 만 듣는다. 완전히 숨기지는 않는다. 어디까지 왔는지 보이지 않으면 긴 목록에서 길을 잃는다. */ .erp-ui, .erp-ui * { scrollbar-width: thin; scrollbar-color: var(--s-300) transparent; } /* 공백 없는 선택자(.erp-ui::)가 페이지 전체 스크롤바를, 공백 있는 쪽이 안쪽 스크롤 영역(카테고리 서랍, 탭줄)을 맡는다. 둘 다 있어야 한다. */ .erp-ui::-webkit-scrollbar, .erp-ui ::-webkit-scrollbar { width: 8px; height: 8px; } .erp-ui::-webkit-scrollbar-track, .erp-ui ::-webkit-scrollbar-track { background: transparent; } .erp-ui::-webkit-scrollbar-thumb, .erp-ui ::-webkit-scrollbar-thumb { background: var(--s-300); border-radius: 4px; } .erp-ui::-webkit-scrollbar-thumb:hover, .erp-ui ::-webkit-scrollbar-thumb:hover { background: var(--s-400); } .erp-ui::-webkit-scrollbar-corner, .erp-ui ::-webkit-scrollbar-corner { background: transparent; } /* ── 유틸바 (1단) ────────────────────────────── 민화샵 4단 헤더의 맨 위 줄 — 공지 + 계정. 바탕은 화면 전체, 내용은 1440px 로 가운데 모은다(아래 헤더·알약줄·GNB 도 전부 같은 규칙). */ .erp-util { position: fixed; left: 0; right: 0; top: 0; height: var(--utilbar-h); background: var(--s-50); border-bottom: 1px solid var(--s-200); z-index: 111; /* 헤더(110)보다 위 — 계정 메뉴 hover 가 헤더에 안 가린다 */ } .util_inner { max-width: var(--head-w); margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; } .util_notice a { display: flex; align-items: center; gap: 8px; min-width: 0; } .util_notice .un_badge { flex: none; padding: 1px 7px; border-radius: 4px; background: var(--brand-soft); color: var(--brand); font-size: 10px; font-weight: 700; } .util_notice .un_text { font-size: 12px; color: var(--s-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .util_notice a:hover .un_text { color: var(--s-900); } .util_right { flex: none; display: flex; align-items: center; gap: 14px; } .util_right a { font-size: 12px; color: var(--s-500); } .util_right a:hover { color: var(--s-900); } /* ── 헤더 — 로고·검색·아이콘 (2단) ────────────── 40% 검색 / 20% 로고 / 40% 버튼. */ .erp-top { position: fixed; left: 0; right: 0; top: var(--utilbar-h); height: var(--topbar-h); background: linear-gradient(180deg, var(--top-2) 0%, var(--top) 100%); border-bottom: 1px solid var(--top-line); z-index: 110; /* 그림자는 스크롤했을 때만. 맨 위에서는 본문이 헤더에 닿아 있지 않아 그림자를 깔면 없는 깊이를 지어내는 셈이 된다. */ transition: box-shadow .18s ease; } .erp-top.is_stuck { box-shadow: 0 2px 14px rgba(2, 6, 23, .12); } /* 바탕은 화면 전체(위)를 칠하고, 내용은 여기서 1440px 로 가운데 모은다 — 민화샵처럼 헤더도 화면 끝까지 내용을 늘리지 않는다. 로고(고정폭) · 검색(남는 폭, 최대폭 제한) · 아이콘(고정폭) 순서 — grid 로 로고를 억지로 가운데 두던 방식을 버렸다(실측, 2026-08-26). flex 라 셋 중 하나가 줄어도 나머지가 저절로 자리를 채운다. */ .erp-top .top_inner { max-width: var(--head-w); margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 20px; padding: 0 20px; } /* 로고는 헤더 높이(--topbar-h)에 매여 있다. 키우려면 헤더도 같이 키워야 한다 — 안 그러면 위아래가 잘린다. 지금은 54px 로고 + 위아래 12px 여백 = 78px. */ /* '토리샵' 글자는 하단첨자처럼 작게, 워드마크 오른쪽 아래에 붙인다(지시, 2026-08-27). 로고 이미지가 이미 상호를 크게 말하고 있어 옆 글자까지 같은 크기로 서면 두 번 외치는 꼴이었다. */ .erp-top .t_logo { flex: none; display: flex; align-items: flex-end; gap: 6px; } .erp-top .t_logo img { height: 54px; width: auto; display: block; } .erp-top .t_logo span { font-size: 13px; font-weight: 700; color: var(--top-dim); letter-spacing: 0; white-space: nowrap; } /* 검색 — 데스크톱은 항상 펼쳐져 있다(실측, 2026-08-26). 예전엔 돋보기를 눌러야 펼쳐지는 접힌 칸이었다. 카테고리·돋보기 아이콘은 모바일 전용이라 여기서는 감춘다 — 데스크톱은 검색창이 늘 보이고, 카테고리는 GNB(3단)의 원형 '전체보기'가 맡는다(아래 모바일 블록에서 되살린다). */ .erp-top .t_search_area { flex: 1 1 auto; min-width: 0; max-width: 560px; position: relative; } /* id 로 건다 — 뒤에 나오는 .erp-top .t_iconbtn{display:grid}(공용 아이콘버튼 규칙)와 클래스 특정도가 같아서, 클래스로만 감추면 파일 순서상 뒤에 오는 그 규칙에 져서 데스크톱에서도 버튼이 보였다(실제로 겪은 버그, 2026-08-26 — 검색창 위에 아이콘이 떠서 헤더 박스를 넘치고 GNB 줄까지 밀고 들어갔다). id 선택자는 특정도가 더 높아 순서와 상관없이 항상 이긴다. */ #btnCategory.t_cate_mobile, #btnSearchToggle.t_searchtoggle { display: none; } .erp-top .t_search { position: static; display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; margin: 0; padding: 0 16px; background: var(--s-100); border: 0; border-radius: 999px; } .erp-top .t_search input { flex: 1; border: none; background: none; outline: none; font-family: inherit; font-size: 14px; color: var(--s-900); } .erp-top .t_search input::placeholder { color: var(--s-400); } .erp-top .t_search i { color: var(--s-400); font-size: 18px; } /* 검색창이 max-width(560px)에서 성장을 멈추면 남는 폭이 이 요소로 안 넘어와 컨테이너 우측에 빈 채로 남는다(실측, 2026-08-26) — margin-left:auto 로 직접 오른쪽 끝에 붙인다. */ .erp-top .t_right { flex: none; min-width: 0; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 6px; } /* 평소엔 아이콘만 크게, 올리면 아이콘이 줄며 글자가 아래 나온다(지시, 2026-08-27). 예전 '항상 아이콘+글자' 방식에서 되돌렸다 — 아이콘을 키우고 글자를 치우니 헤더가 가벼워진다. 글자는 호버가 답한다. */ .erp-top .t_btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 58px; height: 58px; padding: 0 2px; border: 0; background: none; cursor: pointer; font-family: inherit; border-radius: var(--r); color: var(--top-dim); transition: background .16s ease, color .16s ease; } .erp-top .t_btn i { font-size: 30px; line-height: 1; /* 흰 헤더라 아이콘도 글자와 같은 어두운 잉크(var(--top-dim) 상속)를 쓴다. 하늘색이던 시절엔 여기 color:#fff 였다 — 흰 바탕으로 바뀌며 지웠다. 안 지우면 흰 아이콘이 흰 바탕에 묻혀 안 보인다. */ transition: font-size .18s ease, color .18s ease; } /* 라벨은 흐름에서 아예 뺀다(absolute) — 흐름에 두고 visibility 로만 숨기면 그 높이만큼 아이콘이 위로 밀려 버튼 세로 중앙에서 벗어난다(실측 캡처, 2026-08-27). 절대배치라 아이콘은 늘 정중앙이고, 호버로 아이콘이 24px 로 줄면 그 아래 빈자리에 라벨이 나온다 — 튀는 것도 없다. */ .erp-top .t_lbl { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font-size: 10px; font-weight: 600; line-height: 1.2; white-space: nowrap; visibility: hidden; } /* 호버 — 아이콘이 줄고 글자가 나온다 */ .erp-top .t_btn:hover { background: var(--top-hover); color: var(--top-fg); } .erp-top .t_btn:hover i { font-size: 24px; } .erp-top .t_btn:hover .t_lbl { visibility: visible; } .erp-top .t_acct:hover .t_btn { background: var(--top-hover); color: var(--top-fg); } .erp-top .t_acct:hover .t_btn i { font-size: 24px; } .erp-top .t_acct:hover .t_btn .t_lbl { visibility: visible; } /* 배지는 버튼이 아니라 아이콘에 붙는다 — 버튼 기준으로 두면 글자가 펼쳐질 때 배지가 그 위를 덮는다. */ .erp-top .t_ico { position: relative; display: inline-flex; } .erp-top .t_badge { position: absolute; right: -7px; top: -3px; min-width: 16px; height: 16px; padding: 0 4px; /* 테두리는 헤더색이다 — 배지를 헤더에서 오려낸 것처럼 띄운다 */ border-radius: 8px; border: 1.5px solid var(--top); background: var(--danger); color: #fff; font-size: 9px; font-weight: 700; display: inline-grid; place-items: center; } /* 주 기능 버튼 — 테두리 대신 색으로 세운다. 테두리를 두르면 옆 아이콘들과 층이 갈려 헤더가 두 덩어리로 보인다. */ /* 카트공유는 예전에 .is_key 를 달고 혼자 다른 색·다른 호버를 썼다. 그래서 옆 버튼들과 계속 어긋나 보였다 — **헤더 버튼은 전부 .t_btn 하나로만 꾸민다.** 강조가 필요해지면 그때 다시 만들되, 만들면 이 어긋남이 되돌아온다는 것을 알고 만들 것. .is_todo 는 모양이 아니라 **동작**이다(shell.js 가 '준비 중' 안내를 띄운다). 호버는 .t_btn:hover 가 이미 같은 값을 주므로 따로 두지 않는다. */ /* 준비 중 안내 토스트 */ .erp-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px); max-width: min(560px, calc(100vw - 32px)); padding: 12px 18px; border-radius: var(--r); background: var(--s-900); color: #fff; font-size: 13px; line-height: 1.5; box-shadow: 0 10px 30px rgba(15, 23, 42, .28); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 200; } .erp-toast.is_on { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* 계정 드롭다운 — 로그인 전후로 낼 항목이 달라 버튼 하나로는 둘 다 못 담는다. 버튼과 패널 사이 틈에서 마우스가 빠지지 않도록 ::before 로 덮는다. */ .erp-top .t_acct { position: relative; } .erp-top .acct_fly { position: absolute; right: 0; top: calc(100% + 4px); min-width: 176px; padding: 8px; background: #fff; border: 1px solid var(--s-200); border-radius: var(--r); box-shadow: 0 12px 28px rgba(15, 23, 42, .12); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 130; } .erp-top .acct_fly::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } .erp-top .t_acct:hover .acct_fly, .erp-top .t_acct:focus-within .acct_fly { opacity: 1; visibility: visible; transform: translateY(0); } .erp-top .af_head { padding: 4px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--s-200); font-size: 12px; font-weight: 700; color: var(--s-800); } .erp-top .acct_fly a { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 6px; font-size: 12px; color: var(--s-700); } .erp-top .acct_fly a i { font-size: 15px; color: var(--s-400); } .erp-top .acct_fly a:hover { background: var(--s-50); color: var(--brand); } .erp-top .acct_fly a:hover i { color: var(--brand); } /* 로그아웃·비회원조회는 성격이 달라 한 줄 띄워 구분한다 */ .erp-top .acct_fly a.is_sub { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--s-200); border-radius: 0; color: var(--s-500); } /* ── GNB (3단) ────────────────────────────────── 전체보기(원형) + 대분류·신상품·베스트(좌, 스크롤) + 기획전 등 텍스트 메뉴(우, 고정). 실측 참고 사이트는 알약이 아니라 색을 채운 원 안에 햄버거 아이콘만 둔다. 전체보기는 헤더의 #btnCategory 와 같은 [data-cate-open] 이라 shell.js 가 이미 묶어서 연다. */ .erp-gnb { position: fixed; left: 0; right: 0; top: var(--head-h); height: var(--gnb-h); z-index: 105; background: #fff; border-bottom: 1px solid var(--s-200); } .gnb_inner { max-width: var(--head-w); margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 16px; padding: 0 20px; } .erp-gnb .gnb_all { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--brand); color: #fff; font-size: 17px; cursor: pointer; } .erp-gnb .gnb_all:hover { background: #255780; } .gnb_cats { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; white-space: nowrap; } .erp-gnb .gnb_link { display: inline-flex; align-items: center; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--s-700); white-space: nowrap; } .erp-gnb .gnb_link:hover { color: var(--brand); } .gnb_menu { flex: none; display: flex; align-items: center; gap: 18px; } .gnb_menu a { font-size: 13px; color: var(--s-600); white-space: nowrap; } .gnb_menu a:hover { color: var(--s-900); } /* ── 좌우 고정 배너 ───────────────────────────── 닫기 없이 항상 떠 있다(2026-08-26). 본문(1280px) 밖 여백에만 얹는다 — 폭을 뺏지 않는다. 1650px 아래에서는 배너가 본문과 겹치므로 아예 숨긴다(줄어들지 않고 사라진다 — 레일·예전 우측패널이 하던 '폭 압박'을 절대 되풀이하지 않는다). top 은 여기서 고정값을 안 준다 — shell.js 가 스크롤 위치에 맞춰 매번 다시 쓴다. 문서에 딸려 올라가다가(홈은 키비주얼 아래, 다른 화면은 처음 뷰포트 세로 중앙쯤에서 출발) GNB 바로 밑에 닿으면 거기서 멈추는 동작이라 순수 CSS(position:sticky)로는 안 된다 — sticky 의 left/right 는 담는 요소 기준이라, 뷰포트 중앙에서 본문 폭(1280)을 뺀 여백에 놓으려는 이 배너의 계산과 안 맞는다. 아래 top 은 JS 가 실행되기 전 첫 페인트에서 헤더에 안 겹치도록 두는 대비값일 뿐이다. */ /* 가로 120px (지시, 2026-09-01 — 100 은 좁아서 한 번 더 조정). 원본 이미지는 360x520 세로형 그대로 축소되어 얹힌다. */ .erp-ui { --float-w: 120px; --float-gap: 20px; } .side-float { display: none; position: fixed; top: calc(var(--head-stack-h) + 20px); width: var(--float-w); z-index: 90; flex-direction: column; gap: 8px; } .side-float.is_left { left: calc(50% - 640px - var(--float-gap) - var(--float-w)); } .side-float.is_right { right: calc(50% - 640px - var(--float-gap) - var(--float-w)); } .side-float .sf_item { display: block; border: 1px solid var(--s-200); border-radius: var(--r); overflow: hidden; background: #fff; transition: box-shadow .15s ease; } .side-float .sf_item:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, .12); } .side-float .sf_item img { width: 100%; display: block; } @media (min-width: 1650px) { .side-float { display: flex; } } /* ── 본문 ─────────────────────────────────────── */ .erp-main { padding-top: var(--head-stack-h); min-height: 100vh; } .erp-body { padding: 20px 24px 60px; } /* 화면 성격별 폭 — 목록은 전부 쓰고, 읽는 화면은 가둔다 */ .erp-body.is_wide { max-width: none; } .erp-body.is_read { max-width: 1400px; margin: 0 auto; } /* 예전 목록 그리드(.product-grid)를 셸 그리드와 같은 치수로 맞춘다 */ .erp-main .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px 12px; } /* .erp-main .layout_fix 오버라이드는 여기 있었다 — 지웠다(2026-08-25). base.css 의 원래 규칙(.layout_fix{max-width:1280px;margin:0 auto;padding:0 20px}) 이 살아나 36개 화면이 자동으로 중앙정렬 폭으로 돌아온다. 레일·사이드패널이 폭을 뺏던 시절에만 필요했던 다리였다 — 그 둘을 걷어냈으니 다리도 치운다. */ /* 홈만 예외다 — .erp-body 가 이미 자기 좌우 여백(24px)을 갖고 있어 base.css 의 20px 를 더 얹으면 이중으로 들어간다. 홈에만 있는 .erp-body 로 구분해 이 layout_fix 만 여백을 0으로 뺀다. 히어로는 화면폭을 꽉 채워야 해서(실측, 2026-08-26) layout_fix 밖(.erp-main 바로 아래)으로 옮겨져 여기 안 걸린다. */ .erp-main .layout_fix:has(.erp-body) { padding: 0; } .erp-main .section { padding: 24px 0 0; } .erp-main .section:last-child { padding-bottom: 40px; } /* 예전 헤더가 fixed 라 본문 위에 여백을 얹던 규칙들 — 셸이 대신한다 */ .erp-main .main-content { min-height: 0; } .erp-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .erp-pagehead h1 { font-size: 18px; font-weight: 700; color: var(--s-900); letter-spacing: -0.02em; } .erp-pagehead .crumb { font-size: 12px; color: var(--s-400); margin-bottom: 4px; } .erp-pagehead .cnt { font-size: 12px; color: var(--s-500); } .erp-pagehead .cnt b { color: var(--brand); } /* ── 카드/패널 ─────────────────────────────────── */ .erp-card { background: #fff; border: 1px solid var(--s-200); border-radius: var(--r); } .erp-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--s-200); } .erp-card > header h2 { font-size: 13px; font-weight: 700; color: var(--s-900); } .erp-card > header .more { font-size: 12px; color: var(--s-500); } .erp-card > .body { padding: 16px; } /* ── 표 ───────────────────────────────────────── */ .erp-table { width: 100%; border-collapse: collapse; font-size: 12px; } .erp-table th, .erp-table td { padding: 9px 12px; border-bottom: 1px solid var(--s-200); text-align: left; } .erp-table th { background: var(--s-50); color: var(--s-500); font-weight: 600; white-space: nowrap; } .erp-table td { color: var(--s-700); } .erp-table .r { text-align: right; font-variant-numeric: tabular-nums; } .erp-table tbody tr:hover { background: var(--s-50); } .erp-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 600; } .erp-chip.g { background: #ECFDF5; color: var(--ok); } .erp-chip.b { background: var(--brand-soft); color: var(--brand); } .erp-chip.n { background: var(--s-100); color: var(--s-500); } /* ── 상품 그리드 (업무형: 촘촘하게) ─────────────── */ .erp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } /* 카드는 테두리 없이 썸네일 타일 + 그 아래 글자다 — 라이브 목록과 같은 모양. 카드마다 테두리를 두르면 격자가 표처럼 읽혀 상품이 눈에 안 들어온다. */ .erp-prod { display: flex; flex-direction: column; background: none; border: 0; } /* 썸네일은 무조건 정사각. flex 아이템의 min-height 는 auto 라 세로로 긴 원본이 들어오면 그 높이만큼 칸이 늘어나 aspect-ratio 가 무시된다 — min-height:0 + flex:none 으로 막는다. */ .erp-prod .th { position: relative; display: block; width: 100%; aspect-ratio: 1/1; flex: none; min-height: 0; overflow: hidden; border-radius: var(--r); /* 라이브는 #F5F5F6 을 쓰지만 목록 배경이 slate-50(#F8FAFC)이라 3% 차이로 타일이 안 보인다. 팔레트 안에서 한 단 올려 slate-100 을 쓴다. */ background: var(--s-100); margin-bottom: 10px; } .erp-prod .th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .erp-prod:hover .th img { transform: scale(1.07); } .erp-prod .th .no { width: 100%; height: 100%; display: grid; place-items: center; color: var(--s-300); font-size: 26px; } .erp-prod .th .rate { position: absolute; left: 8px; top: 8px; z-index: 2; height: 24px; padding: 0 8px; border-radius: 4px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; } .erp-prod .th .rate.is_code { background: var(--s-800); } /* 품절 — 썸네일 전체를 덮어 눌러도 소용없다는 걸 분명히 한다 */ .erp-prod .card_soldout { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .5); color: #fff; font-size: 14px; font-weight: 700; } /* 썸네일 마우스오버 액션 (장바구니 / 찜하기) — product_card.js 가 잡는다 */ .erp-prod .card_actions { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; gap: 6px; opacity: 0; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease; pointer-events: none; } .erp-prod:hover .card_actions { opacity: 1; transform: translateY(0); pointer-events: auto; } .erp-prod .card_act { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--s-200); border-radius: 50%; background: rgba(255, 255, 255, .96); color: var(--s-700); font-size: 15px; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .14); } .erp-prod .card_act:hover { border-color: var(--brand); color: var(--brand); } .erp-prod .card_act.is_on { background: var(--brand); border-color: var(--brand); color: #fff; } .erp-prod .info { display: flex; flex-direction: column; gap: 4px; flex: 1; } .erp-prod .brand { font-size: 11px; color: var(--s-400); } .erp-prod .name { font-size: 12px; color: var(--s-700); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 33px; } .erp-prod .price { margin-top: auto; display: flex; flex-direction: column; gap: 1px; } .erp-prod .price .was { font-size: 12px; color: var(--s-400); text-decoration: line-through; } .erp-prod .price .now_row { display: flex; align-items: baseline; gap: 5px; } .erp-prod .price .rate_t { font-size: 15px; font-weight: 800; color: var(--danger); } .erp-prod .price .now { font-size: 15px; font-weight: 800; color: var(--s-900); } .erp-prod .price .won { font-size: 12px; font-weight: 500; color: var(--s-600); } /* ── 상세 2단 ────────────────────────────────── 좌 상세(900 캡) + 우 구매박스(400 고정). 상세 이미지가 681~1000px(대부분 740~800)이라 좌측을 더 넓혀도 이미지는 안 커지고 여백만 남는다. */ .erp-detail { display: flex; gap: 24px; align-items: flex-start; } .erp-detail .d_main { flex: 1; min-width: 0; max-width: 900px; } .erp-detail .d_side { flex: 0 0 400px; } .erp-buybox { position: sticky; top: calc(var(--head-stack-h) + 20px); /* 옵션이 많거나 세로가 짧은 화면에서 박스가 화면보다 길어지면 아래가 잘린다 */ max-height: calc(100vh - var(--head-stack-h) - 40px); overflow-y: auto; } .erp-buybox .bb_name { font-size: 16px; font-weight: 700; color: var(--s-900); line-height: 1.4; margin-bottom: 10px; } .erp-buybox .bb_price { display: flex; align-items: baseline; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--s-200); margin-bottom: 12px; } .erp-buybox .bb_price .rate { font-size: 18px; font-weight: 800; color: var(--danger); } .erp-buybox .bb_price .now { font-size: 24px; font-weight: 800; color: var(--s-900); font-variant-numeric: tabular-nums; } .erp-buybox .bb_price .won { font-size: 13px; color: var(--s-600); } .erp-buybox .bb_row { display: flex; gap: 10px; padding: 6px 0; font-size: 12px; } .erp-buybox .bb_row dt { flex: 0 0 74px; color: var(--s-500); } .erp-buybox .bb_row dd { flex: 1; color: var(--s-700); margin: 0; } .erp-buybox select, .erp-buybox input[type=number] { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--s-300); border-radius: var(--r); font-family: inherit; font-size: 12px; color: var(--s-900); background: #fff; } .erp-buybox .bb_total { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 0; margin-top: 12px; border-top: 1px solid var(--s-200); } .erp-buybox .bb_total span { font-size: 12px; color: var(--s-500); } .erp-buybox .bb_total strong { font-size: 20px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; } .erp-buybox .bb_btns { display: flex; gap: 8px; } .erp-buybox .bb_btns button { flex: 1; height: 42px; border-radius: var(--r); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--brand); } .erp-buybox .bb_btns .cart { background: #fff; color: var(--brand); } .erp-buybox .bb_btns .buy { background: var(--brand); color: #fff; } .erp-detail .d_main img { max-width: 100%; height: auto; } /* ── 상단 밴드(롤링배너) ───────────────────────── 실측(2026-08-26, 아이스크림몰) — 옆에 퀵메뉴를 안 두고 이 줄은 롤링배너 하나뿐이다. 슬라이드 두 장을 같이 보여주고 양옆을 살짝 보여준다 (JS 설정은 home.html extra_js). 기획전 카드·공지·바로가기는 아래 다른 섹션에 이미 있어 여기 또 두지 않는다. */ /* layout_fix 밖(.erp-main 바로 아래)이라 --head-w/1280 제한이 안 걸린다 — 좌우 0 으로 화면 끝까지 채운다(실측, 2026-08-26). 슬라이드 낱장에만 둥근 모서리를 주고(아래 .swiper-slide) 바깥 틀은 각지게 둔다 — 화면 맨 끝에서 모서리가 잘려 보이는 걸 막는다. */ .erp-hero { --hero-h: 380px; padding: 20px 0 0; width: 100%; } .erp-hero .hero_kv { height: var(--hero-h); position: relative; } .erp-hero .hero_kv .swiper { height: 100%; overflow: hidden; } .erp-hero .swiper-slide { background: var(--s-100); border-radius: var(--r); overflow: hidden; } /* 이미지 비율이 제각각이어도 배너 높이가 흔들리지 않게 칸을 채우고 cover 한다. */ .erp-hero .hero_kv img { display: block; width: 100%; height: 100%; object-fit: cover; } .erp-hero .swiper-slide > a { display: block; height: 100%; } .erp-hero .kv_ctrl { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px; background: rgba(15, 23, 42, .55); border-radius: 999px; backdrop-filter: blur(4px); } .erp-hero .kv_btn { width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: #fff; font-size: 17px; line-height: 1; } .erp-hero .kv_num { color: #fff; font-size: 11px; padding: 0 6px; opacity: .85; } .erp-hero .kv_num em { font-style: normal; font-weight: 700; opacity: 1; } /* ── 빠른 찾기 ───────────────────────────────── 연령·가격으로 좁혀 목록으로 넘긴다. 719개를 훑게 두지 않는 장치다. */ /* 연령·가격을 한 줄에 나란히. 자리가 모자라면 줄만 접히고 묶음은 안 깨진다. */ .erp-qf .qf_rows { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; } .erp-qf .qf_row { display: flex; align-items: center; gap: 12px; padding: 5px 0; } /* 묶음 사이 칸막이 — 한 줄로 붙으면 어디까지가 '연령'인지 흐려진다. 접혀서 다음 줄로 내려간 것에는 안 그린다(줄 맨 앞에 세로선이 뜬다). */ .erp-qf .qf_row + .qf_row { padding-left: 24px; border-left: 1px solid var(--s-200); } .erp-qf .qf_label { flex: none; width: 42px; font-size: 12px; font-weight: 700; color: var(--s-500); } .erp-qf .qf_chips { display: flex; flex-wrap: wrap; gap: 6px; } .erp-qf .qf_chip { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border: 1px solid var(--s-200); border-radius: var(--r); font-size: 12px; color: var(--s-600); background: #fff; transition: border-color .15s ease, color .15s ease, background .15s ease; } .erp-qf .qf_chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } /* ── 신상품 · BEST 2단 ───────────────────────── 둘 다 탭을 달아 짝을 맞춘다. 한쪽만 탭이 있으면 같은 줄에서 무게가 안 맞는다. 두 칸의 탭 줄 수가 달라도 카드 아래끝이 맞도록 stretch 로 둔다. */ .erp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 16px; } .erp-duo > .erp-card { display: flex; flex-direction: column; min-width: 0; } .erp-duo > .erp-card > .body { flex: 1; } /* 반쪽 폭이라 최소 카드폭을 낮춘다 — 190 그대로면 한 줄에 두 장밖에 안 들어간다 */ .erp-duo .erp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } /* ── 상품 탭 (신상품·BEST 공용) ──────────────── 패널을 전부 그려 두고 클래스로만 바꾼다 — 탭 하나에 요청을 왕복시키지 않는다. */ .erp-tabsec .bt_tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 10px 16px 0; } .erp-tabsec .bt_tab { height: 30px; padding: 0 13px; border: 1px solid var(--s-200); border-radius: var(--r); background: #fff; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--s-600); } .erp-tabsec .bt_tab:hover { border-color: var(--brand); color: var(--brand); } .erp-tabsec .bt_tab.is_on { background: var(--brand); border-color: var(--brand); color: #fff; } .erp-tabsec .bt_panel { display: none; } .erp-tabsec .bt_panel.is_on { display: block; } /* ── 브랜드관 ────────────────────────────────── 로고 미등록 브랜드가 많다. 깨진 이미지처럼 보이는 아이콘 대신 이니셜을 쓴다. */ .erp-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .erp-brand { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--s-200); border-radius: var(--r); background: #fff; transition: border-color .15s ease; } .erp-brand:hover { border-color: var(--brand); } .erp-brand .br_th { flex: none; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--s-200); border-radius: var(--r); background: var(--s-50); } .erp-brand .br_th img { width: 100%; height: 100%; object-fit: contain; } .erp-brand .br_ini { font-size: 15px; font-weight: 800; color: var(--brand); } .erp-brand .br_name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--s-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .erp-brand .br_cnt { flex: none; font-size: 11px; color: var(--s-400); } /* ── 홈 평면화(지시, 2026-09-03) ───────────────── 홈 주요 섹션에서 카드 박스·안쪽 패딩을 걷는다. .is_flat 수식어로만 끈다 — .erp-card 자체를 고치면 게시판·주문 등 다른 화면의 카드까지 흔들린다. */ .erp-card.is_flat { background: transparent; border: 0; border-radius: 0; margin-bottom: 30px; } .erp-card.is_flat > header { padding: 0 0 12px; border-bottom: 0; } .erp-card.is_flat > header h2 { font-size: 15px; } .erp-card.is_flat > .body { padding: 0; } .erp-tabsec.is_flat .bt_tabs { padding: 0 0 12px; } /* 카테고리 바로가기 — 아이콘 위·글자 아래, 한 줄 가로 스크롤. 글자는 안 자른다(nowrap + 스크롤) — 모바일에서 '만...'이 되던 자리다. */ .hm_cats { display: flex; gap: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 2px 14px; margin-bottom: 12px; scrollbar-width: none; } .hm_cats::-webkit-scrollbar { display: none; } .hm_cat { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; } .hm_cat_ico { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; font-size: 26px; transition: transform .15s ease; } .hm_cat:hover .hm_cat_ico { transform: translateY(-2px); } .hm_cat_nm { font-size: 13px; font-weight: 600; color: var(--s-800); white-space: nowrap; } /* 빠른 찾기 — 박스 없이 전부 한 줄. 좁으면 가로 스크롤로 넘긴다 */ .hm_qf { display: flex; align-items: center; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; } .hm_qf::-webkit-scrollbar { display: none; } .hm_qf_label { flex: none; font-size: 12px; font-weight: 700; color: var(--s-500); } .hm_qf_chip { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid var(--s-200); border-radius: 100px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--s-700); white-space: nowrap; } .hm_qf_chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .hm_qf_div { flex: none; width: 1px; height: 18px; background: var(--s-200); margin: 0 10px; } /* 브랜드관 — 아이콘 위·글자 아래, 자동으로 흘러가는 띠(호버 시 멈춤). 목록을 두 벌 이어 붙이고 절반만큼 밀면 이음새 없이 돈다 — 간격은 track 의 gap 이 아니라 카드의 margin 으로 줘야 절반 지점이 정확하다. */ .hm_brands { overflow: hidden; } .hm_brands_track { display: flex; width: max-content; animation: hm_marquee 45s linear infinite; } .hm_brands:hover .hm_brands_track { animation-play-state: paused; } @keyframes hm_marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .hm_brands { overflow-x: auto; } .hm_brands_track { animation: none; } } .hm_brand { flex: none; display: flex; flex-direction: column; align-items: center; gap: 7px; margin-right: 28px; } .hm_brand_th { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--s-200); border-radius: 50%; background: #fff; } .hm_brand_th img { width: 100%; height: 100%; object-fit: contain; } .hm_brand_ini { font-size: 17px; font-weight: 800; color: var(--brand); } .hm_brand_nm { font-size: 12.5px; font-weight: 600; color: var(--s-800); white-space: nowrap; } .hm_brand_cnt { font-size: 11px; color: var(--s-400); } /* ── 고객 리뷰 ───────────────────────────────── 업무형이라도 이건 있어야 한다. 기관 구매자도 남이 써 본 말을 읽고 산다. */ .erp-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } /* 게시판 줄 안에 세로로 세울 때 — 좁은 칸이라 한 줄에 하나씩 */ .erp-reviews.is_col { grid-template-columns: 1fr; gap: 8px; } .erp-review { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; border: 1px solid var(--s-200); border-radius: var(--r); background: #fff; transition: border-color .15s ease; } .erp-review:hover { border-color: var(--brand); } .erp-review .rv_top { display: flex; align-items: center; justify-content: space-between; } .erp-review .rv_stars { color: #F5BC0A; font-size: 13px; letter-spacing: -1px; } .erp-review .rv_date { font-size: 11px; color: var(--s-400); } /* 리뷰 길이가 제각각이라 3줄로 자른다 — 카드 높이가 들쭉날쭉하면 격자가 무너져 보인다 */ .erp-review .rv_text { font-size: 12px; color: var(--s-600); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.2em; } .erp-review .rv_foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 7px; border-top: 1px solid var(--s-200); } .erp-review .rv_pname { flex: 1; min-width: 0; font-size: 11px; color: var(--s-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .erp-review .rv_writer { flex: none; font-size: 11px; color: var(--s-400); } /* ── 기획전 카드 ─────────────────────────────── 상품카드보다 가로로 길다. 기획전은 이미지 안에 카피가 들어 있어 상품카드처럼 정사각으로 자르면 글자가 잘려 나간다. */ /* auto-fit — 빈 트랙을 접는다. 전폭 섹션이 되면서(2026-09-03) 기획전이 2건일 때 auto-fill 은 오른쪽에 빈 칸을 남겼다. */ .erp-evgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; } .erp-ev { display: block; overflow: hidden; border: 1px solid var(--s-200); border-radius: var(--r); background: #fff; transition: border-color .15s ease; } .erp-ev:hover { border-color: var(--brand); } .erp-ev .ev_th { position: relative; display: block; aspect-ratio: 16 / 7; background: var(--s-100); } .erp-ev .ev_th img { width: 100%; height: 100%; object-fit: cover; display: block; } .erp-ev .ev_no { position: absolute; inset: 0; display: grid; place-items: center; color: var(--s-300); font-size: 26px; } .erp-ev .ev_tag { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 4px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; } .erp-ev .ev_tag.is_soon { background: var(--s-500); } /* 제목·기간을 이미지 위에 얹는다(지시, 2026-09-03) — 배너 그림에는 글자를 안 굽기 때문에(상세가 겹쳐 그린다) 홈 카드에서도 여기서 겹쳐 그린다. */ .erp-ev .ev_cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 11px; background: linear-gradient(180deg, transparent, rgba(8, 14, 28, .78)); color: #fff; } .erp-ev .ev_cap b { display: block; font-size: 15px; font-weight: 800; } .erp-ev .ev_cap em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; opacity: .85; } .erp-ev .ev_info { display: block; padding: 10px 12px 12px; } .erp-ev .ev_info b { display: block; font-size: 13px; font-weight: 600; color: var(--s-800); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .erp-ev .ev_info em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; color: var(--s-400); } /* ── 하단 3단 게시판 (공지 / 기획전 / FAQ) ────── */ .erp-boards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .erp-board { padding: 6px 4px 10px; } .erp-board li { font-size: 12px; } .erp-board li a { display: flex; align-items: center; gap: 7px; padding: 7px 12px; color: var(--s-600); } .erp-board li a:hover { background: var(--s-50); color: var(--brand); } /* 제목만 줄이고 날짜·칩은 안 줄인다 — 목록에서 제일 자주 깨지는 자리다 */ .erp-board .bd_t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .erp-board .bd_d { flex: none; color: var(--s-400); font-size: 11px; } .erp-board li.is_empty { padding: 24px 12px; text-align: center; color: var(--s-400); } /* ── 푸터 ───────────────────────────────────── 업무형이라도 사업자정보·고객센터·정책은 그대로 있어야 한다. 전자상거래법상 필수 표시이고, 기관 구매자는 오히려 이걸 확인하고 산다. */ .erp-footer { border-top: 1px solid var(--s-200); background: var(--s-50); } /* .ef_inner 는 이제 .layout_fix 도 함께 단다(2026-08-25) — 본문과 같은 1280px 중앙정렬. 좌우 여백은 layout_fix 의 20px 로 통일하고 위아래만 여기서 준다. */ .erp-footer .ef_inner { padding: 28px 0 40px; } .erp-footer .ef_cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 22px; } .erp-footer .ef_card { background: #fff; border: 1px solid var(--s-200); border-radius: var(--r); padding: 14px 16px; } .erp-footer .ef_card h3 { font-size: 12px; font-weight: 700; color: var(--s-500); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; } .erp-footer .ef_tel { font-size: 20px; font-weight: 800; color: var(--s-900); letter-spacing: -0.02em; } .erp-footer .ef_acc { font-size: 15px; font-weight: 700; color: var(--s-900); } .erp-footer .ef_note { font-size: 12px; color: var(--s-500); line-height: 1.6; margin-top: 3px; } .erp-footer .ef_sns { display: flex; gap: 6px; } .erp-footer .ef_sns a { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--s-200); border-radius: var(--r); color: var(--s-500); font-size: 16px; } .erp-footer .ef_sns a:hover { border-color: var(--brand); color: var(--brand); } .erp-footer .ef_links { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 12px 0; margin-bottom: 16px; border-top: 1px solid var(--s-200); border-bottom: 1px solid var(--s-200); } .erp-footer .ef_links a { font-size: 12px; color: var(--s-600); } .erp-footer .ef_links a:hover { color: var(--brand); } /* is_strong(개인정보처리방침 강조)은 지웠다(지시, 2026-08-27) — 혼자 진하게 서서 링크 줄의 결이 깨졌다. 전자상거래 표시 의무는 링크가 있으면 충족되지 흘림 강조까지 요구하지 않는다. */ .erp-footer .ef_name { font-size: 13px; font-weight: 700; color: var(--s-800); margin-bottom: 8px; } /* 사업자 표기는 라벨·값 쌍이라 정의목록으로 둔다 — 한 줄로 흘려 쓰면 안 읽힌다 */ .erp-footer .ef_biz dl { display: flex; flex-wrap: wrap; gap: 4px 18px; } .erp-footer .ef_biz dl > div { display: flex; gap: 6px; font-size: 12px; } .erp-footer .ef_biz dt { color: var(--s-400); } .erp-footer .ef_biz dd { color: var(--s-600); } .erp-footer .ef_check { margin-left: 4px; padding: 1px 6px; border: 1px solid var(--s-300); border-radius: 4px; font-size: 11px; color: var(--s-500); } .erp-footer .ef_copy { margin-top: 14px; font-size: 11px; color: var(--s-400); } /* ── 우측 도킹 유틸리티 스택 ───────────────────── 화면 오른쪽 가장자리에 붙는 세로 스택(2026-08-25, 아이스크림몰 실측 참고) — base.css 의 하단 코너 플로팅 페어(스크롤해야 나타나는 '맨 위로' 알약)를 여기서 다시 그린다. id/class 는 그대로 두어 (#flyBox/.btn_recent/.go_top) recent.js 를 안 건드린다. 폭을 안 뺏는다 — 본문 바깥 여백에 얹힐 뿐, margin 을 만들지 않는다. 이 위젯은 항상 뜬다(왼쪽 이미지 배너처럼 1650px 이상 조건 없음) — 최근본상품·고객센터는 화면이 좁아도 쓸모 있는 기능이라서다. top 은 여기서 고정값을 안 준다 — shell.js 가 왼쪽 이미지 배너 (.side-float)와 같은 계산으로 매 스크롤마다 다시 쓴다(둘 다 홈은 키비주얼 아래, 다른 화면은 뷰포트 세로 중앙쯤에서 출발해 GNB 밑에서 멈춘다) — 그래야 좌우가 같은 높이에서 나란히 움직인다. 아래 값은 JS 실행 전 첫 페인트에서 헤더에 안 겹치도록 두는 대비값이다. */ /* 화면 오른쪽 **아래** 고정(지시, 2026-09-01) — 최근본·TOP 은 아래가 관례다. 예전엔 shell.js 가 top 을 스크롤에 맞춰 계산했는데 그 대상에서 뺐다. */ .p_Fly { position: fixed; right: 20px; bottom: 24px; top: auto; z-index: 90; display: flex; flex-direction: column; gap: 0; padding: 6px; background: #fff; border: 1px solid var(--s-200); border-radius: 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, .10); } .p_Fly .btn_recent, .p_Fly .fly_link, .p_Fly .go_top { position: static; width: 62px; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--s-600); font-family: inherit; opacity: 1; visibility: visible; transform: none; transition: background .15s ease, color .15s ease; } .p_Fly .btn_recent:hover, .p_Fly .fly_link:hover, .p_Fly .go_top:hover { background: var(--s-50); color: var(--brand); } /* 순서: 최근 본 → TOP → 고객센터 (지시, 2026-09-03). 사이 구분선만 긋는다 */ .p_Fly .go_top, .p_Fly .fly_link { border-top: 1px solid var(--s-100); } /* TOP 은 내려간 뒤에만 보인다(지시, 2026-09-03) — 맨 위에서는 눌러도 갈 곳이 없다. if_scroll 은 recent.js 가 scrollY>300 에서 붙인다. */ .p_Fly .go_top { display: none; } .p_Fly.if_scroll .go_top { display: flex; } .p_Fly .btn_recent i, .p_Fly .fly_link i, .p_Fly .go_top i { display: block; font-size: 20px; } .p_Fly .tx { display: block; font-size: 10px; font-weight: 600; white-space: nowrap; } /* 도킹 스택은 자리가 좁다 — 아이콘 하나로 통일하고 최근 본 상품 썸네일은 뺀다. 무엇을 봤는지는 눌러서 레이어를 열면 바로 나온다. */ .p_Fly .btn_recent .thumb { display: none !important; } @media (max-width: 767px) { /* 하단 탭바는 주석 상태(2026-09-03, base.html) — 탭바가 돌아오면 bottom 을 calc(56px + env(safe-area-inset-bottom) + 10px) 로 되돌린다 */ .p_Fly { right: 10px; padding: 4px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } .p_Fly .btn_recent, .p_Fly .fly_link, .p_Fly .go_top { width: 50px; height: 50px; } .p_Fly .btn_recent i, .p_Fly .fly_link i, .p_Fly .go_top i { font-size: 18px; } .p_Fly .tx { font-size: 9px; } } /* ── 반응형 ─────────────────────────────────── 1360px 아래로는 상세를 2단으로 두지 않는다. 좌측이 좁아지면 740~800px 상세 이미지가 축소되어 이미지 속 글자가 뭉개진다. */ @media (max-width: 1360px) { .erp-detail { flex-direction: column; } .erp-detail .d_main, .erp-detail .d_side { max-width: none; width: 100%; flex: none; } .erp-buybox { position: static; max-height: none; } } /* 상단 밴드 — 1200px 아래에서는 배너가 낮아진다. */ @media (max-width: 1200px) { .erp-hero { --hero-h: 260px; } .erp-boards { grid-template-columns: 1fr 1fr; } /* 신상품·BEST 는 반쪽이 되면 카드가 두 장밖에 안 들어간다 — 위아래로 푼다 */ .erp-duo { grid-template-columns: 1fr; } .erp-duo .erp-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } } /* 태블릿 — 헤더 버튼을 라벨 없이 아이콘만으로 줄인다 */ @media (max-width: 1024px) { .erp-top .t_lbl { display: none; } .erp-top .t_btn { width: 44px; height: 44px; } } /* ── 모바일 ──────────────────────────────────── GNB(빠른 메뉴)는 감추고 자주 쓰는 다섯 개만 담은 하단 탭바(.erp-mobnav)를 대신 세운다 — 카테고리는 그 안에서 서랍으로 연다. */ @media (max-width: 767px) { /* 4단 중 로고줄(2단)만 남긴다 — 유틸바·알약줄·GNB 는 좁은 화면에서 세로 공간을 너무 많이 먹는다. 하단 탭바(.erp-mobnav)가 그 역할을 대신한다. */ .erp-ui { --utilbar-h: 0px; --topbar-h: 62px; --gnb-h: 0px; } /* 로고(42px) + 위아래 10px */ .erp-util, .erp-gnb { display: none; } .erp-top { top: 0; } /* 헤더 — 검색창을 늘 펼쳐 두면 로고·아이콘이 밀려날 폭이 없다. [로고] [카테고리][돋보기] [장바구니][계정] 로 좁힌다 — 데스크톱과 달리 검색폼(.t_search) 자체를 여기서 다시 fixed 오버레이로 되돌리고, 그 자리엔 아이콘 두 개만 남긴다(눌러야 헤더 아래로 펼쳐진다). */ .erp-top .top_inner { gap: 4px; padding: 0 8px; } .erp-top .t_logo img { height: 42px; } .erp-top .t_logo span { font-size: 11px; } /* display:flex 를 안 주면 이 칸의 두 버튼(카테고리·돋보기)이 각자 display:flex 인 블록 요소라 줄바꿈되어 세로로 쌓인다(실측 캡처, 2026-08-27 — 로고 아래에 아이콘 두 개가 위아래로 겹쳐 보였다). 부모를 flex 컨테이너로 두면 자식이 display 값과 상관없이 한 줄로 나란히 앉는다. margin-left:auto 는 아이콘 몰기(지시, 2026-08-28) — 로고 옆에 서 있던 카테고리·돋보기를 우측 아이콘 무리에 붙인다. auto 마진을 t_right(기본 규칙)에도 남겨 두면 남는 폭이 둘로 갈라져 가운데가 벌어진다 — 아래서 t_right 쪽을 0 으로 되돌린다. */ .erp-top .t_search_area { flex: none; max-width: none; display: flex; align-items: center; gap: 4px; margin-left: auto; } .erp-top .t_right { margin-left: 0; } /* id 로 거는 이유는 위 데스크톱 규칙과 같다(.t_iconbtn 과의 특정도 동점). */ #btnCategory.t_cate_mobile, #btnSearchToggle.t_searchtoggle { display: flex; } /* 펼친 줄은 헤더가 아니라 **흰 판**이다 — 헤더용 어두운 잉크를 그대로 물려받으면 흰 바탕에 흰 글씨가 되어 입력한 게 안 보인다. 그래서 여기서 되돌린다. */ .erp-top .t_search { position: fixed; left: 0; right: 0; top: var(--head-h); height: 52px; width: auto; margin: 0; padding: 0 24px; display: none; border-radius: 0; background: #fff; box-shadow: 0 8px 20px rgba(2, 6, 23, .10); z-index: 120; } body.is_search_open .erp-top .t_search { display: flex; } /* 검색 레이어 — 데스크톱은 검색칸(.t_search_area) 아래 absolute 로 펴는데, 모바일에서 그대로 두면 그 칸이 우측 아이콘 자리라 레이어가 오른쪽에서 출발해 화면 밖으로 잘리고, 아래로도 뷰포트를 넘겨 스크롤이 안 됐다 (실측 캡처, 2026-08-28). 화면 폭 시트(fixed)로 바꾸고 아래는 하단 탭바(z 100 < 140) 위까지만 — 그 안에서 자체 스크롤한다. */ .erp-top .search-popup { position: fixed; left: 0; right: 0; width: auto; top: calc(var(--head-h) + 52px); bottom: calc(56px + env(safe-area-inset-bottom, 0px)); max-height: none; border-radius: 0; border-left: 0; border-right: 0; } .erp-top .t_search input { font-size: 15px; } .erp-top .t_search i { font-size: 20px; } /* 우측 — 장바구니와 계정만 남긴다. 견적서·주문조회·카트공유는 계정 드롭다운과 하단 탭바에서 닿는다. */ .erp-top .t_right { gap: 0; } .erp-top .t_btn { width: 42px; height: 42px; padding: 0; } .erp-top .t_lbl { display: none; } /* 모바일은 라벨이 없어 아이콘만 남는다. PC 와 같은 배율(1.5배)로 키우면 42px 버튼을 꽉 채워 답답하다 — 버튼 안에 여백이 남는 선까지만 키운다. */ .erp-top .t_btn i { font-size: 24px; } /* 남길 것을 **뜻으로** 고른다. 예전에는 '앞 두 개'와 '.is_key' 를 감췄는데, .is_key 는 카트공유를 남과 다르게 칠하려고 둔 클래스라 그것을 지우는 순간 카트공유가 모바일에 되살아났다. 장바구니는 뱃지(.cart-count)를 가진 유일한 버튼이라 그것을 표식으로 쓴다 — 버튼 순서가 바뀌어도 안 깨진다. */ .erp-top .t_right > .t_btn { display: none; } .erp-top .t_right > .t_btn:has(.cart-count) { display: inline-flex; } /* 본문 — 하단 탭바(56) 만큼 아래를 비운다 */ .erp-body { padding: 14px 14px 24px; } /* 탭바 주석 상태(2026-09-03) — 되살리면 calc(56px + env(...)) 로 복원 */ .erp-main { padding-bottom: env(safe-area-inset-bottom, 0px); } .erp-main .layout_fix { padding: 0 14px; } .erp-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .erp-hero { padding: 12px 0 0; } .erp-hero .hero_kv { height: 180px; } .erp-hero .kv_ctrl { right: 8px; bottom: 8px; height: 26px; } .erp-hero .kv_btn { width: 22px; height: 22px; font-size: 15px; } .erp-boards { grid-template-columns: 1fr; } .erp-evgrid, .erp-reviews { grid-template-columns: 1fr; } /* 1fr 은 최소폭이 '내용 크기'라 긴 브랜드명이 칸을 밀어낸다 — 폰에서 화면이 가로로 10px 넘쳤다. minmax(0,1fr) 이라야 칸이 줄고 이름이 말줄임된다. */ .erp-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } .erp-brand { min-width: 0; } .erp-duo { grid-template-columns: 1fr; } .erp-duo .erp-grid { grid-template-columns: repeat(2, 1fr); } .erp-tabsec .bt_tabs { padding: 10px 14px 0; overflow-x: auto; flex-wrap: nowrap; } .erp-tabsec .bt_tab { flex: none; } /* 폰에서는 한 줄에 못 담는다 — 묶음을 위아래로 세우고 칸막이를 뗀다 */ .erp-qf .qf_rows { flex-direction: column; align-items: stretch; gap: 10px; } .erp-qf .qf_row { flex-direction: column; align-items: flex-start; gap: 6px; } .erp-qf .qf_row + .qf_row { padding-left: 0; border-left: 0; } .erp-qf .qf_label { width: auto; } .erp-footer .ef_inner { padding: 20px 14px 28px; } .erp-footer .ef_biz dl { flex-direction: column; gap: 3px; } } /* ===================================================== 기존 화면 리스타일 — 셸 톤으로 맞춘다. 화면별 CSS(product_list.css 등)는 그대로 두고 여기서 덮는다. 원본을 헤집으면 되돌리기 어렵고, 셸을 걷어낼 때도 이 블록만 지우면 된다. ===================================================== */ /* ── 상품목록 ─────────────────────────────────── */ .erp-main .cate_title_area { padding: 20px 0 14px; } .erp-main .cate_path { font-size: 12px; color: var(--s-400); margin-bottom: 4px; } .erp-main .cate_path a { color: var(--s-500); } .erp-main .cate_title_row { display: flex; align-items: baseline; gap: 10px; } .erp-main .cate_title_row strong { font-size: 18px; font-weight: 700; color: var(--s-900); letter-spacing: -0.02em; } .erp-main .cate_total_cnt { font-size: 12px; color: var(--s-500); } /* 하위분류 칩 — 알약 대신 각지게 */ .erp-main .cate_tab_label { height: 30px; padding: 0 13px; border: 1px solid var(--s-200); border-radius: var(--r); background: #fff; color: var(--s-600); font-size: 12px; font-weight: 500; } .erp-main .cate_tab_label:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } /* 필터는 그대로 둔다 — 브랜드·가격으로 좁히는 건 719개 목록에서 실제로 쓰인다. */ .erp-main .list_layout { gap: 16px; padding-bottom: 40px; } .erp-main .filter_box { width: 210px; flex: none; background: #fff; border: 1px solid var(--s-200); border-radius: var(--r); padding: 14px; } .erp-main .filter_head { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--s-200); } .erp-main .filter_label { font-size: 13px; font-weight: 700; color: var(--s-900); } .erp-main .filter_reset { font-size: 11px; color: var(--s-400); } .erp-main .filter_group { border-top: 1px solid var(--s-200); padding-top: 10px; margin-top: 10px; } .erp-main .filter_group dt { font-size: 12px; font-weight: 700; color: var(--s-700); margin-bottom: 6px; } .erp-main .c_label { font-size: 12px; color: var(--s-600); } .erp-main .list_ctrl { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--s-200); } .erp-main .list_ctrl .total { font-size: 12px; color: var(--s-500); } .erp-main .list_ctrl .total em { color: var(--brand); font-weight: 700; font-style: normal; } .erp-main .list_ctrl select, .erp-main .filter_box select { height: 32px; padding: 0 10px; border: 1px solid var(--s-300); border-radius: var(--r); background: #fff; font-family: inherit; font-size: 12px; color: var(--s-700); } /* 필터가 폭을 먹으므로 목록 쪽은 최소 카드폭을 조금 낮춘다 — 단 필터가 옆에 나란히 붙는 화면(900px 초과)에서만이다. 900px 이하에서는 필터가 위로 올라가 목록이 폭을 그대로 받는다(product_list.css) — 그런데 이 규칙이 미디어쿼리 없이 걸려 있어(class 3개 = 특정도가 더 높다) product_list.css 의 모바일 2단(repeat(2,1fr))을 항상 이겼다. 그 결과 180px 최소폭에 auto-fill 이 걸려 375px 화면엔 1단만 들어갔다 (실측 지적, 2026-09-06). */ @media (min-width: 901px) { .erp-main .area_item_wrap .product-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } } /* ── 페이지네이션 (목록·게시판 공용) ───────────── */ .erp-main .pagination { gap: 4px; margin-top: 28px; } .erp-main .pagination a, .erp-main .pagination span, .erp-main .pg_num, .erp-main .pg_nav { min-width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--s-200); border-radius: var(--r); background: #fff; color: var(--s-600); font-size: 12px; font-variant-numeric: tabular-nums; } .erp-main .pg_num.active, .erp-main .pagination a.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; } .erp-main .pg_nav.disabled { color: var(--s-300); background: var(--s-50); } /* ── 상품상세 2단 ────────────────────────────── 좌 상세정보(스크롤) + 우 구매박스(고정). DOM 순서는 사진 → 정보 → 탭이라 순서를 바꾸지 않고 그리드로 배치한다. 마크업을 옮기면 product_detail.js 가 잡는 구조를 건드리게 된다. .p_view 는 display:contents 로 껍데기만 지워 자식이 바로 그리드 칸에 놓인다. 좌 65 : 우 35 로 나눈다(요청 6:4~7:3 사이). 우측은 340px 아래로는 안 줄인다 — 그보다 좁으면 가격과 버튼이 두 줄로 접힌다. */ .erp-main .layout_fix.is_detail { display: grid; grid-template-columns: minmax(0, 65fr) minmax(340px, 35fr); gap: 0 28px; align-items: start; } .is_detail > .cate_path { grid-column: 1 / -1; padding: 18px 0 10px; font-size: 12px; color: var(--s-400); } .is_detail .p_view { display: contents; } /* display:contents 로 .p_view 껍데기가 사라지면 그 padding/gap 도 같이 사라진다. 간격을 자식에게 다시 준다. */ .is_detail .p_view_photo { grid-column: 1; grid-row: 2; flex: none; /* 좌측 칸이 넓어져도 사진을 그만큼 키우지 않는다. 공급사 원본이 700~1000px 라 더 늘리면 화질만 떨어진다. 남는 폭은 좌우 auto 로 나눠 칸 가운데에 세운다. (margin 단축 속성을 뒤에 두면 auto 가 덮인다 — 한 줄로 함께 쓴다) */ width: 100%; max-width: 620px; aspect-ratio: auto; margin: 18px auto 24px; border-radius: 0; overflow: visible; background: none; } .is_detail .p_view_photo .pv_main { width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--s-200); border-radius: var(--r); overflow: hidden; background: #fff; } .is_detail .p_view_photo .pv_main img { width: 100%; height: 100%; object-fit: contain; display: block; } /* 썸네일 — 가로로 늘어놓고 넘치면 옆으로 민다 */ .is_detail .pv_thumbs { display: flex; justify-content: center; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; } .is_detail .pv_thumb { flex: none; width: 64px; height: 64px; padding: 0; border: 1px solid var(--s-200); border-radius: 6px; background: #fff; cursor: pointer; overflow: hidden; } .is_detail .pv_thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .is_detail .pv_thumb:hover { border-color: var(--s-400); } .is_detail .pv_thumb.is_on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); } /* 적립 안내 — 구매·후기 등 붙는 마일리지를 한 줄로 보여 준다 */ .is_detail .p_mileage { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r); background: var(--s-50); font-size: 13px; color: var(--s-700); } .is_detail .p_mileage > i { flex: none; margin-top: 1px; font-size: 16px; color: var(--brand); } .is_detail .p_mileage .pm_list { display: flex; flex-wrap: wrap; gap: 4px 14px; min-width: 0; } .is_detail .p_mileage .pm_one { white-space: nowrap; } .is_detail .p_mileage em { font-style: normal; color: var(--s-500); margin-right: 4px; } /* 상품 영상 버튼 — 영상이 등록된 상품에만 나온다 */ .is_detail .pv_video { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px auto 0; padding: 9px 16px; border: 1px solid var(--s-200); border-radius: 999px; background: #fff; color: var(--s-700); font-size: 13px; font-weight: 700; cursor: pointer; } .is_detail .pv_video i { font-size: 18px; color: var(--brand); } .is_detail .pv_video:hover { border-color: var(--brand); color: var(--brand); } /* 영상 겹침판 — 화면 어디서 눌러도 같은 모양이라 .is_detail 로 묶지 않는다 */ .pv_video_modal { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .72); display: flex; align-items: center; justify-content: center; padding: 20px; } .pv_video_modal .pvv_box { position: relative; width: min(920px, 100%); aspect-ratio: 16 / 9; } .pv_video_modal iframe { width: 100%; height: 100%; border: 0; border-radius: var(--r); background: #000; } .pv_video_modal .pvv_close { position: absolute; right: 0; top: -42px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 20px; cursor: pointer; } .pv_video_modal .pvv_close:hover { background: rgba(255, 255, 255, .3); } .is_detail .p_tabs { grid-column: 1; grid-row: 3; } /* 구매박스 — 화면보다 길어지면 아래가 잘리므로 max-height + 스크롤을 건다. 옵션이 많거나 세로가 짧은 화면에서 실제로 잘린다. */ .is_detail .p_view_info { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: calc(var(--head-stack-h) + 16px); align-self: start; max-height: calc(100vh - var(--head-stack-h) - 32px); overflow-y: auto; background: #fff; border: 1px solid var(--s-200); border-radius: var(--r); padding: 18px; } /* 탭바 sticky 기준을 새 헤더 높이로 옮긴다. 예전 헤더 변수(--header-h-stuck)를 그대로 두면 탭바가 헤더에 가려진다. */ .erp-main .p_tab_nav_wrap { top: var(--head-stack-h); z-index: 80; /* 헤더(110)보다 아래 */ } @media (max-width: 1360px) { /* 좌측이 좁아지면 740~800px 상세 이미지가 축소돼 이미지 속 글자가 뭉개진다. 2단을 풀고 위아래로 내린다. 아이패드 가로(1024)도 여기에 걸린다. */ .erp-main .layout_fix.is_detail { grid-template-columns: minmax(0, 1fr); } .is_detail .p_view_photo { grid-row: 2; } .is_detail .p_view_info { grid-column: 1; grid-row: 3; position: static; max-height: none; overflow: visible; } .is_detail .p_tabs { grid-row: 4; } } /* ── 나머지 화면 공통 (장바구니·주문·마이페이지·커뮤니티·인증) ── 화면마다 클래스 이름이 제각각이라 하나씩 쫓지 않는다. 페이지 가구(제목·표·버튼·입력·패널)를 요소 단위로 맞춘다. */ /* base.css 의 body 가 흰색이라 셸의 slate 바탕을 덮는다. 카드가 떠 보이려면 본문 바닥이 한 단 어두워야 한다. */ .erp-ui body { background: var(--s-50); color: var(--s-700); } /* 화면 제목 — 이름은 달라도 하는 일이 같다 */ .erp-main .board_title, .erp-main .mem_title, .erp-main .order_section_title, .erp-main .col_title, .erp-main .cart_title { font-size: 16px; font-weight: 700; color: var(--s-900); letter-spacing: -0.02em; } .erp-main .order_section_title { font-size: 14px; } /* 표 — 업무형의 중심 요소다. 촘촘하고 선이 얇게 */ .erp-main table { border-collapse: collapse; } .erp-main table th, .erp-main table td { border-bottom: 1px solid var(--s-200); padding: 11px 10px; font-size: 12px; } .erp-main table th { color: var(--s-500); font-weight: 600; background: var(--s-50); } .erp-main table td { color: var(--s-700); } /* 입력 — 높이·라운드·테두리를 한 벌로 */ .erp-main input[type="text"], .erp-main input[type="password"], .erp-main input[type="email"], .erp-main input[type="tel"], .erp-main input[type="number"], .erp-main input[type="search"], .erp-main input[type="date"], .erp-main select, .erp-main textarea { border: 1px solid var(--s-300); border-radius: var(--r); background: #fff; font-family: inherit; font-size: 13px; color: var(--s-900); } .erp-main input:focus, .erp-main select:focus, .erp-main textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } /* 주요 버튼 — 화면마다 이름이 다르지만 하는 일은 '이 화면의 확정' 하나다 */ .erp-main .btn_login_submit, .erp-main .btn_submit_qna, .erp-main .btn_order, .erp-main .btn_checkout, .erp-main .btn_primary { background: var(--brand); border: 1px solid var(--brand); color: #fff; border-radius: var(--r); font-family: inherit; font-weight: 700; } .erp-main .btn_login_submit:hover, .erp-main .btn_submit_qna:hover, .erp-main .btn_order:hover, .erp-main .btn_checkout:hover, .erp-main .btn_primary:hover { background: #255780; border-color: #255780; } /* 보조 버튼 */ .erp-main .btn_to_list, .erp-main .btn_continue_shopping, .erp-main .btn_agree_more, .erp-main .wish_btn, .erp-main .mr_btn { background: #fff; border: 1px solid var(--s-300); color: var(--s-600); border-radius: var(--r); font-family: inherit; } .erp-main .btn_to_list:hover, .erp-main .btn_continue_shopping:hover, .erp-main .wish_btn:hover, .erp-main .mr_btn:hover { border-color: var(--brand); color: var(--brand); } /* [문의하기]·[목록으로] 의 **크기**는 board.css 에만 있었다. 그런데 board.css 는 게시판 화면에서만 읽는다 — 상품상세의 [문의하기] 는 색만 받고 높이·여백이 없어 테두리에 글자가 딱 붙은 맨몸으로 나왔다. 크기도 여기서 잡아 어느 화면에서 쓰든 같게 만든다. (board.css 보다 선택자가 길어 그쪽 값은 자동으로 밀린다) */ .erp-main .btn_to_list { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 22px; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; } /* 패널 — 흰 바탕 + 얇은 테두리 + 같은 라운드 */ .erp-main .login_box, .erp-main .signup_panel, .erp-main .receipt_panel, .erp-main .summary_card, .erp-main .done_box, .erp-main .qna_box_text, .erp-main .info_table, .erp-main .board_detail_head { background: #fff; border: 1px solid var(--s-200); border-radius: var(--r); } /* 게시판 목록 */ .erp-main .board_table { background: #fff; border: 1px solid var(--s-200); border-radius: var(--r); overflow: hidden; } .erp-main .board_table th { background: var(--s-50); } .erp-main .bd_title { color: var(--s-800); } .erp-main .bd_title:hover { color: var(--brand); } /* FAQ 탭 — 알약을 각지게 */ .erp-main .faq_cate_tab { height: 30px; padding: 0 13px; border: 1px solid var(--s-200); border-radius: var(--r); background: #fff; color: var(--s-600); font-size: 12px; } .erp-main .faq_cate_tab.active { background: var(--brand); border-color: var(--brand); color: #fff; } .erp-main .faq_cate_tabs { border-bottom: 1px solid var(--s-200); } /* 인증 화면은 폼 하나뿐이라 전체폭을 쓸 이유가 없다 */ .erp-main .login_box, .erp-main .signup_panel { max-width: 460px; margin-left: auto; margin-right: auto; } /* ── 카트공유 안내 레이어 (로그인 전) ──────────────── 헤더 버튼을 누르면 뜬다. 로그인부터 요구하지 않고 '무엇인지 보기'와 '로그인하고 시작하기'를 나란히 준다. */ .share_intro { position: fixed; inset: 0; z-index: 300; } .share_intro .si_bg { position: absolute; inset: 0; background: rgba(2, 6, 23, .45); opacity: 0; transition: opacity .18s ease; } .share_intro .si_panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(420px, calc(100vw - 32px)); padding: 26px 24px 22px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(2, 6, 23, .28); opacity: 0; transition: opacity .18s ease, transform .18s ease; /* 배경(.si_bg)이 뒤에 깔리므로 판이 위로 와야 버튼을 누를 수 있다 */ z-index: 1; } .share_intro.is_on .si_bg { opacity: 1; } .share_intro.is_on .si_panel { opacity: 1; transform: translate(-50%, -50%); } .share_intro .si_close { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; border-radius: 8px; color: var(--s-400); font-size: 20px; } .share_intro .si_close:hover { background: var(--s-50); color: var(--s-700); } .share_intro .si_ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--brand-soft); color: var(--brand); font-size: 24px; } .share_intro h2 { margin: 14px 0 8px; font-size: 19px; font-weight: 800; color: var(--s-900); line-height: 1.4; } .share_intro .si_lead { font-size: 13.5px; line-height: 1.7; color: var(--s-600); } .share_intro .si_pts { margin: 14px 0 20px; display: flex; flex-direction: column; gap: 7px; } .share_intro .si_pts li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--s-700); } .share_intro .si_pts i { color: var(--ok); font-size: 15px; } .share_intro .si_btns { display: flex; gap: 8px; } .share_intro .si_btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 46px; border-radius: var(--r); font-size: 13.5px; font-weight: 700; } .share_intro .si_sub { background: #fff; border: 1px solid var(--s-300); color: var(--s-700); } .share_intro .si_sub:hover { border-color: var(--brand); color: var(--brand); } .share_intro .si_main { background: var(--brand); color: #fff; } .share_intro .si_main:hover { background: #255780; } /* ── 검색 포커스 레이어 ───────────────────────── 검색창에 포커스가 가면 추천·최근·판매량 BEST 를 편다. 여닫는 것은 search-popup.js 가 하고 여기서는 모양만 잡는다. 기준점(position:relative)은 .t_search_area 에 있다(위 2단 규칙). */ .search-popup { position: absolute; left: 0; top: calc(100% + 8px); width: min(620px, calc(100vw - 32px)); /* base.css 의 옛 레이어 규칙(max-width: min(420px, 92vw))이 아직 산다 — 안 풀면 여기 width 가 420px 에서 잘리고, 모바일 전폭 시트(아래 미디어 블록)도 92vw 로 조여 오른쪽이 뜬다(실측, 2026-08-28). */ max-width: none; max-height: calc(100vh - var(--head-stack-h) - 32px); overflow-y: auto; padding: 18px 20px 20px; background: #fff; border: 1px solid var(--s-200); border-radius: var(--r); box-shadow: 0 16px 40px rgba(15, 23, 42, .16); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 140; /* 헤더(110)보다 위 — 헤더 안에서 아래로 펼쳐진다 */ } .search-popup.is-active { opacity: 1; visibility: visible; transform: translateY(0); } .search-popup .sp_close { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--s-400); font-size: 18px; } .search-popup .sp_close:hover { color: var(--s-800); } .search-popup .sp_sec { margin-bottom: 18px; } .search-popup .sp_sec:last-child { margin-bottom: 0; } .search-popup .sp_sec h3 { font-size: 13px; font-weight: 700; color: var(--s-900); margin-bottom: 9px; } .search-popup .sp_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; } .search-popup .sp_head h3 { margin-bottom: 0; } .search-popup .sp_clear, .search-popup .sp_note { font-size: 11px; color: var(--s-400); } .search-popup .sp_clear { border: 0; background: none; cursor: pointer; font-family: inherit; } .search-popup .sp_clear:hover { color: var(--s-700); } /* 추천 검색어 칩 */ .search-popup .sp_tags { display: flex; flex-wrap: wrap; gap: 6px; } .search-popup .sp_tag { height: 30px; padding: 0 13px; border: 1px solid var(--s-200); border-radius: var(--r); background: #fff; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--s-600); } .search-popup .sp_tag:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } /* 최근 검색어 — 칩 + 개별 삭제 (search-popup.js 가 만든다) */ .search-popup .recent-keywords { display: flex; flex-wrap: wrap; gap: 6px; } .search-popup .recent-keyword { display: inline-flex; align-items: center; height: 30px; padding: 0 6px 0 12px; border: 1px solid var(--s-200); border-radius: var(--r); background: var(--s-50); } .search-popup .recent-keyword .keyword-text { border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--s-700); } .search-popup .recent-keyword .remove-keyword { width: 20px; height: 20px; margin-left: 2px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--s-400); font-size: 14px; line-height: 1; } .search-popup .recent-keyword .remove-keyword:hover { background: var(--s-200); color: var(--s-700); } .search-popup .empty-note { font-size: 12px; color: var(--s-400); } /* 판매량 BEST — 2열. 상품명이 길어 한 줄로 자른다 */ .search-popup .sp_best { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; margin: 0; padding: 0; list-style: none; counter-reset: none; } .search-popup .sp_best a { display: flex; align-items: center; gap: 9px; padding: 6px 6px; margin: 0 -6px; border-radius: 6px; font-size: 12px; color: var(--s-700); } .search-popup .sp_best a:hover { background: var(--s-50); color: var(--brand); } .search-popup .sp_best .rank { flex: none; width: 16px; text-align: center; font-weight: 700; color: var(--s-400); } /* 1~3위만 눈에 띄게 — 전부 강조하면 순위가 안 읽힌다 */ .search-popup .sp_best li:nth-child(-n+3) .rank { color: var(--danger); } .search-popup .sp_best .text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { .search-popup { width: calc(100vw - 24px); } .search-popup .sp_best { grid-template-columns: 1fr; } } /* ── 공동구매 ───────────────────────────────── 기간이 걸린 특가라 일반 할인과 구분해야 한다. 색을 달리한다. */ .erp-prod .th .rate.is_gb { background: #7C3AED; } /* 상세 구매박스 안내줄 */ .p_gb_box { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #DDD0FB; border-radius: var(--r); background: #F6F1FE; } .p_gb_box i { font-size: 16px; color: #7C3AED; } .p_gb_box .gb_t { font-size: 12px; font-weight: 700; color: #5B21B6; } .p_gb_box .gb_left { margin-left: auto; font-size: 12px; color: #6D28D9; font-variant-numeric: tabular-nums; } .p_gb_box .gb_max { font-size: 11px; color: var(--s-500); } /* 장바구니 줄에 붙는 작은 표시 */ .cart_gb_tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; background: #F1EBFD; color: #6D28D9; font-size: 11px; font-weight: 700; } .cart_soldout_tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; background: var(--s-200); color: var(--s-600); font-size: 11px; font-weight: 700; } /* ── 상품상세 탭 = 목차 ──────────────────────── 패널을 감췄다 보였다 하지 않는다. 네 구역을 모두 펼쳐 두고 탭은 그 자리로 스크롤시키는 목차 역할만 한다(product_detail.js). 감추는 방식은 리뷰·문의가 있는지 눌러 봐야 알 수 있었다. */ .erp-main .p_tab_panel { display: block; overflow-x: auto; } .erp-main .p_tab_panel + .p_tab_panel { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--s-200); } /* 구역마다 제목을 세운다 — 펼쳐 두면 어디서 무엇이 끝나는지가 안 보인다. 탭 이름과 같은 말을 쓴다. */ .erp-main .p_tab_panel::before { content: attr(data-title); display: block; margin-bottom: 14px; font-size: 15px; font-weight: 700; color: var(--s-900); } /* 탭바가 이 구역들 위에 겹쳐 앉는다. 스크롤로 이동할 때 첫 줄이 가리지 않도록 JS 가 탭바 높이만큼 빼서 세운다. */ .erp-main .p_tab_nav_wrap { background: var(--s-50); } /* ── 모바일 하단 탭바 ────────────────────────── 좁은 화면에서만 나온다. 자주 쓰는 다섯 개만 고정하고 나머지는 카테고리 서랍·GNB·계정 드롭다운에서 닿는다. */ .erp-mobnav { display: none; } /* 헤더 좌측 아이콘 버튼(카테고리·검색) — 전 화면 공통. */ .erp-top .t_iconbtn { display: grid; width: 40px; height: 40px; place-items: center; border: 0; background: none; cursor: pointer; color: var(--top-dim); font-size: 24px; /* 우측 t_btn 아이콘과 같은 크기 */ border-radius: var(--r); } .erp-top .t_iconbtn:hover { background: var(--top-hover); color: var(--top-fg); } /* ── 카테고리 서랍 ───────────────────────────── 헤더의 카테고리 버튼(#btnCategory)과 모바일 하단 탭바가 함께 여는 오프캔버스 — 폭에 상관없이 분류로 가는 길은 이것 하나뿐이다. */ .cat-drawer { position: fixed; inset: 0; z-index: 160; } .cat-drawer .cd_bg { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); } .cat-drawer .cd_panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); display: flex; flex-direction: column; background: #fff; z-index: 1; transform: translateX(-100%); transition: transform .22s ease; } .cat-drawer.is_on .cd_panel { transform: translateX(0); } .cat-drawer .cd_head { flex: none; height: 52px; padding: 0 8px 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--s-200); font-size: 14px; font-weight: 700; color: var(--s-900); } .cat-drawer .cd_close { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--s-500); font-size: 20px; } .cat-drawer .cd_body { flex: 1; overflow-y: auto; padding: 10px 12px 24px; } .cat-drawer .cd_all { display: flex; align-items: center; gap: 8px; padding: 11px 12px; margin-bottom: 8px; border-radius: var(--r); background: var(--brand-soft); font-size: 13px; font-weight: 700; color: var(--brand); } .cat-drawer .cd_group { border-bottom: 1px solid var(--s-100); padding: 4px 0; } .cat-drawer .cd_1 { display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--s-800); } .cat-drawer .cd_1 i { font-size: 17px; color: var(--g, var(--s-400)); } /* 하위 분류 — 접었다 펴는 장치를 두지 않는다. 대분류당 서너 개뿐이라 한 번에 보이는 편이 빠르다 */ .cat-drawer .cd_subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px 38px; } .cat-drawer .cd_subs a { padding: 5px 10px; border: 1px solid var(--s-200); border-radius: 999px; font-size: 12px; color: var(--s-600); } .cat-drawer .cd_cap { margin: 16px 0 6px; padding: 0 12px; font-size: 11px; font-weight: 700; color: var(--s-400); } .cat-drawer .cd_links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .cat-drawer .cd_links a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r); font-size: 12px; color: var(--s-700); } .cat-drawer .cd_links a i { font-size: 16px; color: var(--s-400); } .cat-drawer .cd_links a:active { background: var(--s-50); } @media (max-width: 767px) { .erp-mobnav { position: fixed; left: 0; right: 0; bottom: 0; height: 56px; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--chrome); border-top: 1px solid var(--s-200); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 100; } .erp-mobnav .mn_item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--s-500); font-size: 10px; font-weight: 600; /* 카테고리 칸은 갈 곳이 없고 서랍을 여는 것이라