LogoLogo
NHN커머스 메인개발자센터
  • 운영 가이드
    • 고도몰 시작하기
      • 관리자 화면 이해하기
      • 쇼핑몰 기본정보 입력하기
      • 도메인 등록 및 연결하기
      • 결제수단 연결하기
      • 배송비 조건 등록
      • 회원에 대한 조건 입력하기
      • 쇼핑몰 약관, 이용안내 입력하기
    • 기본 디자인 알아보기
      • 쇼핑몰 기본 꾸미기
        • 스킨 꾸미기
          • 메인 꾸미기
          • 상품 페이지 꾸미기
          • 검색 페이지 꾸미기
      • 디자인 관리
        • PC
        • 모바일
      • 배너 및 팝업창 관리
        • PC
        • 모바일
      • 쇼핑몰에 영상 추가하기
        • 앱 신청하기
        • 영상 업로드하기
        • 영상 추가하기
          • 메인 비쥬얼
          • 배너
      • 디자인 향상시키기
      • 무료스킨 디자인 수정 가이드
        • 🆙마이그릭(Mygreek)
          • 🖥️Mygreek_PC 스킨 가이드
          • 📱Mygreek_Mobile 스킨 가이드
        • 🆙바람숲(BaRamSoop)
          • 🖥️BaRamSoop_PC 스킨 가이드
          • 📱BaRamSoop_Mobile 스킨 가이드
        • 🆙위유위(Weyouwe)
          • 🖥️Weyouwe_PC 스킨 가이드
          • 📱Weyouwe_Mobile 스킨 가이드
        • 🆙소나루(Sonaru)
          • 🖥️Sonaru_PC 스킨 가이드
          • 📱Sonaru_Mobile 스킨 가이드
        • 🆙메이트앤코(Mate&Co)
          • 🖥️Mate&Co_PC 스킨 가이드
          • 📱Mate&Co_Mobile 스킨 가이드
        • 🆙퍼피레드(Puppyred)
          • 🖥️Puppyred_PC 스킨 가이드
          • 📱Puppyred_Mobile 스킨 가이드
        • 🆙글랜스(Glance)
          • 🖥️Glance_PC 스킨 가이드
          • 📱Glance_Mobile 스킨 가이드
        • 🆙케이스(Case)
          • 🖥️Case_PC 스킨 가이드
          • 📱Case_Mobile 스킨 가이드
        • 🆙아뜰리에(Atelier)
          • 🖥️Atelier_PC 스킨 가이드
          • 📱Atelier_Mobile 스킨 가이드
        • 🆙매치포인트(Matchpoint)
          • 🖥️Matchpoint_PC 스킨 가이드
          • 📱Matchpoint_Mobile 스킨 가이드
        • 🆙홍삶(Honglife)
          • 🖥️Honglife_PC 스킨 가이드
          • 📱Honglife_Mobile 스킨 가이드
        • 🆙베르데(Verde)
          • 🖥️Verde_PC 스킨 가이드
          • 📱Verde_Mobile 스킨 가이드
        • 🆙뽀끼(Bbokki)
          • 🖥️Bbokki_PC 스킨 가이드
          • 📱Bbokki_Mobile 스킨 가이드
        • 🆙쉐프초이스(Chef's Choice)
          • 🖥️Chef's Choice_PC 스킨 가이드
          • 📱Chef's Choice_Mobile 스킨 가이드
        • 🆙마카룸(Macaroom)
          • 🖥️Macaroom_PC 스킨 가이드
          • 📱Macaroom_Mobile 스킨 가이드
        • 🆙블리스(Bliss)
          • 🖥️Bliss_PC 스킨 가이드
          • 📱Bliss_Mobile 스킨 가이드
        • 🆙로스트리브(Roastrive)
          • 🖥️Roastrive_PC 스킨 가이드
          • 📱Roastrive_Mobile 스킨 가이드
        • 🆙띵(tting)
          • 🖥️tting_PC 스킨 가이드
          • 📱tting_Mobile 스킨 가이드
        • 🆙비키(Biki)
          • 🖥️Biki_PC 스킨 가이드
          • 📱Biki_Mobile 스킨 가이드
        • 🆙하나노떼(Hahanotte)
          • 🖥️Hahanotte_PC 스킨 가이드
          • 📱Hahanotte_Mobile 스킨 가이드
        • 🆙밥도둑
        • 🆙마이 플랜트(My Plant)
        • 🆙어반(URBAN)
        • 🆙어라운드(AROUND)
        • 럭스(Luxe)
        • 벤세르(VENCER)
        • 트렌디(TRENDY)
        • 해피애니멀(Happy Animall)
        • 니모(NIMO)
        • 클레마티스(clematis)
        • 어썸(Awesome)
        • 마임(MIME)
          • 🖥️MIME_PC 스킨 가이드
          • 📱MIME_Mobile 스킨 가이드
        • 투에이엠(2AM)
          • 🖥️2AM_PC 스킨 가이드
          • 📱2AM_Mobile 스킨 가이드
        • 해피키즈(Happy Kids)
          • 🖥️Happy Kids_PC 스킨 가이드
          • 📱Happy Kids_Mobile 스킨 가이드
        • 더 리빙(THE LIVING)
          • 🖥️THE LIVING_PC 스킨 가이드
          • 📱THE LIVING_Mobile 스킨 가이드
        • 퓨어(PURE)
          • 🖥️PURE_PC 스킨 가이드
          • 📱PURE_Mobile 스킨 가이드
        • 프레쉬(FRESH#)
          • 🖥️Fresh#_PC 스킨 가이드
          • 📱Fresh#_Mobile 스킨 가이드
        • 모먼트(Moment)
          • 🖥️Moment_PC 스킨 가이드
          • 📱Moment_Mobile 스킨 가이드
        • 스토리지(Storyg)
          • 🖥️Storyg_PC 스킨 가이드
          • 📱Storyg_Mobile 스킨 가이드
    • 상품 기본 관리
      • 상품 등록하기
      • 상품 진열하기
    • 주문/배송처리 알아보기
      • 주문/배송처리 과정 및 정책
    • 검색엔진 등록하기
      • 네이버 사이트 등록하기
      • 구글 사이트 등록하기
  • FAQ
    • 쇼핑몰 운영
      • 쇼핑몰 연장/복구
      • 쇼핑몰 해지
      • 소유권 이전
      • 트래픽
      • 디스크(스토리지) 용량 추가
      • 도메인 관리
        • 네임 서버
      • 패치&업그레이드
        • [23.12.06] 에디터 보안패치 이슈 케이스
        • [24.02.21] 상품등록/수정 성능(속도) 개선 건 패치 범위 안내
          • 자주 묻는 질문(FAQ)
      • 전자결제서비스
      • 이벤트 모니터링
      • 디자인센터
      • 튜닝센터
      • 쇼핑몰 기본정보
      • 부가서비스
    • 어드민 기능
      • 기본설정
        • 기본정책
        • 관리정책
        • 배송정책
        • 주문정책
        • 결제정책
        • 본인확인 인증서비스
        • 해외상점
        • 보안서버 관리
      • 상품관리
        • 상품 분류 관리
        • 상품 노출 형태 관리
      • 주문/배송
        • 주문관리
        • 취소/교환/반품/환불
        • 현금영수증
        • 세금계산서
        • 택배연동 서비스
        • 자동입금확인 서비스
      • 회원
        • 회원관리
        • 마일리지/예치금
        • 메일관리
        • SMS 관리
        • 간편로그인
          • 페이코 로그인 설정
          • 네이버 로그인 설정
          • 카카오 로그인 설정
          • 위메프 로그인 설정
        • 카카오 알림톡
        • CRM 그룹 관리
      • 게시판
      • 프로모션
        • 쿠폰관리
        • 페이퍼 쿠폰관리
        • 타임세일
        • SNS 관리
      • 디자인
        • 디자인 설정
        • 배너 관리
        • 팝업창 관리
      • 공급사
    • 신규창업
    • 쇼핑몰 이전
    • 커머스 회원/결제
  • 고도몰 성장 지원
  • 클래스
  • 고도몰 매뉴얼
  • NHN커머스 도움말
Powered by GitBook
LogoLogo

NHN COMMERCE

  • 공지사항
  • 회사소개

Partners

  • 서비스 제휴문의
  • 셀러어드민
  • 디자인 파트너

Developers

  • 스토어

©NHN COMMERCE Corp. All rights reserved.

On this page

Was this helpful?

  1. 운영 가이드
  2. 기본 디자인 알아보기
  3. 무료스킨 디자인 수정 가이드
  4. 매치포인트(Matchpoint)

Matchpoint_Mobile 스킨 가이드

PreviousMatchpoint_PC 스킨 가이드Next홍삶(Honglife)

Last updated 5 months ago

Was this helpful?

공통

컬러 코드 변경하기
  1. Matchpoint 스킨에 적용되어 있는 기본 컬러 코드는 #FF5C00이다.

  2. [관리자 > 모바일샵 > 디자인 스킨 리스트] 메뉴에 접속한다.

  3. 스타일시트/CSS 변경

    • 좌측 하단 폴더 트리 내 [스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다.

    • common.css를 더블 클릭하여 gd_common.css 파일을 연다.

  4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다.

:root {
    --primary-default: #ff5c00;
    --primary-hover: #ff3700;
    --secondary-default: #ff5810;
    --gray: #ededed;
    --black: #000;
    --font-size: 12px;
    --font-family: 'Pretendard variable';
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;
}
GNB(상단 공통) 스타일 변경하기

파일명 : css/gd_layout.css

  1. 상단 레이아웃의 스타일을 변경할 수 있다.


#header_wrap header .header_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid #000;
    height: 62px;
}
  1. 햄버거 메뉴 아이콘을 변경할 수 있다.

#header_wrap header .header_box .side_menu span {
    display: inline-block;
    width: 20px;
    height: 15px;
    font-size: 0;
    background: url(../img/icon/icon_menu.png) no-repeat center;
    background-size: 100%;
    vertical-align: top;
}
  1. 검색 아이콘을 변경할 수 있다.

#header_wrap header .header_box .top_search span {
    display: inline-block;
    width: 18px;
    height: 17px;
    font-size: 0;
    background: url(../img/icon/icon_search.png) no-repeat center;
    background-size: 100%;
    vertical-align: top;
}
  1. 마이페이지 아이콘을 변경할 수 있다.

#header_wrap header .header_box .mypage span {
    display: inline-block;
    width: 21px;
    height: 21px;
    font-size: 0;
    background: url(../img/icon/icon_mypage.png) no-repeat center;
    background-size: 100%;
    vertical-align: top;
}
  1. 장바구니 아이콘을 변경할 수 있다.

/* 장바구니 아이콘 */
#header_wrap header .header_box .cart span {
    display: inline-block;
    width: 20px;
    height: 21px;
    font-size: 0;
    background: url(../img/icon/icon_cart.png) no-repeat center;
    background-size: 100%;
    vertical-align: top;
}

/* 장바구니 수량 정보 */
#header_wrap header .header_box .cart_count {
    position: absolute;
    top: 8px;
    right: 0;
    display: block;
    padding: 0px 4px;
    line-height: 15px;
    border-radius: 100%;
    color: #fff;
    background: var(--primary-default);
    vertical-align: middle;
    font-size: 10px;
}
사이드 메뉴 스타일 변경하기

파일명 : css/gd_layout.css

  1. 언어 타이틀 스타일을 수정할 수 있다.

.nav_language .tit {
    display: table-cell;
    width: 30%;
    font-size: 15px;
    padding: 13px 15px 13px 15px;
    color: #262626;
    font-weight: bold;
    box-sizing: border-box;
}
  1. [Q&A], [최근본상품], [찜리스트] 아이콘과 텍스트 스타일을 변경할 수 있다.

/* 텍스트 */
.nav_link ul li a {
    display: block;
    padding: 36px 0 0 0;
    font-size: 13px;
    color: #888;
}

/* Q&A */
.nav_link ul li:nth-child(1) a {
    background: url(../img/icon/icon_qna.svg) no-repeat center 3px;
    background-size: 33px 30px;
}

/* 최근본상품 */
.nav_link ul li:nth-child(2) a {
    background: url(../img/icon/icon_prd_latest.svg) no-repeat center 4px;
    background-size: 33px 30px;
}

/* 찜리스트 */
.nav_link ul li:nth-child(3) a {
    background: url(../img/icon/icon_lnb_heart.svg) no-repeat center 4px;
    background-size: 33px 30px;
}
  1. [카테고리], [브랜드] 버튼의 스타일을 변경할 수 있다.

/* 버튼 기본 스타일 */
.nav_tabmenu_box .nav_tabmenu li span {
    display: block;
    padding: 10px 0 10px 0;
    background: #e8e8e8;
    color: #acacac;
}

/* 활성화된 상태일 때 */
.nav_tabmenu_box .nav_tabmenu li.on span {
    background: var(--primary-default);
    color: #fff;
    font-weight: bold;
}
  1. 카테고리 트리 메뉴 아이템의 스타일을 변경할 수 있다.

.category_side > li a {
    position: relative;
    display: block;
    padding: 12px 0 12px 0;
    font-size: 16px;
    color: #262626;
}
  1. [커뮤니티] 타이틀과 공통 게시판 링크 스타일을 변경할 수 있다.

/* 커뮤니티 타이틀 */
.nav_community_box .comm_tit {
    padding: 10px 0 10px 10px;
    margin: 0 10px 0 6px;
    font-size: 18px;
    color: #272727;
    font-weight: bold;
    border-bottom: 0px solid #000000;
}

/* 공통 게시판 링크 */
.nav_community_box .board_cate li a {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    color: #1c1c1c;
}
  1. 사이드 메뉴 닫기 버튼의 스타일을 지정할 수 있다.

#wrap nav .left_close {
    position: fixed;
    top: 20px;
    left: 310px;
    width: 29px;
    height: 29px;
    background: url(../img/icon/icon_left_x.png) no-repeat center;
    background-size: 100%;
    z-index: 1002;
}
푸터(하단 공통) 스타일 변경하기

파일명 : css/gd_layout.css

  1. 푸터 메뉴의 스타일을 변경할 수 있다.

#footer footer .ft_menu li a {
    display: block;
    font-size: 12px;
    font-weight: 700;
}
  1. [고객센터], [은행계좌 안내] 타이틀의 스타일을 변경할 수 있다.

.main_info dl dt > span {
    font-weight: 700;
    font-size: 12px;
}
  1. 푸터 정보 영역과 카피라이트 텍스트의 스타일을 변경할 수 있습니다.

/* 푸터 정보 */
#footer footer .ft_info2_box .ft_address {
    padding: 0px;
    text-align: left;
    font-size: 12px;
    word-break: keep-all;
}

/* 카피라이트 */
#footer footer .ft_copy {
    font-size: 9px;
    text-align: left;
    font-style: normal;
    margin-block: 24px;
}

메인

상품 진열 타이틀 변경하기

  1. 상품 진열 타이틀의 스타일을 수정할 수 있다.

/* css/proc/proc.css */
._goods_display_main h3 {
    position: relative;
    display: block;
    padding: 40px 0px 0px 16px;
    font-size: 32px;
    color: #181818;
    text-align: left;
    font-weight: 400;
}
  1. 더보기 버튼 스타일을 수정할 수 있다.

/* 하단 더보기 버튼 */
.main_more_btn {
    display: block;
    width: calc(100%);
    padding: 12px 8px;
    margin: 0 auto;
    text-align: center;
    background: #000;
    font-size: 14px;
    /* border: 1px solid #9f9f9f; */
    color: #fff;
    box-sizing: border-box;
}

/* 상단 더보기 버튼 */
.main_more_btn2 {
    display: block;
    width: 70px;
    padding: 2px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #9e9e9e;
    box-sizing: border-box;
    position: absolute;
    top: 48px;
    right: 0px;
}

상품 상세

상품 정보 스타일 변경하기

파일명 : css/goods/goods.css

  1. 브랜드 스타일을 변경할 수 있다.

.goods_view .detail_info .detail_info_top .brand {
    padding: 0 0 2px 0;
    color: #666;
    font-size: 13px;
}
  1. 상품명 스타일을 변경할 수 있다.

.goods_view .detail_info h3 {
    font-size: 18px;
    color: #333333;
    word-break: break-all;
}
  1. 가격 정보 스타일을 변경할 수 있다.

.goods_view .detail_info .detail_info_top .price_box .price {
    font-size: 20px;
    color: #333333;
}
  1. [공유하기], [찜하기] 버튼 스타일을 수정할 수 있다.


/* 공유하기 버튼 */
.goods_view .share_btn_box ul li.d_share button {
    padding-left: 25px;
    background: url(../../img/icon/icon_share.png) no-repeat left center;
    background-size: 19px;
}

/* 찜하기 버튼 */
.goods_view .share_btn_box ul li.d_wish button {
    padding-left: 25px;
    background: url(../../img/icon/icon_heart.png) no-repeat left center;
    background-size: 19px;
}
상품 상세 - 탭 메뉴 스타일 변경하기

파일명 : css/goods/goods.css 탭 메뉴 박스 스타일을 수정할 수 있다.

.goods_view .detail_btm_tab_menu_box {
    position: relative;
    width: 100%;
    height: 60px;
    border-top: 10px solid #f9f9f9;
    border-bottom: 1px solid #e2e2e2;
    box-sizing: border-box;
}

/* 탭이 선택되어졌을 때 */
.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li.selected {
    padding: 1px 0 0 0;
    height: 49px;
    border-bottom: 2px solid #000;
}
상품 상세 - 기본 정보 탭 컨텐츠 스타일 변경하기

파일명 : css/goods/goods.css 서브 타이틀과 디스크립션의 스타일을 수정할 수 있다.

/* 서브 타이틀 */
.openblock_content dl dt {
    padding: 5px 5px 5px 5px;
    white-space: normal;
    font-weight: bold;
    color: #111111;
}

/* 디스크립션 */
.openblock_content dl dd {
    padding: 5px 5px 5px 5px;
    color: #555555;
    vertical-align: top;
}
상품 상세 - 상품후기 탭 컨텐츠 스타일 변경하기

파일명 : css/goods/goods.css

  1. 평가, 리뷰수 정보의 스타일을 변경할 수 있다.

/* 평가, 리뷰수 라벨 */
.plus_review_container .plus_review_top_box dl dt {
    display: table-cell;
    font-size: 13px;
    color: #606060;
    vertical-align: middle;
}

/* 평가수, 리뷰수 숫자 */
.plus_review_container .plus_review_top_box dl dd {
    display: table-cell;
    padding-inline: 4px 8px;
    font-weight: bold;
    font-size: 14px;
    color: var(--primary-default);
    vertical-align: middle;
}
  1. 플러스 리뷰 > [리뷰등록], [나와 비슷한 리뷰 보기] 버튼 스타일을 변경할 수 있다.

/* css/gd_plus_review.css */

/* 리뷰 등록 버튼 */
.plus_reivew_write_btn {
    display: inline-block;
    width: 80px;
    margin: 0 10px 0 0;
    padding: 4px 0 4px 0;
    text-align: center;
    background: #3e3d3c;
    border: 1px solid #3e3d3c;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
}

/* 나와 비슷한 리뷰 보기 버튼 */
.plus_review_add_search > a {
    font-size: 13px;
    font-weight: bold;
    color: #000;
    line-height: 38px;
    text-align: center;
    display: block;
    border: #e2e2e2 1px solid;
    background: #fff;
}
  1. [후기 작성], [더보기 n/n] 버튼 스타일을 변경할 수 있다.

/* css/gd_button.css */

/* 후기 작성 버튼 */
.detail_write_btn {
    display: inline-block;
    width: 100%;
    padding: 10px 0 10px 0;
    text-align: center;
    color: var(--primary-default);
    font-size: 15px;
    font-weight: bold;
    background: #ffffff;
    border: 1px solid var(--primary-default);
    box-sizing: border-box;
}

/* 더보기 n/n 버튼 */
.detail_more_btn {
    display: inline-block;
    width: 100%;
    padding: 10px 0 10px 0;
    text-align: center;
    color: #494949;
    font-size: 15px;
    background: #ffffff;
    border: 1px solid #9f9f9f;
    font-weight: bold;
}

주문 결제

장바구니 페이지 스타일 변경하기
  1. 장바구니 목록에서 삭제 버튼의 스타일을 수정할 수 있다.

/* css/gd_button.css */
.cart_onedel_btn {
    width: 24px;
    height: 24px;
    font-size: 0;
    background: url(../img/icon/icon_x3.png) no-repeat center;
    background-size: 12px 12px;
    border: none;
}
  1. 상품명, 주문수량, 가격정보 등의 스타일을 수정할 수 있다.

/* css/order/order.css */

/* 텍스트 일반 */
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p {
    font-size: 12px;
    line-height: 16px;
    color: #9d9d9d;
}

/* 상품명 */
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p.name {
    padding: 0 0 3px 0;
    font-weight: bold;
    color: #333;
}

/* 가격 */
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody .prc {
    display: block;
    padding: 10px 0 0 0;
    font-size: 15px;
    color: #000;
    font-weight: bold;
}
  1. 결제 금액 정보에 대한 스타일을 변경할 수 있다.

/* css/order/order.css */

/* 항목 타이틀 */
.cart .my_buy dl dt {
    display: table-cell;
    width: 50%;
    font-size: 13px;
    color: #5e5e5e;
}

/* 항목에 대한 값 */
.cart .my_buy dl dd {
    display: table-cell;
    width: 50%;
    text-align: right;
    font-size: 15px;
    color: #5e5e5e;
}

/* 총 합계 금액 */
.cart .my_buy dl.total dd {
    color: #000;
    font-size: 17px;
}
  1. [선택상품 삭제], [선택상품 주문], [전체주문] 버튼의 스타일을 수정할 수 있다.

/* css/gd_button.css */

/* 선택상품 삭제, 선택상품 주문 버튼 */
.cart_select_order_btn,
.cart_select_del_btn {
    display: inline-block;
    width: 100%;
    padding: 10px 0 10px 0;
    text-align: center;
    background: #ffffff;
    border: 1px solid #9f9f9f;
    color: #494949;
    font-weight: bold;
    box-sizing: border-box;
    font-size: 14px;
}

/* 전체주문 버튼 */
.cart_all_order_btn {
    display: inline-block;
    width: 100%;
    padding: 10px 0 10px 0;
    text-align: center;
    background: var(--primary-default);
    border: 1px solid var(--primary-default);
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
    font-size: 14px;
}
주문서 페이지 스타일 변경하기
  1. 서브 타이틀의 스타일을 변경할 수 있다.

/* css/order/order.css */
.order .order_tit {
    border-top: 10px solid #f9f9f9;
    color: #333333;
    font-size: 16px;
    line-height: 36px;
    padding: 20px 16px 0px 16px;
}
  1. 배송정보 버튼바 스타일을 변경할 수 있다.

/* css/order/order.css */

/* 버튼 스타일 */
.order .order_box .delivery_box .tab_menu ul li {
    display: table-cell;
    width: 33.3%;
    border: 1px solid #c7c7c7;
    border-left: none;
    background: #ffffff;
    vertical-align: middle;
}

/* 텍스트 스타일 */
.order .order_box .delivery_box .tab_menu ul li a {
    display: block;
    padding: 10px 7px;
    color: #333333;
    text-align: center;
    border-left: none;
    box-sizing: border-box;
}

/* 선택되었을 때 버튼 스타일 */
.order .order_box .delivery_box .tab_menu ul li.active {
    background: #000;
}
/* 선택되었을때 텍스트 스타일 */
.order .order_box .delivery_box .tab_menu ul li.active a {
    color: #fff;
    font-weight: bold;
}
  1. [우편번호], [쿠폰 조회 및 적용], [결제하기] 버튼 스타일을 수정할 수 있다.

/* css/gd_button.css */

/* 우편번호 버튼 */
.zipcode_btn1 {
    display: inline-block;
    width: 100%;
    padding: 5px 0 6px 0;
    text-align: center;
    background: var(--primary-default);
    border: 1px solid var(--primary-default);
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
}

/* 쿠폰 조회 및 적용 버튼 */
.coupon_search_apply_btn {
    display: inline-block;
    padding: 5px 10px 5px 10px;
    text-align: center;
    background: var(--primary-default);
    border: 1px solid var(--primary-default);
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
}

/* 결제하기 버튼 */
.order_payment_btn {
    display: inline-block;
    width: 100%;
    padding: 10px 0 10px 0;
    font-size: 14px;
    text-align: center;
    background: var(--primary-default);
    border: 1px solid var(--primary-default);
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
}

🆙
📱
상품상세페이지
상품상세-탭메뉴
상품진열1
상품상세-기본정보탭메뉴
푸터-하단 공통
상품상세-상품후기탭메뉴
장바구니페이지
주문서페이지
사이드 메뉴
매치포인트-GNB