/* LittleStep Color System - Logo Based */
 :root {
    /* Primary Colors - Logo Orange */
    --color-primary: #01b4bb;
    --color-primary-light: #FF8A5C;
    --color-primary-dark: #01b4bb;
    --color-primary-hover: #00dae2;
    
    /* Secondary Colors - Warm Accents */
    --color-secondary: #FFA059;
    --color-secondary-light: #FFB380;
    --color-secondary-dark: #E68A4D;
    
    /* Background Colors */
    --color-bg-primary: #ecfeff;
    --color-bg-secondary: #f9ffff;
    --color-bg-accent: #FFF3EC;
    --color-bg-card: #FFFFFF;
    
    /* Text Colors */
    --color-text-primary: #222222;
    --color-text-secondary: #5D6D7E;
    --color-text-muted: #888888;
    --color-text-light: #FFFFFF;
    
    /* Status Colors */
    --color-success: #4CAF50;
    --color-warning: #FF9800;
    --color-error: #F44336;
    --color-info: #2196F3;
    
    /* Border Colors */
    --color-border-primary: #FFE0B2;
    --color-border-secondary: #F1F3F4;
    --color-border-light: #E9ECEF;
}

body {overflow:hidden}

.section-title-wrap {display:flex;gap:10px;align-items: center;justify-content: center;margin:0 auto;margin-bottom: 50px;}
.section-title-wrap b {color:var(--color-primary);}
.text-logo {height:5.4rem;}
.text-logo img {width:100%; height:100%;}

.section-title {display:flex;gap:10px;align-items: center;justify-content: center;}
.section-title2 {gap:5px;}


/* .sec_scroll {position:absolute;bottom:5%;left:50%;transform:translate(-50%,0);font-size:clamp(14px, 2vw, 18px);color:#004c4e;font-weight:400;opacity:0.4;
    animation-name:down;
    animation-duration:2s;
    animation-iteration-count:infinite;}
    @keyframes down {
        0% {bottom:10%;opacity:0.7;}
        70% {bottom:5%}
        }
         */

/* LittleStep Landing Page Specific Styles */
.landing-page {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    background: #fff;
    min-height: 100vh;
}

.landing-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Sticky Header */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.85); /* 처음엔 약간 투명 */
    backdrop-filter: blur(15px);
    z-index: 1000;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: background 0.3s, box-shadow 0.3s, border-bottom 0.3s;
    transform: none !important; /* 항상 보이게 */
}
.sticky-header.scrolled {
    background: rgba(255,255,255,0.98); /* 스크롤 시 더 불투명 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
body { padding-top: 79px; } /* 헤더 높이만큼 패딩 */

.sticky-header .landing-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sticky-logo {
    width:200px;
}

.sticky-logo img {
    width:100%;
    height:100%;
    object-fit: contain;
}

.sticky-cta {
    /* background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); */
    background:var(--color-primary);
    color: var(--color-text-light);
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display:flex;
    align-items: center;
    justify-content: center;
}

.sticky-cta:hover {
    transform: scale(1.05);
}

/* Hero Section */



.hero-section {
    background:url(../img/bg00.png);
    background-position:top;
    min-height: calc( 100vh - 90px );
    /* padding-bottom:calc( 10vh + 85px ); */
    display:flex;align-items: center;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
}

.section1 {background:url(../img/bg-bt.png);background-position: bottom;background-size: contain;background-repeat: no-repeat;}

.hero-content {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 60px;
    align-items: center;
}

.hero-text {
    text-align: left;
}

.hero-title {
    letter-spacing: 0.15rem;
    font-size: 6.2rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 30px;
    line-height: 1.2;
    text-shadow: 0 0 10px #fff;
}

.hero-title b {
    font-size:7rem;
    color:var(--color-primary-dark);
    background:#ffffffe0;
    line-height:1.5;
    padding:5px 20px;
}


.hero-subtitle {
    font-size: 2.4rem;
    color: #333;
    margin-bottom: 50px;
    line-height: 1.6;
    font-weight: 500;
    word-break: keep-all;
    /* text-shadow: 0 0 10px #060808; */
}



.hero-img {position: relative;}
.hero-img figure {width:fit-content;}
.hero-img figure.mockup {position:absolute;top:0;left:0;}


/* .mockup1 {
    animation: mock1 3s infinite;
} */

.mockup2 {
    animation: mock2 3s infinite;
}

.mockup3 {
    animation: mock3 3s infinite;
    /* animation-delay: 0.5s; */
}


@keyframes mock1 {
    0% { top:0 }
    50% { top:10px }
    100% { top:0 }
}


@keyframes mock2 {
    0% { top:0 }
    50% { top:-10px }
    100% { top:0 }
}

@keyframes mock3 {
    0% { top:0 }
    50% { top:10px }
    100% { top:0 }
}






.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-primary {
    background:#fff;
    color: var(--color-primary);
    padding: 20px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 2.0rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    min-width: 56px;
    box-shadow: 0 0px 10px rgba(91, 134, 134, 0.493);
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.05);
}


.btn-secondary {
    background: transparent;
    color: #fff;
    padding: 20px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 2.0rem;
    border: 2px solid #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    min-width: 56px;
}

.btn-secondary:hover {
    background: var(--color-primary);
    transform: translateY(-3px) scale(1.05);
}

.hero-btn1 {box-shadow:unset;border:2px solid var(--color-primary)}

.hero-btn2 {background:var(--color-primary)}

.hero-visual {
    position: relative;
    height: 550px;
    background: white;
    border-radius: 25px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Wireframe Styles */
.platform-wireframe {
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
}

.wireframe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: white;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wireframe-logo {
    font-weight: 700;
    color: #FF7043;
    font-size: 1.1rem;
}

.wireframe-nav {
    display: flex;
    gap: 15px;
}

.nav-item {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 1.6rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-item.active {
    background: #FF7043;
    color: white;
}

.nav-item:not(.active) {
    background: #f1f3f4;
    color: #5f6368;
}

.hero-image-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 20px;
    border: 2px dashed #dee2e6;
}

.placeholder-content {
    text-align: center;
    color: #6c757d;
}

.placeholder-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.placeholder-text {
    font-size: 1.1rem;
    font-weight: 500;
}

.wireframe-showcase {
    background: #ffffffcc;
    border-radius: 25px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.1);
    overflow: hidden; 
    max-width: 1600px;
    width: 100%;
}

.wireframe-content {
    display: grid ;
    grid-template-columns: repeat(2, 1fr) ;
    gap: 30px;
    flex: 1;
    overflow-y: hidden;
    max-width: 1600px;
    margin: 0 auto;
    padding: 50px;
}

.wireframe-section {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-height: 200px;
    display: flex;
    gap:20px;
    flex-direction: column;
}

.wireframe-section .section-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #2C3E50;
    text-align: center;
    padding-bottom:15px;
    border-bottom:1px solid #e9e9e9;
}

.wireframe-section .section-title i {
    font-size:2.6rem;
}

/* Subscription Card */

.subscription-wrap {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:15px;
}

.subscription-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap:15px;
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 12px; 
    border:2px solid var(--color-primary)
}

.subscription-card1 { 
    border:2px solid #ccc
}

.price {
    font-size: 2.2rem;
    font-weight: 800; 
    color:#00a3a8;
}

.price em {
    font-size:1.6rem;
    font-weight:500;
}

.features {
}

.feature-item {
    font-size: 1.6rem;
    margin-bottom: 5px;
}

.feature-item em {color:#00a3a8}

.subscribe-btn {
    color: white;
    background: var(--color-primary-dark);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.6rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.subscribe-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

/* Calendar Widget */
.calendar-widget {
    padding: 15px;
}

.calendar-header {
    text-align: center;
    margin-bottom: 15px;
}

.month {
    font-weight: 700;
    color: #2C3E50;
    font-size: 1rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.calendar-day {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 1.6rem;
    background: #f1f3f4;
    color: #5f6368;
}

.calendar-day.event {
    background: #FF7043;
    color: white;
}

.event-list {
    font-size: 1.6rem;
}

.event-item {
    padding: 5px 0;
    color: #5f6368;
    border-bottom: 1px solid #f1f3f4;
}

/* Schedule Widget */
.schedule-widget {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f3f4;
}

.schedule-nav {
    display: flex;
    gap: 8px;
}

.nav-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-btn.active {
    background: #FF7043;
    color: white;
}

.nav-btn:not(.active) {
    background: #f1f3f4;
    color: #5f6368;
}

.schedule-date {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2C3E50;
}

.schedule-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.schedule-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    border-radius: 8px;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.schedule-item.current {
    background: linear-gradient(135deg, #FF7043 0%, #FF5722 100%);
    color: white;
}

.time {
    font-size: 1.6rem;
    font-weight: 600;
    min-width: 40px;
}

.activity {
    flex: 1;
}

.activity-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.activity-content {
    font-size: 1.6rem;
    opacity: 0.8;
}

.status {
    font-size: 1.4rem;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 600;
}

.status.completed {
    background: #e8f5e8;
    color: #2e7d32;
}

.status.live {
    background: #fff3e0;
    color: #f57c00;
}

.status.upcoming {
    background: #e3f2fd;
    color: #1976d2;
}

.schedule-guide {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #f1f3f4;
    flex-wrap: wrap;
}

.guide-item {
    font-size: 1.2rem;
    padding: 4px 8px;
    background: #f1f3f4;
    border-radius: 4px;
    color: #5f6368;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Live Monitor Widget */
.live-widget {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.live-monitor {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.monitor-screen {
    background: url(../img/live01.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    padding: 50px 20px 10px;
    color: white;
    text-align: center;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.live-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1.4rem; 
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.teacher-video { 
    display: flex;
    gap:5px;
    align-items: center;
}

.teacher-avatar {
    font-size: 1.8rem; 
}

.teacher-name {
    font-size: 1.6rem; 
}

.lesson-content {
    margin-bottom: 10px;
}

.lesson-title {
    font-size: 2.0rem;
    font-weight: 700;
}

.lesson-material {
    font-size: 1.6rem;
    opacity: 0.8;
}

.monitor-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.live-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0; 
    width:100%;
    margin-top:40px;
    border-top:1px solid #aaa;
}

.viewer-count, .live-duration {
    font-size: 1.4rem;
    color: #fff;
}

/* Chat Widget */
.chat-widget {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chat-messages {
    flex: 1;
    margin-bottom: 15px;
    max-height: 120px;
    overflow-y: auto;
}

.message {
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 1.6rem;
    max-width: 80%;
}

.message.teacher {
    background: #FF7043;
    color: white;
    margin-left: auto;
}

.message.parent {
    background: #f1f3f4;
    color: #2C3E50;
}

.chat-input {
    display: flex;
    gap: 8px;
}

.chat-input input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1.6rem;
}

.chat-input button {
    padding: 8px 12px;
    background: #FF7043;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.6rem;
    cursor: pointer;
}

/* Shopping Mall Widget */
.shopping-widget {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:15px;
}

.product-item {
    display: flex;
    flex-direction: column; 
    gap: 15px;
    padding: 10px;
    border: 1px solid #eeeeee;
    border-radius: 8px;
}

.product-image {
    width: 100%;
    aspect-ratio: 1/1;
    background: #FF7043;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.6rem;
}

.product-info { 
}

.product-name {
    font-size: 1.6rem;
    font-weight: 500; 
    margin-bottom:10px;
}

.product-price {
    font-size: 1.6rem; 
    font-weight: 700;
    text-align: right;
}

.product-price em {color:#e42e00;margin-right:5px;}

.buy-btn {
    background: var(--color-primary-dark);
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    font-size: 1.4rem;
    cursor: pointer;
}

/* Live Streaming Widget */

.live-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.live-indicator {
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.live-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #2C3E50;
}

.live-viewers {
    font-size: 1.6rem;
    color: #666;
}

.live-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.control-btn {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    font-size: 1.4rem;
    cursor: pointer;
}

.control-btn i {
    margin-right:5px;
    font-size:1.2rem
}

.control-btn.primary {
    background: #e42e00;
    color: white;
    border-color: #e42e00;
}

/* Content Assignment Widget */
.content-widget {
    padding: 15px;
}

.content-list {
    max-height: 150px;
    overflow-y: auto;
}

.content-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 8px;
}

.content-icon {
    width: 30px;
    height: 30px;
    background: #4CAF50;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.6rem;
}

.content-info {
    flex: 1;
}


.content-difficulty {
    font-size: 1.6rem;;
    color: #666;
}

.assign-btn {
    background: #4CAF50;
    color: white;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 1.6rem;;
    cursor: pointer;
}

.sample-btn {
    box-shadow: unset;
    background:var(--color-primary);
    color:#fff;
}


/* Coupon & Points Widget */
.coupon-widget {
    display: grid;
    grid-template-columns: 1fr;
    gap:20px;
}

.coupon-card {
    background:#f9f9f9;
    /* border:1px solid #ddd; */
    /* background: linear-gradient(135deg, #FFD700 0%, #ffbb00 100%); */
    padding: 20px;
    border-radius: 8px;
}

.coupon-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex; 
    align-items: flex-end;
    gap:4px;
}

.coupon-title em {
    font-size:1.8rem;
    font-weight:500;
}

.coupon-title span {font-size:1.4rem;font-weight:500;padding:3px 10px;background:#00a3a8;color:#fff;border-radius:5px;margin-left:5px;}

.coupon-card ul {display: grid;grid-template-columns: 1fr 1fr 1fr;border-radius:5px;overflow: hidden;}

.coupon-card ul li {width:100%;display: flex;flex-direction: column;background:#fff;border-right:1px solid #e9e9e9;padding:15px;position:relative;overflow: hidden;justify-content: space-between;}

.coupon-card ul li:last-child {border-right:0px}

.coupon-card ul li p {font-size:1.6rem;text-align: right;}

.coupon-card ul li p b {font-size:2.4rem;}

.coupon-card ul li div {width:100px;position:absolute;z-index:0;top:50%;transform:translateY(-50%);left:0;opacity: 0.15;}

.points-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
}

.points-label {
    font-size: 1.6rem;
    color: #666;
}

.points-value {
    font-size: 1rem;
    font-weight: 700;
    color: #FF7043;
}

/* International Payment Widget */
.payment-widget h4 { 
    text-align: center;
    font-size:1.8rem;
    margin-bottom:15px;
    padding-bottom:15px;
    border-bottom:1px solid #eeeeee9d;
}

.payment-widget>div {padding:15px;}

.payment-left p {font-size:1.4rem;font-weight:700;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px;}

.payment-right div span {font-size:1.4rem;font-weight:500;}

.payment-right div p {font-size:1.4rem;font-weight: 400;text-align: right;margin-bottom:10px;}

.payment-widget {display:grid;grid-template-columns: 3fr 1fr;border:1px solid #ddd;border-radius:5px;overflow:hidden;height:100%;}

.payment-widget ul {display: grid;grid-template-columns: 1fr 1fr 1fr; gap:5px;height:fit-content;margin-bottom:25px;}

.payment-widget ul li {border:1px solid #ddd;padding:10px;font-size:14px;text-align: center; border-radius: 5px;height:fit-content;}

.payment-right {background:#E68A4D;color:#fff;display: flex;flex-direction: column;justify-content: space-between;}

.payment-next {width:100%;padding:10px;background:#fff;color:#333;text-align: center;}


/* .payment-widget ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:15px;
}

.payment-widget ul li {border:1px solid #ddd;padding:15px; border-radius: 10px;}

.payment-widget ul li p {text-align: center;margin:0px 0 10px;font-weight:700;} */



.pay-wrap {display: flex;gap:8px;width:100%;}

.payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    text-align: center;
}

.payment-method {
    padding: 10px;
    border: 1px solid #bbb;
    border-radius: 6px;
    font-size: 1.4rem;;
    background: white;
    cursor: pointer;
    flex:auto;
}

.payment-method.credit {
    width:100%;
}

.payment-method.active {
    border-color: #FF7043;
    background: #FF7043;
    color: white;
}

.currency-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    margin-top:5px;
    justify-content: flex-end;
}

.currency-flag {
    width: 20px;
    height: 15px;
    background: #ddd;
    border-radius: 2px;
}

.currency-code {
    font-size: 1.2rem;
    font-weight: 600;
}

.exchange-rate {
    font-size: 1.2rem;;
    color: #666;
}

/* Section Styles */

/* .section1, .section3 {background:linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%)} */

.section2 {background:url(../img/bg-check2.jpg);background-position: top;background-size: cover;background-size: cover;}

.section {
    padding: 120px 0;
}

.section-title {
    font-size: 5.6rem;
    font-weight: 800;
    color: var(--color-text-primary);
    text-align: center;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 2.8rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 80px; 
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.service-card {
    background: #ffffffcc;
    padding: 60px 70px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:20px;
    min-height: 550px;
    transition: 0.3s;
    text-align: center;
}

.service-card figure {
    width:100%;
}

.service-card figure img {
    width:100%;
}

/* .service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    transform: scaleX(0);
    transition: 0.3s;
} */

.service-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
    transition: 0.3s;
}

/* .service-card:hover::before {
    transform: scaleX(1);
} */

.service-card h3 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-text-primary);
}

.service-card p {
    display:inline-block;
    width:100%;
    color: #333;
    line-height: 1.5;
    font-size: 2.2rem; 
    display: flex;
    align-items: flex-start;
    justify-content: center;
    word-break: keep-all;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    min-height: 60px;
    align-items: center; 
    margin:20px 0 30px;
}

.tag {
    /* background: linear-gradient(135deg, var(--color-bg-accent) 0%, var(--color-border-primary) 100%); */
    color: #666;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 1.8rem;
    font-weight: 500;
    border: 1px solid #666;
    white-space: nowrap;
}

.service-cta {
}

.service-cta .btn-primary {
    background:var(--color-primary);
    color:#fff;
    box-shadow: unset;
}


/* Gallery Section */
.gallery-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); */
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 80px;
}

.content-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
}

.content-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
}

.content-thumbnail {
    width: 100%;
    height: 240px;
    /* background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1976D2;
    font-weight: 700;
    font-size: 1.1rem;
    position: relative;
    overflow: hidden;
}
.content-thumbnail img {
    width:100%;
    height:100%;
    object-fit: contain;
}

.content-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.content-card:hover .content-thumbnail::before {
    transform: translateX(100%);
}

.section3 { 
    padding-top:0 !important;
}

.content-info {
    padding: 20px;
    border-top:1px solid #ddd
}

.content-name {
    font-size: 2rem;
    font-weight: 700; 
    margin-bottom: 12px;
    text-align: center;
}

.content-category {
    color: #999;
    font-size: 1.6rem; 
    text-align: center;
}

.custom-badge {
    background: linear-gradient(135deg, #FF7043 0%, #FF5722 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 1.6rem;
    font-weight: 700;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(255, 112, 67, 0.3);
}

/* Platform Features Grid */

.section4 {padding:0 !important;position: relative;}
.circle {aspect-ratio: 1/1;border-radius:2000px;position:absolute;z-index:0; }
.circle1 {width:600px;border:100px solid #fbbd4c;top:130px;left:-150px;}
.circle3 {width:350px;border:80px solid #00a3a8; top:-150px;right:-40px;z-index:5}
.circle2 {width:400px;border:100px solid #42b677; bottom:70px;right:40px;}



.section4 .section-title {
    font-size:4.0rem;
}

.platform-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    margin: 60px 0;
}

.feature-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #FF7043 0%, #FF5722 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border-color: #FF7043;
}

/* 
.feature-card:hover::before {
    transform: scaleX(1);
} */

.feature-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
}

.feature-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2C3E50;
}

.feature-icon {
    width: 80px;
    height: 80px;
    /* background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    /* box-shadow: 0 4px 15px rgba(255, 112, 67, 0.3); */
}

.feature-card:hover .feature-icon {
    transform: scale(1.15) rotate(8deg);
    /* box-shadow: 0 8px 25px rgba(255, 112, 67, 0.4); */
}

.feature-description {
    color: #5D6D7E;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.feature-example {
    background: #F8F9FA;
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 1.6rem;
    line-height:1.5;
    word-break: keep-all;
    color: #6C757D; 
    margin-bottom: 12px;
}

.feature-usage {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #FF7043;
    font-weight: 600;
    border: 1px solid #FFCC80;
}

.features-showcase {
    background: #ffffffcc;
    border-radius: 20px;
    padding: 80px; 
    border: 2px solid #eee;
    position:relative;
    z-index: 1;
}

.showcase-header {
    text-align: center;
    margin-bottom: 50px;
}

.showcase-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #2C3E50;
    margin-bottom: 20px;
}

.showcase-subtitle {
    font-size: 2.4rem;
    color: #5D6D7E; 
    margin: 0 auto;
    line-height: 1.6;
}

.features-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    margin-bottom: 50px;
}

.category-section {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.category-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2C3E50;
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #FF7043 0%, #FF5722 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.category-features {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-features li {
    color: #5D6D7E;
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
}

.category-features li::before {
    content: "•";
    color: #FF7043;
    font-weight: bold;
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: -2px;
}

/* Why Choose Us */
.reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 50px;
    margin-bottom: 80px;
}

.reason-card {
    text-align: center;
    padding: 80px 60px;
    background: white;
    border-radius: 25px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.04);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.reason-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.reason-card:hover::before {
    opacity: 0.05;
}

.reason-card > * {
    position: relative;
    z-index: 2;
}

.reason-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
}

.reason-img { 
    
    /* animation: motion 2.0s infinite ease-in-out alternate; */
    transition: all 0.3s ease;
}
/* 
@keyframes motion {
    from{
      transform: translatey(0px);
    }
    to{
      transform: translatey(-20px);
    }
  } */

.reason-card:hover .reason-img {
    transform: scale(1.1) rotate(2deg);
}

.reason-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #2C3E50;
    margin-bottom: 25px;
}

.reason-desc {
    color: #5D6D7E;
    line-height: 1.7;
    font-size: 1.8rem;
}

/* CTA Section */
.cta-section {
    width:100%;
    aspect-ratio:10/3;
    background:url(../img/bottom-img.png) no-repeat center center /cover;
    color: var(--color-text-light);
    text-align: center; 
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    display:flex;
    align-items: center;
    justify-content: center;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
    background-size: 100px 100px;
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-title {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 40px;
    line-height: 1.3;
}

.cta-buttons {
    display: flex;
    gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
}


.btn-white {
    background: #fff;
    color: var(--color-primary);
    padding: 20px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 2rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    min-width: 56px;
}

.btn-white2 {
    background:var(--color-primary);
    color:#fff;
}

.btn-white:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3); 
}

/* === 부드러운 hover 효과 개선 === */
.btn-primary, .btn-secondary, .btn-white {
    transition: 
        background 0.28s cubic-bezier(0.4,0,0.2,1),
        color 0.28s cubic-bezier(0.4,0,0.2,1),
        box-shadow 0.32s cubic-bezier(0.4,0,0.2,1),
        border-color 0.28s cubic-bezier(0.4,0,0.2,1),
        transform 0.22s cubic-bezier(0.4,0,0.2,1);
    will-change: box-shadow, background, border-color, transform;
}

/* .btn-primary:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px rgba(255, 106, 61, 0.22);
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
} */
/* .btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px rgba(255, 106, 61, 0.13);
} */
.btn-white:hover {  
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px rgba(255, 106, 61, 0.10);
}

.service-card, .feature-card, .content-card, .reason-card {
    transition: 
        box-shadow 0.32s cubic-bezier(0.4,0,0.2,1),
        border-color 0.28s cubic-bezier(0.4,0,0.2,1),
        transform 0.22s cubic-bezier(0.4,0,0.2,1),
        background 0.28s cubic-bezier(0.4,0,0.2,1);
    will-change: box-shadow, border-color, transform, background;
}
.service-card:hover, .feature-card:hover, .content-card:hover, .reason-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 40px rgba(61, 216, 255, 0.151), 0 2px 8px rgba(0, 0, 0, 0.04);
    border-color: var(--color-primary);
    background: #fff;
}

.feature-icon, .custom-badge {
    transition: 
        box-shadow 0.32s cubic-bezier(0.4,0,0.2,1),
        transform 0.22s cubic-bezier(0.4,0,0.2,1);
    will-change: box-shadow, transform;
}
.feature-card:hover .feature-icon{
    transform: scale(1.08) rotate(4deg);
    /* box-shadow: 0 8px 24px rgba(255, 112, 67, 0.18); */
}

.feature-btn {text-align: center; margin:50px auto 0;}

.feature-btn .btn-primary {
    box-shadow: unset;
    background:var(--color-primary);
    color:#fff;
}


#contact-section {padding-top:0;}

.contact-form {
    width:100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.07);
    padding: 40px 60px;
    display: flex;
    gap: 150px;
  }

  .form-col label {display:inline-block;width:100%;}

  .contact-form h3 {
    font-size:7.0rem;
    color:var(--color-primary)
  }

  .contact-form form {
    width:100%;
    display:flex;
    flex-direction: column;
    gap:30px;
  }
  
  .form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .contact-form label {
    font-weight: 600; 
    margin-bottom: 15px;
    font-size: 1.8rem;
  }

  .row-1col {grid-template-columns: 1fr !important; gap:10px !important}

  .contact-form input,
  .contact-form textarea {
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 1.6rem;
    background: #fcfcfc;
    transition: border 0.2s;
    outline: none;
    resize: none;
  }

  
  .contact-form .row-2col input, .contact-form textarea {width:100%}
  
  .contact-form input:focus,
  .contact-form textarea:focus {
    border-color: var(--color-primary, #01b4bb);
    background: #fff;
  }
  
  .contact-form textarea {height:200px;}

  .radio-group {
    display: flex;
    gap: 18px; 
  }
  
  .radio-group label {
    font-weight: 500;
    color: #444;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .contact-submit-btn {
    background: var(--color-primary, #01b4bb);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 20px 50px;
    font-size: 2rem;
    font-weight: 700;
    cursor: pointer;
    margin: 15px auto;
    transition: background 0.2s, transform 0.2s; 
    box-shadow: 0 4px 16px rgba(1,180,187,0.08);
}

.contact-submit-btn:hover {
    /* background: var(--color-primary-hover, #00dae2); */
    transform: translateY(-2px) scale(1.03);
}

.pc-none {display:none;}
/* Responsive Design */

input[type="file"]::file-selector-button {display:none !important;}

.more-sample {text-align: center; margin-top: 60px;}



.coupon-box {width:100%;display: grid;grid-template-columns: 4fr 1fr;border-radius:10px;border:1px solid #eee;overflow: hidden;align-items: center;}
.coupon-down {background:#00a3a8;display: flex;flex-direction: column;gap:10px;justify-content: center;align-items: center;color:#fff;height:100%;}
.coupon-down i {font-size:2.6rem;}
.coupon-down p {font-size:1.4rem;font-weight:400;}
.coupon-text {padding:26px;}
.coupon-text span {color:#333;}
.coupon-text h4 {color:#00a3a8;font-weight:600;font-size:2.2rem;margin-bottom:15px;}
.coupon-text p {color:#aaa;}



.service-img-wrap {position:relative;margin:0 auto;width:80%;}
.service-img-wrap figure.service-imgs {position:absolute;top:0;left:0;z-index:50;}
.service-img-wrap figure.service-imgx {position:absolute;top:0;left:0;z-index:55}




@media (max-width: 1400px) {


.circle1 {width:480px;border:100px solid #fbbd4c;top:150px;left:-160px;}
.circle3 {width:280px;border:60px solid #00a3a8; top:-150px;right:-100px;z-index:5}
.circle2 {width:350px;border:80px solid #42b677; bottom:70px;right:-20px;}




    .btn-white {font-size: 1.8rem; padding: 16px 28px;}
    .btn-primary {padding:16px 28px; font-size:1.8rem;}
    .contact-submit-btn {padding:16px 28px; font-size:1.8rem;}

    .hero-content {gap:70px;}
    .hero-title {font-size:5.0rem;}
    .hero-title b {font-size:5.6rem;}
    .hero-subtitle {font-size:2.2rem;}
    .hero-buttons a {padding:16px 28px; font-size:1.8rem;}
    
    .section-title {font-size:5.0rem;}
    .text-logo {height:4.6rem;}
    .section-subtitle {font-size:2.2rem;}

    .service-card h3 {font-size:2.4rem}
    .service-card p {font-size:1.8rem;word-break: keep-all;}
    .tag {font-size:1.6rem; padding:6px 16px;}
    .services-grid {gap: 20px;}
    .service-card {padding: 50px;min-height:500px;}

    .gallery-grid {gap:20px;}

    .features-showcase {padding:60px;}
    .showcase-subtitle {font-size:2.2rem;}
    .section-title-wrap,.showcase-header {margin-bottom:30px;}
    .platform-features-grid {margin-top:40px;}
    .feature-card {padding: 20px;}
    .feature-title {font-size:2.0rem;}
    .feature-example {margin-bottom:0;}
    .feature-header {margin-bottom:20px;}
    .feature-icon img {max-width:85%;}

    
    .contact-form {gap:100px;}
    .contact-form h3 {font-size:6.0rem;}
    .contact-form input, .contact-form textarea {padding:12px;}
    .contact-form textarea {height:230px;}

    .footer-row {gap:80px !important;}





    .payment-widget ul {grid-template-columns: 1fr 1fr;}
    .payment-widget {grid-template-columns: 2fr 1fr;}


}


@media (max-width: 1200px) {
    .hero-content {grid-template-columns:5fr 6fr; gap:50px;}



    .wireframe-section {padding:25px;gap:15px;}
    .wireframe-content {gap:15px;padding:25px;}
    .wireframe-section .section-title {font-size:2.0rem}
    .product-name {font-size:1.4rem;}
    .product-price {font-size:1.4rem;}
    .time {font-size:1.4rem;}
    .coupon-title {font-size:1.8rem;}
    .coupon-title em {font-size:1.6rem;}
    .coupon-title span {font-size:1.2rem;}
    .coupon-card ul li p b {font-size:2.0rem;}
    .coupon-card ul li span {font-size:1.4rem;}
    .coupon-card ul li p {font-size:1.4rem;}
    .coupon-card ul li {gap:10px;}
    .subscribe-btn {font-size:1.4rem}
    .price {font-size:2.0rem}
    .price em {font-size:1.4rem;}



}




@media (max-width: 1024px) {



    
    .circle1 {width:450px;border:100px solid #fbbd4c;top:220px;left:-160px;}
    .circle3 {width:230px;border:50px solid #00a3a8; top:-120px;right:-120px;z-index:5}
    .circle2 {width:350px;border:80px solid #42b677; bottom:70px;right:-50px;}



    .pc-none {display:block;}
    .mobile-none {display:none;}


    .hero-buttons a,.service-cta .btn-primary,.btn-primary,.btn-white {padding:10px 28px;min-height:52px;}

    .hero-section {
        padding:80px 0;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-text {
        text-align: center;
    }

    .hero-title {font-size:4.6rem;margin-bottom:20px;}
    .hero-title b {font-size:5.4rem; padding:2px 10px;}

    .hero-subtitle {font-size:2.0rem;line-height:1.4;}

    .hero-subtitle {margin-bottom: 30px;}

    .hero-img figure {width:fit-content;}
    .hero-img figure img {width:85%;margin:0 auto;}

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .platform-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .features-categories {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .text-logo {height:3.6rem;}
    .section-title {
        font-size: 3.4rem;
    }

    .cta-title {
        font-size: 2.8rem;
    }


    .section-subtitle {font-size:2.0rem;margin-bottom:50px;}

    .service-card {padding:50px 30px;}

    .service-tags {margin :10px 0 20px;}

    .gallery-grid {grid-template-columns: repeat(2, 1fr);}
    .content-name {font-size:1.8rem;margin-bottom:8px;} 
    .content-info {padding:16px;}
    .content-thumbnail {height:unset;aspect-ratio: 2/1;}
    .gallery-grid {margin-bottom:40px;}

    .section4 .section-title {font-size:3.0rem;}
    .showcase-subtitle {font-size:2.0rem;}
    .section-title-wrap, .showcase-header {margin-bottom:20px;}

    .features-showcase {padding:40px;}
    .platform-features-grid {gap:20px;margin:40px 0;}
    .feature-btn {margin-top:40px;}
    

    .contact-form {padding:50px 40px;flex-direction: column;gap:50px;}
    .contact-form h3 {text-align: center;font-size:5.0rem;}
    .contact-form label {margin-bottom:10px;}
    .contact-form form {gap:20px;}

    .cta-section {aspect-ratio: 5 / 2;}

    .footer-row {gap:40px !important;}


    .coupon-card {padding:15px;}
    .coupon-card ul li {padding:10px;}
    .coupon-card ul li p b {font-size:1.8rem;}
    .wireframe-content {grid-template-columns: 1fr;}
    .payment-widget ul {grid-template-columns: 1fr 1fr;}
    .coupon-widget {grid-template-columns: 1fr 1fr;gap:15px;}
    .coupon-box {grid-template-columns: 3fr 1fr;}



    .payment-widget ul {grid-template-columns: 1fr 1fr 1fr;}
    .payment-widget {grid-template-columns: 3fr 1fr;}




}

/* @media (min-width: 769px) {
    .wireframe-content {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px;
        padding: 0 40px;
    }
}

@media (min-width: 1025px) {
    .wireframe-content {
        gap: 40px;
        padding: 0 60px;
    }
} */

@media (max-width: 768px) {


    
.landing-container {
    padding: 0 15px;
}


    .sticky-cta {padding:8px 24px 9px;}

    
    .circle1 {width:400px;border:80px solid #fbbd4c;top:300px;left:-170px;}
    .circle3 {width:200px;border:40px solid #00a3a8; top:-130px;right:-100px;z-index:5}
    .circle2 {width:330px;border:70px solid #42b677; bottom:100px;right:-70px;}




    body { padding-top: 56px; }

    .contact-form {
        padding: 40px 15px;
        border-radius: 14px;
        gap:40px;
    }
    .form-row {
        gap: 6px;
    }


    .hero-buttons {
        justify-content: center;
    }

    .services-grid {
        grid-template-columns: repeat(1, 1fr);
        gap:15px;
    }

    .section-subtitle {word-break: keep-all;}
    .section {padding:100px 0;}
    .service-card figure {width:100%;}

    .mobile-none {display:block;}

    .section4 .section-title {font-size:2.8rem;}
    
    .features-showcase {padding: 40px 15px;}
    .showcase-subtitle {word-break: keep-all;}

    .contact-form h3 {font-size:4.4rem;}

    .contact-form .radio-group {flex-direction: row;}

    .cta-section {aspect-ratio: unset; height:300px;}

    .feature-example {line-height:1.3;}
    .feature-header {margin-bottom:10px;}
    .feature-icon img {max-width:75%;}


    .activity-title {font-size:1.4rem;}
    .activity-content {font-size:1.4rem;}
    .status {font-size:1.2rem;}
    .payment-widget ul {grid-template-columns: 1fr 1fr;}
    .payment-widget {grid-template-columns: 2fr 1fr;}
    .lesson-title {font-size:1.8rem;}
    .teacher-name {font-size:1.4rem;}
    .teacher-avatar {font-size:1.6rem;}
    .service-tags {gap:5px;}
    .platform-features-grid {gap:15px;}
    .feature-btn {margin-top:30px;}
    .platform-features-grid {margin:30px 0;}
    .features-showcase {padding:40px 15px 30px;}
    .contact-form .row-2col input, .contact-form textarea {font-size:1.4rem;}
    .gallery-grid {gap:15px;}
    .more-sample {margin-top: 30px;}

    .sticky-logo {width:180px;}
    .coupon-card {padding:15px;}


    .coupon-widget {grid-template-columns: 1fr;}
    .coupon-text h4 {font-size:2.0rem;}
    .coupon-text span {font-size:1.4rem;}
    .coupon-text p {font-size:1.4rem;}


    
}

@media (max-width: 700px) {
    .section-title-wrap {flex-direction: column;} 
    .sticky-cta:hover {
        transform: scale(1.0);
    }

}



@media (max-width: 680px) {
    .section-title-wrap {flex-direction: column;}
    .platform-features-grid {grid-template-columns: repeat(1, 1fr);}

}

@media (max-width: 600px) {

    
    
    .circle1 {width:400px;border:80px solid #fbbd4c;top:400px;left:-170px;}
    .circle3 {width:150px;border:30px solid #00a3a8; top:-50px;right:-70px;z-index:5}
    .circle2 {width:300px;border:70px solid #42b677; bottom:100px;right:-70px;}




    .shopping-widget {grid-template-columns: 1fr 1fr;}
    .subscription-wrap {grid-template-columns: 1fr;}
    .wireframe-content {gap:15px;padding:15px;}
    .wireframe-section {padding:15px;}
    .hero-section {background-position: center;}
    .coupon-card ul {grid-template-columns: 1fr;}
    .coupon-card ul li {border-right:unset;border-bottom:1px solid #e9e9e9;}
    .coupon-card ul li:last-child {border-bottom:0px;}
    .coupon-card ul li {gap:3px;}



    .section {padding:80px 0;}
    .section-title {gap:5px;}
    
    .section-title2 {gap:2px;}

    .gallery-grid {grid-template-columns: repeat(1,1fr);}
    .section-subtitle {font-size:1.8rem;}
    .showcase-subtitle {font-size:1.8rem;}

    .section-title {font-size:3.0rem;}
    .text-logo {height:2.6rem;}

    .section4 .section-title {font-size:2.4rem;}

    
    .mobile-none {display:none;}

    .cta-title {font-size:2.4rem;}

    .contact-form h3 {font-size:4.0rem;}

    .feature-title {font-size:1.8rem;word-break: keep-all;}

    .feature-card {padding:15px;}
    
    .cta-title {margin-bottom:20px;}
    .cta-buttons {gap:10px;}
    
    .footer-info {gap:12px !important;word-break: keep-all;}
    .footer-info li span {display:flex;flex-direction: column;font-size:1.4rem;}

    .feature-item {font-size:1.4rem;}
    .price {font-size:1.8rem;} 





}




@media (max-width: 480px) {


    .payment-widget {
        grid-template-columns: 1fr;
    }

    
    
    .circle1 {width:400px;border:80px solid #fbbd4c;top:500px;left:-170px;}
    .circle3 {width:90px;border:20px solid #00a3a8; top:-40px;right:-20px;z-index:5}
    .circle2 {width:300px;border:70px solid #42b677; bottom:100px;right:-100px;}





    .section-title {font-size:2.4rem;}
    .text-logo {height:2.2rem;}


    .hero-title {font-size:3.8rem;}
    .hero-title b {font-size:4.4rem;}

    .hero-buttons a, .service-cta .btn-primary, .btn-primary, .btn-white,.contact-submit-btn {
        font-size:1.4rem;padding:6px 18px; min-height:40px;
    }

    .sticky-cta {
        font-size:1.4rem;padding:1px 12px 2px; min-height:33px;
    }

    .cta-title {font-size:1.8rem;}

    .cta-section {height:250px;}
    
    .hero-subtitle {font-size:1.8rem;}
    
    .section-title-wrap {gap: 2px;}

    .hero-section {padding:unset;display:flex;align-items: center;}

    .sticky-logo {width:170px;}
    
    .contact-form h3 {font-size:3.0rem;}


    .contact-form label {font-size:1.4rem;margin-bottom:5px;}
    .contact-form input, .contact-form textarea {padding: 8px;}
    .contact-submit-btn {margin:5px auto;}
    .hero-buttons {gap:15px;}
    .service-card h3 {font-size:2.0rem;}
    .service-card p {font-size:1.6rem;}
    .cta-buttons a {font-size:1.4rem;min-height:40px;width:80%;}
    .cta-buttons {flex-direction: column;align-items: center;}
    .content-category {font-size:1.4rem;}

    .wireframe-section .section-title {font-size:1.8rem;}
    .lesson-content {margin-bottom:5px;} 
    .schedule-item {flex-direction: column;gap:10px;}
    .activity-title {text-align: center;}
    .service-card {padding:30px 15px;}

    .schedule-header {flex-direction: column;gap:10px;} 
    .schedule-guide {justify-content: center;}
    .control-btn {font-size:1.2rem;}
    .control-btn i {font-size:1.0rem;}
    .coupon-title {font-size:1.6rem;}
    .coupon-title em {font-size:1.4rem;}
    .tag {font-size:1.4rem;padding:6px 15px;}
    .service-card {gap:15px;}
    .service-tags {margin:5px 0 15px;}
    .section4 .section-title {font-size:2.0rem;}
    .showcase-subtitle {font-size:1.6rem;line-height:1.5;}
    .feature-example {font-size:1.4rem;}
    .feature-title {font-size:1.6rem;}
    .feature-icon img {max-width: 65%;}
    .content-name {font-size:1.6rem;margin-bottom:5px;}
    .section-subtitle {margin-bottom:40px;}
    .section {padding:60px 0;}
    .gallery-grid {margin-bottom:20px;}
    .more-sample {margin-top:20px;}


    .coupon-text {padding:20px 15px;}
    .coupon-text h4 {font-size:1.8rem;}
    .coupon-down p {font-size:1.2rem;}
    .coupon-down {gap:5px;}
    .coupon-text h4 {margin-bottom:10px;}




}


@media (max-width: 400px) {


    .coupon-card ul li p b {font-size:1.8rem;}
    .coupon-card {padding:15px;}
    .pay-wrap {flex-direction: column;}
    .shopping-widget {gap:10px;}
    .hero-buttons {gap:10px;}


    .contact-form h3 {font-size:2.6rem;}

    .hero-buttons a, .service-cta .btn-primary, .btn-primary, .btn-white {
        font-size:1.4rem;padding:3px 18px; min-height:40px;
    }

    .sticky-logo {width:140px;}


    .hero-title {font-size:2.8rem;}
    .hero-title b {font-size:3.2rem;}
    .contact-form .radio-group {flex-direction: row;gap:6px;}


}




/* 푸터 */
.footer-simple {
    background: #222; 
    color: #fff;
    font-size: 15px; 
    padding: 50px 0;
  }
  .footer-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px 20px;
  }
  .footer-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 100px;
    flex-wrap: wrap;
  }

  .footer-info {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .footer-info li {color:#fff;}

  .footer-label {
    color: #00dae2;
    font-weight: 600;
    margin-right: 8px;
    font-size:1.6rem;
  }

  .footer-bottom {
    margin-top: 20px;
    color: #888 !important;
    font-size: 13px;
    text-align: left;
  }
  @media (max-width: 700px) {
    .footer-row {
      flex-direction: column;
      gap: 18px;
    } 
  }