/** Theme Name: LUXSTUDIO Description: LUXSTUDIO(luxsnapstudio.com) 전용 독립형(standalone) 테마. 아스트라(Astra) + luxstudio-child 조합을 완전히 대체하며, 헤더/메뉴/푸터/메인페이지/단일글/아카이브를 이 테마 하나가 전부 담당합니다. 부모 테마가 필요 없습니다. Author: LUXSTUDIO Version: 1.1.6 Text Domain: luxstudio-theme Requires PHP: 7.4 */ /* ========================================================================== 0. 기본 리셋 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; color: #1b1815; } img { max-width: 100%; height: auto; } a { color: inherit; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link.screen-reader-text:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; padding: 12px 18px; background: #1b1815; color: #f6f1e8; z-index: 100000; clip: auto; border-radius: 2px; } #full-page-wrapper { width: 100%; margin: 0; padding: 0; } /* Elementor로 만든 페이지의 섹션 레이아웃이 무너지지 않도록 하는 방어 규칙 (Elementor 자체 클래스이며 특정 테마 전용이 아니라, 테마와 무관하게 계속 필요합니다) */ body.elementor-page .elementor-inner, body.elementor-page .elementor-section-wrap { display: flex !important; flex-direction: column !important; width: 100%; } footer a { text-decoration: none !important; } header a { text-decoration: none !important; } /* ========================================================================== 1. 디자인 시스템 변수 + 전역 래퍼(.luxfilm-root) header.php가 시작 직후 이 클래스를 열고, footer.php가 직전에 닫습니다. 즉, 이 사이트의 모든 페이지가 이 하나의 색상/타이포그래피 체계를 공유합니다(예전에는 메인페이지만 이 디자인이었고 나머지는 아스트라 기본 스타일이라 사이트 전체의 톤이 어긋나 있었습니다). ========================================================================== */ .luxfilm-root{ --ivory:#f6f1e8; --ivory-deep:#efe7d8; --ink:#1b1815; --ink-soft:#2b2723; --brass:#a9834f; --brass-soft:#c9ab7c; --wine:#5c2333; --wine-deep:#41182a; --line:rgba(27,24,21,.14); --line-light:rgba(246,241,232,.22); --shadow:0 30px 60px -25px rgba(27,24,21,.35); --ease:cubic-bezier(.22,.61,.36,1); --maxw:1240px; background:var(--ivory); color:var(--ink); font-family:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif; font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; } .luxfilm-root *, .luxfilm-root *::before, .luxfilm-root *::after{box-sizing:border-box;} .luxfilm-root h1,.luxfilm-root h2,.luxfilm-root h3,.luxfilm-root .serif{font-family:'Cormorant Garamond',serif; font-weight:500; letter-spacing:.01em; margin:0;} .luxfilm-root a{color:inherit; text-decoration:none;} .luxfilm-root img{max-width:100%; display:block;} .luxfilm-root button{font-family:inherit; cursor:pointer;} .luxfilm-root .wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;} @media (max-width:720px){ .luxfilm-root .wrap{padding:0 22px;} } .luxfilm-root .eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:11.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--brass); font-weight:600;} .luxfilm-root .eyebrow::before{content:''; width:26px; height:1px; background:var(--brass);} .luxfilm-root .grain{position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} .luxfilm-root .reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);} .luxfilm-root .reveal.in{opacity:1; transform:translateY(0);} /* ========================================================================== 2. 헤더 / 내비게이션 (전 페이지 공통) ========================================================================== */ .luxfilm-root .site-header{position:fixed; top:0; left:0; right:0; z-index:500; padding:22px 0; transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease); background:linear-gradient(180deg, rgba(15,13,11,.55) 0%, rgba(15,13,11,0) 100%);} .luxfilm-root .site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;} .luxfilm-root .site-header.scrolled{background:rgba(27,24,21,.94); backdrop-filter:blur(10px); padding:20px 0; box-shadow:0 10px 30px -20px rgba(0,0,0,.6);} .luxfilm-root .logo{font-family:'Cormorant Garamond',serif; font-size:22px; letter-spacing:.14em; color:var(--ivory); font-weight:600; flex:0 0 auto;} .luxfilm-root .logo small{display:block; font-family:'Pretendard'; font-size:9.5px; letter-spacing:.3em; color:var(--brass-soft); font-weight:600; margin-top:2px;} .luxfilm-root .nav-list{display:flex; gap:34px; list-style:none; margin:0; padding:0;} .luxfilm-root .nav-list li{margin:0;} .luxfilm-root .nav-list a{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory); position:relative; padding-bottom:4px; opacity:.9;} .luxfilm-root .nav-list a::after{content:'';position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--brass-soft); transition:width .35s var(--ease);} .luxfilm-root .nav-list a:hover{opacity:1;} .luxfilm-root .nav-list a:hover::after{width:100%;} .luxfilm-root .nav-cta{border:1px solid var(--brass-soft); color:var(--ivory); padding:10px 22px; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; border-radius:2px; transition:background .35s var(--ease), color .35s var(--ease); flex:0 0 auto;} .luxfilm-root .nav-cta:hover{background:var(--brass-soft); color:var(--ink);} .luxfilm-root .burger{display:none; background:none; border:0; color:var(--ivory); font-size:26px;} .luxfilm-root .nav-list-mobile{display:none; list-style:none; margin:0; padding:16px 22px 20px; background:rgba(27,24,21,.96); flex-direction:column; gap:14px;} .luxfilm-root .nav-list-mobile li{margin:0;} .luxfilm-root .nav-list-mobile a{color:var(--ivory); font-size:13px; letter-spacing:.14em; text-transform:uppercase;} .luxfilm-root .nav-list-mobile.open{display:flex;} @media (max-width:900px){ .luxfilm-root .nav-list, .luxfilm-root .site-header .nav-cta{display:none;} .luxfilm-root .burger{display:block;} } /* -------------------------------------------------------------------- 2-1. 주메뉴 자식 카테고리 — 데스크톱: 오버/클릭 시 디졸브(페이드)로 표시. 같은 자리(부모 바로 아래)에서 불투명도만 바뀌므로, 다른 부모로 옮기면 기존 것은 사라지고(opacity 0) 새 자식카테고리가 나타나는(opacity 1) 크로스페이드가 자연스럽게 만들어집니다(위치 이동 없이 순수 디졸브). -------------------------------------------------------------------- */ .luxfilm-root .nav-list li.lux-has-children{position:relative;} .luxfilm-root .nav-list li.lux-has-children > a{display:inline-flex; align-items:center; gap:5px;} .luxfilm-root .nav-list li.lux-has-children > a::before{ content:''; display:inline-block; width:5px; height:5px; margin-left:1px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); opacity:.75; } .luxfilm-root .nav-list .sub-menu{ list-style:none; margin:0; padding:12px 0; position:absolute; top:100%; left:50%; min-width:190px; background:rgba(27,24,21,.97); border:1px solid rgba(246,241,232,.14); border-radius:6px; box-shadow:0 24px 50px -20px rgba(0,0,0,.6); opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%); transition:opacity .3s var(--ease), visibility 0s linear .3s; z-index:600; } .luxfilm-root .nav-list li.lux-has-children:last-child > .sub-menu{ left:auto; right:0; transform:none; } .luxfilm-root .nav-list li.lux-has-children:hover > .sub-menu, .luxfilm-root .nav-list li.lux-has-children:focus-within > .sub-menu, .luxfilm-root .nav-list li.lux-has-children.lux-sub-open > .sub-menu{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .3s var(--ease), visibility 0s linear 0s; } .luxfilm-root .nav-list .sub-menu li{margin:0;} .luxfilm-root .nav-list .sub-menu a{ display:block; padding:9px 22px; font-size:12px; letter-spacing:.06em; text-transform:none; color:var(--ivory); opacity:.85; white-space:nowrap; padding-bottom:9px; } .luxfilm-root .nav-list .sub-menu a::after{display:none;} .luxfilm-root .nav-list .sub-menu a:hover{opacity:1; background:rgba(246,241,232,.06);} /* 모바일: 오버레이 디졸브 대신, 캐럿(▾) 버튼을 눌러 아래로 펼쳐지는 아코디언 방식(좁은 화면에서 겹치는 오버레이보다 사용하기 쉽습니다). */ .luxfilm-root .nav-list-mobile li.lux-has-children{display:flex; flex-wrap:wrap; align-items:center;} .luxfilm-root .nav-list-mobile li.lux-has-children > a{flex:1 1 auto;} .luxfilm-root .nav-list-mobile .lux-submenu-toggle{ flex:0 0 auto; background:none; border:0; color:var(--ivory); font-size:16px; padding:2px 10px; line-height:1; opacity:.8; } .luxfilm-root .nav-list-mobile .lux-submenu-toggle:hover{opacity:1;} .luxfilm-root .nav-list-mobile .sub-menu{ flex:0 0 100%; list-style:none; margin:0; padding:0 0 0 16px; max-height:0; overflow:hidden; transition:max-height .35s var(--ease); } .luxfilm-root .nav-list-mobile li.lux-sub-open > .sub-menu{max-height:600px;} .luxfilm-root .nav-list-mobile .sub-menu a{font-size:12px; opacity:.75; padding:8px 0; display:block;} /* 히어로가 없는(=메인페이지가 아닌) 화면에서는 헤더가 처음부터 불투명한 배경을 갖도록 해, 투명 헤더가 본문 위에 겹쳐 글자가 안 보이는 문제를 방지합니다. */ body:not(.home) .luxfilm-root .site-header{ background:rgba(27,24,21,.94); backdrop-filter:blur(10px); } body:not(.home) #site-main{ padding-top:96px; } /* ========================================================================== 3. 푸터 (전 페이지 공통) ========================================================================== */ .luxfilm-root footer{background:var(--ink); color:rgba(246,241,232,.72); padding:70px 0 30px;} .luxfilm-root .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; max-width:var(--maxw); margin:0 auto; padding:0 40px;} @media (max-width:720px){ .luxfilm-root .foot-grid{grid-template-columns:1fr; gap:34px; padding:0 22px;} } .luxfilm-root .foot-logo{font-family:'Cormorant Garamond',serif; font-size:26px; color:var(--ivory); letter-spacing:.1em;} .luxfilm-root footer h4{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:16px; font-family:'Pretendard'; font-weight:600;} .luxfilm-root footer ul{list-style:none; margin:0; padding:0; font-size:14px;} .luxfilm-root footer li{padding:6px 0;} .luxfilm-root footer li a:hover{color:var(--brass-soft);} .luxfilm-root .foot-bottom{margin-top:56px; padding-top:26px; border-top:1px solid var(--line-light); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; opacity:.55; max-width:var(--maxw); margin-left:auto; margin-right:auto; padding-left:40px; padding-right:40px;} @media (max-width:720px){ .luxfilm-root .foot-bottom{padding-left:22px; padding-right:22px;} } /* ========================================================================== 4. 본문(단일글/일반 페이지/아카이브) 공통 타이포그래피 ========================================================================== */ .entry-content, .entry-content p, .entry-content img, .entry-content ul, .entry-content ol, .entry-content table, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, .page-title, .entry-title, .blog .entry-title, .archive .entry-title, .entry-meta, .entry-meta .posted-on, .entry-meta .byline { text-align: center; margin-left: auto; margin-right: auto; } .entry-header, .page-content-body, .entry-comments { max-width: var(--luxstudio-article-max, 800px); margin-left:auto; margin-right:auto; padding: 0 20px; } body:not(.single-post) .entry-header { padding-top: 60px; } .entry-title { font-size: clamp(26px, 4vw, 38px); line-height: 1.35; } .entry-meta { color:#6b6b6b; font-size:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px; } .entry-thumbnail { max-width: 1040px; margin: 30px auto; padding: 0 20px; } .entry-thumbnail img { border-radius: 6px; } .page-content-body { padding-top: 20px; padding-bottom: 80px; text-align:left; } .page-content-body p, .page-content-body li { font-size: 17px; line-height: 1.8; } /* 단일 글 하단 태그 / 이전-다음 글 이동 */ .entry-footer .tag-links { max-width:1040px; margin:20px auto 0; padding:0 20px; text-align:center; font-size:13px; color:#888; } .post-navigation { max-width:1040px; margin:40px auto 60px; padding:20px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid #e4e1da; flex-wrap:wrap; font-size:14px; } .post-navigation a:hover { color: var(--brass, #a9834f); } /* 작성자 소개 박스 (아스트라 기본 제공 스타일을 대체) */ .ast-author-box{ display:flex; gap:20px; align-items:flex-start; background:#f7f6f3; border:1px solid #e4e1da; border-radius:8px; padding:24px; margin:50px auto; max-width:1040px; } .ast-author-box h3 { margin: 0 0 8px; font-size: 17px; } .ast-author-box p { margin: 0; font-size: 14px; color: #6b6b6b; line-height: 1.7; } .lux-author-avatar img { width: 110px !important; height: 110px !important; object-fit: cover !important; border-radius: 50% !important; display: block; } /* 댓글 영역 */ .comments-area { max-width: 1040px; margin: 40px auto 80px; padding: 0 20px; } .comments-title { font-size: 20px; margin-bottom: 20px; } .comment-list { list-style: none; margin: 0; padding: 0; } .comment-list .comment { border-top: 1px solid #e4e1da; padding: 20px 0; } .comment-list .comment-author img { border-radius: 50%; vertical-align: middle; margin-right: 8px; } .comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond textarea { width: 100%; padding: 10px; margin-bottom: 12px; border: 1px solid #ddd; border-radius: 4px; font-family: inherit; } .comment-respond .form-submit input { background: var(--ink, #1b1815); color: #f6f1e8; border: 0; padding: 12px 26px; border-radius: 2px; letter-spacing: .1em; text-transform: uppercase; font-size: 12.5px; cursor: pointer; } /* ========================================================================== 5. 아카이브/검색 목록 상단 배너 ========================================================================== */ .main-banner { position: relative; overflow: hidden; width: 100%; min-height: 300px; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; background: linear-gradient(160deg, #23201c 0%, #171512 55%, #100e0c 100%); } .main-banner .banner-text h1, .main-banner h1 { color: #ffffff !important; font-size: 36px; font-weight: 700; margin: 0; padding: 0 20px; } /* ========================================================================== 6. 목록 카드 그리드 (블로그 목록 / 카테고리 아카이브 / trawell 아카이브 공용) ========================================================================== */ .page-content { max-width: 1200px; margin: 60px auto; padding: 0 20px; } .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; } @media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .post-grid { grid-template-columns: 1fr !important; } } .post-card { border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); background: #fff; transition: all 0.3s ease; } .post-card:hover { transform: translateY(-5px); } .post-card a { display:block; text-decoration:none; } .thumbnail-wrapper { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background:#f4f4f4; } .post-card-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } .post-content { padding: 15px; } .post-card h2 { font-size: 18px; color: #333; padding: 0; margin: 0; } .post-date { margin-top: 10px; color: #888; font-size: 14px; } .no-post { grid-column: 1/-1; text-align: center; padding: 100px 0; } .pagination, .pagination-links { text-align: center; margin-top: 40px; } .pagination a, .pagination span.current, .pagination .page-numbers { display: inline-block; margin: 0 5px; padding: 8px 15px; background: #eee; color: #333; border-radius: 4px; text-decoration: none; } .pagination a:hover { background: #0073aa; color: #fff; } .pagination .current, .pagination span.current { background:#111; color:#fff; } /* 여행 통계(있을 경우) */ .site-statistics { margin-bottom: 50px; text-align: center; } .site-statistics h2 { font-size: 28px; margin-bottom: 20px; } .site-statistics p { font-size: 18px; margin: 5px 0; } .stats-inner { max-width: 1000px; margin: auto; display: flex; justify-content: space-between; flex-wrap: wrap; text-align: center; gap: 20px; } @media (max-width: 768px) { .stats-inner { justify-content: center; gap: 30px; } .stat-item { flex: 0 0 auto; width: auto; min-width: 140px; } } /* 카드형 레이아웃(테마 전용 커스텀 목록에 필요할 때 사용) */ .card-item { position: relative; flex: 1; min-width: 280px; height: 350px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); background-color: #eee; display: block; transition: transform 0.3s ease; } .card-item::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 0.5s ease; z-index: 0; } .card-item:hover::before { transform: scale(1.1); } .card-overlay { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); padding: 20px; color: #fff; } .card-overlay h3, .card-overlay p { margin: 0; color: #fff; } .card-item::after { content: ""; position: absolute; bottom: 0; left: 0; height: 4px; width: 100%; background-color: #999; transition: height 0.3s ease; z-index: 2; } .card-item:hover::after { height: 8px; } .card-item.category-eastern::after { background-color: #3498db; } .card-item.category-western::after { background-color: #8e44ad; } .card-item.category-news::after { background-color: #e67e22; } .card-item.category-dining::after { background-color: #00897B; } .card-item.category-accommodation::after { background-color: #FFD600; } .card-item.category-space::after { background-color: #F44336; } .thumb-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 0.4s ease; z-index: 0; } .card-item:hover .thumb-bg { transform: scale(1.08); } /* 소개(about) 페이지 등에서 쓰는 프로필 사진 영역 */ .about-me .about-photo img { box-shadow: none !important; background: transparent !important; } @media (max-width: 767px) { .about-me .about-photo img { box-shadow: none !important; background: transparent !important; } }