@charset "UTF-8"; /* ═══════════════════════════════════════════════════════════════ common.css — 범용 유틸 클래스 + 공용 애니메이션(@keyframes) 로드: theme/design/head.sub.php ( 안, reset.css 뒤 / 섹션 CSS 앞) style.css · header.css · footer.css 에 흩어져 있던 것을 통합했다. - 표시 제어: .pc / .mobile / .tablet / .hide / .show / .flowhid … - 배치 유틸: .absol / .rltv / .flexrow / .flexcol / .absol_cover / .back_img … - 텍스트 유틸: .noto / .bold / .medium / .thin / .txct / .white / .lh … - 마퀴·슬라이드 공용: .image_sd* / .slide_y* / .flow_sd* / .swiper* - @keyframes 39종 (ddm·blk·marquee·scaleOpa·shake·line-*·spin 등) ★ 섹션 전용 스타일은 여기 넣지 않는다 (css/style.css 등 각 섹션 CSS 로). ═══════════════════════════════════════════════════════════════ */ /* ══ 디자인 토큰 (:root) ══ 디자이너 텍스트본(포션의 참고사항 txt 등)에서 추린 폰트·컬러를 여기에 등록한다. ★ style.css 가 아니라 이 파일이다 — style.css 는 메인 페이지에서만 로드되므로 거기 :root 를 두면 서브·게시판 페이지와 header.css/footer.css 에서 토큰이 미정의가 된다. common.css 는 head.sub.php 가 전 페이지에 싣는다. 등록 절차는 portion 스킬 참조. Pretendard 는 광역 카스케이드라 토큰 불필요. */ :root { interpolate-size: allow-keywords; /* --px 정적 폴백 — head.sub.php IIFE 가 인라인 style 로 항상 덮는다. 없으면 IIFE 미실행 시 calc() 전량 IACVT */ --px: 1px; /* 브랜드색 — 시안·포션에서 추출해 교체 */ --primary: #003260; --secondary: #c7000c; --tertiary: #ffe3bb; --bg-color: #fef5e8; /* 폰트 패밀리 — @font-face 선언명과 완전 일치해야 한다 */ --font-pretendard: "Pretendard Variable", sans-serif; --font-suit: "Suit", sans-serif; --font-butler: "Butler Regular", sans-serif; --font-noto-serif: "Noto Serif KR", serif; --font-nanum: "NanumMyeongjo", serif; --font-ria: "Ria", sans-serif; /* ★ 선언명이 'Paperozi' 다 — font/style.css 가 Paperlogy woff2 를 그 이름으로 등록했고 기존 39곳이 그걸 쓴다 */ --font-paperlogy: "Paperozi", sans-serif; --font-isamanru: "Isamanru", sans-serif; --font-hambakneun: "SfHambakneun", sans-serif; --font-paytone: "Paytone One", sans-serif; --font-family: var(--font-pretendard); /* PC 폰트 티어 — 값은 font-perf(STEP -0.5) 가 PSD census 로 확정한다. ★ 시안 px 를 그대로 N 에 넣는다(60px → *60). 옛 --size-N 프리미티브는 손코딩 잔재라 폐기됨. */ --displayXL: calc(var(--px) * 100); /* 100px x6 */ --displayL: calc(var(--px) * 90); /* 90px x6 */ --displayM: calc(var(--px) * 80); /* 80px x10 */ --displayS: calc(var(--px) * 65); /* 65px x44 — 대형 최다 */ --titleXL: calc(var(--px) * 55); /* 55px x10 */ --titleL: calc(var(--px) * 50); /* 50px x16 */ --titleM: calc(var(--px) * 45); /* 45px x15 */ --titleS: calc(var(--px) * 40); /* 40px x10 */ --titleXS: calc(var(--px) * 35); /* 35px x28 */ --headXL: calc(var(--px) * 32); /* 32px — main_new 배지·강조. 35↔30 사이가 비어 32/33.3 이 30 으로 스냅되며 글자폭이 6% 줄었다(2026-08-24 실측 436→410) */ --headL: calc(var(--px) * 30); /* 30px x20 */ --headM: calc(var(--px) * 26); /* 26px x11 */ --headS: calc(var(--px) * 22); /* 22px x49 — 헤딩 최다 */ --subheadL: calc(var(--px) * 24); /* 24px x23 */ --subheadM: calc(var(--px) * 19); /* 19px x14 */ --subheadS: calc(var(--px) * 15); /* 15px x24 */ --bodyXL: calc(var(--px) * 20); /* 20px x42 */ --bodyL: calc(var(--px) * 18); /* 18px x57 — 본문 최다 */ --bodyM: calc(var(--px) * 16); /* 16px x24 */ --bodyS: calc(var(--px) * 14); /* 14px x6 */ --bodyXS: calc(var(--px) * 11); /* 11px x16 */ --paddingTop: calc(var(--px) * 200); } @media (max-width: 599px) { :root { /* 모바일 폰트 티어 — --px 가 0.2 수준으로 무너지는 구간이라 vw 직접값이 정본 */ --displayXL: 12vw; --displayL: 11.2vw; --displayM: 10.4vw; --displayS: 9.0667vw; --titleXL: 8vw; --titleL: 7.4667vw; --titleM: 6.9333vw; --titleS: 6.6667vw; --titleXS: 6.4vw; --headXL: 5.4667vw; --headL: 4.8vw; --headM: 4.8vw; --headS: 4.2667vw; --subheadL: 4.2667vw; --subheadM: 4vw; --subheadS: 3.7333vw; --bodyXL: 4.2667vw; --bodyL: 3.7333vw; --bodyM: 3.7333vw; --bodyS: 3.4667vw; --bodyXS: 3.2vw; --paddingTop: 13.3333vw; } } /* ══ 단위 베이스 ══ 1rem === var(--px)*10 로 맞춰 rem 표기와 calc(var(--px)*N) 표기가 같은 축에 있게 한다. ★ 옛 베이스 `round(nearest, 0.5208333333vw, 1px)` 는 w/192 축이라 캔버스 1905 와 0.79% 어긋났다. GSAP transform 은 calc()/var() 를 파싱하지 못해 rem 리터럴을 수송로로 쓰므로 이 베이스는 유지한다. 모바일은 --px(=w/1905) 가 0.2 수준으로 무너지므로 vw 베이스로 갈아탄다. */ html { font-size: calc(var(--px) * 10); } @media (max-width: 599px) { html { font-size: 1.6vw; } } body { font-family: var(--font-family); font-size: var(--bodyM); letter-spacing: -0.04em; line-height: 1.5; word-break: keep-all; } @media (max-width: 599px) { body { font-size: 3.8647vw; } } section { position: relative; overflow: hidden; width: 100%; } section img { width: 100%; } img { object-fit: cover; height: auto; } .flowhid { overflow: hidden; } .hide { display: none !important; } .hideopa { opacity: 0 !important; } .show { opacity: 1 !important; } @keyframes ddm3 { 0% { transform: scale(1); } 50% { transform: rotate(-8deg); } 65% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes ddm4 { 0% { transform: scale(1); } 25% { transform: rotate(-2deg); } 50% { transform: scale(1.05); } 75% { transform: rotate(2deg); } 100% { transform: scale(1); } } @keyframes blk3 { 0% { opacity: 1; } 24% { opacity: 1; } 25% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1; } } @keyframes rotate_image { 100% { transform: rotate(360deg); } } @keyframes scaleOpa { 100% { transform: scale(1.1); opacity: 0; } } @keyframes scaleOpa2 { 100% { transform: scale(1.4); opacity: 0; } } @keyframes ddm { 0% { transform: scale(1); } 50% { transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -30); } 100% { transform: scale(1); } } @keyframes rotate_imageY { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } @keyframes ddm2 { 0% { transform: scale(1); } 50% { transform: translateY(20px); } 75% { transform: scale(1.02); transform: translateY(10px); } 100% { transform: scale(1); transform: translateY(0px); } } @keyframes scaleOpa3 { 100% { transform: scale(1.3); opacity: 0; } } @keyframes smoke { 0% { transform: translateY(30%) scale(0.8); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-30%) scale(1.1); opacity: 0; } } .smoke { animation: smoke 4s infinite linear; } @keyframes light { 0%, 31%, 34%, 39%, 42%, 47% { opacity: 0; } 5%, 30%, 35%, 38%, 43%, 46% { opacity: 0.4; } 50%, 55%, 60%, 67%, 51%, 54%, 68%, 100% { opacity: 1; } 70% { opacity: 0.2; } } @keyframes marqueeX { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes marqueeX_r { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes marqueeY { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes marqueeY_r { from { transform: translateY(0); } to { transform: translateY(100%); } } @keyframes opa { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes shakeAndFall { 0% { transform: translate(0, -50%) rotate(0); opacity: 0; } } .shakeTwice { animation: shakeTwice 2s ease-in-out infinite; transform-origin: center; } .shakeTwices { animation: shakeTwices 2s ease-in-out infinite; transform-origin: center; } @keyframes shakeTwice { 0% { transform: rotate(0deg); } 10% { transform: rotate(5deg); } 20% { transform: rotate(-5deg); } 30% { transform: rotate(4deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } @keyframes shakeTwices { 0% { transform: rotate(0deg); } 10% { transform: rotate(3deg); } 20% { transform: rotate(-3deg); } 30% { transform: rotate(2deg); } 40% { transform: rotate(-2deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } div.swiper-slide { display: flex; justify-content: center; align-items: center; flex-direction: column; } .swiper-wrapper.flow { pointer-events: none; transition-timing-function: linear; } .swiper-button-disabled { opacity: 0.3; } .noto { font-family: "Noto Serif", serif; } .notokr { font-family: "Noto Serif KR", serif; } .exbold { font-weight: 800; } .bold { font-weight: 700; } .sebold { font-weight: 600; } .medium { font-weight: 500; } .regular { font-weight: 400; } .flight { font-weight: 200; } .thin { font-weight: 100; } .animate-blk { animation: blk 1s infinite ease-in-out; } .scaleOpa { animation: scaleOpa infinite 2s; } .scaleOpa2 { animation: scaleOpa2 infinite 2s; } .light { animation: light infinite 5s; } .rotate_img { animation: rotate_image 10s infinite linear; } .white { color: white; } .txct { text-align: center; } .lh { line-height: 1.5; } /* reveal 대신 사용 start */ /* 왼쪽부터 나타나기 */ .clip_off02 { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: all 0.8s; } /* 가운데에서 나타나기 */ .clip_off { clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); transition: all 0.8s; } /* gsap에서 넣을 class */ .clip_on { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important; } /* reveal 대신 사용 end */ .absol_cover { width: 100%; height: 100%; top: 0%; left: 0%; position: absolute; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; } .max_width { width: unset !important; max-width: 101%; } .back_img { background-repeat: no-repeat; background-size: cover; background-position: top center; } /* image_sd */ .image_sd_wrap { overflow: hidden; } .image_sd { animation: marqueeX 20s infinite linear; } .image_sd .absol { left: 100%; } .image_sd_r { animation: marqueeX_r 20s infinite linear; } .image_sd_r .absol { right: 100%; } /* image_sd end */ /* y_slide start */ .slide_y_wrap { height: 100%; display: flex; justify-content: center; align-items: center; top: 0%; overflow: hidden; } .slide_y { animation: marqueeY 20s infinite linear; } .slide_y img.absol { top: 100%; } .slide_y_r { animation: marqueeY_r 20s infinite linear; } .slide_y_r img.absol { bottom: 100%; } /* y_slide end */ /* flow_sd 가로 (여러 이미지 마퀴) start */ .flow_sd { width: 100%; display: flex; justify-content: flex-start; align-items: center; overflow: hidden; } .flow_sd_move { display: flex; justify-content: flex-start; align-items: center; animation: marqueeX 20s infinite linear; } .flow_sd_move_r { display: flex; justify-content: flex-start; align-items: center; animation: marqueeX_r 20s infinite linear; } .flow_sd_move_item { display: flex; justify-content: flex-start; align-items: center; } .flow_sd_move_item02 { left: 100%; } .flow_sd_move_item02_r { right: 100%; } .flow_sd_img { display: flex; justify-content: center; align-items: center; } /* flow_sd 가로 end */ /* flow_sd 세로 (여러 이미지 마퀴) start */ .flow_sd_y { height: 100%; display: flex; justify-content: flex-start; align-items: center; overflow: hidden; } .flow_sd_y_move { display: flex; justify-content: flex-start; align-items: center; animation: marqueeY 10s infinite linear; } .flow_sd_y_move_r { display: flex; justify-content: flex-start; align-items: center; animation: marqueeY_r 10s infinite linear; } .flow_sd_y_move_item { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; } .flow_sd_y_move_item02 { top: 100%; } .flow_sd_y_move_item02_r { bottom: 100%; } .flow_sd_y_img { display: flex; justify-content: center; align-items: center; } /* flow_sd 세로 end */ /* swiper-arr */ .btn_arr { z-index: 2; cursor: pointer; } .arr_next { transform: rotateY(180deg); } /* swiper-arr */ iframe { width: 100%; height: 100%; } video { width: 100%; height: 100%; object-fit: cover; } .swiper-button-lock { display: none !important; } .swiper { margin: 0; z-index: 0; } b { font-weight: 700; } .obj > img { height: 100%; object-fit: cover; } /* 2026-08-24 임시 주석 — 반입 구현이 style/header/footer.css 에 같은 이름을 media 짝까지 갖고 있는데 여기 !important 가 그 짝을 덮었다. .pc-mobile { display: flex !important; } .mobile-pc { display: none !important; } */ /* ══ PC↔모바일 표시 토글 ══ ★ 표시 타입별로 클래스가 갈린다 — .pc 는 block 이다. flex 로 켜야 하면 .pc-flex 를 쓴다. 섹션 CSS 의 media query 에서 같은 대상을 display 로 직접 토글하지 않는다(GSAP 가 클래스로 PC/MO 를 분기). */ .pc { display: block !important; } .pc-flex { display: flex !important; } .pc-grid { display: grid !important; } .pc-inline { display: inline !important; } .tablet { display: none !important; } .mobile, .mobile-flex, .mobile-grid, .mobile-inline { display: none !important; } @media (max-width: 599px) { .pc, .pc-flex, .pc-grid, .pc-inline { display: none !important; } .mobile { display: block !important; } .mobile-flex { display: flex !important; } .mobile-grid { display: grid !important; } .mobile-inline { display: inline !important; } .mob-ta-c { text-align: center; } } .absol { position: absolute; } .rltv { position: relative; } /* 섹션 골격 — .front 는 전경 레이어, .bg_img 는 그 앞 형제로 두는 배경면. 둘 다 positioned 라 DOM 순서로 층이 정해진다 */ .front { position: relative; z-index: 10; width: 100%; } /* 자기 크기를 스스로 소유한다 — 래퍼 div 로 감싸지 말 것 */ .bg_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .flex-cc { display: flex; justify-content: center; align-items: center; } .mx-auto { margin-left: auto; margin-right: auto; } /* splitWordsMask (js/library.js) 산출 — 라인 마스크 + 단어 inline-block */ .mask-line { display: block; overflow: hidden; } .mask-word { display: inline-block; will-change: transform; } .flex { display: flex; justify-content: center; align-items: center; } .flexrow { display: flex; justify-content: center; align-items: center; flex-direction: row; } .flexcol { display: flex; justify-content: center; align-items: center; flex-direction: column; } /* .flex* 가 양축 center 를 이미 품으므로 아래 단축 유틸은 반드시 뒤에 와서 override 한다 */ .justify-c { justify-content: center; } .justify-sb { justify-content: space-between; } .justify-sa { justify-content: space-around; } .justify-end { justify-content: end; } .align-c { align-items: center; } .align-start { align-items: start; } .align-end { align-items: end; } /* ★ 이 프로젝트 전역값은 content-box 다 — reset.css 의 `*{box-sizing:unset}` 이 그누보드 default.css 의 `*{box-sizing:border-box}` 를 덮는다(로드순 default → reset → common). 즉 padding·border 는 width 에 **더해진다**. 코더가 관행대로 border-box 를 가정하면 그만큼 박스가 커진다 — 필요한 박스에만 아래 유틸로 명시 전환한다. ★ `.bx` 는 하위호환 별칭이다 — 훅(common-checks `checkBoxSizing`)과 코더 선주입이 예전부터 이 이름을 지시했는데 **정의가 어디에도 없었다**(실측 2026-08-11: 23_장수촌 마크업 15곳이 무효였다 — `align-c` 와 같은 유령 클래스 사고). 이미 마크업에 박혀 있어 지우지 않는다. */ .box-border, .bx { box-sizing: border-box; } .box-content { box-sizing: content-box; } @keyframes marquee3 { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes blk { 0% { opacity: 0; } 30% { opacity: 0; } 31% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } } @keyframes ddm_m { 0% { transform: scale(1); } 50% { transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -15); } 100% { transform: scale(1); } } @keyframes ddm_m_reverse { 0% { transform: scale(1); } 50% { transform: matrix(0.8, 0.01, 0.01, 0.8, 0, -5); } 100% { transform: scale(1); } } @keyframes blk2 { 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } } @keyframes line-top { 0% { transform: translateY(0px); } 100% { transform: translateY(13px); } } /* 추가된 부분 */ @keyframes line-top-reverse { 0% { transform: translateY(13px); } 100% { transform: translateY(0px); } } @keyframes line-top-rotate { 0% { transform: translateY(13px) rotateZ(0deg); } 100% { transform: translateY(13px) rotateZ(45deg); } } /* 추가된 부분 */ @keyframes line-top-rotate-reverse { 0% { transform: translateY(13px) rotateZ(45deg); } 100% { transform: translateY(13px) rotateZ(0deg); } } @keyframes line-mid { 0% { transform: scale(1); } 100% { transform: scale(0); } } /* 추가된 부분 */ @keyframes line-mid-reverse { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes line-mid-invisible { 0% { transform: scale(0); } 100% { transform: scale(0); } } @keyframes line-bot { 0% { transform: translateY(0px); } 100% { transform: translateY(-13px); } } /* 추가된 부분 */ @keyframes line-bot-reverse { 0% { transform: translateY(-13px); } 100% { transform: translateY(0px); } } @keyframes line-bot-rotate { 0% { transform: translateY(-13px) rotateZ(0deg); } 100% { transform: translateY(-13px) rotateZ(135deg); } } /* 추가된 부분 */ @keyframes line-bot-rotate-reverse { 0% { transform: translateY(-13px) rotateZ(135deg); } 100% { transform: translateY(-13px) rotateZ(0deg); } } /* -------------------header 커스텀 시작------------------- */ @keyframes dropHeader { 0% { top: calc(var(--px) * -50); } 100% { top: 0; } } @keyframes insertHeader { 0% { top: 0; } 100% { top: calc(var(--px) * -70); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }