/* ========================================================================== GIDF 2026 — main.css Pretendard 폰트 기반, 모바일 퍼스트 반응형 ========================================================================== */ /* 고양덕양체 (고양시 전용서체, 공공누리 제1유형 - 상업적 이용 가능) */ @font-face { font-family: 'GoyangDeokyang'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/GoyangDeogyang.woff') format('woff'); font-weight: normal; font-display: swap; } :root { --color-navy: #1b2489; --color-red: #e6001a; --color-black: #0a0a0a; --color-white: #ffffff; --color-green: #1e9e6c; --color-gray-bg: #4d4d4d; --color-text-light: #cccccc; --max-width: 1200px; --header-height: 64px; --logo-col-width: 210px; --font-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif; --font-goyang: 'GoyangDeokyang', 'Pretendard', sans-serif; } * { box-sizing: border-box; } /* 그누보드 게시판 페이지는 body에 gidf-page 클래스가 안 붙어요(코어 head.sub.php가 그냥 만 찍음). 그누보드 코어 css(default.css)가 body에 직접 font-family:'Malgun Gothic'을 걸어놔서, 이걸 안 이기면 헤더/푸터/게시판 전체가 그 폰트를 그대로 상속받아요. main.css가 default.css보다 뒤에 로드되니 같은 specificity(body 요소 선택자)로 여기서 다시 지정해서 덮어씁니다. */ body { font-family: var(--font-base); } body.gidf-page { margin: 0; font-family: var(--font-base); color: #111; background: #fff; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; cursor: pointer; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } @media (min-width: 900px) { .container { padding: 0 40px; } } /* ---------- Header ---------- */ .gidf-header { position: sticky; top: 0; z-index: 100; background: #fff; transition: background-color .35s ease; font-family: var(--font-base); } .gidf-header--dark { background: var(--color-black); } .gidf-header--dark .gidf-nav a { color: #fff; } @media (min-width: 900px) { .gidf-header:has(.gidf-nav-wrapper:hover), .gidf-header:has(.gidf-nav-wrapper:focus-within) { background: var(--color-black); } .gidf-header:has(.gidf-nav-wrapper:hover) .gidf-nav a, .gidf-header:has(.gidf-nav-wrapper:focus-within) .gidf-nav a { color: #fff; transition: color .35s ease; } .gidf-header .gidf-nav a { transition: color .35s ease; } } .gidf-header__inner { max-width: var(--max-width); margin: 0 auto; height: var(--header-height); padding: 0 20px; display: flex; align-items: center; justify-content: space-between; } @media (min-width: 900px) { .gidf-header__inner { padding: 0 40px; display: grid; grid-template-columns: var(--logo-col-width) repeat(6, 1fr); align-items: stretch; gap: 32px; } .gidf-logo { align-self: center; } } .gidf-logo { position: relative; display: inline-flex; align-items: center; } .gidf-logo__img { height: 36px; width: auto; display: block; transition: opacity .35s ease; } .gidf-logo__img--white { position: absolute; top: 0; left: 0; opacity: 0; } /* 검정 헤더(서브페이지)에서는 항상 흰색 로고 */ .gidf-header--dark .gidf-logo__img--color { opacity: 0; } .gidf-header--dark .gidf-logo__img--white { opacity: 1; } @media (min-width: 900px) { /* 메가메뉴 호버로 헤더가 검정으로 바뀔 때도 흰색 로고로 전환 */ .gidf-header:has(.gidf-nav-wrapper:hover) .gidf-logo__img--color, .gidf-header:has(.gidf-nav-wrapper:focus-within) .gidf-logo__img--color { opacity: 0; } .gidf-header:has(.gidf-nav-wrapper:hover) .gidf-logo__img--white, .gidf-header:has(.gidf-nav-wrapper:focus-within) .gidf-logo__img--white { opacity: 1; } } .gidf-nav-wrapper { display: contents; } .gidf-nav { display: none; } .gidf-nav ul { display: flex; gap: 28px; } .gidf-nav a { font-weight: 700; font-size: 17px; color: #222; } .gidf-nav a:hover { color: var(--color-red); } @media (min-width: 900px) { /* nav/ul은 껍데기만 남기고, li가 header 그리드의 칸(2~7번 트랙)에 그대로 배치되게 함 */ .gidf-nav { display: contents; } .gidf-nav ul { display: contents; } .gidf-nav ul li { text-align: left; height: 100%; } .gidf-nav ul li a { height: 100%; display: flex; align-items: center; } } /* ---------- Mega menu (호버 시 전체 사이트맵 노출) ---------- */ .gidf-mega { display: none; } @media (min-width: 900px) { .gidf-mega { display: block; position: absolute; top: 100%; left: 0; width: 100%; background: linear-gradient(180deg, var(--color-black) 0%, var(--color-black) 35%, rgba(10, 10, 10, 0) 100%); padding-bottom: 120px; color: #fff; opacity: 0; visibility: hidden; transform: translateY(-10px); /* 마우스가 메뉴 항목에서 아래 패널로 이동하는 짧은 순간 사라지지 않도록, 사라질 때만 0.2초 여유(grace period)를 두고 나서 페이드아웃 시작 */ transition: opacity .3s ease .2s, transform .3s ease .2s, visibility 0s linear .5s; z-index: 90; border-top: 1px solid #222; pointer-events: none; } .gidf-nav-wrapper:hover .gidf-mega, .gidf-nav-wrapper:focus-within .gidf-mega { /* 나타날 때는 지연 없이 바로 부드럽게 */ transition: opacity .35s ease, transform .35s ease, visibility 0s linear 0s; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .gidf-mega__grid { /* header__inner와 동일한 max-width/padding(.container)에 동일한 grid-template을 적용해 위쪽 메뉴 라벨과 정확히 같은 세로선 위에 컬럼이 놓이도록 맞춤 */ display: grid; grid-template-columns: var(--logo-col-width) repeat(6, 1fr); gap: 32px; padding-top: 36px; padding-bottom: 44px; } .gidf-mega__spacer { grid-column: 1; } .gidf-mega__title { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 16px; letter-spacing: 0.02em; } .gidf-mega__title a { color: inherit; } .gidf-mega__title a:hover { color: var(--color-red); } .gidf-mega__col ul { display: flex; flex-direction: column; gap: 12px; } .gidf-mega__col a { font-size: 12px; color: #999; font-weight: 600; } .gidf-mega__col a:hover { color: #fff; } } .gidf-nav-toggle { border: none; background: none; padding: 8px; display: flex; flex-direction: column; gap: 5px; } .gidf-nav-toggle span { width: 24px; height: 2px; background: #222; display: block; } .gidf-mobile-nav { display: none; flex-direction: column; background: #fff; border-top: 1px solid #eee; } .gidf-mobile-nav.is-open { display: flex; } .gidf-mobile-nav__link { padding: 14px 20px; border-bottom: 1px solid #f2f2f2; font-weight: 600; color: #222; display: block; } .gidf-accordion { border-bottom: 1px solid #f2f2f2; } .gidf-accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-weight: 600; font-size: 15px; color: #222; background: none; border: none; text-align: left; } .gidf-accordion__trigger::after { content: '+'; font-size: 18px; font-weight: 400; color: #999; transition: transform .2s ease; flex-shrink: 0; margin-left: 12px; } .gidf-accordion.is-open .gidf-accordion__trigger::after { transform: rotate(45deg); } .gidf-accordion.is-open .gidf-accordion__trigger { color: var(--color-red); } .gidf-accordion__panel { max-height: 0; overflow: hidden; background: #fafafa; transition: max-height .25s ease; } .gidf-accordion__panel a { display: block; padding: 11px 20px 11px 32px; font-size: 14px; color: #555; border-top: 1px solid #f0f0f0; } .gidf-accordion__panel a:first-child { border-top: none; } @media (min-width: 900px) { .gidf-nav-toggle { display: none; } .gidf-mobile-nav { display: none !important; } } /* ---------- Hero ---------- */ .gidf-hero { position: relative; padding: 32px 0 40px; overflow: hidden; } .gidf-hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .gidf-hero__badge img { width: 64px; height: auto; } .gidf-hero__cityinfo { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; } .gidf-hero__cityinfo-logos { display: flex; align-items: center; gap: 10px; } .gidf-hero__goyangsi { height: 36px; width: auto; } .gidf-hero__goyangsi--city { height: 25px; /* 원본 대비 약 70% */ } .gidf-hero__notice { font-size: 10px; color: #888; max-width: 220px; line-height: 1.5; display: none; } @media (min-width: 640px) { .gidf-hero__notice { display: block; } } .gidf-hero__body { margin-top: 24px; position: relative; } .gidf-hero__eyebrow { color: var(--color-navy); font-weight: 700; font-size: 23px; margin: 0 0 6px; } .gidf-hero__title { font-family: var(--font-base); font-size: clamp(30px, 6.5vw, 52px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; color: var(--color-navy); margin: 0 0 20px; max-width: 600px; transform: scaleX(0.8); transform-origin: left top; } .gidf-hero__date { font-family: var(--font-base); font-size: clamp(24px, 4.5vw, 34px); font-weight: 800; color: var(--color-navy); margin: 0 0 8px; } .gidf-hero__location { font-family: var(--font-goyang); font-weight: 700; font-size: 24px; color: var(--color-navy); margin: 0 0 2px; } .gidf-hero__location-en { font-family: var(--font-goyang); font-size: 13px; letter-spacing: 0.03em; color: #999; margin: 0 0 24px; } .gidf-hero__graphic { margin-top: 24px; text-align: center; } .gidf-hero__graphic-clip { display: inline-block; max-width: 480px; width: 100%; } .gidf-hero__graphic-clip img { display: block; width: 100%; margin: 0 auto; } @media (min-width: 900px) { .gidf-hero__body { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; } .gidf-hero__graphic { margin-top: 0; grid-row: 1 / 3; grid-column: 2; } .gidf-hero__text { grid-column: 1; } } .gidf-hero__orgs { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 24px; font-size: 11px; color: #666; } .gidf-hero__orgs span { display: inline-flex; align-items: center; gap: 6px; } .gidf-hero__orgs img { height: 28px; width: auto; } .gidf-hero__orgs img[alt="고양안무가협회"] { height: 40px; } .gidf-hero__orgs-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } @media (min-width: 900px) { .gidf-hero__orgs { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; } .gidf-hero__orgs-sub { gap: 14px; } } /* ---------- Video ---------- */ .gidf-video-wrap { position: relative; z-index: 2; /* 히어로 하단 그래픽과 겹치도록 끌어올림 (원본 디자인처럼 영상 박스가 GIDF 그래픽 하단 ~20%를 덮게 됨). 겹치는 정도가 안 맞으면 이 값을 조정하세요. */ margin-top: -110px; /* 영상 박스의 세로 중간까지만 검정 배경 (아래는 PROGRAMS 섹션과 자연스럽게 이어짐) */ background: linear-gradient(to bottom, #fff 0%, #fff 50%, #000 50%, #000 100%); } .gidf-video { background: var(--color-gray-bg); aspect-ratio: 16/9; max-width: calc(var(--max-width) * 0.8); margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: center; } .gidf-video__play { width: 64px; height: 64px; border-radius: 50%; background: var(--color-red); border: none; display: flex; align-items: center; justify-content: center; } .gidf-video__play::before { content: ''; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; margin-left: 4px; } .gidf-video iframe { width: 100%; height: 100%; border: none; } /* ---------- Programs (black section) ---------- */ .gidf-programs { background: var(--color-black); color: #fff; padding: 56px 0 64px; } .gidf-programs__heading { display: flex; align-items: center; gap: 10px; font-family: var(--font-base); font-size: clamp(30px, 4.5vw, 44px); font-weight: 900; margin: 0 0 32px; } .gidf-programs__heading svg { width: 28px; height: 14px; } .gidf-program-group { margin-bottom: 40px; } .gidf-program-group__title { font-family: var(--font-base); font-size: clamp(18px, 2.5vw, 24px); font-weight: 900; margin: 0 0 14px; } .gidf-slider { position: relative; } .gidf-slider__track { display: flex; gap: 4px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .gidf-slider__track::-webkit-scrollbar { display: none; } .gidf-slider__item { flex: 0 0 auto; display: block; width: 62%; aspect-ratio: 3/4; background: #1a1a1a; border: 1px solid #262626; overflow: hidden; cursor: pointer; } .gidf-slider__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .gidf-slider__item:hover img { transform: scale(1.05); } @media (min-width: 640px) { .gidf-slider__item { width: 320px; } } .gidf-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #000; border: none; display: flex; align-items: center; justify-content: center; z-index: 2; } .gidf-slider__nav--prev { left: -6px; } .gidf-slider__nav--next { right: -6px; } @media (min-width: 900px) { .gidf-slider__nav--prev { left: -18px; } .gidf-slider__nav--next { right: -18px; } } /* 그누보드 기본 CSS(default.css)가 #container에 float:left를 걸어놓는 경우가 있어서 (원래 옆에 #aside 위젯이 float으로 나란히 붙는 구조) 무효화합니다. 게시판 페이지가 아니면 #container가 없어서 영향 없습니다. */ #container { float: none !important; width: auto !important; margin: 0 !important; } /* ---------- Footer ---------- */ .gidf-footer { background: var(--color-black); color: var(--color-text-light); padding: 40px 0 24px; border-top: 1px solid #222; clear: both; font-family: var(--font-base); } .gidf-footer__block { margin-bottom: 24px; } .gidf-footer__label { font-size: 16px; font-weight: 600; color: #888; margin: 0 0 10px; letter-spacing: 0.02em; } .gidf-footer__logos { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; } .gidf-footer__logos img { height: 44px; width: auto; } .gidf-footer__logos img[alt="고양안무가협회"] { height: 60px; } .gidf-footer__brand { font-size: 19px; font-weight: 600; color: #fff; } .gidf-footer__phone { font-size: 13px; font-weight: 400; color: #aaa; } .gidf-footer__copyright { font-size: 16px; font-weight: 600; color: #666; margin-top: 16px; } .gidf-footer__bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid #222; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; } .gidf-footer__social { display: flex; gap: 12px; } .gidf-footer__social a { width: 32px; height: 32px; border: 1px solid #444; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ccc; } .gidf-footer__social a:hover { color: #fff; border-color: #666; } .gidf-footer__social svg { width: 16px; height: 16px; } /* ---------- Sub page layout (sidebar + content) ---------- */ .gidf-subpage { display: block; padding: 32px 0 64px; font-family: var(--font-base); } /* 그누보드 코어 css(default.css)가 h1~h6에 font-family:'Malgun Gothic'을 직접 걸어놔서, 이 요소들은 위 .gidf-subpage의 상속만으로는 안 이겨요(상속보다 요소에 직접 걸린 규칙이 항상 우선). 그래서 h1~h6에도 명시적으로 지정합니다. */ .gidf-subpage h1, .gidf-subpage h2, .gidf-subpage h3, .gidf-subpage h4, .gidf-subpage h5, .gidf-subpage h6 { font-family: var(--font-base); } .gidf-subpage__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } .gidf-subnav { display: flex; overflow-x: auto; gap: 8px; margin-bottom: 32px; border-bottom: 1px solid #eee; scrollbar-width: none; } .gidf-subnav::-webkit-scrollbar { display: none; } .gidf-subnav a { flex: 0 0 auto; padding: 12px 6px; font-weight: 700; font-size: 14px; color: #999; border-bottom: 2px solid transparent; white-space: nowrap; margin-right: 20px; } .gidf-subnav a.is-active, .gidf-subnav a:hover { color: var(--color-navy); border-bottom-color: var(--color-navy); } .gidf-subpage--dark .gidf-board-page { min-height: 60vh; } @media (min-width: 900px) { .gidf-subpage__inner { display: grid; grid-template-columns: 200px 1fr; gap: 60px; align-items: start; } .gidf-board-page__inner { display: block; } .gidf-subnav { flex-direction: column; border-bottom: none; gap: 4px; position: sticky; top: calc(var(--header-height) + 24px); } .gidf-subnav a { border-bottom: none; border-left: 2px solid transparent; padding: 10px 16px; margin-right: 0; font-size: 25px; line-height: 1.8; } .gidf-subnav a.is-active, .gidf-subnav a:hover { border-left-color: var(--color-navy); background: #f7f7fb; } } /* ---------- 개요(Overview) 페이지 — 다크 테마 변형 ---------- */ .gidf-subpage--dark { background: var(--color-black); color: #fff; } .gidf-subpage--dark .gidf-subnav { border-bottom-color: #222; } .gidf-subpage--dark .gidf-subnav a { color: #777; } .gidf-subpage--dark .gidf-subnav a.is-active, .gidf-subpage--dark .gidf-subnav a:hover { color: #fff; border-bottom-color: #fff; } @media (min-width: 900px) { .gidf-subpage--dark .gidf-subnav a.is-active, .gidf-subpage--dark .gidf-subnav a:hover { border-left-color: #fff; background: #141414; } } .gidf-overview { position: relative; } .gidf-overview__title-wrap { position: relative; padding-top: 48px; } .gidf-overview__watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; width: 140%; text-align: center; font-size: clamp(80px, 16vw, 260px); font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08); white-space: nowrap; line-height: 1; z-index: 0; pointer-events: none; } .gidf-overview__gradient-title { position: relative; z-index: 1; font-weight: 800; font-size: clamp(34px, 6vw, 68px); line-height: 1.08; margin: 0; background: linear-gradient(120deg, #c98a52 0%, #e8562f 22%, #e8296f 52%, #7b3fd6 78%, #3355e8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* 위 .gidf-subpage--dark h1 { color:#fff } 규칙이 클래스+엘리먼트(0,1,1)로 위 .gidf-overview__gradient-title(0,1,0)보다 우선순위가 높아서 그라데이션이 흰색으로 덮여버리는 문제가 있었음 — 아래에서 클래스 2개(0,2,0)로 다시 확실히 이깁니다. */ .gidf-subpage--dark .gidf-overview__gradient-title { color: transparent; -webkit-text-fill-color: transparent; } .gidf-overview__tagline { position: relative; z-index: 1; font-size: 25px; font-weight: 200; color: #aaa; margin: 36px 0 20px; } .gidf-overview__tagline .semi { font-weight: 600; color: #ddd; } .gidf-overview__tagline strong { color: #fff; font-weight: 800; } .gidf-overview__lead { position: relative; z-index: 1; } .gidf-overview__lead p { font-size: 21px; font-weight: 500; line-height: 1.7; color: #ccc; margin: 0 0 20px; } .gidf-overview__section2 { position: relative; margin-top: 100px; padding-top: 40px; } .gidf-overview__watermark-12 { position: absolute; top: -20px; left: 0; margin: 0; font-size: clamp(140px, 24vw, 356px); font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06); line-height: 1; z-index: 0; pointer-events: none; } .gidf-overview__section2-inner { position: relative; z-index: 1; } .gidf-overview__bold { font-size: clamp(22px, 3vw, 30px); font-weight: 800; line-height: 1.5; color: #fff; margin: 0 0 28px; } .gidf-overview__lead2 p { font-size: 21px; font-weight: 500; line-height: 1.7; color: #ccc; margin: 0 0 20px; } .gidf-overview__closing { font-size: clamp(19px, 2.4vw, 25px); font-weight: 800; color: #fff; margin: 8px 0 0; } .gidf-subpage__title { font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -0.5px; margin: 0 0 28px; } .gidf-subpage--dark .gidf-subpage__title { color: #fff; } /* History grid */ .gidf-history__grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 640px) { .gidf-history__grid { grid-template-columns: 1fr 1fr; } } .gidf-history__card { } .gidf-history__poster { width: 100%; aspect-ratio: 3/4; object-fit: cover; margin-bottom: 12px; } .gidf-history__name { font-weight: 800; font-size: clamp(19px, 3vw, 30px); margin: 0 0 8px; } .gidf-history__meta { font-size: 15px; font-weight: 600; color: #666; line-height: 1.7; } .gidf-history__meta span { display: inline-block; width: 64px; color: #999; font-weight: 600; } /* Greeting page */ .gidf-greeting__intro { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; } .gidf-greeting__photo { width: 140px; aspect-ratio: 3/4; object-fit: cover; } .gidf-greeting__intro-text p { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.8; } .gidf-greeting__intro-text strong { font-weight: 800; } @media (min-width: 640px) { .gidf-greeting__intro { flex-direction: row; align-items: flex-end; } } .gidf-greeting__body p { font-size: 20px; font-weight: 400; line-height: 1.8; color: #333; margin: 0 0 20px; } .gidf-greeting__body strong { font-weight: 800; } .gidf-greeting__signature { margin-top: 32px; font-weight: 800; font-size: clamp(22px, 3vw, 30px); } .gidf-greeting__signature span { font-weight: 400; font-size: 15px; color: #777; margin-left: 10px; } /* ---------- index 외 모든 서브페이지: 검정 테마 ---------- */ .gidf-subpage--dark .gidf-history__name { color: #fff; } .gidf-subpage--dark .gidf-history__meta { color: #999; } .gidf-subpage--dark .gidf-history__meta span { color: #666; } .gidf-subpage--dark .gidf-greeting__intro-text p { color: #ccc; } .gidf-subpage--dark .gidf-greeting__intro-text strong { color: #fff; } .gidf-subpage--dark .gidf-greeting__body p { color: #ccc; } .gidf-subpage--dark .gidf-greeting__signature { color: #fff; } .gidf-subpage--dark .gidf-greeting__signature span { color: #999; } .gidf-subpage--dark h1 { color: #fff; } /* ---------- 상단 타이틀 킥커 라벨 (모든 서브페이지 공통) ---------- */ .gidf-kicker { display: block; color: var(--color-red); font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 10px; } /* ---------- 프로그램 상세 페이지 (DOPamine 등) ---------- */ .gidf-program-detail__title { font-size: clamp(36px, 5vw, 56px); font-weight: 800; color: #fff; letter-spacing: -0.5px; margin: 0 0 14px; } .gidf-program-detail__date { display: flex; align-items: center; font-size: clamp(20px, 3vw, 28px); font-weight: 800; color: #fff; margin: 0 0 56px; } .gidf-program-detail__date-group { white-space: nowrap; } .gidf-program-detail__date-group sup { font-size: 12px; font-weight: 800; color: var(--color-red); margin-left: 4px; top: -0.6em; } .gidf-program-detail__date-line { display: inline-block; width: 36px; height: 2px; background: var(--color-red); margin: 0 16px; flex-shrink: 0; } .gidf-work { margin-bottom: 80px; padding-bottom: 56px; border-bottom: 1px solid #1e1e1e; scroll-margin-top: calc(var(--header-height) + 24px); } .gidf-work:last-child { border-bottom: none; margin-bottom: 0; } .gidf-archive-poster { text-align: center; margin: 0 0 88px; } .gidf-archive-poster img { display: inline-block; max-width: 75%; width: auto; height: auto; } /* 팀 사진이 아니라 하나의 통짜 정보 이미지(contents.png 등)를 자르지 않고 가운데 정렬로 전체 다 보여줄 때 사용 */ .gidf-archive-content { text-align: center; margin: 0 0 56px; } .gidf-archive-content img { display: inline-block; max-width: 100%; width: auto; height: auto; } .gidf-work-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 48px; } .gidf-work-jump a { padding: 8px 18px; border: 1px solid rgba(230, 0, 26, 0.35); border-radius: 20px; font-size: 13px; font-weight: 700; color: #eee; background: rgba(230, 0, 26, 0.09); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .gidf-work-jump a:hover { border-color: var(--color-red); background: var(--color-red); color: #fff; } .gidf-work__header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; } .gidf-work__title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: #fff; margin: 0; } .gidf-work__duration { color: var(--color-red); font-weight: 700; font-size: 16px; } .gidf-work__media { width: 100%; aspect-ratio: 16/9; background: #141414; margin-bottom: 36px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .gidf-work__media img, .gidf-work__media video, .gidf-work__media iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: none; } .gidf-work__media-placeholder { color: #555; font-size: 13px; } .gidf-work__media--collage { aspect-ratio: unset; display: grid; /* 이미지 개수에 따라 자동으로 열이 나뉩니다 — .gidf-work__collage-item을 1개/2개/3개... 넣는 것만으로 1분할/2분할/3분할이 자동 적용됩니다. 한 줄에 최대 3개까지만 오고, 4개 이상이면 다음 줄로 자동으로 넘어갑니다 (예: 4장 = 3개+1개, 5장 = 3개+2개). */ grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); gap: 4px; } /* 공통: 이미지(img)든 "- 영상 영역 -" 같은 텍스트든 다 자연스럽게 보이도록 */ .gidf-work__collage-item { background: #141414; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #555; font-size: 12px; text-align: center; } .gidf-work__collage-item img, .gidf-work__collage-item video, .gidf-work__collage-item iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: none; } .gidf-work__media--collage .gidf-work__collage-item { aspect-ratio: 3/4; } /* 1장만 있을 때는 3/4 세로비 대신 16:9 가로형으로 (Bodysound처럼 영상 1개만 쓰는 경우와 톤 맞춤) */ .gidf-work__media--collage:has(.gidf-work__collage-item:only-child) { grid-template-columns: 1fr; } .gidf-work__media--collage:has(.gidf-work__collage-item:only-child) .gidf-work__collage-item { aspect-ratio: 16/9; } /* 정확히 4장일 때는 3+1 대신 2x2로 */ .gidf-work__media--collage:has(.gidf-work__collage-item:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } @media (max-width: 480px) { .gidf-work__media--collage, .gidf-work__media--vertical-pair { grid-template-columns: 1fr !important; } } .gidf-work__section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; align-items: flex-start; } .gidf-work__section-body > *:first-child, .gidf-work__intent-text > *:first-child { margin-top: 0; } .gidf-work__label { color: var(--color-red); font-weight: 700; font-size: 14px; line-height: 1.9; margin: 0; } .gidf-work__cast-names { font-weight: 700; font-size: 16px; color: #fff; margin: 0 0 14px; } .gidf-work__cast-photos { display: flex; gap: 8px; flex-wrap: wrap; } .gidf-work__cast-photo { width: 90px; aspect-ratio: 3/4; background: #1a1a1a; } .gidf-work__intent-text { font-size: 15px; line-height: 1.9; color: #ccc; margin: 0; max-width: 760px; } .gidf-work__intent-text p { margin: 0 0 16px; } .gidf-work__intent-text h4 { color: #fff; font-size: 16px; font-weight: 700; margin: 24px 0 10px; } .gidf-work__intent-text ul { list-style: none; margin: 0 0 14px; padding-left: 0; } .gidf-work__intent-text li { margin-bottom: 4px; } /* ---------- 기타 프로그램(워크샵 등) 전용 ---------- */ .gidf-program-etc__section-title { font-size: clamp(24px, 3.5vw, 32px); font-weight: 800; color: #fff; margin: 0 0 32px; padding-top: 8px; } .gidf-program-etc__section { margin-bottom: 64px; } .gidf-work__media--vertical-pair { aspect-ratio: unset; display: grid; /* 영상 개수만큼 자동으로 열이 나뉩니다 (최대 3개/줄, 그 이상은 다음 줄로) */ grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); gap: 4px; } .gidf-work__media--vertical-pair .gidf-work__collage-item { aspect-ratio: 9/16; } .gidf-workshop__instructor { display: flex; align-items: center; gap: 20px; margin: 32px 0 28px; } .gidf-workshop__instructor-photo { width: 100px; aspect-ratio: 3/4; background: #1a1a1a; flex-shrink: 0; } .gidf-workshop__instructor-info h3 { font-size: clamp(20px, 3vw, 28px); font-weight: 800; color: #fff; margin: 0 0 8px; } .gidf-workshop__instructor-meta { font-size: 15px; color: #ccc; margin: 0; } @media (min-width: 640px) { .gidf-work__section { flex-direction: row; gap: 24px; } .gidf-work__label { flex-shrink: 0; width: 100px; } .gidf-work__section-body { flex: 1; min-width: 0; } } /* ---------- 조직도 (organization.php) ---------- */ .gidf-orgchart { text-align: center; padding: 20px 0 60px; } .gidf-orgchart__brand { color: var(--color-red); font-size: clamp(28px, 4vw, 36px); font-weight: 800; margin: 0 0 16px; } .gidf-orgchart__divider { height: 1px; background: var(--color-red); max-width: 900px; margin: 0 auto 56px; } .gidf-orgchart__node { color: #fff; font-weight: 700; font-size: 15px; } .gidf-orgchart__node--chief { font-size: 17px; } .gidf-orgchart__node--red { color: var(--color-red); } .gidf-orgchart__trunk { position: relative; padding-top: 4px; padding-bottom: 40px; } .gidf-orgchart__trunk::before { content: ""; position: absolute; left: 50%; top: 40px; bottom: 0; width: 1px; background: #444; } .gidf-orgchart__trunk .gidf-orgchart__node--chief { position: relative; margin-bottom: 40px; } .gidf-orgchart__row--sub { position: relative; display: flex; justify-content: space-between; max-width: 560px; margin: 0 auto; } .gidf-orgchart__branches { position: relative; display: flex; justify-content: space-between; max-width: 900px; margin: 0 auto; padding-top: 24px; gap: 20px; } .gidf-orgchart__branches::before { content: ""; position: absolute; top: 0; left: 16.5%; right: 16.5%; height: 1px; background: #444; } .gidf-orgchart__branch { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; } .gidf-orgchart__branch::before { content: ""; position: absolute; left: 50%; top: -24px; width: 1px; height: 24px; background: #444; } @media (max-width: 640px) { .gidf-orgchart__row--sub { max-width: 100%; } .gidf-orgchart__branches { flex-direction: column; align-items: center; gap: 0; } .gidf-orgchart__branches::before { display: none; } .gidf-orgchart__branch { padding: 32px 0; border-top: 1px solid #262626; } .gidf-orgchart__branch:first-child { border-top: none; padding-top: 0; } .gidf-orgchart__branch::before { display: none; } .gidf-orgchart__branch:first-child::before { display: block; top: -24px; height: 24px; } .gidf-orgchart__branch .gidf-orgchart__node--red:first-child { font-size: 17px; margin-bottom: 4px; } } /* ---------- 후원사 (sponsor.php) ---------- */ .gidf-sponsor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; } .gidf-sponsor-grid__item { display: flex; align-items: center; justify-content: center; min-height: 140px; padding: 24px; background: #fff; border-radius: 14px; } .gidf-sponsor-grid__item img { max-width: 100%; max-height: 64px; width: auto; height: auto; } .gidf-sponsor-grid__text { color: #111; font-weight: 700; font-size: 18px; text-align: center; } @media (max-width: 640px) { .gidf-sponsor-grid { grid-template-columns: 1fr; } } .gidf-program-etc__subtitle { color: #999; font-size: 15px; font-weight: 500; margin: -20px 0 48px; } /* ---------- 일정표 (timetable.php) ---------- */ .gidf-timetable__tabs { display: flex; align-items: center; gap: 14px; margin: 0 0 48px; font-size: 16px; } .gidf-timetable__tabs a { color: #ccc; font-weight: 700; } .gidf-timetable__tabs a:hover { color: #fff; } .gidf-timetable__tabs span { color: #444; } .gidf-timetable__timeline { position: relative; padding-left: 100px; } .gidf-timetable__timeline::before { content: ""; position: absolute; left: 44px; top: 44px; bottom: 44px; width: 1px; background: #333; } .gidf-timetable__date { position: relative; margin-bottom: 32px; } .gidf-timetable__date-badge { position: absolute; left: -100px; top: 0; width: 90px; height: 90px; border: 1px solid #444; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; color: #fff; background: #0a0a0a; z-index: 1; } .gidf-timetable__date-badge--accent { background: var(--color-red); border-color: var(--color-red); } .gidf-timetable__event { display: grid; grid-template-columns: 60px 66px 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid #1a1a1a; } .gidf-timetable__date-events .gidf-timetable__event:first-child { padding-top: 22px; } .gidf-timetable__date-events .gidf-timetable__event:last-child { border-bottom: none; } .gidf-timetable__time { font-weight: 800; color: #fff; font-size: 15px; } .gidf-timetable__cat { color: #999; font-size: 14px; } .gidf-timetable__event-title { font-weight: 700; color: #fff; font-size: 17px; margin: 0 0 6px; } .gidf-timetable__event-meta { color: #999; font-size: 14px; margin: 0; line-height: 1.6; } @media (max-width: 640px) { .gidf-timetable__timeline { padding-left: 68px; } .gidf-timetable__timeline::before { left: 29px; } .gidf-timetable__date-badge { left: -68px; width: 60px; height: 60px; font-size: 14px; } .gidf-timetable__event { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; } .gidf-timetable__time, .gidf-timetable__cat { display: inline; margin-right: 8px; } } .gidf-program-detail__intro { margin: 0 0 40px; max-width: 640px; } .gidf-program-detail__intro-ko { color: #ddd; font-size: 16px; font-weight: 500; line-height: 1.7; margin: 0 0 6px; } .gidf-program-detail__intro-en { color: #777; font-size: 13px; line-height: 1.6; margin: 0; }