# Storyg\_PC 스킨 가이드

> #### 공통

<details>

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

1. 스토리지 스킨에 현재 적용되어 있는 포인트 컬러 코드 **#3e3d3c**를 확인하세요.

![](/files/7rgkbkSe1e2Th9RbK6PZ)

2. **관리자페이지 > 디자인 메뉴**에 접속합니다.
3. 좌측 하단 폴더트리 내 스타일시트/CSS를 더블 클릭하여 표시된 스타일시트 파일을 엽니다.<br>

![](/files/cdtu1KOTsqEFHrpgZ6w6)

4. 아래 스타일시트 파일에서 **Ctrl + F**를 누르고 **#3e3d3c**검색하여 **원하는 포인트 컬러 코드**로 변경하세요.

![](/files/4phSXvIz6OROvAbfCw4D)

5. 마우스 오버시 컬러 **#4f4e4d** 도 검색하여 **원하는 포인트 컬러 코드**로 변경하세요.

**#4f4e4d** -> <mark style="color:red;">**# 컬러 코드**</mark>

</details>

<details>

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

<img src="/files/nGg07Fd6nnKOHWYZOdap" alt="" data-size="original">

* 상단 메뉴 배경컬러 수정은 background-color 값을 변경해줍니다.

&#x20;**css > gd\_layout.css 21줄**

`21` #top.header .navi {\
`22` position:absolute;\
`23` top:0;\
`24` left:0;\
`25` width:100%;\
`26` height:32px;\
`27` border-bottom:1px solid #eaeaea;\
`28` <mark style="background-color:orange;">background-color: #f9f9f9;}</mark>

</details>

<details>

<summary>브랜드 메뉴 폰트 변경하기(컬러/사이즈/굵기)</summary>

![](/files/PKKa5y6rsib35z8WahPy)

* 브랜드 메뉴 폰트 수정은 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

**css > gd\_layout.css&#x20;**<mark style="color:red;">**288줄**</mark>

`288` #top.header .top-service .link > li > a {\
`289` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#444;</mark>\
`290` <mark style="background-color:orange;">**font-size**</mark><mark style="background-color:orange;">:14px;</mark>\
`291` <mark style="background-color:orange;">**font-weight**</mark><mark style="background-color:orange;">:bold;}</mark>

</details>

<details>

<summary>전체 카테고리 변경하기(배경/폰트/컬러)</summary>

![](/files/a3BeV56PuDI12HlfETYi)

* 전체 카테고리 영역 수정은 background(배경), color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

**css > gd\_layout.css&#x20;**<mark style="color:red;">**166줄**</mark>

`166` #top.header .top-service .all-category {\
`167` **position**:relative;\
`168` **float**:left;\
`169` **width**:180px;\
`170` **height**:49px;\
`171` **margin**:0;\
`172` **padding**:0;\
`173` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">:#3e3d3c url('../img/header/ico-all-category.png') no-repeat 13px 18px;</mark> \
`174`} \
`175` #top.header .top-service .all-category > a {\
`176` **display:**&#x62;lock;\
`177` **height**:36px;\
`178` **padding**:13px 0 0 40px;\
`179` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fff;</mark>\
`180` <mark style="background-color:orange;">**font-size**</mark><mark style="background-color:orange;">:14px;</mark>\
`181` <mark style="background-color:orange;">**font-weight**</mark><mark style="background-color:orange;">:bold;</mark>

</details>

<details>

<summary>좌측 메뉴 변경하기(배경/폰트/컬러)</summary>

![](/files/FN6mJTmemTvBy1gMWgVo)

1. 좌측 메뉴 최상위 카테고리 텍스트/배경 컬러 수정은 color(색상), background(배경) 값을 변경해줍니다.

**css > gd\_layout.css&#x20;**<mark style="color:red;">**498줄**</mark>

`498` #side .lnb > .category.type-layer > li > a { \
`499` **display:**&#x62;lock; \
`500` **padding**:9px 10px 12px 24px; \
`501` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #222222;</mark> \
`502` **font-size**:13px; \
`503` **font-weight**:bold;\
`504` } \
`505` #side .lnb > .category.type-layer > li > a:hover, \
`506` #side .lnb > .category.type-layer > li > a.has-sub { \
`507` **position**:relative; \
`508` **top**:0; \
`509` **left**:0; \
`510` **z-index**:10; \
`511` **width**:144px; \
`512` **padding**:9px 10px 12px 24px; \
`513` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">:#f2f2f2;</mark> \
`514` **color**: #222222; \
`515` }

2. 좌측 메뉴 하위 카테고리 텍스트/배경 컬러 수정은 color(색상), background(배경) 값을 변경해줍니다.

**css > gd\_layout.css&#x20;**<mark style="color:red;">**570줄**</mark>

`570` #side .lnb > .category.type-layer > li > ul li a {\
`571` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #222222;</mark>\
`572` **text-indent**:6px; \
`573` }

**css > gd\_layout.css&#x20;**<mark style="color:red;">**483줄**</mark>

`483` #side .lnb > .category.type-layer ul li:hover { \
`484` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">: #f2f2f2;</mark> \
`485` } \
`486` #side .lnb > .category.type-layer ul li:hover > a { \
`487` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">: none;</mark> \
`488` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #fff;</mark>\
`489` }

</details>

<details>

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

1. **관리자 페이지 > 디자인 메뉴**에 접속합니다.
2. 좌측 하단 폴더트리 내 **“스타일시트/CSS”**&#xB97C; 더블 클릭하여 스타일시트 리스트 중 **gd\_reset.css**를 오픈하세요.

![](/files/jYPTuLZIdQZhNYO0l5F6)

3. **gd\_reset.css** 스타일시트의 **3번째** 줄에 **@import url(’외부 스타일시트 경로’)을 추가**합니다.
4. **13번째** 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "**나눔고딕**" 또는 **Nanum Gothic(변경할 폰트명)**&#xC73C;로 수정하세요. (한글 폰트 파일명의 경우 " "입력)

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

`2` @charset "UTF-8"; \
`3` @import url('<http://fonts.googleapis.com/earlyaccess/nanumgothic.css>'); \
`4` /\*\*\
`5` \*html 리셋 css 입니다.\
`6` \*/\
`7` \*{\
`8` margin:0;\
`9` padding:0; } body {\
`10` color:#714171;\
`11` font-family: Nanum Gothic, AppleGothic,Dotum,"돋움",sans-serif;\
`12` font-size:12px;\
`13` line-height:1.4;\
`14` }

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

</details>

> #### 상품상세

<details>

<summary>카테고리 스타일 변경하기(폰트/컬러/보더)</summary>

![](/files/5nvEn7BmwHVkRlvHpmBg)

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

&#x20;**css > gd\_contents.css&#x20;**<mark style="color:red;">**50줄**</mark>

`50` .cg-main > h3 {     \
`51` **padding**:32px 0 0;     \
`52` <mark style="background-color:orange;">**color:**</mark><mark style="background-color:orange;">#000;</mark>  \
`53` <mark style="background-color:orange;">**font-size**</mark><mark style="background-color:orange;">:18px;</mark>    \
`54` **text-align**:center; \
`55` }

2. 박스 라인의 border(선), color(색상) 값을 변경해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**56줄**</mark>

`56` .cg-main .weekly-best {\
`57` **margin**:17px 0 0;\
`58` **padding**:30px 0 0;\
`59` **borde**r:2px solid #d7d7d7; \
`60` }

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

**css > gd\_contents.css&#x20;**<mark style="color:red;">**193줄**</mark>

`193` .item-display .list ul li .price .cost strong { \
`194` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#333;</mark> \
`195` **font-family**:arial; \
`196` <mark style="background-color:orange;">**font-size**</mark><mark style="background-color:orange;">:16px;</mark> \
`197` }

</details>

<details>

<summary>카테고리 라인컬러 변경하기</summary>

![](/files/hlcYw1wELqglsxTUdN9g)

* 카테고리 라인컬러 수정은 color(색상) 값을 변경해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**76줄**</mark>

`76` .view .goods-list .align { \
`77` **height**:28px; \
`78` **margin**:12px 0 20px; \
`79` **padding**:9px 0 10px; \
`80` **border-top**:1px solid <mark style="background-color:orange;">#717171;</mark> \
`81` **border-bottom**:1px solid <mark style="background-color:orange;">#dadada;</mark> \
`82` **clear**:both; \
`83` }

</details>

<details>

<summary>상품상세 상단 라인 컬러 변경하기(컬러/사이즈/폰트)</summary>

![](/files/0J8U5uZbi04LOhD2ZgTw)

1. 상품명 아래 라인의 border(선), font-color(색상) 값을 변경합니다.

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

`347` .goods-view .goods .info .item ul li:first-child { \
`348` **display:**&#x62;lock; \
`349` <mark style="background-color:orange;">**border-top**</mark><mark style="background-color:orange;">:1px solid #707070;</mark> \
`350` **margin-top**:5px; \
`351` }

2. 리스트항목 아래 라인의 border(선) 값을 변경합니다.

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

`3773` .order-goods { \
`3774` **background**:#f5f5f5; \
`3775` **border-top**:none; \
`3776` <mark style="background-color:orange;">**border-bottom**</mark><mark style="background-color:orange;">:2px solid #3e3d3c;</mark> \
`3777` }

</details>

<details>

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

![](/files/61ZXsKsOoFFeqJP8vlho)

1. &#x20;장바구니 버튼의 border(선), font-color(색상) 값을 변경해줍니다.

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

`927` .skinbtn.point1 { \
`928` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">:1px solid #3e3d3c;</mark> \
`929` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#3e3d3c;</mark> \
`930` } \
`931` .skinbtn.point1:hover { \
`932` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">: 1px solid #fa2828;</mark> \
`933` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#4f4e4d;</mark> \
`934` }

2. 장바구니 버튼의 width(가로), height(세로), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

&#x20;**css > gd\_contents.css&#x20;**<mark style="color:red;">**5478줄**</mark>

`5478` .skinbtn.point1.btn-add-cart, \
`5479` .skinbtn.point1.btn-add-wish { \
`5480` <mark style="background-color:orange;">**width**</mark><mark style="background-color:orange;">:152px;</mark> \
`5481` <mark style="background-color:orange;">**height**</mark><mark style="background-color:orange;">:61px;</mark> \
`5482` **line**-**height**:59px; \
`5483` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">:16px;</mark> \
`5484` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**weight**</mark><mark style="background-color:orange;">:bold;</mark> \
`5485` }

3. 바로 구매 버튼의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

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

`938` .skinbtn.point2 { \
`939` **background**:#3e3d3c; \
`940` **border**: 1px solid #3e3d3c; \
`941` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fff;</mark> \
`942` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**weight**</mark><mark style="background-color:orange;">:bold;</mark> \
`943` }\
`944` .skinbtn.point2:hover { \
`945` **background**:#4f4e4d; \
`946` **order**:1px solid #4f4e4d; \
`947` }

4. 바로 구매 버튼의 width(가로), height(높이), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**5486줄**</mark>

`5486` .skinbtn.point2.btn-add-order {\
`5487` <mark style="background-color:orange;">**width**</mark><mark style="background-color:orange;">:242px;</mark> \
`5488` <mark style="background-color:orange;">**height**</mark><mark style="background-color:orange;">:61px;</mark> \
`5489` **line**-**height**:59px; \
`5490` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">: 20px;</mark> \
`5491` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**weight**</mark><mark style="background-color:orange;">:bold;</mark> \
`5492` }

</details>

<details>

<summary>상품상세 탭스타일 변경하기</summary>

![](/files/gEm0LaqM1HPqf6SIVJfQ)

1. 선택된 탭의 border(선), color(색상) 값을 변경합니다.

**css > gd\_goods\_view\.css&#x20;**<mark style="color:red;">**708줄**</mark>

`708` .multiple-topics .tab a.on { \
`709` **position**: relative; \
`710` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">: 1px solid #707070;</mark> \
`711` **border**-**bottom**: 1px solid #fff; \
`712` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #111;</mark> \
`713` **font**-**weight**: bold; \
`714` }

2. 비활성화 탭의 border(선), color(색상), font-size(사이즈) 값을 변경합니다.

**css > gd\_goods\_view\.css&#x20;**<mark style="color:red;">**688줄**</mark>

`688` .multiple-topics .tab a { \
`689` **float**: left; \
`690` **width**: 20%; \
`691` **height**: 54px; \
`692` **padding**: 16px 0 0; \
`693` **margin**: 0 0 0 -1px; \
`694` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">: 1px solid #dfdfdf;</mark> \
`695` **border**-**bottom**: 1px solid #707070; \
`696` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #787878;</mark> \
`697` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">: 13px;</mark> \
`698` **text**-**align**: center; \
`699` -webkit-box-sizing: border-box; \
`700` -moz-box-sizing: border-box; \
`701` **box**-**sizing**: border-box; \
`702` }

3. 수량 표시의 font-color(색상) 값을 변경합니다.

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

`716` .multiple-topics .tab a strong { \
`717` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #3e3d3c;</mark> \
`718` }

</details>

<details>

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

![](/files/P8Ja5Au7N5WuP4ajMGjH)

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

**css > gd\_goods\_view\.css&#x20;**<mark style="color:red;">**304줄**</mark>

`304` .goods-view .goods .info .top .tit h2 { \
`305` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #111;</mark> \
`306` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">: 22px;</mark> \
`307` }

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

**css > gd\_goods\_view\.css&#x20;**<mark style="color:red;">**420줄**</mark>

`420` .goods-view .goods .info .item ul li.price > div strong { \
`421` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #3e3d3c;</mark> \
`422` **font**-**family**: arial; \
`423` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">: 20px;</mark> \
`424` }

</details>

> #### 주문결제

<details>

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

![](/files/qgRwzop24dJeuyEmZz1e)

1. 장바구니 최종 결제금액의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**1319줄**</mark>

`1319` .order-page .price-box > div p .total { \
`1320` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fa2828;</mark> \
`1321` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size:**</mark> <mark style="background-color:orange;"></mark><mark style="background-color:orange;">20px;</mark> \
`1322` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**weight**</mark><mark style="background-color:orange;">:bold;</mark> \
`1323` }

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

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

`927` .skinbtn.point1 { \
`928` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">: 1px solid #fa2828;</mark> \
`929` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fa2828;</mark> \
`930` } \
`931` .skinbtn.point1:hover { \
`932` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">: 1px solid #fa2828;</mark> \
`933` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fa2828;</mark> \
`934` } \
`935` .skinbtn.point1.cart-orderselect { \
`936` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">:14px;</mark> \
`937` }

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

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

`938` .skinbtn.point2 { \
`939` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">:#fa2828;</mark> \
`940` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">: 1px solid #fa2828;</mark> \
`941` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fff; font-weight:bold;</mark> \
`942` } \
`943` .skinbtn.point2:hover { \
`944` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">:#fa2828;</mark> \
`945` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">:1px solid #fa2828;</mark> \
`946` } \
`947` .skinbtn.point2.cart-orderall { \
`948` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">:14px;</mark> \
`949` }

</details>

<details>

<summary>결제정보 폰트 변경하기(컬러)</summary>

![](/files/TL6xOBLqgm0KDhRg2WiR)

최종 결제금액의 color(색상) 값을 변경해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**2141줄**</mark>

`2141` .table1 > table > tbody > tr >td {\
`2142` **border**-**bottom**: 1px solid #dbdbdb; \
`2143` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">: #fa2828;</mark> \
`2144` }

</details>

<details>

<summary>결제금액 스타일 변경하기(컬러/사이즈/굵기)</summary>

![](/files/frajeT0kMGe8xfKxT1gi)

1. 원하는 배경색상의 background(배경) 컬러 값으로 변경해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**1546줄**</mark>

`1546` .order-page .how-to-pay .method .receipt .selection { \
`1547` **padding**:15px 0; \
`1548` <mark style="background-color:orange;">**background**</mark><mark style="background-color:orange;">: #fa2828;</mark> \
`1549` }

2. 최종 결제금액의 font-size(사이즈) 값을 변경하고 color(색상) 값을 추가해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**1599줄**</mark>

`1599` .order-page .how-to-pay .buy .final-settlement span strong { \
`1600` **position**:relative; \
`1601` **top**:5px; \
`1602` <mark style="background-color:orange;">**font**</mark><mark style="background-color:orange;">-</mark><mark style="background-color:orange;">**size**</mark><mark style="background-color:orange;">: 30px;</mark> \
`1603` <mark style="background-color:orange;">**color**</mark> <mark style="background-color:orange;"></mark><mark style="background-color:orange;">: #fa2828;</mark> \
`1604` }

3. 박스라인의 border(선) 컬러 값을 변경해줍니다.

**css > gd\_contents.css&#x20;**<mark style="color:red;">**1584줄**</mark>

`1584` .order-page .how-to-pay .buy .final-settlement { \
`1585` **padding**:13px 46px 20px 0; \
`1586` <mark style="background-color:orange;">**border**</mark><mark style="background-color:orange;">:2px solid #d6d6d6;</mark> \
`1587` **text**-**align**:right; \
`1588` }

4. 결제하기 버튼의 color(색상), font-size(사이즈) 값을 변경해줍니다.

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

`938` .skinbtn.point2 { \
`939` **background**:#3e3d3c; \
`940` **border**: 1px solid #3e3d3c; \
`941` <mark style="background-color:orange;">**color**</mark><mark style="background-color:orange;">:#fff;</mark> \
`942` **font**-**weight**:bold; \
`943` }

<br>

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