@charset "utf-8";
/* =========================================================
   기지시줄다리기축제 - 메인 커스텀 스타일
   (default.css 로드 이후 적용 / 중복 규칙 제거본)
   ========================================================= */

/* ---------------------------------------------------------
   1. 변수
   --------------------------------------------------------- */
:root {
    --green: #21493d;
    --green-dark: #16302a;
    --gold: #c9a25b;
    --ink: #181818;
    --muted: #797979;
    --max: 1160px;
}

/* ---------------------------------------------------------
   2. 베이스 (default.css 와 중복되지 않는 재정의만)
   * box-sizing, ul 리셋은 default.css 에 존재하므로 제외
   --------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    color: var(--ink);
    font-family: 'CloudSans', sans-serif;
    font-size: 16px; /* default.css 18px 재정의 */
}

a {
    color: inherit; /* default.css a{color:#000} 재정의 */
}

/* 그누보드 기본 레이아웃 폭/플로트 초기화 (#container = <main>) */
#container {
    width: 100%;
    min-width: 0;   /* default min-width:1200px 해제 */
    min-height: 0;
    margin: 0;
    padding: 0;
    float: none;    /* default float:left 해제 */
}

/* ---------------------------------------------------------
   3. 공통 레이아웃 유틸
   --------------------------------------------------------- */
.wrap {
    width: 1440px;
    margin: 0 auto;
}

.image-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d8ddd9;
    color: #607068;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
}

.image-slot span {
    padding: 8px 12px;
    border: 1px dashed currentColor;
    border-radius: 4px;
    background: rgba(255, 255, 255, .36);
}

/* Skip navigation */
#skip_to_container {
    position: absolute;
    z-index: 10000;
}

#skip_to_container a {
    position: absolute;
    left: -9999px;
}

#skip_to_container a:focus {
    top: 20px;
    left: 20px;
    padding: 12px;
    background: #fff;
}

/* ---------------------------------------------------------
   4. 헤더
   --------------------------------------------------------- */
#fest-hd {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 94px;
    color: #fff;
    transition: .25s;
}

#fest-hd.scrolled,
#fest-hd.is-sub {
    position: fixed;
    background: rgba(22, 35, 32, .94);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
}

.fest-hd-inner {
    display: flex;
    align-items: center;
    height: 100%;
}

.fest-logo {
    margin: 0;
    line-height: 0;
}

.fest-logo img {
    display: block;
    width: 184px;
    height: 60px; /* 원본 크기 */
}

/* GNB */
.fest-gnb {
    height: 100%;
    margin-left: auto;
}

.fest-gnb > .fest-gnb-list {
    display: flex;
    height: 100%;
    gap: 42px;
}

.fest-gnb-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.fest-gnb-main {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.fest-gnb-dropdown {
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    min-width: 200px;
    padding: 10px 0;
    border-top: 3px solid var(--gold);
    border-radius: 0 0 8px 8px;
    background: rgba(22, 48, 42, .97);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .28);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px);
    transition: .2s;
}

/* 드롭다운 상단 화살표(포인터) */
.fest-gnb-dropdown::before {
    position: absolute;
    top: -9px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--gold);
    content: '';
    transform: translateX(-50%) rotate(45deg);
}

.fest-gnb-dropdown a {
    position: relative;
    display: block;
    padding: 12px 26px;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    transition: .18s;
}

.fest-gnb-dropdown a::before {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    content: '';
    opacity: 0;
    transform: translateY(-50%);
    transition: .18s;
}

.fest-gnb-dropdown a:hover,
.fest-gnb-dropdown a:focus {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    padding-left: 30px;
}

.fest-gnb-dropdown a:hover::before,
.fest-gnb-dropdown a:focus::before {
    opacity: 1;
}

.fest-gnb-item:hover .fest-gnb-dropdown,
.fest-gnb-item:focus-within .fest-gnb-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.fest-menu-btn {
    width: 42px;
    height: 42px;
    margin-left: 42px;
    padding: 9px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.fest-menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 5px auto;
    background: #fff;
}

/* ---------------------------------------------------------
   5. 전체메뉴(오버레이)
   --------------------------------------------------------- */
body.menu-open {
    overflow: hidden;
}

.fest-allmenu {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background:
        radial-gradient(120% 80% at 82% 0%, rgba(201, 162, 91, .10), transparent 60%),
        linear-gradient(160deg, #1b3b33 0%, var(--green-dark) 55%, #0e211c 100%);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: .35s;
}

/* 상단 금색 라인 */
.fest-allmenu::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 4px;
    background: var(--gold);
    content: '';
}

/* 마스코트 장식 (또렷하게, 화면 우측 하단 고정) */
.fest-allmenu::after {
    position: fixed;
    right: 3%;
    bottom: 96px;
    width: 400px;
    height: 213px;
    background: url('../image/main/main_mascot01.png') no-repeat right bottom / contain;
    opacity: 1;
    pointer-events: none;
    content: '';
}

.fest-allmenu.open {
    opacity: 1;
    visibility: visible;
}

/* 상단바(로고 + 닫기) */
.fest-allmenu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    height: 94px;
}

.fest-allmenu-logo img {
    display: block;
    width: 170px;
    height: auto;
}

.fest-allmenu-close {
    position: relative;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: .2s;
}

.fest-allmenu-close:hover {
    border-color: var(--gold);
    transform: rotate(90deg);
}

.fest-allmenu-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: #fff;
    transition: .2s;
}

.fest-allmenu-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.fest-allmenu-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.fest-allmenu-close:hover span { background: var(--gold); }

/* 메뉴 그리드 */
.fest-allmenu-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex: 1 0 auto;
    align-content: center;
    padding: 40px 0;
}

.fest-allmenu-group {
    padding: 10px 30px 20px;
    border-left: 1px solid rgba(255, 255, 255, .1);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease, background .25s ease;
}

.fest-allmenu-group:last-child {
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.fest-allmenu.open .fest-allmenu-group {
    opacity: 1;
    transform: none;
}

.fest-allmenu.open .fest-allmenu-group:nth-child(1) { transition-delay: .06s; }
.fest-allmenu.open .fest-allmenu-group:nth-child(2) { transition-delay: .13s; }
.fest-allmenu.open .fest-allmenu-group:nth-child(3) { transition-delay: .20s; }
.fest-allmenu.open .fest-allmenu-group:nth-child(4) { transition-delay: .27s; }

.fest-allmenu-num {
    display: block;
    margin-bottom: 18px;
    color: var(--gold);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .18em;
}

.fest-allmenu-title {
    display: block;
}

.fest-allmenu-en {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .45);
    font-size: 13px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.fest-allmenu-name {
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
    font-size: 26px;
    font-weight: 700;
    transition: color .2s;
}

.fest-allmenu-name::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--gold);
    content: '';
    transition: width .3s ease;
}

.fest-allmenu-group:hover .fest-allmenu-name {
    color: var(--gold);
}

.fest-allmenu-group:hover .fest-allmenu-name::after {
    width: 100%;
}

.fest-allmenu-sub {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.fest-allmenu-sub li + li {
    margin-top: 2px;
}

.fest-allmenu-sub a {
    position: relative;
    display: block;
    padding: 9px 0 9px 16px;
    color: rgba(255, 255, 255, .7);
    font-size: 16px;
    transition: .18s;
}

.fest-allmenu-sub a::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    content: '';
    opacity: 0;
    transform: translateY(-50%) scale(.4);
    transition: .18s;
}

.fest-allmenu-sub a:hover {
    color: #fff;
    padding-left: 24px;
}

.fest-allmenu-sub a:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* 하단 인포바 */
.fest-allmenu-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: 20px;
    padding: 24px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.fest-allmenu-foot p {
    margin: 0;
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
}

.fest-allmenu-sns {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.fest-allmenu-sns a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    color: rgba(255, 255, 255, .85);
    font-size: 19px;
    transition: .2s;
}

.fest-allmenu-sns a:hover {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--green-dark);
}

/* ---------------------------------------------------------
   6. 서브페이지 (미니멀 / 알약탭)
   --------------------------------------------------------- */

/* 서브 비주얼 (1차 메뉴명) */
.fest-sub-visual {
    padding: 190px 0 96px;
    background: #f2f5f3;
    text-align: center;
}

/* 배경 영상이 들어간 서브 비주얼 */
.fest-sub-visual.has-video {
    position: relative;
    overflow: hidden;
    background: #000;
}

.fest-sub-visual.has-video .fsv-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .35));
}

.fest-sub-visual.has-video .fsv-inner {
    position: relative;
    z-index: 3;
}

.fest-sub-visual.has-video .fsv-title {
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.fest-sub-visual.has-video .fsv-en {
    color: var(--gold);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.fsv-en {
    display: block;
    margin-bottom: 20px;
    color: var(--gold);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .18em;
}

.fsv-title {
    margin: 0;
    color: var(--ink);
    font-size: 52px;
    font-weight: 700;
}

.fsv-line {
    display: block;
    width: 44px;
    height: 3px;
    margin: 30px auto 0;
    background: var(--gold);
}

/* 풀폭 탭바 (비주얼 ↔ 바디 구분선) */
.fest-subtabs-bar {
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    background: #fff;
}

.fest-subtabs {
    display: flex;
    width: 100%;
}

.fest-subtabs a {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 22px 12px;
    color: #6a6a6a;
    font-size: 16px;
    font-weight: 600;
    transition: .18s;
}

.fest-subtabs a + a {
    border-left: 1px solid #eee;
}

/* 활성 탭 앞 금색 점 (헤더 드롭다운 모티프) */
.fest-subtabs a::before {
    width: 0;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    content: '';
    transition: .18s;
}

.fest-subtabs a:hover {
    background: #fafbfa;
    color: var(--green);
}

.fest-subtabs a.on {
    color: var(--green);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--green); /* 하단 녹색 바 */
}

.fest-subtabs a.on::before {
    width: 7px;
    margin-right: 9px;
}

/* 페이지 타이틀 + 브레드크럼 (바디 상단, 가운데) */
.fest-sub-head {
    padding: 52px 0 42px;
    text-align: center;
}

.fest-sub-title {
    margin: 0;
    color: var(--ink);
    font-size: 34px;
    font-weight: 700;
}

.fest-navi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 18px;
    color: #aaa;
    font-size: 13px;
}

.fest-navi .nv-home {
    color: #888;
    font-size: 15px;
}

.fest-navi .nv-sep {
    font-size: 11px;
    color: #ccc;
}

.fest-navi .nv-cur {
    color: var(--green);
    font-weight: 600;
}

/* 콘텐츠 영역 */
.fest-sub-main {
    min-height: 300px;
    padding: 0 0 100px;
    background: #fff;
}

/* 빈 페이지 안내 */
.fest-sub-empty {
    padding: 80px 20px;
    text-align: center;
    color: #b3b3b3;
}

.fest-sub-empty i {
    font-size: 48px;
    color: #dbe2de;
}

.fest-sub-empty p {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   7. 메인 히어로
   --------------------------------------------------------- */
.fest-hero {
    position: relative;
    height: calc(100vh + 100px);
    overflow: hidden;
    background: #89938f;
    color: #fff;
}

.fest-hero-image {
    position: absolute;
    inset: 0;
    background: #6f7975;
    color: #fff;
}

/* 메인 비주얼 배경 영상 (유튜브) */
.fest-hero-video {
    /* 영상 위아래 검은 띠(레터박스) 제거용 확대 배율.
       여백이 남으면 숫자를 키우고, 너무 확대되면 줄이세요.
       1.32 = 2.35:1 시네마스코프 / 1.20 = 2:1 / 1.00 = 16:9(확대 없음) */
    --hero-video-zoom: 1.32;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #000;
    pointer-events: none;
}

/* 직접 업로드 영상: object-fit:cover 로 검은 여백 없이 꽉 채움 */
.fest-hero-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

.fest-hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* cover 계산으로 프레임을 채우고, zoom 으로 레터박스(검은 띠)를 잘라냅니다 */
    transform: translate(-50%, -50%) scale(var(--hero-video-zoom, 1.32));
    transform-origin: center center;
    width: 100vw;
    height: 56.25vw;          /* 16:9 기준 */
    min-width: 177.78vh;      /* 세로가 길 때도 화면을 채움 */
    min-height: 100%;
    border: 0;
    pointer-events: none;
}

/* 유튜브 컨트롤러/UI 차단막 : 호버·클릭 자체를 막아 컨트롤이 나타나지 않게 함 */
.fest-hero-video .fhv-guard {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    background: transparent;
}

.fest-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .17));
}

.fest-hero-copy {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.fest-hero-copy p {
    margin: 0 0 30px;
    font-size: 24px;
    font-weight: 700;
    font-family: 'WandoHope';
}

.fest-hero-copy h2 {
    margin: 0 0 50px;
    font-size: 82px;
    line-height: 1;
    font-family: 'WandoHope';
}

.fest-hero-copy div {
    color: rgba(255, 255, 255, .8);
    font-size: 20px;
    line-height: 1.9;
}

.fest-mascot {
    position: absolute;
    z-index: 4;
    right: 10%;
    bottom: 0px;
}

.fest-mascot img {
    display: block;
    width: 100%;
    height: auto;
}

.fest-wave {
    position: absolute;
    z-index: 3;
    bottom: -2px;
    left: 0;
    width: 100%;
    line-height: 0;
}

.fest-wave img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------
   8. 프로그램 카드
   --------------------------------------------------------- */
.fest-programs {
    padding: 100px 0 100px;
    background: #fff;
}

.fest-program-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.fest-program-card {
    position: relative;
    aspect-ratio: 345 / 420; /* 이미지 원본 비율 */
    overflow: hidden;
    border-radius: 7px;
    background: #26322f;
}

.card-image {
    position: absolute;
    inset: 0;
    background-color: #89928e;
    background-position: center;
    background-size: cover;
}

.card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 35%, rgba(0, 0, 0, .82));
}

.card-copy {
    position: absolute;
    bottom: 50px;
    left: 50px;
    color: #fff;
}

.card-copy small,
.card-copy strong {
    display: block;
}

.card-copy small {
    margin-bottom: 20px;
    font-size: 16px;
    opacity: .7;
}

.card-copy strong {
    font-size: 32px;
}

/* ---------------------------------------------------------
   9. 행사지도
   --------------------------------------------------------- */
.fest-map {
    padding: 100px 0 0; /* 이미지를 섹션 하단에 붙이기 위해 하단 패딩 제거 */
    background: #eeeae3;
}

.fest-map-layout {
    display: flex;
    align-items: flex-end;
    gap: 72px;
}

.fest-map-copy {
    flex: 0 0 36%;
    align-self: center; /* 텍스트는 세로 가운데 유지 */
    padding-bottom: 78px;
}

.fest-map-copy h3 {
    margin: 0 0 22px;
    font-size: 48px;
    line-height: 1.25;
}

.fest-map-copy p {
    margin: 0 0 30px;
    color: #777;
    font-size: 20px;
    line-height: 1.9;
}

.fest-more {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 14px 18px;
    background: #1b1b1b;
    color: #fff;
    font-size: 16px;
    transition: background .2s;
}

.fest-more i {
    font-size: 20px;
    line-height: 1;
    transition: transform .2s;
}

.fest-more:hover {
    background: var(--green);
}

.fest-more:hover i {
    transform: translateX(4px);
}

.fest-map-image {
    flex: 1;
}

.fest-map-image img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ---------------------------------------------------------
   10. 공지사항
   --------------------------------------------------------- */
.fest-notice {
    padding: 100px 0;
    background: #fff;
}

.fest-section-head {
    margin-bottom: 50px;
    text-align: center;
}

.fest-section-head h3 {
    margin: 0 0 30px;
    font-size: 48px;
}

.fest-section-head p {
    margin: 0;
    color: #aaa;
    font-size: 18px;
}

.fest-notice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.fest-notice-card {
    min-height: 215px;
    padding: 40px;
    border: 1px solid #e6e6e6;
    border-radius: 7px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .04);
}

/* 제목 최대 2줄 (높이는 em 기준이라 폰트 크기가 바뀌어도 2줄 유지) */
.fest-notice-card strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 3.1em;          /* 1.55 × 2줄 */
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.55;
}

/* 내용 3줄 고정 */
.fest-notice-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: 4.95em;         /* 1.65 × 3줄 */
    margin: 0 0 12px;
    color: #888;
    font-size: 14px;
    line-height: 1.65;
}

.fest-notice-card time {
    color: #aaa;
    font-size: 14px;
}

/* 페이지 인디케이터(점) */
.fest-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    gap: 6px;
}

.fest-pager > * {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 3px;
    background: #bbb;
}

.fest-pager b {
    width: 25px;
    background: #242424;
}

.fest-pager.light > * {
    background: rgba(255, 255, 255, .45);
}

.fest-pager.light b {
    background: #fff;
}

/* 슬라이드 페이지네이션 (기존 pager 점 디자인 유지) */
.fest-pager.swiper-pagination {
    position: static;
}

.fest-pager .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
    margin: 0;
    border-radius: 3px;
    background: #bbb;
    opacity: 1;
    transition: width .25s, background .25s;
}

.fest-pager .swiper-pagination-bullet-active {
    width: 25px;
    background: #242424;
}

.fest-pager.light .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .45);
}

.fest-pager.light .swiper-pagination-bullet-active {
    background: #fff;
}

/* 페이지가 하나뿐이면 점 숨김 */
.fest-pager .swiper-pagination-bullet:only-child {
    display: none;
}

/* 슬라이더 안에서 카드가 높이를 꽉 채우도록 */
.fest-notice-slider .swiper-slide,
.fest-gallery-slider .swiper-slide {
    height: auto;
}

.fest-notice-slider .swiper-slide > *,
.fest-gallery-slider .swiper-slide > * {
    display: block;
    height: 100%;
}

/* ---------------------------------------------------------
   11. 포토갤러리
   --------------------------------------------------------- */
.fest-gallery {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: #07131a;
}

.fest-gallery-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #172a2e;
    color: #aab8ba;
}

.fest-gallery-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fest-gallery-content {
    position: relative;
    z-index: 2;
}

.fest-section-head.light {
    color: #fff;
}

.fest-section-head.light p {
    color: rgba(255, 255, 255, .55);
}

.fest-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.fest-gallery-card {
    overflow: hidden;
    border-radius: 7px;
    background: #fff;
}

.gallery-image-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 245px;
    overflow: hidden;
    background: #8d9996;
}

.gallery-image-slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.fest-gallery-card:hover .gallery-image-slot img {
    transform: scale(1.05);
}

.gallery-image-slot i {
    color: #cfd8d6;
    font-size: 40px;
}

/* 제목 최대 2줄 (높이는 em 기준이라 폰트 크기가 바뀌어도 2줄 유지) */
.fest-gallery-card strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: calc(3.1em + 40px);   /* 1.55 × 2줄 + 상하 패딩 20px */
    padding: 20px;
    color: #222;
    font-size: 20px;
    line-height: 1.55;
}

/* ---------------------------------------------------------
   12. 푸터
   --------------------------------------------------------- */
#fest-ft {
    padding: 70px 0;
    background: #151515;
    color: #8b8b8b;
    font-size: 15px;
}

/* 상단 : 정보(좌) + SNS(우) */
.fest-ft-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.fest-ft-inner p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.5;
}

.fest-ft-inner p:last-child {
    margin-bottom: 0;
}

/* 항목 구분선 | */
.fest-ft-info .bar {
    display: inline-block;
    margin: 0 18px;
    color: #4a4a4a;
}

/* 가로 구분선 + 카피라이트 */
.fest-ft-inner small {
    display: block;
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid #2b2b2b;
    color: #6f6f6f;
    font-size: 15px;
}

.fest-sns {
    display: flex;
    flex-shrink: 0;
    gap: 12px;
}

.fest-sns a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #262626;
    color: #d8d8d8;
    font-size: 19px;
    transition: background .2s, color .2s;
}

.fest-sns a:hover {
    background: var(--gold);
    color: #151515;
}

/* =========================================================
   서브페이지 콘텐츠 레이아웃 (축제소개 / 프로그램 / 조직위원회)
   ========================================================= */
.fest-page { width: 100%; max-width: 1440px; margin: 0 auto; }
.fest-page.wide { max-width: 1440px; }

/* 섹션 리드(소개 문단) */
.fp-lead { margin: 0 0 34px; }
.fp-lead .fp-eyebrow {
    display: inline-block; margin-bottom: 12px; padding: 5px 14px;
    border-radius: 999px; background: #eef3ef; color: var(--green);
    font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.fp-lead h4 {
    margin: 0 0 14px; color: var(--ink);
    font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35;
}
.fp-lead p { margin: 0; color: #5b6472; font-size: 16px; line-height: 1.85; }

/* 대표 이미지 자리(placeholder) */
.fest-figure {
    position: relative; margin: 0 0 30px; border-radius: 16px; overflow: hidden;
    border: 1px solid #e8ddc4; background:
        repeating-linear-gradient(135deg, #f7f4ec 0 22px, #f2ede1 22px 44px);
    min-height: 340px; display: flex; align-items: center; justify-content: center;
}
.fest-figure.sm { min-height: 220px; }
.fest-figure img { display: block; width: 100%; height: auto; }
/* 실제 이미지가 들어간 경우: 플레이스홀더 배경/최소높이 해제 */
.fest-figure.has-img { min-height: 0; background: none; border-color: #e8e3d8; }
.fest-figure .ff-ph {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: #b0a789; font-size: 15px; font-weight: 700; letter-spacing: .02em;
}
.fest-figure .ff-ph i { font-size: 40px; color: #cdbf9c; }

/* 본문 프로즈 */
.fest-prose { color: #4b5563; font-size: 16px; line-height: 1.9; }
.fest-prose p { margin: 0 0 18px; }
.fest-prose p:last-child { margin-bottom: 0; }
.fest-prose strong { color: var(--green); font-weight: 700; }

/* 정보(개요) 표 : 라벨 + 값 */
.fest-infotable {
    width: 100%; margin: 30px 0 0; border-top: 2px solid var(--green);
    border-collapse: collapse; font-size: 16px;
}
.fest-infotable th, .fest-infotable td {
    padding: 18px 20px; border-bottom: 1px solid #eceff2; text-align: left; vertical-align: top;
}
.fest-infotable th {
    width: 190px; background: #f7faf8; color: var(--green-dark);
    font-weight: 800; white-space: nowrap;
}
.fest-infotable td { color: #4b5563; }

/* 강조 박스 (연혁 / 주요역할 / 운영목적) */
.fest-callout {
    margin: 28px 0 0; padding: 26px 28px; border-radius: 14px;
    background: #f7faf8; border: 1px solid #e6efe9; border-left: 4px solid var(--gold);
}
.fest-callout h5 {
    margin: 0 0 12px; color: var(--green-dark); font-size: 18px; font-weight: 800;
}
.fest-callout p { margin: 0; color: #5b6472; font-size: 15px; line-height: 1.85; }
.fest-callout ul { margin: 0; padding-left: 18px; color: #5b6472; font-size: 15px; line-height: 1.9; }

/* 일정표 테이블 */
.fest-schedule {
    width: 100%; margin: 4px 0 0; border-collapse: separate; border-spacing: 0;
    font-size: 16px; border: 1px solid #e8e3d8; border-radius: 14px; overflow: hidden;
}
.fest-schedule thead th {
    background: var(--green); color: #fff; font-weight: 700;
    padding: 16px 18px; text-align: left; font-size: 15px;
}
.fest-schedule tbody td { padding: 16px 18px; border-top: 1px solid #eef0f5; color: #4b5563; }
.fest-schedule tbody tr:nth-child(even) td { background: #faf8f3; }
.fest-schedule .sch-date { font-weight: 800; color: var(--green-dark); white-space: nowrap; width: 120px; }
.fest-schedule .sch-place { color: #8a93a3; white-space: nowrap; width: 160px; }

/* 프로그램 카드 그리드 */
.fest-prog-intro { margin: 0 0 26px; color: #5b6472; font-size: 16px; line-height: 1.85; }
.fest-prog-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.fest-prog-card {
    display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
    background: #fff; border: 1px solid #eceadf;
    box-shadow: 0 6px 20px rgba(33,73,61,.05); transition: transform .18s, box-shadow .18s;
}
.fest-prog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(33,73,61,.12); }
.fest-prog-card .fp-thumb {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
    background: repeating-linear-gradient(135deg, #f7f4ec 0 20px, #f2ede1 20px 40px);
    display: flex; align-items: center; justify-content: center;
}
.fest-prog-card .fp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fest-prog-card .fp-thumb .fp-ph { color: #c1b593; font-size: 30px; }
.fest-prog-card .fp-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 20px 22px; }
.fest-prog-card .fp-cat {
    display: inline-flex; align-self: flex-start; margin-bottom: 10px; padding: 4px 11px;
    border-radius: 999px; background: #eef3ef; color: var(--green);
    font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.fest-prog-card .fp-name { margin: 0 0 12px; color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.fest-prog-card .fp-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fest-prog-card .fp-meta span { display: flex; align-items: center; gap: 8px; color: #5b6472; font-size: 14px; }
.fest-prog-card .fp-meta i { color: var(--gold); font-size: 15px; width: 16px; text-align: center; }
.fest-prog-card .fp-desc {
    margin: auto 0 0; padding-top: 14px; border-top: 1px dashed #e6e2d6;
    color: #77808d; font-size: 14px; line-height: 1.65;
}

/* 조직도 */
.fest-org { text-align: center; padding: 10px 0 6px; }
.fest-org .org-node {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 200px; padding: 16px 26px; border-radius: 12px;
    font-size: 17px; font-weight: 800;
}
.fest-org .org-top { background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(33,73,61,.22); }
.fest-org .org-mid { background: #eef3ef; color: var(--green-dark); border: 1px solid #dbe7e0; }
.fest-org .org-line { width: 2px; height: 30px; margin: 0 auto; background: #cdd8d2; }
.fest-org .org-branch {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 30px; position: relative;
}
.fest-org .org-branch::before {
    content: ""; position: absolute; top: -30px; left: 50%; width: 2px; height: 30px;
    background: #cdd8d2; transform: translateX(-50%);
}
.fest-org .org-leaf {
    min-width: 150px; padding: 14px 20px; border-radius: 12px;
    background: #fff; border: 1px solid #e2e8e4; color: #3f4a44; font-size: 15px; font-weight: 700;
}

/* =========================================================
   조직도 (상세 · 위원 명단)
   ========================================================= */
.fest-orgchart { padding: 4px 0 0; }
.oc-node {
    display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 14px 30px; border-radius: 12px; text-align: center;
}
.oc-node .oc-role { font-size: 12px; font-weight: 700; letter-spacing: .04em; opacity: .9; }
.oc-node .oc-name { font-size: 18px; font-weight: 800; }
.oc-center { text-align: center; }
.oc-chair { background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff; box-shadow: 0 10px 24px rgba(33,73,61,.24); }
.oc-line { width: 2px; height: 26px; background: #cdd8d2; margin: 0 auto; }

/* 고문 / 감사 */
.oc-council { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 22px 0; }
.oc-box {
    flex: 1 1 320px; max-width: 520px;
    background: #f7faf8; border: 1px solid #e6efe9; border-radius: 12px; padding: 16px 22px;
}
.oc-box .oc-bx-role { display: block; color: var(--green); font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.oc-box .oc-bx-names { color: #4b5563; font-size: 15px; line-height: 1.75; }

/* 부위원장 */
.oc-vice .oc-node { background: #eef3ef; color: var(--green-dark); border: 1px solid #dbe7e0; }
.oc-vice .oc-name { font-weight: 800; }

/* 본부 블록 */
.oc-hq-block { margin-top: 12px; }
.oc-hq-title {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    margin: 0 auto 18px; padding: 14px 24px; max-width: 640px; border-radius: 12px;
    background: var(--green); color: #fff; font-size: 18px; font-weight: 800;
}
.oc-hq-title .oc-hq-lead { font-size: 14px; font-weight: 700; color: #d5e4dc; }

/* 부서 카드 그리드 */
.oc-depts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 34px; }
.oc-dept {
    border: 1px solid #e6e2d6; border-radius: 14px; overflow: hidden; background: #fff;
    box-shadow: 0 4px 14px rgba(33,73,61,.05);
}
.oc-dept-head {
    background: linear-gradient(135deg, #2f6b4f, var(--green)); color: #fff;
    padding: 13px 16px; font-weight: 800; font-size: 15px; text-align: center;
}
.oc-dept-lead { padding: 13px 16px; border-bottom: 1px dashed #e6e2d6; background: #f7faf8; text-align: center; }
.oc-dept-lead .lb { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: #fbf3e1; color: #b07d1f; font-size: 11px; font-weight: 800; vertical-align: middle; }
.oc-dept-lead .ln { font-size: 16px; color: var(--green-dark); font-weight: 800; vertical-align: middle; }
.oc-dept ul { list-style: none; margin: 0; padding: 8px 16px 12px; }
.oc-dept li { padding: 7px 2px; color: #4b5563; font-size: 14px; border-bottom: 1px solid #f2f2f2; text-align: center; }
.oc-dept li:last-child { border-bottom: 0; }

/* 사무국 */
.oc-office { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.oc-office .oc-box { flex: 0 1 260px; text-align: center; }
.oc-office .oc-bx-role { color: var(--green-dark); }
.oc-office .oc-vac { color: #9aa4ac; font-style: normal; }

/* =========================================================
   조직도 (보드형 · 현장 조직도와 동일 구조)
   ========================================================= */
.ocb-wrap { overflow-x: auto; padding: 6px 2px 14px; }
.ocb { min-width: 1080px; }
.ocb-line { width: 2px; height: 22px; background: #cdd8d2; margin: 0 auto; }
.ocb-row { display: flex; justify-content: center; align-items: flex-start; gap: 14px; }
.ocb-node {
    display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 12px 24px; border-radius: 12px; text-align: center; min-width: 120px;
}
.ocb-node .r { font-size: 12px; font-weight: 800; letter-spacing: .03em; opacity: .92; }
.ocb-node .n { font-size: 17px; font-weight: 800; }
.ocb-chair {
    background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff;
    padding: 18px 44px; border: 2px solid var(--gold);
    box-shadow: 0 14px 30px rgba(33,73,61,.30), 0 0 0 5px rgba(201,162,91,.16);
}
.ocb-chair .r { color: var(--gold); opacity: 1; font-size: 13px; }
.ocb-chair .n { font-size: 24px; letter-spacing: .01em; }
.ocb-vice .ocb-node { background: #eef3ef; color: var(--green-dark); border: 1px solid #dbe7e0; }

/* 고문/감사/자문위원 */
.ocb-council { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 20px 0; }
.ocb-box {
    background: #f7faf8; border: 1px solid #e6efe9; border-radius: 12px; padding: 13px 20px;
    min-width: 220px; max-width: 460px; text-align: center;
}
.ocb-box .r { display: block; color: var(--green); font-size: 12px; font-weight: 800; margin-bottom: 5px; }
.ocb-box .n { color: #4b5563; font-size: 14px; line-height: 1.7; }
.ocb-box.vac { background: #f6f7f8; border-style: dashed; }
.ocb-box.vac .n { color: #a7aeb5; }

/* 본부장 라인 */
.ocb-hqline .ocb-node.hq { background: var(--green); color: #fff; }
.ocb-hqline .ocb-node.adm { background: #eef1f4; color: #6b7480; border: 1px dashed #cfd6dd; }
.ocb-hqline .ocb-node.adm .n { color: #98a1aa; }

/* 부서 그룹(본부별) 가로 배치 */
.ocb-groups { display: flex; justify-content: center; align-items: flex-start; gap: 16px; margin-top: 10px; }
.ocb-group { }
.ocb-hqhead {
    background: var(--green); color: #fff; text-align: center;
    padding: 11px 14px; border-radius: 10px; font-weight: 800; font-size: 15px; margin-bottom: 16px;
}
.ocb-hqhead span { display: block; font-size: 12px; color: #d5e4dc; font-weight: 700; margin-top: 2px; }
.ocb-deptcols { display: flex; gap: 10px; align-items: flex-start; }
.ocb-dept { width: 150px; border: 1px solid #e6e2d6; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(33,73,61,.05); }
.ocb-dept-h { background: linear-gradient(135deg, #2f6b4f, var(--green)); color: #fff; text-align: center; padding: 10px 8px; font-weight: 800; font-size: 14px; }
.ocb-dept-lead { text-align: center; padding: 9px 8px; background: #f7faf8; border-bottom: 1px dashed #e6e2d6; }
.ocb-dept-lead .lb { display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 999px; background: #fbf3e1; color: #b07d1f; font-size: 10px; font-weight: 800; vertical-align: middle; }
.ocb-dept-lead .ln { font-size: 15px; color: var(--green-dark); font-weight: 800; vertical-align: middle; }
.ocb-dept ul { list-style: none; margin: 0; padding: 6px 8px 10px; }
.ocb-dept li { text-align: center; padding: 6px 0; font-size: 13px; color: #4b5563; border-bottom: 1px solid #f2f2f2; }
.ocb-dept li:last-child { border-bottom: 0; }

/* 사무국 그룹 (세로 박스) */
.ocb-group-office .ocb-deptcols { flex-direction: column; gap: 10px; }
.ocb-mini { width: 150px; border: 1px solid #e6e2d6; border-radius: 12px; background: #fff; text-align: center; padding: 12px 10px; }
.ocb-mini .r { display: block; color: var(--green); font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.ocb-mini .n { color: var(--green-dark); font-size: 15px; font-weight: 800; }
.ocb-mini.vac { border-style: dashed; background: #f8f9fa; }
.ocb-mini.vac .n { color: #a7aeb5; font-weight: 700; }

/* 반응형 (사이트 공통 브레이크포인트: 1024 / 720 / 430) */
@media (max-width: 1024px) {
    .fest-prog-grid { grid-template-columns: repeat(2, 1fr); }
    .oc-depts { grid-template-columns: repeat(2, 1fr); }
    .fest-figure { min-height: 260px; }
    .fp-lead h4 { font-size: 24px; }
}
@media (max-width: 720px) {
    .fp-lead h4 { font-size: 21px; }
    .fp-lead p, .fest-prose { font-size: 15px; }
    .fest-figure { min-height: 180px; }
    .fest-prog-grid { grid-template-columns: 1fr; }
    .fest-infotable th { width: 110px; padding: 14px 12px; font-size: 15px; }
    .fest-infotable td { padding: 14px 12px; font-size: 15px; }
    .fest-schedule thead th, .fest-schedule tbody td { padding: 12px; font-size: 14px; }
    .fest-schedule .sch-date { width: auto; }
    .fest-schedule .sch-place { width: auto; }
    .fest-org .org-node, .fest-org .org-leaf { min-width: 0; width: 100%; }
    .fest-org .org-branch { flex-direction: column; }
    .oc-depts { grid-template-columns: 1fr; }
    .fest-callout { padding: 20px 18px; }
}

/* =========================================================
   행사 일정표 · 날짜별 타임라인
   ========================================================= */
/* 날짜 탭 */
.fest-tl-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 30px; }
.fest-tl-tabs a {
    flex: 1 1 0; min-width: 130px; text-align: center;
    padding: 15px 16px; border-radius: 12px; text-decoration: none;
    background: #f3f5f2; border: 1px solid #e6efe9;
    color: #4b5563; font-size: 16px; font-weight: 800;
    transition: background .15s, color .15s, box-shadow .15s, transform .12s;
}
.fest-tl-tabs a:hover { background: #eef3ef; color: var(--green); transform: translateY(-1px); }
.fest-tl-tabs a.on {
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(33,73,61,.22);
}

.fest-timeline { margin-top: 6px; }
.fest-tl-day { margin-bottom: 40px; scroll-margin-top: 100px; }
.fest-tl-day:last-child { margin-bottom: 0; }
.fest-tl-dayhead {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding: 16px 24px; border-radius: 14px;
    background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff;
}
.fest-tl-dayhead .d-date { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.fest-tl-dayhead .d-place {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; color: #d5e4dc;
}
.fest-tl-dayhead .d-place i { color: var(--gold); }

.fest-tl-list { position: relative; margin: 4px 0 0; padding-left: 0; }
.fest-tl-list::before {
    content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px;
    width: 2px; background: #e6efe9;
}
.fest-tl-item {
    position: relative; display: grid; grid-template-columns: 140px 1fr; gap: 20px;
    padding: 16px 0 16px 34px; border-bottom: 1px dashed #ededed;
}
.fest-tl-item:last-child { border-bottom: 0; }
.fest-tl-item::before {
    content: ""; position: absolute; left: 0; top: 22px;
    width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
    background: #fff; border: 3px solid var(--gold);
    box-shadow: 0 0 0 4px #fff;
}
.fest-tl-item.is-star::before { background: var(--gold); }
.fest-tl-time { color: var(--green-dark); font-weight: 800; font-size: 15px; white-space: nowrap; padding-top: 1px; }
.fest-tl-name { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.5; }
.fest-tl-name .tl-star {
    margin-left: 6px; color: var(--gold); font-size: 15px; vertical-align: middle; line-height: 1;
}
.fest-tl-name .tl-badge {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    background: #fbf3e1; color: #b07d1f; font-size: 11px; font-weight: 800; vertical-align: middle;
}
.fest-tl-place {
    display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px;
    background: #eef3ef; color: var(--green); font-size: 12px; font-weight: 700; vertical-align: middle;
}

/* 상시 운영 안내 */
.fest-always { margin-top: 44px; }
.fest-always-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; }
.fest-always-card {
    padding: 22px 22px 24px; border-radius: 14px;
    background: #f7faf8; border: 1px solid #e6efe9; border-top: 3px solid var(--gold);
}
.fest-always-card .ac-name { color: var(--green-dark); font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.fest-always-card .ac-loc { color: var(--green); font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.fest-always-card .ac-time { color: #5b6472; font-size: 14px; line-height: 1.6; }

@media (max-width: 1024px) {
    .fest-always-grid { grid-template-columns: repeat(2, 1fr); }
    .fest-tl-item { grid-template-columns: 118px 1fr; gap: 14px; }
}
@media (max-width: 720px) {
    .fest-tl-tabs { gap: 6px; }
    .fest-tl-tabs a { min-width: 0; flex: 1 1 46%; padding: 12px 8px; font-size: 14px; }
    .fest-tl-dayhead { padding: 13px 16px; }
    .fest-tl-dayhead .d-date { font-size: 18px; }
    .fest-tl-item { grid-template-columns: 1fr; gap: 4px; padding: 14px 0 14px 24px; }
    .fest-tl-time { font-size: 14px; }
    .fest-tl-name { font-size: 15px; }
    .fest-always-grid { grid-template-columns: 1fr; }
    .fest-always { margin-top: 34px; }
}

/* =========================================================
   스크롤 등장 효과 (scroll reveal)
   - 화면에 들어오면 나타나고, 벗어나면 초기화되어 매번 반복
   - 사용자가 '동작 줄이기'를 켠 경우에는 적용하지 않음
   ========================================================= */
/* html.js-reveal 이 있을 때만 숨김이 적용됩니다.
   (JS가 실패하면 클래스가 붙지 않으므로 콘텐츠는 항상 보입니다) */
@media (prefers-reduced-motion: no-preference) {
    .js-reveal [data-reveal] { opacity: 0; }

    .js-reveal [data-reveal].is-in {
        animation-duration: 1.3s;
        animation-timing-function: cubic-bezier(.22, .61, .36, 1);
        animation-fill-mode: both;
    }

    .js-reveal [data-reveal="up"].is-in    { animation-name: fvUp; }
    .js-reveal [data-reveal="down"].is-in  { animation-name: fvDown; }
    .js-reveal [data-reveal="left"].is-in  { animation-name: fvLeft; }
    .js-reveal [data-reveal="right"].is-in { animation-name: fvRight; }
    .js-reveal [data-reveal="zoom"].is-in  { animation-name: fvZoom; }
    .js-reveal [data-reveal="fade"].is-in  { animation-name: fvFade; }

    /* 줄이 당겨지듯 좌우로 펼쳐지는 강조선 (축제 컨셉) */
    .js-reveal [data-reveal="rope"] { opacity: 1; transform: scaleX(0); transform-origin: left center; }
    .js-reveal [data-reveal="rope"].is-in { animation-name: fvRope; }
}

@keyframes fvUp    { from { opacity: 0; transform: translateY(40px); }  to { opacity: 1; transform: none; } }
@keyframes fvDown  { from { opacity: 0; transform: translateY(-32px); } to { opacity: 1; transform: none; } }
@keyframes fvLeft  { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
@keyframes fvRight { from { opacity: 0; transform: translateX(44px); }  to { opacity: 1; transform: none; } }
@keyframes fvZoom  { from { opacity: 0; transform: scale(.94); }        to { opacity: 1; transform: none; } }
@keyframes fvFade  { from { opacity: 0; }                                to { opacity: 1; } }
@keyframes fvRope  { from { opacity: 1; transform: scaleX(0); }          to { opacity: 1; transform: scaleX(1); } }