> For the complete documentation index, see [llms.txt](https://godomall-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://godomall-help.nhn-commerce.com/beginner/design/freeskin/roastrive/pc-guide.md).

# Roastrive\_PC 스킨 가이드

> 공통

<details>

<summary><strong>포인트 컬러 일괄 변경하기</strong></summary>

1. 컬러코드값 확인\
   &#x20;roastrive 스킨에 적용되어 있는 전역변수 --primary-default 컬러코드 **#772614** 를 확인합니다.\
   \
   ![](/files/tk1rWPf6WuZDsxi4OQr9)
2. **관리자 > 디자인 메뉴 접속** &#x20;
3. **스타일시트/CSS 변경** \
   좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 common/common.css 스타일 시트를 오픈합니다.<br>
4. ctrl+F 검색 후 수정하기\
   스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 **#f15546**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
5. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였습니다.\
   원하는 값으로 변경하면 일괄 수정되어 적용됩니다.

   ```css
   :root {
   	--primary-default: #772614;
   	--primary-hover: #450000;
   	--secondary-default: #c52323;
   	--neutrals-default: #f4f0e9;
   	--neutrals-dark: #000;
   	--font-size: 14px;
   	--font-family: 'Pretendard variable';
   	--font-regular: 400;
   	--font-medium: 500;
   	--font-bold: 700;
   	--min-width: 1780px;
   	--max-width: 1920px;
   }
   ```

</details>

<details>

<summary><strong>메뉴 변경하기</strong></summary>

![](/files/6L0sRVqeV4jgx0BkRBxr)\
1\. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경합니다.

**css/layout/layout.css**

```css
.top_member_box > li a {
	display: inline-block;
	padding-left: 40px;
	color: var(--neutrals-dark);
	font-size: 16px;
}
```

2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경합니다. \
   (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.)

**css/layout/layout.css**

```css
.top_member_box > li strong { 
    color:var(--primary-default);
}
```

3. 상단 메뉴 배경색상의 **background(배경)** 값을 변경합니다.&#x20;

**css/main/main.css**&#x20;

```css
#header {
	background: rgba(244, 240, 233, 0.6);
}
```

**css/layout/layout.css**&#x20;

```css
#header {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 999;
	background: rgba(fff,fff,fff, 0.6);
	backdrop-filter: blur(30px);
}
```

4. 전체보기 메뉴의 **background(배경)** 값을 변경합니다.&#x20;

**css/layout/layout.css**

```css
body.is-menu-fixed::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	z-index: 998;
	width: 100%;
	height: 100%;
	background: rgba(248, 245, 240, 0.6);
	backdrop-filter: blur(30px);
}
```

5. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경합니다.&#x20;

**css/layout/layout.css**

```css
.header_gnb .gnb_allmenu_box a,
.header_gnb .gnb_allmenu_box button {
	font-size: 32px;
	font-weight: 300;
	display: inline-block;
	text-align: left;
	max-width: calc(100% - 30px);
	position: relative;
}
```

6. &#x20;선택한 메뉴의 폰트 **color**(색상)값을 변경합니다.&#x20;

**css/layout/layout.css**

```css
.header_gnb .gnb_allmenu_box li.is-open > button {
	color: var(--secondary-default);
}
```

</details>

<details>

<summary><strong>검색창 변경하기</strong></summary>

![](/files/XS0zc8c0mxFd7y8Xf3mT)\
1\. 검색창 인풋박스 사이즈를 변경하려면 **width(너비), height(높이)** 값을 변경합니다.

**css/layout/layout.css**

```css
.top_search .top_text_cont .top_srarch_text {
	display: block;
	width: 358px;
	height: 40px;
	background: none;
	box-sizing: border-box;
	-moz-transition: all 0.35s;
	-webkit-transition: all 0.35s;
}
```

2\. 최근검색어 폰트의 **font-size(크기) , font-weight(굵기)** 값을 변경합니다. \
**css/layout/layout.css**

```css
.recent_box dt {
	font-size: 13px;
	margin-bottom: 10px;
	font-weight: var(--font-bold);
}
```

3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경합니다.&#x20;

**css/layout/layout.css**

```css
.recom_box dt {
	width: 100%;
	font-size: 13px;
	font-weight: var(--font-bold);
	line-height: 19px;
	text-align: center;
	margin-bottom: 10px;
}
```

</details>

<details>

<summary><strong>하단 영역 변경하기 (폰트/컬러)</strong></summary>

![](/files/HneE9Hkp4HYHK7OsQfLG)\
1\. 하단 우측 메뉴 폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**css/layout/layout.css**

```css
.content_list h3 {
	font-size: var(--font-size);
	margin-bottom: 12px;
}

.content_list ul li a {
	font-size: 12px;
	line-height: 20px;
}
```

2. 하단 쇼핑몰 회사정보의 **font-size(크기), font-weight(굵기), line-height(행간)** 값을 변경합니다.

**css/layout/layout.css**

```css
.foot_cont_wrap .foot_info {
	font-size: 12px;
	font-style: normal;
	font-weight: var(--font-regular);
	line-height: 20px;
}
```

3. Information 영역의 **font-size(크기), background(구분선색상)**&#xAC12;을 변경합니다.&#x20;

**css/layout/layout.css**

```css
.foot_top h3 {
	display: inline-block;
	font-size: var(--font-size);
}
```

```css
.foot_top h3::after,
.foot_top ul li::after {
	display: inline-block;
	content: '';
	width: 1px;
	background: #000;
	height: 12px;
	position: relative;
	left: 12px;
}
```

</details>

<details>

<summary><strong>웹폰트 적용하기</strong></summary>

1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다.

2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.

![](/files/uDf6SOzCwdFfNp41YvVa)

3\. reset.css 스타일시트의 6번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다.

**스타일시트 > reset.css | css/reset.css**

```css
@@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
@import url('외부 스타일시트 경로');
```

4\.  font-family 값을 변경할 폰트로 수정 또는 추가하여 적용해주세요.\
(한글 폰트 파일명의 경우 " "입력)

**스타일시트 > reset.css | css/reset.css**

```css
body,
th,
td,
input,
select,
textarea,
button {
	font-size: var(--font-size);
	line-height: 1.5;
	font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont,
		system-ui, Roboto, Dotum, '돋움', sans-serif;
	color: #333;
} 
```

<mark style="color:red;">※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.</mark>

</details>

> 메인

<details>

<summary><strong>[우측 스크롤 영역] 최근 본 상품 변경하기</strong></summary>

![](/files/kJFszSQAwiyQg5VpKz2t)\
1\. 최근 본 상품 영역의 **background(배경)** 값을 변경합니다.&#x20;

&#x20;**css/layout/layout.css**

```css
.scroll_right_cont {
	float: left;
	width: 76px;
	padding: 6px 9px 9px 9px;
	background: none;
	color: #fff;
	background: var(--primary-default);
}
```

2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경합니다.&#x20;

&#x20;**css/layout/layout.css**

```css
.scroll_right_cont h4 {
	font-size: var(--font-size);
	font-style: normal;
	font-weight: var(--font-regular);
	line-height: 16px;
	text-transform: uppercase;
}
```

3\. 최근 본 상품 오버시 **border(선), background(배경)** 값을 변경합니다.&#x20;

&#x20;**css/layout/layout.css**

```css
.scroll_right_cont .src_box {
	position: absolute;
	top: -1px;
	right: -1px;
	width: 210px;
	height: 51px;
	padding: 5px 5px 0 7px;
	border: 1px solid #999999;
	background: #fff;
	text-align: left;
	z-index: 10;
	box-sizing: content-box;
}
```

4\. 상품 가격 폰트의 **color(색상)** 값을 변경합니다.&#x20;

&#x20;**css/layout/layout.css**

```css
.scroll_right_cont .src_box strong {
    display: block;
    color: var(--primary-default);
}
```

</details>

<details>

<summary><strong>메인 상품 진열 타이틀 영역 변경하기(폰트/컬러)</strong></summary>

![](/files/GdawYlFGC3AikcahG4fV)

1\. 타이틀 폰트의**font-size(크기)** 값을 변경합니다.&#x20;

**css/goods/list.css**

```css
.goods_list_tit h3 {
	font-size: 40px;
	font-weight: var(--font-regular);
}
```

2\. 상단 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경합니다.&#x20;

**css/goods/list.css**

```css
.btn_goods_more .btn_goods_view_more {
	color: var(--primary-default);
	font-size: 18px;
	font-weight: var(--font-regular);
}

```

</details>

<details>

<summary><strong>상품 리스트 변경하기</strong></summary>

![](/files/Ld1AGMKG0P1Xr8xfHmiM)

1\. 상품명 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경합니다.&#x20;

**css/goods/list.css**

```css
.item_tit_box .item_name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	padding: 0;
	font-size: 16px;
	text-overflow: ellipsis;
	font-weight: normal;
	overflow: hidden;
	line-height: 22px;
}
```

2\. 상품가격 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**css/goods/list.css**

```css
.item_money_box .item_price {
	/*display:block;*/
	padding: 0px;
	font-size: 16px;
	color: var(--neutrals-dark);
	font-weight: var(--font-bold);
}
```

3\. 할인율 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**css/goods/list.css**

```css
.item_number_box {
	color: var(--secondary-default);
	line-height: 18px;
}
```

</details>

> 상품상세

<details>

<summary><strong>상품 상세 상단 변경하기(폰트)</strong></summary>

![](/files/6oLn6WTs51Kwheuiapiu)

1\.  상품명 폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

```css
.item_detail_tit h3 {
	width: 405px;
	font-size: 18px;
	word-break: break-all;
}
```

2\.  상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

```css
.item_detail_list dt {
	float: left;
	width: 80px;
	margin: 0 10px 0 0;
	color: #888888;
	font-weight: normal;
	word-wrap: break-word;
}
```

3\.  상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

```css
.item_price dd {
	margin: -2px 0 0 0;
	font-size: 16px;
	font-weight: var(--font-bold);
}
```

4\.  총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

```css
.item_tatal_box .total_amount dt {
	font-size: 16px;
	font-weight: var(--font-bold);
}
```

5\.  총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

```css
.item_tatal_box .total_amount dd {
	color: var(--primary-default);
	font-weight: var(--font-bold);
}
```

6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

```css
.item_tatal_box .total_amount dd strong {
    font-size: 20px;
}
```

</details>

<details>

<summary><strong>상품 상세 상단 변경하기(버튼)</strong></summary>

![](/files/3ir8RJfwy5crmeLkIIis)

1\.  장바구니, 찜하기 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬)** 값을 변경합니다.&#x20;

**css/button.css**

```css
.btn_add_cart,
.btn_add_wish {
	display: inline-block;
	width: 152px;
	height: 52px;
	margin: 0 0 0 6px;
	padding: 0 10px 0 10px;
	color: #3e3d3c;
	font-size: 16px;
	border: 1px solid #cccccc;
	background: #ffffff;
	text-align: center;
}
```

2\.  바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬)** 값을 변경합니다.&#x20;

**css/button.css**

```css
.btn_add_order,
.btn_add_order_related,
.btn_add_cart_related {
	display: inline-block;
	width: 230px;
	height: 52px;
	margin: 0 0 0 6px;
	padding: 0 10px 0 10px;
	color: #ffffff;
	font-size: 16px;
	border: 1px solid var(--primary-default);
	background: var(--primary-default);
	text-align: center;
}
```

</details>

<details>

<summary><strong>상품 상세 상단 변경하기(라인)</strong></summary>

![](/files/zYRY9LH3JOZtDsbwe1Fq)

1\.   상품명 아래  **border-bottom(선) 값을** 변경합니다.&#x20;

**css/goods/goods.css**

```css
.item_detail_tit {
	position: relative;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #dbdbdb;
}
```

2. 선택한 옵션 영역의  **border-bottom(선) 값을** 변경합니다.&#x20;

**css/layout/layout.css**

```css
.item_detail_list + .item_choice_list table {
	width: 100%;
	border-bottom: 1px solid #999999;
}
```

5. 선택한 옵션영역의 **background(배경)** 값을 변경합니다.

**css/layout/layout.css**

```css
.item_choice_list table {
	width: 100%;
	background: #f5f5f5;
}
```

6. 총 합계금액 구분 영역의 **border-top(선)** 값을 변경합니다.

**css/goods/goods.css**

```css
.item_tatal_box .total_amount {
	margin: 15px 0 0 0;
	padding-top: 10px;
	border-top: 1px solid #dbdbdb;
}
```

</details>

<details>

<summary><strong>상품 상세 탭 변경하기</strong></summary>

![](/files/kldOLtp9G3ELTqfw4ixe)

1. 상품 상세 탭 **color(색상), font-weight(굵기), border(선)** 값을 변경합니다.

**css/goods/goods.css**

```css
.item_goods_tab li a {
	display: block;
	margin: 0 0 0 -1px;
	padding: 10px 0 12px 0;
	color: #999999;
	font-size: var(--font-size);
	border: solid #dadada;
	border-width: 1px 1px 0;
	background: #ffffff;
}
```

2. 상품 상세 선택된 탭 **color(색상), font-weight(굵기), border(선)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

```css
.item_goods_tab li.on a {
	padding-top: 18px;
	margin-top: 8px;
	color: #333333;
	font-weight: var(--font-bold);
	border-bottom: 2px solid #ffffff;
}
```

3\. 상품 상세 상품문의, 상품후기 수량 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

```css
.item_goods_tab li a strong {
	color: var(--primary-default);
}
```

</details>

<details>

<summary><strong>상품 상세 탭 하단영역-변경하기</strong></summary>

![](/files/YqJ0HX8AckMsQHpXySgc)

1\. 탭 하단영역 타이틀 폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

```css
.item_goods_sec h3 {
    padding: 45px 0 10px 0;
    font-size: 18px;
}
```

2\. 상품문의 전체보기, 상품후기 전체보기 버튼의 **color(색상), border(선), background(배경), text-align(정렬)** 값을 변경합니다.&#x20;

**css/button.css**

```css
.btn_reviews_more,
.btn_qna_more {
	display: inline-block;
	min-width: 120px;
	padding: 10px 10px 10px 10px;
	color: #3e3d3c;
	border: 1px solid #cccccc;
	background: #ffffff;
	text-align: center;
}
```

3\. 상품후기 글쓰기, 상품문의 글쓰기 버튼의 **color(색상), border(선), background(배경), text-align(정렬)** 값을 변경합니다.&#x20;

**css/button.css**

```css
.btn_reviews_write,
.btn_qna_write {
	display: inline-block;
	min-width: 120px;
	padding: 10px;
	color: #ffffff;
	border: 1px solid var(--primary-default);
	background: var(--primary-default);
	text-align: center;
}
```

4\. 페이징 선택된 버튼의 **color(색상),  font-weight(굵기)** 값을 변경합니다.&#x20;

**css/common/common.css**

```css
.pagination .on {
	color: #333;
	font-weight: var(--font-bold);
}
```

</details>

<details>

<summary><strong>상품 상세 상품문의, 상품후기 영역-리스트 내용 영역 변경하기</strong></summary>

![](/files/OOJXFbwvpYCBQtODnVSn)

1\.  상품후기 내용 펼침 영역의 **background(배경)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

```css
.reviews_new_box {
	text-align: left;
	background: #f8f8f8;
}
```

2. 상품문의 내용 펼침 영역의 **background(배경)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

```css
.qna_new_box {
	text-align: left;
	background: #f8f8f8;
}
```

</details>

> 주문결제

<details>

<summary><strong>타이틀 영역 변경하기 (장바구니 / 주문서작성/결제 / 주문완료 )</strong></summary>

![](/files/Y95nU2tK7ehhtOD9Fn1y)

1\. 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**css/order/order.css**

```css
.order_wrap .order_tit h2 {
	float: left;
	font-size: 28px;
	color: #222222;
}
```

2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**css/order/order.css**

```css
.order_wrap .order_tit .page_on {
	color: var(--neutrals-dark);
	font-weight: var(--font-bold);
}
```

3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**css/order/order.css**

```css
.order_wrap .order_tit ol li {
	float: left;
	font-size: var(--font-size);
	color: #d1d1d1;
}
```

4\.  타이틀 영역 하단의  **border-bottom(선)** 값을 변경합니다.&#x20;

&#x20;**css/order/order.css**

```css
.order_wrap .order_tit {
	overflow: hidden;
	border-bottom: 1px solid #dbdbdb;
}
```

</details>

<details>

<summary><strong>장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)</strong></summary>

![](/files/jEFYxnwrM6UnyFYdY9oi)

1\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경합니다.

**css/order/order.css**

```css
.price_sum_cont .price_sum_list dd {
    color: var(--neutrals-dark);
}
```

```css
.price_sum_cont .price_sum_list dd strong {
    font-weight:700;
    font-size:18px;
    color: var(--neutrals-dark);
}
```

2\. 선택상품주문 버튼은 마우스 오버 전과 오버 시의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경합니다.

&#x20;**css/button.css**

```css
.btn_order_choice_buy {
	min-width: 190px;
	height: 55px;
	padding: 0 20px 0 20px;
	color: #3e3d3c;
	font-weight: bold;
	font-size: 14px;
	border: 1px solid #cccccc;
	background: #fff;
	cursor: pointer;
}
```

```css
.btn_order_choice_buy:hover {
	color: #333333;
	border: 1px solid #bbbbbb;
}
```

3\. 전체상품주문 버튼은 마우스 오버 전과 오버 시의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경합니다.

**css/button.css**

```css
.btn_order_whole_buy {
	min-width: 190px;
	height: 55px;
	padding: 0 20px 0 20px;
	color: #ffffff;
	font-size: 14px;
	border: 1px solid var(--primary-default);
	background: var(--primary-default);
	cursor: pointer;
	font-weight: bold;
}
```

```css
.btn_order_whole_buy:hover {
	border: 1px solid var(--primary-hover);
	background: var(--primary-hover);
}
```

</details>

<details>

<summary><strong>주문서 작성/결제 화면 변경하기</strong></summary>

**주문서 금액 변경하기**

![](/files/QOEpbunzQIQoq33iWstq)

\- 총 상품금액/배송비/합계 폰트의 **color(색상), font-size(사이즈)** 값을 변경합니다.

&#x20;**css/order/order.css**

```css
.price_sum_cont .price_sum_list dd {
	color: var(--neutrals-dark);
}
```

```css
.price_sum_cont .price_sum_list dd strong {
	font-weight: var(--font-bold);
	font-size: 18px;
	color: var(--neutrals-dark);
}
```

**최종결제금액, 결제하기 버튼 변경하기**

![](/files/ardbUZ10hI1PTcNo27wJ)

1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경합니다.

**css/order/order.css**

```css
.payment_final_total dd {
	display: inline-block;
	font-size: 30px;
	color: var(--primary-default);
}
```

2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경합니다.

**css/button.css**

```css
.btn_order_buy {
	display: inline-block;
	width: 300px;
	height: 61px;
	line-height: 59px;
	color: #fff;
	font-size: 20px;
	border: 1px solid var(--primary-default);
	background: var(--primary-default);
	text-align: center;
}
```

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://godomall-help.nhn-commerce.com/beginner/design/freeskin/roastrive/pc-guide.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.