/* 폰트 작업 */
@media only screen and (max-width: 480px) { 
    .doz_sys div[doz_type="text"] h1, .doz_sys h1, .doz_sys .header-content h1 {
        font-size: 28px;
    }
}
/* 1. 상주곶감체 폰트 불러오기 (눈누 CDN) */
  @font-face {
	  font-family: 'SangjuGotgam';
	  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/SANJUGotgam.woff') format('woff');
	  font-weight: normal;
	  font-display: swap;
  }

    /* 2. 적용부: 특정 ID 영역 안의 모든 텍스트에 폰트 적용 */
    #font_sangju, 
    #font_sangju h1, 
    #font_sangju h2, 
    #font_sangju h3, 
    #font_sangju h4, 
    #font_sangju h5,
    #font_sangju h6,
    #font_sangju p {
        font-family: 'SangjuGotgam', sans-serif !important;
    }

    /* 3. HTML에서 사용하신 fw_ 숫자 클래스 정의 */
    /* 상주곶감체는 단일 두께라 700 이상부터 브라우저 자체 굵게(Bold) 효과가 나타납니다. */
    .fw_2 { font-weight: 200; }
    .fw_3 { font-weight: 300; }
    .fw_4 { font-weight: 400; }
    .fw_5 { font-weight: 500; }
    .fw_6 { font-weight: 600; }
    .fw_7 { font-weight: 700; }
    .fw_8 { font-weight: 800; }
    .fw_9 { font-weight: 900; }

    /* 구분선 스타일 (선택사항) */
    hr { margin: 20px 0; border: 0; border-top: 1px dashed #ccc; }

/* [font_se_01] G마켓 산스 세팅 (ID & 웨이트 결합형) ============================================================================== */
  @font-face {
    font-family: 'GmarketSans';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
  }

  @font-face {
    font-family: 'GmarketSans';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
  }

  @font-face {
    font-family: 'GmarketSans';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
  }

  /* 2. 기본 적용부: #font_g 내부의 텍스트와 제목 태그 */
  #font_g, 
  #font_g h1, 
  #font_g h2, 
  #font_g h3, 
  #font_g h4, 
  #font_g h5,
  #font_g h6 {
    font-family: 'GmarketSans', sans-serif !important;
  }

  /* 3. 웨이트 전용 ID (부모 ID와 함께 사용하여 우선순위 강화) */
  #font_g #fw-s { font-weight: 300 !important; } /* Light */
  #font_g #fw-m { font-weight: 500 !important; } /* Medium */
  #font_g #fw-l { font-weight: 700 !important; } /* Bold */
  #font_g #fw-b { font-weight: bold !important; }



/* 텍스트 그라데이션 효과 =========================================================================*/
/* 1. 텍스트 컨테이너 (h1) */
.txt-impact h1 {
    display: block; /* 한 줄 전체 차지 */
    position: relative;
    text-align: center; /* 내부 텍스트 중앙 정렬 */
    margin: 0 auto;
    color: inherit;
    overflow: hidden;
}

/* 2. 실제 글자들 (span) */
.txt-impact h1 span {
    position: relative;
    z-index: 1; /* 빛보다 아래에 위치하거나, 빛과 겹치게 설정 */
}

/* 3. 빛 반사 레이어 (::before) */
.txt-impact h1::before {
    /* 텍스트 내용 (실제 텍스트와 정확히 일치해야 함) */
    content: "초보 창업자도\A깐깐한 수익을\A만드는 브랜드";
    white-space: pre; /* 줄바꿈 유지 */
    
    /* 위치 및 크기 (부모 h1과 완벽 일치) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 중앙 정렬 강제 적용 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* 빛줄기 그라데이션 (좌->우 흐름) */
    background: linear-gradient(
        110deg, 
        rgba(255, 255, 255, 0) 30%, 
        rgba(255, 255, 255, 0.6) 50%, 
        rgba(255, 255, 255, 0) 70%
    );
    background-size: 200% 100%;
    
    /* 마스크 입히기 */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* 애니메이션 및 기타 설정 */
    animation: shineLR 3s infinite linear;
    z-index: 2;
    pointer-events: none;
    
    /* 폰트 스타일 상속 (중요) */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* 4. 좌에서 우로 이동하는 애니메이션 */
@keyframes shineLR {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}


/*[Snap-Zoom-In-1] 줌인 등장 ===========================================*/
/* <div class="snap-zoom-in" data-delay="0"> */  
  
/* [Snap-Zoom-In-Impact] 속도와 타격감 강조 버전 */

.snap-zoom-in {
    /* 1. 중앙 정렬 유지: block으로 설정하고 margin auto 사용 */
    display: block; 
    text-align: center;
    width: 100%;
    
    /* 2. 초기 상태 설정 */
    opacity: 0;
    visibility: hidden;
    
    /* 3. 렌더링 최적화 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform-origin: center center;
  }



  /*
<!-- 모바일 문의하기 버튼 설정 -->
<div class="mo_contact_btn_wrap mo_only">
    <div class="mo_contact_btn_content">
        <a href="tel:1899-9107"> 
            <div class="left">
                <span class="bts bt-phone"></span>빠른문의하기
            </div>
        </a>
        <a href="/#s20260202ee0557b182e71">
            <div class="right">
            <span class="bts bt-envelope"></span>창업상담신청
            </div>
        </a>
    </div>
</div>
 */

/* ===============================
   모바일 문의 버튼 기본 설정
================================ */
.mo_contact_btn_wrap{display: none;}
@media only screen and (max-width: 480px) { 
        .mo_contact_btn_wrap {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            font-size: 15px;
            text-align: center;
            z-index: 999999999;
            display: block;
            border-top: 1px solid #000;
        }
        
        .mo_contact_btn_content {
            width: 100%;
            display: flex;
        }
        
        .mo_contact_btn_content a {
            width: 100%;
            text-decoration: none;
        }
        
        .mo_contact_btn_content .left {
            background-color: #fff;
            color: #000;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 47px;
        }
        
        .mo_contact_btn_content .right {
            background-color: #f9681c;
            color: #fff;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 47px;
        }
        
        .mo_contact_btn_content span {
            margin-right: 7px;
        }
    
}  