* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: "Pretendard", "Noto Sans KR", sans-serif;
     background: #111;
     color: #000;
 }

 .mobile-br {
     display: none;
 }

 @media (max-width: 352px) {
     .mobile-br {
         display: block;
     }
 }


 .section {
     margin: 0 auto;
     background: #111;
     max-width: 450px;
 }

 .phone-wrap {
     width: 100%;
     background: #fff;
     padding: 80px 34px;
     text-align: center;
 }

 .title {
     font-size: clamp(40px, 11vw, 56px);
     font-weight: 900;
     line-height: 1.08;
     letter-spacing: -0.06em;
     margin-bottom: 36px;
 }

 .title .big {
     display: inline-block;
     font-size: clamp(72px, 22vw, 128px);
     line-height: 0.9;
     margin-top: 15px;
 }

 @media (max-width: 450px) {
     .title .big {
         font-size: clamp(88px, 24vw, 128px);
     }
 }

 .headline {
     font-size: 32px;
     font-weight: 800;
     line-height: 1.3;
     letter-spacing: -1.5px;
     margin-bottom: 56px;
     word-break: keep-all;
 }

 .highlight {
     position: relative;
     display: inline;
     color: #fff;
     padding: 0 4px;
     z-index: 1;

     box-decoration-break: clone;
     -webkit-box-decoration-break: clone;

     background: transparent;
 }

 .highlight::before {
     content: "";
     position: absolute;

     /* padding 크기와 동일하게 */
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;

     background: #1f7aed;

     transform: scaleX(0);
     transform-origin: left;
     animation: marker 4s linear infinite;

     z-index: -1;
     animation-delay: 0.5s;
 }

 @keyframes marker {
     0% {
         transform: scaleX(0);
     }

     15% {
         transform: scaleX(1);
     }

     100% {
         transform: scaleX(1);
     }
 }

 .emoji {
     display: block;
     width: 100%;
     max-width: 290px;
     height: auto;
     margin: 0 auto;
     background: url("./images/bg.gif") center -50px / cover no-repeat;
     background-size: 120%;
 }

 .gray-text {
     font-size: 26px;
     font-weight: 600;
     color: #b8b8b8;
     letter-spacing: -1px;
     margin-bottom: 48px;
     margin-top: 15px;
 }

 .desc {
     font-size: 26px;
     font-weight: 600;
     line-height: 1.55;
     letter-spacing: -1.2px;
 }

 .desc strong {
     color: #1f7aed;
 }

 @media (max-width: 480px) {
     .phone-wrap {
         max-width: 100%;
     }

     .title {
         font-size: 52px;
     }

     .headline {
         font-size: 29px;
     }

 }

 @media (max-width: 480px) {
    .desc,
    .gray-text {
        font-size: clamp(19px, 5.2vw, 21px);
    }
}


 .hero-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     width: min(100% - 40px, 420px);
     height: 58px;
     margin: 32px auto 0;
     border-radius: 999px;
     background: linear-gradient(135deg, #4f8dfb 0%, #1d4ed8 100%);
     color: #fff;
     font-size: 18px;
     font-weight: 600;
     text-decoration: none;
     letter-spacing: -0.02em;
     box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
     transition: all .3s ease;
 }

 .hero-btn:hover {
     transform: translateY(-4px);
     background: linear-gradient(135deg, #4f8dfb 0%, #1d4ed8 100%);
     box-shadow: 0 18px 45px rgba(37, 99, 235, 0.45);
 }

 .hero-btn:active {
     transform: translateY(-1px);
     box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
 }

 .big-highlight {
     position: relative;
     display: inline;
     color: #fff;
     padding: 10px 20px;
     z-index: 1;

     box-decoration-break: clone;
     -webkit-box-decoration-break: clone;

     background: transparent;
 }

 .big-highlight::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;

     background: #1f7aed;

     transform: scaleX(0);
     transform-origin: left;
     animation: marker 4s linear infinite;

     z-index: -1;
 }



 .urgency-section {
     background: #000;
     padding: 80px 20px;
     text-align: center;
 }

 .urgency-section .phone-wrap {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
 }

 .urgency-sub {
     color: #fff;
     font-size: clamp(32px, 5vw, 44px);
     font-weight: 600;
     line-height: 1.3;
     letter-spacing: -0.04em;
     margin-bottom: 28px;
 }

 .urgency-title {
     color: #FFD84D;
     font-size: clamp(88px, 22vw, 130px);
     font-weight: 900;
     line-height: .9;
     letter-spacing: -0.1em;
     margin-bottom: 28px;
 }

 .gsap-pop span {
     display: inline-block;
 }



 .real-talk-section {
     background: #fff;
     padding: 72px 24px 40px;
     text-align: center;
 }

 .real-talk-wrap {
     max-width: 450px;
     margin: 0 auto;
 }

 .real-talk-kicker {
     font-size: clamp(34px, 8vw, 48px);
     font-weight: 800;
     line-height: 1.2;
     letter-spacing: -0.05em;
     margin-bottom: 14px;
 }

 .real-talk-title {
     margin-bottom: 48px;
     font-size: clamp(30px, 7vw, 42px);
     font-weight: 800;
     line-height: 1.2;
     letter-spacing: -0.06em;
 }

 .real-talk-title span {
     display: inline;
     padding: 0 6px;
     background: #f7d64b;
     box-decoration-break: clone;
     -webkit-box-decoration-break: clone;
 }

 .real-talk-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 8px 24px;
     border: 2px solid #111;
     border-radius: 999px;
     font-size: clamp(17px, 4vw, 21px);
     font-weight: 800;
     letter-spacing: -0.04em;
     margin-bottom: 18px;
 }

 .real-talk-img {
     display: block;
     width: 100%;
     max-width: 340px;
     height: auto;
     margin: 0 auto -49px;
 }

 .real-talk-box {
     position: relative;
     background: #000;
     color: #fff;
     border-radius: 14px;
     padding: 24px 18px 26px;
 }

 .real-talk-box::before {
     content: "";
     position: absolute;
     right: 28px;
     top: -28px;
     width: 56px;
     height: 56px;
     background: #000;
     clip-path: polygon(0 100%, 100% 100%, 0 0);
 }

 .real-talk-point {
     color: #f7d64b;
     font-size: clamp(21px, 5vw, 26px);
     font-weight: 800;
     line-height: 1.35;
     letter-spacing: -0.04em;
     margin-bottom: 6px;
 }

 .real-talk-desc {
     font-size: clamp(21px, 5vw, 26px);
     font-weight: 400;
     line-height: 1.35;
     letter-spacing: -0.04em;
 }


 .system-wrap {
     text-align: center;
 }

 .system-title {
     font-size: clamp(38px, 9vw, 58px);
     font-weight: 600;
     letter-spacing: -0.06em;
     font-style: italic;
     margin-top: 80px;
 }




 .image-slider-section {
     background: #fff;
     padding: 0px 0px;
 }

 .image-swiper {
     width: 100%;
 }

 .image-swiper .swiper-slide {
     width: 100%;
 }

 .image-swiper img {
     width: 100%;
     display: block;
 }

 .image-swiper .swiper-pagination-bullet-active {
     opacity: var(--swiper-pagination-bullet-opacity, 1);
     background: #f7d64b;
 }




 .planner-section {
     background: #fff;
     padding: 45px 20px 60px;
     text-align: center;
 }

 .planner-wrap {
     max-width: 450px;
     margin: 0 auto;
 }

 .planner-word-swiper {
     height: 64px;
     margin-bottom: 24px;
 }

 .planner-word-swiper .swiper-slide {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .planner-word-swiper h2 {
     color: #f4cf45;
     font-size: clamp(36px, 9vw, 56px);
     font-weight: 800;
     line-height: 1;
     letter-spacing: -0.07em;
 }

 .planner-copy {
     display: inline-block;
     background: #000;
     color: #fff;
     padding: 4px 10px;
     font-size: clamp(24px, 6vw, 34px);
     font-weight: 600;
     line-height: 1.2;
     letter-spacing: -0.06em;
     margin-bottom: 10px;
 }

 .planner-copy .yellow {
     color: #f4cf45;
     font-weight: 800;
 }

 .planner-copy-sub {
     font-size: clamp(24px, 6vw, 34px);
     font-weight: 600;
     line-height: 1.2;
     letter-spacing: -0.06em;
     color: #000;
 }




 .full-image-section {
     position: relative;
 }

 .full-image {
     display: block;
     width: 100%;
     height: auto;
 }

 .full-image-chat {
     position: absolute;
     right: 20px;
     bottom: 20px;

     display: flex;
     align-items: flex-end;
     gap: 10px;
 }

 .full-image-profile {
     width: 80px;
     height: 80px;
     display: block;
 }

 .full-image-bubble {
     position: relative;

     padding: 8px 18px;
     background: #fff;
     border-radius: 18px;

     font-size: clamp(10px, 3vw, 16px);
     font-weight: 400;

     box-shadow: 0 8px 24px rgba(0, 0, 0, .15);

     margin: 0 15px 10px 0;
     color: #777;
 }

 /* 말풍선 꼬리 PNG */
 .full-image-bubble::after {
     content: "";
     position: absolute;
     right: -10px;
     bottom: 12px;

     width: 18px;
     height: 18px;

     background: url("./images/bubble-tail.png") center / contain no-repeat;
 }




 .excel-problem-section {
     background: #fff;
     padding: 80px 20px;
 }

 .problem-wrap {
     max-width: 450px;
     margin: 0 auto;
 }

 .problem-item {
     margin-bottom: 90px;
 }

 .problem-item:last-child {
     margin-bottom: 0;
 }

 .problem-item img {
     width: 100%;
     display: block;
     margin-bottom: 40px;
 }

 .problem-sub {
     text-align: center;
     color: #9b9b9b;
     font-size: clamp(22px, 5.5vw, 30px);
     font-weight: 600;
     margin-bottom: 12px;
 }

 .problem-title {
     text-align: center;
     font-size: clamp(22px, 5.5vw, 30px);
     font-weight: 600;
     line-height: 1.2;
     text-decoration: underline;
     text-underline-offset: 8px;
 }



 .notion-sale-section {
     background: #000;
     padding: 90px 24px;
     text-align: center;
 }

 .notion-sale-wrap {
     max-width: 450px;
     margin: 0 auto;
 }

 .sale-word-swiper {
     height: 62px;
     overflow: hidden;
 }

 .sale-word-swiper .swiper-slide {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .sale-word-swiper span {
     font-weight: 600;
     line-height: 1;
     letter-spacing: -0.07em;
 }

 .sale-word-top span {
     font-size: clamp(30px, 8vw, 42px);
     color: #f4d64d;
 }

 .sale-word-bottom span {
     font-size: clamp(40px, 11vw, 54px);
     color: #fff;
 }

 /* 슬롯 숫자 전용 */
 .sale-word-bottom .slot-number {
     display: inline-flex;
     align-items: center;
     white-space: nowrap;
     letter-spacing: 0 !important;
     font-variant-numeric: tabular-nums;
 }

 .sale-word-bottom .slot-number * {
     letter-spacing: 0 !important;
 }

 .slot-digit {
     display: inline-block;
     width: 0.58em;
     height: 1em;
     overflow: hidden;
 }

 .slot-digit-inner {
     display: block;
     width: 100%;
 }

 .slot-digit-inner span {
     display: block;
     width: 100%;
     height: 1em;
     line-height: 1em;
     text-align: center;
 }

 .slot-comma,
 .slot-unit {
     display: inline-block;
     line-height: 1em;
 }



 .money-section {
     background: #fff;
     padding: 78px 24px 72px;
     text-align: center;
 }

 .money-wrap {
     max-width: 450px;
     margin: 0 auto;
 }

 .money-main-title {
     font-size: clamp(48px, 12vw, 76px);
     font-weight: 800;
     line-height: 1.15;
     letter-spacing: -0.1em;
     color: #000;
     margin-bottom: 44px;
 }

 .money-main-title .gsap-pop {
     color: #ff0b3f;
 }

 .money-main-title .gsap-pop>span {
     display: inline-block;
     color: #ff0b3f;
     font-size: 1.2em;
     margin-right: -0.08em;
 }

 .money-main-title .gsap-pop>span:last-child {
     margin-right: 0;
 }

 /* 공통 텍스트 */
 .money-sub,
 .money-gray,
 .money-desc {
     font-size: clamp(22px, 5.5vw, 30px);
     line-height: 1.35;
     letter-spacing: -0.06em;
 }

 .money-sub {
     font-weight: 600;
     color: #000;
     margin-bottom: 70px;
 }

 .money-sub span {
     color: #ff0b3f;
     text-decoration: underline;
     text-underline-offset: 6px;
 }

 .money-line {
     width: 1px;
     height: 120px;
     background: #555;
     margin: 0 auto 64px;
 }


 .money-highlight {
     font-size: clamp(30px, 7vw, 42px);
     font-weight: 600;
     line-height: 1.3;
     letter-spacing: -0.06em;
     color: #ff0b3f;
     margin-bottom: 32px;
 }

 .money-highlight span {
     display: inline-block;
     background: #ff0b3f;
     color: #fff;
     padding: 0 3px;
 }

 .money-profile-card {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 52px 34px;
     background: #fff;
     border: 3px solid #ff0b3f;
     border-radius: 28px;
     margin-bottom: 15px;
 }

 .money-profile-icon {
     width: 1em;
     height: 1em;
     flex-shrink: 0;
 }

 .money-profile-title {
     display: inline-block;
     font-size: clamp(22px, 5.5vw, 30px);
     font-weight: 800;
     line-height: 1.2;
     letter-spacing: -0.06em;
     color: #111;
 }

 .money-profile-card {
     font-size: clamp(22px, 5.5vw, 30px);
 }

 .money-profile-title {
     font-size: 1em;
 }

 .money-profile-icon {
     width: 1em;
     height: 1em;
 }

 .gsap-card-step {
     opacity: .2;
     filter: grayscale(100%);
 }

 .gsap-card-step.active {
     opacity: 1;
     filter: grayscale(0);
 }




 .manage-section {
     background: #000;
     padding: 84px 24px 80px;
     text-align: center;
     color: #fff;
 }

 .manage-wrap {
     max-width: 450px;
     margin: 0 auto;
 }

 .manage-title {
     font-size: clamp(30px, 7vw, 44px);
     font-weight: 600;
     line-height: 1.45;
     letter-spacing: -0.06em;
     margin-bottom: 54px;
 }

 .manage-title span {
     color: #f4d64d;
 }

 .manage-img-box {
     position: relative;
     width: 100%;
     max-width: 300px;
     margin: 0 auto 10px;
 }

 .manage-img-box2 {
     position: relative;
     width: 100%;
     max-width: 220px;
     margin: 0 auto 44px;
 }

 .manage-img-box::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: -1px;
     height: 65%;
     background: linear-gradient(to bottom,
             rgba(0, 0, 0, 0) 0%,
             rgba(0, 0, 0, 0) 35%,
             rgba(0, 0, 0, .7) 50%,
             #000 70%);
     pointer-events: none;
 }

 .manage-img {
     display: block;
     width: 100%;
     height: auto;
 }

 .manage-line {
     width: 1px;
     height: 74px;
     background: rgba(255, 255, 255, .35);
     margin: 0 auto 56px;
 }

 .manage-desc {
     font-size: clamp(26px, 6vw, 36px);
     font-weight: 600;
     line-height: 1.45;
     letter-spacing: -0.06em;
     margin-bottom: 24px;
 }

 .manage-point {
     display: inline;
     color: #f4d64d;
     font-size: clamp(20px, 5vw, 28px);
     font-weight: 600;
     line-height: 1.4;
     letter-spacing: -0.06em;
     text-decoration: underline;
     text-underline-offset: 6px;
 }


 .company-section {
     background: #f4d64d;
     padding: 64px 28px 70px;
     text-align: center;
 }

 .company-card {
     position: relative;
     background: #fff;
     border: 4px solid #000;
     border-radius: 24px;
     padding: 90px 0px;
     margin-bottom: 50px;
 }

 .company-title {
     font-size: clamp(32px, 8vw, 48px);
     font-weight: 800;
     line-height: 1.35;
     letter-spacing: -0.07em;
     color: #000;
 }

 @media (max-width: 450px) {
     .company-title {
         font-size: clamp(38px, 10vw, 48px);
     }
 }

 .company-title p {
     font-size: clamp(22px, 5.5vw, 36px);
     font-weight: 600;
     line-height: 1.35;
     letter-spacing: -0.07em;
     color: #555;
     margin-bottom: 20px;
 }

 .company-title span {
     color: #f4d64d;
 }

 .company-title span {
     text-decoration: underline;
     text-decoration-thickness: 4px;
     text-underline-offset: 7px;
 }

 .company-img {
     position: absolute;
     left: 50%;
     bottom: -65px;
     transform: translateX(-50%);

     width: 320px;
     max-width: 72%;
 }

 .company-bottom {
     display: inline-block;
     background: #000;
     color: #f4d64d;
     padding: 8px 18px;
     font-size: clamp(34px, 8vw, 56px);
     font-weight: 900;
     line-height: 1.15;
     letter-spacing: -0.06em;
 }


 .blue-talk-section {
     background: #000;
     padding: 60px 24px;
     text-align: center;
 }

 .blue-talk-wrap {
     max-width: 450px;
     margin: 0 auto;
 }

 .blue-talk-title {
     color: #fff;
     font-size: clamp(34px, 8vw, 52px);
     font-weight: 600;
     line-height: 1.5;
     letter-spacing: -0.06em;
 }

 .blue-talk-title span {
     text-decoration: underline;
     text-decoration-thickness: 3px;
     text-underline-offset: 8px;
     color: #1070F8;
 }



 .review-section {
     background: #fff;
     padding: 80px 24px;
 }

 .review-wrap {
     max-width: 450px;
     margin: 0 auto;
 }

 .review-card {
     position: relative;
     background: #f4f4f4;
     border-radius: 24px;
     padding: 84px 24px 42px;
     text-align: center;
     margin-bottom: 96px;
 }

 .review-card:last-child {
     margin-bottom: 0;
 }

 .review-avatar {
     position: absolute;
     top: -58px;
     left: 50%;
     transform: translateX(-50%);
     width: 120px;
     height: 120px;
     border-radius: 50%;
     background: #1070F8;
     overflow: hidden;
 }

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

 .review-text {
     font-size: clamp(22px, 5.4vw, 30px);
     font-weight: 400;
     line-height: 1.55;
     letter-spacing: -0.06em;
     color: #111;
 }



 .start-section {
     background: #000 url("./images/star-bg.png") center center / cover no-repeat;
     padding: 96px 32px 88px;
     color: #fff;
 }

 .start-wrap {
     max-width: 450px;
     margin: 0 auto;
     text-align: center;
 }

 .start-eyes {
     font-size: 58px;
     margin-bottom: 28px;
 }

 .start-sub {
     color: #aaa;
     font-size: clamp(28px, 7vw, 42px);
     font-weight: 600;
     line-height: 1.3;
     letter-spacing: -0.06em;
     margin-bottom: 18px;
 }

 .start-title {
     color: #f4d64d;
     font-size: clamp(48px, 13vw, 78px);
     font-weight: 800;
     line-height: 1.18;
     letter-spacing: -0.07em;
     margin-bottom: 84px;
 }

 .start-copy {
     text-align: left;
 }

 .start-copy p {
     font-size: clamp(24px, 6vw, 38px);
     font-weight: 600;
     line-height: 1.35;
     letter-spacing: -0.06em;
     margin-bottom: 52px;
 }

 .start-copy span {
     color: #f4d64d;
 }

 .start-copy small {
     display: block;
     color: #aaa;
     text-align: left;
     font-size: clamp(17px, 4.2vw, 22px);
     font-weight: 400;
     line-height: 1.45;
     letter-spacing: -0.05em;
 }




 .notion-section {
     background: #fff;
     padding: 88px 24px 96px;
     text-align: center;
 }

 .notion-wrap {
     max-width: 450px;
     margin: 0 auto;
 }

 .notion-title {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-bottom: 70px;
 }

 .notion-card-img {
     display: block;
     width: 100%;
     max-width: 320px;
     height: auto;
     margin: -50px auto 0;
 }

 .notion-title h2 {
     font-size: clamp(36px, 8.5vw, 56px);
     font-weight: 800;
     line-height: 1.35;
     letter-spacing: -0.07em;
     color: #000;
 }

 .hand-text-img {
     display: block;
     width: auto;
     height: clamp(48px, 10vw, 72px);
     margin: 8px 0;
 }

 .notion-card {
     border: 4px solid #1f7aed;
     border-radius: 24px;
     padding: 64px 24px 70px;
 }

 .notion-card-text {
     font-size: clamp(23px, 5.8vw, 34px);
     font-weight: 600;
     line-height: 1.35;
     letter-spacing: -0.06em;
     color: #000;
     margin-bottom: 52px;
 }

 .notion-line {
     width: 1px;
     height: 72px;
     background: #777;
     margin: 0 auto 56px;
 }

 .notion-card-title {
     font-size: clamp(36px, 8vw, 44px);
     font-weight: 600;
     line-height: 1.35;
     letter-spacing: -0.07em;
     color: #000;
     margin-top: -46.5px;
 }

 @media (max-width: 360px) {
     .notion-card-title {
         font-size: 32px;
     }
 }

 .notion-card-title span {
     display: inline-block;
     background: #1f7aed;
     color: #fff;
     padding: 0 8px;
 }

 .gsap-reveal {
     clip-path: inset(0 100% 0 0);
 }


 .start-cta-section {
     background: #1f7aed;
     padding: 80px 24px;
 }

 .start-cta-wrap {
     max-width: 450px;
     margin: 0 auto;
 }

 .start-cta-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 72px;
     border-radius: 999px;

     background: linear-gradient(#fff 0 0) left / 0% 100% no-repeat;
     border: 3px solid #fff;
     color: #fff;

     font-size: clamp(24px, 6vw, 30px);
     font-weight: 600;
     text-decoration: none;
     box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
     transition: background-size .3s ease, color .3s ease, transform .25s, box-shadow .25s;
 }

 .start-cta-btn:hover {
     background-size: 100% 100%;
     color: #1f7aed;
     transform: translateY(-3px);
     box-shadow: 0 16px 35px rgba(0, 0, 0, .25);
 }










 .floating-cta {
     position: fixed;
     left: 0;
     right: 0;
     bottom: 20px;
     z-index: 999;
     padding: 0 20px;
 }

 .floating-cta-wrap {
     width: 300px;
     max-width: 80%;
     margin: 0 auto;
 }

 .floating-cta-btn {
     display: flex;
     align-items: center;
     justify-content: center;

     width: 100%;
     height: 72px;

     border-radius: 999px;

     background: rgba(15, 23, 42, 0.349);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);

     border: 1px solid rgba(255, 255, 255, .18);

     color: #fff;
     text-decoration: none;
     font-size: clamp(24px, 6vw, 30px);
     font-weight: 800;
     text-shadow: 0 2px 8px rgba(0, 0, 0, .35);

     box-shadow: 0 10px 30px rgba(0, 0, 0, .25);

     transition: .25s;
 }

 .floating-cta-btn:hover {
     transform: translateY(-2px);
     background: rgba(15, 23, 42, 0.6);
 }