@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'KboDiamondGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/KBO-Dia-Gothic_light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'KboDiamondGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/KBO-Dia-Gothic_medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'KboDiamondGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/KBO-Dia-Gothic_bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'CucumberSalad';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-EF@1.0/EF_cucumbersalad.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

:root {
    /* color */

    color-scheme: dark;

    --color-black: #111;
    --color-black-75: rgba(17, 17, 17, 0.75);
    --color-white: #f2f2f2;
    --color-gray-100: #ddd;
    --color-gray-300: #bbb;
    --color-gray-500: #999;
    --color-gray-800: #444444;
    --color-accent: #ff6f61;
    --gradient-color: linear-gradient(0deg, 
    rgba(17,17,17,0.9) 0%, 
    rgba(22,22,22,0.7) 20%, 
    rgba(28,28,28,0.5) 40%, 
    rgba(34,34,34,0.3) 60%, 
    rgba(42,42,42,0.15) 80%, 
    rgba(51,51,51,0) 100%);;

    /* typography */
    --font-main: "pretendard", sans-serif;

    /* size */
    --header-height: 60px;
    --container-width: 1220px;
    --side-padding: 60px;

    /* transition */
    --transition-basic: 0.3s ease;
}

[data-theme="light"] {
    --color-black: #ffffff;
    --color-black-75: rgba(255, 255, 255, 0.75);
    --color-white: #111111;
    --color-gray-100: #f5f5f5;
    --color-gray-300: #eeeeee;
    --color-gray-500: #dddddd;
    --color-gray-800: #999999;
    --color-accent: #ff6f61;
    --gradient-color: rgba(0, 0, 0, 0.2);
}

/* ============================== Reset ============================== */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    scrollbar-gutter: auto;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    color: var(--color-white);
    background-color: var(--color-black);
    line-height: 1.5;
}

html.page-transition-preload body {
    visibility: hidden;
}
/* ============================== Common ============================== */
a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button {
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

.container {
    margin: 0 auto;
}

.icon {
    filter: invert(0);
}

[data-theme="light"] .icon {
    filter: invert(1);
}

[hidden] {
  display: none !important;
}

/* ============================== Header ============================== */

.header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    /*background-color: var(--color-black-75);*/

    background: rgba(255, 255, 255, 0.36);
    backdrop-filter: blur(11.9px);
    -webkit-backdrop-filter: blur(11.9px);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

body:has(#slideview:not([hidden])) .header {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: var(--container-width);
    box-sizing: border-box;
    padding: 0;
    
}

.header .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.75);
}

body:has(#slideview:not([hidden])) .header .logo {
    color: rgba(255, 255, 255, 0.75);
}

.header .nav {
    display: flex;
    align-items: center;

    
}

.header .nav ul {
    display: flex;
    gap: 2rem;
}

.header .nav ul li {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.75);

    font-family: 'paperozi', sans-serif;
}


body:has(#slideview:not([hidden])) .header .nav ul li {
    color: rgba(255, 255, 255, 0.75);
}

/* ============================== Main ============================== */
.main {
    min-height: 100vh;
}

.main .container {
    width: var(--container-width);
    padding: 100px 0 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    color: var(--color-white);

    margin-top: 2rem;
}

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

.container .title-section .left-side {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

.container .title-section h1 {
    font-size: 3rem;
    font-weight: 700;

    letter-spacing: -0.02em;
}

/* ============================== Search Bar ============================== */

/* 공통 */
.search-bar {
    position: relative;

    height: 45px;
}

.search-bar img {
    position: absolute;

    top: 50%;
    left: 1rem;

    width: 1.5rem;

    transform: translateY(-50%);

    z-index: 5;
    pointer-events: none;
}

.search-bar input {
    width: 100%;
    height: 100%;

    border: 1px solid var(--color-gray-500);
    border-radius: 999px;

    color: var(--color-white);
    background: rgba(255, 255, 255, 0.36);

    backdrop-filter: blur(11.9px);
    -webkit-backdrop-filter: blur(11.9px);

    font-size: 1rem;
    font-family: inherit;

    outline: none;

    transition:
        padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease;
}

.search-bar input:focus {
    border-color: var(--color-white);
}

/* Grid View 검색창 */
.title-section .search-bar {
    width: 276px;
}

.title-section .search-bar input {
    padding: 0 3rem;
    cursor: text;
}

.title-section .search-bar input::placeholder {
    color: rgba(0, 0, 0, 0.55);
}

/* ============================== slide view - v2 ============================== */
.container .slide-view {
    width: 100vw;
    height: 100vh;

    position: fixed;
    
    top: 0;
    left: 0;

    z-index: -999;
}

.container .slide-view .content {
    display: flex;

    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    
    gap: 2rem;

    scrollbar-width: none;
}

.container .slide-view .card {
    aspect-ratio: 16 / 9;
    background-color: rgba(255, 255, 255, 0.01);

    position: absolute;
    width: 100vw;
    height: 100vh;

    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.container .slide-view .card.is-active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}

/* ============================== Slide View UI ============================== */

/* Slide View 활성 시 메인 컨테이너 */
.container:has(#slideview:not([hidden])) {
    width: var(--container-width);
    height: 100vh;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
}

/* Grid용 상단 제목 영역은 Slide View에서 숨김 */
.container:has(#slideview:not([hidden])) .title-section {
    display: none;
}

/* 작업자 정보 */
.worker {
    display: none;

    font-size: 0.875rem;
    font-weight: 600;
    line-height: 2;
    letter-spacing: -0.02em;

    color: var(--color-white);
}

.container:has(#slideview:not([hidden])) .worker {
    display: flex;
    align-items: end;

    margin-left: 1.15rem;
}

/* 기존 Slide 설명은 현재 사용하지 않음 */
.slide-description {
    display: none;
}


/* ============================== Project Dial ============================== */
.project-dial {
    display: none;
}

.container:has(#slideview:not([hidden])) .project-dial {
    position: fixed;

    top: 0;
    left: 6rem;

    width: 36vw;
    height: 100vh;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    overflow: hidden;

    z-index: 90;
    pointer-events: none;
}

.container:has(#slideview:not([hidden])) .project-dial-list {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 5rem;

    transition: transform 650ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.container:has(#slideview:not([hidden])) .project-dial-item {
    height: var(--item-height);

    display: flex;
    align-items: center;

    font-size: 14px;
    font-weight: 400;

    opacity: 0.22;

    transform:
        scale(0.88)
        translateX(0);

    transform-origin: left center;

    transition:
        opacity 500ms ease,
        transform 600ms cubic-bezier(.22, 1, .36, 1),
        filter 500ms ease;
}

.container:has(#slideview:not([hidden])) .project-dial-item.is-active {
    opacity: 1;

    transform:
        scale(1)
        translateX(0);

    filter: blur(0);
}

.container:has(#slideview:not([hidden])) .project-dial-item.is-near {
    opacity: 0.3;
    transform:
        scale(0.4)
        translateX(0);
}

.container:has(#slideview:not([hidden])) .project-dial-item.is-far {
    opacity: 0.22;
    transform:
        scale(0.4)
        translateX(0);
}

.container:has(#slideview:not([hidden])) .project-dial-item.is-none {
    opacity: 0.05;
}

.container:has(#slideview:not([hidden])) .project-dial-title {
    font-family: 'KboDiamondGothic', var(--font-main);
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;

    color: rgba(255, 255, 255, 0.9);
}


/* ============================== Project Description Layer ============================== */

/* Grid View에서는 레이어 자체를 제거 */
.project-description {
    display: none;
}

/* Slide View에서만 전체 화면 UI 레이어로 사용 */
.container:has(#slideview:not([hidden])) .project-description {
    position: fixed;
    inset: 0;

    display: block;

    width: 100vw;
    height: 100vh;

    z-index: 100;

    pointer-events: none;
}

.container:has(#slideview:not([hidden])) .project-warp {
    position: absolute;

    right: 6rem;
    top: 10%;

    display: flex;
    align-items: center;

    gap: 0.75rem;

    z-index: 20;

    pointer-events: auto;
}

.project-description .project-visual {
    width: 100%;
    height: 100%;
}

.project-info {
    position: absolute;

    right: 6rem;
    bottom: 12vh;

    width: clamp(220px, 16vw, 280px);

    display: flex;
    flex-direction: column;
    gap: 2.2rem;
}

.project-info-block {
    font-size: clamp(1.25rem, 0.8vw, 1.5rem);
    line-height: 1.6;
    font-weight: 400;

    color: rgba(255, 255, 255, 0.68);
}

.project-info-block:first-child {
    color: rgba(255, 255, 255, 0.82);
}


/* ============================== Slide View Controls ============================== */

.project-description .view-buttons {
    position: static;

    right: 6vw;
    top: 52%;

    z-index: 20;

    pointer-events: auto;
}

/* Slide 전용 검색창: 기본은 45px 원형 */
.container:has(#slideview:not([hidden]))
.project-description .search-bar {
    position: relative;

    width: 45px;
    height: 45px;

    right: auto;
    top: auto;

    transition:
        width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.container:has(#slideview:not([hidden]))
.project-description .search-bar input {
    padding: 0;

    cursor: pointer;
}

/* 원형 상태에서는 검색 아이콘을 정확히 중앙에 */
.container:has(#slideview:not([hidden]))
.project-description .search-bar img {
    left: 50%;

    transform: translate(-50%, -50%);

    transition:
        left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 포커스 시 확장 */
.container:has(#slideview:not([hidden]))
.project-description .search-bar:focus-within {
    width: 260px;
}

.container:has(#slideview:not([hidden]))
.project-description .search-bar:focus-within input {
    padding: 0 1rem 0 3rem;

    cursor: text;
}

.container:has(#slideview:not([hidden]))
.project-description .search-bar:focus-within img {
    left: 1rem;

    transform: translate(0, -50%);
}

/* 원형일 때 placeholder 숨김 */
.container:has(#slideview:not([hidden]))
.project-description .search-bar input::placeholder {
    color: transparent;

    transition: color 0.2s ease;
}

/* 확장된 뒤 placeholder 표시 */
.container:has(#slideview:not([hidden]))
.project-description .search-bar:focus-within input::placeholder {
    color: rgba(0, 0, 0, 0.55);

    transition-delay: 0.15s;
}


/* ============================== Slide View Background ============================== */

.container:has(#slideview:not([hidden])) .gradient {
    width: 100vw;
    height: 100vh;

    margin: 0;
    padding: 0;

    background: var(--gradient-color);

    position: fixed;

    top: 0;
    left: 0;

    z-index: -1;

    pointer-events: none;
}

.container:has(#slideview:not([hidden])) .content .card {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    height: 100vh;
    width: 100vw;
}


body:has(#slideview:not([hidden])) .footer {
    display: none;
}


/* ============================== 페이지 진입 요소 ============================== */

.page-enter-up {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 700ms ease,
        transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.page-enter-up.is-show {
    opacity: 1;
    transform: translateY(0);
}


/* Typewriter는 실행 전까지 숨김 */
[typewriter-effect][typewriter-trigger="manual"] {
    visibility: hidden;
}


/* 타이핑 시작 직전에 표시 */
[typewriter-effect][typewriter-trigger="manual"].is-typing {
    visibility: visible;
}


/* ============================== button ============================== */
.view-buttons {
    display: flex;
    gap: 8px;
}

.view-buttons button {
    color: var(--color-white);
    text-align: center;

    display: flex;
    align-items: center;

    border: 1px solid var(--color-gray-500);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.36);
    backdrop-filter: blur(11.9px);
    -webkit-backdrop-filter: blur(11.9px);

    padding: 0.1rem;

    cursor: pointer;
}


/* ============================== grid view ============================== */

.container .grid-view {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 30px;

    margin-top: 5rem;
    margin-bottom: 5rem;
}

.container .grid-view .filter {
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    gap: 0.5rem;

    position: sticky;
    top: 10rem;

    align-self: start;
}

.container .grid-view .filter button {
    position: relative;

    z-index: 2;

    font-size: 0.875rem;
    font-weight: 500;

    color: var(--color-white);

    padding: 0.45rem 0.8rem;

    border-radius: 999px;

    opacity: 0.45;

    transition:
        opacity 0.3s ease,
        color 0.3s ease;
}

.container .grid-view .filter button[aria-pressed="true"] {
    opacity: 1;

    color: var(--color-black);
}

.container .grid-view .filter .filter-indicator {
    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 0;

    z-index: 1;

    pointer-events: none;

    transition:
        top 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.35s cubic-bezier(0.22, 1, 0.36, 1);

    will-change:
        top,
        width,
        height;
}

.container .grid-view .filter .filter-indicator-shape {
    position: absolute;

    inset: 0;

    display: block;

    background-color: #111;

    border-radius: 999px;

    transform-origin: center;
}   

.container .grid-view .filter .filter-reset {
    display: flex;
    align-items: center;

    border: 1px solid var(--color-white);
    border-radius: 999px;

    opacity: 0.5;

    margin-top: 0.5rem;

    padding: 0;
    font-size: 0rem;
    scale: 0.8;
    transition: 0.25s;
}

.container .grid-view .filter .filter-reset:hover{
    padding: 0 1rem 0 0rem;
    font-size: 0.875rem;
    scale: 1;

    transition: 0.25s;
}

.container .grid-view .content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    column-gap: 30px;
    row-gap: 55px;
}

.container .grid-view .content .card {
    position: relative;

    width: 100%;
    aspect-ratio: 384 / 515;

    overflow: hidden;

    background-color: var(--color-black);
    color: var(--color-white);

    border-radius: 10px;

    cursor: pointer;

    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.container:has(#gridview:not([hidden])) .title-section .view-buttons,
.container:has(#gridview:not([hidden])) .title-section .search-bar {
    opacity: 1;
    transform: translateY(0);
}

/* Grid */
.container:has(#gridview:not([hidden])) .title-section {
    display: flex;
}

/* Slide */
.container:has(#slideview:not([hidden])) .title-section {
    display: none;
}

.project-description {
    display: none;
}

.container:has(#slideview:not([hidden])) .project-description {
    display: block;
}

.container:has(#slideview:not([hidden])) .search-bar input:focus {
    border-color: var(--color-black);
}

/* ==============================
   카드 이미지
============================== */

.container .grid-view .content .card .card-image {
    position: absolute;

    inset: 0;

    background-color: var(--color-gray-500);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    border-radius: inherit;

    /* 이미지가 텍스트보다 앞 */
    z-index: 3;

    transition:
        top 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        left 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        right 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        bottom 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==============================
   카드 정보
============================== */

.container .grid-view .content .card .card-info {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    padding: 1.25rem;

    z-index: 2;

    pointer-events: none;
}


.container .grid-view .content .card .card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.75rem;

    margin-bottom: 1.25rem;
}


.container .grid-view .content .card .card-category {
    flex: 0 0 auto;

    padding: 0.35rem 0.65rem;

    /*border: 1px solid var(--color-white);*/
    border-radius: 999px;

    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.2;

    color: var(--color-black);
    background-color: var(--color-white);
}


.container .grid-view .content .card .card-members {
    min-width: 0;
    max-width: 68%;

    overflow: hidden;

    font-size: 0.6875rem;
    font-weight: 400;

    color: var(--color-gray-500);

    white-space: nowrap;
    text-overflow: ellipsis;
}


.container .grid-view .content .card .card-title {
    margin: 0 0 0.5rem;

    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.15;

    color: var(--color-white);
}


.container .grid-view .content .card .card-description {
    max-width: 95%;

    margin: 0;

    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;

    color: var(--color-gray-800);
}


/* ==============================
   텍스트 애니메이션 기본 상태
============================== */

/* Category - Scale */
.container .grid-view .content .card .card-category {
    opacity: 0;

    transform: scale(0.65);
    transform-origin: left center;

    transition:
        opacity 0.02s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Members - 왼쪽에서 오른쪽 */
.container .grid-view .content .card .card-members {
    opacity: 0;

    transform: translateX(-1.2rem);

    transition:
        opacity 0.08s ease,
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Title */
.container .grid-view .content .card .card-title {
    opacity: 0;

    transform: translateY(0.65rem);

    transition:
        opacity 0.1s ease,
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Description */
.container .grid-view .content .card .card-description {
    opacity: 0;

    transform: translateY(0.65rem);

    transition:
        opacity 0.12s ease,
        transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==============================
   Hover
============================== */

.container .grid-view .content .card:hover {
    transform: translateY(-0.35rem);

    border-radius: 18px;

    box-shadow:
        0 1.5rem 3rem
        rgba(0, 0, 0, 0.12);
}


/* 이미지 먼저 축소 */
.container .grid-view .content .card:hover .card-image {
    top: 48%;

    left: 1rem;
    right: 1rem;
    bottom: 1rem;

    border-radius: 12px;
}


/* 1. Category */
.container .grid-view .content .card:hover .card-category {
    opacity: 1;

    transform: scale(1);

    transition-delay: 0.20s;
}


/* 2. Members */
.container .grid-view .content .card:hover .card-members {
    opacity: 1;

    transform: translateX(0);

    transition-delay: 0.36s;
}


/* 3. Title */
.container .grid-view .content .card:hover .card-title {
    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.56s;
}


/* 4. Description */
.container .grid-view .content .card:hover .card-description {
    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.68s;
}


/* Hover 해제 시 바로 사라지게 */
.container .grid-view .content .card:not(:hover) .card-category,
.container .grid-view .content .card:not(:hover) .card-members,
.container .grid-view .content .card:not(:hover) .card-title,
.container .grid-view .content .card:not(:hover) .card-description {
    transition-delay: 0.5s;
}


/* ============================== Footer ============================== */
.footer {
    background-color: var(--color-black);
    padding: 20px 0;
    text-align: center;
}

.footer .container {
    width: var(--container-width);
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.footer .container .footer-info {
    display: column;
    text-align: left;
}

.footer .container .footer-info h3 {
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.footer .container .footer-info p {
    color: var(--color-white);
    font-size: 0.5rem;
}

.footer .container .footer-info img {
    margin-bottom: 0.5rem;
}

.footer .container .footer-icons {
    display: flex;
    align-items: end;
    gap: 20px;
}

.footer .container .footer-icons .icon {
    width: 2rem;
    height: 2rem;
}