@charset "utf-8";
/*** 
    ### 공용 Form CSS 문서 ###

    문의, 회원가입, 로그인, 장바구니, 주문서, 게시판 등 여러 페이지에서 공통으로 사용하는 CSS입니다.

    각 영역은 큰 주석을 기준으로 구분되어 있으며, 필요한 스타일은 `Ctrl + F`로 해당 섹션을 검색하여 바로 찾을 수 있습니다.

    ---

    ## 섹션 바로가기

    CSS 파일에서 `Ctrl + F`를 누른 후 아래 검색어를 입력하면 해당 영역으로 바로 이동할 수 있습니다.

    | 구분          | `Ctrl + F` 검색어 | 주요 내용                       |
    | ----------- | -------------- | --------------------------- |
    | 레이아웃        | ** 레이아웃         | 공용 폼 기본 레이아웃                |
    | 버튼          | ** 버튼           | 공용 버튼 및 CRUD 버튼             |
    | 인풋 필드       | ** 인풋 필드        | 기본 입력 필드                    |
    | 특수 인풋       | ** 특수 인풋        | 체크박스, 라디오, textarea, select |
    | Success 페이지 | ** success 페이지  | 완료 및 성공 안내 화면               |
    | 서브페이지 탭     | ** 서브페이지 탭      | 서브페이지 탭 UI                  |
    | 페이징         | ** 페이징          | 페이지 이동 UI                   |
    | 로그인         | ** 로그인          | 로그인 관련 UI                   |
    | 회원가입        | ** 회원가입         | 회원가입 및 약관 동의 UI             |
    | 장바구니        | ** 장바구니         | 장바구니 상품 및 결제 정보             |
    | 주문서 작성      | ** 주문서 작성       | 주문서 작성 UI                   |
    | 공용 게시판      | ** 공용 게시판       | 게시판 검색, 목록, 상세, 댓글          |

    > **사용 방법**
    >
    > `Ctrl + F` → 검색어 입력 → CSS의 해당 큰 주석 영역으로 이동

    예시:
    `Ctrl + F` → `특수 인풋` 검색 → `특수 인풋` CSS 영역으로 이동

    ---

    ## 1. 레이아웃

    공용 폼에서 사용하는 기본 레이아웃과 입력 영역의 구조를 관리합니다.

    * `.default-form` : 공용 폼 기본 영역
    * `.default-inner` : 폼 내부 영역
    * `.default-write` : 입력 영역
    * `.default-label` : 입력 항목 라벨
    * `.default-field` : 입력 필드 영역
    * `.validation-text` : 유효성 검사 문구
    * `.default-heading` : 폼 제목

    ---

    ## 2. 버튼

    공용으로 사용하는 버튼과 CRUD 관련 버튼 스타일을 관리합니다.

    * `.default-button` : 기본 버튼
    * `.success` : 확인 및 완료 버튼
    * `.cancel` : 취소 버튼
    * `.delete` : 삭제 버튼
    * `.back` : 이전/뒤로가기 버튼
    * `.oauth` : OAuth 로그인 버튼
    * `.crud-buttons` : CRUD 버튼 영역
    * `.crud-button` : CRUD 버튼
    * `.create` : 등록 버튼
    * `.update` : 수정 버튼
    * `.default-btns` : 버튼 그룹
    * `.field-button` : 입력 필드와 함께 사용하는 버튼

    ---

    ## 3. 인풋 필드

    일반적인 입력 필드와 특정 입력 목적에 맞춘 입력 영역을 관리합니다.

    * `.default-input` : 기본 입력 필드
    * `.default-field__label` : 입력 필드 라벨
    * 아이디 입력 영역
    * 전화번호 입력 영역
    * 주소 입력 영역
    * 배송 메시지 입력 영역
    * 캡차 입력 영역
    * 작성자 인증 입력 영역

    입력 필드별 공통 스타일과 모바일 환경의 입력 영역을 함께 관리합니다.

    ---

    ## 4. 특수 인풋

    기본 텍스트 입력 외에 별도의 UI가 필요한 입력 요소를 관리합니다.

    * 체크박스
    * 라디오 버튼
    * `textarea`
    * `select`

    각 입력 요소의 기본 형태와 상태에 따른 스타일을 관리합니다.

    ---

    ## 5. Success 페이지

    처리 완료 또는 성공 상태를 사용자에게 안내하는 화면을 관리합니다.

    * `.success-interface` : 완료 화면 전체 영역
    * 완료 제목
    * 완료 안내 문구
    * 완료 화면 버튼

    페이지의 완료 상태를 일관된 형태로 표시할 수 있도록 구성되어 있습니다.

    ---

    ## 6. 서브페이지 탭

    서브페이지에서 사용하는 탭 UI를 관리합니다.

    * `.default-tab` : 탭 영역
    * `.default-tab-swiper` : Swiper 기반 탭 영역
    * `.default-tab__btn` : 탭 버튼
    * 활성화된 탭 상태

    탭 메뉴의 기본 스타일과 활성 상태를 관리합니다.

    ---

    ## 7. 페이징

    게시판 및 목록 페이지에서 사용하는 페이지 이동 UI를 관리합니다.

    * `.default-paging` : 페이징 영역
    * `.default-paging__button` : 페이지 이동 버튼

    페이지 번호 및 페이지 이동에 필요한 기본 스타일을 관리합니다.

    ---

    ## 8. 로그인

    로그인 페이지에서 사용하는 폼과 인증 관련 UI를 관리합니다.

    * `.login-section` : 로그인 영역
    * `.default-form.login` : 로그인 폼
    * `.login-tab` : 로그인 방식 탭
    * `.login-tab__button` : 로그인 탭 버튼
    * `.login-inner` : 로그인 내부 영역
    * `.login-auth` : 로그인 인증 영역
    * `.login-auth__label` : 인증 영역 라벨
    * `.login-auth__pages` : 인증 관련 페이지
    * OAuth 로그인 영역

    ---

    ## 9. 회원가입

    회원가입 단계, 약관 동의, 회원정보 입력에 필요한 UI를 관리합니다.

    ### 회원가입 단계

    * `.sign-up-steps` : 회원가입 단계 영역
    * `.sign-up-step` : 각 단계
    * `.sign-up-step__num` : 단계 번호
    * `.sign-up-step__text` : 단계명
    * 활성화 상태
    * 단계 사이의 화살표

    ### 약관 동의

    * `.default-form.terms` : 약관 동의 영역
    * `.terms__all-check` : 전체 약관 동의
    * `.terms__list` : 약관 목록
    * `.terms__drop` : 약관 상세 영역
    * `.terms__drop-click` : 약관 상세 열기 버튼
    * `.terms__drop-arrow` : 약관 상세 화살표
    * `.terms__detail` : 약관 상세 내용

    ### 회원정보 입력

    * `.default-form.sign-up` : 회원정보 입력 폼
    * `.sign-up__required` : 필수 입력 안내
    * `.is-required` : 필수 항목 표시

    ---

    ## 10. 장바구니

    장바구니에서 사용하는 상품 목록과 상품 정보를 관리합니다.

    * `.default-cart` : 장바구니 전체 영역
    * `.default-cart__area` : 상품 영역
    * 전체 선택 영역
    * 상품 아이템
    * 상품 삭제
    * 상품 이미지
    * 상품 상세 정보
    * 상품명 및 옵션
    * 상품 수량
    * 상품 가격
    * 결제 정보
    * 결제 금액

    상품 목록부터 결제 정보까지 장바구니에 필요한 UI를 구성합니다.

    ---

    ## 11. 주문서 작성

    주문서 작성 페이지에서 사용하는 주문 정보 및 결제 관련 UI를 관리합니다.

    * 주문 상품 정보
    * 주문자 정보
    * 배송 정보
    * 결제 정보
    * 결제 금액
    * 주문 관련 입력 영역

    장바구니와 연결되는 주문서 화면의 레이아웃과 입력 영역을 관리합니다.

    ---

    ## 12. 공용 게시판

    게시판에서 공통으로 사용하는 검색, 목록, 상세 및 댓글 UI를 관리합니다.

    ### 검색 및 필터

    * 게시판 검색 영역
    * 필터 영역
    * 검색 결과 영역

    ### 게시판 목록

    * 일반 목록형 게시판
    * 테이블형 게시판
    * 게시글 목록
    * 게시글 관련 정보

    ### 게시글 상세

    * 게시글 상세 영역
    * 게시글 내용
    * 댓글 영역
    * 이전글 / 다음글

    게시판의 목록부터 상세 페이지까지 공통으로 사용할 수 있도록 구성되어 있습니다.

    ---

    ## 반응형

    각 섹션에는 모바일 환경을 위한 반응형 스타일이 포함되어 있습니다.

    주요 기준은 `640px`, `380px` 등이며, 화면 크기에 따라 폼, 버튼, 입력 영역, 로그인, 회원가입, 장바구니, 게시판 등의 레이아웃을 조정합니다.
***/



/***************************** 공통 컴포넌트 ***********************/
/********************* css변수 */
:root {
    /* 메인색상, 그안에 텍스트 색상 */
/*    --mainColor: #222;  */
    --mainBgText: #fff;

    /* 취소, 아니오색상 그안에 텍스트 색상 */
    --cancelBg: #eee;
    --cancelBgText: #222;

    /* 삭제 색상 그안에 텍스트 색상 */
    --deleteBg: #cc0000;
    --deleteBgText: #fff;

    /* 필수입력 값 별표시 색상 */
    --isRequired: #ed2943;
}

/************************** 레이아웃 ***/
.default-form {width: 100%;}

.default-inner {display: flex; flex-direction: column; gap: 20px; margin-bottom: 50px;}

.default-write {width: 100%; display: flex; align-items: flex-start;}

.default-write_col {width: 100%; display: flex; flex-direction: column; gap: 8px;}

/* .default-write_col, label */
.default-write_col .default-label {margin: 0; width: 100%;}

/* .default-write_col, radio */
.default-write_col .default-field__radio {margin-top: 0;}

.default-label {font-size: 16px; color: #222; font-weight: 500; line-height: 1.4; letter-spacing: -.6px;
margin-top: .88em; width: 6.25em; margin-right: 1.5em;}

.default-field {font-size: 16px; width: calc(100% - 6.25em - 1.5em);}

.validation-text {font-size: 14px; color: #666; line-height: 1.4; letter-spacing: -.6px; word-break: keep-all;
margin-top: .71em;}

.default-heading {font-size: 20px; color: #222; line-height: 1.4; letter-spacing: -.6px;
padding-bottom: 1em; border-bottom: 1px solid #222; font-weight: 500; margin-bottom: 1em;}

@media screen and (max-width: 640px) {    
    .default-inner {margin-bottom: 30px;}

    .default-write {flex-direction: column; gap: 8px;}

    .default-label {font-size: 14px; width: 100%; margin: 0;}
    .default-field {font-size: 14px; width: 100%;}

    .validation-text {font-size: 12px;}

    .default-heading {font-size: 18px;}
}

@media screen and (max-width: 380px) {
    .default-heading {font-size: 16px;}
}

/*********************** 버튼 */
.default-button {display: flex; align-items: center; justify-content: center; width: 100%;
font-size: 18px; height: 50px; border-radius: .5em; cursor: pointer; line-height: 1.4;
letter-spacing: -.6px;}

/*** 성공, 다음...  ***/
.default-button.success {background: var(--mainColor); color: var(--mainBgText);}

/*** 취소, 아니오...  ***/
.default-button.cancel {background: var(--cancelBg); color: var(--cancelBgText);}

/*** 삭제...  ***/
.default-button.delete {background: var(--deleteBg); color: var(--deleteBgText);}

/***
    목록으로...  
    무조건 단일로 사용
***/
.default-button.back {background: var(--mainColor); color: var(--mainBgText); max-width: 11.11em;
margin: 0 auto;}

/*** 소셜로그인 ***/
.default-button.oauth {font-size: 16px; gap: .38em; border: 1px solid #ccc; color: #222;}

/*** 글쓰기, 글수정, 글삭제... ***/
.crud-buttons {display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;}

.crud-button {display: flex; align-items: center; justify-content: center; 
width: 100%; max-width: 6.25em; height: 40px; font-size: 16px;
border-radius: .5em;}

.crud-button.create {background: var(--mainColor); color: var(--mainBgText);}

.crud-button.update {background: var(--mainColor); color: var(--mainBgText);}

.crud-button.delete {background: var(--deleteBg); color: var(--deleteBgText);}

/*** 버튼이 여러개 일 시... ***/
.default-btns {display: flex; align-items: center; gap: 10px;}

/*** 인풋 필드와 같이 있는 버튼 ***/
.field-button {font-size: 16px; color: #222; border: 1px solid #666; border-radius: .5em;
text-align: center; width: 6.25em; height: 50px; background: none; cursor: pointer;}


@media screen and (max-width: 640px) {
    .default-button {font-size: 16px; height: 45px;}
    .default-btns {gap: 8px;}

    /*** 글쓰기, 글수정, 글삭제... ***/
    .crud-buttons {gap: 8px;}
    .crud-button {font-size: 14px;}

    /*** 버튼 3개 이상 ***/
    .default-btns.btns-more {flex-direction: column;}

    /*** 인풋 필드와 같이 있는 버튼 ***/
    .field-button {font-size: 14px; height: 45px;}
}

/*************************** 인풋 필드 */
.default-input {font-size: 16px; width: 100%; height: 50px; padding: 0 1.25em; border: 1px solid #ccc;
border-radius: .5em; display: block; outline: none; font-weight: 400;}
.default-input::placeholder {font-size: 14px; color: #999;}

.default-field__label {font-size: 16px; color: #666; line-height: 1.4; letter-spacing: -.6px; cursor: pointer;}

/*** 아이디 입력 ***/
.default-field__id {display: flex; gap: 5px;}
.default-field__id .default-input {width: calc(100% - 6.25em - 5px);}

/*** 휴대폰 번호 입력 ***/
.default-field__phone {display: flex; align-items: center; gap: 6px;}
.default-field__phone .default-input {width: 6.25em;}
.default-field__phone-dash {font-size: 16px; color: #222; line-height: 1; letter-spacing: -.6px; font-weight: 500;}

/*** 주소 ***/
.default-field.address > .default-input {margin-top: 5px;}

.default-field__address {display: flex; gap: 5px; margin-bottom: 5px;}
.default-field__address .default-input {max-width: 12.5em; width: calc(100% - 6.25em - 5px);}

/*** 배송요청사항 ***/
.default-field.message > .default-input {margin-top: 5px;}

/*** 자동등록방지 ***/
.default-field__captcha {display: flex; gap: 5px;}
.default-field__captcha .default-input {max-width: 300px; width: calc(100% - 6.25em - 5px);}
.captcha {font-size: 16px; width: 6.25em; height: 50px; border: 1px solid #ddd; border-radius: .5em;
overflow: hidden;}

/*** 댓글 등 작성자 인증 인풋 ***/
.default-write.author {gap: 50px;}
.default-write__author {display: flex; width: 400px;}
.default-write__author .default-input {max-width: 300px;}

@media screen and (max-width: 968px) {
    /*** 댓글 등 작성자 인증 인풋 ***/
    .default-write.author {flex-direction: column; gap: 20px;}
}

@media screen and (max-width: 640px) {
    .default-input {font-size: 14px; height: 45px;}
    .default-input::placeholder {font-size: 13px;}

    .default-field__label {font-size: 14px;}

    /*** 자동등록방지 ***/
    .captcha {font-size: 14px; height: 45px;} 

    /*** 댓글 등 작성자 인증 인풋 ***/
    .default-write__author {flex-direction: column; gap: 8px; width: 100%;}
}

/************************* 특수 인풋 */
/*** checkbox ***/
.default-field__check {font-size: 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: .88em;}
.default-checked {display: flex; align-items: center; gap: 4px;}
.default-checkbox {width: 18px; aspect-ratio: 1/1; accent-color: var(--mainColor); cursor: pointer;}

/*** radio ***/
.default-field__radio {font-size: 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: .88em;}
.default-radios {display: flex; align-items: center; gap: 4px;}
.default-radio {width: 16px; aspect-ratio: 1/1; accent-color: var(--mainColor); cursor: pointer;}

/*** textarea ***/
.default-textarea {width: 100%; height: 150px; padding: 20px; font-size: 16px; border: 1px solid #ddd;
border-radius: .5em; outline: none; resize: none; color: #222; font-family: inherit;}
.default-textarea::placeholder {font-size: 14px; color: #999;}

@media screen and (max-width: 640px) {
    /*** checkbox ***/
    .default-field__check {column-gap: 10px; margin-top: 0;}

    /*** radio ***/
    .default-field__radio {column-gap: 10px; margin-top: 0;}

    /*** textarea ***/
    .default-textarea {font-size: 14px; padding: 12px;}
}

@media screen and (max-width: 380px) {
    /*** checkbox ***/
    .default-checkbox {width: 16px;}

    /*** radio ***/
    .default-radio {width: 14px;}
}

/*** 셀렉트 박스 ***/
.default-select {font-size: 16px; width: 100%; height: 50px; padding: 0 1.25em; border: 1px solid #ccc;
border-radius: .5em; display: block; outline: none; font-weight: 400;
-webkit-appearance:none; /* 크롬 화살표 없애기 */
-moz-appearance:none; /* 파이어폭스 화살표 없애기 */
appearance:none; /* 화살표 없애기 */
background: url(../images/default-select-arrow.png) no-repeat 97% center / 12px;
}

@media screen and (max-width: 640px) {
    .default-select {font-size: 14px; height: 45px;}
}

/******************************** success 페이지 ***/
.success-interface {display: flex; flex-direction: column; align-items: center;}

.success-interface__title {font-size: 40px; color: #222; font-weight: 700; text-align: center;
word-break: keep-all; line-height: 1.4; letter-spacing: -.6px;
margin: .75em 0 .3em;}

.success-interface__text {font-size: 18px; color: #666; line-height: 1.4; letter-spacing: -.6px; word-break: keep-all;
text-align: center;}

.success-interface__button {font-size: 18px; color: var(--mainBgText); line-height: 1.4; letter-spacing: -.6px; cursor: pointer;
background: var(--mainColor); width: fit-content; display: flex; align-items: center; justify-content: center;
padding: .69em 1.67em; border-radius: .56em; margin-top: 4.44em;}

.success-interface__check {width: 90px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
background: var(--mainColor); border-radius: 50%;}

.success-interface__check svg path {stroke: var(--mainBgText);}


@media screen and (max-width: 640px) {
    .success-interface__title {font-size: 30px;}
    .success-interface__text {font-size: 16px;}

    .success-interface__button {font-size: 14px;}

    .success-interface__check {width: 70px;}
}

@media screen and (max-width: 380px) {
    .success-interface__title {font-size: 26px;}
    .success-interface__text {font-size: 15px;}

    .success-interface__check {width: 60px;}
}

/*************************** 서브페이지 탭 */
.default-tab {overflow: hidden; margin-bottom: 30px;}
.default-tab-swiper .swiper-slide {width: fit-content;}

.default-tab__btn {font-size: 16px; font-weight: 500; color: #666; border: 1px solid #ccc;
padding: .8em 1.25em; border-radius: .5em; text-align: center; min-width: 6.25em; display: flex;
align-items: center; justify-content: center; gap: .5em; 
transition: color .3s ease, background .3s ease, border-color .3s ease;}

.default-tab__btn:hover,
.default-tab__btn.is-active {color: var(--mainBgText); background: var(--mainColor); border-color: var(--mainColor);}

@media screen and (max-width: 768px) {
    .default-tab__btn {font-size: 14px;}
}

/******************************* 페이징 */
.default-paging {display: flex; align-items: center; justify-content: center; margin-top: 40px;}

.default-paging__button {display: flex; align-items: center; justify-content: center; width: 2.14em; aspect-ratio: 1/1;
font-size: 14px; color: var(--mainBgText); border-radius: 3px; background: #ccc; margin: 0 5px;}

.default-paging__button.prev,
.default-paging__button.next {background: none; margin: 0;}

.default-paging__button.is-active {background: var(--mainColor);}

@media screen and (max-width: 380px) {
    .default-paging__button {font-size: 12px;}
}
/***************************** 공통 컴포넌트 ***********************/


/***************************** 로그인 */
.login-section {width: 100%; padding: 100px 0;}
.login-section .sc_tit {text-align: center;}

.default-form.login {max-width: 500px; margin: 0 auto;}

.login-tab {display: flex; margin-bottom: 20px;}

.login-tab__button {width: 100%; display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 500; color: #222; height: 3em; border-bottom: 3px solid #eee;}

.login-tab__button:hover,
.login-tab__button.is-active {border-color: var(--mainColor);}

.login-inner {flex-direction: column; align-items: center; gap: 10px; display: none;}

.login-write {width: 100%; display: flex; flex-direction: column; gap: 10px;}

.login-inner.is-active {display: flex;}

.login-auth {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 80px;}

.login-auth__label {font-size: 14px; color: #666; line-height: 1.6; letter-spacing: -.6px;
cursor: pointer;}

.login-auth__pages {display: flex; align-items: center; gap: 21px;}

.login-auth__page {font-size: 14px; color: #666; line-height: 1.4; letter-spacing: -.6px; position: relative;}

.login-auth__page::after {position: absolute; top: 50%; right: -12px; transform: translateY(-50%);
content: ''; width: 1px; height: 10px; background: #ccc;}
.login-auth__page:last-child::after {display: none;}

.login-auth__balloon {position: absolute; bottom: -40px; left: 0; font-size: 12px; color: #222; display: flex;
align-items: center; justify-content: center; gap: 3px; letter-spacing: -.6px; padding: .5em;
border-radius: .83em; background: #eee; width: fit-content; white-space: nowrap; cursor: auto;}

.login-auth__balloon::after {content: ''; position: absolute; top: -8px; left: 1.67em; width: 0; height: 0;
border-left: .5em solid transparent; border-right: .5em solid transparent; border-bottom: .83em solid #eee;}

.oauth-inner {display: flex; flex-direction: column; gap: 10px;}

.oauth-title {font-size: 20px; font-weight: 500; color: #222; text-align: center; word-break: keep-all;
margin-bottom: 1em;}

@media screen and (max-width: 968px) {
    .login-section {padding: 50px 0;}

    .login-auth {margin-bottom: 60px;}
}

@media screen and (max-width: 640px) {
    .login-tab__button {font-size: 16px;}

    .oauth-title {font-size: 16px;}

    .default-button.oauth {font-size: 14px;}
}

@media screen and (max-width: 380px) {
    .login-auth__label {font-size: 13px;}

    .login-auth__pages {gap: 12px;}
    .login-auth__page {font-size: 13px;}
    .login-auth__page::after {right: -7.5px; height: 9px;}
}

/***************************** 회원가입 */
.sign-up-steps {display: flex; align-items: center; justify-content: center; gap: 40px;
margin-bottom: 80px;}

.sign-up-step {display: flex; flex-direction: column; align-items: center; gap: 8px;}

.sign-up-step__number {font-size: 20px; color: var(--mainBgText); background: #ccc; border-radius: 50%;
width: 2.5em; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
font-weight: 500; line-height: 1.4; letter-spacing: -.6px;}

.sign-up-step__text {font-size: 16px; color: #222; text-align: center; line-height: 1.4; letter-spacing: -.6px;}

.sign-up-step.is-active .sign-up-step__number {background: var(--mainColor);}

.sign-up-steps__arrow {display: flex; flex-direction: column; justify-content: center;}

.sign-up-steps__arrow span {width: 14px; height: 3px; border-radius: 3px; background: var(--mainColor); display: block;
position: relative;}

.sign-up-steps__arrow span:first-child {transform: rotate(45deg); top: -2.7px;}
.sign-up-steps__arrow span:last-child {transform: rotate(-45deg); top: 2.7px;}

/*** 필수 입력 값 별표시 색상 ***/
.is-required {color: var(--isRequired);}

@media screen and (max-width: 968px) {
    .sign-up-steps {margin-bottom: 8.5%;}
}

@media screen and (max-width: 640px) {
    .sign-up-steps {gap: 30px;}

    .sign-up-step__number {font-size: 18px;}
    .sign-up-step__text {font-size: 14px;}
}

@media screen and (max-width: 380px) {
    .sign-up-steps {gap: 20px;}

    .sign-up-step__number {font-size: 16px;}
    .sign-up-step__text {font-size: 13px;}

    .sign-up-steps__arrow span {width: 12px;}
    .sign-up-steps__arrow span:first-child {top: -2.2px;}
    .sign-up-steps__arrow span:last-child {top: 2.2px;}
}

/*** 약관동의 ***/
.default-form.terms {max-width: 800px; margin: 0 auto;}

.terms__all-check {padding: 20px; background: #f8f8f8; border-radius: 10px; margin-bottom: 30px;}
.terms__label {font-size: 16px; color: #222; cursor: pointer; line-height: 1.4; letter-spacing: -.6px;}

.terms__list {border-bottom: 1px solid #ddd; margin-bottom: 50px;}

.terms__drop {padding: 20px; display: flex; align-items: center; gap: 10px; justify-content: space-between;
border-top: 1px solid #ddd;}

.terms__drop-click {width: fit-content; display: flex; justify-content: flex-end;}

.terms__drop-arrow {transition: transform .3s ease;}

.terms__drop-click.is-active .terms__drop-arrow {transform: rotate(180deg);}

.terms__detail {padding: 20px; height: 220px; border: 1px solid #ddd; border-bottom: none; background: #f8f8f8;
overflow: auto; display: none;}

@media screen and (max-width: 640px) {
    .terms__all-check {margin-bottom: 20px;}

    .terms__list {margin-bottom: 30px;}

    .terms__detail {height: 180px;}
}

@media screen and (max-width: 380px) {
    .terms__all-check {padding: 12px; border-radius: 6px;}
    .terms__drop {padding: 12px;}

    .terms__detail {padding: 12px; height: 160px;}

    .terms__label {font-size: 14px;}
}

/*** 정보입력 ***/
.default-form.sign-up {max-width: 800px; margin: 0 auto;}

.sign-up__required {font-size: 18px; color: #222; font-weight: 500; word-break: keep-all;
margin-bottom: 20px;}

@media screen and (max-width: 640px) {
    .sign-up__required {font-size: 16px;}
}

@media screen and (max-width: 380px) {
    .sign-up__required {font-size: 14px;}
}

/***************************** 장바구니 */
/*** 공통 ***/
.default-cart {display: flex; gap: 50px;}

@media screen and (max-width: 1200px) {
    .default-cart {flex-direction: column;}
}

@media screen and (max-width: 640px) {
    .default-cart {gap: 30px;}
}

/*** 장바구니 아이템 영역 ***/
.default-cart__area {width: calc(100% - 400px - 50px);}

.default-cart__all-check {padding: 20px; border-top: 1px solid #ddd; display: flex; align-items: center;
justify-content: space-between; gap: 10px; border-bottom: 1px solid #1a1a1a;}

.cart__label {font-size: 14px; color: #222; line-height: 1.4;
letter-spacing: -.6px; cursor: pointer;}

.default-cart__bulk-delete {font-size: 14px; color: #666; line-height: 1.4; letter-spacing: -.6px;}

.default-cart__li {padding: 30px 20px; border-bottom: 1px solid #ddd; display: flex; position: relative;}

.default-cart__delate {position: absolute; top: 30px; right: 20px;}

.default-cart__product {display: flex; align-items: flex-start; gap: 10px;}

.default-cart__figure {width: 150px; aspect-ratio: 1/1; border: 1px solid #eee;}
.default-cart__image {width: 100%; height: 100%;}

.default-cart__detail {width: calc(100% - 150px - 10px - 18px); padding-left: 30px;}

.default-cart__product-name {font-size: 20px; color: #222; line-height: 1.4; letter-spacing: -.6px; font-weight: 600;
width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .75em;}

.default-cart__product-options {display: flex; flex-wrap: wrap; gap: 8px 15px;}

.default-cart__product-option {font-size: 16px; color: #666; line-height: 1.4; letter-spacing: -.6px; white-space: nowrap;
font-weight: 500;}

.default-cart__counted {margin-top: 50px; display: flex; align-items: center; justify-content: space-between; gap: 10px;}

.default-cart__prices {display: flex; align-items: center; gap: 10px;}

.default-cart__percent {font-size: 20px; color: #ed2943; line-height: 1.4; letter-spacing: -.6px; font-weight: 600;}
.default-cart__discount {font-size: 20px; color: #222; line-height: 1.4; letter-spacing: -.6px; font-weight: 600;}
.default-cart__actual {font-size: 14px; color: #999; line-height: 1.4; letter-spacing: -.6px;
text-decoration: line-through;}

.default-cart__quantity {display: flex; align-items: center;}

.default-cart__quantity-btn {width: 30px; aspect-ratio: 1/1; background: #fff; border: 1px solid #ddd;
cursor: pointer; font-weight: 500; font-size: 16px; color: #222; line-height: 1.2; letter-spacing: -.6px;}

.default-cart__input-number {font-size: 16px; color: #222; font-weight: 500; line-height: 1.4; letter-spacing: -.6px;
text-align: center; border: 1px solid #ddd; border-left: none; border-right: none; width: 30px; aspect-ratio: 1/1;
display: block; outline: none;}

/* 크롬, 사파리, 엣지, 오페라 */
.default-cart__input-number::-webkit-outer-spin-button,
.default-cart__input-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 파이어폭스 */
.default-cart__input-number[type="number"] {
    -moz-appearance: textfield;
}

@media screen and (max-width: 1200px) {
    .default-cart__area {width: 100%;}
}

@media screen and (max-width: 768px) {
    .default-cart__product-name {font-size: 16px;}

    .default-cart__product-options {column-gap: 10px;}
    .default-cart__product-option {font-size: 14px;}

    .default-cart__percent {font-size: 16px;}
    .default-cart__discount {font-size: 16px;}
    .default-cart__actual {font-size: 12px;}
}

@media screen and (max-width: 640px) {
    .default-cart__li {flex-direction: column; gap: 10px;}
    .default-cart__detail {width: 100%;}

    .default-cart__product-name {width: 100%;}

    .default-cart__counted {margin-top: 30px;}
}

@media screen and (max-width: 380px) {
    .default-cart__all-check {padding: 12px;}

    .default-cart__li {padding: 20px 12px;}

    .default-cart__delate {top: 20px; right: 12px;}

    .default-cart__figure {width: 100px;}

    .default-cart__detail {padding-left: 25px;}

    .default-cart__product-name {font-size: 15px;}

    .default-cart__product-option {font-size: 13px;}

    .default-cart__counted {flex-direction: column; align-items: flex-start;}
}

/*** 우측 고정 결제금액 영역 ***/
.default-cart__rail {width: 400px;}

.default-cart__pay-info {position: sticky; top: 110px; padding: 30px; background: #F8F8F8;
border-radius: 10px;}

.default-cart__pay-info .default-heading {margin-bottom: 0;}

.default-cart__pay-inner {display: flex; flex-direction: column; gap: 25px; margin: 30px 0;}

.default-cart__pay-li {display: flex; align-items: center; justify-content: space-between; gap: 10px;}

.default-cart__pay-heading {font-size: 16px; color: #666; line-height: 1.4; letter-spacing: -.6px;}
.default-cart__pay-text {font-size: 16px; color: #222; line-height: 1.4; letter-spacing: -.6px; font-weight: 600;}

.default-cart__pay-total {padding: 34px 0; border-top: 1px solid #ddd;
display: flex; align-items: center; justify-content: space-between; gap: 10px;}

.default-cart__pay-total:last-child {padding-bottom: 0;}

.default-cart__pay-total--heading {font-size: 18px; color: #222; line-height: 1.4; letter-spacing: -.6px; font-weight: 500;}

.default-cart__pay-total--price {font-size: 24px; color: #222; line-height: 1.4; letter-spacing: -.6px; font-weight: 600;}

@media screen and (max-width: 1200px) {
    .default-cart__rail {width: 100%;}

    .default-cart__pay-info {position: static;}
}

@media screen and (max-width: 640px) {
    .default-cart__pay-info {padding: 20px;}

    .default-cart__pay-inner {margin: 20px 0; gap: 15px;}

    .default-cart__pay-heading {font-size: 14px;}

    .default-cart__pay-text{font-size: 14px;}

    .default-cart__pay-total {padding: 24px 0;}

    .default-cart__pay-total--heading {font-size: 16px;}
    .default-cart__pay-total--price {font-size: 20px;}
}

/************************* 주문서 작성 */
.default-cart.order-sheet .default-cart__list {margin-bottom: 50px;}

.default-cart.order-sheet .default-cart__li {padding-left: 0; padding-right: 0; align-items: center;}

.default-cart.order-sheet .default-cart__detail {width: calc(100% - 150px); display: flex; flex-direction: column;
gap: 12px;}

.default-cart.order-sheet .default-cart__product-name {margin: 0;}

.default-cart__total {display: flex; align-items: center; gap: 20px;}

.default-cart__total-quantity {font-size: 16px; color: #222; line-height: 1.4; letter-spacing: -.6px;}

.default-cart__total-line {display: block; width: 1px; height: 10px; background: #222;}

.default-form.order-sheet .default-cart__heading {margin-bottom: 30px;}

.order-sheet__price {font-size: 16px; color: #ed2943; font-weight: 600; line-height: 1.4; letter-spacing: -.6px; margin-top: .88em;
display: flex; align-items: center;}

.default-cart__area .default-cart__pay-info {position: static; margin-bottom: 50px; display: none;}

@media screen and (max-width: 1200px) {
    .default-cart.order-sheet .default-cart__rail {display: none;}
    .default-cart__area .default-cart__pay-info {display: block;}
}

@media screen and (max-width: 768px) {
    .default-cart__total {gap: 10px;}
    .default-cart__total-quantity {font-size: 14px;}
    .default-cart__total-line {height: 8px;}
}

@media screen and (max-width: 640px) {
    .default-cart.order-sheet .default-cart__list {margin-bottom: 30px;}
    .default-cart.order-sheet .default-cart__li {align-items: flex-start;}
    .default-cart.order-sheet .default-cart__detail {width: 100%; padding-left: 0; gap: 10px;}

    .default-form.order-sheet .default-cart__heading {margin-bottom: 20px;}

    .order-sheet__price {margin-top: 0;}

    .default-cart__area .default-cart__pay-info {margin-bottom: 30px;}
}

/******************************* 공용 게시판 */
/*** 공통 ***/
.default-board-filter {display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 20px;}

.default-board-filter__result {font-size: 16px; color: #222; font-weight: 600; line-height: 1.4; letter-spacing: -.6px;}

.default-board-filter__search {width: 100%; max-width: 260px; height: 50px; border-radius: 8px; position: relative; overflow: hidden;}
.default-board-filter__input {display: block; width: 100%; height: 100%; font-size: 16px; padding: 0 60px 0 1.25em; color: #222;
outline: none; background: #f8f8f8;}

.default-board-filter__input::placeholder {font-size: 14px; color: #999;}

.default-board-filter__button {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 50px;
aspect-ratio: 1/1; background: none; border-radius: 8px; cursor: pointer;}

@media screen and (max-width: 640px) {
    .default-board-filter__search {height: 45px;}
    .default-board-filter__input {font-size: 14px;}

    .default-board-filter__button {width: 45px;}

    .default-board-filter__result {font-size: 14px;}
}

@media screen and (max-width: 500px) {
    .default-board-filter {flex-direction: column-reverse; align-items: flex-start;}
}

/*** ul 리스트 형식 ***/
.default-board__li {margin-bottom: 10px;}
.default-board__li:last-child {margin-bottom: 0;}

.default-board__link {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 30px; border-radius: 16px; 
background: #f8f8f8; border: 2px solid transparent; transition: border-color .3s ease;}

.default-board__detail {width: 80%; display: flex; align-items: center; gap: 12px;}

.default-board__title {font-size: 16px; color: #222; line-height: 1.4; letter-spacing: -.6px; font-weight: 600;
width: fit-content; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.default-board__badge {font-size: 12px; color: #1a1a1a; line-height: 1.4; letter-spacing: -.6px; white-space: nowrap;
display: flex; align-items: center; justify-content: center; padding: .5em 1.17em; background: #ddd; border-radius: 100px;}

.default-board__info {width: fit-content; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;}

.default-board__date {font-size: 16px; color: #222; line-height: 1.4; letter-spacing: -.6px; white-space: nowrap;}
.default-board__author {font-size: 14px; color: #666; line-height: 1.4; letter-spacing: -.6px; white-space: nowrap;}

.default-board__link:hover {border-color: #1a1a1a;}

@media screen and (max-width: 640px) {
    .default-board__link {padding: 15px; flex-direction: column; align-items: flex-start;}
    .default-board__detail {width: 100%;}

    .default-board__info {flex-direction: row; align-items: center; gap: 8px;}

    .default-board__title {font-size: 14px;}
    .default-board__date {font-size: 14px;}
}

/*** 테이블 형식 ***/
.default-board-table {width: 100%; border-collapse: collapse; border-spacing: 0; border-top: 1px solid #ddd;}

.default-board-table tr {border-bottom: 1px solid #ddd;}
.default-board-table tr:first-child {border-color: #1a1a1a;}

.default-board-table th {font-size: 16px; color: #222; padding: 1.13em .5em; font-weight: 500; text-align: center;
word-break: keep-all; line-height: 1.4; letter-spacing: -.6px;}

.default-board-table td {font-size: 16px; word-break: keep-all; line-height: 1.4; letter-spacing: -.6px; color: #222;
padding: 1.13em .5em; text-align: center;}

.default-board-table td.is-title {text-align: left; padding: 1.13em 1.5em; min-width: 0; max-width: 0;}

.default-board-table__link {display: flex; align-items: center; gap: 6px; width: 100%;}

.default-board-table__badge {font-size: 12px; color: var(--mainBgText); line-height: 1.2; letter-spacing: -.6px; background: var(--mainColor);
display: flex; align-items: center; justify-content: center; padding: .5em 1.17em; border-radius: 100px;}

.default-board-table__title {line-height: 1.4; letter-spacing: -.6px; font-weight: 400;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;}

@media screen and (max-width: 1080px) {
    .default-board-table th {font-size: 14px;}
    .default-board-table td {font-size: 14px;}
}

@media screen and (max-width: 640px) {
    .default-board-table {display: block;}

    .default-board-table tr:first-child {display: none;}
    .default-board-table td:first-child {display: none;}

    .default-board-table colgroup {display: none;}

    .default-board-table tbody,
    .default-board-table tr,
    .default-board-table td {width: 100%; display: block;}

    .default-board-table tr {display: flex; flex-direction: column; align-items: flex-start; padding: 10px;
    gap: 8px;} 

    .default-board-table td {text-align: left; padding: 0;}

    .default-board-table td.is-title {max-width: 100%; padding: 0;}
}

/*** 글작성, 글읽기 ***/
.default-post {border-top: 1px solid #1a1a1a; margin-bottom: 50px;}
.default-post:last-child {margin-bottom: 0;}

.default-post__header {padding: 30px 0;}

.default-post__title {font-size: 30px; word-break: keep-all; font-weight: 600; color: #222;
line-height: 1.4; letter-spacing: -.6px; margin-bottom: .8em;}

.default-post__author {display: flex; align-items: center; gap: 10px 20px;}

.default-post__author-text {font-size: 16px; color: #222; line-height: 1.4; letter-spacing: -.6px;
display: flex; align-items: center; gap: .31em; font-weight: 500;}
.default-post__author-text span {color: #666;}

.default-post__body {border: 1px solid #ddd; border-left: none; border-right: none;
padding: 50px 0;}

@media screen and (max-width: 1080px) {
    .default-post__title {font-size: 26px;}
}

@media screen and (max-width: 640px) {
    .default-post {margin-bottom: 30px;}

    .default-post__header {padding: 20px 0;}
    .default-post__title {font-size: 22px;} 

    .default-post__author-text {font-size: 14px;}

    .default-post__body {padding: 30px 0;}
}

/*** 댓글 목록 ***/
.default-comments {margin-bottom: 50px;}
.default-comments:last-child {margin-bottom: 0;}

.default-comments .default-heading {margin-bottom: 0;}

.default-comments__li {border-bottom: 1px solid #ddd; position: relative;}

.default-comments__delete {position: absolute; top: 20px; right: 20px; font-size: 12px; color: #666; line-height: 1.4;
letter-spacing: -.6px; padding: 2px 6px; border-radius: 4px; background: #eee; z-index: 1;}

.default-comments__link {padding: 20px; display: block;}

.default-comments__author {display: flex; align-items: center; gap: 10px; margin-bottom: 20px;}
.default-comments__author-name {font-size: 14px; color: #222; line-height: 1.4; letter-spacing: -.6px;}

.default-comments__author-date {font-size: 14px; color: #666; line-height: 1.4; letter-spacing: -.6px;}

.default-comments__text {font-size: 16px; line-height: 1.4; letter-spacing: -.6px; word-break: keep-all;
color: #666;}

@media screen and (max-width: 640px) {
    .default-comments {margin-bottom: 30px;}

    .default-comments__link {padding: 12px;}
    .default-comments__delete {top: 12px; right: 12px;}

    .default-comments__text {font-size: 14px;}
}

/*** 댓글 작성 ***/
.default-comments .default-inner {padding: 20px 0; border-bottom: 1px solid #ddd; margin: 0;}

/*** 이전, 다음 댓글 ***/
.default-another {border-top: 1px solid #ddd;}
.default-another__li {border-bottom: 1px solid #ddd;}
.default-another__link {display: flex; align-items: flex-start; gap: 50px; padding: 20px 10px;}

.default-another__title {font-size: 16px; line-height: 1.4; letter-spacing: -.6px; white-space: nowrap; font-weight: 600; color: #ccc;
transition: color .3s ease;}

.default-another__text {font-size: 16px; line-height: 1.4; letter-spacing: -.6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;
color: #ccc; transition: color .3s ease;}

.default-another__link:hover .default-another__title {color: #222;}
.default-another__link:hover .default-another__text {color: #222;}

@media screen and (max-width: 640px) {
    .default-another__link {padding: 12px 10px; gap: 20px;}
    .default-another__title {font-size: 14px;}
    .default-another__text {font-size: 14px;}
}