/* Global Styles */
/* Mobile Safe Area Support */
/* iOS 디바이스의 홈 인디케이터 및 노치 영역 대응 */
:root {
    --ktb-tech-navy: #000040;
    --ktb-tech-blue: #0043ff;
    --ktb-tech-sky: #78CDFF;
    --ktb-tech-navy-hover: #0238D1;
    --ktb-tech-lemon-yellow: #FFF388;
    --ktb-tech-rose: #FFA0C4;
    --ktb-tech-pink: #FFC0FF;
    --ktb-tech-Mauve: #C3A5FF;
    --ktb-tech-yellow-gradient: linear-gradient(180deg, #FFE600 10%, #FFB900 100%);
    --ktb-tech-red-gradient: linear-gradient(180deg, #FF804E 10%, #FF0073 100%);
    --ktb-tech-pink-gradient: linear-gradient(180deg, #F57DF0 10%, #F000E3 100%);
    --ktb-tech-violet-gradient: linear-gradient(180deg, #AF7DEB 10%, #7A0CFF 100%);
    --ktb-tech-blue-gradient: linear-gradient(180deg, #00B7F8 10%, #006EF7 100%);
    --ktb-tech-sky-gradient: linear-gradient(180deg, #34B7F9 40%, #87E8DF 100%);
    /* Safe area 변수 정의 */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* Dark theme overrides */
[data-theme="dark"] {
    --ktb-tech-blue: var(--primary);
    --ktb-tech-navy-hover: var(--primary-hover);
}

body {
    background-color: var(--gray-000);
    padding-top: 7.5rem; /* navbar 높이에 맞게 조정 */
    word-break: keep-all;
}

h5 {
    letter-spacing: -.012rem;
}

.title {
    color: var(--text-normal);
    margin-bottom: var(--space-700);
}

.content-section {
    padding: var(--space-800) 0;
}

.badge-contrast {
    background-color: rgba(62, 64, 76, .32);
}

.badge-ktb-blue {
    background-color: #0043ff;
    color: var(--white);
    animation: pulse-blue 2s infinite;
}

.badge-ktb-navy {
    background-color: var(--ktb-tech-navy);
    color: var(--white);
    animation: pulse-navy 2s infinite;
}

a:focus,a:hover {
    text-decoration: none !important;
}

@-webkit-keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 67, 255, 0.6);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(0, 67, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 67, 255, 0);
    }
}

@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 67, 255, 0.6);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(0, 67, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 67, 255, 0);
    }
}

@-webkit-keyframes pulse-navy {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 64, 0.6);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(0, 0, 64, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 64, 0);
    }
}

@keyframes pulse-navy {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 64, 0.6);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(0, 0, 64, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 64, 0);
    }
}

/* Navigation */
.navbar {
    padding: var(--space-200) 0 !important;
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: top 0.2s ease-in-out;
    background-color: var(--gray-000);
    will-change: background-color, border-color;
}

.navbar.scrolled {
    border-bottom: .0625rem solid var(--border-color);
    background-color: var(--gray-000);
}

.navbar.scrolled.no-border {
    border-bottom: none;
}

.navbar .logo {
    height: var(--size-600);
}

.nav-link {
    display: flex;
    align-items: center;
    padding: var(--space-100) var(--space-200);
}

.nav-icon {
    width: var(--size-200);
    height: var(--size-200);
    margin-left: var(--size-050);
}

.theme-icon {
    width: var(--size-250);
    height: var(--size-250);
}

.theme-toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-000) !important;
    width: var(--size-500);
    height: var(--size-500);
}

.navbar .nav-link {
    font-weight: var(--font-weight-500) !important;
    display: flex !important;
    align-items: center !important; 
}

.navbar-nav .nav-item:last-child {
    margin-right: var(--space-000);
}

.blog-link-item {
    display: flex;
    align-items: center;
}

.blog-link-item::after {
    content: '';
    display: inline-block;
    width: 1.5px;
    height: var(--size-200);
    background-color: var(--gray-500);
    margin-left: var(--space-250); /* 구분선 오른쪽 여백 */
    margin-right: var(--space-050); /* 구분선 왼쪽 여백 */
}

/* Hamburger menu styles for all screen sizes */
.navbar-toggler {
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: relative;
    width: 40px;
    height: 40px;
}

/* 기존 vapor 시스템의 ::before 아이콘 제거 */
.navbar-toggler::before {
    content: "" !important;
    display: none !important;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.hamburger-line {
    width: 24px;
    height: 3px;
    background-color: var(--gray-900);
    border-radius: 1.5px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center;
}

/* 다크 테마에서 햄버거 메뉴 색상 */
[data-theme="dark"] .hamburger-line {
    background-color: #dddde4;
}

/* 열렸을 때 X 모양으로 변형 */
.navbar-toggler[aria-expanded="true"] .hamburger-line:first-child {
    transform: translateY(4.5px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .hamburger-line:last-child {
    transform: translateY(-4.5px) rotate(-45deg);
}


/* Hero Section */
.hero-section {
    background-color: var(--gray-000);
    padding-bottom: var(--space-800);
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
}

.hero-content-wrapper {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    gap: var(--space-300);
}

/* Hero 상단 행 스타일 */
.hero-top-row {
    display: -webkit-box;
    display: flex;
    gap: var(--space-300);
    height: 32rem;
}

.hero-left-container {
    -webkit-box-flex: 3;
    flex: 3;
    position: relative;
    height: 100%;
    border-radius: var(--border-radius-600);
    overflow: hidden;
    background-color: #f0f0f0;
}

.hero-right-container {
    -webkit-box-flex: 1;
    flex: 1;
    position: relative;
    height: 100%;
    border-radius: var(--border-radius-600);
    overflow: hidden;
}

.hero-right-background {
    width: 100%;
    height: 100%;
    /* background: var(--ktb-tech-sky-gradient); */
    background: var(--background-normal);
    border-radius: var(--border-radius-600);
    border: 1px solid var(--border-color);
}

.hero-right-image {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    /* height: 70%; */
    object-fit: cover;
}

.hero-image-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-left-image {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-left-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-image-dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black);
    opacity: 0.32;
    pointer-events: none;
}

.hero-title {
    position: absolute;
    left: var(--space-500);
    bottom: var(--space-500);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-700);
    font-size: var(--font-size-700);
    color: var(--white);
    margin-bottom: 0;
}

/* Hero 하단 행 스타일 (새로 추가된 부분) */
.hero-bottom-row {
    display: -webkit-box;
    display: flex;
    gap: var(--space-300);
    height: 16rem;
}

.hero-card-container {
    -webkit-box-flex: 1;
    flex: 1;
    height: 100%;
    position: relative;
    border-radius: var(--border-radius-600);
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    background: var(--background-alternative-01);
}

.hero-card-container:hover {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

.hero-card-image {
    width: auto;
    height: 7.5rem;
    position: absolute;
    right: var(--space-400);
    top: var(--space-400);
}

.hero-card-bg {
    width: 100%;
    height: 100%;
}

.hero-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.hero-card-container:hover .hero-card-overlay {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.hero-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--space-400);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.hero-card-title {
    color: var(--text-normal);
    margin-bottom: 0;
}

.hero-card-subtitle {
    color: var(--text-hint);
    margin-bottom: var(--space-050);
}

.hero-card-description {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    margin: 0;
    height: 0;
}

.hero-card-container:hover .hero-card-description {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    height: auto;
}

.hero-card-container:hover .hero-card-content {
    .hero-card-title {
        margin-bottom: var(--space-200);
    }
}

.mute-toggle-button {
    position: absolute;
    bottom: var(--space-500);
    right: var(--space-500);
    z-index: 2;
    width: var(--size-600);
    height: var(--size-600);
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    background-color: rgba(255, 255, 255, 0.16);
}

.mute-toggle-button:hover,
.mute-toggle-button:focus {
    background-color: rgba(255, 255, 255, 0.24) !important;
}

.mute-toggle-button:active {
    background-color: rgba(255, 255, 255, 0.32) !important;
}

.mute-icon {
    width: var(--size-300);
    height: var(--size-300);
    color: var(--text-light);
    display: flex;
    justify-content: center;
    align-items: center;
}

.subtitle {
    text-align: center;
    color: var(--gray-950);
    margin-bottom: var(--space-400);
}

/* Course Section */

.course-header {
    margin-bottom: var(--space-600);
}

.courses-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-300);
}

.course-thumb {
    width: 100%;
    aspect-ratio: 5 / 3;
    border-radius: var(--border-radius-400);
    overflow: hidden;
    background-color: var(--gray-100);
    position: relative;
}

.course-status-badge {
    position: absolute;
    top: var(--space-200);
    left: var(--space-200);
    z-index: 1;
}

.course-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease;
}

.course-card:hover .course-video {
    transform: scale(1.05);
}

.course-name {
    color: var(--text-normal);
    margin-bottom: var(--space-050);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    display: flex;
}

.course-period {
    color: var(--text-hint);
    margin-bottom: var(--space-150);
    display: flex;
    align-items: center;
    gap: var(--space-050);
}

.badge-container {
    gap: var(--space-050);
    display: flex;
    flex-wrap: wrap;
}

.badge-hint {
    color: var(--text-hint-alternative);
}

.course-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-150);
}

/* Introduction Section */
 /* Bento Grid Layout */
 .intro-bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-300);
}

.bento-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-400);
}

/* Icon Container */
.intro-card-icon {
    width: var(--size-800);
    height: var(--size-800);
    border-radius: var(--border-radius-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.intro-card-icon.grow-icon {
    background: var(--ktb-tech-Mauve);
}

.intro-card-icon.basic-icon {
    background: var(--ktb-tech-sky);
}

.intro-card-icon.focus-icon {
    background: var(--ktb-tech-rose);
}

.intro-card-icon.team-icon {
    background: var(--ktb-tech-lemon-yellow);
}

.intro-card-icon svg {
    width: var(--size-500);
    height: var(--size-500);
    color: #2b2d36;
}

/* Card Content */
.intro-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
    flex-grow: 1;
}

.intro-card-title {
    color: var(--text-normal);
    margin: 0;
}

.intro-card-description {
    color: var(--text-normal);
    margin: 0;
    flex-grow: 1;
}

/* Award Section */
/* 12col grid system */
.col-6 {
    padding: 0;
}

.award-row {
    display: flex;
    flex-direction: row;
}

.content-section.award-section {
    background-color: var(--background-alternative-01);
}

/* text area - 6col */
.text-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* image area - 6col */
.image-column {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* text style */
.award-title {
    color: var(--text-normal);
    margin-bottom: var(--space-300);
}

.award-description {
    color: var(--text-normal);
    margin-bottom: var(--space-200);
}

.award-meta {
    color: var(--text-hint);
    margin: 0;
}

.meta-icon {
    width: var(--size-200);
    height: var(--size-200);
    color: var(--text-hint);
}

/* image container */
.image-container {
    width: 100%;
    max-width: 26.25rem;
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius-600);
    overflow: hidden;
    background-color: var(--background-alternative-01);
    position: relative;
}

.award-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

 /* Story Section */

.story-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-300);
    width: 100%;
}

.story-card {
    position: relative;
    border-radius: var(--border-radius-600);
    overflow: hidden;
    background-color: var(--background-alternative-01);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.story-card:hover {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

/* 첫 번째와 두 번째 카드 (넓은 직사각형) */
.story-card-1,
.story-card-2 {
    width: calc(50% - var(--space-300) / 2);
    height: 22.75rem;
}

.story-card-ai {
    width: 100%;
    height: 22.75rem;
}

/* 정사각형 카드들 */
.story-card-3,
.story-card-4 {
    width: calc(50% - var(--space-300) / 2);
    height: 22.75rem;
}

.story-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, var(--gray-050) 95%);
}

.story-info {
    position: absolute;
    padding: var(--space-400);
    width: 100%;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

.story-text {
    margin-bottom: var(--space-100);
    color: var(--text-normal);
}

.story-student-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.story-student {
    color: var(--text-hint);
    margin-bottom: 0;
}

.pc-story-video {
    display: block;
}

.mobile-story-video {
    display: none;
}

.story-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 처음에는 비디오를 일시 중지 상태로 시작 */
    pointer-events: none; /* 비디오 자체에 대한 마우스 이벤트 방지 */
}

/* 스토리 카드 회사 로고 스타일 */
.story-company-logo {
    margin-bottom: var(--space-100);
}

.story-company-logo .company-logo {
    height: var(--size-500);
    width: auto;
    display: block;
}

.story-play-icon {
    position: absolute;
    top: var(--space-300);
    right: var(--space-300);
    z-index: 10;
    color: var(--white);
    background: rgb(255 255 255 / 16%);
    border-radius: 100%;
    padding: var(--space-050);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.story-card:hover .story-play-icon {
    background: rgb(255 255 255 / 32%);
}

.grow-illustration {
    position: absolute;
    width: 18.75rem;
    height: 18.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.grow-svg {
    width: 100%;
    height: 100%;
}

/* Footer 스타일 */
.footer {
    background-color: var(--gray-000);
}

.footer.content-section {
    padding-bottom: 10rem;
}

.footer.index-footer {
    padding-bottom: var(--space-600);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    padding: var(--space-600) 0;
    border-top: .0625rem solid var(--border-color);
}

.footer-info-column {
    flex: 0 0 35%;
    margin-right: var(--space-600);
}

.footer-section {
    margin-bottom: var(--space-500);
}

/* 운영 시간 섹션의 margin-bottom 제거 */
.footer-section:last-child {
    margin-bottom: 0;
}

.footer-title {
    color: var(--text-hint);
    margin-bottom: var(--space-200);
}

.footer-text {
    color: var(--text-normal);
    margin-bottom: var(--space-200);
}

.footer-links-column {
    flex: 0 0 45%;
}

.footer-links-wrapper {
    display: flex;
    justify-content: space-between;
}

.footer-links-block {
    flex: 0 0 48%;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--space-200);
}

.footer-link {
    padding: 0;
}
.footer-top-button {
    flex: 0 0 15%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.top-icon {
    width: var(--size-300);
    height: var(--size-300);
    margin-left: var(--space-050);
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    padding-top: var(--space-400);
    border-top: .0625rem solid var(--border-color);
}

.footer-info-text {
    display: flex;
    flex-direction: column;
}

.company-info, .copyright {
    color: var(--text-normal);
}

.copyright {
    margin-bottom: 0;
}

.social-icons {
    display: flex;
    align-items: flex-start;
    gap: var(--space-200);
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-300);
    height: var(--size-300);
    color: var(--text-hint);
    transition: color 0.2s ease;
}

.social-icon:hover {
    color: var(--primary-500);
}

/* fullstack 상세 페이지 - Hero Section */

.hero-wrapper {
    display: flex;
    flex-direction: column;
}

.hero-main-row {
    display: flex;
    gap: var(--space-300);
}

/* 왼쪽 썸네일 이미지 - 1/4 차지 */
.course-thumb-detail {
    flex: 1;
    position: relative;
    max-width: 25%;
}

.thumb-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--border-radius-600);
    background-color: var(--background-alternative-01);
}

.thumb-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비디오를 컨테이너에 맞추고 비율 유지하며 필요시 일부 크롭 */
    object-position: center; /* 중앙 기준으로 크롭 */
}

.pc-video {
    display: block;
}

.mobile-video {
    display: none;
}

.mobile-picture {
    display: none;
}

/* 오른쪽 정보 영역 - 3/4 차지 */
.info-column {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-300);
}

/* 공통 카드 스타일 */
.common-card {
    background-color: var(--background-alternative-01);
    border-radius: var(--border-radius-600);
    padding: var(--space-400);
}

/* 코스 메인 정보 카드 */
.main-info-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-250);
    margin-bottom: var(--space-400);
}

.course-header-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-100);
}

.course-title {
    color: var(--text-normal);
    margin: 0;
}
.course-description {
    color: var(--text-hint);
    margin: 0;
}

.btn-ktb {
    background-color: var(--ktb-tech-blue);
    color: var(--white);
}

.btn-ktb:hover {
    background-color: var(--ktb-tech-navy-hover);
}

/* 하단 정보 카드 그룹 */
.card-group {
    display: flex;
    gap: var(--space-300);
}

.info-card-group {
    width: 100%;
}

.info-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-300);
}

.info-value {
    color: var(--text-normal);
    margin: 0;
}

.info-title {
    color: var(--text-hint);
    margin: 0;
}

/* Tab navigation */
.section-nav-container {
    padding-top: var(--size-600);
    position: sticky;
    top: 5.625rem; /* navbar 높이만큼 오프셋 */
    z-index: 100;
    transition: transform 0.3s ease;
    will-change: transform, border-color;
}

.section-nav-container.sticky {
    border-bottom: .0625rem solid var(--border-color);
    background-color: var(--gray-000);
    padding-top: var(--space-100);
    padding-bottom: .0625rem;
}

.nav-tabs.section-nav-tabs {
    border-bottom: none;
}

.nav-item.ktb-nav-item {
    margin-right: var(--space-200);
}

.nav-tabs .nav-link.active {
    color: var(--ktb-tech-blue);
    border-color: var(--ktb-tech-blue);
}

.nav-tabs .nav-link:hover {
    color: var(--ktb-tech-blue);
    border-color: var(--ktb-tech-blue);
}

.nav-tabs .nav-link:focus {
    color: var(--ktb-tech-blue);
    border-color: var(--ktb-tech-blue);
}

.nav-tabs .nav-link:active {
    color: var(--ktb-tech-blue);
    border-color: var(--ktb-tech-blue);
}

/* nav-link focus 상태 조정 */
.section-nav-tabs .nav-link:focus {
    outline: none;
    box-shadow: none;
}

.section-nav-tabs .nav-link:focus:not(.active) {
    color: inherit;
    background-color: transparent;
}

/* fullstack 상세 페이지 - 타겟 섹션 스타일 */
.target-cards {
    display: flex;
    gap: var(--space-300);
}

.target-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-200);
}

.target-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-normal);
}

.target-text {
    color: var(--text-normal);
    margin: 0;
}

/* 커리큘럼 섹션 스타일 */
.curriculum-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-600);
}

/* 단계별 과정 스타일 */
.step-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-300);
}

.step-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-100);
}

.step-header {
    display: flex;
    flex-direction: column;
}

.step-period {
    color: var(--text-hint);
}

.step-title-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-050)
}

.step-title {
    color: var(--ktb-tech-blue);
    margin: 0;
}

.step-subtitle {
    color: var(--text-normal);
    margin: 0;
}

.step-description {
    color: var(--text-normal);
    margin: 0;
}

/* 구분선 */
.curriculum-divider {
    width: 100%;
    height: .0625rem;
    background: linear-gradient(90deg, rgba(225, 225, 232, 0.00) 0%, var(--gray-300) 25%, var(--gray-300) 75%, rgba(225, 225, 232, 0.00) 100%);
}

/* 상세 커리큘럼 스타일 */
.curriculum-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
}

/* Vapor card 컴포넌트 커스텀 스타일 */
.curriculum-card {
    overflow: hidden;
}

.curriculum-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom:  0;
    cursor: pointer;
}

.curriculum-card-title {
    color: var(--text-normal);
}

.curriculum-card-subtitle {
    font-weight: var(--font-weight-700);
}

.curriculum-card-icon {
    color: var(--text-alternative);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    will-change: transform;
}

.curriculum-card.active .curriculum-card-icon {
    transform: rotate(180deg);
}

.curriculum-card-body {
    display: none;
    border-top: .0625rem solid var(--border-color);
}

.curriculum-card.active .curriculum-card-body {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.curriculum-content-wrapper {
    width: 100%;
}

.curriculum-timeline {
    display: flex;
    gap: var(--space-500);
    position: relative;
}

/* 타임라인 라인 스타일 수정 */
.timeline-line {
    position: absolute;
    width: var(--size-025);
    background-color: var(--gray-200);
    top: 8px;
    transition: height 0.3s ease;
}

.timeline-dot {
    position: absolute;
    left: 50%; /* 중앙 정렬 */
    transform: translateX(-50%); /* 가로 중앙 정렬 */
    width: 8px;
    height: 8px;
    background-color: var(--gray-200);
    border-radius: 50%;
    z-index: 1;
    transition: top 0.3s ease, background-color 0.3s ease, border 0.3s ease;
}

.timeline-dot.active {
    background-color: var(--ktb-tech-blue);
    box-sizing: border-box;
    transform: translateX(-50%) scale(1.2); /* 활성화 시 확대하되 가로 중앙 정렬 유지 */
    animation: pulse-blue 2s infinite;
}

.curriculum-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-250);
    flex: 1;
    padding-left: var(--space-300);
}

.curriculum-item {
    position: relative;
}

.curriculum-item-title {
    color: var(--text-hint);
    margin-bottom: var(--space-050);
    cursor: pointer;
    transition: color 0.3s ease;
    user-select: none;
}

.curriculum-item-title:hover {
    color: var(--text-hint-alternative);
}

.curriculum-item-title.active {
    color: var(--ktb-tech-blue);
}

.curriculum-item-description {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

/* 활성화된 항목의 설명만 표시 */
.curriculum-item-title.active + .curriculum-item-description {
    display: block;
}

.curriculum-item-description p {
    color: var(--text-secondary);
}

.curriculum-item-description p:last-child {
    margin-bottom: 0;
}

.text-button {
    padding: 0;
}

.curriculum-note {
    color: var(--text-hint);
    margin: 0;
}

.curriculum-note-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-200);
}

.btn-text-button {
    display: flex;
    align-items: center;
    gap: var(--space-050);
    flex-shrink: 0;
}

/* story section */
/* 리뷰 슬라이더 영역 내 그라데이션 오버레이 */
.story-review-container {
    position: relative;
    width: 100%;
    margin-top: var(--space-300);
    overflow: hidden;
}

.story-review {
    position: relative;
    width: 100%;
    height: 14rem; /* 디자인에 맞는 높이 */
}

.story-review-track {
    display: flex;
    gap: var(--space-300);
    position: absolute;
    left: 0;
    top: 0;
}

/* CSS 클래스 기반 애니메이션 (JavaScript에서 제어) */
.story-review-track.review-scroll-animation {
    animation: reviewScroll var(--animation-duration, 40s) linear infinite;
}

@keyframes reviewScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--scroll-distance, calc(-364px * 6 - 24px * 6))); /* 동적으로 설정되는 거리, 기본값은 6개 카드 */
    }
}

/* 양쪽 그라데이션 오버레이 추가 */
.story-review-container::before,
.story-review-container::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 7.5rem;
    z-index: 2;
    pointer-events: none; /* 그라데이션 아래의 요소가 여전히 상호작용 가능하도록 */
}

.story-review-container::before {
    left: 0;
    background: linear-gradient(90deg, var(--gray-000) 0%, rgba(255, 255, 255, 0) 100%);
}

.story-review-container::after {
    right: 0;
    background: linear-gradient(270deg, var(--gray-000) 0%, rgba(255, 255, 255, 0) 100%);
}

/* 애니메이션 일시정지 (접근성) */
.story-review:hover .story-review-track,
.story-review:focus-within .story-review-track {
    animation-play-state: paused;
}

/* 리뷰 카드 스타일 - 디자인에 정확히 맞춤 */
.review-card {
    width: 22.75rem;
    height: 14rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-300);
    border-radius: var(--border-radius-600);
    background-color: var(--background-alternative-01);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

/* 프로필 섹션 스타일 */
.review-profile {
    display: flex;
    flex-direction: column;
}

.profile-name {
    color: var(--text-normal);
    margin: 0;
}

.profile-course {
    color: var(--text-hint);
    margin: 0;
}

/* 텍스트 섹션 스타일 */
.review-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-050); /* 디자인에 지정된 간격 */
}

.review-title {
    color: var(--text-normal);
    margin: 0;
}

.review-description {
    margin: 0;
    color: var(--text-alternative); /* 디자인에 지정된 색상 */
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 최대 4줄 표시 */
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Benefit Section 스타일 */
.benefit-section {
    width: 100%;
    background-color: var(--gray-000);
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-300);
    margin-top: var(--space-300);
}

.benefit-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-200);
    padding: var(--space-200) var(--space-300);
    background-color: var(--background-alternative-01);
    border-radius: var(--border-radius-600);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-normal);
    width: 60px;
    height: auto;
}

.benefit-text {
    color: var(--text-normal);
    margin: 0;
}

/* 접근성 지원 */
.review-card:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* 더보기 버튼 - 기본적으로 숨김 처리 */
.show-more-btn {
    display: none;
}

/* Location Section 스타일 */
.location-section {
    width: 100%;
    background-color: var(--gray-000);
    overflow: hidden;
}

/* 이미지 슬라이더 컨테이너 */
.location-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* 슬라이더 트랙 */
.location-slider {
    display: flex;
    gap: var(--space-300);
    animation: slideRight 40s linear infinite;
    width: fit-content;
}

.location-slider-container::before,
.location-slider-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 7.5rem;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.location-slider-container::before {
    left: 0;
    background: linear-gradient(90deg, var(--gray-000) 0%, rgba(255, 255, 255, 0) 100%);
}

.location-slider-container::after {
    right: 0;
    background: linear-gradient(270deg, var(--gray-000) 0%, rgba(255, 255, 255, 0) 100%);
}

/* 애니메이션 정의 */
@keyframes slideRight {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 이미지 세트 1개의 너비만큼 이동 (이미지 4개 + 간격 3개) */
        transform: translateX(calc(-100% / 2));
    }
}

/* 슬라이드 */
.location-slide {
    flex: 0 0 auto;
    border-radius: var(--border-radius-600);
    overflow: hidden;
    width: 20rem;
    transition: transform 0.3s ease;
    aspect-ratio: 5/3; /* 비율 명시적 지정 */
}

/* 이미지 */
.location-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-600);
}

/* 위치 정보 */
.location-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-300);
    margin-top: var(--space-400);
}

.location-card {
    display: flex;
    flex-direction: column;
}

.location-subtitle {
    color: var(--text-normal);
}

.location-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-050);
}

.location-description {
    color: var(--text-normal);
    margin: 0;
}

.location-address {
    color: var(--text-hint);
    margin: 0;
}

/* Date Section 스타일 */
.date-section {
    width: 100%;
    background-color: var(--gray-000);
}

.date-grid {
    display: flex;
    gap: var(--space-300);
}

.date-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-300);
}

.date-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-050);
}

.date-subtitle {
    color: var(--text-normal);
    margin: 0;
}

.date-description {
    color: var(--text-alternative);
    margin: 0;
}

.date-divider {
    width: 100%;
    height: .0625rem;
    background-color: var(--border-color);
}

.date-divider-mobile-only {
    display: none;
}

/* Apply Step Section */
.apply-step-section {
    background-color: var(--gray-000);
}

.apply-step-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-300);
    margin-bottom: var(--space-200);
}

/* Apply Step Card - common-card 확장 */
.apply-step-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-050);
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.step-number-text {
    color: var(--ktb-tech-blue);
    margin: 0;
}

.step-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-100);
}

.apply-step-notice {
    display: flex;
    flex-direction: column;
}

.notice-text {
    color: var(--text-hint);
    margin: 0;
}

/* FAQ Section */
.faq-category {
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
}

/* FAQ Card */
.faq-card {
    overflow: hidden;
}

.faq-card-header {
    border-bottom: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question {
    color: var(--text-normal);
    margin: 0;
}

.faq-icon {
    color: var(--text-alternative);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    will-change: transform;
    margin-left: var(--space-200);
    flex-shrink: 0;
}

.faq-card-header[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

.faq-card.active .faq-icon {
    transform: rotate(180deg);
}

.faq-card-body {
    border-top: 0.0625rem solid var(--border-color);
    display: none;
}

.faq-card.active .faq-card-body {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

.faq-answer p {
    margin-bottom: 0;
}

.faq-inside {
    margin-top: var(--space-150);
}

.faq-answer.faq-answer-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
}

ul.faq-inside {
    padding-inline-start: 14px;
    margin-bottom: 0;
}

/* Open-alert Style */
@keyframes animation-alert {
	0% {
	    transform: translate(-50%, 100%);
	    opacity: 0;
	}
	60% {
	    transform: translate(-50%, -32px);
	    opacity: 1;
	}
	80% {
	    transform: translate(-50%, 16px);
	}
	100% {
	    transform: translate(-50%, 0px);
	}
}

.open-alert {
    display: none;
    position: fixed;
    left: 50%;
    bottom: var(--space-300);
    z-index: 100;
    max-width: 48rem;
    width: calc(100% - 3rem);
    transform: translateX(-50%);
    transition: opacity 0.3s ease, bottom 0.2s;
    border-radius: var(--border-radius-600);
    box-shadow: rgba(43, 45, 54, 0.08) 0px 0px 24px 0px;
    border: .0625rem solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    display: none;
    /* Fallback background for unsupported browsers */
    background: var(--background-normal);
}

/* Enhanced backdrop filter support with feature detection */
@supports (backdrop-filter: blur(25px)) or (-webkit-backdrop-filter: blur(25px)) {
    .open-alert {
        background: rgba(var(--background-normal), 0.03);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
    }
}

/* Dark theme support for backdrop filter */
@supports (backdrop-filter: blur(25px)) or (-webkit-backdrop-filter: blur(25px)) {
    [data-theme="dark"] .open-alert {
        background: rgba(var(--background-normal), 0.03);
    }
}

.open-alert.show {
    display: flex;
    opacity: 1;
    animation: 1s ease-out 0s 1 normal forwards running animation-alert;
}

.open-alert-style {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding: var(--space-250);
    border-radius: var(--border-radius-600);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 32px 0px;
}

.text-align {
    margin: 0px;
    flex-wrap: wrap;
    display: flex;
}

.alert-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-050);
	text-align: center;
}

.open-alert-text {
	color: var(--gray-900);
}

.open-alert-text-pre {
    color: var(--gray-900);
    text-align: center;
}

.time-alert-text {
	color: var(--gray-900);
	text-align: center;
}

.time-text {
	color: var(--ktb-tech-blue);
	font-weight: 600;
}

.apply-text {
	color: var(--ktb-tech-blue);
	margin: 0 3.5px 0 3.5px;
	font-weight: 600;
}

.cta-button-container {
    display: flex;
    flex-direction: row;
    gap: var(--space-100);
    align-items: center;
}

/* Instructor Section */
.instructor-section {
    background-color: var(--gray-000);
}

.credential-item-list {
    display: flex;
    flex-direction: row;
    gap: var(--space-050);
}

.credential-item-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-100);
}

.credential-text {
    margin: 0;
}

/* 메인 강사 카드 */
.main-instructor-card {
    display: flex;
    flex-direction: row;
    gap: var(--space-300);
}

.instructor-profile-wrapper {
    display: flex;
    gap: var(--space-400);
    align-items: flex-start;
    position: relative;
}

.instructor-avatar {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: var(--border-radius-600);
    overflow: hidden;
    background-color: var(--background-alternative-01);
    border: .0625rem solid var(--border-color);
    z-index: 2;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instructor-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
}

.instructor-header {
    display: flex;
    flex-direction: row;
    gap: var(--space-200);
}

.instructor-name {
    color: var(--text-normal);
    margin: 0;
}

.instructor-credentials {
    display: flex;
    flex-direction: column;
    gap: var(--space-050);
}

.credential-item {
    color: var(--text-normal);
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: var(--space-100);
    align-items: center;
}

.instructor-description p {
    color: var(--text-normal);
    margin: 0;
    line-height: var(--line-height-150);
}

/* Course Intro Section (3단 카드 intro-feature-section) */
.intro-feature-cards {
    display: flex;
    gap: var(--space-300);
    flex-direction: row;
}

.common-card.intro-feature-card {
    flex: 1 1;
  background: var(--ktb-tech-sky);
  border-radius: var(--border-radius-600);
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  justify-content: space-between;
}

.intro-text-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
}

.intro-feature-card-title {
  color: #2b2d36;
  margin: 0;
}

.intro-feature-card-desc {
  color: #2b2d36;
  margin: 0;
}

.intro-feature-img {
  height: 100%;
  max-height: 15.625rem;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% - var(--space-300))); /* 간격까지 고려하여 이동 */
    }
}

/* Responsive Adjustments */
@media (min-width: 1440px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
      max-width: 1172px !important;
    }
  }

@media (max-width: 1200px) {
    .hero-card-image {
        height: 6.25rem;
        right: var(--space-300);
        top: var(--space-300);
    }
    
    .story-grid {
        max-width: 1172px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-300);
    }

    .story-card-1,
    .story-card-2 {
        width: 100%;
    }

    .story-card-3,
    .story-card-4 {
        width: 100%;
    }

    .courses-container {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-300);
    }

    .step-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Benefit Section */
    .benefit-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Apply Step Section */
    .apply-step-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid,
    .navbar-expand-lg > .container-lg,
    .navbar-expand-lg > .container-md,
    .navbar-expand-lg > .container-sm,
    .navbar-expand-lg > .container-xl,
    .navbar-expand-lg > .container-xxl {
        padding-right: var(--space-200) !important;
        padding-left: var(--space-200) !important;
    }

    /* 992px 이하에서 햄버거 메뉴 크기 조정 */
    .navbar-toggler {
        width: var(--size-500);
        height: var(--size-500);
    }

    .hero-image {
        height: 25rem;
        margin-top: var(--spacing-6);
    }

    .hero-top-row,
    .hero-bottom-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        height: auto;
    }

    .hero-left-container {
        aspect-ratio: 5 / 3;
        width: 100%;
        flex: none;
    }

    .hero-right-container {
        height: 14rem;
        width: 100%;
        flex: none;
    }

    .hero-card-container {
        height: 14rem;
        width: 100%;
        flex: none;
    }

    .hero-card-image {
        position: absolute;
        right: var(--space-400);
        top: 50%;
        transform: translateY(-50%);
        height: 7.5rem;
    }

    .hero-title {
        font-size: var(--font-size-600);
        line-height: var(--line-height-500);
    }

    .hero-right-image {
        /* width: 70%; */
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .blog-link-item::after {
        display: none;
    }

    /* award section */
    .award-row {
        flex-direction: column;
        gap: var(--space-400);
    }

    .text-column.col-6 {
        max-width: 100%;
    }

    .image-column.col-6 {
        max-width: 100%;
    }

    .image-container {
        max-width: none;
        aspect-ratio: 16 / 9;
    }

    /* footer section */
    .footer-content {
        flex-direction: column;
    }
    
    .footer-info-column, 
    .footer-links-column {
        flex: 0 0 100%;
        margin-right: 0;
        margin-bottom: var(--space-500);
    }
    
    .footer-top-button {
        flex: 0 0 100%;
        justify-content: flex-start;
        margin-top: var(--space-400);
    }

    .courses-container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-300);
        row-gap: var(--space-500);
    }

    /* fullstack 상세 페이지 - 코스 히어로 섹션 */
    .hero-main-row {
        flex-direction: column;
    }
    
    .course-thumb-detail {
        max-width: 100%;
        aspect-ratio: 16/9;
    }
    
    .info-column {
        width: 100%;
    }
    
    .card-group {
        flex-direction: column;
    }
    
    .info-card:last-child {
        margin-bottom: 0;
    }

    /* fullstack 상세 페이지 - 타겟 섹션 스타일 */
    .target-cards {
        flex-direction: column;
    }

    /* fullstack 상세 페이지 - 커리큘럼 섹션 스타일 */
    .step-cards {
        grid-template-columns: 1fr;
        gap: var(--space-300);
    }
    
    .curriculum-timeline {
        gap: var(--space-400);
    }

    /* Benefit Section */
    .benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Location Section */
    .location-info {
        max-width: 100%;
    }

    /* Apply Step Section */
    .apply-step-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-250);
    }

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

    /* instructor section */
    .main-instructor-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-300);
    }

    .intro-feature-cards {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 5.125rem; /* 모바일에서 navbar 높이 조정 */
    }

    .navbar .logo {
        height: var(--size-500);
    }
    
    .section-nav-container {
        top: 5.0625rem; /* 모바일에서 navbar 높이에 맞춤 */
    }

    .hero-section h1 {
        font-size: var(--font-size-500);
    }

    .hero-image {
        height: 18.75rem;
    }

    .hero-title {
        left: var(--space-400);
        bottom: var(--space-400);
    }

    .hero-top-row {
        gap: var(--space-200);
    }

    .hero-right-image {
        width: 100%;
        height: 100%;
    }

    .hero-content-wrapper {
        gap: var(--space-200);
    }

    .hero-bottom-row {
        gap: var(--space-200);
    }

    .mute-toggle-button {
        bottom: var(--space-400);
        right: var(--space-400);
    }

    .info-card {
        gap: var(--space-100);
    }

    .company-logo {
        height: var(--size-500);
    }

    /* introduction section */
    .intro-bento-grid {
        grid-template-columns: 1fr;
        gap: var(--space-200);
    }

    .bento-card {
        gap: var(--space-200);
    }

    .intro-card-content {
        gap: var(--space-100);
    }

    h3.intro-card-title {
        font-size: var(--font-size-300);
        font-weight: var(--font-weight-700);
        line-height: var(--line-height-300);
        letter-spacing: var(--letter-spacing-h3);
    }

    /* award section */
    .award-row {
        gap: var(--space-300);
    }

    .award-title {
        margin-bottom: var(--space-200);
    }

    .award-description {
        margin-bottom: var(--space-100);
    }

     /* Story Section */
    .story-grid {
        display: flex;
        flex-direction: column;
        gap: var(--space-200);
    }

    .story-card-1,
    .story-card-2,
    .story-card-3,
    .story-card-4 {
        width: 100%;
        height: 22.75rem;
    }

    .grow-illustration {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .grow-illustration dotlottie-player {
        width: 100%;
        height: 100%;
    }

    /* footer section */
    .footer-links-wrapper {
        flex-direction: row;
    }
    
    .footer-links-block {
        flex: 0 0 50%;
        margin-bottom: var(--space-500);
    }
    
    .footer-bottom-content {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .footer-info-text {
        margin-bottom: var(--space-300);
    }
    
    .social-icons {
        margin-top: var(--space-300);
    }

    .courses-container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-200);
        row-gap: var(--space-400);
    }

    .timeline-dot.active {
        -webkit-animation: pulse-blue 2s infinite;
        animation: pulse-blue 2s infinite;
    }

    .curriculum-note-container {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-200);
    }

    /* story section */
    @keyframes reviewScroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-320px * 6 - 16px * 6)); /* 모바일에서 카드 크기와 간격 조정 */
        }
    }
    
    .story-review {
        height: 15.375rem; /* 모바일에서 높이 조정 */
    }
    
    .review-card {
        width: 20rem; /* 모바일에서 너비 조정 */
        height: 15.375rem; /* 모바일에서 높이 조정 */
    }

    .review-description {
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }

    .story-review-container::before,
    .story-review-container::after {
        width: 5rem; /* 모바일에서는 더 작게 */
    }

    /* location section */
    .location-info {
        display: flex;
        flex-direction: column;
    }

    .location-subtitle {
        margin-bottom: var(--space-050);
    }

    /* date section */
    .date-grid {
        flex-direction: column;
        gap: var(--space-300);
    }

    .date-divider-mobile-only {
        display: block !important;
    }

    /* open-alert section */
    .open-alert {
		width: calc(100% - 12rem);
	}

	.open-alert-style {
	  flex-direction: column;
	}

	.btn-ktb {
        width: 100%;
	}

    .cta-button-container {
        margin-top: var(--space-200);
        width: 100%;
    }

	.text-align {
		justify-content: center;
	}
	
	.open-alert-text {
		display: none;
	}

    /* instructor section */
    .main-instructor-card {
        gap: var(--space-200);
    }

    h3.instructor-name {
        font-size: var(--font-size-300);
        font-weight: var(--font-weight-700);
        line-height: var(--line-height-300);
        letter-spacing: var(--letter-spacing-h3);
    }

    .credential-item-list {
        flex-direction: column;
        gap: var(--space-000);
    }

    .btn-text-instructor {
        margin-left : var(--space-500);
    }
}

@media (max-width: 576px) {
    body {
        padding-top: 5.125rem !important;
    }
    
    .title {
        margin-bottom: var(--space-500);
        font-size: var(--font-size-400);
        font-weight: var(--font-weight-700);
        line-height: var(--line-height-400);
    }

    .navbar {
        padding-top: var(--space-200) !important;
        padding-bottom: var(--space-200) !important;
    }
    
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid,
    .navbar-expand-lg > .container-lg,
    .navbar-expand-lg > .container-md,
    .navbar-expand-lg > .container-sm,
    .navbar-expand-lg > .container-xl,
    .navbar-expand-lg > .container-xxl {
        padding-right: var(--space-250) !important;
        padding-left: var(--space-250) !important;
    }

    .navbar-collapse {
        margin-top: var(--space-200);
    }

    .hero-section {
        padding-bottom: var(--space-600);
    }
    
    .hero-section h1 {
        font-size: 1.75rem;
    }

    .hero-title {
        left: var(--space-300);
        bottom: var(--space-300);
        line-height: 2.375rem;
    }

    .hero-left-container {
        aspect-ratio: 1 / 1;
    }

    .hero-left-video {
        display: none !important;
    }
    
    .hero-left-image {
        display: block;
    }

    .hero-card-content {
        padding: var(--space-300);
    }

    .hero-card-image {
        right: var(--space-300);
        top: var(--space-300);
        transform: none;
        height: 6.5rem;
    }

    .mute-toggle-button {
        top: var(--space-300);
        left: var(--space-300);
    }

    .content-section {
        padding: var(--space-600) 0;
    }

    .courses-container {
        grid-template-columns: 1fr;
        gap: var(--space-400);
    }

    /* award section */
    h2.award-title {
        font-size: var(--font-size-400);
        font-weight: var(--font-weight-700);
        line-height: var(--line-height-400);
    }


    .story-info {
        padding: var(--space-300);
    }

    .footer-top-button {
        margin-top: var(--space-000);
    }

    .story-student-container {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--space-150);
    }

    .pc-video {
        display: none;
    }

    .mobile-video {
        display: none;;
    }

    .mobile-picture {
        display: block;
    }

    .pc-story-video {
        display: none;
    }

    .mobile-story-video {
        display: block;
    }

     /* fullstack 상세 페이지 - 코스 히어로 스타일 */
    .common-card {
        padding: var(--space-300);
    }

    .hero-main-row {
        gap: var(--space-200);
    }

    .info-column {
        gap: var(--space-200);
    }

    .card-group {
        gap: var(--space-200);
    }

    .target-cards {
        gap: var(--space-200);
    }

    h1.course-title {
        /* h2에 해당하는 스타일 적용 */
        font-size: var(--font-size-500);
        font-weight: var(--font-weight-700);
        line-height: var(--line-height-500);
        letter-spacing: -.025rem;
    }

    /* fullstack 상세 페이지 - 커리큘럼 섹션 스타일 */
    .curriculum-content {
        gap: var(--space-500);
    }
    
    .curriculum-timeline {
        gap: var(--space-300);
    }

    .curriculum-items {
        padding-left: var(--space-250);
    }
    
    .timeline-line {
        /* display: none; */
        height: auto !important;
        min-height: 100%;
    }

    .step-cards {
        gap: var(--space-200);
    }

    /* story section */
    .story-review-track {
        animation-duration: 15s; /* 모바일에서는 빠르게 */
        gap: var(--space-200); /* 모바일에서 간격 축소 */
    }

    .story-review-container {
        margin-top: var(--space-200);
    }
    
    @keyframes reviewScroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-280px * 6 - 16px * 6)); /* 작은 모바일에서 추가 조정 */
        }
    }

    .story-review-container::before,
    .story-review-container::after {
        width: 3.75rem; /* 작은 모바일에서는 더 작게 */
    }

    /* Benefit Section */
    .benefit-grid {
        gap: var(--space-200);
    }
    
    .benefit-card {
        padding: var(--space-200);
        gap: var(--space-100);
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    
    .benefit-icon {
        width: var(--size-700);
        height: auto;
    }

    
    /* 8개 이상의 benefit card 숨기기 */
    .benefit-grid .benefit-card:nth-child(n+9) {
        display: none;
    }
    
    /* 더보기 버튼 중앙 정렬 및 간격 조정 - 576px 이하에서만 표시 */
    .show-more-btn {
        display: flex !important;
        justify-content: center;
        align-items: center;
        margin-top: var(--space-200);
    }
    
    /* 더보기 버튼 보이기 상태 클래스 */
    .benefit-grid.show-all .benefit-card {
        display: flex;
    }
    
    .benefit-grid.show-all .show-more-btn {
        display: none;
    }

    /* Location Section */
    .location-slider {
        gap: var(--space-200);
    }
    
    .location-slide {
        width: 18.75rem;
    }

    .location-slider-container::before,
    .location-slider-container::after {
        width: 3.75rem;
    }

    .paragraph-lg.location-address {
        font-size: var(--font-size-075);
        line-height: var(--line-height-075);
    }

    /* date section */
    .date-column {
        gap: var(--space-200);
    }

    .date-grid {
        gap: var(--space-200);
    }

    /* FAQ Section */
    .faq-nav.nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100%;
        display: flex;
    }

    .nav-item .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* open-alert section */
    .open-alert {
        width: 100%;
        border-bottom: 0;
        border-left: 0;
        border-right: 0;
        bottom: 0;
        border-radius: var(--border-radius-000);
        background-color: var(--background-normal) !important;
        border-top: 0.0625rem solid var(--border-color);
    }

    /* Safe Area 하단 영역을 배경색으로 확실히 채우기 */
    .open-alert::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--safe-area-inset-bottom);
        background-color: var(--background-normal);
        z-index: 99;
        width: 100%;
    }

    .open-alert-style {
        border-radius: var(--border-radius-000);
        margin-bottom: var(--safe-area-inset-bottom);
        flex-direction: column;
    }

    /* instructor section */
    .main-instructor-card {
        gap: var(--space-200);
    }

    h3.instructor-name {
        font-size: var(--font-size-300);
        font-weight: var(--font-weight-700);
        line-height: var(--line-height-300);
        letter-spacing: var(--letter-spacing-h3);
    }

    /* Tab navigation */
    .section-nav-container {
        overflow: hidden; /* 부모에서 overflow 제한 */
    }

    .section-nav-container.sticky {
        padding: var(--space-000);
    }
    
    .nav-tabs.section-nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        width: 100%;
        display: flex;
    }
    
    .nav-tabs.section-nav-tabs::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    .nav-item.ktb-nav-item {
        margin-bottom: var(--space-000);
    }

    .intro-feature-cards {
        gap: var(--space-200);
    }

    .intro-feature-img {
        max-height: 15rem;
    }
}

/* Safari 특정 이슈 대응 */
@supports (-webkit-touch-callout: none) {
    .curriculum-card-icon {
        /* Safari에서 transform이 부드럽게 적용되도록 설정 */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .timeline-dot {
        /* Safari에서 border-radius가 제대로 적용되지 않는 경우 대응 */
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        mask-image: radial-gradient(white, black);
    }

    .timeline-dot.active {
        -webkit-animation: pulse-blue 2s infinite;
        animation: pulse-blue 2s infinite;
        will-change: box-shadow;
    }

    /* story section */
    .review-card {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .story-review-track {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    /* FAQ Section */
    .faq-icon {
        /* Safari에서 transform이 부드럽게 적용되도록 설정 */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Firefox 특정 이슈 대응 */
@-moz-document url-prefix() {
    .curriculum-card-body {
        /* Firefox에서 display: none에서 block으로 전환 시 부드럽게 표시되도록 설정 */
        transition: opacity 0.3s ease;
    }

    /* story section */
    .story-review-track {
        will-change: transform;
    }

    /* FAQ Section */
    .faq-card-body {
        /* Firefox에서 display: none에서 block으로 전환 시 부드럽게 표시되도록 설정 */
        transition: opacity 0.3s ease;
    }
}