로 끊어 한글 줄바꿈 자리를 잡아뒀다 */ .afs-intro__body { margin-top: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; gap: 1px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.75; color: #33404f; } .afs-intro__body p { margin: 0; word-break: keep-all; text-wrap: pretty; } /* ---- 행사 개요 — 청록 알약 라벨 ---- */ .afs-facts { margin: clamp(32px, 3.6vw, 52px) 0 0; display: flex; flex-direction: column; gap: 12px; } .afs-facts__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; } .afs-facts dt { flex: 0 0 auto; min-width: 114px; padding: 8px 18px; border-radius: 999px; background: var(--af-teal); color: #fff; text-align: center; font-size: 15px; font-weight: 700; white-space: nowrap; } .afs-facts dd { flex: 1 1 200px; margin: 0; font-size: clamp(15px, 1.15vw, 17px); color: #33404f; word-break: keep-all; text-wrap: pretty; } /* ---- 현장 사진 ---- 원본 PNG 는 모서리가 둥글게 구워져 있었다. 모서리를 메워 JPEG 로 바꿨고 (617KB -> 313KB) 둥글리기는 여기서 한다. */ .afs-photos { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(14px, 1.8vw, 26px); } .afs-photos img { width: 100%; height: auto; display: block; border-radius: 14px; background: var(--af-cream); } @media (max-width: 600px) { .afs-facts dt { flex: 1 1 100%; min-width: 0; } .afs-photos { grid-template-columns: 1fr; } } /* ---- 서브 헤더 — 초록 비주얼 위라 흰 글자 ---- 메인(work.php)은 밝은 하늘 사진 위라 네이비 그대로 두고, .afs 안에서만 바꾼다. */ .afs .afs-header { border-bottom: 1px solid rgba(255, 255, 255, .35); background: linear-gradient(180deg, rgba(12, 90, 80, .30), rgba(12, 90, 80, 0)); } .afs .afs-header .af-gnb a { color: #fff; text-shadow: 0 1px 6px rgba(10, 60, 52, .35); } .afs .afs-header .af-gnb a:hover { color: var(--af-cream); } /* 버거 아이콘은 어두운 PNG 라 흰색으로 반전시킨다 (시안도 같은 방식) */ .afs .afs-header .af-burger img { filter: brightness(0) invert(1); } /* ================================================================== 오시는길 — sub/location.php 와 한 쌍 시안: Art Festival Sub.dc.html (page="오시는길") 시안은 안내 그래픽 한 장으로 끝내지만, 좁은 화면에서는 그 안의 글자가 4px 아래로 줄어 못 읽는다. 860px 이하에서는 지도만 남기고 대중교통 안내를 글자판(.afs-way__text)으로 갈아 끼운다. 시안 색 : 마룬 #570c13 / 패널 #fff6e4 / 형광 #fff100 ================================================================== */ .afs-way { --afw-maroon: #570c13; --afw-panel: #fff6e4; } /* ---- 안내 그래픽 ---- */ .afs-way__fig { margin: clamp(26px, 3vw, 44px) 0 0; } .afs-way__fig img { width: 100%; height: auto; display: block; border-radius: 14px; background: var(--afw-panel); } /* ---- 글자판 — 넓은 화면에서는 그래픽에 이미 들어 있어 감춘다 ---- */ .afs-way__text { display: none; } .afs-way__h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: clamp(19px, 1.8vw, 24px); font-weight: 800; letter-spacing: -.02em; color: var(--afw-maroon); } .afs-way__h:before { content: ''; flex: 0 0 auto; width: 4px; height: 1em; border-radius: 2px; background: var(--afw-maroon); } .afs-way__banner { margin: 0 0 6px; padding: 16px 20px; border-radius: 12px; background: var(--afw-panel); font-size: clamp(15px, 1.2vw, 17px); font-weight: 700; color: var(--afw-maroon); word-break: keep-all; } .afs-way__list { margin: 0; display: flex; flex-direction: column; } .afs-way__row { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid rgba(87, 12, 19, .18); } .afs-way__row dt { flex: 0 0 auto; margin: 0; } .afs-way__row dd { flex: 1 1 auto; min-width: 0; margin: 0; } .afs-way__ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 11px; background: var(--afw-maroon); color: #fff; } .afs-way__ico .fa { font-size: 21px; line-height: 1; } .afs-way__ico--p { font-size: 26px; font-weight: 800; line-height: 1; } .afs-way__name { display: block; margin: 0 0 6px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 800; letter-spacing: -.02em; color: var(--afw-maroon); } .afs-way__row dd p { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: #33404f; word-break: keep-all; text-wrap: pretty; } .afs-way__row dd p + p { margin-top: 2px; } .afs-way__when { display: inline-block; margin: 0 0 8px !important; padding: 7px 16px; border-radius: 999px; background: var(--afw-maroon); color: #fff !important; font-size: clamp(15px, 1.2vw, 17px); font-weight: 700; } .afs-way__when span { font-size: .88em; } .afs-way__note { margin: 0; padding: 16px 0 0; border-top: 1px solid rgba(87, 12, 19, .18); font-size: clamp(15px, 1.2vw, 17px); font-weight: 700; color: var(--afw-maroon); word-break: keep-all; text-wrap: pretty; } .afs-way__note span { background: #fff100; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 3px 6px; line-height: 1.9; } /* 행사장소 알약 — 그래픽 아래 */ .afs-way .afs-facts { margin-top: clamp(20px, 2.4vw, 30px); } /* ---- 좁은 화면 — 글자판을 드러낸다 ---- */ @media (max-width: 860px) { .afs-way__text { display: block; margin-top: clamp(24px, 4vw, 36px); } } /* 서브 헤더의 서브메뉴 — 대메뉴는 흰 글자지만 판은 흰색이라 되돌린다 */ .afs .afs-header .af-gnb__sub a { color: var(--af-navy); text-shadow: none; } .afs .afs-header .af-gnb__sub a:hover { color: var(--af-teal); } /* Paperlogy 는 Pretendard 보다 폭이 넓다. 표 머리글이 좁은 칸에서 두 줄로 접히던 것을 막는다 ('번호' 가 '번/호' 로 갈라졌다) */ .afs :is(#bo_list, #bo_gall) .tbl_head01 thead th { white-space: nowrap; } /* ================================================================== 프로그램 — sub/program_*.php + sub/_program.php 와 한 쌍 시안: Art Festival Program.dc.html 시안의 글자 크기(제목 50px / 본문 28px)는 넓은 캔버스 기준이라 그대로 쓰면 본문 칸(약 940px)에서 과하다. 사이트 단계(본문 17px, 제목 30px)에 맞춰 줄이고 나머지 수치는 시안 그대로 쓴다. ================================================================== */ .afs-pg { margin: 0 0 clamp(22px, 2.6vw, 34px); padding: clamp(26px, 3.4vw, 46px) clamp(22px, 3vw, 40px); border-radius: 20px; background: #fdf3e8; } .afs-pg:last-of-type { margin-bottom: 0; } .afs-pg__head { display: flex; align-items: center; gap: 10px; } .afs-pg__icon { width: clamp(18px, 1.7vw, 26px); height: auto; display: block; } .afs-pg__title { margin: 0; font-size: clamp(20px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.03em; color: var(--af-navy); word-break: keep-all; text-wrap: pretty; } .afs-pg__list { margin: clamp(18px, 2vw, 26px) 0 0; display: flex; flex-direction: column; gap: 12px; } .afs-pg__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 20px; } .afs-pg__row dt { flex: 0 0 auto; min-width: 96px; margin: 0; padding: 7px 18px; border-radius: 999px; background: var(--af-teal); color: #fff; text-align: center; font-size: clamp(15px, 1.2vw, 17px); font-weight: 700; white-space: nowrap; } .afs-pg__row dd { flex: 1 1 220px; margin: 0; padding-top: 6px; font-size: clamp(15px, 1.2vw, 17px); font-weight: 400; line-height: 1.7; color: #33404f; word-break: keep-all; text-wrap: pretty; } /* 카드 안 이미지 — 시안은 알약 칸만큼 들여쓴다 */ .afs-pg__img { width: calc(100% - var(--afs-pg-indent, 116px)); height: auto; display: block; margin: clamp(22px, 2.6vw, 34px) 0 0 var(--afs-pg-indent, 116px); border-radius: 12px; } .afs-pg__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin: clamp(22px, 2.6vw, 34px) 0 0 var(--afs-pg-indent, 116px); } .afs-pg__pair img { width: 100%; height: auto; display: block; border-radius: 12px; } /* 체험프로그램 아래 두 장 — 시안 비율 358 : 662 */ .afs-pg__duo { margin: clamp(34px, 4vw, 56px) 0 0; display: grid; grid-template-columns: 358fr 662fr; gap: clamp(12px, 1.6vw, 22px); height: clamp(230px, 26vw, 360px); } .afs-pg__duo img { width: 100%; height: 100%; min-width: 0; object-fit: cover; display: block; border-radius: 12px; } @media (max-width: 760px) { /* 좁은 화면에서는 들여쓰기를 풀고 두 장짜리는 한 줄씩 */ .afs-pg__img { width: 100%; margin-left: 0; } .afs-pg__pair { margin-left: 0; } .afs-pg__duo { grid-template-columns: 1fr; height: auto; } .afs-pg__duo img { height: auto; } .afs-pg__row dt { min-width: 84px; padding: 6px 14px; } } /* ================================================================== 라인업 / 일정표 — sub/lineup.php · sub/schedule.php 와 한 쌍 시안: Art Festival Lineup.dc.html 시안 글자 크기(날짜 50px / 이름 36px)는 넓은 캔버스 기준이라 본문 칸(약 940px)에 맞춰 줄인다. 배치·비율은 시안 그대로. ================================================================== */ .afs-lu { margin-top: clamp(18px, 2vw, 26px); } .afs-lu--next { margin-top: clamp(40px, 5vw, 70px); padding-top: clamp(40px, 5vw, 70px); border-top: 1px solid #eceae5; } .afs-lu__head { display: flex; align-items: center; gap: 10px; } .afs-lu__day { margin: 0; font-size: clamp(20px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.03em; color: var(--af-navy); } /* 날짜가 갈수록 음표가 하나씩 늘어난다 (시안) */ .afs-lu__note { width: clamp(16px, 1.5vw, 22px); height: auto; display: block; } .afs-lu__grid { margin-top: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px) clamp(10px, 1.4vw, 20px); } .afs-lu__item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; } .afs-lu__item img { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; display: block; background: var(--af-cream); } /* 이름은 손글씨 — 메인 라인업의 아티스트 이름과 같은 서체 */ .afs-lu__item figcaption { font-family: var(--af-hand); font-size: clamp(16px, calc(1.9vw - 2px), 25px); line-height: 1.2; color: var(--af-navy); text-align: center; word-break: keep-all; } /* ---- 일정표 ---- */ .afs-sched { margin: 0; } .afs-sched img { width: 100%; height: auto; display: block; border-radius: 14px; background: var(--af-cream); } .afs-sched figcaption { margin: 16px 0 0; text-align: right; font-size: 15px; color: #8a9099; } @media (max-width: 760px) { .afs-lu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }