@charset "utf-8";

/* =========================================================
   스미카츠 리뉴얼 데모 - 메인페이지 스타일

   [네이밍 규칙] 기존 메인페이지(theme/basic/index.php)와 동일한 방식
     · 단락(섹션) : .sec01 ~ .sec17           - 위에서부터 순번
     · 요소       : .text01 .img01 .box01 ... - 단락 안에서 종류별 01부터
     · 변형       : .type01 .type02 ...       - 같은 요소의 변형
     · 공통 부품  : .demo-*                    - 두 단락 이상에서 재사용
     예) .sec05 .card02 = 5번째 단락(평균 수익률)의 두 번째 카드

   [목차]
     0. 폰트 / 공통
     1. 헤더                      10. sec08 3가지 수익구조
     2. 하단 상담바               11. sec09 본사 증명
     3. sec01 히어로              12. sec10·11 메뉴 슬라이더
     4. sec02 월매출 달력          13. sec12 창업 혜택
     5. sec03 프로모션            14. sec13 창업비용
     6. sec04 무상지원 띠          15. sec14 창업 절차
     7. sec05 평균 수익률          16. sec15 추천 대상
     8. sec06 매장 사진 띠         17. sec16 CTA
     9. sec07 출발선 비교          18. sec17 문의 폼 / 푸터
                                  19. 반응형  20. 초광폭
   ========================================================= */


/* =========================================================
   0-1. 폰트 - 기존 메인페이지와 동일 계열
        제목 : 충주김생        (기존 메인 index.php 에서 28곳 사용)
        본문 : Apple SD Gothic Neo (기존 메인 header/footer 사용 계열)
   ※ /css/font.css 에는 애플고딕이 ExtraBold 한 종류만 선언되어 있어,
     본문용 Regular/Medium/Bold 는 서버에 있던 원본 TTF(3.7MB)를
     한글 전체 포함 woff2(≈360KB)로 변환해 추가 선언한다.
   ========================================================= */
@font-face {
    font-family: '충주김생';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/ChungjuKimSaengTTF.woff2') format('woff2'),
        url('./font/ChungjuKimSaeng.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '애플고딕_R';
    src: url('./font/AppleSDGothicNeo-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: '애플고딕_M';
    src: url('./font/AppleSDGothicNeo-Medium.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: '애플고딕_B';
    src: url('./font/AppleSDGothicNeo-Bold.woff2') format('woff2');
    font-display: swap;
}


/* =========================================================
   0-2. 공통
   ========================================================= */
:root {
    --green: #023934;
    --green-d: #012b27;
    --green-l: #0a4e46;
    --dark: #171614;
    --paper: #efeae3;
    --paper-d: #e1d8cb;
    --tan: #c0804f;
    --dred: #6e1a19;
    --gold: #e2b877;
    --gold-d: #c69a51;
    --orange: #e8993a;
    --red: #d7000f;
    --wrap: 1200px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body.demo-body {
    /* 시안 마스터(3841px = 1920 x 2.00052) 실측 높이 */
    --qbh: 60px;
    /* 하단 플로팅 상담바 : 209px -> 80 (테두리 1 + 안쪽 103) */
    --headh: 60px;
    /* 상단 헤더        : 167px -> 70 */
    /* 1920 초과 화면에서 2560 까지 연속 비례 확대 (index.php 의 스크립트가 설정) */
    zoom: var(--z, 1);
    background: #fff;
    color: #222;
    font-family: '애플고딕_R', 'Apple SD Gothic Neo', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

.demo-body img {
    max-width: 100%;
    vertical-align: middle;
    border: 0;
}

.demo-body a {
    color: inherit;
    text-decoration: none;
}

.demo-body ul,
.demo-body li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 모든 단락의 공통 틀 */
.demo-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.demo-wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 20px;
}

/* 글자 색 */
.txt-gold {
    color: var(--gold);
}

.txt-orange {
    color: var(--orange);
}

.txt-red {
    color: var(--red);
}

/* 단락 배경 (여러 단락이 공유) */
.demo-bg-revenue {
    background: #1d1a16 url('../img/bg-revenue.jpg') center top / cover no-repeat;
}

.demo-bg-green {
    background: var(--green) url('../img/bg-green.jpg') center top / 100% auto repeat-y;
}

.demo-bg-paper {
    background: var(--paper) url('../img/bg-paper.jpg') center top / cover no-repeat;
}

/* 그린 단락(sec07·08·09) 공통 타이포 */
/* 시안 실측 : 충주김생은 자간이 살짝 벌어져 있다(+.015em). eyebrow 는 제목과 같은 크기 */
.demo-eyebrow {
    font-family: '충주김생';
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: .015em;
    color: #e0aa7c;
}

.demo-title {
    margin: 12px 0 0;
    font-family: '충주김생';
    font-size: 32px;
    line-height: 52px;
    letter-spacing: .015em;
}

.demo-bigtitle {
    font-family: '충주김생';
    font-size: 54px;
    line-height: 80px;
    letter-spacing: .015em;
}

/* 금박 라벨 띠 (sec07·08) */
.demo-labelline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin: 54px 0 50px;
}

.demo-labelline .line-l,
.demo-labelline .line-r {
    position: relative;
    width: 205px;
    height: 1px;
    background: rgba(226, 184, 119, .5);
}

.demo-labelline .line-l::after,
.demo-labelline .line-r::after {
    content: '';
    position: absolute;
    top: -2px;
    width: 5px;
    height: 5px;
    background: var(--gold);
    transform: rotate(45deg);
}

.demo-labelline .line-l::after {
    right: 0;
}

.demo-labelline .line-r::after {
    left: 0;
}

/* 금박 플레이트 라벨 (에셋 배경 + 텍스트) */
.demo-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 350px;
    height: 49px;
    padding: 0 30px;
    color: #fff;
    font-family: '충주김생';
    font-size: 24px;
    letter-spacing: .015em;
    white-space: nowrap;
    background: url('../img/label-100m.png') center / 100% 100% no-repeat;
}

.demo-pill.type02 {
    min-width: 310px;
    height: 59px;
    font-size: 26px;
    background-image: url('../img/label-rival.png');
}

.demo-pill.type03 {
    min-width: 310px;
    height: 59px;
    font-size: 26px;
    background-image: url('../img/label-sumi.png');
}

/* 금박 강조 박스 (sec08 에서 2회) */
/* 요청02 [14] 골드박스 테두리에 빛이 훑고 지나가는 효과 */
.demo-goldbox {
    /* 시안 sec08 실측 : 904 x 190, radius 30, 51px 고딕 */
    position: relative;
    width: 904px;
    max-width: 94%;
    margin: 0 auto;
    padding: 36px 48px;
    border: 0;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
    font-family: '애플고딕';
    font-size: 51px;
    line-height: 1.45;
    letter-spacing: -.01em;
    box-shadow: 0 0 34px rgba(226, 184, 119, .16) inset;
}

/* 금속 테두리 */
.demo-goldbox::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    pointer-events: none;
    background: linear-gradient(118deg, #5d411c 0%, #e3c58c 14%, #a8813f 30%, #fbf0cf 50%, #a8813f 70%, #e3c58c 86%, #5d411c 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* 테두리를 훑고 지나가는 조명. 덩어리가 떠다니는 게 아니라
   '테두리 그 자리'가 달아오르고 그 둘레로만 빛이 새어 나온다.
   - 요소를 상자보다 40px 크게 잡고 그만큼을 투명 border 로 채운다
     -> padding-box 경계 = 골드박스 바깥선. 거기 inset 링을 그려 blur 로 풀면
        안팎으로 자연스럽게 번지고, 마스크가 자르는 border-box 는 40px 바깥이라 잘려 보이지 않는다
   - 마스크(둥근 창)의 위치를 네 모서리로 돌려 시계방향 이동을 만든다
     (구간 길이에 맞춰 0 / 40.8 / 50 / 90.8 / 100% 로 끊어야 속도가 일정하다) */
.demo-goldbox .demo-orb {
    position: absolute;
    inset: -40px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .78) 16%, rgba(0, 0, 0, .40) 38%, rgba(0, 0, 0, .14) 60%, rgba(0, 0, 0, .03) 80%, transparent 100%);
    -webkit-mask-size: 132px 132px;
    -webkit-mask-repeat: no-repeat;
    mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .78) 16%, rgba(0, 0, 0, .40) 38%, rgba(0, 0, 0, .14) 60%, rgba(0, 0, 0, .03) 80%, transparent 100%);
    mask-size: 132px 132px;
    mask-repeat: no-repeat;
    animation: demoTrain 6s linear infinite;
}

.demo-goldbox .demo-orb:nth-child(2) {
    animation-delay: -3s;
}

/* 실제로 빛나는 선. 바깥 요소(40px 여유)의 한가운데에 골드박스 외곽선과 겹쳐 두고,
   box-shadow 를 바깥/안쪽 양방향으로 걸어 테두리 선을 축으로 빛이 반사되게 한다.
   (inset 만 쓰면 빛이 상자 안쪽에 갇혀 보인다) */
.demo-goldbox .demo-orb>i {
    position: absolute;
    inset: 40px;
    border-radius: 30px;
    box-shadow:
        0 0 3px 1px #fff,
        0 0 10px 2px rgba(255, 255, 255, .92),
        0 0 24px 8px rgba(255, 241, 203, .45),
        inset 0 0 3px 1px #fff,
        inset 0 0 10px 2px rgba(255, 255, 255, .92),
        inset 0 0 20px 7px rgba(255, 241, 203, .4);
    filter: blur(.5px);
}

@keyframes demoTrain {
    0% {
        -webkit-mask-position: -26px -26px;
        mask-position: -26px -26px;
    }

    40.8% {
        -webkit-mask-position: calc(100% + 26px) -26px;
        mask-position: calc(100% + 26px) -26px;
    }

    50% {
        -webkit-mask-position: calc(100% + 26px) calc(100% + 26px);
        mask-position: calc(100% + 26px) calc(100% + 26px);
    }

    90.8% {
        -webkit-mask-position: -26px calc(100% + 26px);
        mask-position: -26px calc(100% + 26px);
    }

    100% {
        -webkit-mask-position: -26px -26px;
        mask-position: -26px -26px;
    }
}


/* 가로 흐름 띠 (sec06 매장 사진) */
@keyframes demoRollX {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* 이미지 교차 노출 (시안의 '3장 번갈아 재생' / '롤링' 표기 구현) */
.demo-xfade {
    position: relative;
}

.demo-xfade>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.demo-xfade.type03>img {
    animation: demoXfade03 13.5s infinite;
}

.demo-xfade.type03>img:nth-child(1) {
    animation-delay: 0s;
}

.demo-xfade.type03>img:nth-child(2) {
    animation-delay: 4.5s;
}

.demo-xfade.type03>img:nth-child(3) {
    animation-delay: 9s;
}

@keyframes demoXfade03 {
    0% {
        opacity: 0;
    }

    4% {
        opacity: 1;
    }

    29% {
        opacity: 1;
    }

    33% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.demo-xfade.type02>img {
    animation: demoXfade02 9s infinite;
}

.demo-xfade.type02>img:nth-child(1) {
    animation-delay: 0s;
}

.demo-xfade.type02>img:nth-child(2) {
    animation-delay: 4.5s;
}

@keyframes demoXfade02 {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* 애니메이션이 꺼진 환경에서도 첫 장은 보이도록 */
.demo-xfade>img:first-child {
    opacity: 1;
}

/* 페이드 없이 딱딱 바뀌는 전환 */
.demo-xfade.type05>img {
    animation: demoXswap 9s step-end infinite;
}

.demo-xfade.type05>img:nth-child(1) {
    animation-delay: 0s;
}

.demo-xfade.type05>img:nth-child(2) {
    animation-delay: 3s;
}

.demo-xfade.type05>img:nth-child(3) {
    animation-delay: 6s;
}

@keyframes demoXswap {
    0% {
        opacity: 1;
    }

    33.334% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .demo-xfade>img {
        animation: none;
        opacity: 0;
    }

    .demo-xfade>img:first-child {
        opacity: 1;
    }
}


/* =========================================================
   1. 헤더 - 기존 메인페이지(theme/basic/head.php) 스타일 그대로
   ========================================================= */
.head02 {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    display: flex;
    justify-content: center;
    height: var(--headh);
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 50;
}

.head02 .div01 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1920px;
    height: 100%;
    padding: 0px;
    font-size: 16px;
}

.head02 .div-logo {
    margin: 0px 0px 0px 0px;
}

.head02 .logo01 {
    display: block;
    height: 67px;
    /* 헤더 60 기준 : 잉크 높이 31.4 */
    /* 시안 로고 잉크 261.4 x 44.0 */
    cursor: pointer;
}

.head02 .div-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

@media screen and (max-width: 1220px) {
    .head02 .div-menu {
        display: none;
    }
}

.head02 .menu-text {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 13px;
    font-size: 16px;
    font-family: '애플고딕';
    cursor: pointer;
}

.head02 .div-tel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 168px;
    height: 100%;
    margin: 0px 0px 0px 54px;
    color: #fff;
    font-family: '애플고딕';
    line-height: 1.2;
    /* 시안 두 줄 잉크 높이 38 */
    background-color: #c0804f;
    cursor: pointer;
}

/* 메뉴가 감춰지는 좁은 화면용 전화 버튼 (데모 전용 보완) */
.head02 .div-tel02 {
    display: none;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 100%;
    background-color: #c0804f;
}

.head02 .div-tel02 img {
    width: 38px;
    height: 38px;
}

@media screen and (max-width: 1220px) {
    .head02 .div-tel02 {
        display: flex;
    }
}


/* =========================================================
   2. 하단 상담바 (푸터 위 고정형 + 스크롤 플로팅형)
   ========================================================= */
/* --- 시안 float01.png 실측 (1920 기준) -------------------------------
   바 높이 104 / 배경 #C0804F
   (마스터 시안2 y 15332~15540 = 209px -> 104.5)
   바 높이 104.5
   로고 잉크 236.4 x 40.0          (x 280.5 ~ 516.4)
   입력·셀렉트 141.5 x 48.5 간격 7.6 (x 564.4 / 713.3 / 862.8 / 1011.7)
   동의 원형체크 32.5 / 문구 134.5  (아이콘 x 1173.7 / 문구 x 1214.7 ~ 1348.6)
   보내기 141.5 x 48.5 #751F1F     (x 1368.6 ~ 1509.6)
   전화 197.9 #751F1F              (x 1535.6 ~ 1733.0)
   세로 : 모든 요소 바상단+31.0
   => 우측 기준선 1733  (max-width 1586 + padding 20)
   -------------------------------------------------------------------- */
.demo-quickbar {
    position: relative;
    z-index: 80;
    width: 100%;
    background: var(--tan);
    border-top: 1px solid rgba(255, 255, 255, .25);
}

.demo-quickbar.type-fixed {
    position: fixed;
    left: 0;
    bottom: 0;
}

.demo-quickbar .box01 {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 요소가 작아져 우측 기준선(시안 1733)이 의미 없어짐 -> 화면 중앙 정렬 */
    gap: 0;
    width: 100%;
    max-width: 1586px;
    height: calc(var(--qbh) - 1px);
    margin: 0 auto;
    padding: 0 20px;
}

.demo-quickbar .logo01 {
    flex: none;
    margin-right: 20px;
    line-height: 0;
}

.demo-quickbar .logo01 img {
    width: 164px;
    height: auto;
}

/* 원본 422x128, 잉크 352x60 -> 잉크 236.9x40.4 */
.demo-quickbar .form01 {
    display: flex;
    align-items: center;
    gap: 6px;
}

.demo-quickbar .input01,
.demo-quickbar .input02,
.demo-quickbar .select01,
.demo-quickbar .select02 {
    width: 118px;
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: #fff;
    font-family: '애플고딕_M';
    font-size: 14px;
    color: #222;
    outline: none;
    box-shadow: none;
}

.demo-quickbar .input01::placeholder,
.demo-quickbar .input02::placeholder {
    color: #222;
    opacity: 1;
}

.demo-quickbar .select01,
.demo-quickbar .select02 {
    padding-right: 28px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='10' viewBox='0 0 19 10'%3E%3Cpath d='M1.4 1.4L9.5 8.6 17.6 1.4' fill='none' stroke='%23222222' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 8px;
}

.demo-quickbar .label01 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: 10px;
    color: #fff;
    font-family: '애플고딕_M';
    font-size: 14px;
    letter-spacing: .03em;
    white-space: nowrap;
    cursor: pointer;
}

.demo-quickbar .label01 .u {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.demo-quickbar .label01 input[type="checkbox"] {
    position: relative;
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 1.7px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.demo-quickbar .label01 input[type="checkbox"]::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 5px;
    width: 11px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    opacity: 0;
    transition: opacity .15s;
}

.demo-quickbar .label01 input[type="checkbox"]:checked::after {
    opacity: 1;
}

.demo-quickbar .btn01 {
    flex: none;
    width: 118px;
    height: 34px;
    margin-left: 9px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    background: #751f1f;
    color: #fff;
    font-family: '애플고딕_B';
    font-size: 16px;
}

.demo-quickbar .text01 {
    flex: none;
    margin-left: 18px;
    color: #751f1f;
    font-family: '애플고딕_B';
    font-size: 22px;
    white-space: nowrap;
}

/* 좁아질수록 단계적으로 축소 (요소 전체 폭 : 1491 + 좌우 여백 40 = 1531) */
@media screen and (max-width: 1540px) {
    .demo-quickbar .text01 {
        display: none;
    }
}

@media screen and (max-width: 1310px) {
    .demo-quickbar .logo01 {
        margin-right: 26px;
    }

    .demo-quickbar .logo01 img {
        width: 240px;
    }

    .demo-quickbar .form01 {
        gap: 6px;
    }

    .demo-quickbar .input01,
    .demo-quickbar .input02,
    .demo-quickbar .select01,
    .demo-quickbar .select02 {
        width: 118px;
        height: 44px;
        padding: 0 13px;
        font-size: 17px;
    }

    .demo-quickbar .select01,
    .demo-quickbar .select02 {
        padding-right: 30px;
        background-position: right 11px center;
    }

    .demo-quickbar .label01 {
        margin-left: 11px;
        gap: 7px;
        font-size: 16px;
        letter-spacing: 0;
    }

    .demo-quickbar .label01 input[type="checkbox"] {
        width: 28px;
        height: 28px;
    }

    .demo-quickbar .label01 input[type="checkbox"]::after {
        left: 5px;
        top: 6px;
        width: 13px;
        height: 7px;
    }

    .demo-quickbar .btn01 {
        width: 128px;
        height: 45px;
        margin-left: 20px;
        font-size: 20px;
    }
}

@media screen and (max-width: 1150px) {
    .demo-quickbar .logo01 {
        display: none;
    }

    .demo-quickbar .input01,
    .demo-quickbar .input02,
    .demo-quickbar .select01,
    .demo-quickbar .select02 {
        width: 106px;
    }

    .demo-quickbar .label01 input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }

    .demo-quickbar .label01 input[type="checkbox"]::after {
        left: 4px;
        top: 5px;
        width: 11px;
        height: 6px;
    }

    .demo-quickbar .label01 {
        font-size: 15px;
        gap: 6px;
    }

    .demo-quickbar .btn01 {
        width: 112px;
        margin-left: 16px;
        font-size: 19px;
    }
}


/* =========================================================
   3. sec01 히어로
   ========================================================= */
/* PC / 태블릿 : 시안 비율을 따르지 않고 화면 너비를 꽉 채우며
   높이는 "뷰포트 - 헤더 - 하단 플로터" 로 맞춘다. (모바일은 아래 반응형에서 비율 고정) */
.sec01 {
    line-height: 0;
    background: #14110e;
    overflow: hidden;
    /* 62vw 상한 : 세로가 아주 긴 태블릿에서 배너가 과하게 잘리는 것을 막는 안전장치 */
    height: min(calc(100vh / var(--z, 1) - var(--headh) - var(--qbh)), calc(62vw / var(--z, 1)));
    min-height: 420px;
}

/* 배너 헤드라인이 원본 x 142~936 에 있어, 좌우가 잘려도 살아남도록 가로 기준점을 18% 로 둔다 */
.sec01 .img01 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 18% 4%;
    display: block;
}


/* =========================================================
   4. sec02 월매출 달력
   ========================================================= */
.sec02 {
    padding: 126px 0 102px;
    color: #fff;
    text-align: center;
}

.sec02 .text01 {
    font-family: '충주김생';
    font-size: 32px;
    line-height: 1.66;
    letter-spacing: .02em;
}

.sec02 .text02 {
    margin: 34px 0 73px;
    font-family: '충주김생';
    font-size: 72px;
    letter-spacing: .02em;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .6);
}

.sec02 .box01 {
    position: relative;
    width: 647px;
    max-width: 100%;
    margin: 0 auto;
}

/* --- 빈 달력 이미지 + 데이터 절대배치 ---------------------------------
   시안 sec02 실측 : 달력 폭 647 / 헤더 72.6 / 요일 33.5 / 행 63.7 (디자인px)
   cal-blank.png(1294x976) 기준 좌표
     헤더 14.85656%  요일바 6.86475%  격자 시작 21.72131%
     행 13.05328%   열 14.28571%
   글자 크기는 모두 cqw(달력 폭 대비 %) 라서 모바일에서도 같은 비율로 축소된다.
   --------------------------------------------------------------------- */
.sec02 .cal01 {
    container-type: inline-size;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    font-family: '애플고딕_B';
    line-height: 1;
}

.sec02 .img01 {
    width: 100%;
    display: block;
}

/* 헤더 바 : 지점명만 (부가정보는 달력 아래로) */
.sec02 .cal_name {
    position: absolute;
    transform: translateY(-50%);
    color: #fff;
    font-family: '애플고딕';
    /* 원본 헤더는 ExtraBold */
    white-space: nowrap;
}

.sec02 .cal_name {
    left: 4.07%;
    top: 7.48%;
    font-size: 5.68cqw;
}


/* 날짜 칸 (날짜 중심 30.0%, 금액 중심 71.5% - 칸 높이 대비) */
.sec02 .cal_day {
    position: absolute;
    width: 14.28571%;
    height: 13.05328%;
}

.sec02 .cal_day .d,
.sec02 .cal_day .v {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}

.sec02 .cal_day .d {
    top: 26.0%;
    color: #1a1a1a;
    font-size: 3.10cqw;
}

.sec02 .cal_day .v {
    top: 72.6%;
    color: #dd3d27;
    font-size: 2.36cqw;
}

.sec02 .cal_day._sun .d {
    color: #dd3d27;
}

/* 총매출 (원본 : 폭 42.60%, 높이 행의 90.8%, 우측여백 0.90%) */
.sec02 .cal_total {
    position: absolute;
    right: 2.16%;
    bottom: 0.60%;
    width: 39.10%;
    height: 11.85%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #dd3d27;
    color: #fff;
    font-size: 3.71cqw;
    white-space: nowrap;
}

/* 달력 아래 : 왼쪽 지점정보 / 오른쪽 기준월 (시안 sec02) */
.sec02 .cal_foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 6px;
    color: #fff;
    font-family: '애플고딕_B';
    font-size: 14px;
}

.sec02 .btn01,
.sec02 .btn02 {
    position: absolute;
    top: 54.5%;
    transform: translateY(-50%);
    /* 시안 : 달력 상단 + 285.5 */
    padding-bottom: 3px;
    /* 꺾쇠 글리프가 선 높이 중앙보다 1.5px 아래에 찍힌다 */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .6);
    background: rgba(0, 0, 0, .28);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec02 .btn01 {
    left: -66px;
}

.sec02 .btn02 {
    right: -66px;
}

/* 순이익 도장 : 시안 실측 지름 240, 달력 우단에서 74px 밖 / 상단에서 32px 위
   글자는 도장 폭 대비 비율(cqw)이라 모바일에서도 같이 줄어든다 */
.sec02 .box02 {
    container-type: inline-size;
    position: absolute;
    top: -32px;
    right: -74px;
    width: 240px;
    z-index: 3;
}

.sec02 .box02.pop {
    animation: demoSealPop .79s linear both;
}

.sec02 .img02 {
    width: 100%;
}

.sec02 .text03 {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-9deg);
    padding: 0 9%;
    color: #fff;
    font-family: '충주김생';
    font-size: 13.3cqw;
    line-height: 1.22;
    letter-spacing: -.03em;
}

/* 높은 곳에서 가속해 떨어져 '쾅' 찍히고, 반동으로 한 번 튀었다가 가라앉는다 */
@keyframes demoSealPop {
    0% {
        transform: scale(2.6) rotate(-15deg);
        opacity: 0;
        filter: blur(2.5px);
        animation-timing-function: cubic-bezier(.62, .01, .86, .28);
        /* 낙하 = 가속 */
    }

    42% {
        transform: scale(.86) rotate(2.5deg);
        opacity: 1;
        filter: blur(0);
        animation-timing-function: cubic-bezier(.18, .9, .32, 1);
        /* 착지 순간 눌림 */
    }

    58% {
        transform: scale(1.1) rotate(-2deg);
    }

    74% {
        transform: scale(.96) rotate(.8deg);
    }

    88% {
        transform: scale(1.02) rotate(-.3deg);
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

/* 도장이 닿는 순간 달력이 한 번 흔들린다 */
.sec02 .cal01.hit {
    animation: demoCalHit .34s cubic-bezier(.2, .9, .3, 1) both;
}

@keyframes demoCalHit {
    0% {
        transform: translateY(0);
    }

    18% {
        transform: translateY(5px) scale(.994);
    }

    46% {
        transform: translateY(-2px);
    }

    72% {
        transform: translateY(1px);
    }

    100% {
        transform: translateY(0);
    }
}


/* =========================================================
   5. sec03 프로모션
   ========================================================= */
/* 시안 마스터 실측 (1920 기준, 단락 좌상단 0,0)
   text01  잉크 x 762~1154 (392) y 215~262            -> 48px / 자간 0
   text02  1행 잉크 x 473~1447 (975) y 335~411        -> 76px  (2행보다 1.105배 크다)
           2행 잉크 x 668~1248 (581) y 442~510        -> 69px
   카드    외곽 404.7~837.3 / 1082.7~1515.3 (각 432.6 x 562), 간격 245.4
           테두리 상하 14.2 좌우 16.3, 라운드 10, 색 #F49914
           내부 미디어 400 x 533.5 (3:4)
   text03  잉크 y 1219~1259 (h41)                     -> 40px
   주황 글자 #ED8A1E / 테두리 #F49914 (시안에서 서로 다름)
   단락 높이 약 1282 (sec04 첫 타이포 띠 잉크가 abs 1303) */
.sec03 {
    --orange-promo: #f49914;
    padding: 205px 0 12px;
    color: #fff;
    text-align: center;
}

.sec03 .text01 {
    font-family: '충주김생';
    font-size: 32px;
    letter-spacing: 0;
}

.sec03 .text02 {
    margin: 48px 0 90px;
    font-family: '충주김생';
    font-size: 54px;
    line-height: 1.38;
    letter-spacing: 0;
    text-shadow: 0 4px 16px rgba(0, 0, 0, .55);
}

.sec03 .text02 .line01 {}

.sec03 .txt-orange {
    color: #ed8a1e;
}

.sec03 .list01 {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
}

.sec03 .item01 {
    width: 345.6px;
    max-width: 33.6vw;
}

.sec03 .box01 {
    border: 7px solid var(--orange-promo);
    border-left-width: 8px;
    border-right-width: 8px;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;

    box-shadow: 0 11px 27px rgba(0, 0, 0, .38);
}

.sec03 .video01 {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
}

.sec03 .text03 {
    margin-top: 28.8px;
    font-family: '충주김생';
    font-size: 32px;
    letter-spacing: 0;
}

/* sec03 + sec04 공통 배경 (시안 : 사진 한 장이 두 단락을 덮는다) */
.demo-promo-bg {
    background: #2a1d13 url('../img/bg-promo.jpg') center top / cover no-repeat;
}


/* =========================================================
   6. sec04 무상지원 띠
      .track01 / .track02 = 기존 메인페이지 sec04 의 .scroll01 / .scroll02 를 그대로 옮긴 것
   ========================================================= */
.sec04 {
    background: none;
}

/* 배경은 .demo-promo-bg 가 이어받는다 */

.sec04 .track01 {
    width: 100%;
    margin: 10px 0px 10px 0px;
    text-align: center;
    color: #ffffff;
    font-size: 36px;
    border-bottom: 3px solid #fff;
    /* 시안 실측 2.7 */
    overflow: hidden;
}

.sec04 .track02 {
    width: 100%;
    margin: 10px 0px 10px 0px;
    text-align: center;
    color: #ffffff;
    font-size: 36px;
    border-top: 3px solid #fff;
    /* 시안 실측 2.7 */
    overflow: hidden;
}

.sec04 .list01,
.sec04 .list02 {
    display: flex;
    width: max-content;
    margin: 10px 0px;
}

.sec04 .list01 {
    animation: sec04_01 1s linear infinite;
}

.sec04 .list02 {
    animation: sec04_01 1s reverse linear infinite;
}

.sec04 .img01 {
    margin: 0px 23px;
    /* 시안 타이포 피치 216.4 = 이미지 170 + 여백 46 */
}

@keyframes sec04_01 {
    0% {
        transform: translateX(-216px);
    }

    100% {
        transform: none;
    }
}

/* 시안 실측 : 띠 h92.8 #C0804F / 문구 잉크 x541~1098 h34 / 버튼 216x78 r8 #4E3123
   문구와 버튼 라벨이 같은 크기(33px), 둘 사이 간격 116 */
.sec04 .box01 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 90px;
    height: 62px;
    background: var(--tan);
    color: #fff;
}

.sec04 .text01 {
    font-family: '충주김생';
    font-size: 24px;
    letter-spacing: 0;
}

.sec04 .btn01 {
    padding: 7px 26px;
    border-radius: 6px;
    background: #4e3123;
    color: #fff;
    font-family: '충주김생';
    font-size: 24px;
    letter-spacing: 0;
}


/* =========================================================
   7. sec05 평균 수익률
   ========================================================= */
/* 시안 마스터 실측 (1920 기준) : 단락 2322 (1번 카드가 펼침 상태로 그려져 있어 기본 환산 2162)
   본문 카피(text02 / text08)는 고딕이 아니라 '충주김생' - 잉크높이/advance 비 0.99~1.00
   주황은 sec03(#F49914)과 달리 #EB8516 */
.sec05 {
    padding: 124px 0 70px;
    background: var(--dark) url('../img/bg-rate.jpg') center top / cover no-repeat;
    color: #fff;
    text-align: center;
}

.sec05 .text01 {
    font-family: '충주김생';
    font-size: 54px;
    line-height: 1.5;
    letter-spacing: 0;
}

.sec05 .text02 {
    margin-top: 20px;
    font-family: '충주김생';
    font-size: 32px;
    line-height: 58px;
    letter-spacing: 0;
}

.sec05 .txt-orange {
    color: #eb8516;
}

/* 시안 sec05 콘텐츠 폭 : 구분선 1422 / 표 카드 쌍 1290 - 공용 1200 래퍼로는 좁다 */
.sec05 .demo-wrap {
    max-width: 1480px;
}

.sec05 .list01 {
    display: grid;
    grid-template-columns: repeat(4, 300px);
    align-items: start;
    /* 카드마다 접힘/펼침 높이를 따로 가진다 */
    grid-auto-rows: 392px;
    /* 펼침 높이만큼 행을 미리 잡아 호버 시 아래 단락이 밀리지 않게 */
    justify-content: center;
    gap: 40px 20px;
    margin-top: 63px;
}

/* 기본은 하단이 잘려 순수익이 보이지 않는 상태, 마우스를 올리면 카드가 펼쳐진다 */
.sec05 .card01 {
    position: relative;
    height: 246px;
    overflow: hidden;
    padding: 40px 22px 0;
    color: #1a1a1a;
    background: url('../img/card-paper-v.png') center / 100% 100% no-repeat;
    transition: height .45s cubic-bezier(.2, .8, .3, 1);
}

/* [sec05-auto-open] 호버 펼침 -> 스크롤 진입 시 4장이 0.1초 간격으로 펼쳐진 채 유지
   (롤백 : style.css.26091814 / index.php.26091810 기준본으로 되돌리면 호버 방식 복구) */
.sec05 .card01.is-open {
    height: 392px;
}

.sec05 .text03 {
    font-family: '충주김생';
    font-size: 30px;
    line-height: 1.5;
    letter-spacing: 0;
}

.sec05 .line01 {
    width: 214px;
    height: 2px;
    margin: 22px auto 0;
    background: #0b0a09;
}

.sec05 .text04 {
    margin-top: 24px;
    font-family: '충주김생';
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0;
    color: #1a1a1a;
}

.sec05 .text05 {
    font-family: '충주김생';
    font-size: 29px;
    line-height: 1.4;
    letter-spacing: 0;
}

.sec05 .text05+.line01 {
    margin-top: 13px;
}

.sec05 .card01 .box01 {
    margin-top: 23px;
    padding-top: 0;
    opacity: 0;
    transition: opacity .3s .12s;
}

/* [sec05-auto-open] 펼쳐진 카드의 순수익 영역 노출 (터치/마우스 구분 없이 동일) */
.sec05 .card01.is-open .box01 {
    opacity: 1;
}

.sec05 .text06 {
    font-family: '충주김생';
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: 0;
    /* '순수익' 라벨만 강조 */
    color: var(--red);
}

.sec05 .text07 {
    font-family: '충주김생';
    font-size: 33px;
    line-height: 1.4;
    letter-spacing: 0;
    /* 순수익 금액도 라벨과 같이 강조 */
    color: var(--red);
}

.sec05 .line02 {
    width: 1422px;
    max-width: 100%;
    height: 2px;
    margin: 60px auto 76px;
    background: rgba(255, 255, 255, .42);
}

.sec05 .text08 {
    font-family: '충주김생';
    font-size: 32px;
    line-height: 58px;
    letter-spacing: 0;
}

/* 표 카드 : 괘선(=콘텐츠 폭) 507, 좌우 패딩 62, 카드 632 x 390
   행 안의 두 칸은 좌우 끝이 아니라 고정 두 축(괘선 좌단+84.5 / 우단-92.5)에 가운데 정렬 */
.sec05 .list02 {
    display: flex;
    justify-content: center;
    gap: 38px;
    margin-top: 78px;
    flex-wrap: wrap;
}

.sec05 .card02 {
    width: 470px;
    min-height: 296px;
    padding: 42px 46px 0;
    color: #1a1a1a;
    text-align: left;
    background: url('../img/card-paper-h.png') center / 100% 100% no-repeat;
}

.sec05 .row01 {
    display: flex;
    justify-content: space-between;
    font-family: '충주김생';
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
}

.sec05 .row01>span {
    width: 134px;
    text-align: center;
}

.sec05 .row01.type01 {
    padding-bottom: 9px;
    border-bottom: 2px solid #111;
    font-family: '충주김생';
    font-size: 18px;
    line-height: 27px;
}

.sec05 .row01.type02 {
    padding: 10px 0 0;
}

.sec05 .row01.type02:first-of-type {
    margin-top: 26px;
}

.sec05 .row01.type02 .icon01 {
    display: inline-block;
    position: relative;
    width: 17px;
    height: 17px;
    margin-right: 8px;
    border-radius: 50%;
    background: #111;
    vertical-align: -4px;
}

.sec05 .row01.type02 .icon01::after {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 7.5px;
    height: 2px;
    background: #ece4d8;
}

.sec05 .line03 {
    height: 2px;
    margin: 15px 0 0;
    border: 0;
    background-image: repeating-linear-gradient(to right, #111 0 7px, transparent 7px 12px);
}

.sec05 .row01.type03 {
    margin-top: 12px;
    padding: 0;
    font-family: '충주김생';
    font-size: 18px;
    line-height: 27px;
}

.sec05 .row01.type04 {
    align-items: center;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 2px solid #111;
}

.sec05 .row01.type04>span {
    width: auto;
}

.sec05 .text09 {
    font-family: '충주김생';
    font-size: 18px;
    letter-spacing: 0;
}

.sec05 .text09 .num01 {
    margin-left: 20px;
    font-style: normal;
    font-size: 23px;
}

.sec05 .text10 {
    font-family: '충주김생';
    font-size: 34px;
    line-height: 1.45;
    color: #eb8516;
    letter-spacing: 0;
}

.sec05 .box02 {
    margin-top: 140px;
}

.sec05 .text11 {
    font-family: '충주김생';
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: 0;
}

.sec05 .text12 {
    margin-top: 8px;
    font-family: '애플고딕_M';
    font-size: 15px;
    color: rgba(255, 255, 255, .95);
}


/* =========================================================
   8. sec06 매장 사진 띠
   ========================================================= */
/* 시안 실측 : 배경 흰색, 위 24 / 아래 23 여백, 사진 높이 215, 간격 15,
   좌우 292px 흰색 선형 페이드 */
.sec06 {
    position: relative;
    overflow: hidden;
    padding: 24px 0 23px;
    background: #fff;
}

.sec06 .track01 {
    display: flex;
    gap: 15px;
    width: max-content;
    animation: demoRollX 40s linear infinite;
}

.sec06 .track01 img {
    height: 178px;
    /* 폭 267 + 간격 15 -> 1920 에서 약 6.8장 노출 */
    width: auto;
}

.sec06::before,
.sec06::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 292px;
    pointer-events: none;
    z-index: 2;
}

.sec06::before {
    left: 0;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.sec06::after {
    right: 0;
    background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
}


/* =========================================================
   9. sec07 출발선 비교
   ========================================================= */
/* 시안 마스터 실측 (1920 기준) : 단락 1436 (금박 헤어라인 y75~y1511 사이)
   카드 494 x 278 (간격 44) #DCD0C2 r14 / 행 피치 110 / 아이콘 75
   플레이트 351x51, 팀 라벨 311x61 (카드 상단선에 물림)
   box02 1046x169 #022422 이중 금박선 / 배너 1046x394 */
.sec07 {
    padding: 56px 0 60px;
    color: #fff;
    text-align: center;
}

.sec07 .list01 {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 35.2px;
    position: relative;
}

.sec07 .col01 {
    width: 396px;
    max-width: 46%;
}

.sec07 .text03 {
    position: relative;
    z-index: 2;
}

.sec07 .box01 {
    margin-top: -24px;
    padding: 22.4px 28.8px;
    border-radius: 11.2px;
    background: #dcd0c2;
    color: #241f18;
}

.sec07 .row01 {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 13.6px 0;
}

.sec07 .row01+.row01 {
    border-top: 1px solid #d6c09f;
}

.sec07 .icon01 {
    width: 60px;
}

.sec07 .text04 {
    flex: 1;
    text-align: left;
    font-family: '충주김생';
    font-size: 24.8px;
    letter-spacing: .015em;
}

.sec07 .text05 {
    font-family: '충주김생';
    font-size: 20.8px;
    letter-spacing: .015em;
}

.sec07 .mark01 {
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
    width: 73.6px;
    height: 73.6px;
    border-radius: 50%;
    background: var(--green);
    border: 1px solid var(--gold-d);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Familiar_Pro-Bold';
    font-size: 35.2px;
    z-index: 2;
}

.sec07 .text06 {
    width: 836.8px;
    max-width: 100%;
    margin: 8.8px auto 0;
    text-align: left;
    font-size: 13.6px;
    color: rgba(255, 255, 255, .55);
}

.sec07 .box02 {
    /* 간판 : 에셋 '자산 144@4x'(1046 x 169) - 이중 금박선·모서리 노치가 모두 들어 있다 */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 836.8px;
    max-width: 100%;
    aspect-ratio: 1046 / 169;
    height: auto;
    margin: 32.8px auto 0;
    padding: 0 32px;
    border: 0;
    background: url('../img/sign-point.png') center / 100% 100% no-repeat;
}

.sec07 .icon02 {
    width: 88px;
    margin-right: 78.4px;
}

.sec07 .line01 {
    width: 2px;
    height: 84.8px;
    margin-right: 45.6px;
    background: rgba(255, 255, 255, .35);
}

.sec07 .text07 {
    text-align: left;
    font-family: '충주김생';
    font-size: 28px;
    line-height: 38.4px;
    letter-spacing: .015em;
}

/* 순이익 배너 : 프레임(에셋) + 만석 영상 + 글자.
   영상 원본이 400x225 라 1046px 로 키우면 부드럽다 - 고해상 원본이 오면 교체할 것 */
.sec07 .box03 {
    position: relative;
    width: 836.8px;
    max-width: 100%;
    aspect-ratio: 1046 / 393;
    margin: 27.2px auto 0;
    overflow: hidden;
    --notch: 18px;
}

.sec07 .box03 .video01 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 액자(프레임 이미지)는 그대로 두고 영상만 모서리 호 모양으로 잘라낸다 */
    -webkit-mask:
        radial-gradient(circle var(--notch) at 0 0, transparent 98%, #000 100%) left top / 51% 51% no-repeat,
        radial-gradient(circle var(--notch) at 100% 0, transparent 98%, #000 100%) right top / 51% 51% no-repeat,
        radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000 100%) right bottom / 51% 51% no-repeat,
        radial-gradient(circle var(--notch) at 0 100%, transparent 98%, #000 100%) left bottom / 51% 51% no-repeat;
    mask:
        radial-gradient(circle var(--notch) at 0 0, transparent 98%, #000 100%) left top / 51% 51% no-repeat,
        radial-gradient(circle var(--notch) at 100% 0, transparent 98%, #000 100%) right top / 51% 51% no-repeat,
        radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000 100%) right bottom / 51% 51% no-repeat,
        radial-gradient(circle var(--notch) at 0 100%, transparent 98%, #000 100%) left bottom / 51% 51% no-repeat;
}

/* 프레임 에셋에 어두운 오버레이(알파 .70)가 이미 들어 있어 따로 덮지 않는다 */
.sec07 .box03::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: url('../img/frame-profit.png') center / 100% 100% no-repeat;
}

.sec07 .box03 .text08 {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: '애플고딕';
    color: #fff;
    letter-spacing: -.01em;
    line-height: 1;
}

/* 시안 실측 : 잉크 L1 220x41 / L2 668x60 / L3 432x41, 행 간격 29 / 42 */
.sec07 .box03 .text09 {
    font-size: 32.8px;
}

.sec07 .box03 .text10 {
    margin-top: 23.2px;
    font-size: 48px;
}

.sec07 .box03 .text11 {
    margin-top: 33.6px;
    font-size: 32.8px;
}

.sec07 .box03 .txt-gold {
    color: var(--gold);
}


/* =========================================================
   10. sec08 3가지 수익구조
   ========================================================= */
/* 시안 마스터 실측 (1920 기준) : 단락 5720
   ※ sec08 의 제목·숫자는 sec07/sec09 와 달리 붓글씨가 아니라 굵은 고딕이다
     (시안 L2 잉크 925x68, 글자 피치 73.7 - 충주김생으로는 재현 불가)
   ※ 핀 라벨 글자도 sec07 은 흰색인데 sec08 은 골드 (#CE995E) */
.sec08 {
    padding: 67.6px 0 140px;
    color: #fff;
    text-align: center;
}

.sec08 .demo-bigtitle {
    font-family: '애플고딕';
    font-size: 32px;
    /* 54 / zoom .88 */
    line-height: 1.52;
    letter-spacing: .06em;
}

.sec08 .demo-title {
    font-family: '애플고딕';
    font-size: 54px;
    /* 54 / zoom .88 */
    line-height: 1.38;
    letter-spacing: .02em;
}

.sec08 .demo-pill {
    color: var(--gold);
    font-size: 17.6px;
    letter-spacing: .05em;
}

/* 시안 box04 / line02 가 1310 이라 공용 1200 래퍼로는 좁다 */
.sec08 .demo-wrap {
    max-width: 950.4px;
}

.sec08 .txt-gold,
.sec08 .mark03 {
    color: #f1b382;
}

.sec08 .box03 .txt-gold {
    color: #f1b051;
}

.sec08 .text02 {
    margin-top: 36.6px;
    font-family: '충주김생';
}

/* 수익 포인트 01 - 점심 / 저녁 회전율 */
.sec08 .list01 {
    display: flex;
    justify-content: center;
    gap: 47.8px;
    margin-top: 31px;
    position: relative;
    flex-wrap: wrap;
}

.sec08 .col01 {
    width: 364.6px;
    max-width: 46%;
}

.sec08 .tag01 {
    position: relative;
    z-index: 2;
    /* inline-flex 는 줄상자의 baseline 여백(14px)이 아래에 붙어 간판이 테두리보다 위로 뜬다.
       블록 레벨로 두고 높이의 정확히 절반만큼 끌어내려 카드 위 테두리 한가운데에 걸친다. */
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    min-width: 150.6px;
    height: 43.7px;
    margin: 0 auto -21.85px;
    padding: 0 23.9px;
    border-radius: 28.2px;
    background: #014a3c;
    /* 카드와 같은 흰 테두리 */
    border: 2px solid rgba(255, 255, 255, .92);
    font-family: '충주김생';
    font-size: 21.1px;
    letter-spacing: -.02em;
}

/* 시안 카드는 밝은 종이가 아니라 진한 그린 + 흰 테두리 */
.sec08 .card01 {
    margin-top: 0;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 11.3px;
    overflow: hidden;
    background: #022a2a;
}

.sec08 .card01 .img01,
.sec08 .card01 .video01 {
    width: 100%;
    height: 199.9px;
    object-fit: cover;
    display: block;
}

/* 수익포인트 사진 : 카드 흰 테두리(2px) 안쪽 곡률에 맞춰 위쪽 모서리만 둥글게 */
.sec08 .card01 .img01 {
    border-radius: 9.3px 9.3px 0 0;
}

/* '여기서 잠깐' 본문 서체 */
.sec08 .box04,
.sec08 .box04 .text10,
.sec08 .box04 .text11 {
    font-family: 'Gowun Batang', serif;
}

/* 사진 대기 중인 자리 (원본 에셋 수급 후 img/video 로 교체) */
.sec08 .card01 .img01.type01 {
    background: rgba(255, 255, 255, .06);
}

.sec08 .text03 {
    padding: 26.7px 0 0;
    color: #fff;
    font-family: '애플고딕';
    font-size: 21.8px;
    letter-spacing: -.02em;
}

.sec08 .text04 {
    margin: 17.6px 8.5px 9.8px;
    /* 애플고딕은 글자가 줄상자 위쪽에 붙어 4px 위로 치우친다 -> 위/아래 여백을 그만큼 옮겨 실제 가운데로 */
    padding: 23.7px 0 15.7px;
    border-radius: 5.6px;
    background: #e3e6e7;
    color: #022a29;
    font-family: '애플고딕';
    font-size: 54.9px;
    letter-spacing: .06em;
}

.sec08 .mark01 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 16.9px;
    /* 태그가 카드 상단을 덮는 만큼 내려 카드 정중앙에 맞춘다 */
    padding-top: 12.7px;
    /* + 글리프가 선 높이 중앙보다 위에 찍히는 것 보정 */
    width: 104.2px;
    height: 104.2px;
    border-radius: 50%;
    background: #013a38;
    border: 7px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 77.4px;
    line-height: 1;
    font-family: '애플고딕';
    z-index: 2;
}

.sec08 .text05 {
    width: 777.2px;
    max-width: 100%;
    margin: 12.6px auto 0;
    text-align: left;
    font-size: 12px;
    color: rgba(255, 255, 255, .62);
}

.sec08 .icon01 {
    width: 79.5px;
    margin: -21.1px auto 39.4px;
    display: block;
}

/* 수익 포인트 02 - 영수증 비교 */
.sec08 .demo-labelline.type02 {
    margin-top: 83px;
}

.sec08 .text06,
.sec08 .text12 {
    font-family: '충주김생';
    font-size: 54px;
    /* 54 / zoom .88 */
    line-height: 1.33;
    letter-spacing: .01em;
}

.sec08 .list02 {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: 51.4px;
    flex-wrap: wrap;
}

.sec08 .card02 {
    position: relative;
    width: 297.8px;
    padding: 17px 13.4px 11px;
    color: #1f1a14;
    text-align: center;
    background: url('../img/receipt-aged.png') center / 100% 100% no-repeat;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .42));
}

.sec08 .card02.type02 {
    background-image: url('../img/receipt-white.png');
    width: 240.1px;
    margin-top: 54.9px;
    /* 시안 : 톱니 아래로 제목까지 여백이 넓다 */
    padding: 22.6px 13.4px 14px;
}

.sec08 .text07 {
    font-family: '충주김생';
    font-size: 23.1px;
    letter-spacing: -.02em;
}

.sec08 .card02.type02 .text07 {
    font-size: 17.8px;
}

.sec08 .card02.type02 .row01 {
    font-size: 14.3px;
}

.sec08 .box02 {
    margin: 1.3px -5.9px;
    /* 시안 : 사진 폭 카드의 95%, 제목 바로 아래 */
}

.sec08 .card02.type02 .box02 {
    margin: 4.3px 0 7.2px;
}

.sec08 .card02.type02 .box02 img {
    aspect-ratio: 302 / 190;
    /* 시안 우측 영수증 사진 비율 (카드폭 88.8% x 55.9%) */
    object-fit: cover;
}

.sec08 .card02.type02 {
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .34));
}

.sec08 .box02 img {
    width: 100%;
    border-radius: 2px;
}

.sec08 .box02.demo-xfade {
    aspect-ratio: 16/9;
    border-radius: 2px;
    overflow: hidden;
}

/* 좌측 영수증 사진은 페이드가 아니라 가로로 밀려서 바뀐다
   (앞 장이 왼쪽으로 빠지는 동안 뒷 장이 오른쪽에서 같이 들어온다) */
.sec08 .box02.demo-xfade.type02>img {
    opacity: 1;
    animation: demoXslide02 9s infinite backwards;
}

.sec08 .box02.demo-xfade.type02>img:nth-child(1) {
    animation-delay: 0s;
}

.sec08 .box02.demo-xfade.type02>img:nth-child(2) {
    animation-delay: 4.5s;
}

@keyframes demoXslide02 {
    0% {
        transform: translateX(100%);
        animation-timing-function: cubic-bezier(.65, 0, .35, 1);
    }

    7% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(0);
        animation-timing-function: cubic-bezier(.65, 0, .35, 1);
    }

    57% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.sec08 .text08 {
    margin: 6.9px 0 0;
    padding: 0 0 2.4px;
    border-top: 0;
    border-bottom: 2px solid #1f1a14;
    font-family: '충주김생';
    font-size: 14.6px;
}

.sec08 .card02.type02 .text08 {
    border-top: 1px solid #cfcfcf;
    border-bottom: 1px solid #cfcfcf;
    padding: 4.2px 0 1.8px;
    font-size: 12.5px;
}

.sec08 .row01 {
    display: flex;
    justify-content: space-between;
    padding: 2.1px 0;
    font-family: '충주김생';
    font-size: 10.6px;
}

.sec08 .card02 .text08+.row01 {
    margin-top: 4.1px;
    /* 시안 : 굵은 선과 첫 행 사이 간격 */
}

.sec08 .card02 .row01+.row01 {
    padding-bottom: 9.8px;
    border-bottom: 1.4px dashed #6b6155;
}

.sec08 .card02.type02 .row01+.row01 {
    border-bottom: 0;
}

.sec08 .text09 {
    margin-top: 14.1px;
    padding-top: 3px;
    border-top: 2px solid #1f1a14;
    text-align: right;
    font-family: '충주김생';
    font-size: 18.3px;
    letter-spacing: .05em;
}

/* 우측 영수증은 행이 한 줄뿐이라 좌측과 같은 간격을 쓰면 너무 길어진다 */
.sec08 .card02.type02 .text08+.row01 {
    margin-top: 0.5px;
}

.sec08 .card02.type02 .text09 {
    margin-top: 4.4px;
    border-top: 0;
    padding-top: 0;
    font-size: 20px;
}

.sec08 .mark02 {
    /* 두 영수증 사이에 걸치게 (흐름 안에 두어 AOS 의 transform 과 충돌하지 않는다) */
    align-self: center;
    position: relative;
    top: 6.3px;
    /* 시안 : 원 중심이 좌측 영수증 높이의 61.7% 지점 */
    margin: 0 -13px;
    z-index: 3;
    width: 61.9px;
    height: 61.9px;
    border-radius: 50%;
    /* 시안 : 원 안은 배경색으로 꽉 차 양쪽 영수증을 가린다 */
    background: #01332f;
    border: 4px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
}

/* 꺾쇠는 글리프 대신 직접 그린다 (시안 : 지름의 62% 높이, 획 5.9px) */
.sec08 .mark02::before {
    content: '';
    width: 26.6px;
    height: 26.6px;
    border-top: 5.9px solid var(--gold);
    border-right: 5.9px solid var(--gold);
    border-radius: 0 3px 0 0;
    transform: translateX(-4.9px) rotate(45deg);
}

.sec08 .box03 {
    width: 717.4px;
    margin-top: 52.8px;
    padding: 33.8px;
}

/* 여기서 잠깐 */
.sec08 .box04 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 34.5px;
    width: 670px;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 61.9px;
    /* 위 선은 .line02.type01 이 대신 그린다 (아래 선과 길이를 맞추기 위해) */
    text-align: left;
    position: relative;
}

.sec08 .col02 {
    position: relative;
    width: 249.2px;
    flex: none;
}

.sec08 .tag02 {
    position: absolute;
    top: -41.7px;
    left: -48.9px;
    width: 145.8px;
    z-index: 2;
    /* 투명 PNG 라 box-shadow 가 아니라 그림 모양을 따라가는 drop-shadow */
    filter: drop-shadow(0 6px 11px rgba(0, 0, 0, .55)) drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.sec08 .box05 {
    width: 100%;
    aspect-ratio: 9/10;
    border-radius: 11.3px;
    overflow: hidden;
}

.sec08 .col03 {
    flex: 1;
    position: relative;
}

.sec08 .text10 {
    font-family: '애플고딕_R';
    font-size: 25.4px;
    font-weight: 600;
    line-height: 1.34;
    letter-spacing: -.02em;
}

.sec08 .mark03 {
    border-bottom: 0;
}

.sec08 .text11 {
    margin-top: 20.4px;
    font-size: 15.1px;
    line-height: 16.9px;
    color: rgba(255, 255, 255, .92);
}

.sec08 .col03 .line01 {
    width: 35.9px;
    height: 1px;
    margin: 26.7px 0 9.8px;
    background: rgba(255, 255, 255, .25);
}

.sec08 .icon02 {
    position: absolute;
    right: -50px;
    bottom: 12.6px;
    width: 114.1px;
    opacity: .85;
}

.sec08 .line02 {
    width: 922.2px;
    max-width: 100%;
    height: 1px;
    margin: 28.9px auto 0;
    background: rgba(226, 184, 119, .45);
}

/* box04 위쪽 선 (아래 .line02 와 같은 폭) */
.sec08 .line02.type01 {
    margin-top: 44.3px;
}

/* 수익 포인트 03 - 리뷰 / 검색 노출 */
.sec08 .demo-labelline.type03 {
    margin-top: 68.3px;
}

.sec08 .text13 {
    margin-top: 16.9px;
    font-family: '충주김생';
    font-size: 32px;
    /* 32 / zoom .88 */
    line-height: 1.8;
    letter-spacing: -.02em;
}

.sec08 .mark04 {
    background: #fff;
    color: #12100d;
    padding: 2.8px 9.8px;
    border: 4px solid #00bf19;
}

.sec08 .list03 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4.1px;
    margin-top: 76.1px;
    height: 608.3px;
}

.sec08 .col04 {
    width: 273.7px;
    height: 100%;
    overflow: hidden;
    flex: none;
}

.sec08 .col04 .track01 {
    display: block;
    width: 100%;
}

.sec08 .col04.type01 .track01 {
    animation: demoRollUp 40s linear infinite;
}

.sec08 .col04.type02 .track01 {
    animation: demoRollDn 34s linear infinite;
}

.sec08 .img02 {
    width: 100%;
    height: 276.7px;
    object-fit: cover;
    object-position: top;
    display: block;
    margin-bottom: 16.3px;
    border: 3px solid #e4a94f;
    border-radius: 12.2px;
}

@keyframes demoRollUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

@keyframes demoRollDn {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}

.sec08 .col05 {
    position: relative;
    z-index: 3;
    width: 553.6px;
    flex: none;
}

.sec08 .box06 {
    width: 100%;
    aspect-ratio: 546/447;
    border-radius: 6px;
    overflow: hidden;
}

.sec08 .box06 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sec08 .icon03,
.sec08 .icon04,
.sec08 .icon05 {
    position: absolute;
    z-index: 4;
    width: 33%;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
    animation: demoFloatY 3.4s ease-in-out infinite;
}

@keyframes demoFloatY {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

.sec08 .icon03 {
    top: 7%;
    left: -4%;
}

.sec08 .icon04 {
    top: 45%;
    right: -3%;
    width: 35%;
    animation-duration: 4.2s;
    animation-delay: -1.3s;
}

.sec08 .icon05 {
    bottom: 6%;
    left: -4%;
    width: 34%;
    animation-duration: 3.8s;
    animation-delay: -2.2s;
}

.sec08 .box07 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7.8px;
    margin-top: 92.8px;
}

.sec08 .icon06 {
    width: 119px;
}

.sec08 .text14 {
    text-align: left;
    font-family: '충주김생';
    font-size: 26.1px;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.sec08 .item02 {
    position: relative;
    width: 43.7%;
    z-index: 2;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .45));
}

.sec08 .img04 {
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
}

.sec08 .img03 {
    position: absolute;
    z-index: 1;
    left: 3.6%;
    top: 4.2%;
    width: 93.4%;
    height: 95.7%;
    object-fit: cover;
    object-position: top;
    border-radius: 7% / 4%;
}


/* =========================================================
   11. sec09 본사 증명
   ========================================================= */
/* 시안 마스터 실측 (1920 기준) : 카드 463 x 465 (가로 34 / 세로 35), 내부 padding 46
   지점명·금액은 붓글씨가 아니라 굵은 고딕 / 도장 130 / 최고월매출 박스 371x170 #042622
   배경에 세로 금박 프레임선이 없다 (sec07 과 다름) */
.sec09 {
    padding: 116px 0 68.8px;
    color: #fff;
    text-align: center;
}

.sec09 .box01 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16.5px;
}

.sec09 .icon01,
.sec09 .icon02 {
    width: 86px;
}

.sec09 .list01 {
    display: grid;
    /* 시안 : 카드 433x434(정사각) · 가로간격 63 · 세로간격 67 -> sec09 축소배율 0.688 */
    grid-template-columns: repeat(2, 298px);
    justify-content: center;
    gap: 46.1px 43.3px;
    margin-top: 45px;
}

.sec09 .card01 {
    position: relative;
    padding: 21.3px;
    color: #241f18;
    background: url('../img/card-verify.png') center / 100% 100% no-repeat;
}

.sec09 .box02 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6.9px;
    padding-right: 46.8px;
}

.sec09 .icon04 {
    width: 51.6px;
}

.sec09 .text02 {
    font-family: '애플고딕';
    font-size: 34.4px;
    letter-spacing: 0;
    color: #01332f;
}

.sec09 .icon03 {
    position: absolute;
    top: -9.8px;
    right: -11px;
    width: 89.4px;
}

.sec09 .text03 {
    width: 236px;
    margin: 17.9px auto 0;
    padding-bottom: 11.7px;
    border-bottom: 1px solid #d3cab9;
    font-family: '애플고딕_B';
    font-size: 21.4px;
    letter-spacing: .005em;
    color: #082925;
}

.sec09 .box03 {
    margin-top: 25.4px;
    padding: 13.8px 0 18.6px;
    border-radius: 6.9px;
    background: #042622;
    color: #fff;
}

.sec09 .text04 {
    font-family: '애플고딕_B';
    font-size: 19.3px;
    letter-spacing: .05em;
    color: #ffd182;
}

.sec09 .text05 {
    margin-top: 2.7px;
    font-family: '애플고딕';
    font-size: 52.3px;
    line-height: 1;
    letter-spacing: 0;
    color: #fefbf4;
}

.sec09 .text06 {
    margin-top: 49.5px;
    font-family: '충주김생';
    font-size: 32px;
    /* 32 / zoom .86 */
    line-height: 64px;
    letter-spacing: .015em;
}

.sec09 .demo-bigtitle {
    font-size: 54px;
    /* 54 / zoom .86 */
}

.sec09 .txt-gold {
    color: #e4a94f;
}

.sec09 .txt-orange {
    color: #ed282a;
}


/* =========================================================
   12. sec10 / sec11 메뉴 슬라이더
       기존 메인페이지 sec09 / sec10 스타일 그대로 + 가격 간판(.price01)
   ========================================================= */
.sec10 {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 750px;
    margin: 0px auto -2px;
    padding: 100px 0px 0px;
    background-image: url('/img/index/sec09_bg01.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1920px;
}

.sec11 {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 714px;
    margin: 0px auto 0px;
    padding: 70px 0px 0px;
    /* 260916 에셋 002 : 1920x640 -> 단락 높이(714)에 맞춰 세로만 늘린다(세로선이라 왜곡 없음) */
    background-color: #02403d;
    background-image: url('../img/bg-sec11.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1920px 100%;
}

.sec10 .text01,
.sec11 .text01 {
    margin: 0px 0px 30px 0px;
    color: #fff;
    font-size: 32px;
    font-family: '충주김생';
}

.sec10 .text02,
.sec11 .text02 {
    margin: 0px 0px 40px 0px;
    color: #fff;
    font-size: 54px;
    font-family: '충주김생';
}

.sec10 .carousel-group,
.sec11 .carousel-group {
    position: relative;
}

.sec10 .carousel,
.sec11 .carousel {
    transition: opacity 0.5s;
}

.sec10 .swiper,
.sec11 .swiper {
    width: 1300px;
    height: 376px;
    /* 350 + 간판이 위로 삐져나오는 26 */
    padding-top: 26px;
    overflow: hidden;
}

.sec10 .swiper-slide,
.sec11 .swiper-slide {
    transform: scale(80%) !important;
    filter: blur(10px);
}

.sec10 .swiper-slide.swiper-slide-active,
.sec11 .swiper-slide.swiper-slide-active {
    transform: none !important;
    filter: none;
    transition: 0.3s;
}

.sec10 .slide01,
.sec11 .slide01 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 400px;
    height: 350px;
    padding: 5px;
    border-radius: 5px;
}

.sec10 .slide01 {
    background-color: #c0804f;
    /* 대표 딱지를 사진 폭 기준(cqw)으로 배치하기 위한 기준 상자 */
    container-type: inline-size;
}

/* '대표' 딱지 : 이전 메뉴 이미지에 그려져 있던 것을 실측해 HTML 로 재현
   (사진 폭 대비 가로 18.7% x 세로 8.3%, 중심 x 86.8% / y 사진높이의 14.2%, 약 18도 기울임, #d60211) */
.sec10 .badge01 {
    position: absolute;
    z-index: 2;
    left: calc(5px + 77.45cqw);
    top: calc(5px + 6.45cqw);
    width: 18.7cqw;
    height: 8.3cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d60211;
    color: #fff;
    font-family: '애플고딕_B';
    font-size: 5.4cqw;
    line-height: 1;
    letter-spacing: .06em;
    transform: rotate(18deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
    pointer-events: none;
}

/* 덮밥과 우동 슬라이드 아래 캡션 : 가운데 슬라이드(400px)와 같은 폭으로 두고 왼쪽 정렬
   -> 글자 시작점이 가운데 카드의 왼쪽 끝과 맞는다 */
.sec11 .text03 {
    width: 400px;
    max-width: 100%;
    text-align: left;
    margin-top: 14px;
    color: rgba(255, 255, 255, .72);
    font-family: '애플고딕_M';
    font-size: 16px;
    letter-spacing: -.01em;
}

/* 스페셜 카츠메뉴 */
.sec11 .slide01 {
    background-color: #300103;
}

/* 덮밥과 우동 */

.sec10 .slide_text01,
.sec11 .slide_text01 {
    color: #fff;
    font-size: 24px;
    font-family: '충주김생';
    padding: 5px 0 0;
    margin: auto;
}

.sec10 .slide_text01._small,
.sec11 .slide_text01._small {
    font-size: 22px;
}

.sec10 .swiper img,
.sec11 .swiper img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 5px;
}

/* 가격 간판 */
/* 가격 간판 : 에셋 '자산 165@4x'(215 x 46). 시안처럼 카드 상단 모서리에 걸치게 중앙 배치 */
.sec10 .price01,
.sec11 .price01 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 215px;
    height: 42px;
    background: center / 100% 100% no-repeat;
    color: #fff;
    font-family: '애플고딕';
    font-size: 26px;
    line-height: 1;
    letter-spacing: -.01em;
}

.sec10 .price01 {
    background-image: url('../img/sign-price.png');
}

/* 탄색 + 초록 테두리 */
.sec11 .price01 {
    background-image: url('../img/sign-price2.png');
}

/* 진한 자주 */

/* 네비게이션 버튼 */
.sec10 .swiper-button-prev,
.sec10 .swiper-button-next,
.sec11 .swiper-button-prev,
.sec11 .swiper-button-next {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -22px 370px 0px 370px;
}

.sec10 .swiper-button-prev:after,
.sec10 .swiper-button-next:after,
.sec11 .swiper-button-prev:after,
.sec11 .swiper-button-next:after {
    font-size: 30px;
}


/* =========================================================
   13. sec12 창업 혜택 및 관리지원
   ========================================================= */
/* 시안 마스터 실측 (1920 기준)
   제목 잉크 rel 254~321 (h68, w876) / 부제 403~433 (h31) / 가로선 479.5 (w703)
   4열 : 구분선 x682.5 / 962.5 / 1242.5 -> 열 폭 280, 구분선 y632~911 (h280)
   아이콘 잉크 681~789 / 라벨 834~858 (h24, #8B0000) / 설명 878~896
   신규 가로선 rel 968.5 (x362~1557, w1196)
   ※ 상단 240px 여백은 시안의 엔소(붓 원)·먹구름·붉은 도장 장식 자리다 (에셋 미확보) */
/* sec12 + sec13 공통 배경 (에셋 '자산 169@4x' = 1921 x 2392)
   시안 : sec12 상단 1383 ~ sec13 하단 3775 = 2392. 두 단락 높이 합을 2392 로 맞춘다. */
/* 한 장짜리 공유 배경 : 화면이 좁아져도 배경을 줄이지 않고 좌우를 잘라낸다 (cover)
   - ink  : sec12 + sec13  (자산 169@4x, 1921 x 2392)
   - paper: sec14 + sec15  (자산 175@4x, 1920 x 2084) */
.demo-ink-bg,
.demo-paper-bg {
    background-color: var(--paper);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.demo-ink-bg {
    background-image: url('../img/bg-ink.jpg');
}

.demo-paper-bg {
    background-image: url('../img/bg-step.jpg');
    overflow: hidden;
    /* sec15 접시가 단락 경계는 넘되 화면 밖으로는 못 나가게 */
}

/* sec07 + sec08 : 에셋 '출발선 배경@4x'(1920x7204) 한 장. 세로 금박선·가로 헤어라인 포함 */
.demo-green-bg {
    position: relative;
    overflow: hidden;
    /* 원본 '출발선 배경'(1920x7204)에는 가로선이 y22 / y1505 / y7110 에 박혀 있어
       단락 길이가 달라지면 엉뚱한 자리에 줄이 그어진다.
       -> 가로선이 없는 구간의 평균 한 줄만 뽑은 타일을 늘려 깔고,
          시안의 가로선은 아래 .sec08::before 로 sec07/sec08 경계에만 그린다. */
    background: var(--green) url('../img/bg-line-clean.jpg') center top / 100% 100% no-repeat;
}

/* 시안 : sec07 과 sec08 사이 - 얇은 선 한 줄, 그 위아래로 진한 선이 한 줄씩 */
.demo-green-bg>.sec08::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* .demo-section 이 overflow:hidden 이라 단락 밖으로는 못 나간다.
       -> 얇은 선 + 아래 진한 선은 sec08 안에, 위 진한 선은 sec07 안에 그린다. */
    top: 0;
    height: 13px;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, .092) 0 2px,
            transparent 2px 11px,
            rgba(255, 255, 255, .26) 11px 13px);
    pointer-events: none;
    z-index: 2;
}

/* 경계 얇은 선의 '위' 진한 선 (sec07 안쪽 끝) */
.demo-green-bg>.sec07::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9px;
    height: 2px;
    background: rgba(255, 255, 255, .26);
    pointer-events: none;
    z-index: 2;
}

/* 같은 진한 선을 sec07 맨 위와 sec08 맨 아래에도 한 줄씩 */
.demo-green-bg>.sec07::before,
.demo-green-bg>.sec08::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, .26);
    pointer-events: none;
    z-index: 2;
}

.demo-green-bg>.sec07::before {
    top: 11px;
}

.demo-green-bg>.sec08::after {
    bottom: 11px;
}

.demo-green-bg>.demo-section {
    position: relative;
    z-index: 1;
}

/* sec09 : '가맹사업 배경@4x'(1920x1602) - 대나무 워터마크, 세로 금박선 없음 */
.demo-bg-verify {
    background: #103e37 url('../img/bg-verify.jpg') center top / cover no-repeat;
}

/* sec02 : '월매출 달성 배경@4x'(1920x1103) */
.demo-bg-month {
    background: var(--dark) url('../img/bg-month.jpg') center top / cover no-repeat;
}

/* 반투명 로고 워터마크 (자산 143@4x, 알파 최대 16/255) - 시안 실측 위치 */
.demo-wm {
    position: absolute;
    z-index: 0;
    display: block;
    pointer-events: none;
    aspect-ratio: 653 / 922;
    background: url('../img/wm-logo.png') center / 100% 100% no-repeat;
}

.demo-wm.wm01 {
    top: 108px;
    right: -32px;
    width: 522.4px;
}

.demo-wm.wm02 {
    top: 2236.8px;
    left: -156px;
    width: 368px;
}

.demo-wm.wm03 {
    top: 2241.6px;
    right: -156px;
    width: 368px;
}

.demo-wm.wm04 {
    top: 3581.6px;
    left: -144.8px;
    width: 368px;
}

.demo-wm.wm05 {
    top: 3619.2px;
    right: -156px;
    width: 368px;
}

.demo-wm.wm06 {
    top: 4716.8px;
    left: -152.8px;
    width: 416px;
}

.sec12 {
    position: relative;
    padding: 240px 0 4px;
    color: #241f18;
    text-align: center;
}

.sec12 .text01 {
    font-family: '충주김생';
    font-size: 54px;
    letter-spacing: 0;
}

.sec12 .text02 {
    margin-top: 51px;
    font-family: '애플고딕_B';
    font-size: 32px;
    letter-spacing: -.03em;
}

.sec12 .line01 {
    width: 700px;
    max-width: 80%;
    height: 1px;
    margin: 33px auto;
    background: #afaeae;
}

.sec12 .text03 {
    font-family: '애플고딕_M';
    font-size: 24px;
    line-height: 35px;
    color: #222;
}

.sec12 .list01 {
    display: flex;
    justify-content: center;
    margin-top: 49px;
}

.sec12 .item01 {
    position: relative;
    width: 280px;
    padding: 29px 16px 6px;
}

.sec12 .item01+.item01::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: #6f6c68;
}

.sec12 .icon01 {
    height: 145px;
    width: auto;
}

.sec12 .text04 {
    margin-top: 22px;
    font-family: '애플고딕';
    font-size: 28px;
    color: #8b0000;
    letter-spacing: -.04em;
}

.sec12 .text05 {
    margin-top: 2px;
    font-family: '애플고딕_M';
    font-size: 22px;
    color: #222;
}

.sec12 .line03 {
    width: 1200px;
    max-width: 100%;
    height: 1px;
    margin: 57px auto 0;
    background: #afaeae;
}

.sec12 .box01 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
}

.sec12 .icon02 {
    height: 145px;
}

.sec12 .box01 .text04 {
    margin-top: 0;
    text-align: left;
    font-size: 28px;
}

.sec12 .box01 .text05 {
    margin-top: 8px;
    text-align: left;
}

/* sec13 과의 경계 점선 : 전폭 / dash 13 gap 11 / #6E1A19 */
.sec12 .line02 {
    width: 100%;
    max-width: none;
    height: 1px;
    margin: 74px auto 0;
    border-top: 0;
    background: repeating-linear-gradient(to right, #6e1a19 0 13px, transparent 13px 24px);
}


/* =========================================================
   14. sec13 창업비용
   ========================================================= */
/* 시안 : 상단 2/3 은 깨끗한 종이이고 먹그림은 하단(rel 500~1176)에만 깔린다.
   먹그림은 마스터에서 잘라 종이색을 흰색으로 정규화한 뒤 multiply 로 얹는다. */
.sec13 {
    position: relative;
    padding: 92px 0 218px;
    color: #241f18;
    text-align: center;
}

/* 시안 마스터 실측 (1920 기준)
   제목 잉크 rel 106~174 (h69) / 라벨 막대 12 x 28 #520808, 막대↔글자 16
   표 x428~1491 (w1064) / 헤더 띠 h54 #530F0F / 본문 행 h53 / 열 구분선 x726
   글자 : th 22 / td 22 (lh1.4) / 각주 22 (배경 박스 없음) */
.sec13 .text01 {
    font-family: '충주김생';
    font-size: 54px;
    letter-spacing: 0;
}

.sec13 .box01 {
    position: relative;
    z-index: 1;
    width: 1064px;
    max-width: 100%;
    margin: 74px auto 0;
    text-align: left;
}

.sec13 .text02 {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 7px;
    font-family: '애플고딕';
    font-size: 28px;
    letter-spacing: 0;
}

.sec13 .text02::before {
    content: '';
    width: 12px;
    height: 28px;
    background: #520808;
}

.sec13 .table01 {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: none;
}

/* 시안 : 표 배경 없음 (먹그림이 표를 침범하지 않는다) */
.sec13 .table01 th {
    padding: 12px 10px;
    text-align: center;
    background: #530f0f;
    color: #fff;
    font-family: '애플고딕_B';
    font-size: 22px;
}

.sec13 .table01 th:first-child {
    width: 28%;
}

.sec13 .table01 td {
    padding: 11px 10px;
    text-align: center;
    border-bottom: 1px solid #d3cfc6;
    font-family: '애플고딕_M';
    font-size: 22px;
    line-height: 1.4;
    color: #1f1f1f;
}

.sec13 .table01 th+th,
.sec13 .table01 td+td {
    border-left: 1px solid #cfc9bf;
}

.sec13 .table01 tr:last-child td {
    border-bottom: 1px solid #d3cfc6;
}

.sec13 .text03 {
    display: block;
    margin-top: 13px;
    padding: 0;
    border-radius: 0;
    background: none;
    font-family: '애플고딕_M';
    font-size: 22px;
    color: #1f1f1f;
}


/* =========================================================
   15. sec14 창업 절차
   ========================================================= */
/* 시안 마스터 실측 (1920 기준) : 단락 1236 (크롭 상단 174px 은 sec13 먹번짐 장식)
   제목 잉크 x555~1361 (807) h68 / 구분선 x529~1390 (862) / 부제 잉크 564 h30
   카드 222 x 265, 열간격 85 행간격 69, 테두리 4px #531010 r8, 배경 없음
   번호 #8A0000 산세리프 28px (테두리 끊김폭 84) / 아이콘 72 / 소제목 24 #8A0000 / 본문 18 lh24 */
.sec14 {
    padding: 115px 0 267px;
    color: #2b2a28;
    text-align: center;
}

.sec14 .text01 {
    font-family: '충주김생';
    font-size: 54px;
    letter-spacing: 0;
}

.sec14 .line01 {
    width: 863px;
    max-width: 80%;
    height: 1px;
    margin: 4px auto 30px;
    background: #d1a372;
}

.sec14 .text02 {
    font-family: '애플고딕';
    font-size: 32px;
    letter-spacing: 0;
}

.sec14 .list01 {
    display: grid;
    grid-template-columns: repeat(3, 222px);
    justify-content: center;
    gap: 69px 85px;
    margin-top: 68px;
}

/* 번호를 단색으로 덮지 않고 테두리 자체를 끊는다 (뒤 종이 질감이 그대로 보이도록)
   - 박스 치수를 유지하려고 테두리는 투명으로 남기고, 보이는 선은 ::before 에 그린 뒤
     상단 중앙 84px 만 마스크로 잘라낸다 */
.sec14 .card01 {
    position: relative;
    padding: 36px 14px 16px;
    border: 4px solid transparent;
    border-radius: 8px;
    background: none;
}

.sec14 .card01::before {
    content: '';
    position: absolute;
    inset: -4px;
    pointer-events: none;
    border: 4px solid #531010;
    border-radius: 8px;
    -webkit-mask:
        linear-gradient(#000 0 0) left top / calc(50% - 42px) 10px no-repeat,
        linear-gradient(#000 0 0) right top / calc(50% - 42px) 10px no-repeat,
        linear-gradient(#000 0 0) left bottom / 100% calc(100% - 10px) no-repeat;
    mask:
        linear-gradient(#000 0 0) left top / calc(50% - 42px) 10px no-repeat,
        linear-gradient(#000 0 0) right top / calc(50% - 42px) 10px no-repeat,
        linear-gradient(#000 0 0) left bottom / 100% calc(100% - 10px) no-repeat;
}

.sec14 .num01 {
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 27px;
    background: none;
    color: #8a0000;
    font-family: '애플고딕';
    font-size: 28px;
    line-height: 30px;
}

.sec14 .icon01 {
    width: 72px;
}

.sec14 .text03 {
    margin-top: 13px;
    font-family: '애플고딕';
    font-size: 24px;
    line-height: 36px;
    color: #8a0000;
    letter-spacing: 0;
}

.sec14 .text04 {
    margin-top: 12px;
    font-family: '애플고딕_B';
    font-size: 18px;
    line-height: 24px;
    color: #2b2926;
}


/* =========================================================
   16. sec15 추천 대상
   ========================================================= */
/* 시안 마스터 실측 (1920 기준) : 단락 851
   눈썹 잉크 184 h30 / 제목 잉크 725 h69 / 구분선 864 / 리드 잉크 541 h25
   카드 404 x 449, 피치 424.5(간격 21), 아바타 잉크 179x163, 인용행(선85x2 + 따옴표 33)
   본문 27px lh35, 강조 #5A0000, 하단 대시 33x2 #2D0B02 */
.sec15 {
    position: relative;
    overflow: visible;
    /* 접시 장식이 위 단락으로 자연스럽게 넘어가도록 (잘림 방지) */
    padding: 30px 0 68px;
    color: #2b2a28;
    text-align: center;
    background-position: center bottom;
}

.sec15 .img01 {
    position: absolute;
    left: -96px;
    top: -118px;
    width: 470px;
}

.sec15 .img02 {
    position: absolute;
    right: -120px;
    top: -116px;
    width: 520px;
}

/* 좌우 접시는 위아래로 천천히 둥실거린다 (서로 다른 주기로 어긋나게) */
.sec15 .img01,
.sec15 .img02 {
    animation: demoFloatY 4.8s ease-in-out infinite;
    will-change: transform;
}

.sec15 .img02 {
    animation-duration: 6.2s;
    animation-delay: -2.1s;
}

.sec15 .text01 {
    font-family: '애플고딕';
    font-size: 32px;
    letter-spacing: 0;
}

.sec15 .text02 {
    margin: 2px 0 0;
    font-family: '충주김생';
    font-size: 54px;
    letter-spacing: 0;
}

.sec15 .line01 {
    width: 863px;
    max-width: 80%;
    height: 1px;
    margin: 0 auto;
    background: #d1a372;
}

.sec15 .text03 {
    margin-top: 18px;
    font-family: '애플고딕';
    font-size: 32px;
    line-height: 45px;
    color: #2b2a28;
    letter-spacing: -.035em;
}

/* 카드 4장 폭 합계 1679 - 공용 1200 래퍼 밖에 둔다 */
.sec15 .list01 {
    display: grid;
    grid-template-columns: repeat(4, 288px);
    justify-content: center;
    gap: 16px;
    margin-top: 70px;
}

.sec15 .card01 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 27px 14px 19px;
    min-height: 320px;
    background: url('../img/card-reco.png') center / 100% 100% no-repeat;
}

.sec15 .icon01 {
    width: 132px;
    margin: 0;
}

.sec15 .row01 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 13px;
}

.sec15 .line03 {
    width: 61px;
    height: 2px;
    background: #c3b6ae;
}

.sec15 .icon02 {
    width: 24px;
    margin: 0;
}

.sec15 .text04 {
    margin: auto 0;
    font-family: '애플고딕_M';
    font-size: 19px;
    line-height: 25px;
    letter-spacing: 0;
    color: #111;
}

.sec15 .mark01 {
    color: #5a0000;
}

.sec15 .line02 {
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: #2d0b02;
}


/* =========================================================
   17. sec16 CTA - 기존 메인페이지 sec13 그대로 (문구가 배경 이미지에 포함)
   ========================================================= */
.sec16 {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 619px;
    margin: 0px auto 0px;
    padding: 0px;
    /* 260916 에셋 002 : 1920x618 (문구가 이미지에 포함되어 있다) */
    background-color: #046156;
    background-image: url('../img/bg-sec16.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1920px 100%;
}

@media screen and (max-width: 1200px) {
    .sec16 {
        height: auto;
        min-height: 300px;
        aspect-ratio: 1920 / 619;
        background-size: auto 100%;
    }
}


/* =========================================================
   18. sec17 문의 폼 - 기존 메인페이지 sec14 그대로 / 푸터
   ========================================================= */
.sec17 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px auto 0px;
    padding: 50px 0px 50px;
    font-family: '애플고딕_EB';
    background-color: #fff;
    text-align: center;
}

.sec17 .logo01 {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.sec17 .text01 {
    font-size: 16px;
}

.sec17 .text02 {
    display: flex;
    align-items: center;
    font-size: 48px;
}

.sec17 .img01 {
    width: 40px;
    object-fit: contain;
    margin: 10px;
}

.sec17 .text03 {
    color: #d7000f;
    font-size: 60px;
}

.sec17 #fwrite {
    width: 600px;
    max-width: calc(100% - 20px);
    margin: auto;
    text-align: left;
}

.sec17 label {
    display: block;
    margin: 20px 0px 5px;
    font-size: 14px;
}

.sec17 input[type=text],
.sec17 input[type=tel] {
    width: 100%;
    height: 30px;
    padding: 5px 10px;
    outline: none;
    border: none;
    background: #f5f5f5 !important;
    box-shadow: none;
    border-radius: 5px;
    font-family: '애플고딕_M';
    font-size: 15px;
}

.sec17 .bo_w_agree .box01 {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 6px;
    font-size: 14px;
}

.sec17 .bo_w_agree .box01 label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.sec17 .btn_confirm {
    margin: 50px 0px 0px 0px;
    text-align: center;
}

.sec17 .btn_submit {
    width: 180px;
    height: 45px;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    font-family: '애플고딕_EB';
    font-size: 24px;
    background: #046155;
}

@media screen and (max-width: 768px) {
    .sec17 .text02 {
        font-size: 28px;
    }

    .sec17 .text03 {
        font-size: 40px;
    }

    .sec17 .logo01 {
        display: none;
    }

    .sec17 .btn_submit {
        width: 120px;
        height: 35px;
        font-size: 18px;
    }
}

.demo-footer {
    padding: 30px 0 34px;
    background: #1b1a18;
    color: #fff;
}

.demo-footer .box01 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: calc(100% - 80px);
    max-width: 1860px;
    margin: 0 auto 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.demo-footer .logo01 {
    height: 48px;
}

.demo-footer .col01 {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.demo-footer .text01 {
    font-family: '애플고딕';
    font-size: 28px;
    letter-spacing: -.03em;
}

.demo-footer .text02 {
    color: var(--red);
    font-family: '애플고딕';
    font-size: 19px;
}

.demo-footer .text03 {
    text-align: center;
    font-family: '애플고딕_R';
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
    line-height: 1.7;
}


/* =========================================================
   19. 반응형
   ========================================================= */
@media screen and (max-width: 1200px) {

    .demo-quickbar .label01,
    .demo-quickbar .btn01 {
        white-space: nowrap;
    }
}

@media screen and (max-width: 1160px) {
    .sec02 .box02 {
        position: static;
        width: 150px;
        margin: 22px auto 0;
        top: auto;
        right: auto;
    }
}

@media screen and (max-width: 1280px) {
    .sec02 .btn01 {
        left: 6px;
    }

    .sec02 .btn02 {
        right: 6px;
    }

    .sec15 .img01,
    .sec15 .img02 {
        display: none;
    }
}

@media screen and (max-width: 1100px) {

    .demo-bigtitle,
    .sec03 .text02 {
        font-size: 40px;
    }

    .sec03 .text02 .line01 {
        font-size: inherit;
    }

    .sec02 .text02 {
        font-size: 44px;
    }

    .sec05 .text01 {
        font-size: 52px;
    }

    .sec09 .list01 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sec14 .list01 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sec15 .list01 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sec05 .list01 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
    }
}

@media screen and (max-width: 768px) {
    .head02 {
        height: 62px;
    }

    .head02 .logo01 {
        height: 72px;
    }

    .head02 .div-tel02 {
        width: 60px;
    }

    .head02 .div-tel02 img {
        width: 30px;
        height: 30px;
    }

    /* 모바일 : 히어로는 시안 비율 고정 (뷰포트 계산은 PC/태블릿 전용) */
    .sec01 {
        height: auto;
        min-height: 0;
        aspect-ratio: 1920 / 699;
    }

    /* 항상 노출되는 바이므로 화면을 적게 차지하도록 2줄로 압축 */
    .demo-quickbar .box01 {
        height: auto;
        padding: 8px 10px;
    }

    .demo-quickbar .logo01,
    .demo-quickbar .text01 {
        display: none;
    }

    .demo-quickbar .form01 {
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }

    .demo-quickbar .input01,
    .demo-quickbar .input02,
    .demo-quickbar .select01,
    .demo-quickbar .select02 {
        width: calc(50% - 3px);
        height: 38px;
        padding: 0 12px;
        font-size: 15px;
        border-radius: 6px;
    }

    .demo-quickbar .select01,
    .demo-quickbar .select02 {
        padding-right: 28px;
        background-position: right 9px center;
        background-size: 13px 8px;
    }

    .demo-quickbar .label01 {
        order: 5;
        flex: 1;
        justify-content: flex-start;
        margin-left: 2px;
        gap: 6px;
        font-size: 13px;
    }

    .demo-quickbar .label01 input[type="checkbox"] {
        width: 20px;
        height: 20px;
        border-width: 1.5px;
    }

    .demo-quickbar .label01 input[type="checkbox"]::after {
        left: 4px;
        top: 4px;
        width: 9px;
        height: 5px;
        border-width: 0 0 2px 2px;
    }

    .demo-quickbar .btn01 {
        order: 6;
        width: auto;
        height: 38px;
        margin-left: 0;
        padding: 0 24px;
        font-size: 16px;
        border-radius: 6px;
    }

    .sec02,
    .sec03,
    .sec05,
    .sec07,
    .sec08,
    .sec09,
    .sec12,
    .sec13,
    .sec14,
    .sec15 {
        padding: 56px 0 58px;
    }

    .sec07 {
        padding-bottom: 0;
    }

    .sec04 .list01,
    .sec04 .list02 {
        margin: 5px 0px;
    }

    .sec04 .list01 {
        animation: sec04_01 2s linear infinite;
    }

    .sec04 .list02 {
        animation: sec04_01 2s reverse linear infinite;
    }

    .sec04 .img01 {
        width: 85px;
        margin: 0px 11.5px;
    }

    /* 피치 108 = 216 / 2 (키프레임과 맞춤) */
    .sec04 .box01 {
        height: auto;
        padding: 16px;
        gap: 12px;
        flex-wrap: wrap;
    }

    .sec04 .text01 {
        font-size: 16px;
    }

    .sec04 .btn01 {
        font-size: 15px;
        padding: 9px 18px;
    }

    .sec02 .text01 {
        font-size: 18px;
    }

    .sec02 .text02 {
        font-size: 28px;
        margin: 20px 0 30px;
    }

    .sec02 .box02 {
        width: 132px;
    }

    .sec03 .text01 {
        font-size: 18px;
    }

    .sec03 .text02 {
        font-size: 26px;
        margin: 18px 0 32px;
    }

    .sec03 .list01 {
        gap: 16px;
    }

    .sec03 .item01 {
        width: calc(50% - 8px);
        max-width: none;
    }

    .sec03 .box01 {
        border-width: 2px;
    }

    .sec03 .text03 {
        font-size: 16px;
        margin-top: 12px;
    }

    .sec05 .text01 {
        font-size: 28px;
    }

    .sec05 .text02,
    .sec05 .text08 {
        font-size: 16px;
        line-height: 1.7;
    }

    .sec05 .text03 {
        font-size: 20px;
    }

    .sec05 .text04 {
        margin-top: 12px;
        font-size: 14px;
    }

    .sec05 .text05 {
        font-size: 20px;
    }

    .sec05 .text07 {
        font-size: 22px;
    }

    .sec05 .text06 {
        font-size: 20px;
    }

    .sec05 .line01 {
        width: 70%;
        margin-top: 12px;
    }

    .sec05 .card02 {
        min-height: 0;
        padding: 22px 18px 20px;
    }

    .sec05 .row01 {
        font-size: 14px;
        line-height: 24px;
    }

    .sec05 .row01>span {
        width: auto;
        text-align: left;
    }

    .sec05 .row01>span+span {
        text-align: right;
    }

    .sec05 .row01.type01,
    .sec05 .row01.type03 {
        font-size: 15px;
        line-height: 26px;
    }

    .sec05 .text09 {
        font-size: 15px;
    }

    .sec05 .text09 .num01 {
        margin-left: 8px;
        font-size: 17px;
    }

    .sec05 .text10 {
        font-size: 22px;
    }

    .sec05 .box02 {
        margin-top: 40px;
    }

    .sec05 .text12 {
        font-size: 13px;
    }

    .sec05 .row01.type02 .icon01 {
        width: 14px;
        height: 14px;
        margin-right: 6px;
        vertical-align: -2px;
    }

    .sec05 .row01.type02 .icon01::after {
        left: 3px;
        right: 3px;
        top: 6px;
        height: 2px;
    }

    .sec05 .list01 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sec05 .card01 {
        height: auto;
        padding: 22px 18px 24px;
    }

    /* [sec05-auto-open] 한 줄에 한 장씩 쌓이는 폭에서는 높이를 내용에 맞춘다 (순수익은 페이드인) */
    .sec05 .card01.is-open {
        height: auto;
    }

    .sec05 .list01 {
        grid-auto-rows: auto;
        margin-top: 20px;
    }

    .sec05 .list02 {
        gap: 14px;
        margin-top: 20px;
    }

    .sec05 .card02 {
        width: 100%;
    }

    .sec05 .line02 {
        margin: 40px auto;
    }

    .sec05 .text11 {
        font-size: 18px;
    }

    .sec06 .track01 img {
        height: 130px;
    }

    .sec06 {
        padding: 12px 0;
    }

    .sec06::before,
    .sec06::after {
        width: 90px;
    }

    .demo-eyebrow {
        font-size: 17px;
    }

    .demo-title {
        font-size: 20px;
        line-height: 1.5;
    }

    .demo-bigtitle {
        font-size: 26px;
    }

    .demo-labelline {
        margin: 28px 0 22px;
    }

    .demo-labelline .line-l,
    .demo-labelline .line-r {
        width: 40px;
    }

    .demo-goldbox {
        font-size: 18px;
        padding: 18px 16px;
    }

    .sec08 .text06,
    .sec08 .text12 {
        font-size: 26px;
    }

    .sec09 .box01 {
        align-items: center;
        gap: 10px;
    }

    .sec09 .icon01,
    .sec09 .icon02 {
        width: 36px;
    }

    .sec09 .list01 {
        grid-template-columns: 298px;
        justify-content: center;
        gap: 14px;
    }

    .sec09 .text06 {
        font-size: 17px;
        margin-top: 34px;
    }

    /* 메뉴 슬라이더 - 기존 메인페이지 모바일 설정 그대로 */
    .sec10 {
        height: 500px;
        padding: 40px 0px 60px;
        background-size: 1280px;
    }

    .sec11 {
        height: 476px;
        padding: 40px 0px 60px;
        background-size: 1280px;
    }

    .sec10 .text01,
    .sec11 .text01 {
        font-size: 16px;
        margin: 0px;
    }

    .sec10 .text02,
    .sec11 .text02 {
        font-size: 36px;
        margin: 0px;
    }

    .sec10 .swiper,
    .sec11 .swiper {
        width: 1060px;
        height: 300px;
        padding-top: 20px;
    }

    .sec10 .slide01,
    .sec11 .slide01 {
        width: 320px;
        height: 280px;
    }

    /* 캡션을 가운데 슬라이드(320px) 왼쪽 끝에 맞춘다 */
    .sec11 .text03 {
        width: 320px;
    }

    .sec10 .slide_text01,
    .sec11 .slide_text01 {
        font-size: 19px;
    }

    .sec10 .slide_text01._small,
    .sec11 .slide_text01._small {
        font-size: 17px;
    }

    .sec10 .price01,
    .sec11 .price01 {
        left: 50%;
        width: 172px;
        height: 34px;
        font-size: 21px;
    }

    .sec12 .text01,
    .sec13 .text01,
    .sec14 .text01,
    .sec15 .text02 {
        font-size: 26px;
    }

    .sec12 .text02 {
        margin-top: 20px;
        font-size: 16px;
    }

    .sec12 .list01 {
        flex-wrap: wrap;
        gap: 10px 0;
    }

    .sec12 .item01 {
        width: 50%;
        padding: 0 8px;
    }

    .sec12 .item01+.item01::before {
        display: none;
    }

    .sec12 .box01 {
        flex-direction: column;
        gap: 8px;
    }

    .sec12 .box01 .text04,
    .sec12 .box01 .text05 {
        text-align: center;
    }

    .sec13 .table01 th,
    .sec13 .table01 td {
        padding: 9px 6px;
        font-size: 13px;
    }

    .sec14 .list01 {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .sec15 .list01 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sec15 .card01 {
        min-height: 0;
        padding: 30px 20px 34px;
    }


    .demo-footer .box01 {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: calc(100% - 30px);
    }

    .demo-footer .text01 {
        font-size: 20px;
    }

    .demo-footer .text03 {
        font-size: 11px;
        padding: 0 14px;
    }
}


/* =========================================================
   20. 초광폭 화면 대응 (1500px ~ 2560px)
   ========================================================= */

/* 1) 넓은 화면에서는 배경을 고해상도 소스로 교체
      (좁은 화면에서는 내려받지 않음) */
@media screen and (min-width: 1500px) {
    .demo-bg-green {
        background-image: url('../img/bg-green@2x.jpg');
    }

    .demo-bg-paper {
        background-image: url('../img/bg-paper@2x.jpg');
    }

    .demo-promo-bg {
        background-image: url('../img/bg-promo@2x.jpg');
    }

    .demo-ink-bg {
        background-image: url('../img/bg-ink@2x.jpg');
    }

    .demo-paper-bg {
        background-image: url('../img/bg-step@2x.jpg');
    }
}

/* 2) 1920 초과 화면은 body 의 zoom: var(--z) 로 연속 확대한다(계단 없음).
      --z = min(화면폭 / 1920, 2560 / 1920) 이며 index.php 의 스크립트가 설정한다.
      2560px 에서 실효 폭이 정확히 1920px 이 되어 시안이 1:1 로 비례 확대된다.
      zoom 은 vh / vw 에는 적용되지 않으므로, 뷰포트 단위를 쓰는 계산은 --z 로 나눈다. */
@media screen and (min-width: 2561px) {

    /* 2560 초과에서는 실효 폭이 1920 을 넘으므로 헤더 상한을 푼다 */
    .head02 .div01 {
        max-width: none;
    }
}

/* =========================================================
   20. 시안(1920) 실측값의 축소 - 태블릿 / 모바일
      위쪽 단락별 규칙이 .secNN .xxx 특이도라서, 같은 특이도로 여기서 다시 덮는다.
   ========================================================= */
@media screen and (max-width: 1400px) {
    .sec03 {
        padding: 120px 0 12px;
    }

    .sec03 .list01 {
        gap: 96px;
    }

    .sec05 .demo-wrap {
        max-width: 100%;
    }

    .sec05 .line02 {
        width: 100%;
    }

    .sec05 .card02 {
        width: 480px;
        padding: 40px 44px 0;
        min-height: 0;
    }

    .sec05 .row01>span {
        width: 140px;
    }

    .sec07 .box02,
    .sec07 .box03,
    .sec07 .text06 {
        width: 100%;
    }

    .sec08 .demo-wrap {
        max-width: 100%;
    }

    .sec08 .box04,
    .sec08 .line02 {
        width: 100%;
    }

    .sec08 .demo-bigtitle {
        font-size: 58px;
        line-height: 1.45;
    }

    .sec08 .demo-title {
        font-size: 44px;
    }

    .sec08 .text06,
    .sec08 .text12 {
        font-size: 44px;
    }

    .sec09 .list01 {
        grid-template-columns: repeat(2, 298px);
    }

    .sec12 {
        padding: 140px 0 4px;
    }

    .sec12 .item01 {
        width: 24%;
    }

    .sec12 .icon01,
    .sec12 .icon02 {
        height: 110px;
    }

    .sec12 .line03 {
        width: 100%;
    }

    .sec13 .box01 {
        width: 100%;
    }

    .sec13 {
        padding-bottom: 200px;
    }

    .sec13 .table01 th,
    .sec13 .table01 td {
        font-size: 18px;
    }

    .sec13 .text03 {
        font-size: 18px;
    }

    .sec14 {
        padding: 90px 0 200px;
    }

    .sec14 .list01 {
        gap: 50px 60px;
    }

    .sec15 .list01 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .sec15 .card01 {
        min-height: 0;
        padding: 30px 14px 22px;
    }

    .sec15 .icon01 {
        width: 140px;
    }

    .sec15 .text04 {
        font-size: 20px;
        line-height: 27px;
    }

    .sec15 .line03 {
        width: 50px;
    }

    .sec15 .img01 {
        left: -80px;
        top: -120px;
        width: 420px;
    }

    .sec15 .img02 {
        right: -100px;
        top: -120px;
        width: 460px;
    }
}

@media screen and (max-width: 1024px) {
    .sec03 .list01 {
        gap: 48px;
    }

    .sec05 .card02 {
        width: 100%;
    }

    .sec08 .demo-bigtitle {
        font-size: 42px;
    }

    .sec08 .demo-title,
    .sec08 .text06,
    .sec08 .text12 {
        font-size: 32px;
    }

    .sec08 .demo-pill {
        font-size: 18px;
    }

    .sec09 .icon01,
    .sec09 .icon02 {
        width: 80px;
    }

    .sec09 .text06 {
        font-size: 24px;
        line-height: 1.7;
    }

    .sec12 .icon01,
    .sec12 .icon02 {
        height: 80px;
    }

    .sec12 .text04 {
        font-size: 20px;
    }

    .sec12 .text05 {
        font-size: 15px;
    }

    .sec12 .text02 {
        font-size: 24px;
    }

    .sec12 .text03 {
        font-size: 17px;
        line-height: 1.7;
    }

    .sec13 .table01 th,
    .sec13 .table01 td {
        font-size: 15px;
    }

    .sec13 .text02 {
        font-size: 22px;
    }

    .sec13 .text03 {
        font-size: 15px;
    }

    .sec14 {
        padding: 70px 0 120px;
    }

    .sec14 .text02 {
        font-size: 24px;
    }

    .sec14 .list01 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px 24px;
    }

    .sec14 .card01 {
        padding: 30px 10px 14px;
        border-width: 3px;
    }

    .sec14 .num01 {
        font-size: 20px;
        padding: 0 16px;
        top: -14px;
    }

    .sec14 .icon01 {
        width: 50px;
    }

    .sec14 .text03 {
        font-size: 18px;
        line-height: 26px;
        margin-top: 10px;
    }

    .sec14 .text04 {
        font-size: 14px;
        line-height: 19px;
    }

    .sec15 .text01 {
        font-size: 22px;
    }

    .sec15 .text03 {
        font-size: 20px;
        line-height: 30px;
    }

    .sec15 .icon01 {
        width: 100px;
    }

    .sec15 .text04 {
        font-size: 16px;
        line-height: 23px;
    }

    .sec15 .img01,
    .sec15 .img02 {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .sec03 {
        padding: 56px 0 24px;
    }

    .sec03 .list01 {
        gap: 16px;
    }

    .sec05 {
        padding: 56px 0 40px;
    }

    .sec05 .text02,
    .sec05 .text08 {
        line-height: 1.6;
    }

    .sec07 .text06 {
        font-size: 11px;
    }

    .sec08 .demo-bigtitle {
        font-size: 20px;
        line-height: 1.4;
    }

    .sec08 .demo-title,
    .sec08 .text06,
    .sec08 .text12 {
        font-size: 21px;
    }

    .sec08 .demo-pill {
        font-size: 13px;
        min-width: 0;
        height: 34px;
        padding: 0 18px;
    }

    .sec08 .col03 .line01 {
        margin: 16px 0 10px;
    }

    .sec09 .box01 {
        gap: 10px;
    }

    .sec09 .icon01,
    .sec09 .icon02 {
        width: 42px;
    }

    .sec09 .list01 {
        grid-template-columns: 298px;
        justify-content: center;
        gap: 14px;
    }

    .sec09 .text06 {
        margin-top: 34px;
        font-size: 18px;
        line-height: 1.7;
    }

    .sec12 {
        padding: 60px 0 4px;
    }

    .sec12 .text01 {
        font-size: 26px;
    }

    .sec12 .text02 {
        font-size: 17px;
    }

    .sec12 .text03 {
        font-size: 14px;
        line-height: 1.7;
    }

    .sec12 .list01 {
        flex-wrap: wrap;
    }

    .sec12 .item01 {
        width: 50%;
        padding: 18px 10px;
    }

    .sec12 .item01+.item01::before {
        display: none;
    }

    .sec12 .icon01,
    .sec12 .icon02 {
        height: 56px;
    }

    .sec12 .text04 {
        font-size: 16px;
        margin-top: 12px;
    }

    .sec12 .text05 {
        font-size: 13px;
    }

    .sec12 .line03 {
        margin-top: 26px;
    }

    .sec12 .box01 {
        gap: 10px;
        margin-top: 18px;
    }

    .sec13 {
        padding: 56px 0 130px;
    }

    .sec13 .text01 {
        font-size: 26px;
    }

    .sec13 .box01 {
        margin-top: 30px;
    }

    .sec13 .text02 {
        font-size: 17px;
        gap: 8px;
    }

    .sec13 .text02::before {
        width: 6px;
        height: 17px;
    }

    .sec13 .table01 th,
    .sec13 .table01 td {
        font-size: 12px;
        padding: 8px 6px;
    }

    .sec13 .text03 {
        font-size: 12px;
    }

    .sec14 {
        padding: 56px 0 70px;
    }

    .sec14 .text01 {
        font-size: 26px;
    }

    .sec14 .text02 {
        font-size: 16px;
    }

    .sec14 .line01 {
        margin: 4px auto 20px;
    }

    .sec14 .list01 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 12px;
        margin-top: 34px;
    }

    .sec14 .card01 {
        padding: 24px 8px 12px;
        border-width: 2px;
    }

    .sec14 .num01 {
        font-size: 16px;
        padding: 0 12px;
        top: -12px;
        line-height: 22px;
    }

    .sec14 .icon01 {
        width: 40px;
    }

    .sec14 .text03 {
        font-size: 15px;
        line-height: 22px;
    }

    .sec14 .text04 {
        font-size: 12px;
        line-height: 17px;
    }

    .sec15 {
        padding: 30px 0 50px;
    }

    .sec15 .text01 {
        font-size: 17px;
    }

    .sec15 .text02 {
        font-size: 26px;
    }

    .sec15 .text03 {
        font-size: 15px;
        line-height: 24px;
    }

    .sec15 .list01 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 30px;
    }

    .sec15 .card01 {
        padding: 22px 10px 16px;
    }

    .sec15 .icon01 {
        width: 78px;
    }

    .sec15 .row01 {
        gap: 8px;
        margin-top: 10px;
    }

    .sec15 .line03 {
        width: 30px;
    }

    .sec15 .icon02 {
        width: 20px;
    }

    .sec15 .text04 {
        font-size: 11px;
        line-height: 19px;
    }

    .sec15 .line02 {
        width: 22px;
    }
}

/* sec08 전용 축소(0.88) - 공용 부품은 sec07 과 공유하므로 여기서만 덮는다 */
.sec08 .demo-labelline {
    gap: 28.2px;
    margin: 38px 0 35.2px;
}

.sec08 .demo-labelline .line-l,
.sec08 .demo-labelline .line-r {
    width: 144.3px;
}

.sec08 .demo-pill {
    min-width: 246.4px;
    height: 34.5px;
    padding: 0 21.1px;
    font-size: 16.9px;
}

.sec08 .demo-pill.type02,
.sec08 .demo-pill.type03 {
    min-width: 218.2px;
    height: 41.5px;
    font-size: 18.3px;
}

.sec08 .demo-goldbox::before {
    padding: 3px;
}

.sec08 .demo-goldbox .demo-orb>i {
    border-radius: 21.1px;
}

.sec08 .demo-goldbox {
    width: 636.4px;
    padding: 25.4px 33.8px;
    border-radius: 21.1px;
    font-size: 32px;
}

/* ===== sec08 네이버 검색결과 슬라이더 (스와이퍼 1개) =====
   슬라이드는 폰 프레임 비율(560:753)을 기준으로 두고,
   가운데(활성)로 오면 원래 크기 = 폰 프레임에 딱 맞고,
   좌우로 밀리면 0.62 로 줄어 흰 프레임 크기가 된다. */
.sec08 .list04 {
    position: relative;
    /* 슬라이드 칸(S) 하나 = 267.84px. 가운데는 1.2346 배, 좌우는 0.7654 배로
       두 배율의 합이 정확히 2 라서 모든 슬라이드가 '가운데 기준' 축소만으로 서로 맞닿는다.
       (배율 합이 2 보다 작으면 사이가 벌어지고, 크면 겹친다)
       칸 3개 = 803.5px, 실제로 보이는 폭은 2.7654S = 740.7px 라 4번째 칸은 자연히 가려진다. */
    width: 803.5px;
    max-width: none;
    margin: 38px auto 0px;
}

.sec08 .list04 .swiper {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 0px;
    /* 가운데 슬라이드가 아래를 축으로 커지며 위로 넘치는 만큼 */
}

/* 시안 '자산 158' : 폰 아래에 깔리는 타원형 바닥 그림자
   (시안 1147x210 / 시안 폰 폭 440 -> 이 페이지 폰 폭 330.9 이므로 배율 0.752) */
.sec08 .list04 .img05 {
    position: absolute;
    left: 50%;
    bottom: -70px;
    z-index: 0;
    width: 862px;
    max-width: none;
    transform: translateX(-50%);
    pointer-events: none;
}

.sec08 .list04 .swiper-slide {
    position: relative;
    transform: scale(.765432);
    transform-origin: bottom center;
    transition: transform .5s;
}

.sec08 .list04 .swiper-slide-active {
    z-index: 2;
    transform: scale(1.234568);
}

/* 좌우 슬라이드를 가운데 쪽으로 조금 밀어 넣어 맞닿는 면의 흰 테두리를 폰 프레임 뒤로 숨긴다
   (transform-origin 을 바꾸면 클래스가 바뀌는 순간 튀므로 translateX 로 처리한다) */
.sec08 .list04 .swiper-slide-prev {
    transform: scale(.765432) translateX(4px);
}

.sec08 .list04 .swiper-slide-next {
    transform: scale(.765432) translateX(-4px);
}

/* 좌우(비활성) : 회색-흰색-회색 삼중 테두리 안에 이미지가 꽉 찬다 */
.sec08 .item01 {
    position: relative;
    width: 100%;
    aspect-ratio: 560 / 753;
    overflow: hidden;
    border: 1px solid #b9b9b9;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #b9b9b9, 0 12px 30px rgba(0, 0, 0, .38);
}

.sec08 .item01 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 스미카츠 결과가 있는 쪽을 남기고 반대쪽을 잘라낸다 (슬라이드별 --op) */
    object-position: var(--op, top);
    display: block;
}

/* 가운데(활성) : 폰 프레임이 덮이고 이미지는 화면 영역에 딱 맞는다 */
.sec08 .list04 .swiper-slide-active .item01 {
    border: 0;
    overflow: visible;
    background: none;
    /* 좌우 슬라이드용 흰색-회색 삼중 테두리는 가운데에선 쓰지 않는다 */
    box-shadow: none;
    /* 그림자는 슬라이드 상자(사각형)가 아니라 '그려진 모양'을 따라야 한다.
       프레임 PNG 혼자서는 테두리 선만 불투명(6.8%)이라 그림자가 안 보이므로,
       화면 이미지까지 함께 들어 있는 .item01 에 drop-shadow 를 건다
       -> 실루엣 = 폰 외곽선 + 화면 이라 모서리 밖으로 그림자가 새지 않는다 */
    filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .6)) drop-shadow(0 5px 9px rgba(0, 0, 0, .45));
}

.sec08 .list04 .swiper-slide-active .item01 img {
    position: absolute;
    left: 3.6%;
    top: 4.2%;
    width: 93.4%;
    height: 95.7%;
    /* 아래쪽은 각지게 (폰 프레임 하단까지 화면이 꽉 찬다) */
    border-radius: 7% 7% 0 0 / 4% 4% 0 0;
}

.sec08 .list04 .img04 {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.sec08 .list04 .swiper-slide-active .img04 {
    opacity: 1;
}

/* 가운데 화면에서 '스미카츠' 검색결과 자리에 강조 사각형을 띄운다
   (좌표는 각 슬라이드의 --l/--t/--w/--h, 폰 화면 영역 대비 %) */
.sec08 .list04 .hi01 {
    display: none;
}

.sec08 .list04 .swiper-slide-active .hi01 {
    display: block;
    position: absolute;
    left: calc(3.6% + 93.4% * var(--l) / 100);
    top: calc(4.2% + 95.7% * var(--t) / 100);
    width: calc(93.4% * var(--w) / 100);
    height: calc(95.7% * var(--h) / 100);
    z-index: 4;
    /* 검색결과가 그대로 보이도록 안은 비우고 갈색 테두리만 두른다 */
    border: 4px solid #f49914;
    border-radius: 9px;
    background: transparent;
    pointer-events: none;
    animation: demoNvHi 1.8s ease-in-out infinite;
}

@keyframes demoNvHi {

    0%,
    100% {
        box-shadow: 0 0 7px rgba(244, 153, 20, .35);
    }

    50% {
        box-shadow: 0 0 18px rgba(244, 153, 20, .70);
    }
}

/* sec07 전용 축소(0.8) - 라벨 띠·핀은 sec08 과 공유하므로 여기서만 덮는다 */
.sec07 .demo-labelline {
    gap: 32px;
    margin: 43.2px 0 40px;
}

.sec07 .demo-labelline .line-l,
.sec07 .demo-labelline .line-r {
    width: 164px;
}

.sec07 .demo-pill {
    min-width: 280px;
    height: 39.2px;
    padding: 0 24px;
    font-size: 19.2px;
}

.sec07 .demo-pill.type02,
.sec07 .demo-pill.type03 {
    min-width: 248px;
    height: 47.2px;
    font-size: 20.8px;
}

/* 모바일 전용 하단 CTA : 기본은 숨김 (480px 이하에서만 노출) */
.demo-mcta {
    display: none;
}

/* 모바일 전용 강제 개행 : 480px 이하에서만 줄을 바꾼다 */
.m-br {
    display: none;
}

/* 480px 이하에서 숨길 요소 (기본은 그대로 보인다) */
.m-hide {
    display: inline;
}


/* =========================================================
   19. 모바일 재구성 (<=480px / 기준 뷰포트 360, 콘텐츠 330)
       - PC 와 같은 정보를 모두 볼 수 있게 하되 가로로 늘어진 것은 세로로 전환
       - hover 없이도 모든 내용이 보이도록 한다
   ========================================================= */
@media screen and (max-width: 480px) {

    /* ---- 기반 : 콘텐츠 폭 330 (360 - 좌우 15) ---- */
    .demo-wrap {
        max-width: 360px;
        padding: 0 15px 30px;
    }

    .demo-section {
        overflow-x: clip;
    }

    /* ---- 하단 고정 바 : PC 용 즉시상담 폼 대신 2버튼 CTA ---- */
    .demo-quickbar.type-fixed {
        display: none !important;
    }

    .demo-mcta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: flex;
        align-items: stretch;
        height: 54px;
        background: var(--tan);
        border-top: 1px solid rgba(255, 255, 255, .28);
    }

    .demo-mcta a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 100%;
        color: #fff;
        font-family: '애플고딕_B';
        font-size: 16px;
        letter-spacing: -.01em;
        text-decoration: none;
    }

    .demo-mcta .tel01 {
        flex: 0 0 38%;
        background: rgba(0, 0, 0, .18);
    }

    .demo-mcta .tel01::before {
        content: '';
        width: 17px;
        height: 17px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.6 10.8c1.7 3.3 4.3 5.9 7.6 7.6l2.5-2.5c.3-.3.8-.4 1.2-.3 1.3.4 2.7.7 4.1.7.6 0 1 .4 1 1V21c0 .6-.4 1-1 1C10.6 22 2 13.4 2 2.9c0-.6.4-1 1-1h3.7c.6 0 1 .4 1 1 0 1.4.2 2.8.7 4.1.1.4 0 .9-.3 1.2l-2.5 2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .demo-mcta .btn01 {
        flex: 1;
        background: #751f1f;
    }

    body.demo-body {
        padding-bottom: 54px;
    }

    /* 푸터 위 상담 폼은 그대로 두되 세로로 쌓는다 */
    #qbBottom .box01 {
        height: auto;
        padding: 14px 15px 16px;
    }

    #qbBottom .form01 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
    }

    #qbBottom .input01,
    #qbBottom .input02,
    #qbBottom .select01,
    #qbBottom .select02 {
        width: 100%;
        height: 42px;
        font-size: 15px;
    }

    #qbBottom .label01 {
        grid-column: 1 / -1;
        margin: 2px 0 0;
        justify-content: center;
        font-size: 14px;
    }

    #qbBottom .btn01 {
        grid-column: 1 / -1;
        width: 100%;
        height: 46px;
        margin: 0;
        font-size: 17px;
    }

    /* ---- 히어로 : 배너 문구가 읽히도록 세로로 더 크게 잘라 쓴다 ---- */
    .sec01 {
        aspect-ratio: 6 / 5;
    }

    .sec01 .img01 {
        object-position: 11% 50%;
    }

    /* ---- sec10 / sec11 메뉴 슬라이더 : 한 장씩 ---- */
    .sec10 .swiper,
    .sec11 .swiper {
        width: 330px;
        height: auto;
        padding-top: 26px;
        padding-bottom: 4px;
        margin: 0 auto;
    }

    .sec10 .swiper-slide,
    .sec11 .swiper-slide {
        transform: none !important;
        filter: none !important;
    }

    .sec10 .slide01,
    .sec11 .slide01 {
        width: 100%;
        height: auto;
        padding: 6px 6px 10px;
    }

    .sec10 .slide_text01,
    .sec11 .slide_text01 {
        margin: 8px 0 0;
        font-size: 20px;
    }

    .sec10 .price01,
    .sec11 .price01 {
        width: 172px;
        height: 34px;
        font-size: 21px;
    }

    /* ---- sec08 네이버 검색결과 : 폰 한 대만 ---- */
    /* 네이버 검색결과 슬라이더도 전폭(100vw) : 좌우 폰은 화면 끝에서 잘린다 */
    .sec08 .list04 {
        width: 100vw;
        max-width: none;
        margin: 26px -15px 0;
        padding-bottom: 30px;
        overflow: hidden;
    }

    /* 가운데 슬라이드가 아래를 축으로 1.2346 배 커지며 위로 넘치는 만큼 자리를 만든다.
       필요량 = (100vw / 1.8) x (753/560) x .2346 = 17.5vw -> 여유 두어 18vw */
    .sec08 .list04 .swiper {
        padding-top: 18vw;
        padding-bottom: 26px;
        overflow: visible;
    }

    .sec08 .list04 .img05 {
        width: 107vw;
        bottom: 0;
    }

    /* ---- sec05 계산서 : 항목/금액을 카드 양 끝에 맞춘다 (고정 134px + 가운데정렬이라 치우쳐 보였다) ---- */
    .sec05 .card02 {
        width: 100%;
        max-width: 330px;
        padding: 28px 26px 28px;
    }

    .sec05 .row01>span {
        width: auto;
        text-align: left;
    }

    .sec05 .row01>span:last-child {
        text-align: right;
    }

    /* ---- 모바일 전용 강제 개행 / 숨김 ---- */
    .m-br {
        display: inline;
    }

    .m-hide {
        display: none;
    }

    /* ---- sec02 달력 : PC 처럼 도장이 달력 우상단에 걸치게 ---- */
    .sec02 .box01 {
        margin-top: 48px;
    }

    .sec02 .box02 {
        position: absolute;
        top: -44px;
        right: 0;
        width: 110px;
        margin: 0;
    }

    /* ---- 래퍼 밖에 있는 콘텐츠 블록도 330 안으로 ---- */
    .sec15 .list01,
    .sec15 .line02,
    .sec17 #fwrite,
    .sec17 .form_01,
    .sec17 .btn_confirm {
        width: 100%;
        max-width: 330px;
        margin-left: auto;
        margin-right: auto;
    }

    /* ---- sec10 / sec11 슬라이더 좌우 버튼 : 슬라이드 위에 겹치게 ---- */
    .sec10 .swiper-button-prev,
    .sec11 .swiper-button-prev {
        left: 2px;
        right: auto;
        margin: 0;
    }

    .sec10 .swiper-button-next,
    .sec11 .swiper-button-next {
        right: 2px;
        left: auto;
        margin: 0;
    }

    .sec10 .swiper-button-prev,
    .sec10 .swiper-button-next,
    .sec11 .swiper-button-prev,
    .sec11 .swiper-button-next {
        width: 30px;
        height: 30px;
        background: rgba(0, 0, 0, .42);
    }

    .sec10 .swiper-button-prev:after,
    .sec10 .swiper-button-next:after,
    .sec11 .swiper-button-prev:after,
    .sec11 .swiper-button-next:after {
        font-size: 16px;
    }

    /* ---- sec03 제목 : 1행이 끊기지 않게 ---- */
    .sec03 .text02 {
        font-size: 22px;
        line-height: 1.45;
    }

    .sec03 .text02 .line01 {
        white-space: nowrap;
    }

    /* ---- 한글이 단어 중간에서 잘리지 않도록 ---- */
    .demo-section,
    .demo-quickbar,
    .demo-footer,
    .demo-mcta {
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .sec08 .text13 {
        font-size: 15px;
        line-height: 2.3;
    }

    /* ---- 라벨 띠의 좌우 짜투리 선은 좁은 화면에서 군더더기 ---- */
    .sec07 .demo-labelline .line-l,
    .sec07 .demo-labelline .line-r,
    .sec08 .demo-labelline .line-l,
    .sec08 .demo-labelline .line-r {
        display: none;
    }

    .sec07 .text06 {
        text-align: center;
        font-size: 9px;
    }

    .sec08 .text05 {
        text-align: center;
    }

    .sec08 .icon01 {
        display: block;
        margin: 10px auto 20px;
    }

    /* ---- sec08 리뷰 : 세로로 쌓고 좌우 트랙은 가로로 흐른다 ---- */
    .sec08 .list03 {
        zoom: 1;
        flex-direction: column;
        align-items: center;
        height: auto;
        gap: 8px;
        margin-top: 20px;
    }

    /* 리뷰 띠만 예외적으로 전폭(100vw) : 화면을 가로질러 흐르게 한다 */
    .sec08 .col04 {
        width: 100vw;
        max-width: none;
        height: auto;
        overflow: hidden;
    }

    .sec08 .col04 .track01 {
        display: flex;
        width: max-content;
    }

    .sec08 .col04.type01 .track01 {
        animation: demoRollX 26s linear infinite;
    }

    .sec08 .col04.type02 .track01 {
        animation: demoRollX 22s linear infinite reverse;
    }

    /* PC 처럼 리뷰의 윗부분만 잘라 쓴다 */
    .sec08 .img02 {
        flex: none;
        width: 150px;
        height: 150px;
        object-fit: cover;
        object-position: top;
        margin: 0 8px 0 0;
        border-width: 2px;
        border-radius: 6px;
    }

    .sec08 .col05 {
        width: 80vw;
    }

    .sec08 .box06 {
        width: 80vw;
    }

    /* ---- sec08 리뷰 배너 : 세로로 쌓고 문구는 두 줄 ---- */
    .sec08 .box07 {
        zoom: 1;
        flex-direction: column;
        gap: 6px;
        margin-top: 50px;
    }

    .sec08 .icon06 {
        width: 62px;
    }

    .sec08 .text14 {
        text-align: center;
        font-size: 17px;
    }

    .sec08 .text14 .m-br {
        display: none;
    }

    .sec08 {
        padding-bottom: 10px;
    }

    .sec09 {
        padding-bottom: 0;
    }

    /* ---- 메뉴 슬라이드 화살표 : 활성 슬라이드에 반쯤 걸치게 ---- */
    .sec10 .swiper-button-prev,
    .sec11 .swiper-button-prev {
        left: -15px;
    }

    .sec10 .swiper-button-next,
    .sec11 .swiper-button-next {
        right: -15px;
    }

    .sec11 {
        height: 500px;
    }

    .sec11 .text03 {
        width: 330px;
        margin-top: 10px;
        font-size: 12px;
    }

    /* ---- sec12 : 상하 간격을 좁히고 '마케팅 세팅 지원' 도 나머지와 같은 형태로 ---- */
    .sec12 .list01 {
        margin-top: 22px;
    }

    .sec12 .item01 {
        padding: 10px 8px;
    }

    .sec12 .text04 {
        margin-top: 8px;
    }

    .sec12 .line03 {
        margin-top: 14px;
    }

    .sec12 .box01 {
        flex-direction: column;
        width: 50%;
        margin: 0 auto;
        padding: 10px 8px;
        gap: 0;
    }

    .sec12 .box01 .text04 {
        margin-top: 8px;
        text-align: center;
        font-size: 16px;
    }

    .sec12 .box01 .text05 {
        margin-top: 0;
        text-align: center;
        font-size: 13px;
    }

    .sec12 .line02 {
        margin-top: 26px;
    }

    .sec13 {
        padding-bottom: 30px;
    }

    .sec14 {
        padding-bottom: 0;
    }

    .sec15 .list01 {
        margin-top: 0;
    }

    /* ---- 하단 상담 폼은 모바일 CTA 로 대체 ---- */
    .demo-quickbar .box01 {
        display: none;
    }

    /* ---- sec07 / sec08 반투명 로고 워터마크 ----
       PC 는 화면폭 대비 27% / 19% / 22% 이고 세로는 래퍼 높이의 2 / 41 / 65.5 / 86.3% 지점이다.
       모바일은 래퍼가 짧아져 px 로 박힌 top 값이 아래쪽 3개를 래퍼 밖으로 밀어내고 있었다.
       -> 크기는 화면폭 기준, 위치는 래퍼 높이 기준(%)으로 바꿔 PC 와 같은 분포를 만든다 */
    .demo-wm.wm01 {
        top: 2%;
        right: -2vw;
        width: 44vw;
    }

    .demo-wm.wm02 {
        top: 41%;
        left: -8vw;
        width: 32vw;
    }

    .demo-wm.wm03 {
        top: 41%;
        right: -8vw;
        width: 32vw;
    }

    .demo-wm.wm04 {
        top: 65.5%;
        left: -8vw;
        width: 32vw;
    }

    .demo-wm.wm05 {
        top: 66%;
        right: -8vw;
        width: 32vw;
    }

    .demo-wm.wm06 {
        top: 86%;
        left: -8vw;
        width: 36vw;
    }

    /* 축소 블록 밖에 있는 라벨 띠의 알약 */
    .sec07 .demo-labelline .demo-pill {
        min-width: 240px;
    }

    /* ---- 남아 있던 큰 제목들 ---- */
    .sec09 .demo-bigtitle {
        font-size: 18px;
        line-height: 1.45;
    }

    .sec09 .text06 {
        font-size: 16px;
    }

    .sec10 .text02,
    .sec11 .text02 {
        font-size: 24px;
    }

    .sec10 .text01,
    .sec11 .text01 {
        font-size: 15px;
        margin-bottom: 14px;
    }

    /* CTA 로 이동했을 때 상단 고정 헤더에 가리지 않도록 */
    #fwrite {
        scroll-margin-top: 72px;
    }
}


/* =========================================================
   20. sec07 / sec08 블록 축소
       개별 값을 손으로 줄이면 상자 비율과 글자 위계가 깨지므로,
       '카드 묶음' 단위로 통째 축소해 PC 의 비율을 그대로 가져간다.
       배율 = 사용 가능한 폭 / PC 에서의 내용 폭
       (AOS 를 IntersectionObserver 로 바꿔 두어 zoom 이 등장 애니메이션에 영향을 주지 않는다)
   ========================================================= */
@media screen and (max-width: 1024px) {

    /* 리뷰 3열(내용폭 1109) 만 넘친다 */
    .sec08 .list03 {
        zoom: .88;
    }
}

@media screen and (max-width: 768px) {

    .sec07 .list01 {
        zoom: .87;
    }

    .sec07 .box03 {
        zoom: .86;
    }

    .sec08 .list01 {
        zoom: .93;
    }

    .sec08 .list03 {
        zoom: .65;
    }
}

@media screen and (max-width: 480px) {

    /* 내용폭 827 -> 330 */
    .sec07 .list01 {
        zoom: .398;
    }

    /* 상자 837 -> 330 (내용 527 은 PC 와 같은 63% 비율로 가운데 놓인다) */
    .sec07 .box02 {
        zoom: .394;
    }

    /* 837 -> 330 */
    .sec07 .box03 {
        zoom: .392;
    }

    /* 777 -> 330 */
    .sec08 .list01 {
        zoom: .423;
    }

    /* 영수증 두 장 + 화살표(실측 612) -> 330 */
    .sec08 .list02 {
        zoom: .539;
        flex-wrap: nowrap;
    }

    /* 641 -> 330 */
    .sec08 .box04 {
        flex-direction: column;
        align-items: center;
        zoom: .7;
    }

    .sec08 .demo-goldbox {
        zoom: .41;
        max-width: 100%;
    }

    /* 리뷰 묶음은 세로로 다시 짜므로 768 구간의 축소를 되돌린다 */
    .sec08 .list03 {
        zoom: 1;
    }

    /* 장식 문구(Easy Simple Delicious)가 화면 밖으로 나가지 않게만 당긴다 */
    .sec08 .icon02 {
        right: -12px;
    }
}