# Storyg\_Mobile 스킨 가이드

> #### 공통

<details>

<summary>푸터 영역 변경하기(배경/컬러/사이즈)</summary>

![](/files/ysqKx8KXeKLsvSLqPaLx)

1\. 로그인 버튼의 **background(배경), border(선), radius(라운드), font-size(사이즈), color(색상)** 값을 변경해줍니다.

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

```css
.ft_menu a {
    display: block;
    background: #363636;
    border: 1px solid #494949;
    border-radius: 2px;
    font-size: 13px;
    color: #777;
    line-height: 32px;
}
```

2\. 제목 폰트의 **font-size(사이즈), color(색상)** 값을 변경해줍니다.

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

```css
.ft_info dt {
    float: left;
    width: 73px;
    font-size: 11px;
    color: #545454;
    letter-spacing: -1px;
    display: table-cell;
    vertical-align: top;
    word-break: break-all;
}
```

3\. 내용 폰트의 **font-size(사이즈), color(색상)** 값을 변경해줍니다.

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

```css
.ft_info dd {
    overflow: hidden;
    font-size: 11px;
    color: #686868;
    display: table-cell;
    vertical-align: top;
    padding-left: 5px;
    max-width: 200px;
}
```

</details>

<details>

<summary>상단 메뉴 영역 변경하기(배경/라인/컬러)</summary>

![](/files/alE6OVeUG9o4fqCgrlwg)

1\. 상단 메뉴 background(배경), border(선) 값을 변경해줍니다.

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

```css
#header .head {
    position: relative;
    height: 50px;
    line-height: 50px;
    background: #fff; 
    text-align: center; 
    border-bottom: 1px solid #c3c3c3;
}
```

2\. 메뉴 폰트 수정은 color(색상), font-size(사이즈) 값을 변경해줍니다.

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

```css
.main-link-wrap span {
    display: table-cell; 
    width: 25%; 
    text-align: center; 
    line-height: 38px; 
    height: 38px; 
    font-size: 14px; 
    font-weight: bold;
}
```

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

```css
.main-link-wrap span a {
    color: #333;
}
```

</details>

<details>

<summary>슬라이드 메뉴 영역 변경하기(배경/컬러/사이즈)</summary>

![](/files/A8gfA9vD0WjvsD7hjODf)

1\. 로그인 버튼의 font-size(사이즈), background(배경), color(색상), height(높이) 값을 변경해줍니다.

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

```css
.slide_wrap .member-btns .member-btn-in a {
    display: block;
    font-size: 14px;
    background: #3e3d3c;
    color: #fff;
    text-align: center;
    height: 39px;
    line-height: 39px;
}
```

2\. 회원가입 버튼의 background(배경) 값을 변경해줍니다.

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

```css
.slide_wrap .member-btns .subbtn a {
    background: #676767;
}
```

3\. 마이페이지 버튼영역의 background(배경) 값을 변경해줍니다.

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

```css
.nav-member-info {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    border-collapse: collapse;
    background: #f3f3f3;
}
```

4\. 메뉴 폰트의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

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

```css
.hamburger-gnb .dep1 > li > a {
    position: relative;
    z-index: 5;
    display: block;
    background: #fff;
    color: #888;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    font-weight: bold;
}
```

</details>

<details>

<summary>아이콘(sprite icon) 이미지 변경하기</summary>

1. 변경하고 싶은 이미지를 확인하고 개발자 도구를 사용하여 선택한 후 이미지 경로를 확인합니다.

![](/files/nkpkwb0VBARsfp0bLLlB)

![](/files/TzgmjTgnkJe31ckBWGzA)

2\. 아래 해당 이미지 링크로 접속하여 변경할 아이콘 이미지를 다운받으세요.&#x20;

(예시 이미지는 흰색 아이콘 확인을 위해 추가된 이미지로 수정 후 저장 하실 때에는 꼭 투명 배경의 png로 저장)

\- sprite-icon.png 이미지 url 위치 : /data/skin/mobile/story\_g/img/icon/sprite-icon.png\
\- sprite-icon.png 이미지 관리자 위치 : skin/mobile/story\_g/img/icon/sprite-icon.png

![](/files/VfSapotz7Upo2HsQAKe8)

\- sp.png 이미지 url 위치 : /data/skin/mobile/story\_g/img/common/sp.png\
\- sp.png 이미지 관리자 위치 : skin/mobile/story\_g/img/common/sp.png

![](/files/7UjTlvB7A7PQPGBhCBcH)

\- sp\_mono.png 이미지 url 위치 : /data/skin/mobile/story\_g/img/common/sp\_mono.png\
\- sp\_mono.png 이미지 관리자 위치 : skin/mobile/story\_g/img/common/sp\_mono.png

![](/files/umetbps5TMtrSbl7hMJS)

3\. 이미지를 변경한 후 관리자 > 디자인 > Web FTP 메뉴를 클릭 팝업에 접속하여 수정한 파일을 업로드하면 됩니다.

(이미지의 위치 및 사이즈는 변경 불가)&#x20;

![](/files/CKjtrh7SbU84zw98xelV)

![](/files/EyiLhcLlm2uzh3nrZdzc)

</details>

> #### 메인

<details>

<summary>상품 리스트 폰트 변경하기(사이즈/컬러/굵기)</summary>

![](/files/Qung7CE0oVmngb3q4BSd)

1\. 상품명 폰트 수정은 font-size(사이즈), color(색상) 값을 변경해줍니다.

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

```css
.goods-nm {
    font-size: 13px;
    color: #222;
    margin-bottom: 5px;
}
```

2\. 판매가 폰트 수정은 font-size(사이즈), color(색상) 값을 변경해줍니다.

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

```css
.goods-price {
    font-size: 15px;
    color: #555;
}
```

</details>

<details>

<summary>상품 이미지 라인 변경하기(컬러)</summary>

![](/files/rV1pUmznVjBv78Lc6aUM)

1\. 상품이미지 라인 수정은 color(색상) 값을 변경해줍니다.

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

```css
.goods-list-img a,
.goods-gallery-img a,
.goods-simpleimg-img a {
    border: 1px solid #e5e5e5;
    display: block;
    text-align: center;
    position: relative;
}
```

2\. 더보기 버튼 수정은 border(선), background(배경), color(색상), font-size(사이즈) 값을 변경해줍니다.

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

```css
.bn_more {
    display:block;
    height:40px;
    border:1px solid #ddd;
    background:#ededed;
    color:#888;
    font-size:14px;
    line-height:40px;
    text-align:center;
    width: 100%;
}
```

</details>

<details>

<summary>타이틀 영역 변경하기(배경/컬러/사이즈)</summary>

![](/files/vBIBvUnIKHKOal7OnhST)

\- 타이틀영역 폰트 수정은 background(배경), color(색상), font-size(사이즈) 값을 변경해줍니다.

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

```css
my_tit {
    padding: 0 10px;
    border: 1px solid #ccc;
    border-width: 1px 0 0 0;
    background: #f2f3f3;
    color: #333;
    font-size: 14px;
    line-height: 36px;
}
```

</details>

> #### 상품상세

<details>

<summary>레이어 폰트 스타일 변경하기(컬러/사이즈/굵기)</summary>

![](/files/rZZ4wNwcY2lUebfoqCh7)

1\. 쿠폰적용 버튼의 background(배경), color(색상), font-size(사이즈), radius(라운드) 값을 변경해줍니다.

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

```css
.view-order-goods .check .btn-wrap button {
    height: 21px;
    margin: 0 0 0 5px;
    padding: 0 6px;
    background: #3e3d3c;
    color: #fff;
    font-size: 12px;
    border-radius: 3px;
}
```

2\. 총 상품금액 폰트의 font-size(사이즈), color(색상) 값을 변경해줍니다.

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

```css
.view-end-price ul li strong {
    float: right;
    font-size: 15px;
}
```

3\. 총 합계금액 폰트의 font-size(사이즈), color(색상) 값을 변경해줍니다.

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

```css
.view-end-price ul li:last-child * {
    /* color: #3e3d3c; */
}
```

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

```css
.view-end-price ul li:last-child strong {
    font-size: 18px;
}
```

</details>

<details>

<summary>탭 스타일 변경하기(컬러/사이즈/굵기)</summary>

![](/files/2RMoA848RUOx1Ouasdfl)

1\. 글 수의 color(색상), font-size(사이즈) 값을 변경해줍니다.

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

```css
.detail_sub_lst>li>a {
    height: 41px;
    font-size: 14px;
    color: #222;
    font-weight: bold;
    position: relative;
    vertical-align: middle;
}
```

2\. 탭 폰트의 font-size(사이즈), color(색상) 값을 변경해줍니다.

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

```css
.detail_sub_lst>li .itemnum {
    margin-left: 2px;
    font-size: 15px;
    color: #fa2828;
}
```

3\. 현재 위치 탭 표시 라인의 height(높이), color(색상) 값을 변경해줍니다.

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

```css
.detail_sub_lst li.selected:after {
    content: '';
    width: 80%;
    height: 3px;
    background: #3e3d3c;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
```

</details>

<details>

<summary>상품상세 버튼 스타일 변경하기(컬러/사이즈/굵기)</summary>

![](/files/tuQDPJq6vlCtcnN9Uzkz)

1\. 장바구니 버튼의 border(선), background(배경), color(색상), font-size(사이즈) 값을 변경해줍니다.

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

```css
.ly_buy_dn li a {
    display: block;
    height: 50px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    line-height: 51px;
    text-align: center;
    background: #3e3d3c;
    color: #fff;
    border: 1px solid #3e3d3c;
}
```

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

```css
.ly_buy_dn .basket {
    border: 1px solid #3e3d3c;
    background: #fff;
    color: #3e3d3c;
}
```

2\. 바로구매 버튼의 border(선), background(배경), color(색상), font-size(사이즈) 값을 변경해줍니다.

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

```css
.ly_buy_dn li a {
    display: block;
    height: 50px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    line-height: 51px;
    text-align: center;
    background: #3e3d3c;
    color: #fff;
    border: 1px solid #3e3d3c;
}
```

</details>

<details>

<summary>리스트 항목 폰트 변경하기(컬러/사이즈/굵기)</summary>

![](/files/e09AC8xH9ZCsAz32Uuxm)

1\. 상품명 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.

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

```css
.detail_info h2 {
    padding-bottom:3px;
    font-size:22px;
    color:#222;
    line-height:26px;
}
```

2\. 판매가 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.

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

```css
.detail_info .price {
    margin-left:3px;
    font-size:17px;
    color:#222;
}
```

3\. 리스트 항목 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.

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

```css
.detail_info dl {
    overflow:hidden;
    margin-top:25px;
    line-height:16px;
    font-size:13px;
    border-bottom: 1px solid #999999;
    padding-bottom: 10px;
}
```

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

```css
.detail_info dt {
    float:left;
    width:70px;
    color:#222;
}
```

4\. 리스트 내용 폰트의 color(색상) 값을 변경해줍니다.

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

```css
.detail_info dd {
    overflow:hidden;
    color:#888;
}
```

</details>

> #### 주문결제

<details>

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

1\. 쿠폰적용 버튼의 border(선), font-size(사이즈), color(색상) 값을 각각 변경해줍니다.

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

```css
.btn.btn_p3 {
    border: 1px solid #3e3d3c;
    background: #3e3d3c;
    border-radius: 2px;
    color: #fff;
    height: 33px;
    line-height: 33px;
    font-size: 13px;
    box-sizing: border-box;
}
```

2\. 옵션변경 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경해줍니다.

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

```css
.btn.btn_gr {
    height: 33px;
    border: 1px solid #919191;
    border-radius: 3px;
    background: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f0f0f0));
    color: #5e5e5e;
    font-size: 13px;
    line-height: 32px;
}
```

3\. 선택상품 삭제버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값으로 각각 변경해줍니다.

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

```css
.btn.btn_w {
    background: #fff;
    border-color: #9f9f9f;
    color: #494949;
    font-size: 15px;
}
```

4\. 전체주문 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경해줍니다.

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

```css
.btn {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 42px;
    background: #3e3d3c;
    border: 1px solid #3e3d3c;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 36px;
}
```

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

```css
.btn-order-all {
    margin-top: 5px;
    font-size: 15px;
}
```

</details>

<details>

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

![](/files/a2HIhGbVp33g69CdZAm1)

1\. 상품금액 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.

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

```css
.my_goods .info .prc {
    display: block;
    margin: 10px 4px 0 0;
    color: #606060;
    font-size: 15px;
    text-align: right;
}
```

2\. 총 합계금액 폰트의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

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

```css
.my_buy li {
    margin-bottom: 17px;
    color: #5e5e5e;
    font-size: 13px;
}
```

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

```css
.my_buy li.total {
    border-top: 1px solid #C3C3C3;
    padding-top: 20px;
    font-weight: bold;
}
```

3\. 총 합계금액 가격 폰트의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

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

```css
.my_buy li.total strong {
    font-size: 17px;
    color: #fa2828;
    text-align: right;
}
```

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