# Fresh#\_Mobile 스킨 가이드

> #### 공통

<details>

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

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

   list\_09.css (총 3개) \
   list\_01.css (총 4개) \
   list\_11.css (총 7개) \
   list\_06.css (총 4개) \
   list\_02.css (총 4개)\
   list\_04.css (총 4개) \
   list\_07.css (총 5개) \
   goods.css (총 10개) \
   mypage.css (총 10개) \
   main.css (총 3개) \
   order.css (총 12개) \
   gd\_common.css (총 4개) \
   gd\_layout.css (총 3개) \
   gd\_button.css (총 155개) \
   gd\_plus\_reivew\.css (총 7개)

</details>

<details>

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

![](/files/DHLZdoHxTAohoNXZ0QHm)

1\. 푸터 TOP버튼 영역의 **height(높이), border-bottom(선), color(색상), background(배경), font-size(크기), fone-weight(굵기)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css&#x20;**<mark style="color:red;">**143줄**</mark>

```css
#footer footer .ft_btn_top a {
    display: inline-block;
    width: 100%;
    height: 38px;
    border-bottom: 1px solid #dddddd;
    text-align: center;
    color: #585858;
    background: #f2f2f2;
    line-height: 42px;
    font-size: 13px;
    font-weight: bold;
}
```

2\. 고객센터 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css&#x20;**<mark style="color:red;">**135줄**</mark>

```css
#footer footer .ft_button_box ul li a {
    display: block;
    padding: 10px 0;
    background: #dddddd;
    color: #444444;
    font-size: 13px;
}
```

3\. 고객센터 버튼의 **font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css&#x20;**<mark style="color:red;">**139줄**</mark>

```css
#footer footer .ft_info2_box .ft_menu li a {
    display: block;
    padding: 18px 0 18px 0;
    font-size: 12px;
    color: #585858;
    text-align: center;
    letter-spacing: -1px;
}
```

4\. 푸터 컨텐츠 정보 영역의 **font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css&#x20;**<mark style="color:red;">**141줄**</mark>

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

5\. 카피라잇 폰트의 **color(색상), font-size(크기)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css&#x20;**<mark style="color:red;">**150줄**</mark>

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

</details>

<details>

<summary>슬라이드 메뉴 <strong>폰트</strong> 변경하기</summary>

![](/files/At6COdVbvwn9G8tyI5L0)

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

**스타일시트 > gd\_layout.css | css/gd\_layout.css&#x20;**<mark style="color:red;">**90줄**</mark>

```css
.nav_banner .login_txt p.name strong {
    overflow: hidden;
    display: inline-block;
    max-width: 150px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    vertical-align: middle;
    color: #8eb111;
}
```

2\. 안내 폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css&#x20;**<mark style="color:red;">**88줄**</mark>

```css
.nav_banner .login_txt {
    padding: 0 0 8px 2px;
    font-size: 16px;
    text-align: left;
    line-height: 20px;
    box-sizing: border-box;
}
```

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

**스타일시트 > gd\_layout.css | css/gd\_layout.css&#x20;**<mark style="color:red;">**84줄**</mark>

```css
.nav_banner .nav_login ul li a {
    display: inline-block;
    font-size: 14px;
    color: #222222;
}
```

4\. Q\&A폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css&#x20;**<mark style="color:red;">**95줄**</mark>

```css
.nav_link ul li a {
    display: block;
    padding: 41px 0 0 0;
    font-size: 13px;
    color: #333333;
}
```

5\. BRAND 폰트의 **font-size(크기), color(색상), font-weight(굵기), background(배경)** 값을 변경합니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css&#x20;**<mark style="color:red;">**109줄**</mark>

```css
.nav_tabmenu_box .nav_tab_list .nav_tabmenu_tit {
    display: block;
    margin: 4px 10px 0 10px;
    padding: 0 0 20px 0;
    font-size: 17px;
    color: #333333;
    font-weight: bold;
    background: url(../img/icon/icon_left_tit_arrow.png) no-repeat right 8px;
    background-size: 15px 9px;
}
```

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

**proc> proc.css | css/proc/proc.css &#x20;**<mark style="color:red;">**7줄**</mark>

```css
.category_side > li a {
    position: relative;
    display: block;
    padding: 10px 0 10px 0;
    font-size: 16px;
    color: #262626;
}
```

7\. FRUIT 폰트의 **color(색상), border-bottom(선)** 값을 변경합니다.&#x20;

**proc> proc.css | css/proc/proc.css &#x20;**<mark style="color:red;">**12줄**</mark>

```css
.category_side > li > a.on {
    color: #8eb111;
    border-bottom: 1px solid #666666;
}
```

</details>

<details>

<summary>슬라이드 메뉴 영역 변경하기</summary>

![](/files/yXmfjMM1If9dKC72rkXc)

1\. 메뉴 영역 박스의 **background(배경)** 값을 변경합니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css&#x20;**<mark style="color:red;">**93줄**</mark>

```css
.nav_link ul {
    display: table;
    width: 100%;
    background: #f7f8f8;
    padding: 10px 0 10px 0;
}
```

2\. 1댑스 메뉴 하단의 **background(배경)** 값을 변경합니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css&#x20;**<mark style="color:red;">**110줄**</mark>

```css
.nav_tabmenu_box .nav_tab_list .nav_tabmenu_tit.on {
    padding: 0 0 10px 0;
    background: url(../img/icon/icon_left_tit_arrow_on.png) no-repeat right 8px;
    background-size: 15px 9px;
    border-bottom: 1px solid #666666;
}
```

3\. 2댑스 메뉴 하단의 **border-bottom(선)** 값을 변경합니다.&#x20;

**proc> proc.css | css/proc/proc.css&#x20;**<mark style="color:red;">**110줄**</mark>

```css
.category_side > li > a.on {
    color: #8eb111;
    border-bottom: 1px solid #666666;
}
```

</details>

> #### 메인

<details>

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

![](/files/nLvfykpZ0AklD4jmVx69)

1\. 상단 메뉴 영역 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**main > main.css | css/main/main.css&#x20;**<mark style="color:red;">**31줄**</mark>

```css
.main .main_top_menu li a {
    display: block;
    padding: 13px 0 13px 0;
    font-size: 15px;
    color: #ffffff;
    font-weight: normal;
}
```

2\. 상단 메뉴 영역 폰트의 **color(색상), background(배경), font-size(크기)** 값을 변경합니다.&#x20;

**main > main.css | css/main/main.css&#x20;**<mark style="color:red;">**25줄**</mark>

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

3\. 상단 메뉴 영역 하단의 **border-bottom(선)** 값을 변경합니다.&#x20;

**main > main.css | css/main/main.css&#x20;**<mark style="color:red;">**29줄**</mark>

```css
.main .main_top_menu {
    display: table;
    width: 96%;
    border-bottom: 1px solid #ffffff;
}
```

</details>

<details>

<summary>진열타입 탭형 변경하기 <strong>(폰트/컬러)</strong></summary>

![](/files/JroFQlVjtZy5O1UEPNLx)

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

**proc >  proc.css | css/proc/proc.css&#x20;**<mark style="color:red;">**48줄**</mark>

```css
._goods_display_main h3 {
    position: relative;
    display: block;
    padding: 8px 0 8px 10px;
    font-size: 16px;
    color: #181818;
    text-align: center;
    font-weight: bold;
}
```

2\. 선택된 탭영역의 **background(배경), color(색상)** 값을 변경합니다.&#x20;

**list > list\_07.css | css/goods/list/list\_07.css&#x20;**<mark style="color:red;">**12줄**</mark>

```css
.goods_prd_item7 .tab_box .tab li.on a {
    background: #8eb111;
    color: #ffffff;
}
```

3\. 비활성화 탭영역의 **font-size(크기), border(선), background(배경), color(색상)** 값을 변경합니다.&#x20;

**list > list\_07.css | css/goods/list/list\_07.css&#x20;**<mark style="color:red;">**9줄**</mark>

```css
.goods_prd_item7 .tab_box .tab li a {
    overflow: hidden;
    display: inline-block;
    width: 100%;
    padding: 10px 10px 10px 10px;
    font-size: 12px;
    box-sizing: border-box;
    text-overflow: ellipsis;
    text-align: center;
    white-space: nowrap;
    word-wrap: normal;
    border: 1px solid #e5e5e5;
    border-left: none;
    background: none;
    color: #999999;
}
```

4\. 브랜드 폰트의 **font-weight(굵기), color(색상)** 값을 변경합니다.&#x20;

**list > list\_07.css | css/goods/list/list\_07.css&#x20;**<mark style="color:red;">**27줄**</mark>

```css
.goods_prd_item7 .goods_prd_content .goods_info_list li.brand_name {
    font-weight: bold;
    color: #999999;
}
```

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

**list > list\_07.css | css/goods/list/list\_07.css&#x20;**<mark style="color:red;">**25줄**</mark>

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

6\. 기존가격 폰트의 **text-decoration(글자꾸밈)** 값을 변경합니다.&#x20;

**list > list\_07.css | css/goods/list/list\_07.css&#x20;**<mark style="color:red;">**34줄**</mark>

```css
.goods_prd_item7 .goods_prd_content .goods_info_list li.fixed_price {
    text-decoration: line-through;
}
```

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

**list > list\_07.css | css/goods/list/list\_07.css&#x20;**<mark style="color:red;">**38줄**</mark>

```css
.goods_prd_item7 .goods_prd_content .goods_info_list li.price .c_price {
    color: #8eb111;
}
```

</details>

<details>

<summary>스크롤 상단 고정메뉴 변경하기</summary>

![](/files/XB0ANuzx4wlJeXpdBCT6)

1\. 장바구니 담긴상품 수량의 **background(배경)** 값을 변경합니다.&#x20;

**main > main.css | css/main/main.css&#x20;**<mark style="color:red;">**14줄**</mark>

```css
##header_wrap header.on .header_box .cart_count {
    background: #333333;
}
```

2\. 스크롤시 상단 메뉴 영역의 **background(배경), opacity(투명도)** 값을 변경합니다.&#x20;

**main > main.css | css/main/main.css&#x20;**<mark style="color:red;">**13줄**</mark>

```css
#header_wrap header.on {
    background: #8eb111;
    opacity: 0.9;
}
```

</details>

<details>

<summary>고객센터/게시판 변경하기 <strong>(폰트/배경)</strong></summary>

![](/files/HbNokCzk3bDPFfwjUG46)

1\. 고객센터 번호 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**main > main.css | css/main/main.css&#x20;**<mark style="color:red;">**76줄**</mark>

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

2\. 고객센터 운영시간 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**main > main.css | css/main/main.css&#x20;**<mark style="color:red;">**77줄**</mark>

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

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

**main > main.css | css/main/main.css&#x20;**<mark style="color:red;">**33줄**</mark>

```css
.main .main_notice .tit {
    display: table-cell;
    width: 70px;
    font-size: 13px;
    font-weight: bold;
    color: #282828;
    text-align: left;
}
```

4\. 공지사항 내용 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**main > main.css | css/main/main.css&#x20;**<mark style="color:red;">**36줄**</mark>

```css
.main .main_notice ul li a {
    display: block;
    width: 100%;
    color: #5d5d5d;
}
```

5\. 공지사항 등록 날짜 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**main > main.css | css/main/main.css&#x20;**<mark style="color:red;">**37줄**</mark>

```css
.main .main_notice ul li a em {
    float: right;
    font-style: normal;
    font-size: 11px;
    color: #999999;
    letter-spacing: 0px;
}
```

</details>

> #### 상품상세

<details>

<summary>타임세일 상세 변경하기</summary>

![](/files/HVdE8xSwv38VdUm39yMk)

1\. 타임세일 상단영역의 **background(배경)** 값을 변경합니다.&#x20;

**goods > goods.css | css/goods/goods.css&#x20;**<mark style="color:red;">**277줄**</mark>

```css
.goods_view .time_sale_box {
    background: #606e89;
}
```

2\. 타임세일 할인율 영역의 **background(배경), font-size(크기), color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**goods > goods.css | css/goods/goods.css&#x20;**<mark style="color:red;">**280줄**</mark>

```css
.goods_view .time_sale_box .event .time_count .sale_percent {
    display: inline-block;
    padding: 5px 10px 5px 10px;
    background: #8092b6;
    font-size: 15px;
    color: #ffffff;
    border-radius: 15px;
    font-weight: bold;
}
```

3\. 타임세일 남은 시간 폰트의 **color(색상), font-size(크기)** 값을 변경합니다.&#x20;

**goods > goods.css | css/goods/goods.css&#x20;**<mark style="color:red;">**295줄**</mark>

```css
.goods_view .time_sale_box .event .time_count .time_sale_date_box .timesaledate span {
    color: #fff;
    font-size: 24px;
}
```

4\. 타임세일 남은 재고 수량 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**goods > goods.css | css/goods/goods.css&#x20;**<mark style="color:red;">**300줄**</mark>

```css
.goods_view .time_sale_box .event .time_count .sale_order_count {
    font-size: 16px;
    color: #fff;
}
```

</details>

<details>

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

![](/files/Qe0njv7uG26Gpu14j1i6)

1\. 스크롤시 상단 메뉴 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**232줄**</mark>

```css
.body-main .headerFix #header .gnb .depth0 > li > a {
    color: #333;
}
```

</details>

> #### 주문결제

<details>

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

![](/files/nKIhkzhNHXO2AEVvcsbn)

1\. 쿠폰적용 버튼의 **background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**스타일시트 > button.css | css/button.css&#x20;**<mark style="color:red;">**222줄**</mark>

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

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

**ordert > order.css | css/order/order.css&#x20;**<mark style="color:red;">**54줄**</mark>

```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: #8eb111;
    font-weight: bold;
}
```

3\. 옵션변경 버튼의 **background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**스타일시트 > button.css | css/button.css&#x20;**<mark style="color:red;">**225줄**</mark>

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

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

**ordert > order.css | css/order/order.css&#x20;**<mark style="color:red;">**88줄**</mark>

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

5\. 선택상품 삭제 버튼의 **background(배경), border(선), color(색상), font-weight(굵기), font-size(크기)** 값을 변경합니다.&#x20;

**스타일시트 > button.css | css/button.css&#x20;**<mark style="color:red;">**227줄**</mark>

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

6\. 전체주문 버튼의 **background(배경), border(선), color(색상), font-weight(굵기), font-size(크기)** 값을 변경합니다.&#x20;

**스타일시트 > button.css | css/button.css&#x20;**<mark style="color:red;">**229줄**</mark>

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

</details>

<details>

<summary>주문서 작성 변경하기</summary>

![](/files/QLJCIk68HazCHUXPlOlP)

1\. 배송정보탭의 **background(배경)** 값을 변경합니다.&#x20;

**order > order.css | css/layout/order.css&#x20;**<mark style="color:red;">**136줄**</mark>

```css
.order .order_box .delivery_box .tab_menu ul li.active {
    background: #8eb111;
}
```

2\. 우편번호 버튼의 **background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**스타일시트 > button.css | css/gd\_button.css&#x20;**<mark style="color:red;">**235줄**</mark>

```css
.zipcode_btn1 {
    display: inline-block;
    width: 100%;
    padding: 5px 0 6px 0;
    text-align: center;
    background: #8eb111;
    border: 1px solid #8eb111;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
}
```

3\. 쿠폰 조회 및 적용 버튼의 **background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**스타일시트 > button.css | css/gd\_button.css&#x20;**<mark style="color:red;">**239줄**</mark>

```css
.coupon_search_apply_btn {
    display: inline-block;
    padding: 5px 10px 5px 10px;
    text-align: center;
    background: #8eb111;
    border: 1px solid #8eb111;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
}
```

4\. 마일리지 숫자 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**스타일시트 > order.css | css/order.css&#x20;**<mark style="color:red;">**161줄**</mark>

```css
.order .order_box .table_box .point_view p span {
    color: #8eb111;
}
```

5\. 최종 결제금액 숫자 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**order > order.css | css/gd\_common.css&#x20;**<mark style="color:red;">**4줄**</mark>

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

</details>

<details>

<summary>주문완료 변경하기</summary>

![](/files/2XsjHtSPhxm1VDmLPUKK)

1\. 주문번호 숫자 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**order > order.css | css/order/order.css&#x20;**<mark style="color:red;">**232줄**</mark>

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

2\. 주문금액 숫자 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**order > order.css | css/order/order.css&#x20;**<mark style="color:red;">**225줄**</mark>

```css
.order_end .order_end_box .tx ul li .prc {
    font-size: 14px;
    color: #8eb111;
    font-weight: bold;
}
```

3\. 주문금액 숫자 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**order > order.css | css/order/order.css&#x20;**<mark style="color:red;">**229줄**</mark>

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

4\. 홈으로 가기 버튼의 **font-size(크기), background(배경), border(선), color(색상), font-weight(굵기), font-size(크기)** 값을 변경합니다.&#x20;

**스타일시트 > gd\_button.css | css/gd\_button.css&#x20;**<mark style="color:red;">**243줄**</mark>

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

</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/fresh/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.