dnssash/theme/rd.laser/rb.layout/laser/index_backup.php

<script src="https://unpkg.com/@studio-freight/lenis@1.0.34/dist/lenis.min.js"></script>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@700&family=Montserrat:wght@800&display=swap');

    /* 기본 레이아웃 및 폰트 */
    :root { --point-red: #e61e25; --bg-gray: #f9f9f9; }
    .journal-main { font-family: 'Pretendard', sans-serif; color: #111; word-break: keep-all; }
    .serif-title { font-family: 'Noto Serif KR', serif; }
    .en-title { font-family: 'Montserrat', sans-serif; letter-spacing: -1px; }

    /* [2] 양측 5% 플로팅 광고 영역 (리사이징 최적화) */
    .float-ad {
        position: fixed;
        top: 180px;
        width: 5%;
        height: 500px;
        z-index: 1000;
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .ad-left { left: 15px; }
    .ad-right { right: 15px; }
    .ad-inner {
        width: 100%; height: 100%; overflow: hidden; border: 1px solid #eee; background: #fff;
    }
    .ad-inner img {
        width: 100%; height: 100%; object-fit: cover; /* 어떤 사이즈든 5% 영역에 맞춤 */
    }

    /* [3] 섹션별 디자인 */
    /* 히어로 섹션 (클래식 저널) */
    .hero-section { padding: 120px 0; background: #fff; border-bottom: 2px solid #111;
    background-image: url("https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=600&q=80")}
    .hero-cat { font-weight: 800; color: var(--point-red); font-size: 0.85rem; letter-spacing: 3px; }

    /* 뉴스 & 매거진 그리드 (메트로 스타일) */
    .news-grid { padding: 80px 0; }
    .main-post { border-right: 1px solid #eee; padding-right: 40px; }
    .sub-post-list { padding-left: 20px; }
    .post-item { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #f0f0f0; }

    /* 업체 & 기술 갤러리 */
    .tech-section { padding: 80px 0; background: var(--bg-gray); }
    .gallery-card { background: #fff; transition: 0.3s; height: 100%; }
    .gallery-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
    .gallery-img { aspect-ratio: 4/3; overflow: hidden; }
    .gallery-img img { width: 100%; height: 100%; object-fit: cover; }

    /* 실시간 인입 섹션 (커뮤니티) */
    .live-feed { padding: 60px 0; border-top: 1px solid #111; }
    .feed-box { background: #111; color: #fff; padding: 30px; }

    /* 모바일에서는 광고 숨김 */
    @media (max-width: 1300px) { .float-ad { display: none; } }
</style>

<div class="journal-main">

    <aside class="float-ad ad-left"><div class="ad-inner"><a href="#"><img src="좌측광고.jpg" alt="AD"></a></div></aside>
    <aside class="float-ad ad-right"><div class="ad-inner"><a href="#"><img src="우측광고.jpg" alt="AD"></a></div></aside>

    <section class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <span class="hero-cat en-title mb-3 d-block">EDITORIAL FEATURE</span>
                    <h1 class="display-3 serif-title mb-4">빛이 만드는 미래,<br>그 중심의 레이저월드</h1>
                    <p class="lead text-muted mb-0">대한민국 레이저 산업의 모든 정보와 업체, 기술력을 집대성한 전문 저널입니다.</p>
                </div>
                <div class="col-lg-4 d-none d-lg-block">
                    <div class="p-4 border-start border-4 border-dark">
                        <h5 class="fw-bold mb-3">Today's Issue</h5>
                        <ul class="list-unstyled small">
                            <li class="mb-2">● 국산 파이버 레이저의 글로벌 도약</li>
                            <li class="mb-2">● 2026 전시회 핵심 키워드 리포트</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="news-grid">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 main-post">
                    <h3 class="en-title mb-5">LASER NEWS</h3>
                    <div class="mb-5">
                        <img src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?auto=format&fit=crop&w=1000&q=80" class="img-fluid mb-4" alt="News">
                        <h2 class="serif-title h1">레이저 가공 업계의 디지털 전환: AI가 바꾸는 정밀도의 한계</h2>
                        <p class="text-muted mt-3">최신 AI 제어 시스템을 도입한 가공기들이 불량률을 0.01% 이하로 낮추고 있습니다. 이번 전시회에서 공개된 핵심 기술을 분석합니다.</p>
                    </div>
                </div>
                <div class="col-lg-4 sub-post-list">
                    <h3 class="en-title mb-5 text-muted">LATEST FEED</h3>
                    <div class="post-item">
                        <small class="text-danger fw-bold">국내뉴스</small>
                        <h5 class="fw-bold mt-2">차세대 광원 국산화 성공 업체 인터뷰</h5>
                    </div>
                    <div class="post-item">
                        <small class="text-danger fw-bold">해외뉴스</small>
                        <h5 class="fw-bold mt-2">유럽 전시회 현장 리포트: 그린 레이저의 부상</h5>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="tech-section">
        <div class="container">
            <div class="d-flex justify-content-between align-items-end mb-5">
                <h3 class="en-title mb-0">COMPANY & TECH</h3>
                <a href="/bbs/board.php?bo_table=company" class="text-dark small fw-bold">VIEW ALL +</a>
            </div>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="gallery-card border shadow-sm">
                        <div class="gallery-img"><img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=600&q=80"></div>
                        <div class="p-4">
                            <h5 class="serif-title mb-0">우수 업체 탐방: (주)광성레이저</h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="gallery-card border shadow-sm">
                        <div class="gallery-img"><img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=600&q=80"></div>
                        <div class="p-4">
                            <h5 class="serif-title mb-0">파이버 레이저 유지보수 가이드</h5>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="feed-box h-100">
                        <h5 class="en-title text-warning mb-4">LIVE MARKET</h5>
                        <ul class="list-unstyled small mb-0">
                            <li class="mb-3 border-bottom border-secondary pb-2 d-flex justify-content-between">
                                <span>중고 커팅기 급매합니다</span><span class="text-white-50">12:00</span>
                            </li>
                            <li class="mb-3 border-bottom border-secondary pb-2 d-flex justify-content-between">
                                <span>레이저 전문가 구인 중</span><span class="text-white-50">11:30</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

<script>
    // Lenis Smooth Scroll 초기화
    const lenis = new Lenis({
        duration: 1.2,
        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
        smoothWheel: true
    });

    function raf(time) {
        lenis.raf(time);
        requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);

    // 스크롤 시 사이드 광고가 아주 살짝 늦게 따라오는 역동적 효과 (Parallax)
    window.addEventListener('scroll', () => {
        const scrollY = window.scrollY;
        const ads = document.querySelectorAll('.float-ad');
        ads.forEach(ad => {
            // 광고 위치가 자연스럽게 고정되도록 브라우저 성능에 맞춰 보정
            ad.style.transform = `translateY(${Math.sin(scrollY * 0.001) * 2}px)`;
        });
    });
</script>