# PURE\_Mobile 스킨 가이드

> #### 공통

<details>

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

1. 컬러코드값 확인\
   PURE 스킨에 적용되어 있는 기본 컬러 코드 **#ab3e55**을 확인합니다.&#x20;
2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트&#x20;
3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\
   좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\
   \
   ![](/files/UwfCr1dsxySKgl3Sr6ex)<br>
4. ctrl+F 검색 후 수정하기\
   스타일시트 파일을 열어 **Ctrl + F(검색)**&#xB97C; 누르고 **#e38bac**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \
   \
   mypage.css (총 4개) \
   proc.css (총 5개) \
   main.css (총 1개) \
   order.css (총 11개) \
   list\_06.css (총 4개) \
   list\_09.css (총 4개)\
   list\_04.css (총 4개) \
   list\_07.css (총 4개)&#x20;

   list\_01.css (총 4개) \
   list\_11.css (총 7개) \
   list\_02.css (총 4개) \
   gd\_layout.css (총 3개) \
   gd\_button.css (총 160개) \
   gd\_common.css (총 1개)

</details>

<details>

<summary>푸터 변경하기</summary>

![](/files/YlVAfe9kndNVxn3BvLvo)

1. 푸터 메뉴버튼의 **font-size(크기), color(색상), background(배경), border(선)** 값을 변경해줍니다. \
   `변경 위치`  css > gd\_layout.css **136줄**

{% code title="css > gd\_layout.css 136줄" %}

```css
#footer footer .ft_info2_box .ft_menu li a {
    display: block;
    padding: 10px 0;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 3px;
    color: #888888;
    font-size: 13px;
}
```

{% endcode %}

2. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > gd\_layout.css **153줄**

{% code title="css > gd\_layout.css 153줄" %}

```css
#footer footer .ft_info2_box .ft_address {
    padding: 0 50px 0 50px;
    text-align: center;
    font-size: 12px;
    color: #737373;
    word-break: keep-all;
}
```

{% endcode %}

3. 푸터 카피라잇 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경해줍니다. \
   `변경 위치` css > gd\_layout.css **159줄**

{% code title="css > gd\_layout.css 159줄" %}

```css
#footer footer .ft_copy {
padding-bottom: 23px;
    margin: 23px 0 0 0;
    color: #545454;
    font-size: 12px;
    text-align: center;
    font-style: normal;
}
```

{% endcode %}

</details>

<details>

<summary>상단 헤더 영역 변경하기(아이콘/컬러)</summary>

![](/files/mFOP8jRZhzMfMwjcDhEg)

1. GNB영역의 **border-bottom(선)** 값을 변경해줍니다. \
   `변경 위치`  css > gd\_layout.css **15줄**

{% code title="css > gd\_layout.css 15줄" %}

```css
#header_wrap header .header_box {
1px solid #cbcbcb;
}
```

{% endcode %}

2. 장바구니 담긴상품 수량의 배경 **background(배경)** 값을 변경해줍니다. \
   `변경 위치`  css > gd\_layout.css **35줄**

{% code title="css > gd\_layout.css 35줄" %}

```css
#header_wrap header .header_box .cart_count {
    position: absolute;
    top: 30px;
    right: 0;
    display: block;
    padding: 3px 6px 1px 6px;
    line-height: 15px;
    border-radius: 100%;
    color: #fff;
    background: #e38bac;
    vertical-align: middle;
    font-size: 12px;
}
```

{% endcode %}

3. GNB영역의 **font-size(크기), color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > gd\_layout.css **15줄**

{% code title="css > gd\_layout.css 15줄" %}

```css
#header_wrap header .header_box {
    display: block;
    padding: 13px 0 13px 0;
    font-size: 14px;
    color: #333333;
```

{% endcode %}

</details>

> #### 메인

<details>

<summary>고객센터 폰트 변경하기</summary>

![](/files/dksvIP9CdtpgxoZbfumZ)

1. 고객센터 타이틀의 **font-size(크기), font-weight(굵기), border-bottom(선)** 값을 변경해줍니다. \
   `변경 위치` css > main > main.css **52줄**

{% code title="css > main > main.css 52줄" %}

```css
.main .main_info_box .main_info dl dt {
    font-size: 13px;
    margin: 0 5px 0 0;
    font-weight: bold;
    color: #454545;
}
```

{% endcode %}

2. 고객센터 전화번호 **font-size(크기), color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > main > main.css **57줄**

{% code title="css > main > main.css 57줄" %}

```css
.main .main_info dl dd p.phone a {
    font-size: 19px;
    color: #e38bac;
    font-weight: bold;
}
```

{% endcode %}

3. 고객센터 이용시간 **font-size(크기), color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > gd\_reset.css **58줄**

{% code title="css > gd\_reset.css 58줄" %}

```css
.main .main_info dl dd p.business_hours {
    font-size: 11px;
    color: #666;
}
```

{% endcode %}

</details>

<details>

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

![](/files/PX6w1f1eLHUS6F8f4Idi)

1. 상품리스트 이미지의 **border(라인)** 값을 변경해줍니다. \
   `변경 위치`  css > goods > list > list\_01.css **10줄**

{% code title="css > goods > list > list\_01.css 10줄" %}

```css
.goods_prd_item2 .goods_prd_img .img_box .img img {
    width: 100%;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
}
```

{% endcode %}

2. 상품리스트 상품명 폰트의 **color(색상), font-size(크기)** 값을 변경해줍니다. \
   `변경 위치`  css > goods > list > list\_01.css **17줄**

{% code title="css > goods > list > list\_01.css 17줄" %}

```css
.goods_prd_item2 .goods_prd_content .goods_info_list li {
    padding: 1px 0 1px 0;
    word-break: break-all;
    color: #3e3d3c;
    font-size: 14px;
```

{% endcode %}

3. 상품리스트 가격 폰트의 **color(색상)** 값을 변경해줍니다. \
   `변경 위치`  css > goods > list > list\_01.css **30줄**

{% code title="css > goods > list > list\_01.css 30줄" %}

```css
.goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price {
color: #e38bac;
}
```

{% endcode %}

</details>

<details>

<summary>NOTICE 게시판 변경하기</summary>

![](/files/yhAZccG1zYUNScC2nHBS)

1. NOTICE 게시판의 **background(배경), margin(여백)** 값을 변경해줍니다.\
   &#x20;`변경 위치` css > main > main.css **19줄**

{% code title="css > main > main.css 19줄" %}

```css
.main .main_notice .tit {
    min-height: 139px;
    margin: 0 15px;
    padding: 20px 20px 8px 20px;
    background: #ffffff;
}
```

{% endcode %}

2. NOTICE 게시판의 **font-size(크기), fone-weight(굵기), color(색상), border(선)** 값을 변경해줍니다. \
   &#x20;`변경 위치` css > gd\_reset.css **20줄**&#x20;

{% code title="css > gd\_reset.css 20줄" %}

```css
a, img, input, select, textarea {
    display: block;
    width: 100%;
    padding: 0 0 3px 0;
    font-size: 13px;
    font-weight: bold;
    color: #282828;
    text-align: left;
    border-bottom: 2px solid #070707;
}
```

{% endcode %}

3. 게시판 리스트의 폰트 **color(색상)** 값을 변경해줍니다. \
   &#x20;`변경 위치` css > gd\_reset.css **24줄**

{% code title="css > gd\_reset.css 24줄" %}

```css
a, img, input, select, textarea {
    display: block;
    width: 100%;
    color: #7f7f7f;
}
```

{% endcode %}

</details>

<details>

<summary>NOTICE 게시판 변경 - 메인화면에 공지사항 삭제하기</summary>

![](/files/pzNPxgHk0amJaEoe09tb)

✔️ 메인화면에 노출되는 공지사항 영역 첫 줄에 dispaly 값을 **display: none;** 으로 변경합니다.\
&#x20;`변경 위치` css > main > main.css **18줄**

{% code title="css > main > main.css 18줄" %}

```css
.main .main_notice .main_notice_box .tit {
    display: none;
    width: 100%;
    padding: 0 0 3px 0;
    font-size: 13px;
    font-weight: bold;
    color: #282828;
    text-align: left;
    border-bottom: 2px solid #070707;
```

{% endcode %}

</details>

> #### 상품상세

<details>

<summary>상품 상세 - 상품문의 리스트 변경하기</summary>

![](/files/B2DiFulIxAF7358fzpgU)

1. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상),  border-radius(둥근선), border(선)** 값을 변경해줍니다. \
   &#x20;`변경 위치` css > goods > goods.css **24줄**

{% code title="css > goods > goods.css 24줄" %}

```css
.goods_board_qa_list li .item_list_summary .board_left .author_box .ico_ans1 {
    display: block;
    width: calc(100% - 70px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #222222;
    font-weight: bold;
}
```

{% endcode %}

2. 작성자 **font-size(크기), color(색상), line-height(행간)** 값을 변경해줍니다. \
   &#x20;`변경 위치` css > goods > goods.css **29줄**

{% code title="css > goods > goods.css 29줄" %}

```css
.goods_board_qa_list li .item_list_summary .board_left .title a {
    color: #999;
    font-size: 12px;
}
```

{% endcode %}

3. 접수 아이콘 **font-size(크기), color(색상), line-height(행간)** 값을 변경해줍니다. \
   &#x20;`변경 위치` css > goods > goods.css **27줄**

{% code title="css > goods > goods.css 27줄" %}

```css
.goods_board_qa_list li .item_list_summary .board_left .title a {
    display: inline-block;
    padding: 1px 5px 1px 5px;
    font-size: 11px;
    border: 1px solid #9f9f9f;
    color: #494949;
    font-weight: bold;
    box-sizing: border-box;
```

{% endcode %}

</details>

<details>

<summary>상품 상세 - 상품문의 버튼 변경하기</summary>

![](/files/SHGfunLSqxubmk3DWgHh)

✔️상품문의 수정 버튼의  **font-size(크기), color(색상), background(배경)** 값을 변경해줍니다. \
&#x20;`변경 위치` css > goods > goods.css  **283줄**

{% code title="css > goods > goods.css  283줄" %}

```css
.goods_board_view .contents_holder {
display: block;
    width: 100%;
    padding: 8px 0 8px 0;
    text-align: center;
    background: #e38bac;
    border: 1px solid #e38bac;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
    font-size: 15px;
 
}
```

{% endcode %}

</details>

<details>

<summary>상품 상세 타이틀 및 상세 탭 변경하기</summary>

![](/files/Ji9viZ8Wal6RcI8Xn6s1)

1. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경해줍니다. \
   `변경 위치` css > gd\_layout.css **46줄**

{% code title="css > gd\_layout.css 46줄" %}

```css
.sub_top h2 {
overflow: hidden;
    display: block;
    width: 100%;
    padding: 12px 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 20px;
    line-height: 15px;
    text-align: center;
}
```

{% endcode %}

2. info 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경해줍니다. \
   `변경 위치` css > goods > goods.css **387줄**&#x20;

{% code title="css > goods > goods.css 387줄 " %}

```css
.goods_view .detail_tab_info .ly_info li a {
    display: inline-block;
    width: 100%;
    color: #484848;
    font-size: 13px;
    line-height: 13px;
    font-weight: bold;
    text-align: center;
}
```

{% endcode %}

3. info 게시글 등록 수량 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경해줍니다. \
   `변경 위치` css > goods > goods.css **388줄**

{% code title="css > goods > goods.css 388줄" %}

```css
.goods_view .detail_tab_info .ly_info li a {
    display: block;
    padding: 2px 0 0 0;
    font-size: 11px;
    color: #e38bac;
    line-height: 11px;
}
```

{% endcode %}

</details>

<details>

<summary>상품 상세페이지 리스트 영역 변경하기</summary>

![](/files/SpnQhZonmmHstltLp3cq)

1. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > goods > goods.css **339줄**

{% code title="css > goods > goods.css 339줄" %}

```css
.goods_view .detail_info h3 {
    font-size: 18px;
    color: #333333;
}
```

{% endcode %}

2. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > goods > goods.css **346줄**

{% code title="css > goods > goods.css 346줄" %}

```css
.goods_view .detail_info .detail_info_top .price_box .price {
    font-size: 24px;
    color: #333333;
}
```

{% endcode %}

3. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > goods > goods.css **348줄**

{% code title="css > goods > goods.css 348줄" %}

```css
.goods_view .detail_info .detail_info_top .price_box del {
    color: #999999;
}
```

{% endcode %}

4. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > goods > goods.css **361줄**

{% code title="" %}

```css
.goods_view .detail_info .detail_sub_info dl dt {
    display: table-cell;
    width: 25%;
    font-size: 12px;
    color: #888888;
}
```

{% endcode %}

5. 상품 상세페이지 리스트 내용 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > goods > goods.css **362줄**

{% code title="" %}

```css
.goods_view .detail_info .detail_sub_info dl dd {
    display: table-cell;
    width: 75%;
    font-size: 12px;
    color: #333333;
}
```

{% endcode %}

6. 공유하기, 찜하기 버튼의 **font-size(크기), text-align(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경해줍니다. \
   `변경 위치` css > goods > goods.css **331줄**

{% code title="css > goods > goods.css 331줄" %}

```css
.goods_view .share_btn_box ul li button {
    display: block;
    margin: 0 auto;
    padding: 10px 0;
    font-size: 13px;
    text-align: center;
    background: none;
    border: none;
    color: #333333;
    font-weight: bold;
}
```

{% endcode %}

</details>

<details>

<summary>상품 상세 버튼 변경하기</summary>

![](/files/f3Gn0zKZ8Cd7ywByQzCD)

1. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. \
   `변경 위치` css > gd\_button.css **166줄**

{% code title="css > gd\_button.css 166줄" %}

```css
.detail_cart_btn {
    display: block;
    width: 100%;
    padding: 10px 0 10px 0;
    font-size: 16px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #9f9f9f;
    color: #494949;
    font-weight: bold;
    box-sizing: border-box;
}
```

{% endcode %}

2. 바로구매 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. \
   `변경 위치` css > gd\_button.css **168줄**

{% code title="css > gd\_button.css 168줄" %}

```css
.detail_order_btn {
    display: block;
    width: 100%;
    padding: 10px 0 10px 0;
    font-size: 16px;
    text-align: center;
    background: #e38bac;
    border: 1px solid #e38bac;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
}
```

{% endcode %}

</details>

> #### 주문결제

<details>

<summary>주문완료 페이지 변경하기 (사이즈/컬러/배경/테두리)</summary>

![](/files/6G5qV1IeA499y8QEaa1L)

1. 주문번호 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > order > order.css **219줄**

{% code title="css > order > order.css 219줄" %}

```css
.order_end .order_end_box h2 {
    padding: 0 0 10px 0;
    font-size: 13px;
    color: #333333;
}
```

{% endcode %}

2. 입금금액 폰트의 **color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > gd\_common.css **4줄**&#x20;

{% code title="css > gd\_common.css 4줄" %}

```css
.c_red, .c-red, .c_point {
    color: #ab3e55;
}
```

{% endcode %}

3. 구매안내 폰트의 **color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > order > order.css **229줄**

{% code title="css > order > order.css 229줄" %}

```css
.order_end .tx2 strong {
    color: #e38bac;
}
```

{% endcode %}

4. 박스 영역의 **background(배경), border(선), border-radius(둥근선)** 값을 변경해줍니다. \
   `변경 위치` css > order > order.css **219줄**

{% code title="css > order > order.css 219줄" %}

```css
.order_end .order_end_box {
    position: relative;
    margin: 15px 15px 5px 15px;
    padding: 20px 0 20px 0;
    background: #f3f3f3;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    text-align: center;
}
```

{% endcode %}

</details>

<details>

<summary>장바구니 폰트 변경하기</summary>

![](/files/pwepnS5bos2x5P68lCUi)

1. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > order > order.css **52줄**

{% code title="css > order > order.css 52줄" %}

```css
.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;
}
```

{% endcode %}

2. 장바구니 상품 옵션 폰트의 **font-size(크기), line-height(행간), color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > order > order.css **51줄**

{% code title="css > order > order.css 51줄" %}

```css
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p {
    font-size: 12px;
    line-height: 16px;
    color: #9d9d9d;
}
```

{% endcode %}

3. 장바구니 상품 가격 폰트의 **font-size(크기), color(색상), font-weight(굵기)** 값을 변경해줍니다. \
   `변경 위치` css > order > order.css **54줄**

{% code title="css > order > order.css 54줄" %}

```css
.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: #e38bac;
    font-weight: bold;
}
```

{% endcode %}

4. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > order > order.css **85줄**

{% code title="css > order > order.css 85줄" %}

```css
.cart .my_buy dl dt {
    display: table-cell;
    width: 50%;
    font-size: 13px;
    color: #5e5e5e;
}
```

{% endcode %}

5. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \
   `변경 위치` css > order > order.css **86줄**

{% code title="css > order > order.css 86줄" %}

```css
.cart .my_buy dl dd {
    display: table-cell;
    width: 50%;
    text-align: right;
    font-size: 15px;
    color: #5e5e5e;
}
```

{% endcode %}

6. 장바구니 총 합계금액 폰트의 **color(색상),  font-size(크기)** 값을 변경해줍니다. \
   `변경 위치` css > order > order.css **88줄**

{% code title="css > order > order.css 88줄" %}

```css
.cart .my_buy dl.total dd {
    color: #e38bac;
    font-size: 17px;
}
```

{% endcode %}

</details>

<details>

<summary>장바구니 버튼 변경하기</summary>

![](/files/d7NpZpuv3cj3zRSkT9QM)

1. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. \
   `변경 위치` css > gd\_button.css **222줄**

{% code title="css > gd\_button.css 222줄" %}

```css
.cart_coupon_apply {
    display: inline-block;
    padding: 5px 5px 5px 5px;
    text-align: center;
    background: #e38bac;
    border: 1px solid #e38bac;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
    border-radius: 2px;
}
```

{% endcode %}

2. 옵션변경 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. \
   `변경 위치` css > gd\_button.css **225줄**

{% code title="css > gd\_button.css 225줄" %}

```css
.cart_option_modify {
display: inline-block;
    padding: 5px 5px 5px 5px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #9f9f9f;
    color: #494949;
    font-weight: bold;
    box-sizing: border-box;
    border-radius: 2px;
}
```

{% endcode %}

3. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. \
   `변경 위치` css > gd\_button.css **227줄**

{% code title="css > gd\_button.css 227줄" %}

```css
.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;
}
```

{% endcode %}

4. 전체주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. \
   `변경 위치` css > gd\_button.css **229줄**

{% code title="css > gd\_button.css 229줄" %}

```css
.cart_all_order_btn {
    display: inline-block;
    width: 100%;
    padding: 10px 0 10px 0;
    text-align: center;
    background: #e38bac;
    border: 1px solid #e38bac;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
    font-size: 14px;
}
```

{% endcode %}

</details>


---

# Agent Instructions: 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:

```
GET https://godomall-help.nhn-commerce.com/beginner/design/freeskin/pure/mobile-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.