@charset "utf-8";
/* =========================================================================
basic 스킨 리뉴얼 (1차) — 2026-09
-------------------------------------------------------------------------
common.css(100KB) 를 직접 고치지 않고 이 파일에서 덮어쓴다.
layout 의 제목
*/
#container .main_cate .cate_cont .txt,
#container .main_best .best_cont .txt{
position:relative;
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
line-height:1.3;
padding-bottom:14px;
margin-bottom:20px;
border-bottom:1px solid var(--rn-line);
}
/* 강조 막대는 .txt 가 아니라 제목 에 붙인다.
.txt 는 폭이 구역 전체(1200px)라 거기에 붙이면 길이를 숫자로 박아야 하는데,
span 은 글자만큼만 넓어서 left:0 + right:0 으로 두면 제목 길이를 그대로 따라간다.
('신발' 37px / '포장용품 BEST 상품' 156px / 'MD추천기획전' 126px)
bottom:-15px 은 .txt 의 padding-bottom 14px + 구분선 1px 이다.
막대가 그 옅은 구분선 위에 정확히 얹힌다. */
#container .main_cate .cate_cont .txt > span,
#container .main_best .best_cont .txt > span,
#container .mian_fav .blue_cont .txt > span{
position:relative;
}
#container .main_cate .cate_cont .txt > span::after,
#container .main_best .best_cont .txt > span::after,
#container .mian_fav .blue_cont .txt > span::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-15px;
height:3px;
border-radius:2px;
background:var(--rn-strong);
}
/* =========================================================================
2. 상품 카드
- 가장 큰 버그 : .name_box 34px 안에 42px 짜리 상품명(14px×2줄) 을 넣어
두 번째 줄이 글자 중간에서 잘려 나왔다.
- margin-top:-4px 같은 눈속임 보정도 제거한다.
========================================================================= */
.goods_box_main .info,
.goods_box_1 .info{
padding-top:12px;
}
/* 상품명 : 2줄을 온전히 보여준다 (잘림 수정) */
.goods_box_main .info .name_box,
.goods_box_1 .info .name_box{
height:auto;
min-height:40px;
overflow:hidden;
}
.goods_box_main .info .item_name,
.goods_box_1 .info .item_name{
margin-top:0; /* 기존 -4px 보정 제거 */
font-size:14px;
line-height:20px; /* 20 × 2줄 = 40px, min-height 와 일치 */
letter-spacing:-0.3px;
color:var(--rn-ink);
font-weight:400;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
word-break:break-all;
}
/* 상품목록(.sub_item) 은 common.css 가 4단계 셀렉터
'.sub_item .goods_box_1 .info .item_name' 로 13.5px / line-height 1.45 를
못박아 위 규칙을 이긴다. 그래서 19.575px 짜리 세 줄이 39px 박스에 들어가
세 번째 줄이 글자 중간에서 잘렸다. 같은 깊이로 맞춰 20px × 2줄 = 40px 로
딱 떨어지게 한다. */
.sub_item .goods_box_1 .info .name_box{
height:auto;
min-height:40px;
overflow:hidden;
}
.sub_item .goods_box_1 .info .item_name{
font-size:14px;
line-height:20px;
color:var(--rn-ink);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
word-break:break-all;
}
/* hover 시 밑줄 대신 색으로 반응 — 밑줄은 2줄 텍스트에서 지저분하다 */
.goods_box_main:hover .item_name,
.goods_box_1:hover .item_name{
text-decoration:none;
color:var(--rn-point);
}
/* 썸네일은 칸을 꽉 채운다. 안쪽 여백도 흰 배경도 주지 않는다.
한때 여기에 padding:14px + background:#fff 를 넣었다가 되돌렸다.
상품 사진마다 크기가 달라 보이는 것을 여백으로 맞춰 보려던 것인데,
두 가지가 잘못됐다.
1) 사진이 안쪽으로 들어가면서 흰 테두리가 생겨 오히려 어색해졌다.
2) 애초에 원인 진단이 틀렸다. 사진 위에 보이던 점무늬는 CSS 가 아니라
상품 이미지 파일에 구워진 워터마크였다
(예: guards/K2/T/K2P0003.jpg 가운데 'SYSNET.KR' 문구).
DOM 에는 점을 그리는 요소가 아예 없다. 확인 : 썸네일 자식은
와 사이 공백 텍스트가 만드는 line box 로 정해졌다.
그래서 가로 8px / 세로 18px 로 어긋나 있었다(잰 값).
grid + gap 으로 바꾸면 두 방향이 같은 값 하나로 정해진다.
4열 760px 기준 : 타일 182.5 x 198.5, 전체 760x407 로 슬라이드 안에 들어간다. */
#container .main_visual .slide_main .swiper-slide ul{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}
#container .main_visual .slide_main .swiper-slide ul li{
float:none;
width:auto;
height:auto;
padding:0;
margin:0;
}
#container .main_visual .slide_main .swiper-slide ul li a{
display:block;
}
#container .main_visual .slide_main .swiper-slide ul li img{
display:block;
width:100%;
height:auto;
border-radius:var(--rn-radius);
}
/* 3) 인기상품 BEST 5 */
#container .main_visual .main-best{
background:#fff;
border:1px solid var(--rn-line);
border-radius:var(--rn-radius);
overflow:hidden;
}
#container .main_visual .main-best h4{
padding:0 14px;
border-bottom:1px solid var(--rn-line);
font-size:15px;
font-weight:700;
color:var(--rn-ink);
text-align:center;
letter-spacing:-0.3px;
}
#container .main_visual .main-best ul li{
padding:0;
height:auto;
border-bottom:1px solid var(--rn-line-2);
}
#container .main_visual .main-best ul li:last-child{
border-bottom:0;
}
/* 한 줄을 flex 로 세운다 : 순위 배지 / 상품명 / 썸네일.
원래는 .num 이 position:absolute (left:-10px, top:-13px) 로 칸 밖에 걸쳐 있고
.title 과 .img 가 float:left 였다. */
#container .main_visual .main-best ul li .best_product{
display:flex;
align-items:center;
gap:10px;
height:auto;
padding:9px 10px;
}
#container .main_visual .main-best ul li .best_product:hover{
background:var(--rn-bg-soft);
}
/* 순위 : tag2.png 리본 이미지(40x60)를 CSS 배지로 바꾼다.
이미지라 테마를 바꿔도 색이 그대로였다. 4·5위는 톤을 낮춘다. */
#container .main_visual .main-best ul li .best_product .num{
position:static;
flex:none;
width:20px;
height:20px;
background-image:none;
background-color:var(--rn-strong);
color:#fff;
border-radius:var(--rn-radius-sm);
font-size:11px;
font-weight:700;
line-height:1;
/* 숫자를 배지 정중앙에. line-height/text-align 만으로는
상속된 padding 때문에 위 6px / 아래 1px 로 치우쳐 있었다(잰 값). */
display:flex;
align-items:center;
justify-content:center;
padding:0;
}
#container .main_visual .main-best ul li:nth-child(n+4) .best_product .num{
background-color:var(--rn-ink-3);
}
/* 상품명. flex 아이템이 되면서 float 이 풀려 이제 line-clamp 를 쓸 수 있다.
(아래 .title 규칙의 '행간으로 맞춘다'는 그 제약이 있던 시절 이야기다) */
#container .main_visual .main-best ul li .best_product .title{
float:none;
flex:1 1 auto;
min-width:0;
width:auto;
height:auto;
padding:0;
}
#container .main_visual .main-best ul li .best_product .title .prd_name{
margin:0;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
#container .main_visual .main-best ul li .best_product .img{
float:none;
flex:none;
width:52px;
height:52px;
}
#container .main_visual .main-best ul li .best_product .img img{
width:100%;
height:100%;
object-fit:contain;
border-radius:var(--rn-radius-sm);
border:1px solid var(--rn-line-2);
}
/* 셀렉터는 new_main.css 의 '.main-best ul li .best_product .title' 과 같은 깊이로 맞춘다.
line-clamp 는 쓸 수 없다 — 이 요소는 float:left 라 display 가 블록으로 강제되고,
그러면 -webkit-box 가 무시된다. float 은 옆의 썸네일 배치가 의존하므로 못 뺀다.
대신 행간을 맞춰 '줄 경계에서 정확히' 잘리게 한다.
박스는 height:50px + padding-top:10px 인데 box-sizing:border-box 라
글자가 들어가는 실제 영역은 40px 다. 그래서 행간 20px × 2줄 = 40px.
(기존엔 21px 행간이라 두 줄이 42px 이 되어 글자 중간에서 잘려 나왔다) */
.main-best ul li .best_product .title{
line-height:20px;
font-size:14px;
letter-spacing:-0.3px;
color:var(--rn-ink);
word-break:break-all;
}
/* =========================================================================
6. 포인트 컬러 : 레드(#E71706 / #f35e5e / #f33) → 홈플 팔레트
common.css 의 빨강을 자리 성격별로 갈아끼운다.
* 필수입력·오류 표시의 빨강은 관례라서 남긴다. (.c_form strong 등)
* GNB 의 'K2 & 3M', '프로모션 예약' 은 CSS 가 아니라 관리자에서 올린
배너 이미지(pl_menu_img)다. 이미지 교체로만 바뀐다.
========================================================================= */
/* 검색 버튼 : 빨강 → 네이비 */
#header .header_top .smart_search a,
#header .header_top_wide .smart_search a{
background:var(--rn-strong);
}
#header .header_top .smart_search a:hover,
#header .header_top_wide .smart_search a:hover{
background:var(--rn-strong-2);
}
/* 검색 입력창 테두리(common.css 의 2px 빨강) — 위 3장에서 이미 회색으로 덮었지만
header_top_wide 변형(#043C93)까지 포함해 한 번 더 확실히 눌러 둔다 */
#header .header_top_wide .top_search .top_text_cont .top_srarch_text{
border-color:var(--rn-line);
}
/* GNB hover */
#header .gnb .gnb_all a:hover,
.gnb .menu_box ul ol > a:hover{
color:var(--rn-link);
}
#gnb_content li.gnb_alls .gnb_alls_a:hover .icon{
color:var(--rn-link);
}
/* 좌우 고정 퀵메뉴 : 전화번호 텍스트 / '문의하기' 버튼 / 박스 테두리 */
.fix_left .inner{
border-color:var(--rn-line); /* common.css 의 border:1px solid #f00 */
border-radius:var(--rn-radius);
}
.fix_left .inner .txt_num{
color:var(--rn-strong);
}
/* 오른쪽 퀵메뉴를 왼쪽 카드와 같은 언어로 맞춘다.
왼쪽(.fix_left .inner)은 이미 흰 카드 + --rn-line 테두리 + radius 8 인데,
오른쪽은 #f9f9f9 바탕에 #ddd 테두리 상자 8개가 각각 서 있어서
둘이 남처럼 보였다. 오른쪽을 카드 하나로 묶고 항목 사이만 옅은 선으로 나눈다.
(폭은 왼쪽 150 / 오른쪽 90 으로 다르다. 오른쪽은 화면 오른쪽 끝에 붙어 있어
넓히면 좁은 화면에서 잘리므로 폭은 건드리지 않고 스타일만 맞춘다.) */
.fix_right{
background:transparent;
border:1px solid var(--rn-line);
border-radius:var(--rn-radius);
height:auto; /* common.css 는 height:200px 인데 내용은 366px 이다.
overflow:hidden 과 겹치면 4번째 항목부터 잘려 나간다. */
overflow:hidden;
}
.fix_right a{
display:block;
width:auto;
height:auto;
padding:11px 6px;
border:0;
border-bottom:1px solid var(--rn-line-2);
border-radius:0;
background:#fff;
font-size:12px;
line-height:1.3;
letter-spacing:-0.2px;
color:var(--rn-ink-2);
}
.fix_right a:last-child{
border-bottom:0;
}
.fix_right a:hover{
background:var(--rn-bg-soft);
color:var(--rn-link);
}
/* '문의하기' 블록.
글자가 칸 아래 모서리에 딱 붙어 있던 진짜 원인은 padding 도 height 도 아니었다.
common.css 가 .fix_right .inquiry span 을 position:absolute; bottom:0 으로
바닥에 못박아 둔 것이다. 그래서 어떤 정렬을 줘도 안 먹었다.
span 을 static 으로 되돌린 뒤 세로 flex 로 가운데 세운다.
(아이콘 i 도 common.css 의 padding-top:6px / inline-block 을 푼다) */
.fix_right a.inquiry{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:86px;
height:auto;
padding:16px 6px;
line-height:1.2;
text-align:center;
border-bottom:0;
background:var(--rn-strong);
color:#fff;
}
.fix_right a.inquiry:hover{
background:var(--rn-strong-2);
color:#fff;
}
.fix_right a.inquiry i{
display:block;
padding-top:0;
margin:0 0 8px;
font-size:22px;
line-height:1;
}
.fix_right a.inquiry span{
position:static;
display:block;
margin:0;
font-size:13px;
font-weight:700;
line-height:1.2;
}
/* 카테고리 필터(검색 좌측) 활성 상태 */
.search-func .search-table tr td div li.on a,
.search-func .search-table tr td div a.on,
.search-func .search-table tr td div .cate_link .inner_cont a.on,
.search-func .search-table tr td div .cate_link:hover{
color:var(--rn-link);
}
.search-func .search-table tr td .div2 a.on{
background:var(--rn-strong);
border-color:var(--rn-strong);
}
.search-func .search-table tr td div label input{
accent-color:var(--rn-strong);
}
/* 검색결과 건수 강조 */
.item_list_ctrl .total strong{
color:var(--rn-strong);
}
/* 쿠폰·할인 배지 : 빨강 → 진한 그린 (흰 글씨를 얹으므로 대비 확보된 쪽) */
.goods_box_1 > .coupon,
.goods_box_1 .coupon-cont .coupon,
.goods_box_main .coupon,
.c_wish_list .wish_box .coupon{
background:var(--rn-badge);
color:#fff;
}
/* 상품 상세·목록의 가격 강조가 아직 빨강인 곳 */
.sub_item .goods_box_1 .price .after .won{
color:var(--rn-ink);
}
.goods_box_main .price{
color:var(--rn-ink);
}
/* 검색 초기화 버튼 */
.c_comb_search .search_btn_reset .btn_reset{
color:var(--rn-strong);
border-bottom-color:var(--rn-strong);
}
/* =========================================================================
7. 공통 마감 — 위 항목을 적용하면 같이 어긋나 보이는 것들
========================================================================= */
/* 링크 기본색 */
a{ color:inherit; }
/* 옅은 구분선으로 통일 */
hr, .line, .bar{ border-color:var(--rn-line); }
/* 포커스 접근성 : 키보드 이동 시에만 표시 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
outline:2px solid var(--rn-ink);
outline-offset:2px;
}
/* =========================================================================
9. 상품 카드 — 요즘 쇼핑몰 형태로 정리
(요청 레퍼런스 : 라운드 썸네일 + 작은 회색 윗줄 + 2줄 상품명 +
큼직한 굵은 가격 + 연한 알약 배지)
* 없는 데이터를 새로 만들지 않는다. 마크업에 이미 있는 것만 쓴다.
.sub_name 부가설명 -> 윗줄 작은 회색 글
.item_name 상품명 -> 2줄
.price .after .won -> 가격
.coupon -> 할인 배지
* new_main.css 가 에서 로드돼 head 의 이 파일보다 뒤에 오므로,
그쪽 규칙을 덮어야 하는 것만 #container 를 붙인다.
========================================================================= */
/* 구역 배경은 new_main.css 의 회색/흰색 교차(.main_cate.gray = #f7f7f7)를
그대로 쓴다.
한때 전부 흰색으로 통일했었다. 그때는 카드에 테두리가 없어서 흰 썸네일이
회색 띠 위에 흰 상자처럼 떠 보였기 때문인데, 지금은 카드에 테두리와 라운드가
생겨서 회색 위에서도 카드로 읽힌다. 오히려 전부 흰색이면 구역 구분이 없어
밋밋하다. 교차 배경을 되살린다. */
/* 카드에 테두리를 두른다.
상품목록(/goods/category)은 이미 이렇게 돼 있고 보기 좋다는 평가를 받았다.
.sub_item .goods_box_1 { border:1px solid #e9ecef; border-radius:10px; ... }
홈 카드(.goods_box_main)만 이 처리가 빠져서, 사진이 흰 바탕에 그냥 떠 있는
모양이었다. 상품 사진마다 피사체 크기가 제각각이라(원본에 그렇게 찍혀 있다)
테두리가 없으면 한 줄이 정돈되지 않은 것처럼 보인다.
테두리가 각 상품을 한 덩어리로 묶어 주면 사진 크기가 달라도 줄이 정리된다.
목록 카드와 같은 값을 쓴다. 두 화면의 카드가 따로 놀 이유가 없다. */
#container .goods_box_main{
display:flex;
flex-direction:column;
height:100%;
background:#fff;
border:1px solid #e9ecef;
border-radius:10px;
overflow:hidden;
transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#container .goods_box_main:hover{
border-color:#dee2e6;
box-shadow:0 8px 24px rgba(0,0,0,.09);
transform:translateY(-3px);
}
/* 카드 뒤에 깔린 흰 칸을 없앤다.
new_main.css 의 .swiper-slide{background:#fff} 때문에 슬라이드 칸 전체가
흰색이었다. 슬라이드는 366px 인데 카드는 326px 이라 카드 위아래로 20px 씩
흰 띠가 남았고, 회색 구역(.main_cate.gray, #f7f7f7) 위에서 그게 그대로 보였다.
측정값 : 슬라이드 221x366 / 카드 221x326, 카드가 20px 아래에서 시작.
슬라이드를 투명으로 두면 그 20px 이 구역 배경색이 되어 카드만 떠 보인다.
카드 자신의 흰 배경(#container .goods_box_main)은 그대로 둔다.
범위는 상품 슬라이더 두 종류로 한정한다. 홈의 슬라이드 253개가 전부
여기에 들어가고, 배너 슬라이더(.slider-main-banner)는 흰 배경이 필요해서
건드리지 않는다.
new_main.css 가 안에서 뒤늦게 로드되므로 #container 로 특정성을 올린다.
(자세한 것은 이 파일 첫머리 주석 참고) */
#container .slider-product .swiper-slide,
#container .slider-product-auto .swiper-slide{
background:transparent;
}
/* 썸네일 : 카드 위쪽 칸. 테두리 대신 아래에 가는 구분선만 둔다. */
#container .goods_box_main .thumb{
border:0;
border-bottom:1px solid #f1f3f5;
border-radius:0;
background-color:#fff;
overflow:hidden;
}
#container .goods_box_main .thumb .thumbnail img{
object-fit:cover; /* 칸을 꽉 채운다 */
}
/* 카드 본문 */
#container .goods_box_main .info{
flex:1;
padding:14px 14px 16px;
text-align:left;
}
/* 윗줄 : 부가설명을 판매자/브랜드 줄처럼 작고 흐리게 */
#container .goods_box_main .info .sub_name{
margin:0 0 4px;
font-size:12px;
line-height:16px;
color:var(--rn-ink-3);
}
/* 브랜드 줄 : 상품명 위에 작은 회색 글씨. 누르면 그 브랜드관으로 간다.
(/goods/brand?chk_brand= — GNB 브랜드 메뉴가 쓰는 주소와 같다)
카드 전체를 감싸는 링크가 없어서(썸네일만 ) 링크를 겹쳐 놔도 안전하다.
브랜드가 없는 상품은 이 줄 자체가 안 나온다. */
#container .goods_box_main .info .brand_name{
display:block;
margin:0 0 4px;
font-size:12px;
line-height:16px;
color:var(--rn-ink-3);
text-decoration:none;
}
#container .goods_box_main .info .brand_name:hover{
color:var(--rn-link);
text-decoration:underline;
}
/* 상품명 : 2줄 */
#container .goods_box_main .info .name_box{
height:auto;
min-height:40px;
overflow:hidden;
}
#container .goods_box_main .info .item_name{
margin:0;
font-size:14px;
line-height:20px;
font-weight:400;
color:var(--rn-ink-2);
letter-spacing:-0.2px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
word-break:break-all;
}
/* 가격 : 금액만 크고 굵게, '원'은 작게 붙인다 */
#container .goods_box_main .price{
margin-top:8px;
line-height:1.2;
}
#container .goods_box_main .price .before{
display:block;
margin:0 0 2px;
font-size:12px;
color:var(--rn-ink-3);
}
#container .goods_box_main .price .after{
font-size:13px;
font-weight:400;
color:var(--rn-ink-3);
}
#container .goods_box_main .price .after .won{
margin-right:1px;
font-size:20px;
font-weight:800;
color:var(--rn-ink);
letter-spacing:-0.5px;
}
/* 배지 : 모서리 리본 대신 썸네일 왼쪽 위 알약 */
#container .goods_box_main .coupon{
top:10px;
left:10px;
right:auto;
padding:0;
background:none;
}
#container .goods_box_main .coupon .name{
display:inline-block;
padding:4px 9px;
border-radius:999px;
background:var(--rn-badge);
color:#fff;
font-size:11px;
font-weight:700;
letter-spacing:-0.2px;
}
#container .goods_box_main .coupon .won{
display:inline-block;
margin-left:3px;
padding:4px 9px;
border-radius:999px;
background:var(--rn-point-weak);
color:var(--rn-strong);
font-size:11px;
font-weight:700;
}
/* 품절 : 썸네일을 눌러서 표현 */
#container .goods_box_main .soldout{
border-radius:12px;
background:rgba(255,255,255,.62);
}
/* =========================================================================
10. 추천 상품 줄(.mian_fav) — 검은 배경 제거
new_main.css 가 이 줄에만 어두운 판을 깔아 뒀다.
.mian_fav .blue_cont { background:#323232; padding-top:70px }
위쪽 70px 은 노란 배너(girl4.png) 자리였는데, 그 배너가 투명 PNG 에
노란 글씨라 어두운 배경에서만 읽힌다. 배경을 걷으면서 배너도 뺐고
(뷰에서 제거) 다른 구역과 같은 제목 줄로 바꿨다.
========================================================================= */
#container .mian_fav .blue_cont{
background:transparent;
padding:0;
}
/* 제목 줄 : 다른 구역(.main_cate .txt)과 같은 모양으로.
new_main.css 는 이 .txt 를 left:480px 에 절대배치해 두었다. 풀어 준다. */
#container .mian_fav .blue_cont .txt{
position:relative;
left:0; /* new_main.css:76 의 left:480px / top:20px 을 지운다.
static 일 땐 무시됐는데 relative 로 바꾸니 살아나
제목만 480px 오른쪽으로 밀렸다. */
top:0;
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
margin:0 0 20px;
padding-bottom:14px;
border-bottom:1px solid var(--rn-line); /* 다른 구역 제목과 같은 옅은 구분선 */
font-size:22px;
font-weight:700;
letter-spacing:-0.6px;
color:var(--rn-ink);
text-shadow:none;
}
#container .mian_fav .blue_cont .txt > span{
font-size:22px;
font-weight:700;
color:var(--rn-ink);
}
#container .mian_fav .blue_cont .txt .more_link{
flex:none;
font-size:13px;
font-weight:600;
color:var(--rn-link);
letter-spacing:0;
}
#container .mian_fav .blue_cont .txt .more_link:hover{
text-decoration:underline;
}
/* =========================================================================
11. 최근검색상품 패널 (GNB 드롭다운)
이 패널은 #container 밖(레이아웃 헤더)에 있어서, 위의 카드 규칙이
닿지 않았다. 그래서 홈·목록 카드에는 테두리가 생겼는데 이 패널의
카드만 맨몸으로 남아 혼자 달라 보였다. 같은 카드 모양을 입힌다.
========================================================================= */
.recent_prd .goods_box_main{
display:flex;
flex-direction:column;
height:100%;
background:#fff;
border:1px solid #e9ecef;
border-radius:10px;
overflow:hidden;
}
.recent_prd .goods_box_main:hover{
border-color:#dee2e6;
box-shadow:0 8px 24px rgba(0,0,0,.09);
}
.recent_prd .goods_box_main .thumb{
border:0;
border-bottom:1px solid #f1f3f5;
border-radius:0;
background-color:#fff;
overflow:hidden;
}
.recent_prd .goods_box_main .info{
flex:1;
padding:12px 12px 14px;
text-align:left;
}
.recent_prd .goods_box_main .price .after .won{
font-size:17px;
font-weight:800;
color:var(--rn-ink);
}
/* 패널 높이를 내용에 맞춘다.
common.css 가 385px 로 못박아 둬서, 최근 본 상품이 한두 개일 때 아래쪽에
큰 빈칸이 남았다. 슬라이드가 5개 이하면 Swiper 를 아예 만들지 않으므로
높이를 채울 것도 없다. */
.gnb .menu_box .recent_prd .recent_cont{
height:auto;
padding-bottom:20px;
}
.gnb .menu_box .recent_prd .recent_cont .prd_list{
height:auto;
}
/* 카드 사이 간격 (Swiper 미초기화 상태에서도 붙지 않게) */
.gnb .menu_box .recent_prd .recent_cont .swiper-slide + .swiper-slide{
margin-left:14px;
}
/* =========================================================================
12. 카테고리 · 브랜드 메가메뉴, 그리고 남아 있던 주황(#ff6c2a)
앞서 포인트색을 정리할 때 빨강(#E71706 / #f33 / #cd3726)만 바꾸고 주황을
놓쳤다. 이 스킨은 포인트색이 두 갈래였다.
#ff6c2a 전체카테고리 열림 상태, 메뉴 hover 밑줄, 메가메뉴 상하 테두리,
상단 로그인, 푸터 계좌정보
전부 테마 색으로 옮긴다.
메뉴 위계도 손본다. 1차 카테고리 제목과 하위 항목이 둘 다 #565656 이고
굵기만 달라서 236개 항목이 한 덩어리로 보였다.
========================================================================= */
/* 메가메뉴 틀 : 위아래 2px 주황 테두리 -> 테두리 없이 그림자만.
펼쳤을 때 패널 맨 위에 굵은 선이 그어져 보였다. 선은 사실 두 개가 겹친 것이다.
1) 패널 자신의 border-top (옅은 선으로 바꿔 뒀던 것)
2) common.css:242~244 의 `.category_list tr:nth-child(n+1) td{border-top}`
— n+1 은 첫 줄까지 전부 잡는다. 줄 사이 구분선이 패널 맨 위에도 하나 더
그어지고 있었다. (n+2 / n+3 규칙도 같은 걸 중복으로 건다)
1px 두 줄이 1px 띄고 겹쳐서 3px 짜리 굵은 선처럼 보였다.
패널은 흰 바탕이고 아래 그림자로 이미 떠 보이므로 위 선은 아예 뺀다.
그러면 GNB 줄과 이어진 한 장의 흰 면이 된다. (헤더의 2px 검은 밑줄은
패널이 z-index 999 로 덮으므로 펼친 동안에는 보이지 않는다) */
.category_list_cont,
.brand_list_cont{
border-top:0;
border-bottom:0;
box-shadow:0 12px 28px rgba(0,0,0,.10);
}
/* 줄 구분선은 둘째 줄부터. (첫 줄에 그어지던 중복 선 제거) */
.category_list_cont .category_list tr:first-child td{
border-top:0;
}
/* 1차 카테고리 제목 (h3.cate_feed > a) */
.category_list_cont .cate_list > h3.cate_feed > a{
font-size:15px;
font-weight:700;
color:var(--rn-ink);
letter-spacing:-0.3px;
}
/* 하위 항목 */
.category_list_cont .cate_list li a{
font-size:13px;
font-weight:400;
color:var(--rn-ink-2);
letter-spacing:-0.2px;
}
.category_list_cont .cate_list li a:hover{
color:var(--rn-link);
}
/* 열림 상태의 '전체 카테고리' 글자 */
#gnb_content li.gnb_alls.on .gnb_alls_a{
color:var(--rn-link);
}
#gnb_content li.gnb_alls > div > a:hover{
color:var(--rn-link);
}
/* 메뉴 hover 시 아래에 그어지는 줄 */
#header .gnb .gnb_all a:after,
.gnb .menu_box ul ol > a:after{
background-color:var(--rn-link);
}
/* 상단 로그인 / 푸터 계좌정보 */
.top_member_box > li a.login,
.top_member_box > li strong,
.content_info .bank_info strong{
color:var(--rn-strong);
}
/* 그 밖에 남아 있던 주황 계열(#ff6600) */
.c_agree .agree_add_info .fc_hit,
.c_cart_list .if_coupon .t_benefit strong{
color:var(--rn-strong);
}
/* =========================================================================
13. 공통 페이지 크롬 — 제목줄 / 버튼 / 등록폼
로그인·회원가입·주문·게시판·마이페이지가 전부 이 몇 개 클래스를 쓴다.
(.c_page_tit / .c_group_tit / .c_process / .c_btn / .c_form)
그런데 색이 #333 · #666 · #ddd · #f5f5f5 · #ff0000 으로 박혀 있어
헤더·상품카드만 리뉴얼된 상태에서 이 화면들만 예전 톤으로 남아 있었다.
여기서는 색 / 선 / 모서리 / 포커스만 바꾼다.
치수(높이 55px, 폭 180px 등)는 뷰에 인라인으로도 박혀 있어 건드리지 않는다.
단, 글자를 직접 입력하는 칸(input/select/textarea)만 30px -> 40px 로 키운다.
30px 은 요즘 화면에서 누르기도 읽기도 작다.
member.css / goods.css 는 뷰가 renew.css 보다 나중에 불러온다.
그래서 이 아래 규칙은 #wrap 을 붙여 우선순위를 한 칸 올린다.
========================================================================= */
/* 페이지 제목줄 */
#wrap .c_page_tit{
border-bottom:1px solid var(--rn-line);
}
#wrap .c_page_tit .title{
color:var(--rn-ink);
font-size:26px;
font-weight:700;
letter-spacing:-0.8px;
}
/* 가입 단계 표시(01 약관동의 - 02 정보입력 - 03 가입완료) */
#wrap .c_process .num,
#wrap .c_process .tit{
color:var(--rn-ink-3);
}
#wrap .c_process .hit .num,
#wrap .c_process .hit .tit{
color:var(--rn-strong);
}
/* 구역 제목 */
#wrap .c_group_tit,
#wrap .c_group_tit .tit{
color:var(--rn-ink);
font-size:17px;
font-weight:700;
letter-spacing:-0.4px;
}
#wrap .c_group_tit .sub_tt{ /* (필수) */
color:var(--rn-danger);
}
#wrap .c_group_tit .btn{ /* 전체보기 */
color:var(--rn-ink-3);
}
#wrap .c_group_tit .btn:hover{
color:var(--rn-link);
}
/* -------------------------------------------------------------------------
버튼 (.c_btn)
black = 주버튼, black.line = 보조(테두리), color = 강조.
전부 회색/검정이라 어느 것이 주버튼인지 색으로 구분되지 않았다.
------------------------------------------------------------------------- */
#wrap .c_btn{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius);
color:var(--rn-ink-2);
transition:background-color .15s, border-color .15s, color .15s;
}
#wrap .c_btn:hover{
background:var(--rn-bg-soft);
}
#wrap .c_btn.black,
#wrap .c_btn.color{
background:var(--rn-strong);
border-color:var(--rn-strong);
color:#fff;
}
#wrap .c_btn.black:hover,
#wrap .c_btn.color:hover{
background:var(--rn-strong-2);
border-color:var(--rn-strong-2);
}
#wrap .c_btn.black.line,
#wrap .c_btn.color.line{
background:#fff;
border-color:var(--rn-strong);
color:var(--rn-strong);
}
#wrap .c_btn.black.line:hover,
#wrap .c_btn.color.line:hover{
background:var(--rn-point-weak);
}
#wrap .c_btn.dark{
background:var(--rn-ink-2);
border-color:var(--rn-ink-2);
color:#fff;
}
#wrap .c_btn.light{
background:#fff;
border-color:var(--rn-line);
color:var(--rn-ink-3);
}
/* -------------------------------------------------------------------------
등록폼 (.c_form) — 가입 / 주문 / 게시판이 같이 쓴다
------------------------------------------------------------------------- */
#wrap .c_form{
border-top:2px solid var(--rn-ink); /* #666 -> 먹색. 표의 시작을 분명히 */
}
#wrap .c_form strong{
color:var(--rn-danger);
}
#wrap .c_form table tr{
border-bottom:1px solid var(--rn-line);
}
#wrap .c_form table th,
#wrap .c_form_sub th{
background:var(--rn-bg-soft);
}
#wrap .c_form table .tit,
#wrap .c_form table .tit2,
#wrap .c_form table .txt,
#wrap .c_form_sub .tit{
color:var(--rn-ink);
font-weight:600;
}
#wrap .c_form_sub{
border-color:var(--rn-line);
}
#wrap .c_form_sub tr{
border-bottom-color:var(--rn-line);
}
/* 입력칸 : 선·모서리·포커스는 모든 폼에 공통으로 준다 */
#wrap .c_form .input_design,
#wrap .c_form select{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
color:var(--rn-ink);
}
/* 높이 30px -> 40px 는 회원 화면(.c_member : 가입 / 찾기)에만 준다.
주문서·게시판·마이페이지도 같은 .c_form 을 쓰는데, 그쪽은 한 줄에
input/select/체크박스를 float 로 여러 개 늘어놓고 line-height 30px 에
맞춰 놓은 자리가 많다. 높이만 키우면 그 줄들이 어긋난다.
그 화면들은 별도로 손볼 때 같이 올린다. */
#wrap .c_member .c_form .input_design,
#wrap .c_member .c_form select{
height:40px;
padding-left:12px;
padding-right:12px;
}
#wrap .c_member .c_form select{
padding-right:26px; /* 화살표 아이콘 자리 */
font-size:14px !important;
}
#wrap .c_member .c_form .mail_icon{
line-height:40px;
}
#wrap .c_member .c_form .label_design{
padding-top:11px;
padding-bottom:11px;
}
#wrap .c_form .input_design:focus,
#wrap .c_form select:focus,
#wrap .c_form .textarea_box .textarea_design:focus{
border-color:var(--rn-link);
box-shadow:0 0 0 3px var(--rn-point-weak);
outline:0;
}
#wrap .c_form .textarea_box .textarea_design{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
}
#wrap .c_form .label_design .txt{
color:var(--rn-ink-2);
}
/* 안내 문구 */
#wrap .c_form .tip_txt,
#wrap .c_group_tit .tip_txt{
color:var(--rn-ink-3);
}
/* 가입/주문 완료 화면 */
#wrap .c_complete{
border-color:var(--rn-line);
}
#wrap .c_complete .complete_box{
background:var(--rn-bg-soft);
}
#wrap .c_complete .complete_box .tit{
color:var(--rn-ink);
font-weight:700;
letter-spacing:-1px;
}
#wrap .c_complete .complete_box .tit strong{
border-bottom-color:var(--rn-strong);
color:var(--rn-strong);
}
/* =========================================================================
14. 로그인 화면
원래 : 폭 500px 블록이 테두리 있는 표 칸(.li) 안에 들어 있고, 제목 17px,
입력칸 옆에 130x120 짜리 검정 로그인 덩어리, 아래에 회색(#eee) /
검정(#333) 버튼 두 개. 카드도 여백도 없어 화면에 떠 있는 느낌이었다.
바꾼 것 : 카드 한 장으로 묶고, 색을 테마색으로, 모서리와 포커스를 넣는다.
마크업은 그대로 둔다.
========================================================================= */
#wrap .c_login{
margin-top:0;
}
#wrap .c_login .li{
border:0; /* 표 칸 테두리 제거 */
}
/* 뷰에 width:500px;margin:0 auto;padding:20px 이 인라인으로 박혀 있다.
폭은 그대로 두고 카드 모양만 입힌다(인라인 padding 을 이겨야 해서 !important). */
#wrap .c_login .login_form{
margin:10px auto 0;
border:1px solid var(--rn-line);
border-radius:var(--rn-radius);
padding:36px 40px 40px !important;
box-sizing:border-box;
}
#wrap .c_login .login_form .c_group_tit{
font-size:22px;
font-weight:700;
text-align:center;
letter-spacing:-0.6px;
padding-bottom:22px;
}
/* 입력칸 2줄 + 오른쪽 로그인 버튼 */
#wrap .c_login .form .input_design{
height:52px;
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
padding:0 14px;
font-size:15px;
color:var(--rn-ink);
}
#wrap .c_login .form .input_design:focus{
border-color:var(--rn-link);
box-shadow:0 0 0 3px var(--rn-point-weak);
outline:0;
}
#wrap .c_login .form .btn_login,
#wrap .c_login .form .btn_find{
height:114px; /* 52 + 10(간격) + 52 */
line-height:114px;
background:var(--rn-strong);
color:#fff;
border-radius:var(--rn-radius-sm);
font-size:17px;
font-weight:600;
letter-spacing:-0.5px;
padding-bottom:0;
transition:background-color .15s;
}
#wrap .c_login .form .btn_login:hover,
#wrap .c_login .form .btn_find:hover{
background:var(--rn-strong-2);
}
/* 아이디 저장 / 자동 로그인 */
#wrap .c_login .save_id label{
color:var(--rn-ink-2);
}
/* 아이디·비밀번호찾기 / 회원가입 */
#wrap .c_login .btn_login_pass,
#wrap .c_login .btn_login_join{
border-radius:var(--rn-radius-sm);
font-size:15px;
letter-spacing:-0.3px;
line-height:48px;
transition:background-color .15s, border-color .15s;
}
#wrap .c_login .btn_login_pass{
background:#fff;
border:1px solid var(--rn-line);
color:var(--rn-ink-2);
}
#wrap .c_login .btn_login_pass:hover{
background:var(--rn-bg-soft);
}
#wrap .c_login .btn_login_join{
background:var(--rn-strong);
border:1px solid var(--rn-strong);
color:#fff;
font-weight:600;
}
#wrap .c_login .btn_login_join:hover{
background:var(--rn-strong-2);
border-color:var(--rn-strong-2);
}
/* 소셜 로그인 칸은 뷰에서 visibility:hidden 으로 꺼져 있다.
visibility 는 자리를 그대로 차지해서 카드 아래쪽에 150px 짜리 빈 공간이
남아 있었다(카드로 묶으니 그게 눈에 띄었다). 자리까지 접는다.
나중에 소셜 로그인을 켜면 뷰에서 style 을 지우므로 이 규칙도 자동으로 풀린다. */
#wrap .c_login .c_sns_login[style*="visibility:hidden"],
#wrap .c_login .c_sns_login[style*="visibility: hidden"]{
display:none;
}
/* 비회원 주문조회 안내 */
#wrap .c_login .guide dt{
color:var(--rn-ink);
}
#wrap .c_login .guide dd{
color:var(--rn-ink-3);
}
#wrap .c_login .guide dd:before{
background:var(--rn-ink-3);
}
#wrap .c_login .result{
background:var(--rn-bg-soft);
border-radius:var(--rn-radius);
}
/* 약관 동의(회원가입 1단계) */
#wrap .c_agree .text_box{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
}
#wrap .c_agree .agree_check label{
color:var(--rn-ink-2);
}
/* 약관 동의 칸 테두리 */
#wrap .c_agree .agree_form{
border-bottom:1px solid var(--rn-line);
}
#wrap .c_agree .if_total .agree_check label{
color:var(--rn-ink);
}
/* =========================================================================
15. 상품 상세 (goods.css)
이 화면은 리뉴얼 전 색이 가장 많이 남아 있던 곳이다.
#f00 / #cd3726 가격, 구매버튼 hover
#333 / #666 제목, 표 위선, 버튼, 탭 테두리
#ccc / #ddd / #eee 선이 세 가지 굵기·세 가지 회색으로 섞여 있었다
선은 --rn-line 하나로, 강조는 --rn-strong 하나로 모은다.
치수는 건드리지 않는다. 사진 472px, 썸네일 70px, 관련상품 슬라이더는
Swiper 가 JS 로 폭을 계산하므로 폭을 바꾸면 슬라이더가 깨진다.
goods.css 는 뷰가 renew.css 뒤에 부르므로 #wrap 으로 우선순위를 올린다.
========================================================================= */
/* -------- 사진 -------- */
#wrap .view_photo .thumb{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius);
overflow:hidden;
}
#wrap .view_photo .rolling_thumb{
border-bottom:1px solid var(--rn-line);
}
#wrap .view_photo .rolling_thumb li{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
overflow:hidden;
}
#wrap .view_photo .rolling_thumb li:hover{
border-color:var(--rn-ink-3);
}
#wrap .view_photo .rolling_thumb .hit{
border:2px solid var(--rn-strong);
}
/* -------- 상품명 -------- */
#wrap .view_name{
border-bottom:1px solid var(--rn-line);
padding-bottom:22px;
}
#wrap .view_name .title{
color:var(--rn-ink);
font-size:26px;
font-weight:700;
letter-spacing:-0.8px;
line-height:1.35;
}
#wrap .view_name .sub_name{
color:var(--rn-ink-3);
}
/* -------- 상품 기본정보 표 (브랜드/원산지/택배사/판매가...) -------- */
#wrap .view_default dl{
border-bottom:1px solid var(--rn-line-2);
}
#wrap .view_default dt{
color:var(--rn-ink-3);
font-weight:400;
}
#wrap .view_default dd{
color:var(--rn-ink-2);
}
/* 판매가 : 빨강(#f00) -> 테마 강조색. 숫자는 자릿수를 맞춘다 */
#wrap .view_default .after_price strong{
color:var(--rn-strong);
font-size:22px;
font-variant-numeric:tabular-nums;
}
#wrap .view_default .before_price strong{
color:var(--rn-ink-3);
}
#wrap .view_default .point strong{
color:var(--rn-ink-2);
}
#wrap .view_default .point_plus{
border:1px solid var(--rn-line);
border-radius:999px;
color:var(--rn-ink-3);
}
#wrap .view_default .point_plus strong{
color:var(--rn-strong);
}
#wrap .view_default .btn_brand,
#wrap .view_default .btn_coupon{
background:#fff;
border:1px solid var(--rn-line);
border-radius:999px;
color:var(--rn-ink-2);
}
#wrap .view_default .btn_brand:hover,
#wrap .view_default .btn_coupon:hover{
background:var(--rn-bg-soft);
border-color:var(--rn-ink-3);
}
#wrap .view_default dd .download{
background:var(--rn-strong);
border-radius:var(--rn-radius-sm);
}
#wrap .view_default .delivery_add{
background:var(--rn-bg-soft);
border-radius:var(--rn-radius-sm);
color:var(--rn-ink-2);
}
#wrap .view_default .line{
border-left-color:var(--rn-line);
}
#wrap .view_default .revdt{
color:var(--rn-ink);
}
#wrap .view_default .revdt_txt{
color:var(--rn-ink-3);
}
/* 상품 쿠폰 배지 : 주황(#ff4200) -> 배지색 */
#wrap .view_coupon .coupon_name{
background:var(--rn-badge);
border-radius:999px;
letter-spacing:-0.3px;
}
#wrap .view_coupon .open_box{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius);
box-shadow:0 12px 28px rgba(0,0,0,.10);
}
#wrap .view_coupon .open_box .tt{
background:var(--rn-bg-soft);
color:var(--rn-ink);
}
/* -------- 옵션 -------- */
#wrap .view_option,
#wrap .view_option_select{
background:var(--rn-bg-soft);
border:1px solid var(--rn-line);
border-radius:var(--rn-radius);
}
#wrap .view_option dl + dl,
#wrap .view_option_select dl + dl{
border-top:1px solid var(--rn-line);
}
#wrap .view_option dt,
#wrap .view_option_select dt{
color:var(--rn-ink);
font-weight:600;
}
#wrap .view_option_select dd ol select{
height:42px;
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
background:#fff;
color:var(--rn-ink);
font-size:14px !important;
}
#wrap .view_option_select dd ol select:focus{
border-color:var(--rn-link);
outline:0;
}
#wrap .view_select{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
}
#wrap .view_select:hover{
border-color:var(--rn-link);
}
#wrap .view_select .open_box{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
box-shadow:0 12px 28px rgba(0,0,0,.10);
}
#wrap .view_select .open_box .option{
border-top:1px solid var(--rn-line-2);
color:var(--rn-ink-2);
}
#wrap .view_select .open_box .option:hover{
background:var(--rn-point-weak);
color:var(--rn-link);
}
/* 선택한 옵션 목록 */
#wrap .view_option_list{
border-top:1px solid var(--rn-line);
color:var(--rn-ink-3);
}
#wrap .view_option_list dl + dl{
border-top:1px solid var(--rn-line-2);
}
#wrap .view_option_list dd.price{
color:var(--rn-ink);
font-weight:600;
}
#wrap .view_option_list dd.delete a{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
color:var(--rn-ink-3);
}
#wrap .view_option.result{
border:1px solid var(--rn-line);
border-bottom:0;
border-radius:var(--rn-radius) var(--rn-radius) 0 0;
}
#wrap .view_option.result .add_tag{
background:var(--rn-strong);
border-radius:var(--rn-radius-sm);
}
/* 수량 카운터 */
#wrap .counter_box .updown_input,
#wrap .counter_box .updown a{
border-color:var(--rn-line);
}
#wrap .counter_box .updown a:hover{
background-color:var(--rn-bg-soft);
}
/* -------- 결제금액 -------- */
#wrap .view_addoption{
border-top:1px solid var(--rn-line);
}
#wrap .view_addoption .list{
border-top:1px solid var(--rn-line-2);
}
#wrap .view_addoption .list .tit{
color:var(--rn-ink);
}
#wrap .view_addoption .list .num,
#wrap .view_addoption .list .price{
color:var(--rn-ink-2);
}
#wrap .view_addoption .list .num .number{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
}
#wrap .view_total,
#wrap .view_total_error{
border-top:2px solid var(--rn-ink);
}
#wrap .view_total .total_tt{
color:var(--rn-ink);
font-weight:700;
}
#wrap .view_total .after_price,
#wrap .view_total .after_price strong{
color:var(--rn-strong);
font-weight:700;
font-variant-numeric:tabular-nums;
}
#wrap .view_total_error{
border-left:0;
border-right:0;
border-bottom:0;
color:var(--rn-ink-3);
}
/* -------- 장바구니 / 바로구매 -------- */
#wrap .view_btn .btn{
border-radius:var(--rn-radius);
letter-spacing:-0.4px;
transition:background-color .15s, border-color .15s, color .15s;
}
#wrap .view_btn .btn_cart{
background:#fff;
border:1px solid var(--rn-strong);
color:var(--rn-strong);
}
#wrap .view_btn .btn_cart:hover{
background:var(--rn-point-weak);
}
#wrap .view_btn .btn_order{
background:var(--rn-strong);
border:1px solid var(--rn-strong);
color:#fff;
}
#wrap .view_btn .btn_order:hover{ /* 예전엔 여기서 빨강(#cd3726)으로 튀었다 */
background:var(--rn-strong-2);
border-color:var(--rn-strong-2);
}
#wrap .view_btn .btn_wish{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius);
}
#wrap .view_btn .btn_soldout{
background:var(--rn-bg-soft);
border:1px solid var(--rn-line);
color:var(--rn-ink-3);
}
/* 담기 후 뜨는 안내 상자 */
#wrap .view_btn .how{
border-bottom-color:var(--rn-strong);
}
#wrap .view_btn .how .box{
border:1px solid var(--rn-strong);
border-bottom:0;
border-radius:var(--rn-radius) var(--rn-radius) 0 0;
}
#wrap .view_btn .how .btn2{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
color:var(--rn-ink-2);
}
#wrap .view_btn .how .btn2.go_cart{
background:var(--rn-strong);
border-color:var(--rn-strong);
color:#fff;
}
#wrap .view_caution label{
color:var(--rn-ink-2);
}
/* -------- 관련상품 -------- */
#wrap .view_relative .relative_top{
border-bottom:1px solid var(--rn-line);
}
#wrap .view_relative .relative_top .tt{
color:var(--rn-ink);
font-size:22px;
font-weight:700;
letter-spacing:-0.6px;
}
#wrap .view_relative .relative_top .num{
color:var(--rn-ink-3);
}
#wrap .view_relative .relative_top .num strong{
color:var(--rn-ink);
}
#wrap .view_relative .prevnext{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
}
#wrap .view_relative .prevnext a:hover{
background:var(--rn-bg-soft);
}
/* -------- 탭 (상품정보 / 배송 / 후기 ...) -------------------------------
원래는 위·좌·우에 1px 선을 두른 '파일 탭' 모양이었다. 활성 탭만 선이
검정으로 바뀌고 아래쪽 선을 지워 종이 탭처럼 이어 붙이는 방식인데,
선이 세 겹으로 겹쳐 지저분했고 활성 여부도 잘 안 보였다.
테두리를 걷고 활성 탭 아래에 굵은 밑줄 하나만 남긴다.
---------------------------------------------------------------------- */
#wrap .view_tab .inner_wrap{
border-bottom:1px solid var(--rn-line);
}
#wrap .view_tab .tab,
#wrap .view_tab li:first-child .tab,
#wrap .view_tab .hit .tab,
#wrap .view_tab li:first-child.hit .tab{
border:0 !important;
background:#fff;
color:var(--rn-ink-3);
font-size:16px;
font-weight:600;
letter-spacing:-0.3px;
position:relative;
}
#wrap .view_tab .tab:hover{
color:var(--rn-ink);
}
/* 위 묶음에 li:first-child.hit 가 들어 있어 그쪽이 더 구체적이다.
같은 선택자를 다시 써서(뒤에 오므로) 활성 탭 글자색을 이긴다. */
#wrap .view_tab li.hit .tab,
#wrap .view_tab li:first-child.hit .tab{
color:var(--rn-strong);
}
#wrap .view_tab .hit .tab:after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:3px;
background:var(--rn-strong);
}
/* -------- 탭 내용 -------- */
#wrap .view_conts .group_title,
#wrap .view_conts .sub_tit{
color:var(--rn-ink);
font-weight:700;
letter-spacing:-0.5px;
}
#wrap .view_notify table th{
background:var(--rn-bg-soft);
border-top:1px solid var(--rn-line);
border-bottom:1px solid var(--rn-line);
color:var(--rn-ink);
font-weight:600;
}
#wrap .view_notify table td{
border-top:1px solid var(--rn-line);
border-bottom:1px solid var(--rn-line);
color:var(--rn-ink-2);
}
#wrap .view_guide .sub_tit{
border-bottom:1px solid var(--rn-line);
}
#wrap .view_guide .txt_box{
background:var(--rn-bg-soft);
border-radius:var(--rn-radius);
padding:16px 18px;
color:var(--rn-ink-2);
}
#wrap .view_guide .add strong{
color:var(--rn-link);
}
/* 상품 상세 안의 게시판(문의/후기) 제목줄 */
#wrap .c_view_board .board_title{
border-bottom:1px solid var(--rn-line);
}
#wrap .c_view_board .guide_txt{
color:var(--rn-ink-3);
}
/* 관련태그 : 3px 짜리 회색 테두리 -> 옅은 배경 한 칸 */
#wrap .view_hash{
border:1px solid var(--rn-line);
border-radius:var(--rn-radius);
background:var(--rn-bg-soft);
}
#wrap .view_hash li + li{
border-left:1px solid var(--rn-line);
}
#wrap .view_hash .title{
color:var(--rn-ink);
font-weight:600;
}
#wrap .view_hash .btn{
color:var(--rn-ink-2);
}
#wrap .view_hash .btn:hover{
color:var(--rn-link);
}
/* 상품평점 */
#wrap .view_summery .score .num{
color:var(--rn-ink);
}
#wrap .view_summery .score .total{
color:var(--rn-ink-3);
}
/* =========================================================================
16. 팝업 — alert / confirm / login / 상품 팝업
전부 같은 틀을 쓴다. common.ui.js 의 drawPopup() 이 만들고, 뷰에서 직접
쓴 것(상품상세 #popCerti 등)도 같은 마크업이다.
.popup > .ds-table > .ds-table-cell > .container
├ .header h2
├ .contents p
└ .btn-wrap button.btn-m
예전 모양 : 검정 띠(#343434) 제목줄 + 각진 흰 상자 + 검정/흰색 사각 버튼,
뒷배경 rgba(0,0,0,.7). 창이 무겁고 어느 버튼이 주버튼인지
색으로 구분되지 않았다.
마크업은 그대로 두고 색·모서리·여백·움직임만 바꾼다.
hook.css 가 에서 이 파일보다 먼저 로드되므로 같은 특정성으로 이긴다.
========================================================================= */
/* 뒷배경 : .7 은 뒤가 아예 안 보여서 어디서 띄운 창인지 알기 어려웠다 */
.popup{
background:rgba(15,20,30,.55);
}
/* 상자 */
.popup .container{
border-radius:12px;
overflow:hidden;
box-shadow:0 24px 60px rgba(0,0,0,.28);
animation:rn-pop-in .18s ease-out;
}
@keyframes rn-pop-in{
from{ opacity:0; transform:translateY(8px) scale(.98); }
to { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
.popup .container{ animation:none; }
}
/* 뒷page 가 같이 스크롤되던 것.
popOpen() 이 body 에 .scroll-fixed 를 붙이는데 정작 그 클래스에 규칙이
없었다(저장소 전체에 없다). overflow 만 잠근다. position:fixed 로 잠그면
스크롤 위치가 튀는데, popOpen/popClose 가 scrollTop 을 따로 되돌리므로
여기서는 건드리지 않는 편이 맞다. */
body.scroll-fixed{
overflow:hidden;
}
/* 제목줄 : 검정 띠 -> 흰 바탕 + 옅은 밑줄 */
.popup .header{
height:auto;
padding:18px 22px 16px;
background:#fff;
border-bottom:1px solid var(--rn-line);
}
.popup .header h2{
font-size:17px;
font-weight:700;
color:var(--rn-ink);
letter-spacing:-0.4px;
}
/* JS 가 띄우는 시스템 대화상자는 제목이 '메시지' '확인' 같은 껍데기라
바로 아래 본문과 겹쳐 읽힌다. 이런 것만 제목줄을 없앤다.
구분은 폭으로 한다 — drawPopup() 이 만드는 상자는 항상 .w350 이고,
뷰에 직접 쓴 팝업(#popCerti = w600 등)은 진짜 제목이 있어 그대로 남는다.
나중에 w350 짜리 팝업에 진짜 제목을 달 일이 생기면 이 규칙을 손볼 것. */
.popup .container.w350 > .header{
display:none;
}
/* 닫기 X : /resource/admin/img/icon/icon_close1.png 를 불러 쓰고 있었다.
관리자 자산을 상점 화면이 참조하던 것이라 CSS 로 직접 그린다. */
.popup .header .btn-close{
top:0;
right:6px;
width:44px;
height:100%;
background:none;
opacity:.55;
transition:opacity .15s;
}
.popup .header .btn-close:hover{
opacity:1;
}
.popup .header .btn-close:before,
.popup .header .btn-close:after{
content:"";
position:absolute;
left:50%;
top:50%;
width:16px;
height:2px;
margin:-1px 0 0 -8px;
background:var(--rn-ink);
border-radius:2px;
}
.popup .header .btn-close:before{ transform:rotate(45deg); }
.popup .header .btn-close:after { transform:rotate(-45deg); }
/* 본문 */
.popup .contents{
padding:32px 24px 22px;
color:var(--rn-ink);
font-size:15px;
line-height:1.6;
letter-spacing:-0.2px;
}
.popup .container.w350 .contents{
padding:34px 24px 22px;
}
/* 아이콘 : 30px 회색 글자 하나로 떠 있던 것을 동그란 배지로 */
.popup .contents .user-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
margin-bottom:14px;
border-radius:50%;
background:var(--rn-point-weak);
color:var(--rn-strong);
font-size:26px;
}
/* 버튼줄 */
.popup .btn-wrap{
display:flex;
gap:8px;
justify-content:center;
padding:0 22px 24px;
}
.popup .btn-wrap button + button,
.popup .btn-wrap a + a,
.popup .btn-wrap button + a,
.popup .btn-wrap a + button{
margin-left:0; /* gap 을 쓰므로 hook.css 의 margin-left:10px 는 끈다 */
}
/* 작은 대화상자(alert/confirm/login)는 버튼이 폭을 나눠 갖는 편이
누르기 쉽다. 확인 하나뿐이면 꽉 찬 버튼이 된다. */
.popup .container.w350 .btn-wrap .btn-m{
flex:1 1 0;
min-width:0;
}
.popup .btn-wrap .btn-m{
height:46px;
line-height:44px; /* 위아래 테두리 1px 씩 */
padding:0 18px;
border-radius:var(--rn-radius);
font-size:15px;
font-weight:600;
letter-spacing:-0.3px;
transition:background-color .15s, border-color .15s, color .15s;
}
/* btn-type6 = 주버튼(확인·로그인·결제하기), btn-type1 = 보조(취소·닫기) */
.popup .btn-wrap .btn-type6{
background:var(--rn-strong);
border:1px solid var(--rn-strong);
color:#fff;
}
.popup .btn-wrap .btn-type6:hover{
background:var(--rn-strong-2);
border-color:var(--rn-strong-2);
}
.popup .btn-wrap .btn-type1{
background:#fff;
border:1px solid var(--rn-line);
color:var(--rn-ink-2);
}
.popup .btn-wrap .btn-type1:hover{
background:var(--rn-bg-soft);
}
/* drawPopup() 이 .btnFocus 에 focus() 를 준다. 그 자리가 보이게 테두리를 남긴다.
(:focus-visible 로 두면 스크립트가 준 포커스는 표시가 안 된다) */
.popup .btn-wrap .btn-m:focus{
outline:2px solid var(--rn-link);
outline-offset:2px;
}
/* =========================================================================
17. 리뉴얼 후속 정리 — 잰 값으로 확인한 것들만
========================================================================= */
/* -------------------------------------------------------------------------
17-1. 슬라이드 첫 상품의 왼쪽 테두리가 잘리던 것
.swiper-container 는 overflow:hidden 인데, 첫 카드의 왼쪽 1px 테두리가
컨테이너의 자르는 경계와 정확히 같은 자리에 있었다(잰 값: 컨테이너 x=0,
첫 슬라이드 x=0, 카드 border-left 1px). 그래서 첫 칸만 테두리가 없어 보였다.
좌우로 1px 씩만 비켜 준다.
Swiper 는 초기화할 때 컨테이너 안쪽 너비로 칸을 계산한다. CSS 가 먼저
적용되므로 칸 수와 간격은 그대로다(잰 값: 칸 220px, 간격 24px 유지).
.slider-recent 는 뷰에 padding 이 인라인으로 박혀 있어 여기서 빼 둔다.
------------------------------------------------------------------------- */
.swiper-container.slider-product,
.swiper-container.slider-product-auto,
.swiper-container.slider-product-rel{
padding:1px;
}
/* -------------------------------------------------------------------------
17-2. 로그인 아래 두 버튼이 붙어 있던 것
member.css 가 .btn_login_pass / .btn_login_join 에 width:220px 을 못박아
뒀는데, 칸(li)은 50% = 214.5px 이다. 버튼이 칸을 넘어 옆 칸을 침범해서
둘이 붙어 보였다(잰 값: 왼쪽 버튼 391~611, 오른쪽 칸 시작 595 — 16px 겹침).
칸에 맞춰 늘어나게 한다.
------------------------------------------------------------------------- */
#wrap .c_login .c_btnbox .btn_login_pass,
#wrap .c_login .c_btnbox .btn_login_join{
width:100%;
}
/* -------------------------------------------------------------------------
17-3. 회원가입 폼 : 인풋 옆 버튼 높이가 안 맞던 것
입력칸을 30 -> 40px 로 올렸는데(13번), 옆에 붙는 버튼들은
.c_btn.md (30px) 그대로여서 한 줄 안에서 어긋났다.
주소검색 / 인증번호 발송 / 중복체크 / 아이디 중복체크가 모두 이것이다.
회원 화면 안에서만 40px 로 맞춘다(다른 화면의 .c_btn 치수는 안 건드린다).
------------------------------------------------------------------------- */
#wrap .c_member .c_form .c_btn.sm,
#wrap .c_member .c_form .c_btn.md,
#wrap .c_member .c_form .c_btn.lg{
height:40px;
line-height:38px; /* 위아래 테두리 1px 씩 */
padding:0 16px;
font-size:13px !important; /* .c_btn.md 의 12px !important 를 이겨야 한다 */
letter-spacing:-0.2px;
}
/* .light 는 '보조 버튼'인데 글자색이 --rn-ink-3 이라 눌러야 할 버튼치고 너무 흐렸다 */
#wrap .c_btn.light{
color:var(--rn-ink-2);
}
#wrap .c_btn.light:hover{
background:var(--rn-bg-soft);
border-color:var(--rn-ink-3);
color:var(--rn-ink);
}
/* 인풋 옆에 붙는 안내문('제품 수령 받는 주소')도 40px 줄에 맞춘다 */
#wrap .c_member .c_form .input_box .if_beside{
margin-top:11px !important;
}
/* -------------------------------------------------------------------------
17-4. 첨부파일 : 브라우저 기본 파일선택 그대로여서 옆 인풋과 따로 놀았다
------------------------------------------------------------------------- */
#wrap .c_member .c_form .input_photo{
height:40px;
max-width:100%;
padding:0 10px;
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
background:#fff;
color:var(--rn-ink-2);
font-size:13px;
line-height:38px;
box-sizing:border-box;
}
#wrap .c_member .c_form .input_photo:focus{
border-color:var(--rn-link);
box-shadow:0 0 0 3px var(--rn-point-weak);
outline:0;
}
/* '파일 선택' 버튼 부분. 표준(::file-selector-button)과 구형 웹킷 둘 다 건다 */
#wrap .c_member .c_form .input_photo::-webkit-file-upload-button{
height:28px;
margin:0 10px 0 0;
padding:0 12px;
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
background:var(--rn-bg-soft);
color:var(--rn-ink-2);
font-size:13px;
cursor:pointer;
}
#wrap .c_member .c_form .input_photo::file-selector-button{
height:28px;
margin:0 10px 0 0;
padding:0 12px;
border:1px solid var(--rn-line);
border-radius:var(--rn-radius-sm);
background:var(--rn-bg-soft);
color:var(--rn-ink-2);
font-size:13px;
cursor:pointer;
}
#wrap .c_member .c_form .input_photo::-webkit-file-upload-button:hover{
background:#fff;
border-color:var(--rn-ink-3);
}
#wrap .c_member .c_form .input_photo::file-selector-button:hover{
background:#fff;
border-color:var(--rn-ink-3);
}
/* -------------------------------------------------------------------------
17-5. 회원유형 선택(사업자 회원 / 비사업자 회원)
common.css 에 청록(#0ab39c)이 직접 박혀 있어 테마와 따로 놀았다.
다른 화면과 같은 규칙으로 : 고른 쪽은 채움, 안 고른 쪽은 테두리.
------------------------------------------------------------------------- */
#wrap .type-button-group .btn-status{
width:auto;
min-width:104px;
height:40px;
padding:0 16px;
border:1px solid var(--rn-line);
border-radius:var(--rn-radius);
background:#fff;
color:var(--rn-ink-2);
font-size:14px;
font-weight:600;
letter-spacing:-0.2px;
transition:background-color .15s, border-color .15s, color .15s;
}
#wrap .type-button-group .btn-check + .btn.btn-status:hover{
border-color:var(--rn-strong);
color:var(--rn-strong);
}
#wrap .type-button-group .btn-check:checked + .btn.btn-status{
background:var(--rn-strong);
border-color:var(--rn-strong);
color:#fff;
}