> 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/macaroom/pc-guide.md).

# Macaroom\_PC 스킨 가이드

> 공통

<details>

<summary>컬러 코드 변경하기</summary>

1. Macaroom 스킨에 적용되어 있는 기본 컬러 코드는 **#ff5f57**이다.
2. \[관리자 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다.
3. **스타일시트/CSS 변경**
   * 좌측 하단 폴더 트리 내 \[스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다.
   * common.css를 더블 클릭하여 *common/common.css* 파일을 연다. ![common디렉토리](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FJ1umAa3qnn7tgf3lLWSb%2F2024-12-11%2011_59_39.281.png?alt=media\&token=67add14c-09e9-4b89-bb9c-c1291394ed7f)
4. 화면 최상단에서 `--primary-default`의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다.

```css
:root {
  --primary-default: #ff5f57; /* 포인트 컬러 */
  --primary-hover: #ff8680; /* 포인트 컬러 hover */
  --secondary-default: #ffae44; /* 서브 컬러 */
  --gray-dark: #e2dede;
  --gray: #ededed;
  --black: #272727;
  --font-size: 14px; /* 기본 폰트 사이즈 */
  --font-family: "Pretendard Variable"; /* 기본 폰트 명 */
  --second-font-family: "Afacad";
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --min-width: 1440px; /* 화면이 최소로 작아질 수 있는 너비 */
  --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */
}
```

</details>

<details>

<summary>GNB(상단 공통) 스타일 변경하기</summary>

<img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F9NiE0EkZwHAguzwwFWjt%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-11%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.50.04.png?alt=media&#x26;token=f9540642-b95a-4307-b346-256ac1306371" alt="매치포인트-GNB" data-size="original">

파일명 : *css/layout/layout.css*

1. 상단 메뉴 텍스트의 스타일을 변경할 수 있다.

```css
.top_member_box > li a {
    display: inline-block;
    color: #4F4F4F;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
```

2. 장바구니 담긴상품 수량 스타일을 변경할 수 있다.

```css
.cart-count {
  width: 20px;
  height: 20px;
  background-color: var(--primary-default);
  color: #fff;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  transform: translate(2px, -3px);
}
```

3. 상단 메뉴의 배경색을 변경할 수 있다.

```css
#header .header_top {
    background-color: #fff;
    max-width: var(--max-width);
    min-width: calc(var(--max-width) - 20px);
    margin-inline: auto;
}
```

4. 카테고리 전체보기 메뉴 패널의 스타일을 변경할 수 있다.

```css
.gnb_allmenu_wrap {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 999;
    border-top: 2px solid #272727;
    border-bottom: 2px solid #272727;
    max-height: 672px;
    min-height: 396px;
}
```

5. 카테고리 메뉴의 스타일을 변경할 수 있다.

```css
.header_gnb .gnb_allmenu_box a,
.header_gnb .gnb_allmenu_box button {
    color: var(--black);
    font-size: 24px;
    font-weight: 400;
    height: 64px;
    line-height: 64px;
    width: 100%;
    text-align: left;
    display: block;
}
```

6. 검색창의 스타일을 변경할 수 있다. 6-1) 검색 아이콘을 변경할 수 있다.

```css
.top-search-btn {
    position: absolute;
    top: 1px;
    right: 1px;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    background: #fff url(../../img/common/btn/btn_top_search.svg) no-repeat right;
    text-indent: -9999em;
}
```

6-2) 검색 인풋창의 스타일을 변경할 수 있다.

```css
#header .top_search .top_text_cont .top_srarch_text {
    display: block;
    float: right;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    box-sizing: border-box;
    -moz-transition: all 0.35s;
    -webkit-transition: all 0.35s;
    border: 1px solid transparent;
}
```

6-3) 최근 검색어 레이아웃의 스타일을 변경할 수 있다.

```css
.recent_box {
    float: left;
    width: 333px;
    min-height: 65px;
    font-size: 12px;
    text-align: center;
    border-right: none 0;
    vertical-align: top;
}
```

6-4) 추천상품 레이아웃의 스타일을 변경할 수 있다.

```css
.recom_box {
    display: inline-block;
    width: 148px;
    min-height: 218px;
    padding: 12px 15px 10px;
    font-size: 10px;
}
```

</details>

<details>

<summary>푸터(하단 공통) 스타일 변경하기</summary>

<img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fu1txTqsN1ZIIycKnNaVk%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-23%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.24.28.png?alt=media&#x26;token=de07cc44-ee69-4fb3-8aa1-e46adff2f2f0" alt="푸터-하단 공통" data-size="original">

파일명 : *css/layout/layout.css*

1. 푸터 메뉴의 스타일을 변경할 수 있다.

```css
.foot_list ul li a {
    padding: 0 16px;
    font-weight: 700;
}

.foot_list ul .divider {
    display: inline-block;
    width: 1px;
    background-color: #fff;
    height: 12px;
}
```

2. 푸터 정보 영역의 스타일을 변경할 수 있다.

```css
.foot_cont .foot_info {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.content_info .cs_center p,
.content_info .bank_info p,
.content_info .notice_list li a {
    color: #fff;
    font-family: 'Pretendard Variable';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
```

</details>

<details>

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

1. \[관리자 페이지 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다.
2. 좌측 하단 폴더트리 내 \[스타일시트/CSS]를 더블 클릭하여 스타일시트 리스트 중 *reset.css* 파일을 연다.
3. *reset.css* 스타일시트의 3번째 줄에 `@import url(’외부 스타일시트 경로’)`을 추가한다.

```css
/* css/reset.css */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');
```

4. `font-family`의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Pretendard variable(변경할 폰트명)으로 수정한다. (한글 폰트 파일명의 경우 " "입력)

```css
/* css/common/common.css */
.:root {
    ...
    --font-family: 'Pretendard variable';
    --second-font-family: "Afacad";
    ...
}
```

*common.css* `--font-family`에서 변경된 폰트는 *reset.css* 에서 하위 코드에 적용된다.

```css
/* css/reset.css */
.godo * {
   font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}

...

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

⚠️ 주의) 웹 폰트 사용시 속도 저하가 발생할 수 있다.

</details>

> 메인

<details>

<summary>메인 우측 - 최근 본 상품 변경하기</summary>

<img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FirqSS1SIa21rPBjWydg6%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-23%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.29.32.png?alt=media&#x26;token=92b974b2-66d1-4754-a91d-94a5f57e12fb" alt="메인우측" data-size="original">

파일명 : *css/layout/layout.css*

최근 본 상품 영역의 스타일을 지정할 수 있다.

```css
/* 최근 본 상품 목록 영역 */
.scroll_right_cont {
    min-width: 72px;
    padding: 0px;
    background: none;
    color: #333;
}

/* 타이틀 (예: TODAY VIEW) */
.scroll_right_cont h4 {
    text-align: center;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 12px;
    text-transform: uppercase;
}

/* 상품 마우스 오버 시 노출되는 영역 */
.scroll_right_cont .src_box {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 191px;
    height: 72px;
    padding: 5px 0 0 7px;
    border: 1px solid #999999;
    background: #ffffff;
    text-align: left;
    z-index: 10;
}

/* 가격 스타일 */
.scroll_right_cont .src_box strong {
    display: block;
    color: var(--primary-default);
}
```

</details>

<details>

<summary>상품 진열 스타일 변경하기</summary>

<img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FiKlN7SlDZzCzkc5Xl87d%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-23%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.33.22.png?alt=media&#x26;token=ffee6385-8911-4803-a643-8d64b3772e01" alt="메인상품진열1" data-size="original">

파일명 : *css/goods/list.css*

1. 상품 진열 영역의 공통 스타일을 변경할 수 있다.

```css
/* 상품 진열 타이틀 */
.goods_list_tit h3 {
  color: var(--black);
  text-align: center;
  font-family: var(--second-font-family);
  font-size: 44px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* 상단 더보기 버튼 */
.btn_goods_more .btn_goods_view_more {
  color: #7D7D7D;
  font-size: 14px;
  font-weight: 600;
  line-height: 30px;
  padding-right: 14px;
}

/* 하단 더보기 버튼 컨테이너 */
.btn_goods_down_more {
  width: 100%;
  text-align: center;
  margin-top: 56px;
}

/* 하단 더보기 버튼 */
.btn_goods_down_more .btn_goods_view_down_more {
  background-color: #272727;
  padding: 0 48px;
  color: #fff;
  text-align: center;
  font-family: Afacad;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  height: 56px;
}
```

2. 상품 아이템의 스타일을 변경할 수 있다.

```css
/* 브랜드명 */
.item_tit_box .item_brand {
  display: block;
  color: var(--primary-default);
  font-family: "Pretendard Variable";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}

/* 상품명 */
.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: 500;
  overflow: hidden;
  line-height: 22px;
  color: #272727;
}

/* 가격 */
.item_money_box .item_price {
  padding: 0;
  color: #272727;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
}
```

</details>

> 상품 상세

<details>

<summary>상품 상세 페이지 - 상단 영역 변경하기</summary>

<img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fo1bAAegn03OxsXodYDSC%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-23%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.37.05.png?alt=media&#x26;token=bdd822d3-1026-468e-9b23-ba68242b1b4f" alt="상품상단" data-size="original">

파일명 : *css/goods/goods.css*

1. 상품 상세 페이지에서 상품명과 상품 항목 레이블의 스타일을 지정할 수 있다.

```css
/* 상품 상세 - 상품명 */
.item_detail_tit h3 {
    width: 405px;
    font-size: 18px;
    word-break: break-all;
}

/* 항목 레이블 (제목) */
.item_detail_list dt {
    float: left;
    width: 80px;
    margin: 0 10px 0 0;
    color: #888888;
    font-weight: normal;
    word-wrap: break-word;
}
```

2. \[공유], \[조건별배송] 버튼의 스타일을 지정할 수 있다.

```css
.btn_gray_list a, .btn_gray_list button {
    display: inline-block;
    padding: 0 0 0 11px;
    border: 1px solid #999;
    vertical-align: middle;
}
```

3. 총 합계 금액의 스타일을 지정할 수 있다.

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

4. \[장바구니], \[찜하기], \[바로 구매] 버튼의 스타일을 지정할 수 있다.

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

/* 바로구매 버튼 */
.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;
  font-weight: bold;
}
```

</details>

<details>

<summary>상품 상세 페이지 - 탭 스타일 변경하기</summary>

<img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FhKdxaaJIMSlrTJ3JsMD4%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-23%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.40.14.png?alt=media&#x26;token=b0597bf8-cafb-4e44-997c-632164606dcc" alt="상품상세-탭" data-size="original">

파일명 : `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;
}

/* 선택된 탭 메뉴 아이템 */
.item_goods_tab li.on a {
    padding-top: 18px;
    margin-top: 8px;
    color: #333333;
    font-weight: bold;
    border-bottom: 2px solid #ffffff;
}

/* 탭 메뉴 아이템 텍스트 강조 시 (상품후기, 문의 몇건인지 표시할 때 사용) */
.item_goods_tab li a strong {
    color: var(--primary-default);
}
```

</details>

> 주문결제

<details>

<summary>장바구니 페이지 스타일 변경하기</summary>

<img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fpn55HwC4CpyDiXX8iZ3x%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-23%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.42.00.png?alt=media&#x26;token=85069325-eb82-4b39-8304-42eb487c64cd" alt="장바구니 페이지" data-size="original">

파일명 : *css/order/order.css*

1. 장바구니 타이틀의 스타일을 지정할 수 있다. (주문서 공통)

```css
/* 상품 상세 - 상품명 */
.order_wrap .order_tit h2 {
    float: left;
    font-size: 28px;
    color: #222222;
}
```

2. 브레드크럼(주문 단계)의 스타일을 변경할 수 있다. (주문서 공통)

```css
.order_wrap .order_tit ol li {
    float: left;
    font-size: 14px;
    color: #d1d1d1;
}

/* 현재 단계를 나타내는 스타일 */
.order_wrap .order_tit .page_on {
    color: #000;
    font-weight: bold;
}
```

3. 장바구니에 담긴 상품 목록 테이블의 스타일을 변경할 수 있다. (주문서 공통)

```css
.order_table_type table {
    width:100%;
    border:0;
    border-spacing:0;
    border-collapse:collapse;
    text-align:center;
}
.order_table_type th {
    padding:9px 10px 10px 10px;
    border-top:1px solid #999999;
    border-bottom:1px solid #dbdbdb;
    background:#f7f7f7;
}
.order_table_type td { 
    height: 31px;
    padding: 15px 10px 14px 10px;
    color: #777777;
    border-bottom: 1px solid #dbdbdb;
    background:#ffffff;
}
```

4. \[선택 상품 주문], \[전체 상품 주문] 버튼의 스타일을 변경할 수 있다.

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

/* 전체 상품 주문 */
.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;
}
```

</details>

<details>

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

<img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FDT349BvNOxknNMlK1Pyb%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-23%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.47.58.png?alt=media&#x26;token=393acb08-a99c-4412-a963-18d7a589050f" alt="주문결제페이지" data-size="original">

파일명 : *css/order/order.css*

1. 서브 타이틀, 설명 텍스트 및 최종 결제 금액 등 스타일을 변경할 수 있다.

```css
/* 서브 타이틀 */
.order_zone_tit h4 {
    font-size: 16px;
}

/* 설명 */
.order_zone_tit span {
    padding: 0 0 0 10px;
    color: #777777;
    font-size: 12px;
    font-weight: normal;
}

/* 결제 최종 금액 */
.payment_final_total dd {
    display: inline-block;
    font-size: 30px;
    color: var(--primary-default);
}
```

2. \[결제하기]버튼의 스타일을 변경할 수 있다.

```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/macaroom/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.