@charset "UTF-8";
/* =====================================================================
   경진대회 안내 페이지(page/competition.html) 전용 스타일
   - 앞부분: 원본 사이트 공통 CSS(index.css) 중 이 페이지가 쓰는 것만 옮김
   - 뒷부분: 디자인 시안(Tech-GPT_경진대회_2026/index.html) 의 페이지 스타일 그대로
   ===================================================================== */

@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Pretendard/PretendardVariable.woff2') format('woff2-variations');
}

html,
body,
input,
select,
textarea,
a,
button,
pre {
    font-family: "Pretendard Variable", Pretendard, sans-serif !important;
}

*, *:focus {
    appearance: none;
    outline: none;
}

/*-- 스크롤 --------------------------------------------------------------*/
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: #4b6bfb;
    border-radius: 10px;
    background-clip: padding-box;
    cursor: pointer;
    border: 0px solid transparent;
}

::-webkit-scrollbar-track {
    background-color: #b6b8c7;
}

/*다크모드 무시*/
@media (prefers-color-scheme: dark) {
    html,
    body {
        background: #fff !important;
        background-color: #fff !important;
    }
}

/*----------------------------------------------------------------*/
.btn-blue2-grad {
    background-image: linear-gradient(to right, #B721FF 0%, #21D4FD 51%, #3a7bd5 100%);
    transition: 0.8s;
    background-size: 200% auto;
    box-shadow: 0 0 20px #eee;
    display: block;
}

.btn-blue2-grad:hover {
    background-position: right center;
    text-decoration: none;
}

.nav-hover {
    text-align: center;
    display: inline-block;
    cursor: pointer;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
}

.nav-hover:before {
    content: "";
    position: absolute;
    width: 0;
    background: #fff;
    left: 45%;
    height: 2px;
    bottom: 0;
    transition: all .3s;
    opacity: 0.7;
}

.nav-hover:hover:before {
    width: 100%;
    left: 0;
}

/* 배경 이미지 — 시안의 bg-[url('/images/...')] 를 CSS 파일 기준 상대경로로 (root_path 와 무관하게 동작) */
.bg-cmp-main { background-image: url('../images/competition/bg-main-3.jpg'); }
.bg-cmp-about { background-image: url('../images/competition/img_menu_about_bg_2.jpg'); }
.bg-cmp-community { background-image: url('../images/competition/img_menu_home_bg_2.jpg'); }
.bg-cmp-notice { background-image: url('../images/competition/img_notice_bg.png'); }
.bg-cmp-video { background-image: url('../images/competition/img_video_bg.jpg'); }
.bg-cmp-banner { background-image: url('../images/competition/img_com_about_2.jpg'); }

/* ===== 이하 디자인 시안 페이지 스타일 ===== */
.tab-grad {
    border-radius: 9999px;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(to right, #22d3ee, #2563eb);
    transition: all 0.3s ease-in-out;
}
.tab-grad:hover {
    background: linear-gradient(to right, #06b6d4, #1d4ed8);
}

/* 섹션 단위 풀페이지 스크롤: 각 장은 브라우저 높이, 휠 한 번에 다음 장으로 이동 (하단 스크립트 참고) */
.snap-page {
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
}
.snap-page.flex:not(.flex-col) {
    align-items: center;
}
/* 서비스 경진대회 탭 — 모바일·태블릿은 장 구분 없이 스크롤하므로 장마다 화면 높이를 채우지 않고 내용 높이대로.
   장 사이 간격은 각 장의 위아래 여백(py-16)으로 통일한다 */
@media (max-width: 1023px) {
    .tabCont02 .snap-page { min-height: 0; }
    .tabCont02 div.banner { min-height: 17rem; } /* 모바일은 높이 auto(아래 규칙) — 배경 캐릭터가 보이도록 최소 높이만. 태블릿은 h-[600px] 그대로 */
}
.home-bg {
    z-index: 0;
}

/* ===== 참가신청서 섹션 ===== */
.apply-sheets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    /* 칸 폭을 시트 최대 폭(아래 .apply-sheet max-width 와 같은 식)까지만 두고 가운데로 모은다.
       1fr 1fr 이면 시트가 줄어든 만큼 칸 안에 빈 곳이 생겨 두 장 사이가 벌어진다. */
    .apply-sheets {
        grid-template-columns: repeat(2, minmax(0, calc((100vh - 22rem) * 210 / 297)));
        grid-template-columns: repeat(2, minmax(0, calc((100svh - 22rem) * 210 / 297)));
        justify-content: center;
        gap: 2rem;
    }
}
/* 모바일·태블릿: 한 장(.is-active)만 보이고 좌우 화살표·스와이프로 넘긴다. PC 는 두 장을 나란히 두므로 화살표 없음 */
.apply-nav { display: none; }
@media (max-width: 1023px) {
    .apply-sheets { position: relative; touch-action: pan-y; } /* 가로 스와이프는 스크립트가 받는다 */
    .apply-sheet:not(.is-active) { display: none; }
    .apply-nav {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        width: 2.5rem;
        height: 2.5rem;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 9999px;
        background: rgb(2 112 244 / 0.85); /* #0270F4 — 섹션 제목 파랑 */
        color: #fff;
        box-shadow: 0 2px 6px rgb(2 112 244 / 0.3);
    }
    .apply-nav:active { background: #0258c4; }
    /* 가로 위치는 JS(placeApplyNav)가 정한다: 시트 바깥, 화면 가장자리 1rem(=모바일 상단 메뉴 '홈'·'커뮤니티' 줄)보다 안쪽 */
    .apply-nav-prev { left: 0; }
    .apply-nav-next { right: 0; }
    .apply-nav[hidden] { display: none; } /* 넘길 장이 없는 쪽 화살표 */
}
/* 시트: A4 비율(210:297) 상자. 내용은 595×842 기준으로 만들고 상자 폭에 맞춰 축소 */
.apply-sheet {
    position: relative;
    width: 100%;
    aspect-ratio: 210 / 297;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    overflow: hidden;
    /* 시트 높이가 화면을 넘지 않게 폭을 줄인다(A4 비율이라 높이도 같이 준다). 종이 축소는 JS 가 폭 기준으로 맞춘다.
       22rem = 상단 메뉴 + 섹션 위아래 여백 + '참가신청서' 제목줄 + 아래 다운로드 버튼(여백 포함 약 7rem) */
    max-width: calc((100vh - 22rem) * 210 / 297);
    max-width: calc((100svh - 22rem) * 210 / 297);
    justify-self: center;
}
@media (max-width: 1023px) {
    /* 모바일·태블릿은 시트 아래 '전체 2장 중 1' 줄(약 2.5rem)만큼 더 뺀다 */
    .apply-sheet {
        max-width: calc((100vh - 24.5rem) * 210 / 297);
        max-width: calc((100svh - 24.5rem) * 210 / 297);
    }
}
.apply-paper {
    position: absolute;
    top: 0;
    left: 0;
    width: 595px;
    height: 842px;
    box-sizing: border-box;
    padding: 30px 32px 34px;
    transform-origin: top left;
    color: #1e293b;
    font-size: 12.5px;
    line-height: 1.5;
    word-break: keep-all;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.apply-sheet-tag {
    font-weight: 700;
    color: #475569;
    font-size: 0.95em;
}
.apply-sheet-title {
    border: 1px solid #94a3b8;
    background: #e0ecff;
    text-align: center;
    padding: 1rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    line-height: 1.3;
}
.apply-sheet-title span { font-size: 1.7em; font-weight: 700; color: #1e293b; letter-spacing: 0.02em; }
.apply-sheet-title strong { font-size: 2.1em; font-weight: 800; color: #0f172a; letter-spacing: 0.04em; }

.apply-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.apply-table th,
.apply-table td {
    border: 1px solid #94a3b8;
    padding: 0.5rem 0.55rem;
    vertical-align: middle;
    text-align: left;
}
.apply-table th {
    background: #e0ecff;
    font-weight: 700;
    font-size: 0.92em;
    text-align: center;
    color: #1e293b;
}
.apply-table th small { font-weight: 500; font-size: 0.85em; color: #475569; }
.apply-table td:empty { height: 2.5rem; }
.apply-check { display: inline-block; margin-right: 0.25rem; font-size: 1.05em; }
.apply-table td.apply-opt { white-space: nowrap; padding-left: 0.4rem; padding-right: 0.4rem; }
@media (max-width: 639px) {
    /* 좁은 화면에서는 선택지가 겹치지 않게 줄바꿈 허용 */
    .apply-table td.apply-opt { white-space: normal; padding-left: 0.3rem; padding-right: 0.3rem; }
}

.apply-table-plan .apply-section {
    text-align: center;
    background: #e0ecff;
    padding: 0.5rem 0.6rem;
}
.apply-table-plan .apply-section {
    white-space: normal;
    overflow-wrap: anywhere;
}
/* 2장(기획서)은 항목이 많아 더 촘촘하게 */
.apply-paper-plan { font-size: 9px; line-height: 1.35; gap: 0.45rem; padding: 28px 32px; }
.apply-paper-plan .apply-table th, .apply-paper-plan .apply-table td { padding: 0.3rem 0.45rem; }
.apply-paper-plan .apply-table td:empty { height: 1.7rem; }
.apply-paper-plan .apply-table-plan .apply-guide { padding: 0.35rem 0.6rem 0.5rem; }
.apply-paper-plan .apply-table-plan .apply-section { padding: 0.3rem 0.5rem; }
/* 기획서 표가 종이 남는 높이를 꽉 채우도록: 안내 행들이 여분 높이를 균등하게 나눔 */
.apply-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.apply-fill .apply-table-plan { height: 100%; }
.apply-table-plan tr.apply-guide-row { height: 10%; }
.apply-table-plan .apply-section em {
    display: block;
    font-style: normal;
    font-weight: 500;
    font-size: 0.9em;
    color: #475569;
}
.apply-table-plan .apply-guide {
    background: #fff;
    font-size: 0.9em;
    color: #64748b;
    padding: 0.5rem 0.7rem 0.75rem;
    vertical-align: top;
}
.apply-table-plan .apply-guide ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.apply-table-plan .apply-guide li { padding-left: 0.9em; position: relative; }
.apply-table-plan .apply-guide li::before { content: '-'; position: absolute; left: 0; }
.apply-table-plan .apply-sub { color: #94a3b8; }

/* 1장: 서약 블록이 남는 높이를 채워 원본처럼 '귀하'가 아래쪽에 오도록 */
.apply-pledge { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.5rem 0.4rem 0; flex: 1 1 auto; justify-content: space-evenly; }
.apply-pledge p { text-align: justify; }
.apply-pledge ol { list-style: decimal; padding-left: 1.4em; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.apply-date { text-align: center; font-weight: 600; margin-top: 0.5rem; }
.apply-sign { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0 0.5rem; }
.apply-sign-blank { display: inline-block; width: 4em; border-bottom: 1px solid #94a3b8; vertical-align: -0.2em; }
.apply-to { text-align: right; font-weight: 800; font-size: 1.2em; margin-top: 0.25rem; }
.apply-notes { color: #334155; font-size: 0.95em; display: flex; flex-direction: column; gap: 0.2rem; }

a.apply-download.btn-blue2-grad {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    padding: 0.85rem 2.25rem;
    font-size: 1rem;
}
a.apply-download.btn-blue2-grad svg { flex: 0 0 auto; }
@media (min-width: 768px) {
    a.apply-download.btn-blue2-grad { padding: 1rem 3rem; font-size: 1.125rem; }
}
/* 모바일: 배너는 장(snap-page)이라 화면 높이만큼 늘어나는데 글씨가 맨 위에 붙으면 아래 캐릭터와 한참 떨어진다.
   글씨 묶음을 세로 가운데로 내려 캐릭터 머리 바로 위에 둔다(세로 화면에선 배경이 높이에 맞춰져 캐릭터가 늘 아래 1/3 쯤에 온다).
   위 여백 3rem 은 상단 메뉴(h-12)에 첫 줄이 가리지 않게. */
@media (max-width: 767px) {
    div.banner { height: auto; } /* Tailwind h-[450px]보다 우선 — 높이는 snap-page 의 min-height 가 정한다 */
    .banner > div { height: auto; padding-top: 3rem; padding-bottom: 7rem; } /* 아래 여백을 위보다 크게 줘 가운데보다 살짝 위로 */
}
/* 하단 배너 제목: 기존(24/30/36px)보다 두 단계 크게 */
.banner-title {
    font-size: 1.5rem; /* 24px — 모바일은 행사 소개 제목(text-2xl)과 맞춤 */
    line-height: 1.25;
}
@media (min-width: 640px) {
    .banner-title { font-size: 1.875rem; } /* 30px */
}
@media (min-width: 768px) {
    .banner-title { font-size: 2.625rem; } /* 42px */
}
@media (min-width: 1024px) {
    .banner-title { font-size: 3.25rem; } /* 52px */
}
/* 서비스 경진대회 탭: 우측 하단 고정 참가 버튼 (구이 블롭 모양, SVG 마스크 + 그라데이션) */
button.join-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 50;
    width: 128px;
    height: 128px;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    filter: drop-shadow(0 10px 22px rgba(33, 46, 255, 0.45));
    transition: transform 0.25s ease, filter 0.25s ease;
}
button.join-fab.hidden {
    display: none;
}
button.join-fab:hover {
    transform: translateY(-3px) scale(1.05);
    filter: drop-shadow(0 16px 30px rgba(33, 46, 255, 0.55));
}
.join-fab-goo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.join-fab-label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 6px; /* 글자+화살표 묶음을 살짝 아래로 (3px) */
    pointer-events: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.join-fab-text {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
/* 참가하기 아래 화살표 — 호버하면 오른쪽으로 살짝 */
.join-fab-arrow {
    width: 24px;
    height: 24px;
    margin-top: 1px;
    transition: transform 0.25s ease;
}
button.join-fab:hover .join-fab-arrow {
    transform: translateX(3px);
}
@media (min-width: 768px) {
    button.join-fab {
        right: 2.25rem;
        bottom: 2.25rem;
        width: 164px;
        height: 164px;
    }
    .join-fab-text { font-size: 16px; }
    .join-fab-arrow { width: 26px; height: 26px; }
}
/* 소개 문장: 가로로 나란히 놓일 때 두 구절 사이 띄어쓰기 (flex 안에서는 끝 공백이 사라짐) */
@media (min-width: 640px) {
    .intro-row { column-gap: 0.3em; }
}
/* 스크롤 시 상단 메뉴: 반투명 검정 배경 + 블러 (page1.html과 동일, 스크립트가 클래스 토글) */
#competitionNav.bg-black\/50 {
    background-color: rgb(0 0 0 / 0.5);
}
#competitionNav.backdrop-blur {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
#competitionNav.shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
#competitionNav {
    transition: background-color 0.3s ease;
}
/* 홈 스크롤 페이드: 내리면 내용이 사라지고 두 번째 장 문구가 나타남 (스크립트가 opacity 갱신) */
.home-fade {
    will-change: opacity;
}
.home-fade-in {
    opacity: 0;
    will-change: opacity, transform;
}
/* 홈 두 번째 장: 상단 메뉴/로고 바 높이를 피해 세로 중앙 */
.home-page2 {
    padding-top: 4rem;
    padding-bottom: 4rem;
    box-sizing: border-box;
}
.home-page2-img {
    max-width: 100%;
    height: auto;
    max-height: 26vh;
}
/* 두 번째 장 문구 꾸밈 */
.home-page2-text p {
    font-size: clamp(1.3rem, 2.8vw, 3.6rem);
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: -0.01em;
    word-break: keep-all;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.home-page2-text strong {
    font-weight: 800;
}
.home-page2-text .em-white {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 0 24px rgba(255, 255, 255, 0.35), 0 4px 24px rgba(0, 0, 0, 0.5);
}
.home-page2-text .em-grad {
    background: linear-gradient(90deg, #8DF5FF 0%, #38D6FF 45%, #8FA3FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}
.home-page2-text .em-chip {
    display: inline-block;
    padding: 0.02em 0.5em;
    border-radius: 0.3em;
    line-height: 1.3;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(to right, #B721FF, #21D4FD);
    box-shadow: 0 10px 36px rgba(106, 124, 254, 0.5);
    text-shadow: none;
}
/* 두 번째 장 제목 — 참가 대상 문구 위 */
.home-page2-title {
    margin-bottom: 0.75rem;
    font-size: clamp(1.6rem, 3.4vw, 4.2rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.home-page2-title .em-grad {
    background: linear-gradient(to top, #6A7CFE, #21D4FD);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}
@media (min-width: 1024px) {
    .home-page2-title { margin-bottom: 1rem; }
}
.home-page2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    font-size: clamp(0.9rem, 1.2vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 0.22em;
    color: #9fd8ff;
}
.home-page2-eyebrow .bar {
    display: inline-block;
    width: 3rem;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(to right, #B721FF, #21D4FD);
    box-shadow: 0 0 12px rgba(33, 212, 253, 0.6);
}
@media (min-width: 1024px) {
    .home-page2-eyebrow { margin-bottom: 1.5rem; }
}
/* 두 번째 장 아래 가운데 '자세히 보기' — 문구 · 이미지 묶음과 간격 */
/* (빌드된 Tailwind 에 없는 클래스를 피하려고 직접 씀) */
.home-page2-more { order: 3; width: 100%; display: flex; justify-content: center; margin-top: 0.5rem; }
.home-page2-more button { display: inline-flex; align-items: center; gap: 0.5rem; }
.home-page2-more svg { width: 1.25rem; height: 1.25rem; transition: transform .2s ease; }
.home-page2-more button:hover svg { transform: translateX(3px); }
@media (min-width: 1024px) {
    /* 문구 · 이미지는 한 줄, 버튼은 그 아래 줄 가운데 */
    .home-page2 { flex-wrap: wrap; align-content: center; }
    .home-page2-more { flex-basis: 100%; margin-top: clamp(1.5rem, 4vh, 3rem); }
}
@media (min-width: 1024px) {
    /* 데스크톱: 문구와 이미지를 내용 크기만큼만 차지하게 하고 묶음을 정중앙에 */
    .home-page2 {
        padding-top: 4rem;
        padding-bottom: 4rem;
        column-gap: clamp(2rem, 5vw, 6rem);
    }
    .home-page2 .home-page2-text {
        width: max-content;
        max-width: 58%;
        flex: 0 1 auto;
    }
    .home-page2 .home-page2-imgcol {
        width: auto;
        flex: 0 0 auto;
    }
    .home-page2-img {
        max-height: 55vh;
        max-width: 27vw;
    }
}
/* 홈의 각 페이지는 딱 브라우저 높이만큼 */
.home-page {
    z-index: 1;
    height: 100vh;
    height: 100svh;
    flex: none;
    overflow: hidden;
}

/* 홈 하단 스크롤 안내 아이콘 (반투명 흰 원 + 아래 화살표, 위아래로 살짝 움직임) */
.scroll-hint {
    position: fixed;
    left: 50%;
    margin-left: -26px;
    top: calc(100vh - 7rem); /* 초기값, 스크립트가 버튼과 로고 바의 중간으로 재계산 */
    z-index: 20;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    padding: 0;
    animation: scroll-hint-bob 1.5s ease-in-out infinite;
    transition: background 0.3s;
}
.scroll-hint:hover {
    background: rgba(255, 255, 255, 0.35);
}
.scroll-hint svg {
    width: 26px;
    height: 26px;
}
@keyframes scroll-hint-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-hint { animation: none; }
}

/* 교육 영상 상자가 전체 화면일 때: 모서리·테두리 없이 검은 바탕에 꽉 차게 */
.edu-video:fullscreen { border: 0; border-radius: 0; background: #000; }
.edu-video:-webkit-full-screen { border: 0; border-radius: 0; background: #000; }