@charset "utf-8";

/* ==================================================================
 * main.css - 임시(오픈 준비) 메인 페이지
 * ================================================================== */

/* ==================================================================
 * Section 1. 메인 슬로건 슬라이더
 * ================================================================== */
.hero { position: relative; }

.hero__slider { position: relative; }

.hero__track {
    position: relative;
    height: 100vh;
    min-height: 620px;
    max-height: 920px;
    overflow: hidden;
}

.hero__slide {
    position: absolute; inset: 0;
    display: flex; align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s var(--ease), visibility 1s var(--ease);
}
.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* 배경 이미지 : 활성 슬라이드에서 천천히 확대 */
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
       linear-gradient(105deg, rgb(0 0 0 / 73%) 0%, rgb(0 0 0 / 50%) 40%, rgba(8, 48, 63, .30) 100%), linear-gradient(to top, rgb(0 0 0 / 17%) 0%, rgb(102 183 255 / 15%) 42%);
}
.hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* 기본값을 '확대가 끝난 상태'로 둔다.
       슬라이드가 비활성이 되는 순간 animation 이 사라지면서 이 값으로 돌아가는데,
       확대의 도착점과 같아야 크기가 튀지 않는다.
       (기본값을 scale(1.08) 로 두면 전환 때마다 원래 크기로 되돌아가 보인다) */
    transform: scale(1);
    /* 사용자가 화살표·인디케이터로 중간에 넘길 때를 위한 보험 */
    transition: transform .6s var(--ease);
}
/* transition 이 아니라 animation 을 쓰는 이유 :
   첫 슬라이드는 서버에서 이미 is-active 로 나오므로 클래스 '변화'가 없다.
   transition 은 변화가 있을 때만 실행되어 최초 로드에서는 확대가 일어나지 않는다.
   animation 은 최초 렌더에도 실행되고, 클래스가 다시 붙을 때마다 처음부터 재생된다.

   확대 시간은 슬라이드 간격(--hero-duration)과 맞춘다.
   화면이 넘어가는 순간 확대가 정확히 끝나 있어야 도착점과 기본값이 일치한다. */
.hero__slide.is-active .hero__bg img {
    animation: heroZoom var(--hero-duration, 5s) linear forwards;
}
@keyframes heroZoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

/* 슬로건 박스 : 3개 슬라이드가 서로 다른 테두리/포인트 색을 갖도록 차별화 */
.hero__box {
    position: relative;
    padding: 0px 48px 42px 0px;
    color: #fff;
}

.hero__lead {
    font-size: clamp(17px, 2.5vw, 34px);
    font-weight: 500;
    color: rgba(255, 255, 255, .95);
    margin-bottom: 8px;
    letter-spacing: -0.04rem;
}
.hero__keyword {
    font-size: clamp(34px, 6.6vw, 84px);
    font-weight: 700;
    line-height: 1.18;
}
.hero__keyword em {
    position: relative;
    color: var(--c-accent);
}
.hero__keyword em::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: .06em;
    height: .30em;
    background: currentColor;
    opacity: .28;
}
.hero__sign {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 26px;
    font-weight: 700;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .9);
}
.hero__sign::before {
    content: '';
    width: 28px; height: 2px;
    background: var(--c-accent);
}


/* visual03 은 밝은 사진이라 오버레이를 더 어둡게 잡아 가독성을 확보한다 */
.hero__slide--platform .hero__box::before { background: #9fd34f; }
.hero__slide--platform .hero__keyword em { color: #9fd34f; }
.hero__slide--platform .hero__sign::before { background: #9fd34f; }

.hero__slide--workshop .hero__box::before { background: #ffc657; }
.hero__slide--workshop .hero__keyword em { color: #ffc657; }
.hero__slide--workshop .hero__sign::before { background: #ffc657; }

/* 슬라이드 텍스트 등장 모션 */
.hero__slide .hero__lead,
.hero__slide .hero__keyword,
.hero__slide .hero__sign {
    opacity: 0;
    transform: translateY(24px);
}
.hero__slide.is-active .hero__lead    { animation: heroUp .9s var(--ease) .22s forwards; }
.hero__slide.is-active .hero__keyword { animation: heroUp .9s var(--ease) .36s forwards; }
.hero__slide.is-active .hero__sign    { animation: heroUp .9s var(--ease) .52s forwards; }
@keyframes heroUp { to { opacity: 1; transform: none; } }

/* ---------- 슬라이더 컨트롤 ---------- */
.hero__control {
    position: absolute; left: 50%; bottom: 46px;
    z-index: 5;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 14px;
}

.hero__nav {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    flex: none;
    color: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
    transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.hero__nav svg { width: 20px; height: 20px; }
.hero__nav:hover { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }

.hero__dots { display: flex; gap: 10px; }
/* flex 자식은 button 이 아니라 li 이므로, li 에도 flex 를 걸어야 폭이 전달된다 */
.hero__dots > li { display: flex; }
.hero__dot {
    display: flex; flex-direction: column; gap: 8px;
    width: 132px;
    padding: 6px 0;
    color: rgba(255, 255, 255, .6);
    text-align: left;
    transition: color .3s var(--ease);
}
.hero__dot-bar {
    display: block;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .28);
    overflow: hidden;
}
.hero__dot-bar i {
    display: block;
    width: 100%; height: 100%;
    border-radius: 3px;
    background: var(--c-accent);
    transform: scaleX(0);
    transform-origin: left center;
}
.hero__dot-text {
    font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero__dot:hover { color: #fff; }
.hero__dot.is-active { color: #fff; }

/* 진행바도 animation 으로 : 최초 로드부터 채워지고, 슬라이드마다 처음부터 재생된다 */
.hero__dot.is-active .hero__dot-bar i {
    animation: barFill var(--hero-duration, 5s) linear forwards;
}
@keyframes barFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* 정지 버튼을 누르면 진행바와 배경 확대가 그 자리에서 멈춘다 */
.hero__slider.is-paused .hero__dot.is-active .hero__dot-bar i,
.hero__slider.is-paused .hero__slide.is-active .hero__bg img { animation-play-state: paused; }

.hero__play {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    flex: none;
    color: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}
.hero__play:hover { background: rgba(255, 255, 255, .16); }
.hero__play svg { width: 18px; height: 18px; }
.hero__play .ico-play { display: none; }
.hero__slider.is-paused .hero__play .ico-play  { display: block; }
.hero__slider.is-paused .hero__play .ico-pause { display: none; }

/* ==================================================================
 * Section 2. 사이트 소개
 * ================================================================== */
.intro {
    padding: 110px 0 100px;
    text-align: center;
}
.intro__eyebrow {
    font-family: var(--font-en);
    font-size: 12px; font-weight: 700; letter-spacing: .2em;
    color: var(--c-accent);
    margin-bottom: 16px;
}
.intro__title {
    font-size: clamp(25px, 3.6vw, 40px);
    font-weight: 800;
    color: var(--c-ink);
    margin-bottom: 26px;
}
.intro__desc {
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.65;
    color: var(--c-body);
}
.intro__desc strong { color: var(--c-primary); }
.intro__desc b {
    font-weight: 700;
    color: var(--c-primary);
    background: linear-gradient(transparent 62%, var(--c-accent-soft) 62%);
    padding: 0 2px;
}
.intro__note {
    display: inline-block;
    margin-top: 38px;
    padding: 14px 26px;
    font-size: 14.5px;
    color: var(--c-sub);
    background: var(--c-bg-soft);
    border-radius: 999px;
}
.intro__note em { font-weight: 700; color: var(--c-primary); }

/* ==================================================================
 * Section 3. 사명 Mission
 * ================================================================== */
.mission {
    padding: 96px 0 100px;
    text-align: center;
    background:
        radial-gradient(120% 140% at 20% 0%, #14607D 0%, transparent 55%),
        radial-gradient(120% 140% at 100% 100%, #10506A 0%, transparent 50%),
        var(--c-primary-dark);
}
.mission__quote {
    font-size: clamp(21px, 2.9vw, 33px);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -.015em;
    color: rgba(255, 255, 255, .9);
}
.mission__quote b { font-weight: 800; color: var(--c-accent); }

/* ==================================================================
 * Section 4. 핵심목표 Core Objective
 * ================================================================== */
.objective { padding: 110px 0; }

.objective__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
.objective__item {
    position: relative;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.objective__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.objective__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.objective__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.objective__item:hover .objective__thumb img { transform: scale(1.06); }

.objective__body { position: relative; padding: 34px 34px 38px; }
.objective__no {
    display: block;
    font-family: var(--font-en);
    font-size: 13px; font-weight: 800; letter-spacing: .1em;
    color: var(--c-accent);
    margin-bottom: 8px;
}
.objective__title {
    font-size: 25px; font-weight: 800;
    letter-spacing: -.04em;
    color: var(--c-ink);
    margin-bottom: 12px;
}
.objective__desc { font-size: 16px; color: var(--c-sub); }

/* ==================================================================
 * Section 5. 비전 Vision
 * ================================================================== */
.vision {
    padding: 110px 0;
    text-align: center;
    color: #fff;
    background:
        linear-gradient(150deg, rgba(14, 76, 99, .96) 0%, rgba(8, 48, 63, .97) 100%);
}
.vision__slogan {
    margin-bottom: 20px;
    font-size: clamp(21px, 4vw, 34px);
    letter-spacing: -.03em;
}
.vision__slogan span {
    font-weight: 500;
    color: rgba(255, 255, 255, .74);
}
.vision__slogan em {
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}
.vision__slogan em::after {
    content: '';
    display: block;
    width: 54px; height: 3px;
    margin: 16px auto 0;
    border-radius: 3px;
    background: var(--c-accent);
}

.vision__sub {
    color: rgba(255, 255, 255, .6);
    margin-bottom: 26px;
}

.vision__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.vision__item {
    padding: 42px 34px 44px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    transition: background .3s var(--ease), transform .3s var(--ease);
}
.vision__item:hover { background: rgba(255, 255, 255, .1); transform: translateY(-5px); }

.vision__en {
    font-family: var(--font-en);
    font-size: 12px; font-weight: 700; letter-spacing: .2em;
    color: var(--c-accent);
    margin-bottom: 10px;
}
.vision__label {
    font-size: 28px; font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
}
.vision__desc {
    color: rgba(255, 255, 255, .74);
}

/* ==================================================================
 * Section 6. 핵심가치 Core Value
 * ================================================================== */
.value { padding: 110px 0; background: var(--c-bg-soft); }

.value__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.value__item { text-align: center; }

.value__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    margin-bottom: 24px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.value__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.value__item:hover .value__thumb img { transform: scale(1.07); }
.value__thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8, 48, 63, .55) 0%, rgba(8, 48, 63, .05) 60%);
}
.value__en {
    position: absolute; left: 22px; bottom: 18px;
    z-index: 2;
    font-family: var(--font-en);
    font-size: 12px; font-weight: 700; letter-spacing: .2em;
    color: rgba(255, 255, 255, .92);
}
.value__title {
    font-size: 24px; font-weight: 800;
    letter-spacing: -.04em;
    color: var(--c-ink);
    margin-bottom: 10px;
}
.value__desc { color: var(--c-sub); }

/* ==================================================================
 * Section 7. 준비 중인 메뉴
 * ================================================================== */
.ready { padding: 110px 0 100px; }

.ready__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.ready__item {
    position: relative;
    padding: 38px 34px 34px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--c-line);
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.ready__item:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1.5px var(--c-accent), var(--shadow-md);
}
.ready__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-ink);
    margin-bottom: 10px;
}
.ready__desc { color: var(--c-sub); margin-bottom: 20px; }
.ready__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ready__tags li {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.92rem; font-weight: 600;
    color: var(--c-primary);
    background: var(--c-accent-soft);
}

/* ==================================================================
 * Section 8. 오픈 안내 / 문의
 * ================================================================== */
.contact { padding: 0 0 110px; }

.contact__box {
    padding: 76px 40px 80px;
    text-align: center;
    border-radius: 24px;
    background:
        radial-gradient(100% 160% at 0% 0%, rgba(95, 194, 222, .22) 0%, transparent 55%),
        var(--c-bg-soft);
    box-shadow: inset 0 0 0 1px var(--c-line);
}
.contact__badge {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 13px; font-weight: 700;
    color: #fff;
    background: var(--c-primary);
}
.contact__title {
    font-size: clamp(25px, 3.4vw, 38px);
    font-weight: 800;
    letter-spacing: -.045em;
    color: var(--c-ink);
    margin-bottom: 18px;
}
.contact__desc { color: var(--c-sub); }
.contact__btns {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: 12px;
    margin-top: 36px;
}

/* ==================================================================
 * Responsive
 * ================================================================== */
@media (max-width: 1024px) {
    .hero__box { padding: 40px 38px 36px; }
    .objective { padding: 90px 0; }
    .vision, .value, .ready { padding: 90px 0; }
}

@media (max-width: 860px) {
    .hero__track { height: 88vh; min-height: 560px; }
    .hero__control { bottom: 34px; gap: 10px; }
    .hero__dot { width: 96px; }
    .hero__dot-text { font-size: 12px; }

    .objective__list,
    .vision__list,
    .ready__list { grid-template-columns: 1fr; }
    .value__list { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

@media (max-width: 640px) {
    .hero__track { height: 100svh; min-height: 520px; max-height: none; }
    .hero__box {
        padding: 32px 24px 30px;
        border-radius: 14px;
    }
    .hero__box::before { top: 26px; bottom: 26px; width: 3px; }
    .hero__sign { margin-top: 20px; font-size: 14px; }

    .hero__control {
        left: 24px; right: 24px; bottom: 26px;
        width: auto;
        max-width: none;
        transform: none;
        padding-inline: 0;
        gap: 8px;
    }
    .hero__nav, .hero__play { display: none; }
    .hero__dots { width: 100%; gap: 8px; }
    /* 라벨을 숨기는 대신 막대를 굵고 진하게 : 밝은 사진 위에서도 보이도록 */
    .hero__dots > li { flex: 1; }
    .hero__dot { flex: 1; width: auto; padding: 10px 0; }
    .hero__dot-text { display: none; }
    .hero__dot-bar {
        height: 4px;
        background: rgba(255, 255, 255, .45);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    }

    .intro { padding: 76px 0 68px; }
    .intro__desc br { display: none; }
    .mission { padding: 70px 0 74px; }
    .objective, .vision, .value, .ready { padding: 70px 0; }
    .contact { padding-bottom: 76px; }
    .contact__box { padding: 54px 24px 58px; border-radius: 18px; }
    .contact__desc br { display: none; }
    .contact__btns { flex-direction: column; }
    .btn { width: 100%; }

    .objective__body { padding: 26px 24px 30px; }
    .vision__item { padding: 32px 26px 34px; }
    .ready__item { padding: 30px 24px 28px; }
    .sec-head { margin-bottom: 34px; }
}