/* ========================================
   sub hero section
   ======================================== */

/* SEO를 위한 시각적 숨김 (스크린리더는 읽음) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 모바일 기본 스타일 */
#heroSection {
    background-color: #000;
    width: 100%;
    padding: 180px 15px 40px 15px;
}

#heroSection .hero-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 40px;
}

#heroSection .hero-title-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

#heroSection .hero-title-txt-wrap {
    position: relative;
    order: 2;
    display: block;
    width: fit-content;
    order: 1;
    margin-bottom: 20px;
}

#heroSection .hero-title-txt-wrap::before {
    content:'';
    display: block;
    position: absolute;
    left: 0;
    top: -3px;
    width: 100%;
    height: 4px;
    background-color: #000;
    z-index: 2;
    display: none;
}

#heroSection .hero-title-txt-wrap::after {
    content:'';
    display: block;
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 4px;
    background-color: #000;
    z-index: 2;
    display: none;
}

/* Hero Video Source (숨김 처리) */
#heroSection .hero-video-source {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    visibility: hidden;
}

#heroSection .hero-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(60px, 12vw, 8rem);
    line-height: 1.1;
    margin: 0;
    display: flex;
    order: 2;
    position: relative;
    transform: translateY(20px) rotateX(-45deg);
    opacity: 0;
    transform-origin: center bottom;
    transform-perspective: 1000;
    z-index: 2;
    flex-direction: column;
}
#heroSection .hero-title span.txt-wrap{
    display: flex;
}
#heroSection .hero-title .text-gray {
    color: #999;
}

/* Video Clip Effect for Gray Text */
#heroSection .hero-title .text-video-clip {
    position: relative;
    display: inline-block;
    background: #000;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

#heroSection .hero-title .text-video-clip .clip-video-element {
    position: absolute;
    object-fit: cover;
    mix-blend-mode: multiply;
    pointer-events: none;
    visibility: visible;
    opacity: 1;
    z-index: 1;
}

#heroSection .hero-title .text-white {
    color: #fff;
}

#heroSection .hero-title .text-yellow {
    color: #DDF160;
}

#heroSection .hero-info-text {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 3vw, 1.6rem);
    line-height: 1.2em;
    letter-spacing: 1.5px;
    color: #fff;
    opacity: 0.8;
    order: 1;
    margin-bottom: 12px;
    display: block;
    width: fit-content;
    align-self: flex-end;
    z-index: 3;
    order: 2;
    box-sizing: border-box;
    padding-left: 100px;
}

#heroSection .hero-text {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 2.8vw, 1.4rem);
    line-height: 1.4;
    letter-spacing: 0;
    color: #fff;
    position: relative;
    z-index: 1;
}

#heroSection .hero-text p {
    margin: 0;
}

/* ========================================
   sub hero section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    #heroSection {
        padding: 140px 30px 50px 30px;
    }
    
    #heroSection .hero-title {
        font-size: clamp(4rem, 12vw, 10rem);
    }
    
    #heroSection .hero-info-text {
        font-size: clamp(1.4rem, 3.5vw, 1.8rem);
        letter-spacing: 1.8px;
    }
    
    #heroSection .hero-text {
        font-size: clamp(1.4rem, 3vw, 1.6rem);
        letter-spacing: 1.8px;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    #heroSection {
        padding: 180px 40px 50px 40px;
    }
    
    #heroSection .hero-title {
        font-size: clamp(6rem, 14vw, 14rem);
        flex-direction: row;
    }
    
    #heroSection .hero-info-text {
        font-size: clamp(1.8rem, 4vw, 2rem);
        letter-spacing: 2px;
    }
    
    #heroSection .hero-text {
        font-size: clamp(1.6rem, 3.5vw, 1.8rem);
        letter-spacing: 2px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    #heroSection {
        padding: 220px 50px 60px 50px;
    }
    #heroSection .hero-title-txt-wrap{
        order: 2;
        margin-bottom: 0;
    }
    #heroSection .hero-title {
        font-size: 11.458vw;
    }
    #heroSection .hero-info-text {
        font-size: 1.250vw;
        letter-spacing: 2.3px;
        order: 1;
        padding-left: 0;
    }
    
    #heroSection .hero-text {
        font-size: clamp(1.8rem, 4vw, 1.9rem);
        letter-spacing: 2.4px;
        line-height: 1.2;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    #heroSection {
        padding: 260px 60px 60px 60px;
    }
    
    #heroSection .hero-text {
        font-size: 2rem;
        line-height: 24px;
        letter-spacing: 2.7px;
    }
}
@media (min-width: 1920px) {
    #heroSection .hero-title {
        font-size: 22rem;
        line-height: 1.12;
    }
    #heroSection .hero-info-text {
        font-size: 2.4rem;
        letter-spacing: 2.7px;
        margin-bottom: 8px;
    }
}













/* ========================================
   Transition Section (Mosaic Grid)
   ======================================== */
/* 모바일 기본 스타일 */
/* Transition Section Container */
.transition-section {
    width: 100%;
    background-color: #000;
    position: relative;
    margin-top: -1px;
}

/* Transition Grid Container - Grid Layout */
.transition-container {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
  
  .transition-cell {
    background: #fff;
    will-change: opacity;
  
    /* ✅ transform 기반 scale 제거 */
    transform: none;
    -webkit-transform: none;
  
    /* ✅ 셀을 살짝 “확장”해서 이웃 셀과 겹치게 만들기 */
    position: relative;
    z-index: 0;
    margin-top: -1px;
    padding: 1px;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1/1;
  }
@media screen and (max-width: 1024px){
    .transition-container{
        grid-template-columns: repeat(8, 1fr);
    }
    .transition-cell:nth-child(48) ~ .transition-cell {
        display: none;
    }
}
@media screen and (max-width: 768px){
    .transition-container{
        grid-template-columns: repeat(6, 1fr);
    }
    .transition-cell:nth-child(36) ~ .transition-cell {
        display: none;
    }
}

/* ========================================
   Transition Section - 반응형
   ======================================== */

@media screen and (max-width: 1024px){
    .transition-container{
        grid-template-columns: repeat(8, 1fr);
    }
    .transition-cell:nth-child(48) ~ .transition-cell {
        display: none;
    }
}
@media screen and (max-width: 768px){
    .transition-container{
        grid-template-columns: repeat(6, 1fr);
    }
    .transition-cell:nth-child(36) ~ .transition-cell {
        display: none;
    }
}










/* More Button */
/* 모바일 기본 스타일 */
.more-button-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
}

.more-button-wrap .more-button {
    width: 40px;
    height: 40px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
}

.more-button-wrap .more-button svg {
    width: 100%;
    height: 100%;
}

.more-button-wrap .more-button:hover {
    transform: rotate(180deg);
}

/* ========================================
   More Button - 반응형
   ======================================== */

/* 768px 이상 */
@media (min-width: 768px) {
    .more-button-wrap {
        margin-top: 50px;
    }
    
    .more-button-wrap .more-button {
        width: 56px;
        height: 56px;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .more-button-wrap {
        margin-top: 60px;
    }
    
    .more-button-wrap .more-button {
        width: 64px;
        height: 64px;
    }
}

/* 포트폴리오 더보기: 숨김 항목 / 더보기 래퍼 숨김 */
.portfolio-item--hidden {
    display: none;
}
.portfolio-item--filter-hidden {
    display: none !important;
}
.more-button-wrap--hidden {
    display: none !important;
}



  /* ===========================================
   Contact Section (다른 서브페이지에서도 공통 사용)
   =========================================== */
/* 모바일 기본 스타일 */
#secContact.contact-section {
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#secContact .contact-container {
    max-width: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#secContact .contact-title-en {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 10vw, 28px);
    line-height: 1.1;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    row-gap: 0;
}

#secContact .contact-title-en .word {
    display: inline-block;
    filter: blur(0);
}

/* Blur 효과 */
#secContact .contact-title-en .word.blur-2 {
    filter: blur(2px);
}

#secContact .contact-title-en .word.blur-4 {
    filter: blur(4px);
}

#secContact .contact-title-en .word.highlight {
    color: #ac60ff;
}

#secContact .contact-title-ko {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 5vw, 18px);
    line-height: 1.4;
    margin-top: 20px;
    word-break: keep-all;
}

#secContact .contact-description {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 4vw, 14px);
    line-height: 1.6;
    color: #666;
    margin-top: 10px;
}

#secContact .contact-cta-button {
    display: flex;
    margin-top: 40px;
}

#secContact .contact-cta-button .btn-arrow-circle-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-family: 'Roboto Condensed', 'Pretendard', sans-serif;
    font-size: clamp(15px, 4vw, 15px);
    letter-spacing: 0.5px;
    font-weight: 600;
}

#secContact .contact-cta-button .btn-contact-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    transition: all 0.3s ease;
    border-radius: 999px;
    background-color: #ddf160;
    height: 40px;
    min-width: 40px;
}

#secContact .contact-cta-button .btn-contact-text > span {
    line-height: 1;
}

#secContact .contact-cta-button .btn-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ddf160;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-left: -6px;
    transition: all 0.3s ease;
}

#secContact .contact-cta-button:hover .btn-contact-icon {
    transform: translateX(15px) rotate(45deg);
}
#secContact .contact-cta-button .btn-contact-icon img{
    width: 18px;
}

/* 배경색 변형 */
#secContact.bg-white {
    background-color: #fff;
}
#secContact.bg-white .contact-title-en {
    color: #222;
}
#secContact.bg-white .contact-title-ko {
    color: #222;
}
#secContact.bg-white .contact-description {
    color: #444;
}

#secContact.bg-black {
    background-color: #000;
}
#secContact.bg-black .contact-title-en {
    color: #fff;
}
#secContact.bg-black .contact-title-ko {
    color: #fff;
}
#secContact.bg-black .contact-description {
    color: #CCC;
}

#secContact.bg-gray {
    background-color: #f9f9f9;
}
#secContact.bg-gray .contact-title-en {
    color: #222;
}
#secContact.bg-gray .contact-title-ko {
    color: #222;
}

/* ========================================
   Contact Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    #secContact.contact-section {
        padding: 100px 30px;
    }
    
    #secContact .contact-title-en {
        font-size: clamp(4rem, 11vw, 5.5rem);
        gap: 10px;
    }
    
    #secContact .contact-title-ko {
        font-size: clamp(2rem, 5.5vw, 2.2rem);
        margin-top: 25px;
    }
    
    #secContact .contact-description {
        font-size: clamp(1.5rem, 4.5vw, 1.7rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    #secContact.contact-section {
        padding: 120px 40px;
        height: unset;
    }
    
    #secContact .contact-title-en {
        font-size: clamp(5rem, 12vw, 6.5rem);
        gap: 12px;
    }
    
    #secContact .contact-title-ko {
        font-size: clamp(2.2rem, 6vw, 2.5rem);
        margin-top: 30px;
    }
    
    #secContact .contact-description {
        font-size: clamp(1.7rem, 5vw, 1.8rem);
        margin-top: 10px;
    }
    
    #secContact .contact-cta-button {
        margin-top: 35px;
    }
    
    #secContact .contact-cta-button .btn-arrow-circle-filter {
        font-size: clamp(1.8rem, 4.5vw, 1.9rem);
        letter-spacing: 0.6px;
    }
    
    #secContact .contact-cta-button .btn-contact-text {
        padding: 0 28px;
        height: 52px;
    }
    
    #secContact .contact-cta-button .btn-contact-icon {
        width: 52px;
        height: 52px;
    }
    #secContact .contact-cta-button .btn-contact-icon img{
        width: 22px;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    #secContact.contact-section {
        padding: 140px 50px;
    }
    
    #secContact .contact-title-en {
        font-size: clamp(6.5rem, 13vw, 7.5rem);
        gap: 14px;
    }
    
    #secContact .contact-title-ko {
        font-size: clamp(2.5rem, 6.5vw, 2.7rem);
        margin-top: 35px;
    }
    
    #secContact .contact-description {
        font-size: clamp(1.8rem, 5.5vw, 1.9rem);
    }
    #secContact .contact-cta-button .btn-contact-icon img{
        width: 24px;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    #secContact.contact-section {
        padding: 160px 60px;
    }
    
    #secContact .contact-title-en {
        font-size: 8rem;
        line-height: 1;
        gap: 15px;
    }
    
    #secContact .contact-title-ko {
        font-size: 2.8rem;
        margin-top: 40px;
    }
    
    #secContact .contact-description {
        font-size: 2rem;
    }
    
    #secContact .contact-cta-button {
        margin-top: 40px;
    }
    
    #secContact .contact-cta-button .btn-arrow-circle-filter {
        font-size: 2rem;
        letter-spacing: 0.8px;
    }
    
    #secContact .contact-cta-button .btn-contact-text {
        padding: 0 30px;
        height: 56px;
    }
    
    #secContact .contact-cta-button .btn-contact-icon {
        width: 56px;
        height: 56px;
    }
}


















/* Content Section - Portfolio List */
/* 모바일 기본 스타일 */
.port-list-section {
    background-color: #000;
    width: 100%;
    padding: 0 20px 80px 20px;
}

.port-list-section .portfolio-container {
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* Top Controls */
.port-list-section .top-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 40px;
    margin-bottom: 40px;
}

/* Filter Tabs */
.port-list-section .filter-tabs {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.port-list-section .filter-tab {
    padding: 6px 20px;
    border-radius: 33554400px;
    border: 1px solid #fff;
    background-color: transparent;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.port-list-section .filter-tab:hover {
    background-color: rgba(221, 241, 96, 0.1);
    border-color: #DDF160;
}

.port-list-section .filter-tab.active {
    background-color: #DDF160;
    border-color: #DDF160;
    color: #000;
}

/* Search Bar */
.port-list-section .search-bar {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #fff;
    padding-bottom: 8px;
    height: 40px;
}

.port-list-section .search-input {
    background-color: transparent;
    border: none;
    outline: none;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    width: 100%;
    padding: 0;
}

.port-list-section .search-input::placeholder {
    color: #999;
}

.port-list-section .search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.port-list-section .search-icon svg {
    width: 100%;
    height: 100%;
}

/* Portfolio Grid */
.port-list-section .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Portfolio Item (li) */
.port-list-section .portfolio-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: 100%;
}

.port-list-section .portfolio-item.hidden {
    display: none;
}

/* Portfolio Card (a) */
.port-list-section .portfolio-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.port-list-section .portfolio-card:hover {
    transform: scale(1.02);
}

.port-list-section .card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #CCC;
    object-fit: cover;
}
.port-list-section .card-image::after{
    content:'';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 30%);
}

.port-list-section .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.port-list-section .award-badge {
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 2;
    width: 78px;
}

.port-list-section .award-icon {
    width: 100%;
    height: 90px;
}

.port-list-section .award-icon img {
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.port-list-section .card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #fff;
}

.port-list-section .card-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    margin: 0;
}

.port-list-section .card-subtitle {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    margin: 0;
}

/* ========================================
   Portfolio List Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .port-list-section {
        padding: 70px 30px 100px 30px;
    }
    
    .port-list-section .portfolio-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    
    .port-list-section .filter-tab {
        font-size: 13.5px;
        padding: 6px 18px;
    }
    
    .port-list-section .card-title {
        font-size: 20px;
    }
    
    .port-list-section .card-subtitle {
        font-size: 15px;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .port-list-section {
        padding: 70px 40px 120px 40px;
    }
    
    .port-list-section .top-controls {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 25px;
        margin-bottom: 50px;
    }
    
    .port-list-section .search-bar {
        width: 320px;
    }
    
    .port-list-section .search-input {
        font-size: 17px;
    }
    
    .port-list-section .search-icon {
        width: 22px;
        height: 22px;
    }
    
    .port-list-section .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .port-list-section .portfolio-card {
        padding: 24px;
    }
    
    
    .port-list-section .award-icon {
        height: 105px;
    }
    
    .port-list-section .card-content {
        gap: 9px;
    }
    
    .port-list-section .card-title {
        font-size: 21px;
    }
    
    .port-list-section .card-subtitle {
        font-size: 16px;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .port-list-section {
        padding: 75px 50px 140px 50px;
    }
    
    .port-list-section .top-controls {
        gap: 28px;
        margin-bottom: 55px;
    }
    
    .port-list-section .search-bar {
        width: 380px;
    }
    
    .port-list-section .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    
    .port-list-section .portfolio-card {
        padding: 26px;
    }
    
    
    
    .port-list-section .award-icon {
        height: 115px;
    }
    
    .port-list-section .card-title {
        font-size: 22px;
    }
    
    .port-list-section .card-subtitle {
        font-size: 17px;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .port-list-section {
        padding: 80px 60px 160px 60px;
    }
    
    .port-list-section .top-controls {
        gap: 30px;
        margin-bottom: 60px;
    }
    
    .port-list-section .filter-tab {
        padding: 7px 21px;
        font-size: 14px;
    }
    
    .port-list-section .search-bar {
        width: 420px;
    }
    
    .port-list-section .search-input {
        font-size: 18px;
    }
    
    .port-list-section .search-icon {
        width: 24px;
        height: 24px;
    }
    
    .port-list-section .portfolio-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
    
    .port-list-section .portfolio-card {
        padding: 30px;
    }
    
    .port-list-section .award-badge {
        right: 20px;
        width: 88px;
    }
    
    .port-list-section .award-icon {
        height: 130px;
    }
    
    .port-list-section .card-content {
        gap: 10px;
    }
    
    .port-list-section .card-title {
        font-size: 24px;
        line-height: 1;
    }
    
    .port-list-section .card-subtitle {
        font-size: 18px;
        line-height: 1;
    }
}




















/* ===========================================
   Portfolio View Page - Hero Section
   =========================================== */

/* 모바일 기본 스타일 */
/* Hero Section Container */
.portfolio-view-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    background-color: #000;
    overflow: hidden;
}

/* Background Image */
.portfolio-view-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #444;
    background-size: cover;
    background-position: center;
}

.portfolio-view-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
}
.portfolio-view-hero-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 포트폴리오 뷰: 등록된 이미지 없을 때 영역 유지 + No image 표시 */
.port-view-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 200px;
    background-color: #eaeaea;
    color: #999;
    font-size: 1rem;
    font-family: inherit;
}
.portfolio-view-hero-image .port-view-no-image {
    position: absolute;
    inset: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #555;
    color: #bbb;
}
.port-view-mockup01-section .background-image .port-view-no-image,
.port-view-mockup01-section .device-screen .port-view-no-image,
.port-view-mockup02-section .device-screen .port-view-no-image {
    min-height: 100%;
}
.port-view-pc-full-section .main-screenshot .port-view-no-image,
.port-view-pc-full-section .grid-image .port-view-no-image {
    min-height: 280px;
}

/* Content Container */
.portfolio-view-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 30px 15px;
    gap: 40px;
}

/* Left Area - Title & Description */
.portfolio-view-hero-left {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    width: 100%;
    justify-content: flex-end;
}

.portfolio-view-hero-title h2 {
    font-family: 'Roboto Condensed', 'Pretendard', sans-serif;
    font-weight: 900;
    font-size: clamp(4rem, 12vw, 8rem);
    line-height: 1.1;
    color: #fff;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.portfolio-view-hero-title h2 .line {
    display: block;
}

.portfolio-view-hero-title h2 .text-white {
    color: #fff;
}

.portfolio-view-hero-title h2 .text-yellow {
    color: #ddf160;
}

.portfolio-view-hero-desc {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.portfolio-view-hero-desc p {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    word-break:keep-all;
}

.portfolio-view-hero-desc p:first-child {
    margin-top: 12px;
}

/* Right Area - Buttons */
.portfolio-view-hero-right {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    width: 100%;
    justify-content: flex-start;
}

.portfolio-view-hero-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.portfolio-view-hero-btn:hover {
    opacity: 0.8;
}

.portfolio-view-hero-btn .btn-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 3rem);
    line-height: 1;
    color: #fff;
}

/* ========================================
   Portfolio View Hero Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .portfolio-view-hero-content {
        padding: 40px 20px;
        gap: 35px;
    }
    
    .portfolio-view-hero-title h2 {
        font-size: clamp(5rem, 13vw, 9rem);
    }
    
    .portfolio-view-hero-desc p {
        font-size: clamp(1.8rem, 3.8vw, 1.8rem);
        margin-top: 14px;
    }
    
    .portfolio-view-hero-right {
        gap: 25px;
    }
    
    .portfolio-view-hero-btn .btn-text {
        font-size: clamp(2.6rem, 6.5vw, 3.2rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .portfolio-view-hero-content {
        padding: 50px 40px;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 30px;
    }
    
    .portfolio-view-hero-left {
        width: auto;
    }
    
    .portfolio-view-hero-title h2 {
        font-size: clamp(7rem, 14vw, 11rem);
    }
    
    .portfolio-view-hero-desc p {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
        margin-top: 16px;
    }
    
    .portfolio-view-hero-right {
        gap: 30px;
        width: auto;
    }
    
    .portfolio-view-hero-btn .btn-text {
        font-size: clamp(2.8rem, 7vw, 3.3rem);
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .portfolio-view-hero-content {
        padding: 55px 50px;
    }
    
    .portfolio-view-hero-title h2 {
        font-size: clamp(10rem, 15vw, 14rem);
    }
    
    .portfolio-view-hero-desc p {
        font-size: clamp(1.8rem, 4.5vw, 1.9rem);
        margin-top: 18px;
    }
    
    .portfolio-view-hero-right {
        gap: 35px;
    }
    
    .portfolio-view-hero-btn .btn-text {
        font-size: clamp(3.2rem, 7.5vw, 3.5rem);
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .portfolio-view-hero {
        min-height: 100vh;
    }
    
    .portfolio-view-hero-content {
        padding: 60px;
    }
    
    .portfolio-view-hero-title h2 {
        font-size: 16rem;
        line-height: 1;
    }
    
    .portfolio-view-hero-desc p {
        font-size: 2rem;
    }
    
    .portfolio-view-hero-desc p:first-child {
        margin-top: 20px;
    }
    
    .portfolio-view-hero-right {
        gap: 40px;
    }
    
    .portfolio-view-hero-btn {
        gap: 5px;
    }
    
    .portfolio-view-hero-btn .btn-text {
        font-size: 3.6rem;
    }
}








/* ===========================================
   Portfolio View Page - Top Section (프로젝트 정보)
   =========================================== */

/* 모바일 기본 스타일 */
/* Section Container */
.port-view-top-section {
    background-color: #000;
    padding: 40px 15px;
    position: relative;
    z-index: 2;
}

/* Main Container - 1 Column Layout (Mobile) */
.port-view-top-section .top-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.port-view-top-section .top-left {
    width: 100%;
    height: auto;
    flex-shrink: 0;
}

.port-view-top-section .top-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.port-view-top-section .info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.port-view-top-section .info-label {
    width: 100%;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    flex-shrink: 0;
}

.port-view-top-section .info-value {
    width: 100%;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #ccc;
}

.port-view-top-section .color-palette {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.port-view-top-section .color-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
}

.port-view-top-section .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.port-view-top-section .tag {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 30px;
    border: 1px solid #777;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

/* Mockup01 Section */
.port-view-mockup01-section {
    position: relative;
    width: 100%;
    background-color: #000;
    padding-bottom: 60px;
    overflow: visible;
    margin-top: -1px;
}

.port-view-mockup01-section .background-area {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    z-index: 1;
}

.port-view-mockup01-section .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 132.98%;
    background-color: #555;
    background-size: cover;
    background-position: top left;
}

.port-view-mockup01-section .background-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.5);
}

.port-view-mockup01-section .tablet-device {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 500px;
    height: 320px;
    border-radius: 20px;
    border: 6px solid #222;
    box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.35);
    z-index: 2;
    overflow: hidden;
}

.port-view-mockup01-section .device-screen {
    width: 100%;
    height: 100%;
    background-color: #ccc;
    background-size: cover;
    background-position: center;
}

.port-view-mockup01-section .device-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ========================================
   Portfolio View Top Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .port-view-top-section {
        padding: 70px 20px;
    }
    
    
    .port-view-top-section .top-right {
        gap: 18px;
    }
    
    .port-view-top-section .info-label {
        font-size: 1.8rem;
    }
    
    .port-view-top-section .info-value {
        font-size: 1.6rem;
    }
    
    .port-view-top-section .color-circle {
        width: 34px;
        height: 34px;
    }
    
    .port-view-top-section .tag {
        font-size: 14px;
        padding: 9px 13px;
    }
    
    .port-view-mockup01-section {
        padding-bottom: 70px;
    }
    
    .port-view-mockup01-section .background-area {
        height: 500px;
    }
    
    .port-view-mockup01-section .tablet-device {
        top: 70px;
        max-width: 600px;
        height: 400px;
        border-radius: 25px;
        border: 7px solid #222;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .port-view-top-section {
        padding: 100px 40px;
    }
    
    .port-view-top-section .top-container {
        flex-direction: row;
        gap: 30px;
    }
    
    .port-view-top-section .top-left {
        flex: 1;
        height: 140px;
    }
    
    .port-view-top-section .top-right {
        flex: 1;
        gap: 18px;
    }
    
    .port-view-top-section .info-item {
        flex-direction: row;
        gap: 40px;
    }
    
    .port-view-top-section .info-label {
        width: 90px;
        font-size: 1.8rem;
    }
    
    .port-view-top-section .info-value {
        flex: 1;
        font-size: 1.8rem;
    }
    
    .port-view-top-section .color-circle {
        width: 36px;
        height: 36px;
    }
    
    .port-view-top-section .tag {
        font-size: 15px;
        padding: 9px 14px;
    }
    
    .port-view-mockup01-section {
        padding-bottom: 90px;
    }
    
    .port-view-mockup01-section .background-area {
        height: 650px;
    }
    
    .port-view-mockup01-section .tablet-device {
        top: 90px;
        max-width: 900px;
        height: 570px;
        border-radius: 35px;
        border: 8px solid #222;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .port-view-top-section {
        padding: 130px 50px;
    }
    
    .port-view-top-section .top-container {
        gap: 35px;
    }
    
    .port-view-top-section .top-left {
        height: 150px;
    }
    
    .port-view-top-section .top-right {
        gap: 19px;
    }
    
    .port-view-top-section .info-item {
        gap: 50px;
    }
    
    .port-view-top-section .info-label {
        width: 95px;
        font-size: 1.9rem;
    }
    
    .port-view-top-section .info-value {
        font-size: 1.9rem;
    }
    
    .port-view-top-section .color-circle {
        width: 37px;
        height: 37px;
    }
    
    .port-view-mockup01-section {
        padding-bottom: 110px;
    }
    
    .port-view-mockup01-section .background-area {
        height: 800px;
    }
    
    .port-view-mockup01-section .tablet-device {
        top: 110px;
        max-width: 1200px;
        height: 760px;
        border-radius: 45px;
        border: 9px solid #222;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .port-view-top-section {
        padding: 160px 60px;
    }
    
    .port-view-top-section .top-container {
        gap: 40px;
    }
    
    .port-view-top-section .top-left {
        height: 160px;
    }
    
    .port-view-top-section .top-right {
        gap: 20px;
    }
    
    .port-view-top-section .info-item {
        gap: 60px;
    }
    
    .port-view-top-section .info-label {
        width: 100px;
        font-size: 2rem;
    }
    
    .port-view-top-section .info-value {
        font-size: 2rem;
    }
    
    .port-view-top-section .color-circle {
        width: 38px;
        height: 38px;
    }
    
    .port-view-top-section .tag {
        padding: 10px 15px;
        font-size: 16px;
    }
    
    .port-view-mockup01-section {
        padding-bottom: 140px;
    }
    
    .port-view-mockup01-section .background-area {
        height: 940px;
    }
    
    .port-view-mockup01-section .tablet-device {
        top: 140px;
        width: 1480px;
        max-width: none;
        height: 940px;
        border-radius: 60px;
        border: 10px solid #222;
        box-shadow: 0px -20px 40px 0px rgba(0, 0, 0, 0.35);
    }
    
    .port-view-mockup01-section .background-overlay {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}










/* ===========================================
   Portfolio View Page - Sec02Mobile (모바일 목업 3종)
   =========================================== */

/* 모바일 기본 스타일 */
.port-view-mockup02-section {
    background-color: #000;
    padding: 40px 0;
}

.port-view-mockup02-section .sec02-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.port-view-mockup02-section .sec02-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
}

.port-view-mockup02-section .sec02-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.port-view-mockup02-section .sec02-title .title-line {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 8vw, 3.6rem);
    line-height: 1.1;
    color: #fff;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.port-view-mockup02-section .sec02-title .word {
    display: inline-block;
    color: #fff;
    filter: blur(0);
}

.port-view-mockup02-section .sec02-title .word.blur-2 {
    filter: blur(2px);
}

.port-view-mockup02-section .sec02-title .word.blur-4 {
    filter: blur(4px);
}

.port-view-mockup02-section .sec02-title .word.highlight {
    color: #ddf160;
    filter: blur(0);
}

.port-view-mockup02-section .sec02-description {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.port-view-mockup02-section .sec02-description p {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #ccc;
    margin: 0;
}

.port-view-mockup02-section .sec02-right {
    overflow: hidden;
    padding-left: 20px;
}

.port-view-mockup02-section .port-view-swiper {
    height: 520px;
    overflow: visible;
}

.port-view-mockup02-section .port-view-swiper .swiper-wrapper {
    display: flex;
}

.port-view-mockup02-section .port-view-swiper .swiper-slide {
    width: 240px;
    height: 420px;
}

/* has-margin 클래스가 있는 슬라이드에 margin-top 적용 */
.port-view-mockup02-section .port-view-swiper .swiper-slide.has-margin {
    margin-top: 40px;
}

.port-view-mockup02-section .mobile-device {
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    background-color: #222;
}

.port-view-mockup02-section .device-screen {
    width: 100%;
    height: 100%;
    background-color: #ccc;
    background-size: cover;
    background-position: top center;
}

/* ========================================
   Portfolio View Mockup02 Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .port-view-mockup02-section {
        padding: 70px 0;
    }
    
    .port-view-mockup02-section .sec02-container {
        gap: 35px;
    }
    
    .port-view-mockup02-section .sec02-left {
        padding-left: 30px;
        padding-right: 30px;
        gap: 17px;
    }
    
    .port-view-mockup02-section .sec02-title {
        gap: 9px;
    }
    
    .port-view-mockup02-section .sec02-title .title-line {
        font-size: clamp(3.2rem, 9vw, 4.2rem);
        gap: 10px;
    }
    
    .port-view-mockup02-section .sec02-description p {
        font-size: clamp(1.5rem, 3.8vw, 1.7rem);
    }
    
    .port-view-mockup02-section .sec02-right {
        padding-left: 30px;
    }
    
    .port-view-mockup02-section .port-view-swiper {
        height: 575px;
    }
    
    .port-view-mockup02-section .port-view-swiper .swiper-slide {
        width: 280px;
        height: 480px;
    }
    
    .port-view-mockup02-section .port-view-swiper .swiper-slide.has-margin {
        margin-top: 45px;
    }
    
    .port-view-mockup02-section .mobile-device {
        border-radius: 28px;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .port-view-mockup02-section {
        padding: 100px 0;
    }
    

    .port-view-mockup02-section .sec02-left {
        flex: 1;
        padding-top: 40px;
        padding-left: 40px;
        padding-right: 40px;
        gap: 18px;
    }
    
    .port-view-mockup02-section .sec02-title .title-line {
        font-size: clamp(3.8rem, 10vw, 5rem);
        gap: 12px;
    }
    
    .port-view-mockup02-section .sec02-description p {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
    }
    
    .port-view-mockup02-section .sec02-right {
        padding-left: 0;
    }
    
    .port-view-mockup02-section .port-view-swiper {
        height: 720px;
    }
    
    .port-view-mockup02-section .port-view-swiper .swiper-slide {
        width: 300px;
        height: 550px;
    }
    
    .port-view-mockup02-section .port-view-swiper .swiper-slide.has-margin {
        margin-top: 50px;
    }
    
    .port-view-mockup02-section .mobile-device {
        border-radius: 32px;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .port-view-mockup02-section {
        padding: 130px 0;
    }
    .port-view-mockup02-section .sec02-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .port-view-mockup02-section .sec02-left {
        padding-top: 0;
        padding-right: 0;
        gap: 19px;
    }
    
    .port-view-mockup02-section .sec02-title .title-line {
        font-size: clamp(5rem, 11vw, 6rem);
        gap: 13px;
    }
    
    .port-view-mockup02-section .sec02-description p {
        font-size: clamp(1.8rem, 4.5vw, 1.9rem);
    }
    
    .port-view-mockup02-section .port-view-swiper {
        height: 680px;
    }
    
    .port-view-mockup02-section .port-view-swiper .swiper-slide {
        width: 330px;
        height: 620px;
    }
    
    .port-view-mockup02-section .port-view-swiper .swiper-slide.has-margin {
        margin-top: 55px;
    }
    
    .port-view-mockup02-section .mobile-device {
        border-radius: 36px;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .port-view-mockup02-section {
        padding: 160px 0;
    }
    
    .port-view-mockup02-section .sec02-container {
        gap: 40px;
        flex-direction: row;
    }
    
    .port-view-mockup02-section .sec02-left {
        padding-top: 60px;
        padding-left: 20px;
        padding-right: 0;
        gap: 20px;
        width: 50%;
    }
    
    .port-view-mockup02-section .sec02-title {
        gap: 10px;
    }
    
    .port-view-mockup02-section .sec02-title .title-line {
        font-size: 68px;
        line-height: 1;
        gap: 15px;
    }
    
    .port-view-mockup02-section .sec02-description p {
        font-size: 2rem;
    }
    .port-view-mockup02-section .sec02-right{
        width: 50%;
    }
    .port-view-mockup02-section .port-view-swiper {
        height: 740px;
    }
    
    .port-view-mockup02-section .port-view-swiper .swiper-slide {
        width: 360px;
        height: 680px;
    }
    
    .port-view-mockup02-section .port-view-swiper .swiper-slide.has-margin {
        margin-top: 60px;
    }
    
    .port-view-mockup02-section .mobile-device {
        border-radius: 40px;
    }
}

@media (min-width: 1430px){
    .port-view-mockup02-section .sec02-left {
        padding-top: 60px;
        padding-left: 220px;
        padding-right: 0;
        gap: 20px;
        width: 50%;
    }
    

}








/* ===========================================
   Portfolio View Page - Sec03PcFull (PC 전체 화면 및 서브페이지)
   =========================================== */

/* 모바일 기본 스타일 */
/* Section Container */
.port-view-pc-full-section.port-view-pc-full-section {
    background-color: #f9f9f9;
    padding-top: 60px;
    padding-bottom: 60px;
    position: relative;
    margin-top: -1px;
}

/* Main Container (1-column layout on mobile) */
.port-view-pc-full-section .sec03-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    align-items: flex-start;
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0 20px;
}

.port-view-pc-full-section .sec03-left {
    width: 100%;
    display: flex;
    align-items: flex-start;
} 

.port-view-pc-full-section .main-screenshot {
    width: 100%;
}

.port-view-pc-full-section .main-screenshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.port-view-pc-full-section .sec03-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 0;
}

.port-view-pc-full-section .sec03-title {
    display: flex;
    flex-direction: column;
    gap: 0px;
    text-align: left;
}

.port-view-pc-full-section .sec03-title .title-line {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 8vw, 3.6rem);
    line-height: 1.1;
    color: #000;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.port-view-pc-full-section .sec03-title .word {
    display: inline-block;
    color: #000;
    filter: blur(0);
}

.port-view-pc-full-section .sec03-title .word.blur-2 {
    filter: blur(2px);
}

.port-view-pc-full-section .sec03-title .word.blur-4 {
    filter: blur(4px);
}

.port-view-pc-full-section .sec03-title .word.highlight {
    color: #ac60ff;
    filter: blur(0);
}

.port-view-pc-full-section .sec03-description {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
}

.port-view-pc-full-section .sec03-description p {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 3.5vw, 14px);
    line-height: 1.6;
    color: #666;
    margin: 0;
}

.port-view-pc-full-section .subpage-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

.port-view-pc-full-section .grid-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.port-view-pc-full-section .grid-image {
    width: 100%;
}

.port-view-pc-full-section .grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ========================================
   Portfolio View PC Full Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .port-view-pc-full-section.port-view-pc-full-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    
    .port-view-pc-full-section .sec03-container {
        gap: 35px;
        padding: 0 30px;
    }
    
    .port-view-pc-full-section .sec03-right {
        gap: 26px;
    }
    
    .port-view-pc-full-section .sec03-title {
        gap: 9px;
    }
    
    .port-view-pc-full-section .sec03-title .title-line {
        font-size: clamp(3.2rem, 9vw, 4.2rem);
        gap: 10px;
    }
    
    .port-view-pc-full-section .sec03-description p {
        font-size: clamp(1.5rem, 3.8vw, 1.7rem);
    }
    
    .port-view-pc-full-section .grid-item {
        gap: 9px;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .port-view-pc-full-section.port-view-pc-full-section {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    
    .port-view-pc-full-section .sec03-container {
        flex-direction: row;
        gap: 30px;
        padding: 0 40px;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .port-view-pc-full-section .sec03-left {
        flex: 1;
    }
    
    .port-view-pc-full-section .sec03-right {
        flex: 1;
        gap: 30px;
        padding-top: 40px;
    }
    
    .port-view-pc-full-section .sec03-title {
        text-align: right;
    }
    
    .port-view-pc-full-section .sec03-title .title-line {
        font-size: clamp(3.8rem, 10vw, 5rem);
        gap: 12px;
        justify-content: flex-end;
    }
    
    .port-view-pc-full-section .sec03-description {
        text-align: right;
    }
    
    .port-view-pc-full-section .sec03-description p {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
    }
    
    .port-view-pc-full-section .subpage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .port-view-pc-full-section.port-view-pc-full-section {
        padding-top: 140px;
        padding-bottom: 130px;
    }
    
    .port-view-pc-full-section .sec03-container {
        gap: 35px;
        padding: 0 50px;
        max-width: 1360px;
    }
    
    .port-view-pc-full-section .sec03-right {
        gap: 35px;
        padding-top: 50px;
    }
    
    .port-view-pc-full-section .sec03-title .title-line {
        font-size: clamp(5rem, 11vw, 6rem);
        gap: 13px;
    }
    
    .port-view-pc-full-section .sec03-description p {
        font-size: clamp(1.8rem, 4.5vw, 1.9rem);
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .port-view-pc-full-section.port-view-pc-full-section {
        padding-top: 180px;
        padding-bottom: 160px;
    }
    
    .port-view-pc-full-section .sec03-container {
        gap: 40px;
        padding: 0;
        max-width: 1480px;
    }
    
    .port-view-pc-full-section .sec03-right {
        gap: 40px;
        padding-top: 60px;
    }
    
    .port-view-pc-full-section .sec03-title {
        gap: 10px;
    }
    
    .port-view-pc-full-section .sec03-title .title-line {
        font-size: 68px;
        line-height: 1;
        gap: 15px;
        justify-content: right;
    }
    
    .port-view-pc-full-section .sec03-description p {
        font-size: 2rem;
    }
    
    .port-view-pc-full-section .grid-item {
        gap: 10px;
    }
}




















/* ========================================
   Service Page - 
   ======================================== */

/* ===========================================
   Service Page - Top Section
   =========================================== */

/* 모바일 기본 스타일 */
.service-top-section {
    background-color: #000;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    box-sizing: border-box;
}

.service-top-container {
    width: 100%;
    display: flex;
    align-items: flex-end;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.service-top-flex {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.service-top-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.service-top-line {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(48px, 12vw, 8rem);
    line-height: 1.1;
    color: #fff;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 0;
    justify-content: center;
    align-items: center;
}

.service-top-line .word {
    display: inline-block;
    filter: blur(0);
}

.service-top-line .word.blur-2 {
    filter: blur(2.5px);
}

.service-top-line .word.blur-5 {
    filter: blur(5px);
}

.service-top-subtitle {
    font-family: 'Poppins', 'Noto Sans KR', sans-serif;
    font-size: clamp(14px, 3.5vw, 1.6rem);
    line-height: 1.4;
    color: #ccc;
    margin: 0;
    text-align: center;
    font-variation-settings: 'wght' 400;
}

/* ========================================
   Service Top Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .service-top-section {
        padding: 90px 0;
    }
    
    .service-top-container {
        padding-bottom: 45px;
        padding-left: 30px;
        padding-right: 30px;
    }
    
    .service-top-flex {
        gap: 17px;
    }
    
    .service-top-line {
        font-size: clamp(5rem, 13vw, 9rem);
        gap: 10px;
    }
    
    .service-top-subtitle {
        font-size: clamp(1.5rem, 3.8vw, 1.7rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .service-top-section {
        padding: 100px 0;
    }
    
    .service-top-container {
        padding-bottom: 50px;
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .service-top-flex {
        gap: 18px;
    }
    
    .service-top-line {
        font-size: clamp(7rem, 14vw, 11rem);
        gap: 12px;
    }
    
    .service-top-subtitle {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
        line-height: 1.3;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .service-top-section {
        padding: 110px 0;
    }
    
    .service-top-container {
        padding-bottom: 55px;
        padding-left: 50px;
        padding-right: 50px;
    }
    
    .service-top-flex {
        gap: 19px;
    }
    
    .service-top-line {
        font-size: clamp(10rem, 15vw, 14rem);
        gap: 13px;
    }
    
    .service-top-subtitle {
        font-size: clamp(1.8rem, 4.5vw, 1.9rem);
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .service-top-section {
        padding: 120px 0;
    }
    
    .service-top-container {
        padding-bottom: 60px;
        padding-left: 0;
        padding-right: 0;
    }
    
    .service-top-flex {
        gap: 20px;
    }
    
    .service-top-line {
        font-size: 16rem;
        line-height: 1;
        gap: 15px;
    }
    
    .service-top-subtitle {
        font-size: 2rem;
        line-height: 1.2;
    }
}








/* ========================================
   Service List Section
   ======================================== */

/* 모바일 기본 스타일 */
.service-list-section {
    background-color: #000;
    width: 100%;
    padding: 60px 0;
}

.service-list-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 40px 20px;
    gap: 24px;
}

.service-list-item:last-child {
    border-bottom: none;
}

/* 번호 스타일 */
.service-list-number {
    flex-shrink: 0;
    width: 100%;
}

.service-list-number .number {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(120px, 20vw, 12rem);
    line-height: 0.9;
    color: #222;
    display: block;
}

/* 컨텐츠 영역 */
.service-list-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 텍스트 영역 */
.service-list-text-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
}

.service-list-text-area-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    width: 100%;
}

/* 타이틀 */
.service-list-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 8vw, 4.5rem);
    line-height: 1.1;
    color: #fff;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.service-list-title .title-line {
    display: block;
    width: fit-content;
    clip-path: inset(0 100% 0 0);
}

.service-list-title .first-letter {
    color: #ddf160;
}

/* 텍스트 내용 */
.service-list-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 100%;
    width: 100%;
    text-align: right;
}

.service-list-text .text-heading {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 4vw, 18px);
    line-height: 1.4;
    color: #fff;
    margin: 0;
}

.service-list-text .text-description {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 3.5vw, 1.5rem);
    line-height: 1.6;
    color: #ccc;
    margin: 0;
}
.service-list-text .text-description br{
    display: none !important;
}
/* 키워드 태그 */
.service-list-text .text-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: right;
}

.service-list-text .keyword {
    display: inline-block;
    border: 1px solid #666;
    border-radius: 60px;
    padding: 10px 15px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: #ccc;
}

/* 이미지 영역 */
.service-list-image {
    flex-shrink: 0;
    width: 160px;
    height: auto;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-list-image .image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.service-list-image .image-placeholder video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 커스텀 (모바일에서는 적용 안 함) */
.service-list-item.service-list-item-3 .service-list-text,
.service-list-item.service-list-item-4 .service-list-text,
.service-list-item.service-list-item-5 .service-list-text {
    width: 100%;
    max-width: 100%;
}

/* 홀수/짝수 레이아웃 (모바일에서는 동일) */
.service-list-item[data-layout="odd"] .service-list-text-area-inner,
.service-list-item[data-layout="even"] .service-list-title {
    text-align: left;
    align-items: flex-end;
}
.service-list-item[data-layout="even"] .service-list-title{
    align-items: flex-start;
}

.service-list-item[data-layout="odd"] .text-keywords,
.service-list-item[data-layout="even"] .text-keywords {
    justify-content: right;
}

.service-list-item[data-layout="even"] .service-list-number,
.service-list-item[data-layout="even"] .service-list-text {
    order: 0;
}

/* ========================================
   Service List Section - 반응형
   ======================================== */
@media (min-width: 360px) {
    .service-list-text .text-description br.mob-only{
        display: block !important;
    }
}
/* 500px 이상 */
@media (min-width: 500px) {
    .service-list-section {
        padding: 70px 0;
    }
    
    .service-list-item {
        padding: 45px 30px;
        gap: 26px;
    }
    
    .service-list-number .number {
        font-size: clamp(9rem, 22vw, 14rem);
    }
    
    .service-list-content {
        gap: 26px;
    }
    
    .service-list-text-area {
        gap: 26px;
    }
    
    .service-list-title {
        font-size: clamp(3.6rem, 9vw, 5rem);
    }
    
    .service-list-text {
        gap: 17px;
    }
    
    .service-list-text .text-heading {
        font-size: clamp(1.7rem, 4.2vw, 1.9rem);
    }
    
    .service-list-text .text-description {
        font-size: clamp(1.5rem, 3.8vw, 1.6rem);
    }
    .service-list-text .text-description br{
        display: block !important;
    }
    .service-list-text .text-description br.mob-only{
        display: none !important;
    }
    .service-list-text .keyword {
        font-size: 14px;
        padding: 9px 17px;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .service-list-section {
        padding: 100px 0;
    }

    
    
    .service-list-text-area-inner {
        gap: 30px;
    }
    
    .service-list-title {
        font-size: clamp(4.5rem, 10vw, 5.8rem);
        gap: 4px;
    }
    .service-list-text .text-description br.mob-only{
        display: none;
    }
    .service-list-text .keyword {
        font-size: 15px;
        padding: 9px 18px;
    }
    
    .service-list-image {
        width: 300px;
        height: 300px;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .service-list-section {
        padding: 130px 0;
    }
    
    .service-list-item {
        flex-direction: row;
        padding: 70px 40px;
        gap: 50px;
    }
    
    .service-list-number {
        width: auto;
    }
    
    .service-list-number .number {
        font-size: clamp(18rem, 25vw, 22rem);
        line-height: 0.85;
    }
    
    .service-list-content {
        flex: 1;
        gap: 18px;
    }
    
    .service-list-text-area {
        gap: 60px;
    }
    
    .service-list-text-area-inner {
        gap: 35px;
    }
    
    .service-list-title {
        font-size: clamp(5.5rem, 11vw, 6.4rem);
        gap: 5px;
    }
    
    .service-list-text {
        gap: 19px;
        max-width: 800px;
    }
    
    .service-list-text .text-heading {
        font-size: clamp(2.1rem, 4.8vw, 2.3rem);
    }
    
    .service-list-text .text-description {
        font-size: clamp(1.7rem, 4.2vw, 1.75rem);
    }
    
    .service-list-text .keyword {
        padding: 9px 19px;
    }
    
    .service-list-image {
        width: 350px;
        height: 350px;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .service-list-section {
        padding: 160px 0;
    }
    
    .service-list-item {
        padding: 80px 40px;
        gap: 60px;
        justify-content: space-between;
    }
    
    .service-list-number .number {
        font-size: 24rem;
        line-height: 0.8;
    }
    
    .service-list-content {
        gap: 20px;
    }
    
    .service-list-text-area {
        gap: 74px;
        justify-content: space-between;
        flex-direction: row;
        align-items: flex-end;
    }
    
    .service-list-text-area-inner {
        gap: 40px;
        flex-direction: row;
        align-items: flex-end !important;
    }
    
    .service-list-title {
        font-size: 6.8rem;
    }
    
    .service-list-text {
        gap: 20px;
        max-width: 960px;
    }
    
    .service-list-text .text-heading {
        font-size: 2.4rem;
    }
    
    .service-list-text .text-description {
        font-size: 1.8rem;
    }
    
    .service-list-text .text-keywords {
        gap: 10px;
    }
    
    .service-list-text .keyword {
        padding: 10px 20px;
        font-size: 16px;
    }
    
    .service-list-image {
        width: 400px;
        height: 400px;
    }
    
    /* 커스텀 너비 복원 */
    .service-list-item.service-list-item-3 .service-list-text {
        width: 580px;
        max-width: 580px;
    }
    
    .service-list-item.service-list-item-4 .service-list-text {
        width: 730px;
        max-width: 730px;
    }
    
    .service-list-item.service-list-item-5 .service-list-text {
        width: 680px;
        max-width: 680px;
    }

    /* 홀수 레이아웃 복원 시작 */
    .service-list-item[data-layout="odd"] .service-list-text-area-inner {
        text-align: right;
        justify-content: right;
    }
    
    .service-list-item[data-layout="odd"] .text-keywords {
        justify-content: flex-end;
    }
    
    /* 짝수 레이아웃 복원 시작 */
    .service-list-item[data-layout="even"] .service-list-title {
        text-align: right;
        align-items: flex-end;
    }
    
    .service-list-item[data-layout="even"] .service-list-number {
        order: 2;
    }
    
    .service-list-item[data-layout="even"] .service-list-text {
        order: 2;
    }
}















/* ========================================
   AWARD PAGE - Awards Section
   ======================================== */

/* 모바일 기본 스타일 */
.awards-section {
    background-color: #000;
    padding: 0 15px;
    width: 100%;
    padding-top: 0;
    padding-bottom: 60px;
}

.awards-section .award-empty-message {
    padding: 60px 20px;
    text-align: center;
    color: #999;
    font-size: 1.1rem;
}

.awards-section .awards-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 60px;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Award Card */
.awards-section .award-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Image Area */
.awards-section .award-image-area {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

/* Award Mark (Badge) */
.awards-section .award-mark {
    position: absolute;
    left: 12px;
    top: 0;
    width: 54px;
    height: 68px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.awards-section .award-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* View Project Button */
.awards-section .view-project-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: calc(100% - 16px);
    max-width: 100%;
    height: 40px;
    background-color: #ddf160;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    text-decoration: none;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(1.3rem, 3.5vw, 1.4rem);
    color: #000;
    opacity: 1;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.awards-section .award-card:hover .view-project-btn,
.awards-section .award-card:active .view-project-btn {
    opacity: 1;
    transform: translateY(0);
}

.awards-section .view-project-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.awards-section .view-project-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Project Image */
.awards-section .project-image {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.awards-section .project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.awards-section .award-card:hover .project-image::before,
.awards-section .award-card:active .project-image::before {
    background: rgba(0, 0, 0, 0.5);
}

/* Text Area */
.awards-section .award-text-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.awards-section .award-text-line1,
.awards-section .award-text-line2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(1.4rem, 3.5vw, 1.5rem);
}

/* Line 1: Project Info */
.awards-section .project-name {
    font-weight: 700;
    color: #fff;
    margin: 0;
    font-size: clamp(1.4rem, 3.5vw, 1.5rem);
}

.awards-section .empty-col {
    display: none;
}

.awards-section .client-name {
    font-weight: 400;
    color: #999;
    text-align: left;
}

/* Line 2: Award Info */
.awards-section .award-text-line2 {
    font-weight: 400;
    color: #999;
}

.awards-section .award-name {
    display: block;
}

.awards-section .prize-name {
    display: block;
    text-align: left;
}

.awards-section .award-year {
    display: block;
    text-align: left;
}

/* ========================================
   AWARD PAGE - Awards Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .awards-section {
        padding: 0 30px;
        padding-bottom: 70px;
    }
    
    .awards-section .awards-container {
        gap: 70px;
    }
    
    .awards-section .award-card {
        gap: 17px;
    }
    
    .awards-section .award-image-area {
        height: 320px;
    }
    .awards-section .award-mark {
        left: 14px;
        width: 60px;
        height: 75px;
    }
    
    .awards-section .view-project-btn {
        height: 42px;
        font-size: clamp(1.35rem, 3.6vw, 1.45rem);
    }
    
    .awards-section .view-project-icon {
        width: 22px;
        height: 22px;
    }
    
    .awards-section .award-text-line1,
    .awards-section .award-text-line2 {
        font-size: clamp(1.45rem, 3.6vw, 1.55rem);
    }
    
    .awards-section .project-name {
        font-size: clamp(1.45rem, 3.6vw, 1.55rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .awards-section {
        padding: 0 40px;
        padding-bottom: 100px;
    }
    
    .awards-section .awards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 100px 16px;
    }
    
    .awards-section .award-card {
        gap: 18px;
    }
    
    .awards-section .award-image-area {
        height: 380px;
    }
    
    .awards-section .award-mark {
        left: 16px;
        width: 70px;
        height: 88px;
    }
    
    .awards-section .view-project-btn {
        height: 44px;
        font-size: clamp(1.4rem, 3.7vw, 1.5rem);
    }
    
    .awards-section .view-project-icon {
        width: 24px;
        height: 24px;
    }
    
    .awards-section .award-text-area {
        gap: 4px;
    }
    
    .awards-section .award-text-line1,
    .awards-section .award-text-line2 {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
        font-size: clamp(1.5rem, 3.8vw, 1.6rem);
    }
    
    .awards-section .project-name {
        font-size: clamp(1.5rem, 3.8vw, 1.6rem);
    }
    
    .awards-section .empty-col {
        display: block;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .awards-section {
        padding: 0 50px;
        padding-bottom: 130px;
    }
    
    .awards-section .awards-container {
        gap: 130px 18px;
    }
    
    .awards-section .award-card {
        gap: 19px;
    }
    
    .awards-section .award-image-area {
        height: 450px;
    }
    
    .awards-section .award-mark {
        left: 18px;
        width: 78px;
        height: 98px;
    }
    
    .awards-section .view-project-btn {
        height: 46px;
        max-width: 500px;
        font-size: clamp(1.5rem, 3.9vw, 1.55rem);
        opacity: 0;
    }
    
    .awards-section .award-text-line1,
    .awards-section .award-text-line2 {
        gap: 16px;
        font-size: clamp(1.6rem, 4vw, 1.7rem);
    }
    
    .awards-section .project-name {
        font-size: clamp(1.6rem, 4vw, 1.7rem);
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .awards-section {
        padding: 0 60px;
        padding-bottom: 160px;
    }
    
    .awards-section .awards-container {
        gap: 160px 20px;
    }
    
    .awards-section .award-card {
        gap: 20px;
    }
    
    .awards-section .award-image-area {
        height: 520px;
    }
    
    .awards-section .award-mark {
        left: 20px;
        width: 88px;
        height: 110px;
    }
    
    .awards-section .view-project-btn {
        right: 10px;
        bottom: 10px;
        width: calc(100% - 20px);
        max-width: 600px;
        height: 48px;
        padding: 0 20px;
        font-size: 1.6rem;
    }
    
    .awards-section .view-project-icon {
        width: 26px;
        height: 26px;
    }
    
    .awards-section .award-text-area {
        gap: 5px;
    }
    
    .awards-section .award-text-line1,
    .awards-section .award-text-line2 {
        gap: 20px;
        font-size: 1.8rem;
    }
    
    .awards-section .project-name {
        font-size: 1.8rem;
    }
}
















/* ========================================
   CERTIFICATION PAGE - Certification Section
   ======================================== */

/* 모바일 기본 스타일 */
.certification-section {
    background-color: #000;
    width: 100%;
}

/* Title Section */
.certification-section .cert-title-section {
    padding: 0 15px;
}

.certification-section .cert-title-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    gap: 30px;
}

/* 좌측: 텍스트 */
.certification-section .cert-title-text {
    width: 100%;
}

.certification-section .cert-main-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    color: #fff;
}

.certification-section .cert-title-line1 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.certification-section .cert-title-line2 {
    display: flex;
    padding-left: 0;
    flex-wrap: wrap;
}

.certification-section .cert-title-line3 {
    display: flex;
    gap: 8px;
    padding-left: 0;
    flex-wrap: wrap;
}

.certification-section .cert-word {
    color: #fff;
}

.certification-section .cert-word.text-green {
    color: #ddf160;
}

.certification-section .cert-word.blur-5 {
    filter: blur(5px);
}

.certification-section .cert-word.blur-2-5 {
    filter: blur(2.5px);
}

.certification-section .cert-subtitle {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #ccc;
    margin-top: 30px;
}

/* 우측: 3D 이미지 */
.certification-section .cert-title-image {
    flex-shrink: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 680 / 551;
}

.certification-section .cert-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.certification-section .cert-image-placeholder video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.certification-section .cert-image-placeholder::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(221, 241, 96, 0.1);
    border: 2px dashed rgba(221, 241, 96, 0.2);
    border-radius: 50%;
}

/* Grid Section */
.certification-section .cert-grid-section {
    padding: 60px 15px;
}

.certification-section .cert-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    width: 100%;
}

.certification-section .cert-box {
    min-height: 180px;
    padding: 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.certification-section .cert-box > div {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #444;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    position: relative;
}

.certification-section .cert-box:nth-child(1) > div {
    border-top: 1px solid #444;
}

.certification-section .cert-box > div::after {
    display: none;
}

.certification-section .cert-box-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.12;
    color: #ffffff;
    text-align: center;
    margin: 0;
    word-break: keep-all;
}

.certification-section .cert-logos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.certification-section .cert-logos:has(.cert-logo:nth-child(2)) {
    flex-direction: row;
    gap: 16px;
}

.certification-section .cert-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.certification-section .cert-logo img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   CERTIFICATION PAGE - Certification Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .certification-section .cert-title-section {
        padding: 0 30px;
    }
    
    .certification-section .cert-title-container {
        gap: 35px;
    }
    
    .certification-section .cert-main-title {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .certification-section .cert-title-line1,
    .certification-section .cert-title-line3 {
        gap: 10px;
    }
    
    .certification-section .cert-subtitle {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
        margin-top: 35px;
    }
    
    .certification-section .cert-image-placeholder::before {
        width: 70px;
        height: 70px;
    }
    
    .certification-section .cert-grid-section {
        padding: 70px 30px;
    }
    
    .certification-section .cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .certification-section .cert-box {
        min-height: 190px;
    }
    
    .certification-section .cert-box:nth-child(1) > div,
    .certification-section .cert-box:nth-child(2) > div {
        border-top: 1px solid #444;
    }
    
    .certification-section .cert-box:nth-child(2n) > div::after {
        display: none;
    }
    
    .certification-section .cert-box > div::after {
        content: '';
        display: block;
        position: absolute;
        right: -10px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: calc(100% - 20px);
        background-color: #444;
    }
    
    .certification-section .cert-box > div {
        gap: 17px;
    }
    
    .certification-section .cert-box-title {
        font-size: clamp(1.7rem, 4.2vw, 1.85rem);
    }
    
    .certification-section .cert-logos {
        gap: 17px;
    }
    
    .certification-section .cert-logos:has(.cert-logo:nth-child(2)) {
        gap: 17px;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .certification-section .cert-title-section {
        padding: 0 40px;
    }
    
    .certification-section .cert-title-container {
        gap: 40px;
    }
    
    .certification-section .cert-main-title {
        font-size: clamp(4.5rem, 10vw, 5.8rem);
        line-height: 1;
    }
    
    .certification-section .cert-title-line1 {
        gap: 12px;
    }
    
    .certification-section .cert-title-line2 {
        padding-left: 80px;
    }
    
    .certification-section .cert-title-line3 {
        gap: 12px;
        padding-left: 40px;
    }
    
    .certification-section .cert-subtitle {
        font-size: clamp(1.6rem, 3.8vw, 1.8rem);
        margin-top: 40px;
    }
    
    .certification-section .cert-image-placeholder::before {
        width: 80px;
        height: 80px;
    }
    
    .certification-section .cert-grid-section {
        padding: 100px 40px;
    }
    
    .certification-section .cert-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .certification-section .cert-box {
        min-height: 200px;
    }
    
    .certification-section .cert-box:nth-child(1) > div,
    .certification-section .cert-box:nth-child(2) > div,
    .certification-section .cert-box:nth-child(3) > div {
        border-top: 1px solid #444;
    }
    
    .certification-section .cert-box:nth-child(2n) > div::after {
        content: '';
        display: block;
    }
    
    .certification-section .cert-box:nth-child(3n) > div::after {
        display: none;
    }
    
    .certification-section .cert-box > div {
        gap: 18px;
    }
    
    .certification-section .cert-box-title {
        font-size: clamp(1.8rem, 4.3vw, 1.9rem);
    }
    
    .certification-section .cert-logos {
        gap: 18px;
    }
    
    .certification-section .cert-logos:has(.cert-logo:nth-child(2)) {
        gap: 18px;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .certification-section .cert-title-section {
        padding: 0 50px;
    }
    
    .certification-section .cert-title-container {
        flex-direction: row;
        align-items: center;
        gap: 50px;
    }
    
    .certification-section .cert-title-text {
        flex: 1;
    }
    
    .certification-section .cert-main-title {
        font-size: clamp(5.5rem, 11vw, 6.4rem);
    }
    
    .certification-section .cert-title-line1 {
        gap: 13px;
    }
    
    .certification-section .cert-title-line2 {
        padding-left: 200px;
    }
    
    .certification-section .cert-title-line3 {
        gap: 15px;
        padding-left: 80px;
    }
    
    .certification-section .cert-subtitle {
        font-size: clamp(1.8rem, 4vw, 1.9rem);
        margin-top: 50px;
    }
    
    .certification-section .cert-title-image {
        width: 500px;
        height: auto;
        aspect-ratio: 680 / 551;
    }
    
    .certification-section .cert-image-placeholder::before {
        width: 90px;
        height: 90px;
    }
    
    .certification-section .cert-grid-section {
        padding: 130px 50px;
    }
    
    .certification-section .cert-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .certification-section .cert-box {
        min-height: 220px;
    }
    
    .certification-section .cert-box:nth-child(1) > div,
    .certification-section .cert-box:nth-child(2) > div,
    .certification-section .cert-box:nth-child(3) > div,
    .certification-section .cert-box:nth-child(4) > div {
        border-top: 1px solid #444;
    }
    
    .certification-section .cert-box:nth-child(3n) > div::after {
        content: '';
        display: block;
    }
    
    .certification-section .cert-box:nth-child(4n) > div::after {
        display: none;
    }
    
    .certification-section .cert-box > div {
        gap: 19px;
    }
    
    .certification-section .cert-box-title {
        font-size: clamp(1.9rem, 4.5vw, 1.95rem);
    }
    
    .certification-section .cert-logos {
        gap: 19px;
    }
    
    .certification-section .cert-logos:has(.cert-logo:nth-child(2)) {
        gap: 19px;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .certification-section .cert-title-section {
        padding: 0 60px;
    }
    
    .certification-section .cert-title-container {
        gap: 60px;
        justify-content: space-between;
    }
    
    .certification-section .cert-main-title {
        font-size: 6.8rem;
        line-height: 1;
    }
    
    .certification-section .cert-title-line1 {
        gap: 15px;
    }
    
    .certification-section .cert-title-line2 {
        padding-left: 360px;
    }
    
    .certification-section .cert-title-line3 {
        gap: 20px;
        padding-left: 120px;
    }
    
    .certification-section .cert-subtitle {
        font-size: 2rem;
        margin-top: 60px;
    }
    
    .certification-section .cert-title-image {
        width: 680px;
        height: 551px;
    }
    
    .certification-section .cert-image-placeholder::before {
        width: 100px;
        height: 100px;
    }
    
    .certification-section .cert-grid-section {
        padding: 160px 60px;
    }
    
    .certification-section .cert-grid {
        grid-template-rows: repeat(3, 1fr);
    }
    
    .certification-section .cert-box {
        min-height: 240px;
    }
    
    .certification-section .cert-box > div {
        gap: 20px;
    }
    
    .certification-section .cert-box-title {
        font-size: 2rem;
    }
    
    .certification-section .cert-logos {
        gap: 20px;
    }
    
    .certification-section .cert-logos:has(.cert-logo:nth-child(2)) {
        gap: 20px;
    }
}























/* ==========================================================================
   Technical Skills Page Styles
   ========================================================================== */

/* Sec01: 메인 소개 타이틀 */

/* 모바일 기본 스타일 */
.technical-skills-section.sec01-section {
    background-color: #000000;
    padding: 60px 20px 80px 20px;
}

.technical-skills-section .sec01-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

/* 영문 메인 타이틀 */
.technical-skills-section .sec01-main-title {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.technical-skills-section .sec01-main-title .title-line {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.technical-skills-section .sec01-main-title .title-line.title-line-2,
.technical-skills-section .sec01-main-title .title-line.title-line-3 {
    padding-right: 0;
}

.technical-skills-section .sec01-main-title .title-word {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    color: #ffffff;
}

.technical-skills-section .sec01-main-title .title-word.blur-2 {
    filter: blur(2px);
}

.technical-skills-section .sec01-main-title .title-word.blur-4 {
    filter: blur(4px);
}
.technical-skills-section .sec01-main-title .title-word.text-green {
    color: #ddf160;
}

/* 한글 설명 */
.technical-skills-section .sec01-subtitle {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    align-items: flex-start;
}

.technical-skills-section .sec01-subtitle .subtitle-line {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.6;
    color: #ffffff;
    margin: 0;
    text-align: left;
}

.technical-skills-section .sec01-subtitle .text-green {
    color: #ddf160;
}

.technical-skills-section .sec01-subtitle .bold {
    font-weight: 700;
}

/* ========================================
   Technical Skills - Sec01 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .technical-skills-section.sec01-section {
        padding: 65px 30px 85px 30px;
    }
    
    .technical-skills-section .sec01-container {
        gap: 26px;
    }
    
    .technical-skills-section .sec01-main-title .title-line {
        gap: 10px;
    }
    
    .technical-skills-section .sec01-main-title .title-word {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .technical-skills-section .sec01-subtitle .subtitle-line {
        font-size: clamp(1.7rem, 4.2vw, 1.9rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .technical-skills-section.sec01-section {
        padding: 70px 40px 95px 40px;
    }
    
    .technical-skills-section .sec01-container {
        align-items: flex-end;
        gap: 32px;
    }
    
    .technical-skills-section .sec01-main-title .title-line {
        gap: 12px;
        justify-content: flex-end;
    }
    
    .technical-skills-section .sec01-main-title .title-line.title-line-2 {
        padding-right: 60px;
    }
    
    .technical-skills-section .sec01-main-title .title-line.title-line-3 {
        padding-right: 20px;
    }
    
    .technical-skills-section .sec01-main-title .title-word {
        font-size: clamp(4.5rem, 10vw, 5.8rem);
        line-height: 1;
    }
    
    .technical-skills-section .sec01-subtitle {
        align-items: flex-end;
    }
    
    .technical-skills-section .sec01-subtitle .subtitle-line {
        font-size: clamp(1.9rem, 4.5vw, 2.1rem);
        text-align: right;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .technical-skills-section.sec01-section {
        padding: 75px 50px 105px 50px;
    }
    
    .technical-skills-section .sec01-container {
        gap: 36px;
    }
    
    .technical-skills-section .sec01-main-title .title-line {
        gap: 13px;
    }
    
    .technical-skills-section .sec01-main-title .title-line.title-line-2 {
        padding-right: 100px;
    }
    
    .technical-skills-section .sec01-main-title .title-line.title-line-3 {
        padding-right: 40px;
    }
    
    .technical-skills-section .sec01-main-title .title-word {
        font-size: clamp(5.5rem, 11vw, 6.4rem);
    }
    
    .technical-skills-section .sec01-subtitle .subtitle-line {
        font-size: clamp(2.1rem, 4.8vw, 2.3rem);
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .technical-skills-section.sec01-section {
        padding: 80px 60px 120px 60px;
    }
    
    .technical-skills-section .sec01-container {
        gap: 40px;
    }
    
    .technical-skills-section .sec01-main-title .title-line {
        gap: 15px;
    }
    
    .technical-skills-section .sec01-main-title .title-line.title-line-2 {
        padding-right: 160px;
    }
    
    .technical-skills-section .sec01-main-title .title-line.title-line-3 {
        padding-right: 60px;
    }
    
    .technical-skills-section .sec01-main-title .title-word {
        font-size: 6.8rem;
    }
    
    .technical-skills-section .sec01-subtitle .subtitle-line {
        font-size: 2.4rem;
    }
}








/* Sec02: 핵심 역량 */

/* 모바일 기본 스타일 */
.technical-skills-section.sec02-section {
    background: url('/html/_img/sub/web-ai/tech_skill_sec02_bg.jpg') no-repeat center center / cover;
    position: relative;
    padding: 60px 20px;
}

.technical-skills-section .sec02-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    z-index: 3;
}

/* 상단 설명 */
.technical-skills-section .sec02-top-description {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
    align-self: flex-start;
    transition: opacity 0.3s ease;
}

.technical-skills-section .sec02-top-description .txt01 {
    padding-left: 0;
}

.technical-skills-section .sec02-top-description .text-green {
    color: #ddf160;
}

.technical-skills-section .sec02-top-description .bold {
    font-weight: 700;
}

/* 4가지 역량 항목 */
.technical-skills-section .sec02-items {
    width: 100%;
    height: auto;
    position: relative;
}

/* 개별 항목 */
.technical-skills-section .sec02-item {
    width: 100%;
    position: relative;
    transition: opacity 0.3s ease;
}

.technical-skills-section .sec02-item::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #FFF;
    transition: opacity 0.3s ease;
}

.technical-skills-section .sec02-item > button {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 0;
    width: 100%;
    justify-content: flex-start;
}

/* 왼쪽: 큰 타이틀 */
.technical-skills-section .sec02-item .item-left {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.technical-skills-section .sec02-item .item-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(4rem, 10vw, 5rem);
    line-height: 1;
    color: #ffffff;
    opacity: 0.6;
    margin: auto 0;
    position: relative;
    transition: margin 0.4s ease;
    overflow: hidden;
}

.technical-skills-section .sec02-item .item-title::after {
    content: attr(data-title);
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(100%);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(4rem, 10vw, 5rem);
    line-height: 1;
    color: #ffffff;
    opacity: 0.6;
    transition: transform 0.4s ease;
}

.technical-skills-section .sec02-item .item-title > span {
    display: block;
    transition: transform 0.4s ease;
    text-align: left;
}

/* 오른쪽: 상세 내용 */
.technical-skills-section .sec02-item .item-right {
    width: 100%;
    flex-shrink: 0;
    display: none;
    gap: 8px;
    text-align: left;
}

.technical-skills-section .sec02-item .item-subtitle {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 2.4rem);
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
}

.technical-skills-section .sec02-item .item-description {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.4;
    color: #ffffff;
    margin: 8px 0;
}

.technical-skills-section .sec02-item .item-description .text-green {
    color: #ddf160;
}

.technical-skills-section .sec02-item .item-description .bold {
    font-weight: 700;
}

/* 불릿 리스트 */
.technical-skills-section .sec02-item .item-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
}

.technical-skills-section .sec02-item .item-bullets li {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #cccccc;
    padding-left: 14px;
    position: relative;
    text-align: left;
    box-sizing: border-box;
}

.technical-skills-section .sec02-item .item-bullets li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ddf160;
}

/* ============================================================
   Sec02: Active/Inactive 상태 스타일 (모든 브레이크포인트 공통)
   ============================================================ */

/* Active 또는 Inactive 상태 공통: 상단 설명 숨김 */
.technical-skills-section .sec02-container:has(.sec02-item.active) .sec02-top-description,
.technical-skills-section .sec02-container:has(.sec02-item.inactive) .sec02-top-description {
    opacity: 0;
}

/* Active 또는 Inactive 상태 공통: item의 구분선(::after) 숨김 */
.technical-skills-section .sec02-item.active::after,
.technical-skills-section .sec02-item.inactive::after {
    opacity: 0;
}

/* Active 상태: 왼쪽 타이틀이 위로 정렬 */
.technical-skills-section .sec02-item.active .item-title {
    margin: 0;
}

/* Active 상태: 타이틀 텍스트가 위로 이동 (::after에 있는 텍스트가 보이도록) */
.technical-skills-section .sec02-item.active .item-title > span {
    transform: translateY(-100%);
}

.technical-skills-section .sec02-item.active .item-title::after {
    transform: translateY(0);
}

/* Inactive 상태: 비활성화된 아이템 (부드러운 opacity 전환) */
.technical-skills-section .sec02-item.inactive {
    opacity: 0.3;
}

/* 배경 이미지 래퍼 (모든 브레이크포인트 공통) */
.technical-skills-section .sec02-bg-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.technical-skills-section .sec02-bg-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    clip-path: inset(50% 50% 50% 50%);
    transition: clip-path 0.6s ease;
    z-index: 1;
}

.technical-skills-section .sec02-bg-img::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 11;
}

/* 이미지가 활성화될 때 (JavaScript로 .active 클래스 추가) */
.technical-skills-section .sec02-bg-img.active {
    clip-path: inset(0% 0% 0% 0%);
    z-index: 10;
}

.technical-skills-section .sec02-bg-wrap.active {
    opacity: 1;
}

/* ========================================
   Technical Skills - Sec02 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .technical-skills-section.sec02-section {
        padding: 70px 30px;
    }
    
    .technical-skills-section .sec02-container {
        gap: 26px;
    }
    
    .technical-skills-section .sec02-top-description {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .technical-skills-section .sec02-top-description .txt01 {
        padding-left: 20px;
    }
    
    .technical-skills-section .sec02-item > button {
        gap: 18px;
        padding: 22px 0;
    }
    
    .technical-skills-section .sec02-item .item-title,
    .technical-skills-section .sec02-item .item-title::after {
        font-size: clamp(4.5rem, 11vw, 5.5rem);
    }
    
    .technical-skills-section .sec02-item .item-subtitle {
        font-size: clamp(2.2rem, 5.5vw, 2.6rem);
    }
    
    .technical-skills-section .sec02-item .item-description {
        font-size: clamp(1.7rem, 4.2vw, 1.9rem);
        margin: 9px 0;
    }
    
    .technical-skills-section .sec02-item .item-bullets li {
        font-size: clamp(1.5rem, 3.7vw, 1.65rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .technical-skills-section.sec02-section {
        padding: 90px 40px;
    }
    
    .technical-skills-section .sec02-container {
        gap: 32px;
    }
    
    .technical-skills-section .sec02-top-description {
        font-size: clamp(2.4rem, 5.5vw, 2.8rem);
    }
    
    .technical-skills-section .sec02-top-description .txt01 {
        padding-left: 40px;
    }
    
    .technical-skills-section .sec02-item > button {
        flex-direction: row;
        gap: 30px;
        align-items: flex-end;
        padding: 26px 0;
        justify-content: space-between;
    }
    
    .technical-skills-section .sec02-item .item-left {
        width: auto;
    }
    
    .technical-skills-section .sec02-item .item-title,
    .technical-skills-section .sec02-item .item-title::after {
        font-size: clamp(5.5rem, 12vw, 6.8rem);
    }
    
    .technical-skills-section .sec02-item .item-right {
        width: 60%;
        gap: 9px;
        text-align: right;
    }
    
    .technical-skills-section .sec02-item .item-subtitle {
        font-size: clamp(2.4rem, 5.8vw, 2.8rem);
    }
    
    .technical-skills-section .sec02-item .item-description {
        font-size: clamp(1.8rem, 4.5vw, 2rem);
        margin: 9px 0;
    }
    
    .technical-skills-section .sec02-item .item-bullets {
        align-items: flex-end;
    }
    
    .technical-skills-section .sec02-item .item-bullets li {
        font-size: clamp(1.6rem, 4vw, 1.7rem);
        text-align: right;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .technical-skills-section.sec02-section {
        padding: 105px 50px;
    }
    
    .technical-skills-section .sec02-container {
        gap: 36px;
    }
    
    .technical-skills-section .sec02-top-description {
        font-size: clamp(2.8rem, 6vw, 3.2rem);
    }
    
    .technical-skills-section .sec02-top-description .txt01 {
        padding-left: 60px;
    }
    
    .technical-skills-section .sec02-items {
        height: 550px;
    }
    
    .technical-skills-section .sec02-item > button {
        gap: 35px;
        padding: 28px 0;
    }
    
    .technical-skills-section .sec02-item .item-title,
    .technical-skills-section .sec02-item .item-title::after {
        font-size: clamp(6.8rem, 13vw, 7.5rem);
    }
    
    .technical-skills-section .sec02-item .item-right {
        width: 700px;
        gap: 10px;
    }
    
    .technical-skills-section .sec02-item .item-subtitle {
        font-size: clamp(2.6rem, 6vw, 2.9rem);
    }
    
    .technical-skills-section .sec02-item .item-description {
        font-size: clamp(2rem, 4.8vw, 2.1rem);
        margin: 10px 0;
    }
    
    .technical-skills-section .sec02-item .item-bullets li {
        font-size: clamp(1.7rem, 4.2vw, 1.75rem);
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .technical-skills-section.sec02-section {
        padding: 120px 60px;
    }
    
    .technical-skills-section .sec02-container {
        gap: 40px;
    }
    
    .technical-skills-section .sec02-top-description {
        font-size: 3.6rem;
    }
    
    .technical-skills-section .sec02-top-description .txt01 {
        padding-left: 80px;
    }
    
    .technical-skills-section .sec02-items {
        height: 625px;
    }
    
    .technical-skills-section .sec02-item > button {
        gap: 40px;
        padding: 30px 0;
    }
    
    .technical-skills-section .sec02-item .item-title,
    .technical-skills-section .sec02-item .item-title::after {
        font-size: 8rem;
    }
    
    .technical-skills-section .sec02-item .item-right {
        width: 880px;
        gap: 10px;
    }
    
    .technical-skills-section .sec02-item .item-subtitle {
        font-size: 3rem;
    }
    
    .technical-skills-section .sec02-item .item-description {
        font-size: 2.2rem;
        margin: 10px 0;
    }
    
    .technical-skills-section .sec02-item .item-bullets li {
        font-size: 1.8rem;
    }
}
























/* Sec03: AI 웹에이전시 */
/* hero */


/* 모바일 기본 스타일 */
.technical-skills-section.sec03-section {
    background-color: #000000;
    padding: 60px 20px 80px 20px;
}

.technical-skills-section .sec03-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* 상단 타이틀 섹션 */
.technical-skills-section .sec03-top-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.technical-skills-section .sec03-title-area {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.technical-skills-section .sec03-main-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1.12;
    color: #ffffff;
    margin: 0;
}

.technical-skills-section .sec03-subtitle-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.technical-skills-section .sec03-subtitle {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
}

.technical-skills-section .sec03-subtitle .text-green {
    color: #ddf160;
}

.technical-skills-section .sec03-description {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.4;
    color: #cccccc;
    margin: 0;
}

.technical-skills-section .sec03-divider {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 2.8vw, 1.4rem);
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* 3개 카드 섹션 */
.technical-skills-section .sec03-cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 개별 카드 */
.technical-skills-section .sec03-card {
    background-color: #161616;
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 40px 24px;
}

/* 카드 아이콘 (placeholder) */
.technical-skills-section .sec03-card .card-icon {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
}

.technical-skills-section .sec03-card .icon-placeholder {
    width: 80px;
    height: 80px;
}

/* 카드 타이틀 */
.technical-skills-section .sec03-card .card-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: 18px;
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* 카드 불릿 리스트 */
.technical-skills-section .sec03-card .card-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.technical-skills-section .sec03-card .card-bullets li {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #ffffff;
    padding-left: 14px;
    position: relative;
}

.technical-skills-section .sec03-card .card-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ddf160;
}

.technical-skills-section .sec03-card .card-bullets li .bold {
    font-weight: 700;
}

.technical-skills-section .sec03-bottom-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding-top: 40px;
}

.technical-skills-section .sec03-bottom-text {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.4;
}

.technical-skills-section .sec03-bottom-text .text-green {
    color: #ddf160;
}

/* ========================================
   Technical Skills - Sec03 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .technical-skills-section.sec03-section {
        padding: 70px 30px 90px 30px;
    }
    
    .technical-skills-section .sec03-container {
        gap: 17px;
    }
    
    .technical-skills-section .sec03-top-section {
        gap: 45px;
    }
    
    .technical-skills-section .sec03-title-area {
        gap: 26px;
    }
    
    .technical-skills-section .sec03-main-title {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .technical-skills-section .sec03-subtitle {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .technical-skills-section .sec03-description {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .technical-skills-section .sec03-divider {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
        letter-spacing: 1.8px;
    }
    
    .technical-skills-section .sec03-cards {
        gap: 17px;
    }
    
    .technical-skills-section .sec03-card {
        padding: 45px 28px;
    }
    
    .technical-skills-section .sec03-card .card-icon {
        height: 90px;
    }
    
    .technical-skills-section .sec03-card .icon-placeholder {
        width: 90px;
        height: 90px;
    }
    
    .technical-skills-section .sec03-card .card-title {
        font-size: clamp(2.2rem, 5.5vw, 2.6rem);
        margin-top: 45px;
        margin-bottom: 22px;
    }
    
    .technical-skills-section .sec03-card .card-bullets li {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
        top: 11px;
    }
    
    .technical-skills-section .sec03-bottom-section {
        padding-top: 45px;
    }
    
    .technical-skills-section .sec03-bottom-text {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .technical-skills-section.sec03-section {
        padding: 90px 40px 120px 40px;
    }
    
    .technical-skills-section .sec03-container {
        gap: 18px;
    }
    
    .technical-skills-section .sec03-top-section {
        gap: 60px;
    }
    
    .technical-skills-section .sec03-title-area {
        gap: 32px;
    }
    
    .technical-skills-section .sec03-main-title {
        font-size: clamp(4.5rem, 10vw, 5.8rem);
    }
    
    .technical-skills-section .sec03-subtitle-area {
        align-items: flex-end;
    }
    
    .technical-skills-section .sec03-subtitle {
        font-size: clamp(2.4rem, 5.5vw, 2.8rem);
    }
    
    .technical-skills-section .sec03-description {
        font-size: clamp(1.6rem, 3.8vw, 1.8rem);
    }
    
    .technical-skills-section .sec03-divider {
        font-size: clamp(1.6rem, 3.8vw, 1.8rem);
        letter-spacing: 2px;
    }
    
    .technical-skills-section .sec03-cards {
        flex-direction: row;
        gap: 18px;
    }
    
    .technical-skills-section .sec03-card {
        flex: 1;
        width: auto;
        padding: 50px 30px;
    }
    
    .technical-skills-section .sec03-card .card-icon {
        height: 100px;
    }
    
    .technical-skills-section .sec03-card .icon-placeholder {
        width: 100px;
        height: 100px;
    }
    
    .technical-skills-section .sec03-card .card-title {
        font-size: clamp(2.4rem, 5.8vw, 2.7rem);
        margin-top: 50px;
        margin-bottom: 25px;
    }
    
    .technical-skills-section .sec03-card .card-bullets li {
        font-size: clamp(1.6rem, 4vw, 1.75rem);
    }
    
    .technical-skills-section .sec03-bottom-section {
        align-items: flex-end;
        text-align: right;
        padding-top: 50px;
    }
    
    .technical-skills-section .sec03-bottom-text {
        font-size: clamp(2.4rem, 5.5vw, 2.8rem);
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .technical-skills-section.sec03-section {
        padding: 105px 50px 150px 50px;
    }
    
    .technical-skills-section .sec03-container {
        gap: 19px;
    }
    
    .technical-skills-section .sec03-top-section {
        gap: 70px;
    }
    
    .technical-skills-section .sec03-title-area {
        gap: 36px;
    }
    
    .technical-skills-section .sec03-main-title {
        font-size: clamp(5.5rem, 11vw, 6.4rem);
    }
    
    .technical-skills-section .sec03-subtitle {
        font-size: clamp(2.8rem, 6vw, 3.2rem);
    }
    
    .technical-skills-section .sec03-description {
        font-size: clamp(1.8rem, 4vw, 1.9rem);
    }
    
    .technical-skills-section .sec03-divider {
        font-size: clamp(1.8rem, 4vw, 1.9rem);
        letter-spacing: 2.3px;
    }
    
    .technical-skills-section .sec03-cards {
        gap: 19px;
    }
    
    .technical-skills-section .sec03-card {
        padding: 55px 32px;
    }
    
    .technical-skills-section .sec03-card .card-icon {
        height: 110px;
    }
    
    .technical-skills-section .sec03-card .icon-placeholder {
        width: 110px;
        height: 110px;
    }
    
    .technical-skills-section .sec03-card .card-title {
        font-size: clamp(2.6rem, 6vw, 2.75rem);
        margin-top: 55px;
        margin-bottom: 27px;
    }
    
    .technical-skills-section .sec03-card .card-bullets li {
        font-size: clamp(1.7rem, 4.2vw, 1.75rem);
    }
    
    .technical-skills-section .sec03-bottom-section {
        padding-top: 55px;
    }
    
    .technical-skills-section .sec03-bottom-text {
        font-size: clamp(2.8rem, 6vw, 3.2rem);
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .technical-skills-section.sec03-section {
        padding: 120px 60px 180px 60px;
    }
    
    .technical-skills-section .sec03-container {
        gap: 20px;
    }
    
    .technical-skills-section .sec03-top-section {
        gap: 80px;
    }
    
    .technical-skills-section .sec03-title-area {
        gap: 40px;
    }
    
    .technical-skills-section .sec03-main-title {
        font-size: 6.8rem;
    }
    
    .technical-skills-section .sec03-subtitle-area {
        gap: 10px;
    }
    
    .technical-skills-section .sec03-subtitle {
        font-size: 3.6rem;
    }
    
    .technical-skills-section .sec03-description {
        font-size: 2rem;
    }
    
    .technical-skills-section .sec03-divider {
        font-size: 2rem;
        letter-spacing: 2.7px;
    }
    
    .technical-skills-section .sec03-cards {
        gap: 20px;
    }
    
    .technical-skills-section .sec03-card {
        padding: 60px 35px;
    }
    
    .technical-skills-section .sec03-card .card-icon {
        height: 120px;
    }
    
    .technical-skills-section .sec03-card .icon-placeholder {
        width: 120px;
        height: 120px;
    }
    
    .technical-skills-section .sec03-card .card-title {
        font-size: 2.8rem;
        margin-top: 60px;
        margin-bottom: 30px;
    }
    
    .technical-skills-section .sec03-card .card-bullets li {
        font-size: 1.8rem;
    }
    
    .technical-skills-section .sec03-card .card-bullets li::before {
        top: 12px;
    }
    
    .technical-skills-section .sec03-bottom-section {
        gap: 10px;
        padding-top: 60px;
    }
    
    .technical-skills-section .sec03-bottom-text {
        font-size: 3.6rem;
    }
}
















/* ========================================
   SEC04: AI Solutions
   ======================================== */

/* 모바일 기본 스타일 */
.technical-skills-section.sec04-section {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 60px;
    position: relative;
    margin-top: -1px;
}

.technical-skills-section .sec04-title-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Main Title */
.technical-skills-section .sec04-main-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1;
    color: #000000;
    margin: 0;
}

.technical-skills-section .sec04-main-title p {
    margin: 0;
    line-height: 1;
}

/* Subtitle Container */
.technical-skills-section .sec04-subtitle-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.technical-skills-section .sec04-subtitle {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1.4;
    color: #000000;
    margin: 0;
}

.technical-skills-section .sec04-subtitle .text-purple {
    color: #ac60ff;
}

.technical-skills-section .sec04-description {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.4;
    color: #444444;
    margin: 0;
}

/* Hero Image Section */
.technical-skills-section .sec04-hero {
    display: flex;
    flex-direction: column;
    height: 300px;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 0;
    position: relative;
    width: 100%;
    flex-shrink: 0;
}

.technical-skills-section .sec04-hero-image {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.technical-skills-section .sec04-hero-image .image-placeholder {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: url('/html/_img/sub/web-ai/tech_skill_sec04_bg.jpg') no-repeat center / cover;
}

/* Scrolling Text - Swiper Marquee */
.technical-skills-section .sec04-scroll-text {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.technical-skills-section .sec04-scroll-text .swiper-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Marquee CSS Animation */
@keyframes sec04MarqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.technical-skills-section .sec04-scroll-text .swiper-slide {
    width: fit-content;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
}

.technical-skills-section .sec04-scroll-text .swiper-slide::after {
    content: '';
    display: block;
    position: absolute;
    width: 28px;
    height: 27px;
    background: url('/html/_img/sub/voucher/voucher_star.svg') no-repeat center / cover;
    top: 50%;
    transform: translateY(-50%);
    right: -45px;
    animation: rotateStar 2.5s linear infinite;
}

.technical-skills-section .sec04-scroll-text p {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(6rem, 15vw, 8rem);
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Details Section */
.technical-skills-section .sec04-details-section {
    background-color: #ffffff;
    padding: 60px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.technical-skills-section .sec04-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.technical-skills-section .sec04-item-border {
    padding-top: 16px;
    border-top: 1px solid #000000;
}

.technical-skills-section .sec04-item-title {
    width: 100%;
    min-width: 0;
}

.technical-skills-section .sec04-item-title h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 2.4rem);
    line-height: 1;
    color: #000000;
    margin: 0;
}

.technical-skills-section .sec04-item-content {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.technical-skills-section .sec04-item-bullet {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.technical-skills-section .sec04-item-bullet li {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1;
    color: #000000;
    margin: 0;
    padding-left: 14px;
    position: relative;
}

.technical-skills-section .sec04-item-bullet li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ac60ff;
}

/* ========================================
   Technical Skills - Sec04 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .technical-skills-section.sec04-section {
        padding-top: 70px;
    }
    
    .technical-skills-section .sec04-title-container {
        gap: 26px;
    }
    
    .technical-skills-section .sec04-main-title {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .technical-skills-section .sec04-subtitle {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .technical-skills-section .sec04-description {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .technical-skills-section .sec04-hero {
        height: 350px;
        padding: 17px 0;
    }
    
    .technical-skills-section .sec04-scroll-text .swiper-wrapper {
        gap: 70px;
    }
    
    .technical-skills-section .sec04-scroll-text .swiper-slide::after {
        width: 32px;
        height: 31px;
        right: -52px;
    }
    
    .technical-skills-section .sec04-scroll-text p {
        font-size: clamp(7rem, 16vw, 9rem);
    }
    
    .technical-skills-section .sec04-details-section {
        padding: 70px 30px 90px;
        gap: 45px;
    }
    
    .technical-skills-section .sec04-item {
        gap: 22px;
    }
    
    .technical-skills-section .sec04-item-border {
        padding-top: 17px;
    }
    
    .technical-skills-section .sec04-item-title h3 {
        font-size: clamp(2.2rem, 5.5vw, 2.6rem);
    }
    
    .technical-skills-section .sec04-item-content {
        gap: 13px;
    }
    
    .technical-skills-section .sec04-item-bullet {
        gap: 13px;
    }
    
    .technical-skills-section .sec04-item-bullet li {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .technical-skills-section.sec04-section {
        padding-top: 100px;
    }
    
    .technical-skills-section .sec04-title-container {
        gap: 32px;
    }
    
    .technical-skills-section .sec04-main-title {
        font-size: clamp(4.5rem, 10vw, 5.8rem);
    }
    
    .technical-skills-section .sec04-subtitle-container {
        align-items: flex-end;
    }
    
    .technical-skills-section .sec04-subtitle {
        font-size: clamp(2.4rem, 5.5vw, 2.8rem);
    }
    
    .technical-skills-section .sec04-description {
        font-size: clamp(1.6rem, 3.8vw, 1.8rem);
    }
    
    .technical-skills-section .sec04-hero {
        height: 450px;
        padding: 18px 0;
    }
    
    .technical-skills-section .sec04-scroll-text .swiper-wrapper {
        gap: 90px;
    }
    
    .technical-skills-section .sec04-scroll-text .swiper-slide::after {
        width: 38px;
        height: 37px;
        right: -65px;
    }
    
    .technical-skills-section .sec04-scroll-text p {
        font-size: clamp(9rem, 17vw, 11rem);
    }
    
    .technical-skills-section .sec04-details-section {
        padding: 80px 40px 120px;
        gap: 50px;
    }
    
    .technical-skills-section .sec04-item {
        flex-direction: row;
        gap: 40px;
    }
    
    .technical-skills-section .sec04-item-border {
        padding-top: 18px;
    }
    
    .technical-skills-section .sec04-item-title {
        flex: 1;
        width: auto;
    }
    
    .technical-skills-section .sec04-item-title h3 {
        font-size: clamp(2.4rem, 5.8vw, 2.7rem);
    }
    
    .technical-skills-section .sec04-item-content {
        flex: 1;
        width: auto;
        gap: 14px;
    }
    
    .technical-skills-section .sec04-item-bullet {
        gap: 14px;
    }
    
    .technical-skills-section .sec04-item-bullet li {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .technical-skills-section.sec04-section {
        padding-top: 140px;
    }
    
    .technical-skills-section .sec04-title-container {
        gap: 36px;
    }
    
    .technical-skills-section .sec04-main-title {
        font-size: clamp(5.5rem, 11vw, 6.4rem);
    }
    
    .technical-skills-section .sec04-subtitle {
        font-size: clamp(2.8rem, 6vw, 3.2rem);
    }
    
    .technical-skills-section .sec04-description {
        font-size: clamp(1.8rem, 4vw, 1.9rem);
    }
    
    .technical-skills-section .sec04-hero {
        height: 525px;
        padding: 19px 0;
    }
    
    .technical-skills-section .sec04-scroll-text .swiper-wrapper {
        gap: 108px;
    }
    
    .technical-skills-section .sec04-scroll-text .swiper-slide::after {
        width: 43px;
        height: 42px;
        right: -77px;
    }
    
    .technical-skills-section .sec04-scroll-text p {
        font-size: clamp(11rem, 18vw, 13rem);
    }
    
    .technical-skills-section .sec04-details-section {
        padding: 80px 50px 160px;
        gap: 55px;
    }
    
    .technical-skills-section .sec04-item {
        gap: 50px;
    }
    
    .technical-skills-section .sec04-item-border {
        padding-top: 19px;
    }
    
    .technical-skills-section .sec04-item-title h3 {
        font-size: clamp(2.6rem, 6vw, 2.75rem);
    }
    
    .technical-skills-section .sec04-item-content {
        gap: 14px;
    }
    
    .technical-skills-section .sec04-item-bullet {
        gap: 14px;
    }
    
    .technical-skills-section .sec04-item-bullet li {
        font-size: clamp(1.8rem, 4.5vw, 1.9rem);
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .technical-skills-section.sec04-section {
        padding-top: 180px;
    }
    
    .technical-skills-section .sec04-title-container {
        gap: 40px;
    }
    
    .technical-skills-section .sec04-main-title {
        font-size: 6.8rem;
    }
    
    .technical-skills-section .sec04-subtitle-container {
        gap: 10px;
    }
    
    .technical-skills-section .sec04-subtitle {
        font-size: 3.6rem;
    }
    
    .technical-skills-section .sec04-description {
        font-size: 2rem;
    }
    
    .technical-skills-section .sec04-hero {
        height: 600px;
        padding: 20px 0;
    }
    
    .technical-skills-section .sec04-scroll-text .swiper-wrapper {
        gap: 128px;
    }
    
    .technical-skills-section .sec04-scroll-text .swiper-slide::after {
        width: 48px;
        height: 47px;
        right: -90px;
    }
    
    .technical-skills-section .sec04-scroll-text p {
        font-size: 14rem;
    }
    
    .technical-skills-section .sec04-details-section {
        padding: 80px 60px 200px;
        gap: 60px;
    }
    
    .technical-skills-section .sec04-item {
        gap: 60px;
    }
    
    .technical-skills-section .sec04-item-border {
        padding-top: 20px;
    }
    
    .technical-skills-section .sec04-item-title h3 {
        font-size: 2.8rem;
    }
    
    .technical-skills-section .sec04-item-content {
        gap: 15px;
    }
    
    .technical-skills-section .sec04-item-bullet {
        gap: 15px;
    }
    
    .technical-skills-section .sec04-item-bullet li {
        font-size: 2rem;
    }
}












/* ========================================
   SEC05: Performance Speed
   ======================================== */

/* 모바일 기본 스타일 */
.technical-skills-section.sec05-section {
    background-color: #ffffff;
    padding: 60px 20px 80px;
    padding-top: 0;
    position: relative;
    margin-top: -1px;
}

/* Title Section */
.technical-skills-section .sec05-title-section {
    margin-bottom: 30px;
}

.technical-skills-section .sec05-title-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.technical-skills-section .sec05-main-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1;
    color: #000000;
    margin: 0;
}
.technical-skills-section .sec05-main-title br{
    display: none;
}

.technical-skills-section .sec05-subtitle-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.technical-skills-section .sec05-subtitle {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
}

.technical-skills-section .sec05-subtitle > p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1.4;
    color: #000000;
    margin: 0;
}

.technical-skills-section .sec05-subtitle .text-purple {
    color: #ac60ff;
}

.technical-skills-section .sec05-subtitle .sec05-subtitle-text-1 {
    display: block;
    width: 100%;
}

.technical-skills-section .sec05-subtitle .sec05-subtitle-text-2 {
    display: block;
    width: 100%;
}
.technical-skills-section .sec05-subtitle .sec05-arrow-wrap {
    display: flex;
    align-items: center;
    margin: 0;
    max-width: 100%;
}
/* 화살표 Bar (늘어나는 선) */
.technical-skills-section .sec05-subtitle .sec05-arrow-bar {
    display: block;
    height: 2px;
    background-color: #000000;
    width: 100%;
}

/* 화살표 머리 */
.technical-skills-section .sec05-subtitle .sec05-arrow-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: -5px;
}

.technical-skills-section .sec05-subtitle .sec05-arrow-head svg {
    width: 20px;
    height: 20px;
    color: #000000;
    stroke: #000000;
    fill: none;
}

.technical-skills-section .sec05-description {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.4;
    color: #444444;
    margin: 0;
}

/* Cards Grid */
.technical-skills-section .sec05-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.technical-skills-section .sec05-cards-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.technical-skills-section .sec05-cards-row-1,
.technical-skills-section .sec05-cards-row-2 {
    padding-right: 0;
    padding-left: 0;
}

.technical-skills-section .sec05-card {
    flex: none;
    width: 100%;
    min-width: 0;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Card Icon */
.technical-skills-section .sec05-card-icon {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.technical-skills-section .sec05-card-icon .icon-placeholder {
    width: 100%;
    height: 100%;
}

.technical-skills-section .sec05-card-icon .icon-placeholder img {
    width: 100%;
    height: 100%;
}

/* Card Content */
.technical-skills-section .sec05-card-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.technical-skills-section .sec05-card-title-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.technical-skills-section .sec05-card-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 2.4rem);
    line-height: 1.4;
    color: #000000;
    margin: 0;
}

.technical-skills-section .sec05-card-description {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.4;
    color: #000;
    margin: 0;
}

.technical-skills-section .sec05-card-description .text-purple {
    color: #ac60ff;
}

/* Card Bullets */
.technical-skills-section .sec05-card-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.technical-skills-section .sec05-card-bullets li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    position: relative;
    padding-left: 14px;
    box-sizing: border-box;
}

.technical-skills-section .sec05-card-bullets li::before {
    content: '';
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ac60ff;
    left: 0;
    top: 10px;
}

.technical-skills-section .sec05-card-bullets li span:not(.sec05-dot) {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #000000;
    flex: 1;
}

/* ========================================
   Technical Skills - Sec05 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .technical-skills-section.sec05-section {
        padding: 70px 30px 90px;
    }
    
    .technical-skills-section .sec05-title-section {
        margin-bottom: 33px;
    }
    
    .technical-skills-section .sec05-title-container {
        gap: 26px;
    }
    
    .technical-skills-section .sec05-main-title {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    .technical-skills-section .sec05-main-title br{
        display: block;
    }
    
    .technical-skills-section .sec05-subtitle-container {
        gap: 17px;
    }
    
    .technical-skills-section .sec05-subtitle > p {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .technical-skills-section .sec05-subtitle .sec05-arrow-head svg {
        width: 21px;
        height: 21px;
    }
    
    .technical-skills-section .sec05-description {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .technical-skills-section .sec05-cards-grid {
        gap: 17px;
    }
    
    .technical-skills-section .sec05-cards-row {
        gap: 17px;
    }
    
    .technical-skills-section .sec05-card {
        padding: 45px 28px;
        gap: 45px;
    }
    
    .technical-skills-section .sec05-card-icon {
        width: 90px;
        height: 90px;
    }
    
    .technical-skills-section .sec05-card-content {
        gap: 26px;
    }
    
    .technical-skills-section .sec05-card-title {
        font-size: clamp(2.2rem, 5.5vw, 2.6rem);
    }
    
    .technical-skills-section .sec05-card-description {
        font-size: clamp(1.7rem, 4.2vw, 1.9rem);
    }
    
    .technical-skills-section .sec05-card-bullets li {
        gap: 9px;
    }
    
    .technical-skills-section .sec05-card-bullets li::before {
        top: 11px;
    }
    
    .technical-skills-section .sec05-card-bullets li span:not(.sec05-dot) {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .technical-skills-section.sec05-section {
        padding: 80px 40px 100px;
    }
    
    .technical-skills-section .sec05-title-section {
        margin-bottom: 36px;
    }
    
    .technical-skills-section .sec05-title-container {
        gap: 32px;
    }
    
    .technical-skills-section .sec05-main-title {
        font-size: clamp(4.5rem, 10vw, 5.8rem);
    }
    
    .technical-skills-section .sec05-subtitle-container {
        gap: 18px;
    }
    
    .technical-skills-section .sec05-subtitle {
        flex-direction: row;
        align-items: center;
    }
    
    .technical-skills-section .sec05-subtitle > p {
        font-size: clamp(2.4rem, 5.5vw, 2.8rem);
    }

    
    .technical-skills-section .sec05-subtitle .sec05-subtitle-text-1 {
        width: 186px;
    }
    
    .technical-skills-section .sec05-subtitle .sec05-subtitle-text-2 {
        width: 231px;
    }
    .technical-skills-section .sec05-subtitle .sec05-arrow-wrap{
        max-width: calc(100% - 196px - 241px);
    }
    
    .technical-skills-section .sec05-subtitle .sec05-arrow-head svg {
        width: 22px;
        height: 22px;
    }
    
    .technical-skills-section .sec05-description {
        font-size: clamp(1.6rem, 3.8vw, 1.8rem);
    }
    
    .technical-skills-section .sec05-cards-grid {
        gap: 18px;
    }
    
    .technical-skills-section .sec05-cards-row {
        flex-direction: row;
        gap: 18px;
    }
    
    .technical-skills-section .sec05-card {
        flex: 1;
        width: auto;
        padding: 50px 32px;
        gap: 50px;
    }
    
    .technical-skills-section .sec05-card-icon {
        width: 100px;
        height: 100px;
    }
    
    .technical-skills-section .sec05-card-content {
        gap: 28px;
    }
    
    .technical-skills-section .sec05-card-title-container {
        gap: 9px;
    }
    
    .technical-skills-section .sec05-card-title {
        font-size: clamp(2.4rem, 5.8vw, 2.7rem);
    }
    
    .technical-skills-section .sec05-card-description {
        font-size: clamp(1.8rem, 4.5vw, 2rem);
    }
    
    .technical-skills-section .sec05-card-bullets li::before {
        top: 12px;
    }
    
    .technical-skills-section .sec05-card-bullets li span:not(.sec05-dot) {
        font-size: clamp(1.6rem, 4vw, 1.75rem);
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .technical-skills-section.sec05-section {
        padding: 80px 50px 110px;
    }
    
    .technical-skills-section .sec05-title-section {
        margin-bottom: 38px;
    }
    
    .technical-skills-section .sec05-title-container {
        gap: 36px;
    }
    
    .technical-skills-section .sec05-main-title {
        font-size: clamp(5.5rem, 11vw, 6.4rem);
    }
    
    .technical-skills-section .sec05-subtitle-container {
        gap: 19px;
    }
    
    .technical-skills-section .sec05-subtitle > p {
        font-size: clamp(2.8rem, 6vw, 3.2rem);
    }
    
    .technical-skills-section .sec05-subtitle .sec05-arrow-wrap {
        margin: 0 16px;
        max-width: calc(100% - 230px);
    }
    
    .technical-skills-section .sec05-subtitle .sec05-arrow-head svg {
        width: 23px;
        height: 23px;
    }
    
    .technical-skills-section .sec05-description {
        font-size: clamp(1.8rem, 4vw, 1.9rem);
    }
    .technical-skills-section .sec05-subtitle .sec05-subtitle-text-1 {
        width: 213px;
    }
    
    .technical-skills-section .sec05-subtitle .sec05-subtitle-text-2 {
        width: 264px;
    }
    .technical-skills-section .sec05-subtitle .sec05-arrow-wrap{
        max-width: calc(100% - 243px - 294px);
    }

    .technical-skills-section .sec05-cards-grid {
        gap: 19px;
    }
    
    .technical-skills-section .sec05-cards-row {
        gap: 19px;
    }
    
    .technical-skills-section .sec05-cards-row-1 {
        padding-right: 200px;
    }
    
    .technical-skills-section .sec05-cards-row-2 {
        padding-left: 200px;
    }
    
    .technical-skills-section .sec05-card {
        padding: 55px 36px;
        gap: 55px;
    }
    
    .technical-skills-section .sec05-card-icon {
        width: 110px;
        height: 110px;
    }
    
    .technical-skills-section .sec05-card-content {
        gap: 29px;
    }
    
    .technical-skills-section .sec05-card-title {
        font-size: clamp(2.6rem, 6vw, 2.85rem);
    }
    
    .technical-skills-section .sec05-card-description {
        font-size: clamp(2rem, 4.8vw, 2.1rem);
    }
    
    .technical-skills-section .sec05-card-bullets li span:not(.sec05-dot) {
        font-size: clamp(1.7rem, 4.2vw, 1.75rem);
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .technical-skills-section.sec05-section {
        padding: 80px 60px 120px;
    }
    
    .technical-skills-section .sec05-title-section {
        margin-bottom: 40px;
    }
    
    .technical-skills-section .sec05-title-container {
        gap: 40px;
    }
    
    .technical-skills-section .sec05-main-title {
        font-size: 6.8rem;
    }
    
    .technical-skills-section .sec05-subtitle-container {
        gap: 20px;
    }
    
    .technical-skills-section .sec05-subtitle > p {
        font-size: 3.6rem;
    }
    
    .technical-skills-section .sec05-subtitle .sec05-arrow-wrap {
        margin: 0 20px;
        max-width: calc(100% - 247px - 297px - 49px);
    }
    
    .technical-skills-section .sec05-subtitle .sec05-subtitle-text-1 {
        width: 240px;
    }
    
    .technical-skills-section .sec05-subtitle .sec05-subtitle-text-2 {
        width: 297px;
    }
    
    .technical-skills-section .sec05-subtitle .sec05-arrow-head svg {
        width: 24px;
        height: 24px;
    }
    
    .technical-skills-section .sec05-description {
        font-size: 2rem;
    }
    
    .technical-skills-section .sec05-cards-grid {
        gap: 20px;
    }
    
    .technical-skills-section .sec05-cards-row {
        gap: 20px;
    }
    
    .technical-skills-section .sec05-cards-row-1 {
        padding-right: 320px;
    }
    
    .technical-skills-section .sec05-cards-row-2 {
        padding-left: 320px;
    }
    
    .technical-skills-section .sec05-card {
        padding: 60px 40px;
        gap: 60px;
        border-radius: 10px;
    }
    
    .technical-skills-section .sec05-card-icon {
        width: 120px;
        height: 120px;
    }
    
    .technical-skills-section .sec05-card-content {
        gap: 30px;
    }
    
    .technical-skills-section .sec05-card-title-container {
        gap: 10px;
    }
    
    .technical-skills-section .sec05-card-title {
        font-size: 3rem;
    }
    
    .technical-skills-section .sec05-card-description {
        font-size: 2.2rem;
    }
    
    .technical-skills-section .sec05-card-bullets li {
        gap: 10px;
    }
    
    .technical-skills-section .sec05-card-bullets li span:not(.sec05-dot) {
        font-size: 1.8rem;
    }
}















/* ========================================
   WEB & AI NEWS PAGE
   ======================================== */

/* 모바일 기본 스타일 */
.web-ai-news-section {
    background-color: #000000;
    padding: 60px 15px 80px;
    position: relative;
}

/* News Container */
.web-ai-news-section .news-container {
    max-width: 1800px;
    margin: 0 auto;
    position: relative;
}

/* Search Bar */
.web-ai-news-section .news-search-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
    margin-bottom: 40px;
    border-bottom: 1px solid #ffffff;
    padding-bottom: 8px;
}

.web-ai-news-section .news-search-input {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1;
    color: #999999;
    background: transparent;
    border: none;
    outline: none;
    flex: 1;
}

.web-ai-news-section .news-search-input::placeholder {
    color: #999999;
}

.web-ai-news-section .search-icon {
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.web-ai-news-section .search-icon img {
    width: 20px;
    height: 20px;
}

/* News List */
.web-ai-news-section .news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #444444;
    position: relative;
    z-index: 2;
}

.web-ai-news-section .news-item {
    border-bottom: 1px solid #444444;
    position: relative;
    cursor: pointer;
}

.web-ai-news-section .news-item * {
    cursor: pointer !important;
}

.web-ai-news-section .news-item:nth-child(1) {
    z-index: 6;
}

.web-ai-news-section .news-item:nth-child(2) {
    z-index: 5;
}

.web-ai-news-section .news-item:nth-child(3) {
    z-index: 4;
}

.web-ai-news-section .news-item:nth-child(4) {
    z-index: 3;
}

.web-ai-news-section .news-item:nth-child(5) {
    z-index: 2;
}

.web-ai-news-section .news-item:nth-child(6) {
    z-index: 1;
}

.web-ai-news-section .news-item a {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.web-ai-news-section .news-item a article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 40px 0px;
}

.web-ai-news-section .news-content {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.web-ai-news-section .news-title {
    font-family: 'Roboto Condensed', 'Noto Sans KR', sans-serif;
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 2.4rem);
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.web-ai-news-section .news-item:hover .news-title {
    color: #ddf160;
}

.web-ai-news-section .news-summary {
    font-family: 'Pretendard', 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #cccccc;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.web-ai-news-section .news-date {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.3rem, 3.2vw, 1.5rem);
    line-height: 1.6;
    color: #cccccc;
    flex-shrink: 0;
    width: 100%;
}

/* More Button */
.web-ai-news-section .news-more-btn {
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    margin: 40px auto 0;
    display: block;
    padding: 0;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.web-ai-news-section .news-more-btn:hover {
    transform: rotate(90deg);
}

.web-ai-news-section .news-more-btn svg {
    width: 100%;
    height: 100%;
}

/* ========================================
   Web & AI News Page - 반응형
   ======================================== */

/* 모바일: 한 줄 글자 수 비율 조정(줄바꿈·폰트 크기) */
@media (max-width: 499px) {
    .web-ai-news-section .news-container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        overflow-x: hidden;
    }
    .web-ai-news-section .news-item a article {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .web-ai-news-section .news-title {
        font-size: clamp(1.35rem, 4.5vw, 1.9rem);
    }
    .web-ai-news-section .news-summary {
        font-size: clamp(1.2rem, 3.5vw, 1.45rem);
    }
    .web-ai-news-section .news-date {
        font-size: clamp(1.15rem, 3vw, 1.35rem);
    }
}

/* 500px 이상 */
@media (min-width: 500px) {
    .web-ai-news-section {
        padding: 65px 30px 90px;
    }
    
    .web-ai-news-section .news-search-bar {
        margin-bottom: 43px;
    }
    
    .web-ai-news-section .news-search-input {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .web-ai-news-section .search-icon img {
        width: 21px;
        height: 21px;
    }
    
    .web-ai-news-section .news-item a article {
        gap: 18px;
        padding: 45px 25px;
    }
    
    .web-ai-news-section .news-content {
        gap: 9px;
    }
    
    .web-ai-news-section .news-title {
        font-size: clamp(2.2rem, 5.5vw, 2.8rem);
        line-height: 1.5;
    }
    
    .web-ai-news-section .news-summary {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .web-ai-news-section .news-date {
        font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    }
    
    .web-ai-news-section .news-more-btn {
        width: 52px;
        height: 52px;
        margin-top: 45px;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .web-ai-news-section {
        padding: 70px 40px 100px;
    }
    
    .web-ai-news-section .news-search-bar {
        width: 320px;
        margin-left: auto;
        margin-bottom: 50px;
        padding-bottom: 9px;
    }
    
    .web-ai-news-section .news-search-input {
        font-size: clamp(1.6rem, 4vw, 1.7rem);
    }
    
    .web-ai-news-section .search-icon img {
        width: 22px;
        height: 22px;
    }
    
    .web-ai-news-section .news-item a article {
        flex-direction: row;
        align-items: center;
        gap: 80px;
        padding: 60px 30px;
    }
    
    .web-ai-news-section .news-content {
        width: auto;
    }
    
    .web-ai-news-section .news-title {
        font-size: clamp(2.4rem, 6vw, 3rem);
        line-height: 1.5;
    }
    
    .web-ai-news-section .news-summary {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
    }
    
    .web-ai-news-section .news-date {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
        width: auto;
    }
    
    .web-ai-news-section .news-more-btn {
        width: 56px;
        height: 56px;
        margin-top: 50px;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .web-ai-news-section {
        padding: 75px 50px 130px;
    }
    
    .web-ai-news-section .news-search-bar {
        width: 370px;
        margin-bottom: 55px;
    }
    
    .web-ai-news-section .news-search-input {
        font-size: 1.7rem;
    }
    
    .web-ai-news-section .search-icon img {
        width: 23px;
        height: 23px;
    }
    
    .web-ai-news-section .news-item a article {
        gap: 120px;
        padding: 70px 35px;
    }
    
    .web-ai-news-section .news-title {
        font-size: clamp(3rem, 6.5vw, 3.6rem);
        line-height: 1.55;
    }
    
    .web-ai-news-section .news-summary {
        font-size: 1.9rem;
    }
    
    .web-ai-news-section .news-date {
        font-size: 1.9rem;
    }
    
    .web-ai-news-section .news-more-btn {
        width: 60px;
        height: 60px;
        margin-top: 55px;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .web-ai-news-section {
        padding: 80px 60px 160px;
    }
    
    .web-ai-news-section .news-search-bar {
        width: 420px;
        margin-bottom: 60px;
        padding-bottom: 10px;
    }
    
    .web-ai-news-section .news-search-input {
        font-size: 1.8rem;
    }
    
    .web-ai-news-section .search-icon img {
        width: 24px;
        height: 24px;
    }
    
    .web-ai-news-section .news-item {
        cursor: none;
    }
    
    .web-ai-news-section .news-item * {
        cursor: none !important;
    }
    
    .web-ai-news-section .news-item a {
        cursor: none;
    }
    
    .web-ai-news-section .news-item a article {
        gap: 160px;
        padding: 80px 40px;
    }
    
    .web-ai-news-section .news-content {
        gap: 10px;
    }
    
    .web-ai-news-section .news-title {
        font-size: 4rem;
        line-height: 1.6;
    }
    
    .web-ai-news-section .news-summary {
        font-size: 2rem;
    }
    
    .web-ai-news-section .news-date {
        font-size: 2rem;
    }
    
    .web-ai-news-section .news-more-btn {
        width: 64px;
        height: 64px;
        margin-top: 60px;
    }
}

















/* ========================================
   Voucher Page Styles (authorized-voucher.html)
   ======================================== */

/* === Sec01: Introduction Section === */

/* 모바일 기본 스타일 */
.voucher-section.sec01-introduction {
    background-color: #000;
    padding: 60px 20px;
}

.voucher-section .voucher-intro-container {
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 100%;
}

/* Top Title */
.voucher-section .voucher-intro-top-title {
    width: 100%;
}

.voucher-section .voucher-intro-top-title p {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 2.4rem);
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
    transform: translateY(100%);
    transform-origin: center bottom;
    opacity: 0;
}

.voucher-section .voucher-intro-top-title p span.txt01 {
    padding-left: 0;
    display: block;
}

/* Bottom Content: 세로 구조 (모바일) */
.voucher-section .voucher-intro-bottom-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
}

/* Left Side: 영문 설명 */
.voucher-section .voucher-intro-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
}

.voucher-section .voucher-intro-left p {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
}

/* Right Side: 한글 설명 */
.voucher-section .voucher-intro-right {
    display: flex;
    flex: none;
    width: 100%;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    text-align: left;
}

/* Main Message */
.voucher-section .voucher-intro-main-message {
    width: 100%;
}

.voucher-section .voucher-intro-main-message p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
}

.voucher-section .voucher-intro-main-message strong {
    font-weight: 800;
}

.voucher-section .voucher-intro-main-message .highlight {
    color: #ddf160;
}

/* Sub Message */
.voucher-section .voucher-intro-sub-message {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #ffffff;
    margin: 0;
    width: 100%;
}

.voucher-section .voucher-intro-sub-message strong {
    font-weight: 700;
}

/* ========================================
   Voucher Sec01: Introduction - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .voucher-section.sec01-introduction {
        padding: 65px 30px;
    }
    
    .voucher-section .voucher-intro-container {
        gap: 70px;
    }
    
    .voucher-section .voucher-intro-top-title p {
        font-size: clamp(2.2rem, 5.5vw, 2.8rem);
        line-height: 1.5;
    }
    
    .voucher-section .voucher-intro-bottom-content {
        gap: 43px;
    }
    
    .voucher-section .voucher-intro-left p {
        font-size: clamp(1.7rem, 4.2vw, 2rem);
    }
    
    .voucher-section .voucher-intro-right {
        gap: 17px;
    }
    
    .voucher-section .voucher-intro-main-message p {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .voucher-section .voucher-intro-sub-message {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .voucher-section.sec01-introduction {
        padding: 70px 40px;
    }
    
    .voucher-section .voucher-intro-container {
        gap: 90px;
    }
    
    .voucher-section .voucher-intro-top-title p {
        font-size: clamp(2.8rem, 6vw, 3.2rem);
        line-height: 1.5;
    }
    
    .voucher-section .voucher-intro-top-title p span.txt01 {
        padding-left: 120px;
    }
    
    .voucher-section .voucher-intro-bottom-content {
        flex-direction: row;
        gap: 10px;
        align-items: flex-end;
    }
    
    .voucher-section .voucher-intro-left {
        width: auto;
    }
    
    .voucher-section .voucher-intro-left p {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .voucher-section .voucher-intro-right {
        flex: 1 0 0;
        width: auto;
        align-items: flex-end;
        text-align: right;
    }
    
    .voucher-section .voucher-intro-main-message p {
        font-size: clamp(2.4rem, 5.5vw, 2.8rem);
    }
    
    .voucher-section .voucher-intro-sub-message {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .voucher-section.sec01-introduction {
        padding: 75px 50px;
    }
    
    .voucher-section .voucher-intro-container {
        gap: 105px;
    }
    
    .voucher-section .voucher-intro-top-title p {
        font-size: clamp(3.2rem, 6.5vw, 3.6rem);
        line-height: 1.55;
    }
    
    .voucher-section .voucher-intro-top-title p span.txt01 {
        padding-left: 180px;
    }
    
    .voucher-section .voucher-intro-left p {
        font-size: 2.6rem;
    }
    
    .voucher-section .voucher-intro-main-message p {
        font-size: clamp(2.8rem, 6vw, 3.2rem);
    }
    
    .voucher-section .voucher-intro-sub-message {
        font-size: 1.9rem;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .voucher-section.sec01-introduction {
        padding: 80px 60px;
    }
    
    .voucher-section .voucher-intro-container {
        gap: 120px;
    }
    
    .voucher-section .voucher-intro-top-title p {
        font-size: 4rem;
        line-height: 1.6;
    }
    
    .voucher-section .voucher-intro-top-title p span.txt01 {
        padding-left: 267px;
        display: inline;
    }
    
    .voucher-section .voucher-intro-left p {
        font-size: 2.8rem;
    }
    
    .voucher-section .voucher-intro-right {
        gap: 10px;
    }
    
    .voucher-section .voucher-intro-main-message p {
        font-size: 3.4rem;
    }
    
    .voucher-section .voucher-intro-sub-message {
        font-size: 2rem;
    }
}






/* === Sec02: 5 Key Features Section === */

/* 모바일 기본 스타일 */
.voucher-section.sec02-five-key-features {
    background-color: #000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    padding: 80px 0;
    align-items: flex-start;
    justify-content: center;
    isolation: isolate;
}

/* 5개 카드 가로 스크롤 컨테이너 - Swiper 구조 */
.voucher-section .voucher-cards-swiper {
    width: 100%;
    position: relative;
    z-index: 3;
    isolation: isolate;
    overflow: visible;
}

.voucher-section .voucher-cards-swiper .swiper-wrapper {
    display: flex;
    align-items: center;
}

/* 공통 카드 스타일 - swiper-slide */
.voucher-section .voucher-card {
    display: flex;
    align-items: center;
    width: 280px;
    flex-shrink: 0;
    position: relative;
    isolation: isolate;
}

/* 카드별 z-index 및 vertical offset */
.voucher-section .voucher-card-1 {
    padding-bottom: 120px;
    z-index: 5;
}

.voucher-section .voucher-card-2 {
    padding-top: 80px;
    z-index: 4;
}

.voucher-section .voucher-card-3 {
    z-index: 3;
    padding-bottom: 0;
    padding-top: 0;
}

.voucher-section .voucher-card-4 {
    padding-bottom: 80px;
    z-index: 2;
}

.voucher-section .voucher-card-5 {
    padding-top: 100px;
    z-index: 1;
}

/* 카드 내부 */
.voucher-section .voucher-card-inner {
    background-color: #121212;
    flex: 1 0 0;
    min-height: 1px;
    min-width: 1px;
    position: relative;
    z-index: 1;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 영문 타이틀 */
.voucher-section .voucher-card-title-en {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 6vw, 3rem);
    line-height: 1;
    color: #ffffff;
    margin: 0;
    word-break: keep-all;
}

/* 카드 콘텐츠 */
.voucher-section .voucher-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* 한글 타이틀 */
.voucher-section .voucher-card-title-ko {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
}

.voucher-section .voucher-card-title-ko .highlight {
    color: #ddf160;
}

/* Bullet 리스트 */
.voucher-section .voucher-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.voucher-section .voucher-card-list li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

/* Dot */
.voucher-section .voucher-dot {
    width: 4px;
    height: 4px;
    background-color: #ddf160;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 10px;
}

.voucher-section .voucher-card-list p {
    flex: 1 0 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #cccccc;
    margin: 0;
}

.voucher-section .voucher-card-list strong {
    font-weight: 700;
    color: #ffffff;
}

/* Background Title: Voucher */
.voucher-section .voucher-bg-title {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    z-index: 2;
    isolation: isolate;
    width: 100%;
}

.voucher-section .voucher-bg-title p {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: 9rem;
    line-height: 1;
    color: #232323;
    text-align: center;
    margin: 0;
    position: relative;
    z-index: 1;
    /* 보라색 gradient가 텍스트에 클리핑되도록 설정 */
    background: linear-gradient(to right, #ac60ff 0%, #ac60ff 0%, #232323 0%, #232323 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100% 100%;
    /* transition은 JavaScript에서 처리 */
}

/* Background Mask (이제 사용 안 함 - display none) */
.voucher-section .voucher-bg-mask {
    display: none;
}

/* ========================================
   Voucher Sec02: 5 Key Features - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .voucher-section.sec02-five-key-features {
        padding: 90px 0;
    }
    
    .voucher-section .voucher-card {
        width: 320px;
    }
    
    .voucher-section .voucher-card-1 {
        padding-bottom: 140px;
    }
    
    .voucher-section .voucher-card-2 {
        padding-top: 95px;
    }
    
    .voucher-section .voucher-card-4 {
        padding-bottom: 95px;
    }
    
    .voucher-section .voucher-card-5 {
        padding-top: 120px;
    }
    
    .voucher-section .voucher-card-inner {
        padding: 43px 28px;
        gap: 26px;
    }
    
    .voucher-section .voucher-card-title-en {
        font-size: clamp(2.6rem, 6.5vw, 3.4rem);
    }
    
    .voucher-section .voucher-card-content {
        gap: 9px;
    }
    
    .voucher-section .voucher-card-title-ko {
        font-size: clamp(1.7rem, 4.2vw, 2rem);
    }
    
    .voucher-section .voucher-card-list {
        gap: 9px;
    }
    
    .voucher-section .voucher-card-list li {
        gap: 9px;
    }
    
    .voucher-section .voucher-dot {
        margin-top: 11px;
    }
    
    .voucher-section .voucher-card-list p {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .voucher-section .voucher-bg-title p {
        font-size: 16rem;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .voucher-section.sec02-five-key-features {
        padding: 120px 0;
    }
    
    .voucher-section .voucher-card {
        width: 450px;
    }
    
    .voucher-section .voucher-card-1 {
        padding-bottom: 200px;
    }
    
    .voucher-section .voucher-card-2 {
        padding-top: 140px;
    }
    
    .voucher-section .voucher-card-4 {
        padding-bottom: 140px;
    }
    
    .voucher-section .voucher-card-5 {
        padding-top: 180px;
    }
    
    .voucher-section .voucher-card-inner {
        padding: 50px 36px;
        gap: 28px;
    }
    
    .voucher-section .voucher-card-title-en {
        font-size: clamp(3.2rem, 7vw, 4rem);
    }
    
    .voucher-section .voucher-card-title-ko {
        font-size: clamp(2rem, 5vw, 2.2rem);
    }
    
    .voucher-section .voucher-card-list p {
        font-size: clamp(1.6rem, 4vw, 1.75rem);
    }
    .voucher-section .voucher-bg-title {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: center;
        z-index: 2;
        isolation: isolate;
    }
    .voucher-section .voucher-bg-title p {
        font-size: 28rem;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .voucher-section.sec02-five-key-features {
        padding: 148px 0;
    }
    
    .voucher-section .voucher-card {
        width: 560px;
    }
    
    .voucher-section .voucher-card-1 {
        padding-bottom: 280px;
    }
    
    .voucher-section .voucher-card-2 {
        padding-top: 190px;
    }
    
    .voucher-section .voucher-card-4 {
        padding-bottom: 190px;
    }
    
    .voucher-section .voucher-card-5 {
        padding-top: 250px;
    }
    
    .voucher-section .voucher-card-inner {
        padding: 55px 43px;
        gap: 29px;
    }
    
    .voucher-section .voucher-card-title-en {
        font-size: clamp(4rem, 7.5vw, 4.5rem);
    }
    
    .voucher-section .voucher-card-content {
        gap: 10px;
    }
    
    .voucher-section .voucher-card-title-ko {
        font-size: 2.3rem;
    }
    
    .voucher-section .voucher-card-list {
        gap: 10px;
    }
    
    .voucher-section .voucher-card-list li {
        gap: 10px;
    }
    
    .voucher-section .voucher-card-list p {
        font-size: 1.75rem;
    }
    
    .voucher-section .voucher-bg-title p {
        font-size: 38rem;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .voucher-section.sec02-five-key-features {
        padding: 176px 60px;
    }
    
    .voucher-section .voucher-card {
        width: 640px;
    }
    
    .voucher-section .voucher-card-1 {
        padding-bottom: 360px;
    }
    
    .voucher-section .voucher-card-2 {
        padding-top: 240px;
    }
    
    .voucher-section .voucher-card-3 {
        padding-bottom: 0;
        padding-top: 0;
    }
    
    .voucher-section .voucher-card-4 {
        padding-bottom: 240px;
    }
    
    .voucher-section .voucher-card-5 {
        padding-top: 320px;
    }
    
    .voucher-section .voucher-card-inner {
        padding: 60px 50px;
        gap: 30px;
    }
    
    .voucher-section .voucher-card-title-en {
        font-size: 4.8rem;
    }
    
    .voucher-section .voucher-card-content {
        gap: 10px;
    }
    
    .voucher-section .voucher-card-title-ko {
        font-size: 2.4rem;
    }
    
    .voucher-section .voucher-card-list {
        gap: 10px;
    }
    
    .voucher-section .voucher-card-list li {
        gap: 10px;
    }
    
    .voucher-section .voucher-dot {
        margin-top: 12px;
    }
    
    .voucher-section .voucher-card-list p {
        font-size: 1.8rem;
    }
    
    .voucher-section .voucher-bg-title p {
        font-size: 48rem;
    }
}
















/* === Sec03: All-in-One Service Section === */

/* 모바일 기본 스타일 */
.voucher-section.sec03-all-in-one-service {
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 80px;
}

.voucher-section .voucher-service-container {
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 100%;
    max-width: 1800px;
}

/* Top Section: 타이틀 + 설명 */
.voucher-section .voucher-service-top {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

/* 영문 타이틀 */
.voucher-section .voucher-service-title-en {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1.1;
    color: #ffffff;
}

/* Service Title Line Padding - PC only */
@media screen and (min-width: 1025px) {
    .voucher-section .voucher-service-title-line:nth-child(2) {
        padding-left: 120px;
    }
    
    .voucher-section .voucher-service-title-line:nth-child(3) {
        padding-left: 60px;
    }
}

.voucher-section .voucher-service-title-line {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.voucher-section .voucher-service-title-line p {
    margin: 0;
}

.voucher-section .voucher-service-title-line .blur-2 {
    filter: blur(2px);
}

.voucher-section .voucher-service-title-line .blur-4 {
    filter: blur(4px);
}

/* 한글 설명 */
.voucher-section .voucher-service-description {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

.voucher-section .voucher-service-main-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 2.4rem);
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
}

.voucher-section .voucher-service-main-text .highlight {
    color: #ddf160;
}

.voucher-section .voucher-service-sub-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #cccccc;
    white-space: normal;
}

.voucher-section .voucher-service-sub-text p {
    margin: 0;
}

.voucher-section .voucher-service-sub-text strong {
    font-weight: 700;
    color: #ffffff;
}

/* Service Cards List */
.voucher-section .voucher-service-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

/* Service Row */
.voucher-section .voucher-service-row {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
}

.voucher-section .voucher-service-row-center {
    justify-content: flex-start;
}

/* Service Card */
.voucher-section .voucher-service-card {
    display: flex;
    flex: none;
    width: 100%;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    min-height: 1px;
    min-width: 1px;
}

.voucher-section .voucher-service-card-large {
    flex: none;
    width: 100%;
    max-width: 100%;
}

.voucher-section .voucher-service-card-medium {
    flex: none;
    width: 100%;
    max-width: 100%;
}

/* Service Card Image */
.voucher-section .voucher-service-image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    width: 100%;
    flex-shrink: 0;
    position: relative;
}

.voucher-section .voucher-service-image .image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    position: relative;
}

.voucher-section .voucher-service-image .image-placeholder img {
    position: relative;
    /* transform은 GSAP로 제어 */
    will-change: transform; /* 성능 최적화 */
}

/* Service Image Height - PC only (모바일은 auto) */
@media screen and (min-width: 1025px) {
    /* Row 1 - Card 1: Website creation (580px) */
    .voucher-section .voucher-service-row:nth-child(1) .voucher-service-card:nth-child(1) .voucher-service-image {
        height: 580px;
    }
    
    /* Row 1 - Card 2: Catalogs/Brochures (380px) */
    .voucher-section .voucher-service-row:nth-child(1) .voucher-service-card:nth-child(2) .voucher-service-image {
        height: 380px;
    }
    
    /* Row 2 - Card 3: Marketing (380px) */
    .voucher-section .voucher-service-row:nth-child(2) .voucher-service-card-large .voucher-service-image {
        height: 380px;
    }
    
    /* Row 2 - Card 4: Video/Motion content (580px) */
    .voucher-section .voucher-service-row:nth-child(2) .voucher-service-card-medium .voucher-service-image {
        height: 580px;
    }
}




/* Service Card Content */
.voucher-section .voucher-service-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    flex-shrink: 0;
}

/* 영문 타이틀 */
.voucher-section .voucher-service-card-title-en {
    flex: 1 0 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 6vw, 3rem);
    line-height: 1;
    color: #ffffff;
    margin: 0;
}

/* Card Text */
.voucher-section .voucher-service-card-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
}

/* 한글 타이틀 */
.voucher-section .voucher-service-card-title-ko {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
    width: 100%;
}

/* 카드 설명 */
.voucher-section .voucher-service-card-description {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.voucher-section .voucher-service-card-description p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #cccccc;
    margin: 0;
}

/* ========================================
   Voucher Sec03: All-in-One Service - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .voucher-section.sec03-all-in-one-service {
        padding: 65px 30px 90px;
    }
    
    .voucher-section .voucher-service-container {
        gap: 70px;
    }
    
    .voucher-section .voucher-service-top {
        gap: 33px;
    }
    
    .voucher-section .voucher-service-title-en {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .voucher-section .voucher-service-title-line {
        gap: 10px;
    }
    
    .voucher-section .voucher-service-description {
        gap: 13px;
    }
    
    .voucher-section .voucher-service-main-text {
        font-size: clamp(2.2rem, 5.5vw, 2.8rem);
    }
    
    .voucher-section .voucher-service-sub-text {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .voucher-section .voucher-service-list {
        gap: 43px;
    }
    
    .voucher-section .voucher-service-row {
        gap: 43px;
    }
    
    .voucher-section .voucher-service-card {
        gap: 26px;
    }
    
    .voucher-section .voucher-service-card-content {
        gap: 17px;
    }
    
    .voucher-section .voucher-service-card-title-en {
        font-size: clamp(2.6rem, 6.5vw, 3.4rem);
    }
    
    .voucher-section .voucher-service-card-text {
        gap: 9px;
    }
    
    .voucher-section .voucher-service-card-title-ko {
        font-size: clamp(1.7rem, 4.2vw, 2rem);
    }
    
    .voucher-section .voucher-service-card-description p {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .voucher-section.sec03-all-in-one-service {
        padding: 70px 40px 110px;
    }
    
    .voucher-section .voucher-service-container {
        gap: 90px;
    }
    
    .voucher-section .voucher-service-top {
        gap: 36px;
    }
    
    .voucher-section .voucher-service-title-en {
        font-size: clamp(5rem, 10vw, 6.8rem);
    }
    
    .voucher-section .voucher-service-title-line {
        gap: 12px;
    }
    
    .voucher-section .voucher-service-description {
        align-items: flex-end;
        text-align: right;
    }
    
    .voucher-section .voucher-service-main-text {
        font-size: clamp(2.8rem, 6vw, 3.4rem);
        line-height: 1.5;
    }
    
    .voucher-section .voucher-service-sub-text {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
        white-space: nowrap;
    }
    
    .voucher-section .voucher-service-list {
        gap: 60px;
    }
    
    .voucher-section .voucher-service-row {
        flex-direction: row;
        gap: 30px;
    }
    
    .voucher-section .voucher-service-row-center {
        justify-content: center;
    }
    
    .voucher-section .voucher-service-card {
        flex: 1 0 0;
        width: auto;
        gap: 30px;
    }
    
    .voucher-section .voucher-service-card-large {
        flex: 1 0 0;
        max-width: 600px;
    }
    
    .voucher-section .voucher-service-card-medium {
        flex: 1 0 0;
        max-width: 480px;
        width: 480px;
    }
    
    .voucher-section .voucher-service-card-content {
        gap: 18px;
    }
    
    .voucher-section .voucher-service-card-title-en {
        font-size: clamp(2.8rem, 6.5vw, 3.4rem);
    }
    
    .voucher-section .voucher-service-card-title-ko {
        font-size: 1.85rem;
    }
    
    .voucher-section .voucher-service-card-description p {
        font-size: 1.65rem;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .voucher-section.sec03-all-in-one-service {
        padding: 75px 50px 135px;
    }
    
    .voucher-section .voucher-service-container {
        gap: 105px;
    }
    
    .voucher-section .voucher-service-top {
        gap: 38px;
    }
    
    .voucher-section .voucher-service-title-en {
        font-size: clamp(6rem, 11vw, 7.5rem);
        line-height: 1;
    }
    
    .voucher-section .voucher-service-title-line {
        gap: 13px;
    }
    
    .voucher-section .voucher-service-main-text {
        font-size: clamp(3.2rem, 6.5vw, 3.7rem);
        line-height: 1.55;
    }
    
    .voucher-section .voucher-service-sub-text {
        font-size: 1.9rem;
    }
    
    .voucher-section .voucher-service-list {
        gap: 70px;
    }
    
    .voucher-section .voucher-service-row {
        gap: 35px;
    }
    
    .voucher-section .voucher-service-card {
        gap: 35px;
    }
    
    .voucher-section .voucher-service-card-large {
        max-width: 740px;
    }
    
    .voucher-section .voucher-service-card-medium {
        max-width: 580px;
        width: 580px;
    }
    
    .voucher-section .voucher-service-card-content {
        gap: 19px;
    }
    
    .voucher-section .voucher-service-card-title-en {
        font-size: clamp(3.4rem, 7vw, 3.8rem);
    }
    
    .voucher-section .voucher-service-card-text {
        gap: 10px;
    }
    
    .voucher-section .voucher-service-card-title-ko {
        font-size: 1.9rem;
    }
    
    .voucher-section .voucher-service-card-description p {
        font-size: 1.75rem;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .voucher-section.sec03-all-in-one-service {
        padding: 80px 60px 160px;
    }
    
    .voucher-section .voucher-service-container {
        gap: 120px;
    }
    
    .voucher-section .voucher-service-top {
        gap: 40px;
    }
    
    .voucher-section .voucher-service-title-en {
        font-size: 8rem;
    }
    
    .voucher-section .voucher-service-title-line {
        gap: 15px;
        flex-wrap: nowrap;
    }
    
    .voucher-section .voucher-service-description {
        gap: 10px;
    }
    
    .voucher-section .voucher-service-main-text {
        font-size: 4rem;
        line-height: 1.6;
    }
    
    .voucher-section .voucher-service-sub-text {
        font-size: 2rem;
    }
    
    .voucher-section .voucher-service-list {
        gap: 80px;
    }
    
    .voucher-section .voucher-service-row {
        gap: 40px;
    }
    
    .voucher-section .voucher-service-card {
        gap: 40px;
    }
    
    .voucher-section .voucher-service-card-large {
        max-width: 880px;
    }
    
    .voucher-section .voucher-service-card-medium {
        max-width: 680px;
        width: 680px;
    }
    
    .voucher-section .voucher-service-card-content {
        gap: 20px;
    }
    
    .voucher-section .voucher-service-card-title-en {
        font-size: 4rem;
    }
    
    .voucher-section .voucher-service-card-text {
        gap: 10px;
    }
    
    .voucher-section .voucher-service-card-title-ko {
        font-size: 2rem;
    }
    
    .voucher-section .voucher-service-card-description p {
        font-size: 1.8rem;
    }
}

















/* === Sec04: Multiple Fields, One Place Section === */

/* 모바일 기본 스타일 */
.voucher-section.sec04-multiple-fields {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    padding: 80px 0 80px;
    position: relative;
    margin-top: -1px;
}

/* Top Section */
.voucher-section .voucher-multiple-top {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

/* Title Section */
.voucher-section .voucher-multiple-title {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding: 0 15px;
    width: 100%;
}

.voucher-section .voucher-multiple-title-en {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1.1;
    color: #000000;
    margin: 0;
    min-width: min-content;
    width: 100%;
}

.voucher-section .voucher-multiple-title-ko {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1.4;
    color: #000000;
    margin: 0;
}

.voucher-section .voucher-multiple-title-ko .highlight {
    color: #ac60ff;
}

/* Hero Image Section */
.voucher-section .voucher-multiple-hero {
    display: flex;
    flex-direction: column;
    height: 300px;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 0;
    position: relative;
    width: 100%;
    flex-shrink: 0;
}

.voucher-section .voucher-multiple-hero-image {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.voucher-section .voucher-multiple-hero-image .image-placeholder {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: url('/html/_img/sub/voucher/voucher_sec04_bg.jpg') no-repeat center / cover;
}

/* Scrolling Text - Swiper Marquee */
.voucher-section .voucher-multiple-scroll-text {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.voucher-section .voucher-multiple-scroll-text .swiper-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Marquee CSS Animation */
@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.voucher-section .voucher-multiple-scroll-text .swiper-slide {
    width: fit-content;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
}

.voucher-section .voucher-multiple-scroll-text .swiper-slide::after {
    content: '';
    display: block;
    position: absolute;
    width: 28px;
    height: 27px;
    background: url('/html/_img/sub/voucher/voucher_star.svg') no-repeat center / cover;
    top: 50%;
    transform: translateY(-50%);
    right: -45px;
    animation: rotateStar 2.5s linear infinite;
}

/* Keyframe Animation for cert-logo star */
@keyframes rotateStar {
    0% {
        transform: translateY(-50%) rotate(0deg) scale(1);
    }
    10% {
        /* 180도 회전하면서 커짐 */
        transform: translateY(-50%) rotate(180deg) scale(1.3);
    }
    20% {
        /* 360도 회전하면서 다시 원래 크기로 */
        transform: translateY(-50%) rotate(360deg) scale(1);
    }
    100% {
        /* 나머지 시간 대기 (360도 유지) */
        transform: translateY(-50%) rotate(360deg) scale(1);
    }
}

.voucher-section .voucher-multiple-scroll-text p {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(6rem, 15vw, 8rem);
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.voucher-section .voucher-multiple-scroll-text svg {
    width: 28px;
    height: 27px;
    flex-shrink: 0;
}

/* Content Section */
.voucher-section .voucher-multiple-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    padding: 0 15px;
    width: 100%;
    flex-shrink: 0;
}

/* Benefit Item */
.voucher-section .voucher-multiple-benefit {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
    position: relative;
}

.voucher-section .voucher-multiple-benefit-border {
    padding-top: 16px;
}

.voucher-section .voucher-multiple-benefit-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #000000;
    pointer-events: none;
}

/* Benefit Left */
.voucher-section .voucher-benefit-left {
    display: flex;
    flex: none;
    width: 100%;
    align-items: flex-start;
    min-height: 1px;
    min-width: 1px;
}

.voucher-section .voucher-benefit-title-en {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1;
    color: #000000;
    margin: 0;
    flex-shrink: 0;
}

/* Benefit Right */
.voucher-section .voucher-benefit-right {
    display: flex;
    flex: none;
    width: 100%;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    min-height: 1px;
    min-width: 1px;
}

.voucher-section .voucher-benefit-title-ko {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.2;
    color: #000000;
    margin: 0;
    flex-shrink: 0;
}

.voucher-section .voucher-benefit-description {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #444444;
    margin: 0;
    height: auto;
    width: 100%;
    flex-shrink: 0;
}

/* ========================================
   Voucher Sec04: Multiple Fields - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .voucher-section.sec04-multiple-fields {
        gap: 43px;
        padding: 90px 0 90px;
    }
    
    .voucher-section .voucher-multiple-top {
        gap: 43px;
    }
    
    .voucher-section .voucher-multiple-title {
        gap: 17px;
        padding: 0 30px;
    }
    
    .voucher-section .voucher-multiple-title-en {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .voucher-section .voucher-multiple-title-ko {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .voucher-section .voucher-multiple-hero {
        height: 350px;
    }
    
    .voucher-section .voucher-multiple-scroll-text .swiper-wrapper {
        gap: 70px;
    }
    
    .voucher-section .voucher-multiple-scroll-text .swiper-slide::after {
        width: 32px;
        height: 31px;
        right: -50px;
    }
    
    .voucher-section .voucher-multiple-scroll-text p {
        font-size: clamp(7rem, 16vw, 9rem);
    }
    
    .voucher-section .voucher-multiple-scroll-text svg {
        width: 32px;
        height: 31px;
    }
    
    .voucher-section .voucher-multiple-content {
        gap: 43px;
        padding: 0 30px;
    }
    
    .voucher-section .voucher-multiple-benefit {
        gap: 23px;
    }
    
    .voucher-section .voucher-benefit-title-en {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .voucher-section .voucher-benefit-right {
        gap: 9px;
    }
    
    .voucher-section .voucher-benefit-title-ko {
        font-size: clamp(1.7rem, 4.2vw, 2rem);
    }
    
    .voucher-section .voucher-benefit-description {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .voucher-section.sec04-multiple-fields {
        gap: 60px;
        padding: 120px 0 110px;
    }
    
    .voucher-section .voucher-multiple-top {
        gap: 50px;
    }
    
    .voucher-section .voucher-multiple-title {
        gap: 18px;
        padding: 0 40px;
    }
    
    .voucher-section .voucher-multiple-title-en {
        font-size: clamp(5rem, 10vw, 6rem);
    }
    
    .voucher-section .voucher-multiple-title-ko {
        font-size: clamp(2.4rem, 5.5vw, 2.8rem);
    }
    
    .voucher-section .voucher-multiple-hero {
        height: 450px;
        padding: 18px 0;
    }
    
    .voucher-section .voucher-multiple-scroll-text .swiper-wrapper {
        gap: 96px;
    }
    
    .voucher-section .voucher-multiple-scroll-text .swiper-slide::after {
        width: 38px;
        height: 37px;
        right: -68px;
    }
    
    .voucher-section .voucher-multiple-scroll-text p {
        font-size: clamp(10rem, 18vw, 12rem);
    }
    
    .voucher-section .voucher-multiple-scroll-text svg {
        width: 38px;
        height: 37px;
    }
    
    .voucher-section .voucher-multiple-content {
        gap: 50px;
        padding: 0 40px;
    }
    
    .voucher-section .voucher-multiple-benefit {
        flex-direction: row;
        gap: 40px;
    }
    
    .voucher-section .voucher-benefit-left {
        flex: 1 0 0;
        width: auto;
    }
    
    .voucher-section .voucher-benefit-title-en {
        font-size: 2.3rem;
    }
    
    .voucher-section .voucher-benefit-right {
        flex: 1 0 0;
        width: auto;
    }
    
    .voucher-section .voucher-benefit-title-ko {
        font-size: 2rem;
    }
    
    .voucher-section .voucher-benefit-description {
        font-size: 1.7rem;
        width: auto;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .voucher-section.sec04-multiple-fields {
        gap: 70px;
        padding: 150px 0 135px;
    }
    
    .voucher-section .voucher-multiple-top {
        gap: 55px;
    }
    
    .voucher-section .voucher-multiple-title {
        gap: 19px;
        padding: 0 50px;
    }
    
    .voucher-section .voucher-multiple-title-en {
        font-size: clamp(6rem, 11vw, 6.5rem);
    }
    
    .voucher-section .voucher-multiple-title-ko {
        font-size: clamp(3rem, 6vw, 3.3rem);
    }
    
    .voucher-section .voucher-multiple-hero {
        height: 525px;
        padding: 19px 0;
    }
    
    .voucher-section .voucher-multiple-scroll-text .swiper-wrapper {
        gap: 112px;
    }
    
    .voucher-section .voucher-multiple-scroll-text .swiper-slide::after {
        width: 43px;
        height: 42px;
        right: -79px;
    }
    
    .voucher-section .voucher-multiple-scroll-text p {
        font-size: clamp(12rem, 20vw, 13rem);
    }
    
    .voucher-section .voucher-multiple-scroll-text svg {
        width: 43px;
        height: 42px;
    }
    
    .voucher-section .voucher-multiple-content {
        gap: 55px;
        padding: 0 50px;
    }
    
    .voucher-section .voucher-multiple-benefit {
        gap: 50px;
    }
    
    .voucher-section .voucher-benefit-title-en {
        font-size: 2.6rem;
    }
    
    .voucher-section .voucher-benefit-title-ko {
        font-size: 2.3rem;
    }
    
    .voucher-section .voucher-benefit-description {
        font-size: 1.9rem;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .voucher-section.sec04-multiple-fields {
        gap: 80px;
        padding: 180px 0 160px;
    }
    
    .voucher-section .voucher-multiple-top {
        gap: 60px;
    }
    
    .voucher-section .voucher-multiple-title {
        gap: 20px;
        padding: 0 60px;
    }
    
    .voucher-section .voucher-multiple-title-en {
        font-size: 6.8rem;
    }
    
    .voucher-section .voucher-multiple-title-ko {
        font-size: 3.6rem;
    }
    
    .voucher-section .voucher-multiple-hero {
        height: 600px;
        padding: 20px 0;
    }
    
    .voucher-section .voucher-multiple-scroll-text .swiper-wrapper {
        gap: 128px;
    }
    
    .voucher-section .voucher-multiple-scroll-text .swiper-slide::after {
        width: 48px;
        height: 47px;
        right: -90px;
    }
    
    .voucher-section .voucher-multiple-scroll-text p {
        font-size: 14rem;
    }
    
    .voucher-section .voucher-multiple-scroll-text svg {
        width: 48px;
        height: 47px;
    }
    
    .voucher-section .voucher-multiple-content {
        gap: 60px;
        padding: 0 60px;
    }
    
    .voucher-section .voucher-multiple-benefit {
        gap: 60px;
    }
    
    .voucher-section .voucher-multiple-benefit-border {
        padding-top: 20px;
    }
    
    .voucher-section .voucher-benefit-title-en {
        font-size: 2.8rem;
    }
    
    .voucher-section .voucher-benefit-right {
        gap: 10px;
    }
    
    .voucher-section .voucher-benefit-title-ko {
        font-size: 2.4rem;
        line-height: 1;
    }
    
    .voucher-section .voucher-benefit-description {
        font-size: 2rem;
        height: 29px;
        width: 856px;
    }
}











/* ============================================================
   ABOUT PAGE STYLES
============================================================ */

/* SEC01: Hero Section */

/* 모바일 기본 스타일 */
.about-hero-section {
    position: relative;
    width: 100%;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    isolation: isolate;
}

.about-hero-section .about-hero-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Center Text (z-index 2) */
.about-hero-section .about-hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 0 15px;
    flex-shrink: 0;
}

.about-hero-section .about-hero-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 7vw, 3.6rem);
    line-height: 1.1;
    flex-shrink: 0;
}

.about-hero-section .about-hero-title-line {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.about-hero-section .about-hero-title-line p {
    margin: 0;
    color: #FFF;
    flex-shrink: 0;
}

/* Text Colors */
.about-hero-section .about-hero-text-highlight {
    color: #ddf160 !important;
}

.about-hero-section .about-hero-title-line p:not(.about-hero-text-blur-4):not(.about-hero-text-blur-1-5):not(.about-hero-text-highlight) {
    color: #ffffff !important;
}

/* Blur Effects */
.about-hero-section .about-hero-text-blur-4 {
    filter: blur(4px);
}

.about-hero-section .about-hero-text-blur-1-5 {
    filter: blur(1.5px);
}

/* Description */
.about-hero-section .about-hero-description {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #ffffff;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
}

.about-hero-section .about-hero-description p {
    margin: 0;
}

/* Background Circle Line (z-index 1) */
.about-hero-section .about-hero-background-line {
    position: relative;
    margin: 0 auto;
    z-index: 1;
    pointer-events: none;
    max-width: 500px;
    width: 100%;
}

.about-hero-section .about-hero-circle-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    transition: transform 0.3s ease-in-out;
}

.about-hero-section .about-hero-circle-placeholder img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* ========================================
   About Hero Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .about-hero-section {
        padding: 65px 0;
    }
    
    .about-hero-section .about-hero-text {
        gap: 17px;
        padding: 0 30px;
    }
    
    .about-hero-section .about-hero-title {
        gap: 9px;
        font-size: clamp(3.2rem, 7.5vw, 4.2rem);
    }
    
    .about-hero-section .about-hero-title-line {
        gap: 7px;
    }
    
    .about-hero-section .about-hero-description {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .about-hero-section .about-hero-background-line {
        max-width: 600px;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .about-hero-section {
        padding: 70px 0;
    }
    
    .about-hero-section .about-hero-text {
        gap: 18px;
        padding: 0 40px;
    }
    
    .about-hero-section .about-hero-title {
        gap: 9px;
        font-size: clamp(4.5rem, 8vw, 5.8rem);
        line-height: 1;
    }
    
    .about-hero-section .about-hero-title-line {
        gap: 8px;
        flex-wrap: nowrap;
    }
    
    .about-hero-section .about-hero-description {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
    }
    
    .about-hero-section .about-hero-background-line {
        max-width: 800px;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .about-hero-section {
        padding: 75px 0;
    }
    
    .about-hero-section .about-hero-text {
        gap: 19px;
        padding: 0 50px;
    }
    
    .about-hero-section .about-hero-title {
        gap: 10px;
        font-size: clamp(5.8rem, 9vw, 6.4rem);
    }
    
    .about-hero-section .about-hero-title-line {
        gap: 9px;
    }
    
    .about-hero-section .about-hero-description {
        font-size: 1.9rem;
    }
    
    .about-hero-section .about-hero-background-line {
        max-width: 900px;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .about-hero-section {
        padding: 80px 0;
    }
    
    .about-hero-section .about-hero-text {
        gap: 20px;
        padding: 0;
    }
    
    .about-hero-section .about-hero-title {
        gap: 10px;
        font-size: 6.8rem;
        line-height: 1;
    }
    
    .about-hero-section .about-hero-title-line {
        gap: 10px;
    }
    
    .about-hero-section .about-hero-description {
        font-size: 2rem;
    }
    
    .about-hero-section .about-hero-background-line {
        max-width: 1012px;
    }
    
    .about-hero-section .about-hero-circle-placeholder img {
        max-width: 1012px;
    }
}











/* SEC02: We Move Fast Section */

/* 모바일 기본 스타일 */
.about-fast-section {
    position: relative;
    width: 100%;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 0;
}

.about-fast-section .about-fast-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    height: auto;
    align-items: center;
    width: 100%;
    max-width: 1800px;
    flex-shrink: 0;
}

/* Left Image */
.about-fast-section .about-fast-image {
    flex: none;
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 1px;
    min-width: 1px;
}

.about-fast-section .about-fast-image-placeholder {
    flex: 1 0 0;
    min-height: 1px;
    min-width: 1px;
    width: 100%;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-fast-section .about-fast-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Right Text */
.about-fast-section .about-fast-text {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 1px;
    min-width: 1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 40px;
    padding: 0 15px;
}

/* Top: Large Title */
.about-fast-section .about-fast-title-wrapper {
    width: 100%;
    flex-shrink: 0;
}

.about-fast-section .about-fast-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-left: 0;
}

.about-fast-section .about-fast-title > div {
    display: flex;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.about-fast-section .about-fast-title p {
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(4rem, 10vw, 5.5rem);
    line-height: 1.1;
    color: #ffffff;
    flex-shrink: 0;
}

/* Title Line Specific Paddings (모바일에서는 0) */
.about-fast-section .about-fast-title-line-1 {
    gap: 8px;
    padding-left: 0;
}

.about-fast-section .about-fast-title-line-2 {
    padding-left: 0 !important;
}

.about-fast-section .about-fast-title-line-3 {
    padding-left: 0;
}

.about-fast-section .about-fast-title-line-4 {
    padding-left: 0;
}

/* Blur Effects */
.about-fast-section .about-fast-title-blur-5 {
    filter: blur(5px);
}

.about-fast-section .about-fast-title-blur-2-5 {
    filter: blur(2.5px);
}

/* Bottom: Korean Description */
.about-fast-section .about-fast-description {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    line-height: 1.6;
    flex-shrink: 0;
}

.about-fast-section .about-fast-description-title {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    color: #ffffff;
    width: 100%;
    flex-shrink: 0;
}

.about-fast-section .about-fast-description-content {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    color: #cccccc;
    width: 100%;
    flex-shrink: 0;
}

.about-fast-section .about-fast-description-content p {
    margin: 0 0 0 0;
}

/* ========================================
   About Fast Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .about-fast-section {
        padding: 90px 0;
    }
    
    .about-fast-section .about-fast-container {
        gap: 43px;
    }
    
    .about-fast-section .about-fast-image {
        height: 450px;
    }
    
    .about-fast-section .about-fast-text {
        gap: 43px;
        padding: 0 30px;
    }
    
    .about-fast-section .about-fast-title p {
        font-size: clamp(4.5rem, 11vw, 6.5rem);
    }
    
    .about-fast-section .about-fast-title-line-1 {
        gap: 10px;
    }
    
    .about-fast-section .about-fast-description {
        gap: 9px;
    }
    
    .about-fast-section .about-fast-description-title {
        font-size: clamp(1.7rem, 4.2vw, 2rem);
    }
    
    .about-fast-section .about-fast-description-content {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .about-fast-section {
        padding: 120px 0;
    }
    
    .about-fast-section .about-fast-container {
        flex-direction: row;
        gap: 30px;
        height: 600px;
    }
    
    .about-fast-section .about-fast-image {
        flex: 1 0 0;
        width: auto;
        height: 100%;
    }
    
    .about-fast-section .about-fast-text {
        flex: 1 0 0;
        width: auto;
        height: 100%;
        justify-content: space-between;
        gap: 0;
        padding: 40px 40px 40px 0;
    }
    
    .about-fast-section .about-fast-title {
        padding-left: 40px;
    }
    
    .about-fast-section .about-fast-title > div {
        flex-wrap: nowrap;
    }
    
    .about-fast-section .about-fast-title p {
        font-size: clamp(6rem, 12vw, 8rem);
        line-height: 1;
    }
    
    .about-fast-section .about-fast-title-line-1 {
        gap: 12px;
        padding-left: 40px;
    }
    
    .about-fast-section .about-fast-title-line-3 {
        padding-left: 90px;
    }
    
    .about-fast-section .about-fast-title-line-4 {
        padding-left: 60px;
    }
    
    .about-fast-section .about-fast-description {
        gap: 10px;
    }
    
    .about-fast-section .about-fast-description-title {
        font-size: 2rem;
    }
    
    .about-fast-section .about-fast-description-content {
        font-size: 1.7rem;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .about-fast-section {
        padding: 150px 0;
    }
    
    .about-fast-section .about-fast-container {
        gap: 35px;
        height: 700px;
    }
    
    .about-fast-section .about-fast-text {
        padding: 50px 50px 50px 0;
    }
    
    .about-fast-section .about-fast-title {
        padding-left: 60px;
    }
    
    .about-fast-section .about-fast-title p {
        font-size: clamp(8rem, 13vw, 9.5rem);
    }
    
    .about-fast-section .about-fast-title-line-1 {
        gap: 13px;
        padding-left: 60px;
    }
    
    .about-fast-section .about-fast-title-line-3 {
        padding-left: 140px;
    }
    
    .about-fast-section .about-fast-title-line-4 {
        padding-left: 90px;
    }
    
    .about-fast-section .about-fast-description-title {
        font-size: 2.2rem;
    }
    
    .about-fast-section .about-fast-description-content {
        font-size: 1.9rem;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .about-fast-section {
        padding: 180px 0;
    }
    
    .about-fast-section .about-fast-container {
        gap: 40px;
        height: 800px;
    }
    
    .about-fast-section .about-fast-text {
        padding: 60px 60px 60px 0;
    }
    
    .about-fast-section .about-fast-title {
        padding-left: 80px;
    }
    
    .about-fast-section .about-fast-title p {
        font-size: 10rem;
        line-height: 1;
    }
    
    .about-fast-section .about-fast-title-line-1 {
        gap: 15px;
        padding-left: 80px;
    }
    
    .about-fast-section .about-fast-title-line-3 {
        padding-left: 180px;
    }
    
    .about-fast-section .about-fast-title-line-4 {
        padding-left: 120px;
    }
    
    .about-fast-section .about-fast-description {
        gap: 10px;
    }
    
    .about-fast-section .about-fast-description-title {
        font-size: 2.4rem;
    }
    
    .about-fast-section .about-fast-description-content {
        font-size: 2rem;
    }
}










/* SEC03: Completion Performance Section */

/* 모바일 기본 스타일 */
.about-completion-section {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px 80px;
    margin-top: -1px;
}

.about-completion-section .about-completion-container {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: flex-start;
    width: 100%;
    max-width: 1800px;
    flex-shrink: 0;
}

/* Top Section */
.about-completion-section .about-completion-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

.about-completion-section .about-completion-title {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

/* Main Title: COMPLETION PERFORMANCE */
.about-completion-section .about-completion-main-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1.1;
    color: #000000;
    flex-shrink: 0;
}

.about-completion-section .about-completion-main-title p {
    margin: 0;
    flex-shrink: 0;
}

/* Sub Text: We're built different... */
.about-completion-section .about-completion-sub-text {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 2.8vw, 1.4rem);
    line-height: 1.4;
    color: #999999;
    letter-spacing: 0;
    flex-shrink: 0;
}

.about-completion-section .about-completion-sub-text p {
    margin: 0;
    flex-shrink: 0;
}

/* Bottom Section */
.about-completion-section .about-completion-bottom {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

/* Top Description */
.about-completion-section .about-completion-description-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
}

.about-completion-section .about-completion-description-title {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1.6;
    color: #000000;
    width: 100%;
    flex-shrink: 0;
}

.about-completion-section .about-completion-description-content {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.8;
    color: #444444;
    width: 100%;
    flex-shrink: 0;
}

.about-completion-section .about-completion-description-content p {
    margin: 0 0 0 0;
}

/* Center Image */
.about-completion-section .about-completion-center-image {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 300px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    background-color: #000000;
    flex-shrink: 0;
}

.about-completion-section .about-completion-image-placeholder {
    flex: 1 0 0;
    min-height: 1px;
    min-width: 1px;
    width: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    font-size: 1.4rem;
}

.about-completion-section .about-completion-image-placeholder video {
    max-width: 100%;
    max-height: 100%;
    mix-blend-mode: lighten;
}

/* Bottom Description */
.about-completion-section .about-completion-description-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

.about-completion-section .about-completion-description-bottom-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.8;
    color: #444444;
    flex-shrink: 0;
}

.about-completion-section .about-completion-description-bottom-content p {
    margin: 0 0 0 0;
}

/* ========================================
   About Completion Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .about-completion-section {
        padding: 90px 30px 90px;
    }
    
    .about-completion-section .about-completion-container {
        gap: 70px;
    }
    
    .about-completion-section .about-completion-title {
        gap: 26px;
    }
    
    .about-completion-section .about-completion-main-title {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .about-completion-section .about-completion-sub-text {
        font-size: clamp(1.4rem, 3vw, 1.6rem);
        letter-spacing: 1.8px;
    }
    
    .about-completion-section .about-completion-bottom {
        gap: 43px;
    }
    
    .about-completion-section .about-completion-description-top {
        gap: 9px;
    }
    
    .about-completion-section .about-completion-description-title {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .about-completion-section .about-completion-description-content {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
        line-height: 1.85;
    }
    
    .about-completion-section .about-completion-center-image {
        height: 350px;
    }
    
    .about-completion-section .about-completion-description-bottom-content {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
        line-height: 1.85;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .about-completion-section {
        padding: 120px 40px 110px;
    }
    
    .about-completion-section .about-completion-container {
        gap: 90px;
    }
    
    .about-completion-section .about-completion-title {
        gap: 32px;
    }
    
    .about-completion-section .about-completion-main-title {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
        font-size: clamp(5rem, 10vw, 6.8rem);
        line-height: 1;
    }
    
    .about-completion-section .about-completion-sub-text {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        font-size: clamp(1.6rem, 3.5vw, 1.8rem);
        letter-spacing: 2px;
    }
    
    .about-completion-section .about-completion-bottom {
        gap: 50px;
    }
    
    .about-completion-section .about-completion-description-title {
        font-size: clamp(2.4rem, 5.5vw, 2.8rem);
    }
    
    .about-completion-section .about-completion-description-content {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
        line-height: 1.9;
    }
    
    .about-completion-section .about-completion-center-image {
        height: 500px;
    }
    
    .about-completion-section .about-completion-description-bottom {
        align-items: flex-end;
    }
    
    .about-completion-section .about-completion-description-bottom-content {
        width: 600px;
        font-size: clamp(1.6rem, 4vw, 1.8rem);
        line-height: 1.9;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .about-completion-section {
        padding: 150px 50px 135px;
    }
    
    .about-completion-section .about-completion-container {
        gap: 105px;
    }
    
    .about-completion-section .about-completion-title {
        gap: 36px;
    }
    
    .about-completion-section .about-completion-main-title {
        font-size: clamp(6.5rem, 11vw, 7.5rem);
    }
    
    .about-completion-section .about-completion-sub-text {
        font-size: clamp(1.8rem, 4vw, 1.9rem);
        letter-spacing: 2.4px;
        line-height: 1.2;
    }
    
    .about-completion-section .about-completion-bottom {
        gap: 55px;
    }
    
    .about-completion-section .about-completion-description-top {
        gap: 10px;
    }
    
    .about-completion-section .about-completion-description-title {
        font-size: clamp(3rem, 6vw, 3.3rem);
    }
    
    .about-completion-section .about-completion-description-content {
        font-size: 1.9rem;
        line-height: 1.95;
    }
    
    .about-completion-section .about-completion-center-image {
        height: 590px;
    }
    
    .about-completion-section .about-completion-description-bottom-content {
        width: 750px;
        font-size: 1.9rem;
        line-height: 1.95;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .about-completion-section {
        padding: 180px 60px 160px;
    }
    
    .about-completion-section .about-completion-container {
        gap: 120px;
    }
    
    .about-completion-section .about-completion-title {
        gap: 40px;
    }
    
    .about-completion-section .about-completion-main-title {
        font-size: 8rem;
        line-height: 1;
    }
    
    .about-completion-section .about-completion-sub-text {
        font-size: 2rem;
        line-height: 24px;
        letter-spacing: 2.7px;
    }
    
    .about-completion-section .about-completion-bottom {
        gap: 60px;
    }
    
    .about-completion-section .about-completion-description-top {
        gap: 10px;
    }
    
    .about-completion-section .about-completion-description-title {
        font-size: 3.6rem;
        line-height: 1.6;
    }
    
    .about-completion-section .about-completion-description-content {
        font-size: 2rem;
        line-height: 2;
    }
    
    .about-completion-section .about-completion-center-image {
        height: 680px;
    }
    
    .about-completion-section .about-completion-description-bottom-content {
        width: 900px;
        font-size: 2rem;
        line-height: 2;
    }
}








/* ============================================================
   SNS PAGE STYLES
============================================================ */

/* SEC01: SNS Cards Section */

/* 모바일 기본 스타일 */
.sns-cards-section {
    position: relative;
    width: 100%;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 15px;
    padding-bottom: 0;
}

.sns-cards-section .sns-cards-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
    max-width: 1800px;
    flex-shrink: 0;
}

/* Top Text */
.sns-cards-section .sns-cards-top-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

/* Main Title */
.sns-cards-section .sns-cards-main-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1.1;
    flex-shrink: 0;
}

.sns-cards-section .sns-cards-title-line-1,
.sns-cards-section .sns-cards-title-line-2,
.sns-cards-section .sns-cards-title-line-3 {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.sns-cards-section .sns-cards-title-line-1 p,
.sns-cards-section .sns-cards-title-line-2 p,
.sns-cards-section .sns-cards-title-line-3 p {
    margin: 0;
    color: #ffffff;
    flex-shrink: 0;
}

/* Line 2 specific padding (모바일에서는 0) */
.sns-cards-section .sns-cards-title-line-2 {
    padding-left: 0;
}

/* Line 3 specific padding (모바일에서는 0) */
.sns-cards-section .sns-cards-title-line-3 {
    padding-left: 0;
}

/* Text Colors & Blur Effects */
.sns-cards-section .sns-cards-highlight {
    color: #ddf160 !important;
}

.sns-cards-section .sns-cards-blur-2 {
    filter: blur(2px);
}

.sns-cards-section .sns-cards-blur-4 {
    filter: blur(4px);
}

/* Description */
.sns-cards-section .sns-cards-description {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #cccccc;
    flex-shrink: 0;
}

/* SNS Cards Grid */
.sns-cards-section .sns-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    padding-left: 0;
    width: 100%;
    flex-shrink: 0;
}

/* SNS Card Common Styles */
.sns-cards-section .sns-card {
    display: block;
    width: calc(50% - 5px);
    height: 120px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
}

.sns-cards-section .sns-card:hover {
    opacity: 0.9;
}

.sns-cards-section .sns-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.sns-cards-section .sns-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Card Icon Placeholder */
.sns-cards-section .sns-card-icon-placeholder {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sns-cards-section .sns-card-icon-placeholder img {
    width: 100%;
}

/* Card Bottom */
.sns-cards-section .sns-card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: right;
    width: 100%;
}

.sns-cards-section .sns-card-title {
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1;
    color: #ffffff;
    flex-shrink: 0;
}

.sns-cards-section .sns-card-arrow-placeholder {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sns-cards-section .sns-card-arrow-placeholder img {
    width: 100%;
}

/* Instagram Card - Gradient Background */
.sns-cards-section .sns-card-instagram {
    background: radial-gradient(circle at 0% 100%, rgba(245, 199, 0, 1) 0%, rgba(245, 199, 0, 0) 50%),
                linear-gradient(54.65deg, rgb(247, 5, 97) 24.68%, rgb(70, 68, 151) 75.32%);
}

/* YouTube Card - Red */
.sns-cards-section .sns-card-youtube {
    background-color: #f70000;
}

/* Facebook Card - Blue */
.sns-cards-section .sns-card-facebook {
    background-color: #395599;
}

/* Blog Card - Green */
.sns-cards-section .sns-card-blog {
    background-color: #2dae00;
}

/* Naver TV Card - Teal */
.sns-cards-section .sns-card-navertv {
    background-color: #00d777;
}

/* Tistory Card - Orange */
.sns-cards-section .sns-card-tistory {
    background-color: #e9601a;
}

/* ========================================
   SNS Cards Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .sns-cards-section {
        padding: 65px 30px;
        padding-bottom: 0;
    }
    
    .sns-cards-section .sns-cards-container {
        gap: 43px;
    }
    
    .sns-cards-section .sns-cards-top-text {
        gap: 17px;
    }
    
    .sns-cards-section .sns-cards-main-title {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .sns-cards-section .sns-cards-title-line-1,
    .sns-cards-section .sns-cards-title-line-2,
    .sns-cards-section .sns-cards-title-line-3 {
        gap: 10px;
    }
    
    .sns-cards-section .sns-cards-description {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .sns-cards-section .sns-card {
        height: 130px;
    }
    
    .sns-cards-section .sns-card-content {
        padding: 23px;
    }
    
    .sns-cards-section .sns-card-top {
        gap: 9px;
    }
    
    .sns-cards-section .sns-card-icon-placeholder {
        width: 17px;
        height: 17px;
    }
    
    .sns-cards-section .sns-card-title {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .sns-cards-section .sns-card-arrow-placeholder {
        width: 19px;
        height: 19px;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .sns-cards-section {
        padding: 70px 40px;
        padding-bottom: 0;
    }
    
    .sns-cards-section .sns-cards-container {
        gap: 60px;
    }
    
    .sns-cards-section .sns-cards-top-text {
        gap: 18px;
    }
    
    .sns-cards-section .sns-cards-main-title {
        font-size: clamp(5rem, 10vw, 6.8rem);
        line-height: 1;
    }
    
    .sns-cards-section .sns-cards-title-line-1,
    .sns-cards-section .sns-cards-title-line-2,
    .sns-cards-section .sns-cards-title-line-3 {
        gap: 12px;
        flex-wrap: nowrap;
    }
    
    .sns-cards-section .sns-cards-title-line-2 {
        padding-left: 80px;
    }
    
    .sns-cards-section .sns-cards-title-line-3 {
        padding-left: 30px;
    }
    
    .sns-cards-section .sns-cards-description {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
    }
    
    .sns-cards-section .sns-cards-grid {
        padding-left: 400px;
        width: calc(100% + 400px);
    }
    
    .sns-cards-section .sns-card {
        width: 240px;
        height: 130px;
    }
    
    .sns-cards-section .sns-card-content {
        padding: 25px;
    }
    
    .sns-cards-section .sns-card-icon-placeholder {
        width: 18px;
        height: 18px;
    }
    
    .sns-cards-section .sns-card-title {
        font-size: 2.3rem;
    }
    
    .sns-cards-section .sns-card-arrow-placeholder {
        width: 20px;
        height: 20px;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .sns-cards-section {
        padding: 75px 50px;
        padding-bottom: 0;
    }
    
    .sns-cards-section .sns-cards-container {
        gap: 70px;
    }
    
    .sns-cards-section .sns-cards-top-text {
        gap: 19px;
    }
    
    .sns-cards-section .sns-cards-main-title {
        font-size: clamp(6.5rem, 11vw, 7.5rem);
    }
    
    .sns-cards-section .sns-cards-title-line-1,
    .sns-cards-section .sns-cards-title-line-2,
    .sns-cards-section .sns-cards-title-line-3 {
        gap: 13px;
    }
    
    .sns-cards-section .sns-cards-title-line-2 {
        padding-left: 120px;
    }
    
    .sns-cards-section .sns-cards-title-line-3 {
        padding-left: 45px;
    }
    
    .sns-cards-section .sns-cards-description {
        font-size: 1.9rem;
    }
    
    .sns-cards-section .sns-cards-grid {
        padding-left: 650px;
        width: calc(100% + 650px);
    }
    
    .sns-cards-section .sns-card {
        width: 270px;
        height: 135px;
    }
    
    .sns-cards-section .sns-card-content {
        padding: 27px;
    }
    
    .sns-cards-section .sns-card-icon-placeholder {
        width: 19px;
        height: 19px;
    }
    
    .sns-cards-section .sns-card-title {
        font-size: 2.6rem;
    }
    
    .sns-cards-section .sns-card-arrow-placeholder {
        width: 21px;
        height: 21px;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .sns-cards-section {
        padding: 80px 60px;
        padding-bottom: 0;
    }
    
    .sns-cards-section .sns-cards-container {
        gap: 80px;
    }
    
    .sns-cards-section .sns-cards-top-text {
        gap: 20px;
    }
    
    .sns-cards-section .sns-cards-main-title {
        font-size: 8rem;
        line-height: 1;
    }
    
    .sns-cards-section .sns-cards-title-line-1,
    .sns-cards-section .sns-cards-title-line-2,
    .sns-cards-section .sns-cards-title-line-3 {
        gap: 15px;
    }
    
    .sns-cards-section .sns-cards-title-line-2 {
        padding-left: 160px;
    }
    
    .sns-cards-section .sns-cards-title-line-3 {
        padding-left: 60px;
    }
    
    .sns-cards-section .sns-cards-description {
        font-size: 2rem;
    }
    
    .sns-cards-section .sns-cards-grid {
        padding-left: 900px;
        width: 1800px;
    }
    
    .sns-cards-section .sns-card {
        width: 293px;
        height: 140px;
    }
    
    .sns-cards-section .sns-card-content {
        padding: 30px;
    }
    
    .sns-cards-section .sns-card-top {
        gap: 10px;
    }
    
    .sns-cards-section .sns-card-icon-placeholder {
        width: 20px;
        height: 20px;
    }
    
    .sns-cards-section .sns-card-title {
        font-size: 2.8rem;
    }
    
    .sns-cards-section .sns-card-arrow-placeholder {
        width: 22px;
        height: 22px;
    }
}









/* ===========================
   SNS Highlights Section
   =========================== */

/* 모바일 기본 스타일 */
.sns-highlights-section {
    background-color: #000000;
    width: 100%;
    padding: 80px 15px 80px;
}

.sns-highlights-section .sns-highlights-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

/* Title Wrapper */
.sns-highlights-section .sns-highlights-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sns-highlights-section .sns-highlights-title {
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1.1;
    color: #ffffff;
}

.sns-highlights-section .sns-highlights-description {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #cccccc;
}

/* Video Grid */
.sns-highlights-section .sns-highlights-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

/* Individual Highlight Item */
.sns-highlights-section .sns-highlight-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(50% - 5px);
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.sns-highlights-section .sns-highlight-item:hover {
    opacity: 0.8;
}

/* Thumbnail */
.sns-highlights-section .sns-highlight-thumbnail {
    width: 100%;
    aspect-ratio: 400 / 500;
    position: relative;
    overflow: hidden;
}

.sns-highlights-section .sns-highlight-thumbnail img {
    width: calc(100% + 1px);
    max-width: none;
    height: calc(100% + 1px);
    object-fit: cover;
    object-position: center;
}

/* Text */
.sns-highlights-section .sns-highlight-text {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   SNS Highlights Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .sns-highlights-section {
        padding: 90px 30px 90px;
    }
    
    .sns-highlights-section .sns-highlights-container {
        gap: 43px;
    }
    
    .sns-highlights-section .sns-highlights-title-wrapper {
        gap: 9px;
    }
    
    .sns-highlights-section .sns-highlights-title {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .sns-highlights-section .sns-highlights-description {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .sns-highlights-section .sns-highlights-grid {
        gap: 12px;
    }
    
    .sns-highlights-section .sns-highlight-item {
        gap: 12px;
        width: calc(50% - 6px);
    }
    
    .sns-highlights-section .sns-highlight-text {
        font-size: 14px;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .sns-highlights-section {
        padding: 120px 40px 130px;
    }
    
    .sns-highlights-section .sns-highlights-container {
        gap: 50px;
    }
    
    .sns-highlights-section .sns-highlights-title {
        font-size: clamp(5rem, 10vw, 6rem);
        line-height: 1.12;
    }
    
    .sns-highlights-section .sns-highlights-description {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
    }
    
    .sns-highlights-section .sns-highlights-grid {
        gap: 13px;
    }
    
    .sns-highlights-section .sns-highlight-item {
        gap: 13px;
        width: calc(100% / 3 - 8.67px);
    }
    
    .sns-highlights-section .sns-highlight-text {
        font-size: 15px;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .sns-highlights-section {
        padding: 140px 50px 155px;
    }
    
    .sns-highlights-section .sns-highlights-container {
        gap: 55px;
    }
    
    .sns-highlights-section .sns-highlights-title-wrapper {
        gap: 10px;
    }
    
    .sns-highlights-section .sns-highlights-title {
        font-size: clamp(6rem, 11vw, 6.5rem);
    }
    
    .sns-highlights-section .sns-highlights-description {
        font-size: 1.9rem;
    }
    
    .sns-highlights-section .sns-highlights-grid {
        gap: 14px;
    }
    
    .sns-highlights-section .sns-highlight-item {
        gap: 14px;
        width: calc(100% / 4 - 10.5px);
    }
    
    .sns-highlights-section .sns-highlight-text {
        font-size: 15px;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .sns-highlights-section {
        padding: 160px 60px 180px;
    }
    
    .sns-highlights-section .sns-highlights-container {
        gap: 60px;
    }
    
    .sns-highlights-section .sns-highlights-title {
        font-size: 6.8rem;
        line-height: 1.12;
    }
    
    .sns-highlights-section .sns-highlights-description {
        font-size: 2rem;
    }
    
    .sns-highlights-section .sns-highlights-grid {
        gap: 15px;
    }
    
    .sns-highlights-section .sns-highlight-item {
        gap: 15px;
        width: calc(100% / 6 - 12.5px);
    }
    
    .sns-highlights-section .sns-highlight-text {
        font-size: 16px;
    }
}










/* ===========================
   SNS Blog Section
   =========================== */

/* 모바일 기본 스타일 */
.sns-blog-section {
    background-color: #000000;
    width: 100%;
    padding: 0 15px 80px;
}

.sns-blog-section .sns-blog-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

/* Title Wrapper */
.sns-blog-section .sns-blog-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.sns-blog-section .sns-blog-title {
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1.1;
    color: #ffffff;
}

.sns-blog-section .sns-blog-description {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #cccccc;
}

/* Blog Cards */
.sns-blog-section .sns-blog-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    flex-shrink: 0;
}

/* Individual Blog Card */
.sns-blog-section .sns-blog-card {
    flex: none;
    width: 100%;
    position: relative;
    cursor: pointer;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #222;
}

.sns-blog-section .sns-blog-card:hover {
    background-color: #ddf160;
    transition: background-color 0.3s ease;
}

/* Card Content */
.sns-blog-section .sns-blog-card-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px 20px;
    width: 100%;
}

/* Card Title */
.sns-blog-section .sns-blog-card-title {
    margin: 0;
    font-family: 'Roboto Condensed', 'Noto Sans KR', sans-serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.6;
    width: 100%;
    transition: color 0.3s ease;
}

.sns-blog-section .sns-blog-card-yellow .sns-blog-card-title {
    color: #000000;
}

.sns-blog-section .sns-blog-card-dark .sns-blog-card-title {
    color: #ffffff;
}

.sns-blog-section .sns-blog-card:hover .sns-blog-card-title {
    color: #000000;
}

/* Card Footer */
.sns-blog-section .sns-blog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* Card Date */
.sns-blog-section .sns-blog-card-date {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.3rem, 3.2vw, 1.5rem);
    line-height: 1.6;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.sns-blog-section .sns-blog-card-yellow .sns-blog-card-date {
    color: #000000;
}

.sns-blog-section .sns-blog-card-dark .sns-blog-card-date {
    color: #999999;
}

.sns-blog-section .sns-blog-card:hover .sns-blog-card-date {
    color: #000000;
}

/* Card Arrow Placeholder */
.sns-blog-section .sns-blog-card-arrow-placeholder {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 2px;
    background-image: url('/html/_img/sub/company/sns_icon_go.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.3s ease;
}

.sns-blog-section .sns-blog-card:hover .sns-blog-card-arrow-placeholder {
    background-image: url('/html/_img/sub/company/sns_icon_go_bk.svg');
}

/* ========================================
   SNS Blog Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .sns-blog-section {
        padding: 0 30px 90px;
    }
    
    .sns-blog-section .sns-blog-container {
        gap: 43px;
    }
    
    .sns-blog-section .sns-blog-title-wrapper {
        gap: 9px;
    }
    
    .sns-blog-section .sns-blog-title {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .sns-blog-section .sns-blog-description {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .sns-blog-section .sns-blog-cards {
        gap: 12px;
    }
    
    .sns-blog-section .sns-blog-card-content {
        gap: 33px;
        padding: 33px 23px;
    }
    
    .sns-blog-section .sns-blog-card-title {
        font-size: clamp(1.7rem, 4.2vw, 1.9rem);
    }
    
    .sns-blog-section .sns-blog-card-date {
        font-size: clamp(1.4rem, 3.5vw, 1.55rem);
    }
    
    .sns-blog-section .sns-blog-card-arrow-placeholder {
        width: 19px;
        height: 19px;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .sns-blog-section {
        padding: 0 40px 120px;
    }
    
    .sns-blog-section .sns-blog-container {
        gap: 50px;
    }
    
    .sns-blog-section .sns-blog-title-wrapper {
        gap: 10px;
    }
    
    .sns-blog-section .sns-blog-title {
        font-size: clamp(5rem, 10vw, 6rem);
        line-height: 1.12;
    }
    
    .sns-blog-section .sns-blog-description {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
    }
    
    .sns-blog-section .sns-blog-cards {
        flex-direction: row;
        gap: 13px;
    }
    
    .sns-blog-section .sns-blog-card {
        flex: 1 0 0;
        width: auto;
    }
    
    .sns-blog-section .sns-blog-card-content {
        gap: 36px;
        padding: 36px 26px;
    }
    
    .sns-blog-section .sns-blog-card-title {
        font-size: 1.85rem;
    }
    
    .sns-blog-section .sns-blog-card-date {
        font-size: 1.55rem;
    }
    
    .sns-blog-section .sns-blog-card-arrow-placeholder {
        width: 20px;
        height: 20px;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .sns-blog-section {
        padding: 0 50px 140px;
    }
    
    .sns-blog-section .sns-blog-container {
        gap: 55px;
    }
    
    .sns-blog-section .sns-blog-title {
        font-size: clamp(6rem, 11vw, 6.5rem);
    }
    
    .sns-blog-section .sns-blog-description {
        font-size: 1.9rem;
    }
    
    .sns-blog-section .sns-blog-cards {
        gap: 14px;
    }
    
    .sns-blog-section .sns-blog-card-content {
        gap: 38px;
        padding: 38px 28px;
    }
    
    .sns-blog-section .sns-blog-card-title {
        font-size: 1.9rem;
    }
    
    .sns-blog-section .sns-blog-card-date {
        font-size: 1.58rem;
    }
    
    .sns-blog-section .sns-blog-card-arrow-placeholder {
        width: 21px;
        height: 21px;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .sns-blog-section {
        padding: 0 60px 160px;
    }
    
    .sns-blog-section .sns-blog-container {
        gap: 60px;
    }
    
    .sns-blog-section .sns-blog-title {
        font-size: 6.8rem;
        line-height: 1.12;
    }
    
    .sns-blog-section .sns-blog-description {
        font-size: 2rem;
    }
    
    .sns-blog-section .sns-blog-cards {
        gap: 15px;
        width: 1800px;
    }
    
    .sns-blog-section .sns-blog-card-content {
        gap: 40px;
        padding: 40px 30px;
    }
    
    .sns-blog-section .sns-blog-card-title {
        font-size: 2rem;
    }
    
    .sns-blog-section .sns-blog-card-date {
        font-size: 1.6rem;
    }
    
    .sns-blog-section .sns-blog-card-arrow-placeholder {
        width: 22px;
        height: 22px;
    }
}











/* ==================== RECRUIT PAGE ==================== */

/* ==================== SEC01: Intro ==================== */

/* 모바일 기본 스타일 */
.recruit-sec01 {
    background-color: #000000;
    width: 100%;
    min-height: auto;
    padding: 80px 15px 80px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.recruit-sec01-container {
    width: 100%;
    max-width: 1800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
}

/* Left: Text Content */
.recruit-sec01-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex-shrink: 0;
}

/* Main Title (English) */
.recruit-sec01-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1.1;
    color: #ffffff;
}

.recruit-sec01-title-line1,
.recruit-sec01-title-line2 {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.recruit-sec01-title-line2 {
    gap: 8px;
    padding-right: 0;
}

.recruit-sec01-title p {
    margin: 0;
    flex-shrink: 0;
}

/* Blur Effects */
.recruit-sec01-title .blur-heavy {
    filter: blur(5px);
}

.recruit-sec01-title .blur-light {
    filter: blur(2.5px);
}

/* Korean Translation & Description */
.recruit-sec01-desc {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.recruit-sec01-desc-title {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1.6;
    color: #ffffff;
    width: 100%;
}

.recruit-sec01-desc-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #cccccc;
    width: 100%;
}

.recruit-sec01-desc-text p {
    margin: 0;
}

/* Right: Image */
.recruit-sec01-img {
    width: 100%;
    height: 300px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recruit-sec01-img-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #1a1a1a;
}

.recruit-sec01-img-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ========================================
   Recruit SEC01 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .recruit-sec01 {
        padding: 90px 30px 90px 30px;
    }
    
    .recruit-sec01-container {
        gap: 43px;
    }
    
    .recruit-sec01-text {
        gap: 43px;
    }
    
    .recruit-sec01-title {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .recruit-sec01-title-line1,
    .recruit-sec01-title-line2 {
        gap: 10px;
    }
    
    .recruit-sec01-desc {
        gap: 9px;
    }
    
    .recruit-sec01-desc-title {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .recruit-sec01-desc-text {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .recruit-sec01-img {
        height: 350px;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .recruit-sec01 {
        padding: 120px 40px 120px 40px;
    }
    
    .recruit-sec01-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
    }
    
    .recruit-sec01-text {
        width: 55%;
        gap: 50px;
    }
    
    .recruit-sec01-title {
        align-items: flex-end;
        font-size: clamp(5rem, 10vw, 6.8rem);
        line-height: 1;
    }
    
    .recruit-sec01-title-line1,
    .recruit-sec01-title-line2 {
        gap: 12px;
        flex-wrap: nowrap;
    }
    
    .recruit-sec01-title-line2 {
        gap: 15px;
        padding-right: 60px;
    }
    
    .recruit-sec01-desc-title {
        font-size: clamp(2.2rem, 5.5vw, 2.6rem);
    }
    
    .recruit-sec01-desc-text {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
    }
    
    .recruit-sec01-img {
        width: 45%;
        height: 380px;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .recruit-sec01 {
        min-height: 100vh;
        padding: 120px 50px 150px 50px;
    }
    
    .recruit-sec01-container {
        gap: 35px;
    }
    
    .recruit-sec01-text {
        width: 620px;
        gap: 65px;
    }
    
    .recruit-sec01-title {
        font-size: clamp(6.5rem, 11vw, 7.5rem);
    }
    
    .recruit-sec01-title-line1,
    .recruit-sec01-title-line2 {
        gap: 13px;
    }
    
    .recruit-sec01-title-line2 {
        gap: 17px;
        padding-right: 90px;
    }
    
    .recruit-sec01-desc {
        gap: 10px;
    }
    
    .recruit-sec01-desc-title {
        font-size: 2.6rem;
    }
    
    .recruit-sec01-desc-text {
        font-size: 1.9rem;
    }
    
    .recruit-sec01-img {
        width: 580px;
        height: 430px;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .recruit-sec01 {
        padding: 80px 60px 200px 60px;
    }
    
    .recruit-sec01-container {
        gap: 40px;
    }
    
    .recruit-sec01-text {
        width: 880px;
        gap: 80px;
    }
    
    .recruit-sec01-title {
        font-size: 8rem;
        line-height: 1;
    }
    
    .recruit-sec01-title-line1,
    .recruit-sec01-title-line2 {
        gap: 15px;
    }
    
    .recruit-sec01-title-line2 {
        gap: 20px;
        padding-right: 120px;
    }
    
    .recruit-sec01-desc-title {
        font-size: 2.8rem;
    }
    
    .recruit-sec01-desc-text {
        font-size: 2rem;
    }
    
    .recruit-sec01-img {
        width: 680px;
        height: 480px;
    }
}












/* ==================== SEC02: Value & Passion ==================== */
/* 모바일 기본 스타일 */
.recruit-sec02 {
    background-color: #000000;
    width: 100%;
    padding: 0 15px 80px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 1;
}

.recruit-sec02-container {
    width: 100%;
    max-width: 1800px;
    display: flex;
    flex-direction: column;
}

.recruit-sec02-content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding-left: 0;
}

/* Left: Image */
.recruit-sec02-img {
    width: 100%;
    height: 400px;
    flex-shrink: 0;
}

.recruit-sec02-img-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #1a1a1a;
}

/* Right: Text Content */
.recruit-sec02-text {
    flex: none;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    text-align: left;
    padding-bottom: 0;
}

.recruit-sec02-text-title {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1.6;
    color: #ffffff;
    width: 100%;
}

.recruit-sec02-text-desc {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #cccccc;
    width: 100%;
}

.recruit-sec02-text-desc p {
    margin: 0;
}

/* Floating Title (Absolute Position) */
.recruit-sec02-floating-title {
    position: absolute;
    left: 0;
    top: 20px;
    transform: none;
    width: 100%;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1.1;
    color: #ffffff;
    pointer-events: none;
}

.recruit-sec02-floating-title p {
    margin: 0;
}

/* ========================================
   Recruit SEC02 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .recruit-sec02 {
        padding: 0 30px 90px 30px;
    }
    
    .recruit-sec02-content {
        gap: 43px;
    }
    
    .recruit-sec02-img {
        height: 450px;
    }
    
    .recruit-sec02-text {
        gap: 9px;
    }
    
    .recruit-sec02-text-title {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .recruit-sec02-text-desc {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .recruit-sec02-floating-title {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .recruit-sec02 {
        padding: 0 40px 120px 40px;
    }
    
    .recruit-sec02-content {
        flex-direction: row;
        align-items: flex-end;
        gap: 30px;
        padding-left: 120px;
    }
    
    .recruit-sec02-img {
        width: 380px;
        height: 540px;
    }
    
    .recruit-sec02-text {
        flex: 1 0 0;
        width: auto;
        align-items: flex-end;
        text-align: right;
        padding-bottom: 40px;
    }
    
    .recruit-sec02-text-title {
        font-size: clamp(2.2rem, 5.5vw, 2.6rem);
    }
    
    .recruit-sec02-text-desc {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
    }
    
    .recruit-sec02-floating-title {
        top: 50%;
        transform: translateY(-50%);
        width: 1200px;
        font-size: clamp(4.5rem, 9vw, 5.5rem);
        line-height: 1.2;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .recruit-sec02 {
        padding: 0 50px 150px 50px;
    }
    
    .recruit-sec02-content {
        gap: 35px;
        padding-left: 180px;
    }
    
    .recruit-sec02-img {
        width: 460px;
        height: 650px;
    }
    
    .recruit-sec02-text {
        gap: 10px;
        padding-bottom: 50px;
    }
    
    .recruit-sec02-text-title {
        font-size: 2.6rem;
    }
    
    .recruit-sec02-text-desc {
        font-size: 1.9rem;
    }
    
    .recruit-sec02-floating-title {
        width: 1500px;
        font-size: 5.5rem;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .recruit-sec02 {
        padding: 0 60px 180px 60px;
    }
    
    .recruit-sec02-content {
        gap: 40px;
        padding-left: 240px;
    }
    
    .recruit-sec02-img {
        width: 520px;
        height: 740px;
    }
    
    .recruit-sec02-text {
        padding-bottom: 60px;
    }
    
    .recruit-sec02-text-title {
        font-size: 2.8rem;
    }
    
    .recruit-sec02-text-desc {
        font-size: 2rem;
    }
    
    .recruit-sec02-floating-title {
        width: 1800px;
        font-size: 6rem;
    }
}








/* ==================== SEC03: Positions ==================== */

/* 모바일 기본 스타일 */
.recruit-sec03 {
    background-color: #ffffff;
    width: 100%;
    padding: 80px 15px 80px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -1px;
    z-index: 2;
    position: relative;
}

.recruit-sec03-container {
    width: 100%;
    max-width: 1800px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Top: Title */
.recruit-sec03-top {
    display: flex;
    flex-direction: column;
}

.recruit-sec03-title {
    display: flex;
    flex-direction: column;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1.1;
    color: #000000;
}

.recruit-sec03-title-line1,
.recruit-sec03-title-line3,
.recruit-sec03-title-line4 {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.recruit-sec03-title-line2 {
    padding-left: 0;
}

.recruit-sec03-title-line3 {
    padding-left: 0;
}

.recruit-sec03-title-line4 {
    padding-left: 0;
}

.recruit-sec03-title p {
    margin: 0;
    flex-shrink: 0;
}

/* Blur Effects */
.recruit-sec03-title .blur-light {
    filter: blur(2px);
}

.recruit-sec03-title .blur-medium {
    filter: blur(4px);
}

/* Purple Text */
.recruit-sec03-title .text-purple {
    color: #ac60ff;
}

/* List: Position Cards */
.recruit-sec03-list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 60px;
    align-items: flex-start;
    width: 100%;
}

/* Left Column */
.recruit-sec03-lt {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding-top: 0;
    flex-shrink: 0;
}

/* Right Column */
.recruit-sec03-rt {
    flex: none;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Position Card */
.recruit-sec03-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

.recruit-sec03-card-img {
    width: 100%;
    height: 280px;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #e0e0e0;
}
.recruit-sec03-card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.recruit-sec03-card-content {
    flex: none;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
}

.recruit-sec03-card-title {
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(2.8rem, 10vw, 5.5rem);
    line-height: 1;
    color: #000000;
}

.recruit-sec03-card-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.recruit-sec03-card-desc {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.4;
    color: #000000;
    width: 100%;
}

.recruit-sec03-card-req {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.6;
    color: #444444;
    width: 100%;
}

/* ========================================
   Recruit SEC03 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .recruit-sec03 {
        padding: 90px 30px 90px 30px;
    }
    
    .recruit-sec03-container {
        gap: 43px;
    }
    
    .recruit-sec03-title {
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .recruit-sec03-title-line1,
    .recruit-sec03-title-line3,
    .recruit-sec03-title-line4 {
        gap: 10px;
    }
    
    .recruit-sec03-card {
        gap: 26px;
    }
    
    .recruit-sec03-card-img {
        height: 320px;
    }
    
    .recruit-sec03-card-content {
        gap: 17px;
    }
    
    .recruit-sec03-card-title {
        font-size: clamp(4.5rem, 11vw, 6rem);
    }
    
    .recruit-sec03-card-text {
        gap: 9px;
    }
    
    .recruit-sec03-card-desc {
        font-size: clamp(1.7rem, 4.2vw, 1.9rem);
    }
    
    .recruit-sec03-card-req {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .recruit-sec03 {
        padding: 120px 40px 120px 40px;
    }
    
    .recruit-sec03-title {
        font-size: clamp(5rem, 10vw, 6.8rem);
        line-height: 1;
    }
    
    .recruit-sec03-title-line1,
    .recruit-sec03-title-line3,
    .recruit-sec03-title-line4 {
        gap: 12px;
        flex-wrap: nowrap;
    }
    
    .recruit-sec03-title-line2 {
        padding-left: 80px;
    }
    
    .recruit-sec03-title-line3 {
        padding-left: 30px;
    }
    
    .recruit-sec03-title-line4 {
        padding-left: 60px;
    }
    
    .recruit-sec03-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px 30px;
    }
    
    .recruit-sec03-lt {
        width: calc(50% - 15px);
        padding-top: 80px;
    }
    
    .recruit-sec03-rt {
        flex: 1 0 0;
        width: auto;
        justify-content: flex-end;
    }
    
    .recruit-sec03-card {
        flex-direction: row;
        gap: 30px;
    }
    
    .recruit-sec03-card-img {
        width: 200px;
        height: 240px;
    }
    
    .recruit-sec03-card-content {
        flex: 1 0 0;
        width: auto;
        gap: 18px;
        justify-content: flex-end;
    }
    
    .recruit-sec03-card-title {
        font-size: clamp(5rem, 11vw, 6.2rem);
    }
    
    .recruit-sec03-card-desc {
        font-size: clamp(1.8rem, 4.5vw, 1.95rem);
    }
    
    .recruit-sec03-card-req {
        font-size: clamp(1.6rem, 4vw, 1.75rem);
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .recruit-sec03 {
        padding: 150px 50px 140px 50px;
    }
    
    .recruit-sec03-title {
        font-size: clamp(6.5rem, 11vw, 7.5rem);
    }
    
    .recruit-sec03-title-line1,
    .recruit-sec03-title-line3,
    .recruit-sec03-title-line4 {
        gap: 13px;
    }
    
    .recruit-sec03-title-line2 {
        padding-left: 120px;
    }
    
    .recruit-sec03-title-line3 {
        padding-left: 45px;
    }
    
    .recruit-sec03-title-line4 {
        padding-left: 90px;
    }
    
    .recruit-sec03-list {
        gap: 20px 35px;
    }
    
    .recruit-sec03-lt {
        width: 620px;
        padding-top: 120px;
    }
    
    .recruit-sec03-card {
        gap: 35px;
    }
    
    .recruit-sec03-card-img {
        width: 240px;
        height: 290px;
    }
    
    .recruit-sec03-card-content {
        gap: 19px;
    }
    
    .recruit-sec03-card-title {
        font-size: 6.5rem;
    }
    
    .recruit-sec03-card-text {
        gap: 10px;
    }
    
    .recruit-sec03-card-desc {
        font-size: 1.95rem;
    }
    
    .recruit-sec03-card-req {
        font-size: 1.75rem;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .recruit-sec03 {
        padding: 180px 60px 160px 60px;
    }
    
    .recruit-sec03-title {
        font-size: 8rem;
    }
    
    .recruit-sec03-title-line1,
    .recruit-sec03-title-line3,
    .recruit-sec03-title-line4 {
        gap: 15px;
    }
    
    .recruit-sec03-title-line2 {
        padding-left: 160px;
    }
    
    .recruit-sec03-title-line3 {
        padding-left: 60px;
    }
    
    .recruit-sec03-title-line4 {
        padding-left: 120px;
    }
    
    .recruit-sec03-list {
        gap: 20px 40px;
    }
    
    .recruit-sec03-lt {
        width: 880px;
        padding-top: 160px;
    }
    
    .recruit-sec03-card {
        gap: 40px;
    }
    
    .recruit-sec03-card-img {
        width: 280px;
        height: 340px;
    }
    
    .recruit-sec03-card-content {
        gap: 20px;
    }
    
    .recruit-sec03-card-title {
        font-size: 6.8rem;
    }
    
    .recruit-sec03-card-desc {
        font-size: 2rem;
    }
    
    .recruit-sec03-card-req {
        font-size: 1.8rem;
    }
}















/* ==================== SEC04: Application Form ==================== */

/* 모바일 기본 스타일 */
.recruit-sec04 {
    background-color: #000000;
    width: 100%;
    padding: 80px 15px 80px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.recruit-sec04-container {
    width: 100%;
    max-width: 1800px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: stretch;
}

/* Left: Text Content */
.recruit-sec04-left {
    flex: none;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: flex-start;
}

.recruit-sec04-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.recruit-sec04-title {
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 4rem);
    line-height: 1.2;
}

.recruit-sec04-title .text-white {
    color: #ffffff;
}

.recruit-sec04-title .text-yellow {
    color: #cdff2e;
}

.recruit-sec04-subtitle {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1.6;
    color: #ffffff;
}

.recruit-sec04-desc {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.3rem, 3.2vw, 1.5rem);
    line-height: 1.6;
    color: #CCC;
    margin-top: 5px;
}

/* Position List - Bottom Aligned, Horizontal */
.recruit-sec04-positions {
    display: flex;
    align-items: flex-start;
}

.recruit-sec04-positions ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 12px;
    width: 100%;
}

.recruit-sec04-positions li {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.4;
    color: #666666;
    width: 100%;
}

/* Right: Application Form */
.recruit-sec04-right {
    flex: none;
    width: 100%;
    min-width: 0;
}

/* ========================================
   Recruit SEC04 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .recruit-sec04 {
        padding: 90px 30px 90px 30px;
    }
    
    .recruit-sec04-container {
        gap: 43px;
    }
    
    .recruit-sec04-left {
        gap: 43px;
    }
    
    .recruit-sec04-title-wrap {
        gap: 26px;
    }
    
    .recruit-sec04-title {
        font-size: clamp(3.5rem, 8.5vw, 4.5rem);
    }
    
    .recruit-sec04-subtitle {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .recruit-sec04-desc {
        font-size: clamp(1.4rem, 3.5vw, 1.55rem);
    }
    
    .recruit-sec04-positions ul {
        gap: 14px;
    }
    
    .recruit-sec04-positions li {
        font-size: clamp(1.7rem, 4.2vw, 1.85rem);
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .recruit-sec04 {
        padding: 120px 40px 120px 40px;
    }
    
    .recruit-sec04-container {
        flex-direction: row;
        gap: 40px;
    }
    
    .recruit-sec04-left {
        flex: 1 0 0;
        width: auto;
        gap: 0;
        justify-content: space-between;
    }
    
    .recruit-sec04-title-wrap {
        gap: 28px;
    }
    
    .recruit-sec04-title {
        font-size: clamp(4rem, 9vw, 4.7rem);
    }
    
    .recruit-sec04-subtitle {
        font-size: clamp(2.2rem, 5.5vw, 2.6rem);
    }
    
    .recruit-sec04-desc {
        font-size: clamp(1.5rem, 3.7vw, 1.58rem);
    }
    
    .recruit-sec04-positions {
        align-items: flex-end;
    }
    
    .recruit-sec04-positions ul {
        flex-direction: row;
        gap: 20px;
    }
    
    .recruit-sec04-positions li {
        font-size: clamp(1.8rem, 4.5vw, 1.9rem);
    }
    
    .recruit-sec04-right {
        flex: 1 0 0;
        width: auto;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .recruit-sec04 {
        padding: 150px 50px 150px 50px;
    }
    
    .recruit-sec04-container {
        gap: 50px;
    }
    
    .recruit-sec04-title-wrap {
        gap: 32px;
    }
    
    .recruit-sec04-title {
        font-size: 4.7rem;
    }
    
    .recruit-sec04-subtitle {
        font-size: 2.6rem;
    }
    
    .recruit-sec04-desc {
        font-size: 1.58rem;
    }
    
    .recruit-sec04-positions ul {
        gap: 30px;
    }
    
    .recruit-sec04-positions li {
        font-size: 1.9rem;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .recruit-sec04 {
        padding: 180px 60px 200px 60px;
    }
    
    .recruit-sec04-container {
        gap: 60px;
    }
    
    .recruit-sec04-title-wrap {
        gap: 35px;
    }
    
    .recruit-sec04-title {
        font-size: 5rem;
    }
    
    .recruit-sec04-subtitle {
        font-size: 2.8rem;
    }
    
    .recruit-sec04-desc {
        font-size: 1.6rem;
    }
    
    .recruit-sec04-positions ul {
        gap: 40px;
    }
    
    .recruit-sec04-positions li {
        font-size: 2rem;
    }
}










/* ==================== COMMON APPLICATION FORM STYLES ==================== */
/* 공통 폼 스타일 - recruit, inquiry 페이지 모두 사용 가능 */

/* 모바일 기본 스타일 */
.application-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Form Row */
.form-row {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    column-gap: 10px;
}

.form-row-full {
    flex-direction: column;
}

/* Form Field */
.form-field {
    flex: none;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Form Label */
.form-label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.6;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-label .required {
    color: #cdff2e;
    font-family: "Poppins", sans-serif;
}

/* Form Input */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: #ffffff;
    background-color: #1a1a1a;
    border: none;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s ease;
    min-height: 44px;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #999;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: #cdff2e;
}

/* Textarea */
.form-textarea {
    resize: vertical;
    min-height: 100px;
    resize: none;
}

/* Select */
.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("/html/_img/sub/company/form_select_arrow.svg");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
}

/* File Upload */
.form-file-wrap {
    position: relative;
}

.form-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form-file-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background-color: #1a1a1a;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    min-height: 44px;
}

.form-file-label:hover {
    border-color: #cdff2e;
}

.file-icon-area {
    width: 16px;
    height: 16px;
    background: url("/html/_img/sub/company/form_file_icon.svg") no-repeat center / contain;
    flex-shrink: 0;
}

.file-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(1.4rem, 3.5vw, 1.5rem);
    line-height: 1.6;
    color: #ffffff;
    display: none;
}

.file-format {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 3vw, 1.3rem);
    line-height: 1.6;
    color: #999;
}

/* Privacy Box */
.form-privacy-box {
    width: 100%;
    padding: 16px;
    background-color: #1a1a1a;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Checkbox */
.form-checkbox-wrap {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.form-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #FFF;
    border-radius: 2.5px;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #cdff2e;
}

.form-checkbox:checked {
    background-color: #cdff2e;
}

.form-checkbox-label {
    flex: 1;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #FFF;
    cursor: pointer;
}

.privacy-link {
    color: #AC60FF;
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.privacy-link:hover {
    opacity: 0.8;
}

.privacy-note {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
    color: #999;
    margin-top: 8px;
}

/* Submit Button */
.form-submit-wrap {
    display: flex;
    width: 100%;
}

.form-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 48px;
    padding: 14px 30px;
    background-color: #cdff2e;
    border: none;
    border-radius: 4px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.6;
    color: #000000;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-submit:hover {
    background-color: #b8e529;
    transform: translateY(-2px);
}

.submit-arrow-icon {
    width: 20px;
    height: 20px;
    background: url("/html/_img/sub/company/form_submit_arrow.svg") no-repeat center / contain;
}

/* ========================================
   Common Application Form - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .application-form {
        gap: 21px;
    }
    
    .form-field {
        gap: 7px;
    }
    
    .form-label {
        font-size: clamp(1.7rem, 4.2vw, 1.9rem);
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        padding: 15px 18px;
        font-size: 15.5px;
    }
    
    .form-textarea {
        min-height: 110px;
    }
    
    .form-file-label {
        gap: 11px;
        padding: 15px 18px;
    }
    
    .file-icon-area {
        width: 17px;
        height: 17px;
    }
    
    .file-text {
        font-size: clamp(1.45rem, 3.6vw, 1.55rem);
        display: block;
    }
    
    .file-format {
        font-size: clamp(1.25rem, 3.1vw, 1.35rem);
    }
    
    .form-privacy-box {
        padding: 18px;
        gap: 11px;
    }
    
    .form-checkbox {
        width: 21px;
        height: 21px;
    }
    
    .form-checkbox-label {
        font-size: 15px;
    }
    
    .privacy-note {
        font-size: 13.5px;
        margin-top: 9px;
    }
    
    .form-submit {
        gap: 7px;
        padding: 16px 35px;
        font-size: clamp(1.7rem, 4.2vw, 1.9rem);
    }
    
    .submit-arrow-icon {
        width: 23px;
        height: 23px;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .application-form {
        gap: 22px;
    }
    
    .form-row {
        flex-direction: row;
    }
    
    .form-field {
        flex: 1 0 0;
        width: auto;
        gap: 8px;
    }
    
    .form-label {
        font-size: clamp(1.8rem, 4.5vw, 1.95rem);
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        padding: 15.5px 19px;
        font-size: 15.75px;
    }
    
    .form-select {
        background-position: right 19px center;
        padding-right: 48px;
    }
    
    .form-textarea {
        min-height: 115px;
    }
    
    .form-file-label {
        padding: 15.5px 19px;
    }
    
    .file-icon-area {
        width: 17.5px;
        height: 17.5px;
    }
    
    .file-text {
        font-size: 1.58rem;
    }
    
    .file-format {
        font-size: 1.38rem;
    }
    
    .form-privacy-box {
        padding: 19px;
    }
    
    .form-checkbox-label {
        font-size: 15.5px;
    }
    
    .privacy-note {
        font-size: 13.75px;
    }
    
    .form-submit {
        padding: 17px 37.5px;
        font-size: clamp(1.8rem, 4.5vw, 1.95rem);
    }
    
    .submit-arrow-icon {
        width: 24.5px;
        height: 24.5px;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .application-form {
        gap: 22.5px;
    }
    
    .form-label {
        font-size: 1.95rem;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        padding: 15.75px 19.5px;
        font-size: 15.875px;
    }
    
    .form-select {
        background-position: right 19.5px center;
        padding-right: 49px;
    }
    
    .form-textarea {
        min-height: 117.5px;
    }
    
    .form-file-label {
        padding: 15.75px 19.5px;
    }
    
    .file-icon-area {
        width: 17.75px;
        height: 17.75px;
    }
    
    .file-text {
        font-size: 1.59rem;
    }
    
    .file-format {
        font-size: 1.39rem;
    }
    
    .form-privacy-box {
        padding: 19.5px;
    }
    
    .form-checkbox-label {
        font-size: 15.75px;
    }
    
    .privacy-note {
        font-size: 13.875px;
    }
    
    .form-submit {
        padding: 17.5px 38.75px;
        font-size: 1.95rem;
    }
    
    .submit-arrow-icon {
        width: 25.25px;
        height: 25.25px;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .application-form {
        gap: 23px;
    }
    
    .form-label {
        font-size: 2rem;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        padding: 16px 20px;
        font-size: 16px;
    }
    
    .form-select {
        background-position: right 20px center;
        padding-right: 50px;
    }
    
    .form-textarea {
        min-height: 120px;
    }
    
    .form-file-label {
        gap: 12px;
        padding: 16px 20px;
    }
    
    .file-icon-area {
        width: 18px;
        height: 18px;
    }
    
    .file-text {
        font-size: 1.6rem;
    }
    
    .file-format {
        font-size: 1.4rem;
    }
    
    .form-privacy-box {
        padding: 20px;
        gap: 12px;
    }
    
    .form-checkbox {
        width: 22px;
        height: 22px;
    }
    
    .form-checkbox-label {
        font-size: 16px;
    }
    
    .privacy-note {
        font-size: 14px;
        margin-top: 10px;
    }
    
    .form-submit {
        gap: 8px;
        padding: 18px 40px;
        font-size: 2rem;
    }
    
    .submit-arrow-icon {
        width: 26px;
        height: 26px;
    }
}


/* form privacy popup */
.privacy-popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 10000;
}

.privacy-popup.is-active {
	display: block;
}

.privacy-popup-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 40px);
	max-width: 800px;
	height: 80%;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
}

.privacy-popup-head {
	position: relative;
	padding: 8px 15px;
	border-bottom: 1px solid #e5e5e5;
	flex-shrink: 0;
}

.privacy-popup-head h2 {
	font-size: 18px;
	font-weight: 700;
	color: #000;
	margin: 0;
}

.privacy-popup-close {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: none;
	background-color: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color 0.2s;
}


.privacy-popup-close i {
	font-size: 18px;
	color: #000;
}

.privacy-popup-body {
	padding: 20px 15px;
	overflow-y: auto;
	flex: 1;
}
.privacy-popup-body * {
    word-break: break-all;
}
.privacy-popup-body::-webkit-scrollbar{
    width: 14px;
}
.privacy-popup-body::-webkit-scrollbar-thumb{
    background-color: #DDD;
    width: 6px;
    border-radius: 20px;
    border: 4px solid #FFF;
}
.privacy-popup-body .block_area {
	margin-bottom: 24px;
}

.privacy-popup-body .block_area:last-child {
	margin-bottom: 0;
}

.privacy-popup-body strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #000;
}

.privacy-popup-body p {
	font-size: 14px;
	line-height: 1.6;
	color: #666;
	margin: 0 0 12px 0;
}

.privacy-popup-body p:last-child {
	margin-bottom: 0;
}

.privacy-popup-body ol,
.privacy-popup-body ul {
	margin: 10px 0;
	padding-left: 20px;
}

.privacy-popup-body li {
	font-size: 14px;
	line-height: 1.6;
	color: #666;
}
.privacy-popup-body table{
    border: 1px solid #CCC;
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
    color: #666;
    font-size: 14px;
    text-align: center;
}
.privacy-popup-body table *{
    border: 1px solid #CCC;
    padding: 8px 0;
}
.privacy-popup-body table th{
    background-color: #f5f5f5
}



/* Desktop */
@media (min-width: 1280px) {
	.privacy-popup-inner {
		max-width: 1000px;
	}

	.privacy-popup-head {
		padding: 10px 20px;
	}

	.privacy-popup-head h2 {
		font-size: 20px;
	}

	.privacy-popup-body {
		padding: 40px;
	}

	.privacy-popup-body .block_area {
		margin-bottom: 20px;
	}

	.privacy-popup-body strong {
		font-size: 16px;
	}

	.privacy-popup-body p {
		font-size: 16px;
	}

	.privacy-popup-body li {
		font-size: 16px;
	}
    .privacy-popup-body table{
        font-size: 16px;
    }
    .privacy-popup-body table *{
        padding: 10px 0;
    }
}

























/* ==================== INQUIRY PAGE ==================== */

/* Inquiry Main */
.inquiry-main {
    background-color: #000000;
    min-height: 100vh;
}

/* SEC01: Contact Form */

/* 모바일 기본 스타일 */
.inquiry-sec01 {
    display: flex;
    align-items: flex-start;
    padding: 60px 0 80px;
    background-color: #000000;
}

.inquiry-sec01-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Left: Text Content */
.inquiry-sec01-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex-shrink: 0;
    width: 100%;
    position: relative;
}

.inquiry-sec01-title-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.inquiry-sec01-title {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    align-items: flex-start;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1.1;
    text-align: left;
    margin: 0;
}

/* Title blur effects */
.inquiry-sec01-title .title-blur-subtle {
    filter: blur(2px);
}

.inquiry-sec01-title .title-blur-moderate {
    filter: blur(2.5px);
}

.inquiry-sec01-title .title-blur-strong {
    filter: blur(5px);
}

.inquiry-sec01-title .text-yellow {
    color: #DDF160;
}

.inquiry-sec01-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 3;
}

.inquiry-sec01-message {
    margin: 0;
}

.inquiry-sec01-message-line {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
    white-space: normal;
}

.inquiry-sec01-info {
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 2;
}

.inquiry-sec01-icons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-icon {
    display: block;
    width: 20px;
    height: 20px;
}

.inquiry-sec01-details {
    margin: 0;
}

.inquiry-sec01-details p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.8;
    color: #cccccc;
    margin: 0;
    white-space: normal;
}

/* Whale Image (Background) */
.inquiry-sec01-whale {
    position: absolute;
    left: -200px;
    top: -100px;
    width: 600px;
    height: 600px;
    z-index: 1;
    opacity: 0.5;
}

.inquiry-sec01-whale video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: screen;
}

/* Right: Form */
.inquiry-sec01-right {
    flex: none;
    width: 100%;
    min-width: 0;
    z-index: 2;
}

/* Inquiry specific form styles */
.inquiry-sec01 .privacy-link {
    color: #ac60ff;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

/* ========================================
   Inquiry SEC01 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .inquiry-sec01 {
        padding: 65px 0 85px;
    }
    
    .inquiry-sec01-container {
        gap: 43px;
        padding: 0 30px;
    }
    
    .inquiry-sec01-left {
        gap: 32px;
    }
    
    .inquiry-sec01-title {
        gap: 0 10px;
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .inquiry-sec01-text {
        gap: 17px;
    }
    
    .inquiry-sec01-message-line {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .inquiry-sec01-info {
        gap: 9px;
    }
    
    .inquiry-sec01-icons {
        gap: 11px;
    }
    
    .info-icon {
        width: 21px;
        height: 21px;
    }
    
    .inquiry-sec01-details p {
        font-size: clamp(1.5rem, 3.7vw, 1.7rem);
    }
    
    .inquiry-sec01-whale {
        left: -250px;
        top: -120px;
        width: 750px;
        height: 750px;
        opacity: 0.6;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .inquiry-sec01 {
        padding: 70px 0 100px;
    }
    
    .inquiry-sec01-container {
        flex-direction: row;
        gap: 30px;
        padding: 0 40px;
    }
    
    .inquiry-sec01-left {
        gap: 35px;
        width: 50%;
    }
    
    .inquiry-sec01-title {
        gap: 0 12px;
        font-size: clamp(5rem, 10vw, 6.8rem);
        line-height: 1;
        text-align: center;
    }
    
    .inquiry-sec01-text {
        gap: 18px;
    }
    
    .inquiry-sec01-message-line {
        font-size: clamp(2.2rem, 5.5vw, 2.6rem);
        white-space: nowrap;
    }
    
    .inquiry-sec01-details p {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
        white-space: nowrap;
    }
    
    .inquiry-sec01-whale {
        left: -350px;
        top: -50px;
        width: 1100px;
        height: 1100px;
        opacity: 0.7;
    }
    
    .inquiry-sec01-right {
        flex: 1 0 0;
        width: auto;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .inquiry-sec01 {
        padding: 75px 0 130px;
    }
    
    .inquiry-sec01-container {
        gap: 35px;
        padding: 0 50px;
    }
    
    .inquiry-sec01-left {
        gap: 37.5px;
    }
    
    .inquiry-sec01-title {
        gap: 0 13px;
        font-size: clamp(6.5rem, 11vw, 7.5rem);
    }
    
    .inquiry-sec01-text {
        gap: 19px;
    }
    
    .inquiry-sec01-message-line {
        font-size: 2.6rem;
    }
    
    .inquiry-sec01-info {
        gap: 10px;
    }
    
    .inquiry-sec01-icons {
        gap: 12px;
    }
    
    .info-icon {
        width: 23px;
        height: 23px;
    }
    
    .inquiry-sec01-details p {
        font-size: 1.9rem;
    }
    
    .inquiry-sec01-whale {
        left: -450px;
        top: -25px;
        width: 1350px;
        height: 1350px;
        opacity: 0.85;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .inquiry-sec01 {
        padding: 80px 0 160px;
    }
    
    .inquiry-sec01-container {
        gap: 40px;
        padding: 0 60px;
    }
    
    .inquiry-sec01-left {
        gap: 40px;
    }
    
    .inquiry-sec01-title {
        gap: 0 15px;
        font-size: 8rem;
    }
    
    .inquiry-sec01-text {
        gap: 20px;
    }
    
    .inquiry-sec01-message-line {
        font-size: 2.8rem;
        white-space: nowrap;
    }
    
    .inquiry-sec01-icons {
        gap: 12.5px;
    }
    
    .info-icon {
        width: 24px;
        height: 24px;
    }
    
    .inquiry-sec01-details p {
        font-size: 2rem;
    }
    
    .inquiry-sec01-whale {
        left: -561px;
        top: 0;
        width: 1600px;
        height: 1600px;
        opacity: 1;
    }
}






/* Form already defined above in common application-form styles */


/* ==================== CONTACT PAGE ==================== */

/* Contact Main */
.contact-main {
    background-color: #000000;
    min-height: 100vh;
}

/* SEC01: Title */

/* 모바일 기본 스타일 */
.contact-sec01 {
    display: flex;
    align-items: center;
    padding: 60px 15px;
    background-color: #000000;
}

.contact-sec01-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.contact-sec01-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.contact-sec01-h2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3.2rem, 9vw, 4.5rem);
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
}

.contact-sec01-line {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.contact-sec01-line-indent {
    padding-left: 0;
    gap: 8px;
}

/* Blur effects for title */
.contact-sec01-h2 .title-blur-medium {
    filter: blur(4px);
}

.contact-sec01-h2 .title-blur-moderate {
    filter: blur(2.5px);
}

.contact-sec01-h2 .title-blur-strong {
    filter: blur(5px);
}

/* SEC02 & SEC03: Office Sections */

/* 모바일 기본 스타일 */
.contact-sec02,
.contact-sec03 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 80px;
    background-color: #000000;
}

.contact-sec02-container,
.contact-sec03-container {
    width: 100%;
    padding: 0 15px;
}

.contact-office-flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    padding-top: 20px;
    border-top: 1px solid #444444;
    width: 100%;
}

/* Left: Text */
.contact-office-text {
    display: flex;
    flex: none;
    width: 100%;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.contact-office-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #ffffff;
}

.contact-office-location {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 4rem);
    line-height: 1;
    color: #ffffff;
    margin: 0;
}

.contact-office-address-en {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    font-size: clamp(1.8rem, 4.5vw, 2.2rem);
    line-height: 1.3;
    color: #ffffff;
    margin: 0;
    width: 100%;
    white-space: normal;
}

.contact-office-frame {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-office-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-office-address-kr {
    font-family: 'Roboto Condensed', 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    line-height: 1.4;
    color: #cccccc;
    margin: 0;
}

.contact-office-phone {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: clamp(1.6rem, 4vw, 1.8rem);
    line-height: 1.4;
    color: #cccccc;
    margin: 0;
}

.contact-copy-btn,
.contact-phone-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
}

.contact-icon-placeholder {
    display: block;
    width: 20px;
    height: 20px;
}

.contact-icon-placeholder img {
    width: 100%;
}

/* Right: Map */
.contact-office-map {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 300px;
    flex-shrink: 0;
    background-color: #333333;
}

/* Map Pointer */
.contact-map-pointer {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 54px;
    height: 54px;
    padding: 8px;
    background-color: #ac60ff;
    border-radius: 54px;
}

.contact-pointer-text {
    font-family: 'Roboto Condensed', 'Noto Sans KR', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    margin: 0;
}

.contact-pointer-arrow {
    position: absolute;
    left: 18px;
    top: 44px;
    width: 0;
    height: 0;
    border-left: 8.5px solid transparent;
    border-right: 8.5px solid transparent;
    border-top: 15px solid #ac60ff;
}

/* 지도 커스텀은 반응형으로 건드리지 말것.*/
.root_daum_roughmap .cont{
    display: none;
}
.root_daum_roughmap .wrap_controllers{
    display: none;
}
.root_daum_roughmap .wrap_btn_zoom{
    display: none !important;
}
.root_daum_roughmap .border1,
.root_daum_roughmap .border2,
.root_daum_roughmap .border3,
.root_daum_roughmap .border4{
    display: none;
}
.root_daum_roughmap{
    width: 100% !important;
    height: 100% !important;
}
.root_daum_roughmap .wrap_map{
    height: 100% !important;
    width: 100% !important;
}

/* ========================================
   Contact - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
    .contact-sec01 {
        padding: 65px 30px;
    }
    
    .contact-sec01-h2 {
        gap: 9px;
        font-size: clamp(3.6rem, 9.5vw, 5rem);
    }
    
    .contact-sec01-line {
        gap: 10px;
    }
    
    .contact-sec01-line-indent {
        padding-left: 30px;
    }
    
    .contact-sec02,
    .contact-sec03 {
        padding-bottom: 90px;
    }
    
    .contact-sec02-container,
    .contact-sec03-container {
        padding: 0 30px;
    }
    
    .contact-office-flex {
        gap: 33px;
        padding-top: 22px;
    }
    
    .contact-office-text {
        gap: 17px;
    }
    
    .contact-office-top {
        gap: 9px;
    }
    
    .contact-office-location {
        font-size: clamp(3.5rem, 8.5vw, 4.5rem);
    }
    
    .contact-office-address-en {
        font-size: clamp(2rem, 5vw, 2.4rem);
    }
    
    .contact-office-address-kr {
        font-size: clamp(1.5rem, 3.7vw, 1.65rem);
    }
    
    .contact-office-phone {
        font-size: clamp(1.7rem, 4.2vw, 1.85rem);
    }
    
    .contact-office-map {
        height: 350px;
    }
    
    .contact-map-pointer {
        width: 58px;
        height: 58px;
    }
    
    .contact-pointer-text {
        font-size: 1.25rem;
    }
    
    .contact-pointer-arrow {
        left: 20px;
        top: 48px;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-top: 16px solid #ac60ff;
    }
}

/* 768px 이상 */
@media (min-width: 768px) {
    .contact-sec01 {
        padding: 70px 40px;
    }
    
    .contact-sec01-title {
        width: 100%;
    }
    
    .contact-sec01-h2 {
        gap: 10px;
        font-size: clamp(5rem, 10vw, 6.8rem);
        line-height: 1;
    }
    
    .contact-sec01-line {
        gap: 12px;
        flex-wrap: nowrap;
    }
    
    .contact-sec01-line-indent {
        padding-left: 40px;
        gap: 15px;
    }
    
    .contact-sec02,
    .contact-sec03 {
        padding-bottom: 120px;
    }
    
    .contact-sec02-container,
    .contact-sec03-container {
        padding: 0 40px;
    }
    
    .contact-office-flex {
        flex-direction: row;
        gap: 40px;
        padding-top: 26px;
    }
    
    .contact-office-text {
        flex: 1 0 0;
        width: auto;
        gap: 18px;
    }
    
    .contact-office-location {
        font-size: clamp(4rem, 9vw, 4.5rem);
    }
    
    .contact-office-address-en {
        font-size: clamp(2.2rem, 5.5vw, 2.6rem);
        line-height: 1.2;
        white-space: pre-wrap;
    }
    
    .contact-office-info {
        flex-wrap: nowrap;
    }
    
    .contact-office-address-kr {
        font-size: clamp(1.6rem, 4vw, 1.7rem);
        line-height: 1;
    }
    
    .contact-office-phone {
        font-size: clamp(1.8rem, 4.5vw, 1.9rem);
        line-height: 1;
    }
    
    .contact-office-map {
        width: 600px;
        height: 400px;
    }
    
    .contact-map-pointer {
        width: 62px;
        height: 62px;
    }
    
    .contact-pointer-text {
        font-size: 1.3rem;
    }
    
    .contact-pointer-arrow {
        left: 21px;
        top: 51px;
        border-left: 9.5px solid transparent;
        border-right: 9.5px solid transparent;
        border-top: 17px solid #ac60ff;
    }
}

/* 1024px 이상 */
@media (min-width: 1024px) {
    .contact-sec01 {
        padding: 75px 50px;
    }
    
    .contact-sec01-h2 {
        font-size: clamp(6.5rem, 11vw, 7.5rem);
    }
    
    .contact-sec01-line {
        gap: 13px;
    }
    
    .contact-sec01-line-indent {
        padding-left: 50px;
        gap: 17px;
    }
    
    .contact-sec02,
    .contact-sec03 {
        padding-bottom: 140px;
    }
    
    .contact-sec02-container,
    .contact-sec03-container {
        padding: 0 50px;
    }
    
    .contact-office-flex {
        gap: 50px;
        padding-top: 28px;
    }
    
    .contact-office-text {
        gap: 19px;
    }
    
    .contact-office-location {
        font-size: 4.6rem;
    }
    
    .contact-office-address-en {
        font-size: 2.7rem;
    }
    
    .contact-office-address-kr {
        font-size: 1.75rem;
    }
    
    .contact-office-phone {
        font-size: 1.95rem;
    }
    
    .contact-icon-placeholder {
        width: 22px;
        height: 22px;
    }
    
    .contact-office-map {
        width: 900px;
        height: 470px;
    }
    
    .contact-map-pointer {
        width: 65px;
        height: 65px;
        gap: 9px;
    }
    
    .contact-pointer-text {
        font-size: 1.35rem;
    }
    
    .contact-pointer-arrow {
        left: 22px;
        top: 54px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 18px solid #ac60ff;
    }
}

/* 1280px 이상 - 기존 PC 디자인 복원 */
@media (min-width: 1280px) {
    .contact-sec01 {
        padding: 80px 60px;
    }
    
    .contact-sec01-container {
        justify-content: space-between;
    }
    
    .contact-sec01-title {
        width: 1800px;
    }
    
    .contact-sec01-h2 {
        gap: 10px;
        font-size: 8rem;
        line-height: 1;
    }
    
    .contact-sec01-line {
        gap: 15px;
    }
    
    .contact-sec01-line-indent {
        padding-left: 60px;
        gap: 20px;
    }
    
    .contact-sec02,
    .contact-sec03 {
        padding-bottom: 160px;
    }
    
    .contact-sec02-container,
    .contact-sec03-container {
        padding: 0 60px;
    }
    
    .contact-office-flex {
        gap: 60px;
        padding-top: 30px;
    }
    
    .contact-office-text {
        gap: 20px;
    }
    
    .contact-office-top {
        gap: 10px;
    }
    
    .contact-office-location {
        font-size: 4.8rem;
    }
    
    .contact-office-address-en {
        font-size: 2.8rem;
    }
    
    .contact-office-frame {
        gap: 5px;
    }
    
    .contact-office-info {
        gap: 10px;
    }
    
    .contact-office-address-kr {
        font-size: 1.8rem;
    }
    
    .contact-office-phone {
        font-size: 2rem;
    }
    
    .contact-icon-placeholder {
        width: 24px;
        height: 24px;
    }
    
    .contact-office-map {
        width: 1200px;
        height: 540px;
    }
    
    .contact-map-pointer {
        width: 68px;
        height: 68px;
        gap: 10px;
        padding: 10px;
    }
    
    .contact-pointer-text {
        font-size: 1.4rem;
    }
    
    .contact-pointer-arrow {
        left: 23px;
        top: 56px;
        border-left: 10.5px solid transparent;
        border-right: 10.5px solid transparent;
        border-top: 18.75px solid #ac60ff;
    }
}













.privacy-title-wrap{
    position: relative;
    padding: 180px 0;
    padding-bottom: 140px;
    text-align: center;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}
.privacy-title-wrap h2{
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 6.5rem;
}
.privacy-sec01{
    padding: 0 60px;
    padding-bottom: 180px;
    font-size: 16px;
    line-height: 1.6;
}
.privacy-sec01 .block_area{
    margin: 20px 0;
}
.privacy-sec01 .block_area ol,
.privacy-sec01 .block_area ul{
    padding-left: 20px;
}
.privacy-sec01 .block_area table{
    border: 1px solid #CCC;
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
}
.privacy-sec01 .block_area table *{
    border: 1px solid #CCC;
    padding: 10px;
    text-align: center;
}
.privacy-sec01 .block_area table th{
    background-color: #333;
}
@media screen and (max-width: 1024px){
    .privacy-sec01{
        padding: 0 40px;
    }
}
@media screen and (max-width: 768px){
    .privacy-title-wrap{
        padding-top: 140px;
        padding-bottom: 80px;
    }
    .privacy-title-wrap h2{
        font-size: 48px;
    }
    .privacy-sec01{
        padding: 0 20px;
    }
    .privacy-sec01 .block_area ol,
    .privacy-sec01 .block_area ul{
        padding-left: 15px;
    }
}
@media screen and (max-width: 500px){
    .privacy-title-wrap{
        padding-top: 120px;
        padding-bottom: 60px;
    }
    .privacy-title-wrap h2{
        font-size: 28px;
    }
    .privacy-sec01{
        padding: 0 15px;
        padding-bottom: 80px;
        font-size: 14px;
    }
    .privacy-sec01 .block_area ol,
    .privacy-sec01 .block_area ul{
        padding-left: 10px;
    }
}


/* ========================================
   RxAI Chatbot Section - AI Solution
   ======================================== */

/* Sec01: 메인 소개 섹션 */
.rxai-chatbot-section {
	background-color: #000;
	width: 100%;
	padding: 80px 20px;
}

.rxai-chatbot-section .sec01-container {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-end;
}

/* 영문 메인 타이틀 */
.rxai-chatbot-section .sec01-main-title {
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: flex-end;
	text-align: right;
	width: 100%;
	margin-bottom: 40px;
}

.rxai-chatbot-section .sec01-main-title .title-line {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
}

.rxai-chatbot-section .sec01-main-title .title-word {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 8vw, 80px);
	line-height: 1.1;
	color: #fff;
	display: inline-block;
	opacity: 0;
	filter: blur(20px);
}

.rxai-chatbot-section .sec01-main-title .title-word.blur-2 {
	filter: blur(2px);
}

.rxai-chatbot-section .sec01-main-title .title-word.blur-4 {
	filter: blur(4px);
}

.rxai-chatbot-section .sec01-main-title .title-word.text-green {
	color: #87e64b;
}

/* 설명 텍스트 */
.rxai-chatbot-section .sec01-description {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 60px;
}

.rxai-chatbot-section .sec01-description p {
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #fff;
	margin: 0;
	opacity: 0;
}

.rxai-chatbot-section .sec01-description strong {
	font-weight: 600;
	color: #ddf160;
}

/* 기능 카드 그리드 */
.rxai-chatbot-section .sec01-feature-cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	margin-top: 20px;
}

.rxai-chatbot-section .feature-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	padding: 60px 40px;
	background-color: #161616;
	border-radius: 0;
	transition: background-color 0.3s ease;
	position: relative;
	opacity: 0;
}

.rxai-chatbot-section .feature-card:hover {
	background-color: #222222;
}

.rxai-chatbot-section .feature-card-image {
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-shrink: 0;
}

.rxai-chatbot-section .feature-card-image img {
	display: block;
	height: 80px;
	width: auto;
	object-fit: contain;
}

.rxai-chatbot-section .feature-card-title {
	font-family: 'Roboto Condensed', 'Noto Sans KR', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	margin: 0;
	white-space: pre-wrap;
}

/* ========================================
   RxAI Chatbot Section - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
	.rxai-chatbot-section {
		padding: 100px 30px;
	}
	
	.rxai-chatbot-section .sec01-container {
		gap: 26px;
	}
	
	.rxai-chatbot-section .sec01-main-title {
		margin-bottom: 50px;
	}
	
	.rxai-chatbot-section .sec01-main-title .title-line {
		gap: 10px;
	}
	
	.rxai-chatbot-section .sec01-description {
		margin-bottom: 70px;
	}
	
	.rxai-chatbot-section .sec01-description p {
		font-size: 17px;
	}
	
	.rxai-chatbot-section .sec01-feature-cards {
		gap: 20px;
	}
	
	.rxai-chatbot-section .feature-card {
		padding: 60px 50px;
	}
	
	.rxai-chatbot-section .feature-card-title {
		font-size: 22px;
	}
}

/* 768px 이상 (태블릿) */
@media (min-width: 768px) {
	.rxai-chatbot-section {
		padding: 120px 40px;
	}
	
	.rxai-chatbot-section .sec01-container {
		gap: 32px;
	}
	
	.rxai-chatbot-section .sec01-main-title {
		margin-bottom: 60px;
	}
	
	.rxai-chatbot-section .sec01-main-title .title-line {
		gap: 12px;
	}
	
	.rxai-chatbot-section .sec01-description {
		gap: 24px;
		margin-bottom: 80px;
	}
	
	.rxai-chatbot-section .sec01-description p {
		font-size: 18px;
	}
	
	.rxai-chatbot-section .sec01-feature-cards {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
	}
	
	.rxai-chatbot-section .feature-card {
		flex: 1 1 calc(50% - 10px);
		min-width: 280px;
	}
	
	.rxai-chatbot-section .feature-card-title {
		font-size: 24px;
	}
}

/* 1024px 이상 */
@media (min-width: 1024px) {
	.rxai-chatbot-section {
		padding: 140px 50px;
	}
	
	.rxai-chatbot-section .sec01-container {
		gap: 36px;
	}
	
	.rxai-chatbot-section .sec01-main-title {
		margin-bottom: 70px;
	}
	
	.rxai-chatbot-section .sec01-main-title .title-line {
		gap: 13px;
	}
	
	.rxai-chatbot-section .sec01-description {
		margin-bottom: 100px;
	}
	
	.rxai-chatbot-section .sec01-feature-cards {
		flex-wrap: nowrap;
		gap: 20px;
	}
	
	.rxai-chatbot-section .feature-card {
		flex: 1;
		min-width: 0;
	}
}

/* 1280px 이상 (PC) */
@media (min-width: 1280px) {
	.rxai-chatbot-section {
		padding: 160px 60px;
	}
	
	.rxai-chatbot-section .sec01-container {
		gap: 40px;
	}
	
	.rxai-chatbot-section .sec01-main-title {
		margin-bottom: 80px;
	}
	
	.rxai-chatbot-section .sec01-main-title .title-line {
		gap: 15px;
	}
	
	.sec01-main-title .title-word {
		font-size: 80px;
	}
	
	.rxai-chatbot-section .sec01-description {
		gap: 28px;
		margin-bottom: 120px;
	}
	
	.rxai-chatbot-section .sec01-description p {
		font-size: 20px;
		line-height: 1.8;
	}
	
	.rxai-chatbot-section .feature-card {
		padding: 60px 40px;
	}
	
	.rxai-chatbot-section .feature-card-title {
		font-size: 20px;
	}
}

/* 1920px 이상 */
@media (min-width: 1920px) {
	.rxai-chatbot-section .sec01-main-title .title-word {
		font-size: 96px;
	}
	
	.rxai-chatbot-section .sec01-description p {
		font-size: 22px;
	}
}


/* ========================================
   RxAI Chatbot Section - Sec02 Feature Summary
   ======================================== */

/* Sec02: Feature Summary 섹션 */
.rxai-chatbot-section.sec02-section,
.rxai-sns-section.sec02-section {
	background-color: #000;
	width: 100%;
	padding: 0 20px 60px 20px;
}

.sec02-container {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 60px;
	width: 100%;
}

/* 섹션 헤더 */
.sec02-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
}

.sec02-main-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 8vw, 68px);
	line-height: 1.1;
	flex-wrap: wrap;
}

.sec02-main-title .title-word {
	color: #fff;
	display: inline-block;
	opacity: 0;
	filter: blur(20px);
}

.sec02-main-title .title-word.blur-2 {
	filter: blur(2px);
}

.sec02-main-title .title-word.blur-4 {
	filter: blur(4px);
}

.sec02-main-title .text-green {
	color: #ddf160;
}

.sec02-subtitle {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 4vw, 28px);
	line-height: 1.4;
	color: #fff;
	margin: 10px 0 0 0;
	padding-bottom: 40px;
	opacity: 0;
}

/* 테이블 */
.sec02-table {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

/* 테이블 헤더 */
.table-header {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	padding: 0 10px;
	margin-bottom: 20px;
}

.table-header-cell {
	flex: 1;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(16px, 3vw, 24px);
	line-height: 1.4;
	color: #fff;
}

/* 테이블 바디 */
.table-body {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
}

.table-row {
	position: relative;
	width: 100%;
	padding-top: 20px;
	opacity: 0;
}

.table-border {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	pointer-events: none;
}

.table-border-white {
	background-color: #fff;
}

.table-border-dark {
	background-color: #444;
}

.table-row-content {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	padding: 0 10px;
	position: relative;
	z-index: 1;
}

.table-cell-label {
	flex: 1;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(16px, 3vw, 24px);
	line-height: 1.4;
	color: #fff;
}

.table-cell-value {
	flex: 1;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: clamp(14px, 2.5vw, 20px);
	line-height: 1.4;
	color: #ccc;
}

/* ========================================
   RxAI Chatbot Section - Sec02 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
	.rxai-chatbot-section.sec02-section,
	.rxai-sns-section.sec02-section {
		padding: 0 30px 70px 30px;
	}
	
	.table-header {
		gap: 50px;
	}
	
	.table-row-content {
		gap: 50px;
	}
}

/* 768px 이상 (태블릿) */
@media (min-width: 768px) {
	.rxai-chatbot-section.sec02-section,
	.rxai-sns-section.sec02-section {
		padding: 0 40px 80px 40px;
	}
	
	.sec02-container {
		gap: 80px;
	}
	
	.sec02-subtitle {
		margin-top: 15px;
		padding-bottom: 50px;
	}
	
	.table-header {
		gap: 60px;
	}
	
	.table-row-content {
		gap: 60px;
	}
}

/* 1024px 이상 */
@media (min-width: 1024px) {
	.rxai-chatbot-section.sec02-section,
	.rxai-sns-section.sec02-section {
		padding: 0 50px 90px 50px;
	}
}

/* 1280px 이상 (PC) */
@media (min-width: 1280px) {
	.rxai-chatbot-section.sec02-section,
	.rxai-sns-section.sec02-section {
		padding: 0 60px 100px 60px;
	}
	
	.sec02-container {
		gap: 100px;
	}
	
	.sec02-main-title {
		font-size: 68px;
	}
	
	.sec02-subtitle {
		font-size: 28px;
		margin-top: 20px;
		padding-bottom: 60px;
	}
	
	.table-header-cell {
		font-size: 24px;
	}
	
	.table-cell-label {
		font-size: 24px;
	}
	
	.table-cell-value {
		font-size: 20px;
	}
}


/* ========================================
   RxAI Chatbot Section - Sec03 Areas of Application
   ======================================== */

/* Sec03: Areas of Application 섹션 */
.rxai-chatbot-section.sec03-section {
	background-color: #000;
	width: 100%;
	padding: 0 20px 80px 20px;
}

.rxai-chatbot-section .sec03-container {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 60px;
	width: 100%;
}

/* 섹션 헤더 */
.rxai-chatbot-section .sec03-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
}

.rxai-chatbot-section .sec03-main-title {
	display: flex;
	gap: 15px;
	align-items: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 8vw, 68px);
	line-height: 1;
	color: #fff;
	flex-wrap: wrap;
}

.rxai-chatbot-section .sec03-main-title .title-word {
	display: inline-block;
	opacity: 0;
	filter: blur(20px);
}

.rxai-chatbot-section .sec03-main-title .text-green {
	color: #ddf160;
}

.rxai-chatbot-section .sec03-subtitle {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 4vw, 28px);
	line-height: 1.4;
	color: #fff;
	margin: 10px 0 0 0;
	padding-bottom: 40px;
	opacity: 0;
}

/* 카드 그리드 */
.rxai-chatbot-section .sec03-grid {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	width: 100%;
	flex-wrap: wrap;
}

.rxai-chatbot-section .sec03-card {
	flex: 1;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: flex-start;
	opacity: 0;
}

/* 이미지 컨테이너 */
.rxai-chatbot-section .card-image-container {
	width: 100%;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.rxai-chatbot-section .card-image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rxai-chatbot-section .card-image-small {
	height: 380px;
}

.rxai-chatbot-section .card-image-large {
	height: 580px;
}

.rxai-chatbot-section .card-image-bg {
	position: relative;
}

/* 텍스트 컨텐츠 */
.rxai-chatbot-section .card-text-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	width: 100%;
}

.rxai-chatbot-section .card-title {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 900;
	font-size: clamp(24px, 5vw, 40px);
	line-height: 1;
	color: #fff;
	white-space: pre-wrap;
	margin: 0;
}

.rxai-chatbot-section .card-description-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.rxai-chatbot-section .card-subtitle {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(16px, 3vw, 20px);
	line-height: 1.4;
	color: #fff;
	margin: 0;
}

.rxai-chatbot-section .card-body-text {
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: clamp(14px, 2.5vw, 18px);
	line-height: 1.6;
	color: #ccc;
	margin: 0;
}

/* ========================================
   RxAI Chatbot Section - Sec03 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
	.rxai-chatbot-section.sec03-section {
		padding: 0 30px 100px 30px;
	}
	
	.rxai-chatbot-section .sec03-card {
		min-width: 300px;
	}
}

/* 768px 이상 (태블릿) */
@media (min-width: 768px) {
	.rxai-chatbot-section.sec03-section {
		padding: 0 40px 120px 40px;
	}
	
	.rxai-chatbot-section .sec03-container {
		gap: 80px;
	}
	
	.rxai-chatbot-section .sec03-subtitle {
		margin-top: 15px;
		padding-bottom: 50px;
	}
}

/* 1024px 이상 */
@media (min-width: 1024px) {
	.rxai-chatbot-section.sec03-section {
		padding: 0 50px 140px 50px;
	}
	
	.rxai-chatbot-section .sec03-grid {
		flex-wrap: nowrap;
	}
	
	.rxai-chatbot-section .sec03-card {
		flex: 1;
		min-width: 0;
	}
}

/* 1280px 이상 (PC) */
@media (min-width: 1280px) {
	.rxai-chatbot-section.sec03-section {
		padding: 0 60px 180px 60px;
	}
	
	.rxai-chatbot-section .sec03-container {
		gap: 100px;
	}
	
	.rxai-chatbot-section .sec03-main-title {
		font-size: 68px;
	}
	
	.rxai-chatbot-section .sec03-subtitle {
		font-size: 28px;
		margin-top: 20px;
		padding-bottom: 60px;
	}
	
	.rxai-chatbot-section .card-title {
		font-size: 40px;
	}
	
	.rxai-chatbot-section .card-subtitle {
		font-size: 20px;
	}
	
	.rxai-chatbot-section .card-body-text {
		font-size: 18px;
	}
}


/* ========================================
   RxAI Chatbot Section - Sec04 Workflow Diagram
   ======================================== */

/* Sec04: Workflow Diagram 섹션 */
.rxai-chatbot-section.sec04-section,
.rxai-sns-section.sec04-section {
	background-color: #fff;
	width: 100%;
	padding: 40px 20px 60px 20px;
}

.sec04-container {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 80px;
	width: 100%;
	align-items: center;
}

/* 섹션 헤더 */
.sec04-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	width: 100%;
	text-align: center;
}

.sec04-main-title {
	display: flex;
	gap: 15px;
	align-items: center;
	justify-content: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 8vw, 68px);
	line-height: 1;
	color: #000;
	flex-wrap: wrap;
}

.sec04-main-title .title-word {
	display: inline-block;
	opacity: 0;
	filter: blur(20px);
}

.sec04-main-title .text-purple {
	color: #ac60ff;
}

.sec04-subtitle {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 4vw, 28px);
	line-height: 1.4;
	color: #000;
	margin: 10px 0 0 0;
	padding-bottom: 40px;
	opacity: 0;
}

/* 워크플로우 다이어그램 */
.workflow-diagram {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	padding: 0 20px;
}

.diagram-line {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background-color: #000;
	z-index: 0;
	display: none;
	transform: scaleX(0);
	transform-origin: left center;
}

.diagram-nodes {
	display: flex;
	gap: 10px;
	position: relative;
	z-index: 1;
	flex-wrap: wrap;
	justify-content: center;
}

/* 워크플로우 노드 */
.workflow-node {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	box-sizing: border-box;
	flex-shrink: 0;
	opacity: 0;
}

.workflow-node.node-filled-purple {
	background-color: #ac60ff;
	color: #fff;
	border: none;
}

.workflow-node.node-filled-lime {
	background-color: #ddf160;
	color: #000;
	border: none;
}

.workflow-node.node-outlined {
	background-color: #fff;
	color: #000;
	border: 1px solid #000;
}

.node-title {
	font-family: 'Roboto Condensed', 'Noto Sans KR', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.1;
	margin: 0 0 10px 0;
}

.node-description {
	font-family: 'Roboto Condensed', 'Noto Sans KR', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
	white-space: pre-wrap;
}

/* ========================================
   RxAI Chatbot Section - Sec04 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
	.rxai-chatbot-section.sec04-section,
	.rxai-sns-section.sec04-section {
		padding: 50px 30px 70px 30px;
	}
	
	.workflow-node {
		width: 220px;
		height: 220px;
	}
	
	.node-title {
		font-size: 17px;
	}
	
	.node-description {
		font-size: 15px;
	}
}

/* 768px 이상 (태블릿) */
@media (min-width: 768px) {
	.rxai-chatbot-section.sec04-section,
	.rxai-sns-section.sec04-section {
		padding: 60px 40px 80px 40px;
	}
	
	.sec04-container {
		gap: 100px;
	}
	
	.sec04-subtitle {
		margin-top: 15px;
		padding-bottom: 50px;
	}
	
	.workflow-node {
		width: 240px;
		height: 240px;
	}
	
	.node-title {
		font-size: 18px;
	}
	
	.node-description {
		font-size: 16px;
	}
}

/* 1024px 이상 */
@media (min-width: 1024px) {
	.rxai-chatbot-section.sec04-section,
	.rxai-sns-section.sec04-section {
		padding: 70px 50px 90px 50px;
	}
	
	.diagram-line {
		display: block;
	}
	
	.diagram-nodes {
		flex-wrap: nowrap;
		gap: 10px;
	}
	
	.workflow-node {
		width: 260px;
		height: 260px;
	}
	
	.node-title {
		font-size: 19px;
	}
	
	.node-description {
		font-size: 17px;
	}
}

/* 1280px 이상 (PC) */
@media (min-width: 1280px) {
	.rxai-chatbot-section.sec04-section,
	.rxai-sns-section.sec04-section {
		padding: 90px 60px 120px 60px;
	}
	
	.sec04-container {
		gap: 120px;
	}
	
	.sec04-main-title {
		font-size: 68px;
	}
	
	.sec04-subtitle {
		font-size: 28px;
		margin-top: 20px;
		padding-bottom: 60px;
	}
	
	.workflow-node {
		width: 280px;
		height: 280px;
	}
	
	.node-title {
		font-size: 20px;
	}
	
	.node-description {
		font-size: 18px;
	}
}


/* ========================================
   RxAI Chatbot Section - Sec05 Technical Points
   ======================================== */

/* Sec05: Technical Points 섹션 */
.rxai-chatbot-section.sec05-section {
	background-color: #fff;
	width: 100%;
	padding: 80px 20px;
}

.sec05-container {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 60px;
	width: 100%;
}

/* 상단바 (타이틀 + 탭) */
.sec05-top-bar {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
	flex-wrap: wrap;
	gap: 30px;
}

/* 섹션 헤더 */
.sec05-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.sec05-main-title {
	display: flex;
	gap: 15px;
	align-items: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 8vw, 68px);
	line-height: 1;
	color: #000;
	flex-wrap: wrap;
}

.sec05-main-title .title-word {
	display: inline-block;
	opacity: 0;
	filter: blur(20px);
}

.sec05-main-title .text-purple {
	color: #ac60ff;
}

.sec05-subtitle {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 4vw, 28px);
	line-height: 1.4;
	color: #000;
	margin: 0;
	opacity: 0;
}

/* 탭 버튼 */
.tech-tabs {
	display: flex;
	gap: 6px;
	align-items: center;
}

.tech-tab {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: #000;
	background-color: transparent;
	border: 1px solid #999;
	border-radius: 0;
	cursor: pointer;
	transition: all 0.3s ease;
	opacity: 0;
}

.tech-tab:hover {
	background-color: rgba(172, 96, 255, 0.1);
	border-color: #ac60ff;
}

.tech-tab.active {
	background-color: #ac60ff;
	border-color: #ac60ff;
	color: #fff;
}

/* 컨텐츠 영역 */
.sec05-content-area {
	display: flex;
	gap: 40px;
	width: 100%;
	flex-direction: column;
	opacity: 0;
}

/* 텍스트 영역 */
.tech-text-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	min-height: 300px;
	position: relative;
}

.tech-text-item {
	display: none;
	flex-direction: column;
	gap: 20px;
	opacity: 0;
	transition: opacity 0.5s ease;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.tech-text-item.active {
	display: flex;
	opacity: 1;
}

.tech-text-title {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 900;
	font-size: clamp(24px, 5vw, 40px);
	line-height: 1.1;
	color: #000;
	margin: 0;
}

.tech-text-subtitle {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 3.5vw, 24px);
	line-height: 1.4;
	color: #000;
	margin: 0;
}

.tech-text-description {
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: clamp(14px, 2.5vw, 20px);
	line-height: 1.6;
	color: #000;
	margin: 0;
}

/* 이미지 영역 (Swiper) */
.tech-image-area {
	flex: 1;
	height: 400px;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.tech-swiper {
	width: 100%;
	height: 100%;
}

.tech-swiper .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f5f5f5;
}

.tech-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ========================================
   RxAI Chatbot Section - Sec05 - 반응형
   ======================================== */

/* 500px 이상 */
@media (min-width: 500px) {
	.rxai-chatbot-section.sec05-section {
		padding: 100px 30px;
	}
	
	.tech-image-area {
		height: 450px;
	}
}

/* 768px 이상 (태블릿) */
@media (min-width: 768px) {
	.rxai-chatbot-section.sec05-section {
		padding: 120px 40px;
	}
	
	.sec05-container {
		gap: 80px;
	}
	
	.tech-image-area {
		height: 500px;
	}
}

/* 1024px 이상 */
@media (min-width: 1024px) {
	.rxai-chatbot-section.sec05-section {
		padding: 140px 50px;
	}
	
	.sec05-content-area {
		flex-direction: row;
		gap: 40px;
	}
	
	.tech-text-area {
		flex: 1;
		min-height: 400px;
		justify-content: flex-end;
	}
	
	.tech-image-area {
		flex: 1;
		height: 600px;
	}
}

/* 1280px 이상 (PC) */
@media (min-width: 1280px) {
	.rxai-chatbot-section.sec05-section {
		padding: 180px 60px;
	}
	
	.sec05-container {
		gap: 60px;
	}
	
	.sec05-main-title {
		font-size: 68px;
	}
	
	.sec05-subtitle {
		font-size: 28px;
	}
	
	.tech-text-title {
		font-size: 40px;
	}
	
	.tech-text-subtitle {
		font-size: 24px;
	}
	
	.tech-text-description {
		font-size: 20px;
	}
}


/* ========================================
   AI SNS - Sec01: AI Shorts Studio Intro
   ======================================== */

/* 섹션 기본 */
.rxai-sns-section.sec01-section {
	background-color: #000;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 80px 20px 60px 20px;
	box-sizing: border-box;
	overflow: hidden;
}

/* 컨테이너 */
.rxai-sns-section.sec01-section .sec01-container {
	display: flex;
	gap: 40px;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	flex-direction: column;
}

/* 텍스트 컬럼 */
.rxai-sns-section.sec01-section .sec01-text-column {
	display: flex;
	flex-direction: column;
	gap: 30px;
	align-items: flex-start;
	z-index: 10;
	width: 100%;
}

/* 메인 타이틀 */
.rxai-sns-section.sec01-section .sec01-main-title {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: clamp(36px, 9vw, 100px);
	line-height: 1;
	color: #fff;
	margin: 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.rxai-sns-section.sec01-section .sec01-main-title .title-word {
	display: inline-block;
	opacity: 0;
	filter: blur(20px);
}

/* 헤드라인 그룹 */
.rxai-sns-section.sec01-section .sec01-headline-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rxai-sns-section.sec01-section .sec01-subtitle {
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-weight: 400;
	font-size: clamp(12px, 3vw, 20px);
	line-height: 1.4;
	color: #fff;
	margin: 0;
	opacity: 0;
}

.rxai-sns-section.sec01-section .sec01-headline {
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-weight: 800;
	font-size: clamp(18px, 4.5vw, 36px);
	line-height: 1.5;
	color: #fff;
	margin: 0;
	opacity: 0;
}

.rxai-sns-section.sec01-section .sec01-headline .text-green {
	color: #ddf160;
}

/* 설명 그룹 */
.rxai-sns-section.sec01-section .sec01-description-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rxai-sns-section.sec01-section .sec01-description {
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-weight: 400;
	font-size: clamp(13px, 3.2vw, 20px);
	line-height: 1.7;
	color: #ccc;
	margin: 0;
	opacity: 0;
}

.rxai-sns-section.sec01-section .sec01-description strong {
	font-weight: 600;
	color: #fff;
}

/* 이미지 컬럼 */
.rxai-sns-section.sec01-section .sec01-image-column {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: nowrap;
	width: 100%;
}

.rxai-sns-section.sec01-section .sec01-mobile-image {
	position: relative;
	flex: 1;
	max-width: 420px;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	opacity: 0;
}

.rxai-sns-section.sec01-section .sec01-mobile-image img {
	width: 100%;
	height: auto;
	display: block;
}

.rxai-sns-section.sec01-section .sec01-mobile-image.mobile-1 {
	margin-top: 0;
}

.rxai-sns-section.sec01-section .sec01-mobile-image.mobile-2 {
	margin-top: 10px;
}

.rxai-sns-section.sec01-section .sec01-mobile-image.mobile-3 {
	margin-top: 0;
}

/* 500px 이상 */
@media (min-width: 500px) {
	.rxai-sns-section.sec01-section {
		padding: 90px 30px 70px 30px;
	}

	.rxai-sns-section.sec01-section .sec01-container {
		gap: 50px;
	}

	.rxai-sns-section.sec01-section .sec01-text-column {
		gap: 35px;
	}

	.rxai-sns-section.sec01-section .sec01-image-column {
		gap: 25px;
	}

	.rxai-sns-section.sec01-section .sec01-mobile-image {
		max-width: 240px;
	}

	.rxai-sns-section.sec01-section .sec01-mobile-image.mobile-2 {
		margin-top: 15px;
	}
}

/* 768px 이상 (태블릿) */
@media (min-width: 768px) {
	.rxai-sns-section.sec01-section {
		padding: 100px 40px 80px 40px;
	}

	.rxai-sns-section.sec01-section .sec01-container {
		gap: 40px;
		flex-direction: row;
		align-items: center;
	}

	.rxai-sns-section.sec01-section .sec01-text-column {
		flex: 1;
		gap: 40px;
		max-width: 50%;
	}

	.rxai-sns-section.sec01-section .sec01-image-column {
		flex: 1;
		gap: 20px;
		justify-content: flex-end;
	}

	.rxai-sns-section.sec01-section .sec01-mobile-image {
		max-width: 270px;
	}

	.rxai-sns-section.sec01-section .sec01-mobile-image.mobile-2 {
		margin-top: 20px;
	}
}

/* 1024px 이상 */
@media (min-width: 1024px) {
	.rxai-sns-section.sec01-section {
		padding: 110px 50px 90px 50px;
	}

	.rxai-sns-section.sec01-section .sec01-container {
		gap: 50px;
	}

	.rxai-sns-section.sec01-section .sec01-text-column {
		flex: 1;
		gap: 50px;
		max-width: 50%;
	}

	.rxai-sns-section.sec01-section .sec01-image-column {
		flex: 1;
		gap: 25px;
	}

	.rxai-sns-section.sec01-section .sec01-mobile-image {
		max-width: 300px;
	}

	.rxai-sns-section.sec01-section .sec01-mobile-image.mobile-2 {
		margin-top: 25px;
	}
}

/* 1280px 이상 (PC) */
@media (min-width: 1280px) {
	.rxai-sns-section.sec01-section {
		padding: 120px 60px 100px 60px;
	}

	.rxai-sns-section.sec01-section .sec01-container {
		gap: 60px;
	}

	.rxai-sns-section.sec01-section .sec01-text-column {
		flex: 1;
		gap: 60px;
		max-width: 50%;
	}

	.rxai-sns-section.sec01-section .sec01-image-column {
		flex: 1;
		gap: 30px;
	}

	.rxai-sns-section.sec01-section .sec01-mobile-image {
		max-width: 360px;
	}

	.rxai-sns-section.sec01-section .sec01-mobile-image.mobile-2 {
		margin-top: 30px;
	}
}

/* 1920px 이상 (대형 화면) */
@media (min-width: 1920px) {
	.rxai-sns-section.sec01-section {
		padding: 140px 80px 120px 80px;
	}

	.rxai-sns-section.sec01-section .sec01-container {
		gap: 80px;
	}

	.rxai-sns-section.sec01-section .sec01-text-column {
		flex: 1;
		max-width: 50%;
	}

	.rxai-sns-section.sec01-section .sec01-image-column {
		flex: 1;
	}

	.rxai-sns-section.sec01-section .sec01-mobile-image {
		max-width: 420px;
	}

	.rxai-sns-section.sec01-section .sec01-mobile-image.mobile-2 {
		margin-top: 35px;
	}
}


/* ========================================
   AI SNS - Sec03: RxAI SNS Creates a Standard
   ======================================== */

/* 섹션 기본 */
.rxai-sns-section.sec03-section {
	background-color: #000;
	width: 100%;
	padding: 40px 20px 60px 20px;
}

.rxai-sns-section.sec03-section .sec03-container {
	display: flex;
	flex-direction: column;
	gap: 60px;
	width: 100%;
}

/* 섹션 헤더 */
.rxai-sns-section.sec03-section .sec03-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
}

.rxai-sns-section.sec03-section .sec03-main-title {
	display: flex;
	gap: 15px;
	align-items: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 8vw, 68px);
	line-height: 1;
	color: #fff;
	flex-wrap: wrap;
	margin: 0;
}

.rxai-sns-section.sec03-section .sec03-main-title .title-word {
	display: inline-block;
	opacity: 0;
	filter: blur(20px);
}

.rxai-sns-section.sec03-section .sec03-main-title .text-green {
	color: #ddf160;
}

.rxai-sns-section.sec03-section .sec03-subtitle {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 4vw, 28px);
	line-height: 1.4;
	color: #fff;
	opacity: 0;
	margin: 10px 0 0 0;
	padding-bottom: 40px;
	opacity: 0;
}

/* 카드 그리드 */
.rxai-sns-section.sec03-section .sec03-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	width: 100%;
}

.rxai-sns-section.sec03-section .sec03-card {
	display: flex;
	flex-direction: column;
	gap: 30px;
	align-items: flex-start;
	opacity: 0;
}

/* 이미지 래퍼 */
.rxai-sns-section.sec03-section .card-image-wrapper {
	width: 100%;
	max-width: 280px;
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	flex-shrink: 0;
}

.rxai-sns-section.sec03-section .card-image-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}

/* 텍스트 컨텐츠 */
.rxai-sns-section.sec03-section .card-text-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	width: 100%;
}

.rxai-sns-section.sec03-section .card-title {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 900;
	font-size: clamp(32px, 6vw, 60px);
	line-height: 1;
	color: #fff;
	margin: 0;
}

.rxai-sns-section.sec03-section .card-description-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.rxai-sns-section.sec03-section .card-subtitle {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(16px, 3.5vw, 24px);
	line-height: 1.4;
	color: #fff;
	margin: 0;
}

.rxai-sns-section.sec03-section .card-body-text {
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: clamp(14px, 3vw, 18px);
	line-height: 1.6;
	color: #ccc;
	margin: 0;
}

/* 500px 이상 */
@media (min-width: 500px) {
	.rxai-sns-section.sec03-section {
		padding: 50px 30px 70px 30px;
	}

	.rxai-sns-section.sec03-section .sec03-grid {
		gap: 50px;
	}
}

/* 768px 이상 (태블릿) */
@media (min-width: 768px) {
	.rxai-sns-section.sec03-section {
		padding: 60px 40px 80px 40px;
	}

	.rxai-sns-section.sec03-section .sec03-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}

	.rxai-sns-section.sec03-section .sec03-card {
		flex-direction: row;
		gap: 40px;
		align-items: flex-end;
	}

	.rxai-sns-section.sec03-section .sec03-card:nth-child(2) {
		margin-top: 60px;
	}

	.rxai-sns-section.sec03-section .sec03-card:nth-child(4) {
		margin-top: 60px;
	}

	.rxai-sns-section.sec03-section .card-image-wrapper {
		width: auto;
	}

	.rxai-sns-section.sec03-section .card-text-content {
		flex: 1;
		justify-content: flex-end;
	}

	.rxai-sns-section.sec03-section .sec03-subtitle {
		margin-top: 15px;
		padding-bottom: 50px;
	}
}

/* 1024px 이상 */
@media (min-width: 1024px) {
	.rxai-sns-section.sec03-section {
		padding: 70px 50px 90px 50px;
	}

	.rxai-sns-section.sec03-section .sec03-grid {
		gap: 50px;
	}

	.rxai-sns-section.sec03-section .sec03-card {
		gap: 50px;
	}

	.rxai-sns-section.sec03-section .sec03-card:nth-child(2) {
		margin-top: 80px;
	}

	.rxai-sns-section.sec03-section .sec03-card:nth-child(4) {
		margin-top: 80px;
	}
}

/* 1280px 이상 (PC) */
@media (min-width: 1280px) {
	.rxai-sns-section.sec03-section {
		padding: 80px 60px 100px 60px;
	}

	.rxai-sns-section.sec03-section .sec03-container {
		gap: 80px;
	}

	.rxai-sns-section.sec03-section .sec03-grid {
		gap: 60px;
	}

	.rxai-sns-section.sec03-section .sec03-card {
		gap: 60px;
	}

	.rxai-sns-section.sec03-section .sec03-card:nth-child(2) {
		margin-top: 100px;
	}

	.rxai-sns-section.sec03-section .sec03-card:nth-child(4) {
		margin-top: 100px;
	}

	.rxai-sns-section.sec03-section .sec03-subtitle {
		font-size: 28px;
		margin-top: 20px;
		padding-bottom: 60px;
	}
}

/* 1920px 이상 */
@media (min-width: 1920px) {
	.rxai-sns-section.sec03-section {
		padding: 90px 80px 120px 80px;
	}

	.rxai-sns-section.sec03-section .sec03-grid {
		gap: 80px;
	}

	.rxai-sns-section.sec03-section .sec03-card {
		gap: 80px;
	}

	.rxai-sns-section.sec03-section .sec03-card:nth-child(2) {
		margin-top: 120px;
	}

	.rxai-sns-section.sec03-section .sec03-card:nth-child(4) {
		margin-top: 120px;
	}
}


/* ========================================
   AI SNS - Sec05: Technical points
   ======================================== */

/* 섹션 기본 */
.rxai-sns-section.sec05-section {
	background-color: #fff;
	width: 100%;
	padding: 40px 20px 60px 20px;
}

.rxai-sns-section.sec05-section .sec05-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

/* 섹션 헤더 */
.rxai-sns-section.sec05-section .sec05-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
}

.rxai-sns-section.sec05-section .sec05-main-title {
	display: flex;
	gap: 15px;
	align-items: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 8vw, 68px);
	line-height: 1;
	color: #000;
	flex-wrap: wrap;
	margin: 0;
}

.rxai-sns-section.sec05-section .sec05-main-title .title-word {
	display: inline-block;
	opacity: 0;
	filter: blur(20px);
}

.rxai-sns-section.sec05-section .sec05-main-title .text-purple {
	color: #ac60ff;
}

.rxai-sns-section.sec05-section .sec05-subtitle {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 4vw, 28px);
	line-height: 1.4;
	color: #000;
	opacity: 0;
	margin: 0;
	opacity: 0;
}

/* 설명 텍스트 */
.rxai-sns-section.sec05-section .sec05-description {
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: clamp(14px, 3vw, 18px);
	line-height: 1.7;
	color: #333;
	opacity: 0;
	margin: 0 0 20px 0;
	opacity: 0;
}

.rxai-sns-section.sec05-section .sec05-description strong {
	font-weight: 700;
	color: #000;
}

/* 테이블 */
.rxai-sns-section.sec05-section .sec05-table {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

/* 테이블 헤더 */
.rxai-sns-section.sec05-section .tech-table-header {
	display: flex;
	gap: 20px;
	padding: 20px 10px;
	border-bottom: 1px solid #000;
}

.rxai-sns-section.sec05-section .tech-table-header-cell {
	flex: 1;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(14px, 2.8vw, 18px);
	line-height: 1.4;
	color: #000;
	text-align: left;
}

/* 테이블 바디 */
.rxai-sns-section.sec05-section .tech-table-body {
	display: flex;
	flex-direction: column;
}

.rxai-sns-section.sec05-section .tech-table-row {
	position: relative;
	width: 100%;
	opacity: 0;
}

.rxai-sns-section.sec05-section .tech-table-border {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: #ddd;
}

.rxai-sns-section.sec05-section .tech-table-row-content {
	display: flex;
	gap: 20px;
	padding: 20px 10px;
}

.rxai-sns-section.sec05-section .tech-table-cell {
	flex: 1;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: clamp(13px, 2.5vw, 16px);
	line-height: 1.6;
	color: #666;
	text-align: left;
}

.rxai-sns-section.sec05-section .tech-table-cell:first-child {
	font-weight: 600;
	color: #000;
}

/* 500px 이상 */
@media (min-width: 500px) {
	.rxai-sns-section.sec05-section {
		padding: 50px 30px 70px 30px;
	}

	.rxai-sns-section.sec05-section .sec05-container {
		gap: 15px;
	}

	.rxai-sns-section.sec05-section .tech-table-header {
		gap: 30px;
		padding: 25px 15px;
	}

	.rxai-sns-section.sec05-section .tech-table-row-content {
		gap: 30px;
		padding: 25px 15px;
	}
}

/* 768px 이상 (태블릿) */
@media (min-width: 768px) {
	.rxai-sns-section.sec05-section {
		padding: 60px 40px 80px 40px;
	}

	.rxai-sns-section.sec05-section .sec05-container {
		gap: 20px;
	}

	.rxai-sns-section.sec05-section .tech-table-header {
		gap: 40px;
		padding: 30px 20px;
	}

	.rxai-sns-section.sec05-section .tech-table-row-content {
		gap: 40px;
		padding: 30px 20px;
	}

	.rxai-sns-section.sec05-section .tech-table-header-cell {
		font-size: 18px;
	}

	.rxai-sns-section.sec05-section .tech-table-cell {
		font-size: 16px;
	}
}

/* 1024px 이상 */
@media (min-width: 1024px) {
	.rxai-sns-section.sec05-section {
		padding: 70px 50px 90px 50px;
	}

	.rxai-sns-section.sec05-section .sec05-container {
		gap: 25px;
	}

	.rxai-sns-section.sec05-section .tech-table-header-cell {
		font-size: 20px;
	}

	.rxai-sns-section.sec05-section .tech-table-cell {
		font-size: 17px;
	}
}

/* 1280px 이상 (PC) */
@media (min-width: 1280px) {
	.rxai-sns-section.sec05-section {
		padding: 80px 60px 100px 60px;
	}

	.rxai-sns-section.sec05-section .sec05-container {
		gap: 30px;
	}

	.rxai-sns-section.sec05-section .sec05-subtitle {
		font-size: 28px;
	}

	.rxai-sns-section.sec05-section .sec05-description {
		font-size: 18px;
	}

	.rxai-sns-section.sec05-section .tech-table-header-cell {
		font-size: 22px;
	}

	.rxai-sns-section.sec05-section .tech-table-cell {
		font-size: 18px;
	}
}

/* 1920px 이상 */
@media (min-width: 1920px) {
	.rxai-sns-section.sec05-section {
		padding: 90px 80px 120px 80px;
	}
}


/* ========================================
   AI SNS - Sec06: Areas of application
   ======================================== */

/* 섹션 기본 */
.rxai-sns-section.sec06-section {
	background-color: #fff;
	width: 100%;
	padding: 40px 20px 60px 20px;
}

.rxai-sns-section.sec06-section .sec06-container {
	display: flex;
	flex-direction: column;
	gap: 60px;
	width: 100%;
}

/* 섹션 헤더 */
.rxai-sns-section.sec06-section .sec06-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
}

.rxai-sns-section.sec06-section .sec06-main-title {
	display: flex;
	gap: 15px;
	align-items: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 8vw, 68px);
	line-height: 1;
	color: #000;
	flex-wrap: wrap;
	margin: 0;
}

.rxai-sns-section.sec06-section .sec06-main-title .title-word {
	display: inline-block;
	opacity: 0;
	filter: blur(20px);
}

.rxai-sns-section.sec06-section .sec06-main-title .text-purple {
	color: #ac60ff;
}

.rxai-sns-section.sec06-section .sec06-subtitle {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(16px, 3.5vw, 24px);
	line-height: 1.4;
	color: #000;
	opacity: 0;
	margin: 0;
	opacity: 0;
}

/* 카드 그리드 */
.rxai-sns-section.sec06-section .sec06-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
	width: 100%;
}

.rxai-sns-section.sec06-section .sec06-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	padding: 40px 30px;
	background-color: #f5f5f5;
	border-radius: 0;
	opacity: 0;
}

/* 카드 아이콘 */
.rxai-sns-section.sec06-section .card-icon-wrapper {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.rxai-sns-section.sec06-section .card-icon-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 카드 텍스트 */
.rxai-sns-section.sec06-section .sec06-card .card-title {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 900;
	font-size: clamp(20px, 4vw, 28px);
	line-height: 1.2;
	color: #000;
	margin: 0;
}

.rxai-sns-section.sec06-section .sec06-card .card-subtitle {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(14px, 3vw, 18px);
	line-height: 1.4;
	color: #000;
	margin: 0;
}

.rxai-sns-section.sec06-section .sec06-card .card-description {
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: clamp(12px, 2.5vw, 16px);
	line-height: 1.6;
	color: #666;
	margin: 0;
}

/* 500px 이상 */
@media (min-width: 500px) {
	.rxai-sns-section.sec06-section {
		padding: 50px 30px 70px 30px;
	}

	.rxai-sns-section.sec06-section .sec06-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 17px;
	}
}

/* 768px 이상 (태블릿) */
@media (min-width: 768px) {
	.rxai-sns-section.sec06-section {
		padding: 60px 40px 80px 40px;
	}

	.rxai-sns-section.sec06-section .sec06-container {
		gap: 70px;
	}

	.rxai-sns-section.sec06-section .sec06-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.rxai-sns-section.sec06-section .sec06-card {
		padding: 50px 35px;
	}
}

/* 1024px 이상 */
@media (min-width: 1024px) {
	.rxai-sns-section.sec06-section {
		padding: 70px 50px 90px 50px;
	}

	.rxai-sns-section.sec06-section .sec06-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 15px;
	}

	.rxai-sns-section.sec06-section .sec06-card {
		padding: 50px 30px;
	}
}

/* 1280px 이상 (PC) */
@media (min-width: 1280px) {
	.rxai-sns-section.sec06-section {
		padding: 80px 60px 100px 60px;
	}

	.rxai-sns-section.sec06-section .sec06-container {
		gap: 80px;
	}

	.rxai-sns-section.sec06-section .sec06-grid {
		gap: 20px;
	}

	.rxai-sns-section.sec06-section .sec06-subtitle {
		font-size: 24px;
	}
}

/* 1920px 이상 */
@media (min-width: 1920px) {
	.rxai-sns-section.sec06-section {
		padding: 90px 80px 120px 80px;
	}

	.rxai-sns-section.sec06-section .sec06-grid {
		gap: 25px;
	}
}


/* ============================================
   RxAI SNS - Sec07: This type of team
   ============================================ */

.rxai-sns-section.sec07-section {
	background-color: #FFFFFF;
	padding: 40px 20px 60px 20px;
	width: 100%;
}

.rxai-sns-section.sec07-section .sec07-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* 헤더 */
.rxai-sns-section.sec07-section .sec07-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

.rxai-sns-section.sec07-section .sec07-main-title {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 700;
	color: #000000;
	line-height: 1.2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.3em;
}

.rxai-sns-section.sec07-section .sec07-main-title .title-word {
	opacity: 0;
	filter: blur(20px);
}

.rxai-sns-section.sec07-section .sec07-subtitle {
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-size: clamp(14px, 2vw, 18px);
	font-weight: 400;
	color: #666666;
	line-height: 1.5;
	opacity: 0;
}

/* 카드 그리드 */
.rxai-sns-section.sec07-section .sec07-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	width: 100%;
}

/* 카드 */
.rxai-sns-section.sec07-section .sec07-card {
	background-color: #FFFFFF;
	border-radius: 0;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 300px;
	opacity: 0;
}

.rxai-sns-section.sec07-section .card-image-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.rxai-sns-section.sec07-section .card-image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.rxai-sns-section.sec07-section .card-content {
	position: relative;
	z-index: 2;
	padding: 30px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: flex-end;
	flex: 1;
}

.rxai-sns-section.sec07-section .card-title {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1.3;
}

.rxai-sns-section.sec07-section .card-description {
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-size: clamp(14px, 1.8vw, 18px);
	font-weight: 400;
	color: #FFFFFF;
	line-height: 1.6;
}

/* 500px 이상 */
@media (min-width: 500px) {
	.rxai-sns-section.sec07-section {
		padding: 35px 30px 50px 30px;
	}

	.rxai-sns-section.sec07-section .sec07-container {
		gap: 35px;
	}

	.rxai-sns-section.sec07-section .sec07-grid {
		gap: 25px;
	}

	.rxai-sns-section.sec07-section .sec07-card {
		min-height: 320px;
	}

	.rxai-sns-section.sec07-section .card-content {
		padding: 35px 25px;
		gap: 10px;
	}
}

/* 768px 이상 - 2x2 그리드 */
@media (min-width: 768px) {
	.rxai-sns-section.sec07-section {
		padding: 50px 40px 70px 40px;
	}

	.rxai-sns-section.sec07-section .sec07-container {
		gap: 50px;
	}

	.rxai-sns-section.sec07-section .sec07-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}

	.rxai-sns-section.sec07-section .sec07-card {
		min-height: 350px;
	}

	.rxai-sns-section.sec07-section .card-content {
		padding: 40px 30px;
		gap: 12px;
	}
}

/* 1024px 이상 */
@media (min-width: 1024px) {
	.rxai-sns-section.sec07-section {
		padding: 60px 60px 80px 60px;
	}

	.rxai-sns-section.sec07-section .sec07-container {
		gap: 60px;
	}

	.rxai-sns-section.sec07-section .sec07-grid {
		gap: 35px;
	}

	.rxai-sns-section.sec07-section .sec07-card {
		min-height: 380px;
	}

	.rxai-sns-section.sec07-section .card-content {
		padding: 45px 35px;
	}
}

/* 1280px 이상 */
@media (min-width: 1280px) {
	.rxai-sns-section.sec07-section {
		padding: 70px 80px 90px 80px;
	}

	.rxai-sns-section.sec07-section .sec07-container {
		gap: 70px;
	}

	.rxai-sns-section.sec07-section .sec07-grid {
		gap: 40px;
	}

	.rxai-sns-section.sec07-section .sec07-card {
		min-height: 400px;
	}

	.rxai-sns-section.sec07-section .card-content {
		padding: 50px 40px;
	}
}

/* 1920px 이상 */
@media (min-width: 1920px) {
	.rxai-sns-section.sec07-section {
		padding: 80px 100px 100px 100px;
	}

	.rxai-sns-section.sec07-section .sec07-container {
		gap: 80px;
	}

	.rxai-sns-section.sec07-section .sec07-grid {
		gap: 50px;
	}

	.rxai-sns-section.sec07-section .sec07-card {
		min-height: 420px;
	}

	.rxai-sns-section.sec07-section .card-content {
		padding: 55px 45px;
		gap: 15px;
	}
}


	<!-- Contact Section -->