/* [폰트 설정] 글자 모양을 예쁘게 결정하는 곳이에요. */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&family=Noto+Sans+KR:wght@300;400;700;900&display=swap');
        @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

        /* ===========================================================
          [🎨 브랜드 커스텀 설정존 - 여기 있는 숫자(px)만 고치면 다 변해요!]
          아이에게 색칠 공부를 가르쳐주듯 아주 자세히 설명해 드릴게요.
          ===========================================================
        */
        :root {
            /* 1. 🌈 색상 연필통 */
            --bg-main: #fdfbf7;      /* 기본 배경색: 따뜻한 우유색이에요. */
            --text-main: #1a1a1a;    /* 기본 글자색: 아주 진한 회색이에요. */
            --point-color: #004aad;  /* 포인트 색상: 언프레임의 상징, 블루예요! */

            /* 2. 📏 가로 폭 조절기 (px 단위로 마음껏 바꿔보세요!) */
            --section-side-gap: 5%;        /* 섹션 양옆의 기본 여백이에요. (5% 정도가 적당해요) */
            --content-max-width: 1200px;   /* [전체 가로폭] 내용물이 최대로 커질 수 있는 너비예요. 숫자가 커지면 시원해져요! */

            /* 3. ✍️ 글자 크기 조절기 (px 단위로 직접 입력하세요!) */
            --main-title-px: 100px;        /* [메인 제목] 첫 화면에 나오는 큰 글자 크기예요. */
            --sub-text-px: 16px;           /* [설명 글자] 제목 아래 나오는 작은 글자 크기예요. */
            --nav-logo-px: 24px;           /* [상단 로고] 왼쪽 위에 있는 'UNFRAME.' 글자 크기예요. */
            --nav-link-px: 11px;           /* [상단 메뉴] 오른쪽 메뉴 글자들의 크기예요. */
            --section-title-px: 50px;      /* [섹션 제목] '현재 진행 중인 전시' 같은 제목 크기예요. */
            --card-title-px: 24px;         /* [카드 제목] 아카이브 안에 있는 작은 제목 크기예요. */

            /* 4. 📸 인스타그램 위젯 조절기 (내 마음대로 크기 바꾸기!) */
            --insta-max-width: 1000px;     /* [위젯 너비] 인스타그램 피드가 퍼지는 최대 가로 폭이에요. */
            --insta-padding-top: 20px;     /* [위젯 윗공간] Moments 제목과 위젯 사이의 간격이에요. */
            --insta-border-radius: 12px;   /* [위젯 모서리] 인스타 사진 뭉치들의 모서리를 둥글게(px) 만들어요. */
        }

        /* 메뉴 이동은 부드럽게, 일반 스크롤은 자유롭게 유지합니다. */
        html {
            scroll-behavior: smooth;
            height: 100%;
        }

        body {
            font-family: 'Inter', 'Noto Sans KR', sans-serif;
            background-color: var(--bg-main);
            color: var(--text-main);
            margin: 0; padding: 0;
            height: 100%;
            overflow-x: hidden;
        }

        /* ===========================================================
          [전용 상단 메뉴 스타일]
          우리가 직접 만든 메뉴바의 디자인이에요.
          ===========================================================
        */
        #custom-nav {
            position: fixed;
            top: 0; left: 0; width: 100%;
            z-index: 1000;
            padding: 25px var(--section-side-gap); 
            display: flex;
            justify-content: space-between; 
            align-items: center;
            transition: all 0.5s ease;
            pointer-events: none; 
        }
        
        #custom-nav .logo {
            font-weight: 900;
            font-size: var(--nav-logo-px); 
            letter-spacing: -0.05em;
            pointer-events: auto;
            transition: color 0.5s ease;
        }
        
        #custom-nav .menu-links {
            display: flex;
            gap: 35px; 
            pointer-events: auto;
        }
        
        #custom-nav a {
            font-size: var(--nav-link-px); 
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        #custom-nav a:hover { color: var(--point-color) !important; }

        @media (max-width: 768px) {
            #custom-nav { flex-direction: column; padding: 20px 5%; gap: 15px; }
            #custom-nav .menu-links { gap: 15px; flex-wrap: wrap; justify-content: center; }
            #custom-nav .logo { font-size: 20px; }
        }

        /* [공통 버튼 마법 효과] 마우스를 올리면 블루로 변하며 위로 톡 떠오르는 효과예요. */
        .btn-hover-effect {
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
            display: inline-block;
        }
        .btn-hover-effect:hover {
            background-color: var(--point-color) !important; 
            border-color: var(--point-color) !important;     
            color: #ffffff !important;                       
            transform: translateY(-4px); 
        }

        /* [섹션 공통 디자인] */
        section {
            height: auto;           
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 0 var(--section-side-gap); 
        }

        .section-container {
            max-width: var(--content-max-width); 
            width: 100%;
            margin: 0 auto;
        }

        /* [나타나기 효과] */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .reveal.active {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        /* [3D 배경 캔버스 및 노이즈 필터] */
        #hero-canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
        .noise-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/76/1k_filmgrain.png'); opacity: 0.02; pointer-events: none; z-index: 1; }

        /* ===========================================================
          [푸터 전용 스타일]
          푸터의 가로 폭도 시원하게 확장하고 정보를 정렬했어요.
          ===========================================================
        */
        .full-page-footer {
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 0 var(--section-side-gap); 
        }
        .unframe-footer-final {
            background-color: #FDFBF7;
            color: var(--point-color);
            width: 100%;
            font-family: 'Pretendard', sans-serif;
        }
        .footer-grid {
            display: flex;
            justify-content: space-between;
            max-width: var(--content-max-width); 
            margin: 0 auto;
            gap: 50px;
            width: 100%;
        }
        .footer-column { flex: 1; display: flex; flex-direction: column; }
        .logo-area { height: 60px; display: flex; align-items: flex-start; }
        .footer-logo { font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: 1px; margin: 0; }
        .section-title { font-size: 16px; font-weight: bold; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
        .cube-icon { width: 14px; height: 14px; fill: none; stroke: var(--point-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .section-line { border: 0; border-top: 1px solid var(--point-color); margin: 0 0 20px 0; width: 100%; }
        
        .info-list { list-style: none; padding: 0; margin: 0; font-size: 14px; }
        .info-list li { margin-bottom: 6px; position: relative; padding-left: 14px; color: var(--point-color); font-weight: 500; }
        .info-list li::before { content: '·'; position: absolute; left: 0; }
        
        .legal-link-item { color: var(--point-color) !important; text-decoration: none; font-weight: 600; transition: opacity 0.2s; }
        .legal-link-item:hover { opacity: 0.6; text-decoration: underline; }

        .social-container { margin-top: 60px; display: flex; justify-content: center; gap: 25px; }
        .social-icon svg { width: 26px; height: 26px; fill: var(--point-color); }
        
        /* -----------------------------------------------------------
           [푸터 정가운데 정렬 스타일] 
           슬로건과 저작권(Copyright)을 정가운데로 모아주는 마법이에요.
        ----------------------------------------------------------- */
        .footer-center-content {
            margin-top: 40px;
            text-align: center;
            width: 100%;
        }

        .footer-slogan { 
            font-size: 18px; 
            font-weight: 800; 
            letter-spacing: 1.5px; 
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .footer-copyright {
            font-size: 11px;
            opacity: 0.7;
            line-height: 1.5;
            color: var(--point-color);
        }

        @media (max-width: 768px) {
            .footer-grid { flex-direction: column; gap: 40px; }
            .full-page-footer { height: auto; min-height: auto; padding: 100px 5%; }
            .footer-center-content { margin-top: 30px; }
        }

        /* [스크롤바 디자인] */
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: var(--bg-main); }
        ::-webkit-scrollbar-thumb { background: var(--point-color); }
    
/* Integration overrides: preserve source composition, allow content and zoom. */
html{scroll-snap-type:none;height:auto}body{height:auto;overflow-x:clip}.home-page section{height:auto;min-height:0;padding-top:90px;padding-bottom:80px;overflow:visible}.home-page #hero{height:100svh;min-height:650px}.home-page #projects{min-height:0}.reveal{opacity:1;transform:none}.home-page #custom-nav{pointer-events:auto;background:rgba(253,251,247,.97);border-bottom:1px solid #deded8;padding:22px 5%;z-index:30}.home-page #custom-nav .logo{font-size:24px;letter-spacing:-.035em;font-weight:900}.home-page #custom-nav a{color:#1a1a1a}.home-page #custom-nav .logo span{font-size:8px;display:block;letter-spacing:.08em;margin-top:5px}.home-page #custom-nav .active{color:#004aad}.home-page .demo-strip{position:relative;margin-top:100px;z-index:2}.home-page #hero{min-height:calc(100svh - 115px);height:calc(100svh - 115px)}#hero-canvas-container canvas{opacity:.22}.home-exhibition-image img{width:100%;height:100%;object-fit:cover}.home-live-date{font-size:12px;color:#004aad;font-weight:600;margin-bottom:18px}.home-live-title{font-size:32px;line-height:1.35;font-weight:700;word-break:keep-all;margin-bottom:20px}.home-live-copy{font-size:16px;color:#555;line-height:1.8;margin-bottom:30px}.home-live-actions{display:flex;gap:16px;flex-wrap:wrap}.home-live-actions a,.home-empty a{border:1px solid #1a1a1a;padding:14px 24px;display:inline-block;font-size:12px;font-weight:600}.home-live-actions a:hover{background:#004aad;color:white;border-color:#004aad}.home-empty{padding:35px 0;color:#555}.home-empty p{margin-bottom:24px}.home-update-status{font-size:12px;color:#555;margin-top:20px}.home-page .full-page-footer{height:auto;min-height:0;padding-top:65px;padding-bottom:40px}.home-page .info-list a{font-size:14px}.home-page .button{background:#004aad;color:white;padding:12px 22px}.home-page .demo-strip{font-size:11px;text-align:center;padding:8px 15px;background:#e8eef7;color:#173e76}.home-page .demo-strip a{text-decoration:underline;margin-left:10px}.skip:not(:focus){position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}.skip:focus{position:fixed;z-index:1001;background:white;padding:12px}a:focus-visible,button:focus-visible{outline:3px solid #004aad;outline-offset:4px}.home-page .feed-link{display:inline-block;color:#004aad;margin:20px 0;font-size:14px}.home-page .lightwidget-widget{min-height:350px}.home-page #contact .contact-phone{display:block;margin-top:30px;color:#004aad;font-size:15px}.home-page #hero h1{font-size:clamp(52px,9vw,100px)!important}.home-page #hero p{letter-spacing:.2em!important}.home-page .noise-overlay{display:none}
@media(max-width:768px){.home-page section{min-height:0;padding-top:64px;padding-bottom:64px}.home-page #hero{min-height:560px}.home-page #custom-nav{padding:15px 5%;gap:10px}.home-page #custom-nav .menu-links{gap:12px}.home-page #custom-nav a{font-size:9px;letter-spacing:.06em}.home-page .demo-strip{margin-top:120px}.home-page #hero h1{margin-bottom:30px}.home-page #hero p{font-size:13px!important;letter-spacing:.12em!important}.home-page #exhibition h2{font-size:34px!important}.home-page #exhibition .mb-16{margin-bottom:35px}.home-page #projects .grid{grid-template-columns:1fr}.home-page #projects .grid>div{padding:30px;border-top:1px solid #ddd}.home-page #projects .grid>div>span{margin-bottom:25px}.home-page #projects .grid>div>p{margin-bottom:25px}.home-page #projects h3{font-size:36px!important}.home-page #about p{font-size:18px!important}.home-page #about p:first-of-type{font-size:30px!important}.home-live-title{font-size:26px}.home-page .lightwidget-widget{min-height:420px}.home-page #contact p{font-size:14px!important;letter-spacing:.12em!important}.home-page .full-page-footer{min-height:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.btn-hover-effect{transition:none!important;transform:none!important}.animate-bounce{animation:none!important}}

/* A compact manifesto between the exhibition and project index. */
.home-page #about{padding-top:72px;padding-bottom:72px}.home-page #about h2{margin-bottom:32px}.home-page #about p:first-of-type{margin-bottom:32px}
@media(max-width:768px){.home-page #about{padding-top:56px;padding-bottom:56px}.home-page #about h2{margin-bottom:24px}.home-page #about p:first-of-type{margin-bottom:24px}}