/* 1. 기본 레이아웃 및 배경 설정 */
.hero-new { position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background-color: #02020a; perspective: 2000px; }
.hero-new-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('./../img/mian_bg.webp') center/cover no-repeat; opacity: 0.2; z-index: 1; transform: scale(1.1); }
.grid-bg { position: absolute; width: 200%; height: 200%; bottom: -50%; left: -50%; background: linear-gradient(rgba(255, 241, 81, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 241, 81, 0.3) 1px, transparent 1px); background-size: 50px 50px, 50px 50px; transform: rotateX(70deg); z-index: 2; animation: grid-move 4s linear infinite; mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 60%); -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 60%); }
.environment-glow { position: absolute; top: 50%; left: 50%; width: 80vw; height: 80vw; transform: translate(-50%, -50%); background: radial-gradient(circle at center, rgba(255, 241, 81, 0.15) 0%, transparent 60%); filter: blur(80px); z-index: 3; opacity: 0.8; animation: pulse-glow 6s ease-in-out infinite alternate; pointer-events: none; }
.hero-new::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 30%, #000 100%); z-index: 5; pointer-events: none; }
.content-3d { position: relative; z-index: 15; text-align: center; width: 100%; transform-style: preserve-3d; animation: float-content 7s ease-in-out infinite; }
@keyframes float-content {
    0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
    50% { transform: translateY(-30px) rotateX(3deg) rotateY(-2deg); }
}
.neon-text { font-size: 13vw; font-weight: 900; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 20px; position: relative; color: transparent; -webkit-text-stroke: 3px rgba(255, 241, 81, 0.9); text-shadow: 0 0 15px rgba(255, 241, 81, 1), 0 0 40px rgba(255, 241, 81, 0.8), 0 0 80px rgba(255, 241, 81, 0.6), 0 0 150px rgba(255, 241, 81, 0.4), 0 0 250px rgba(255, 241, 81, 0.2); background: linear-gradient(to bottom, #fff, #fff151, #d4af37); -webkit-background-clip: text; background-clip: text; animation: flicker-aggressive 3s infinite; filter: drop-shadow(0 0 20px rgba(255, 241, 81, 0.5)); }
.neon-text::before, .neon-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; clip: rect(0, 900px, 0, 0); color: #fff; z-index: -1; }
.neon-text::before { left: -3px; text-shadow: 3px 0 rgba(255, 50, 50, 0.8); animation: glitch-anim-1 2.5s infinite linear alternate-reverse; }
.neon-text::after { left: 3px; text-shadow: -3px 0 rgba(50, 255, 255, 0.8); animation: glitch-anim-2 2s infinite linear alternate-reverse; }
.subtitle-wrapper { display: flex; justify-content: center; transform: translateZ(50px); }
.hero-new p { font-size: 1.8rem; font-weight: 400; color: #fff151; text-shadow: 0 0 15px rgba(255, 241, 81, 1); overflow: hidden; white-space: nowrap; border-right: 4px solid #fff; width: 0; margin: 0 auto; animation: typing 2.5s steps(30, end) forwards, blink 0.5s step-end infinite; animation-delay: 0.5s; backdrop-filter: blur(5px); }
.particles { position: absolute; width: 100%; height: 100%; z-index: 4; overflow: hidden; pointer-events: none; }
.particles span:not(.spark) { position: absolute; display: block; background: rgba(255, 241, 81, 0.4); border-radius: 50%; bottom: -50px; box-shadow: 0 0 15px rgba(255, 241, 81, 0.6); animation: rise 20s infinite linear; }
.particles .spark { position: absolute; display: block; width: 2px; height: 20px; background: #fff; box-shadow: 0 0 10px #fff151, 0 0 20px #fff151; top: -50px; animation: fall-spark 3s infinite ease-in; opacity: 0; }
/* 입자 랜덤 설정 (기존 + 스파크) */
.particles span:nth-child(1) { left: 10%; width: 8px; height: 8px; animation-duration: 15s; }
.particles span:nth-child(2) { left: 30%; width: 4px; height: 4px; animation-duration: 25s; animation-delay: 2s; }
.particles span:nth-child(3) { left: 55%; width: 10px; height: 10px; animation-duration: 18s; background: rgba(255, 255, 255, 0.6); }
.particles span:nth-child(4) { left: 80%; width: 6px; height: 6px; animation-duration: 22s; animation-delay: 1s; }
/* 스파크 위치/속도 */
.particles .spark:nth-child(6) { left: 20%; animation-duration: 2.5s; animation-delay: 0.5s; }
.particles .spark:nth-child(7) { left: 45%; width: 3px; height: 30px; animation-duration: 2s; animation-delay: 1.5s; }
.particles .spark:nth-child(8) { left: 70%; animation-duration: 3s; animation-delay: 0.2s; }
.particles .spark:nth-child(9) { left: 90%; width: 1px; height: 15px; animation-duration: 1.8s; animation-delay: 2.5s; }
/* --- Keyframes 정의 --- */
/* 그리드 이동 */
@keyframes grid-move {
    0% { background-position: 0 0; }
    100% { background-position: 0 50px; }
}
/* 환경광 숨쉬기 */
@keyframes pulse-glow {
    0% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.2); }
}
/* 더 공격적인 깜빡임 */
@keyframes flicker-aggressive {
    0%, 100% { opacity: 1; }
    3%, 7% { opacity: 0.8; text-shadow: none; }
    5%, 9%, 11% { opacity: 1; text-shadow: 0 0 15px rgba(255, 241, 81, 1), 0 0 40px rgba(255, 241, 81, 0.8); }
    30%, 34% { opacity: 0.9; }
    32% { opacity: 0.2; text-shadow: none; transform: skewX(5deg); }
    55% { opacity: 1; }
    57% { opacity: 0.7; }
    70% { opacity: 1; transform: scale(1.02); }
    72% { opacity: 1; transform: scale(1); }
}
/* 스파크 떨어지기 */
@keyframes fall-spark {
    0% { top: -10%; opacity: 1; transform: rotate(0deg); }
    80% { opacity: 1; }
    100% { top: 110%; opacity: 0; transform: rotate(20deg); }
}
@keyframes typing {
    from { width: 0; }
    to { width: 100%; max-width: 20em; }
}
@keyframes blink {
    50% { border-color: transparent; }
}
@keyframes rise {
    0% { bottom: -50px; transform: translateX(0); opacity: 0; }
    20% { opacity: 1; }
    100% { bottom: 110%; transform: translateX(-30px); opacity: 0; }
}
/* 첫 번째 글리치 애니메이션 (주로 텍스트 왼쪽/붉은색 잔상에 사용) */
@keyframes glitch-anim-1 {
    0% { clip: rect(30px, 9999px, 10px, 0); transform: skew(0.8deg); }
    5% { clip: rect(70px, 9999px, 90px, 0); transform: skew(-0.8deg); }
    10% { clip: rect(10px, 9999px, 50px, 0); transform: skew(0.4deg); }
    15% { clip: rect(90px, 9999px, 10px, 0); transform: skew(-0.2deg); }
    20% { clip: rect(20px, 9999px, 60px, 0); transform: skew(0.1deg); }
    25% { clip: rect(60px, 9999px, 30px, 0); transform: skew(0.6deg); }
    30% { clip: rect(10px, 9999px, 80px, 0); transform: skew(-0.5deg); }
    35% { clip: rect(50px, 9999px, 20px, 0); transform: skew(0.3deg); }
    40% { clip: rect(80px, 9999px, 70px, 0); transform: skew(-0.4deg); }
    45% { clip: rect(20px, 9999px, 40px, 0); transform: skew(0.2deg); }
    50% { clip: rect(90px, 9999px, 10px, 0); transform: skew(-0.6deg); }
    100% { clip: rect(0, 0, 0, 0); transform: skew(0); }
}
/* 두 번째 글리치 애니메이션 (주로 텍스트 오른쪽/청록색 잔상에 사용) */
@keyframes glitch-anim-2 {
    0% { clip: rect(10px, 9999px, 50px, 0); transform: skew(-0.9deg); }
    5% { clip: rect(80px, 9999px, 20px, 0); transform: skew(0.7deg); }
    10% { clip: rect(30px, 9999px, 10px, 0); transform: skew(-0.5deg); }
    15% { clip: rect(50px, 9999px, 90px, 0); transform: skew(0.2deg); }
    20% { clip: rect(10px, 9999px, 40px, 0); transform: skew(-0.2deg); }
    25% { clip: rect(70px, 9999px, 20px, 0); transform: skew(0.4deg); }
    30% { clip: rect(40px, 9999px, 60px, 0); transform: skew(-0.3deg); }
    35% { clip: rect(20px, 9999px, 80px, 0); transform: skew(0.5deg); }
    40% { clip: rect(60px, 9999px, 10px, 0); transform: skew(-0.1deg); }
    45% { clip: rect(90px, 9999px, 50px, 0); transform: skew(0.8deg); }
    50% { clip: rect(30px, 9999px, 30px, 0); transform: skew(-0.4deg); }
    100% { clip: rect(0, 0, 0, 0); transform: skew(0); }
}
/* [2. TYPOGRAPHY & UTILS] */
.fluid-wrapper { width: 100%; padding: 0 20px; }
/* 좌우 여백 */
.mega-title { font-size: 7vw; font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 20px; word-break: keep-all; font-family: 'SchoolSafetyNotification'; }
/* [3. HERO SECTION (Full Screen)] */
.hero { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: #000; }
.hero-bg { position: absolute; inset: 0; background: url('./../img/mian_bg.webp') center/cover; opacity: 0.6; animation: breathe 10s infinite alternate; }
@keyframes breathe {
    from { transform: scale(1.1); }
    to { transform: scale(1.0); }
}
.hero h1 { font-size: 13vw; font-weight: 900; color: #fff; z-index: 2; mix-blend-mode: difference; font-family: 'SchoolSafetyNotification' }
/* [4. INTRO SECTION] */
.intro-section { padding: 20vh 20px; }
.intro-desc { font-size: 1.5rem; max-width: 600px; margin-left: auto; margin-top: 50px; color: #333; letter-spacing: -0.5px;; line-height: 1.6; }
/* [5. HORIZONTAL SCROLL SECTION] */
.horizontal-section { position: relative; padding: 0; width: 100%; overflow: hidden; background: #111; }
.sticky-wrapper { height: 100vh; width: 100%; overflow: hidden; display: flex; align-items: center; background: #111; color: #fff; }
.horizontal-swiper { width: 100%; height: 100%; overflow: visible; cursor: grab; }
.horizontal-swiper:active { cursor: grabbing; }
.track { display: flex; padding-left: 60px; gap: 0; will-change: transform; }
.horizontal-swiper .swiper-wrapper { align-items: center; }
.horizontal-swiper .swiper-slide { width: 60vw; margin-right: 100px; flex-shrink: 0; overflow: visible; padding-top: 70px; box-sizing: border-box; height: auto; }
.h-item { width: 100%; height: calc(70vh - 70px); display: flex; flex-direction: column; justify-content: space-between; position: relative; user-select: none; overflow: visible; }
.h-img { width: 100%; height: 80%; background: #333; overflow: hidden; border-radius: 20px; }
.h-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; filter: grayscale(1); }
.h-item:hover .h-img img { transform: scale(1.1); filter: grayscale(0); }
.h-num { font-size: 8rem; font-weight: 900; -webkit-text-stroke: 1px #fff; color: transparent; position: absolute; top: 0; left: 0; transform: translate(-18px, -55%); z-index: 5; pointer-events: none; line-height: 0.9; white-space: nowrap; }
.h-info h3 { font-size: 3rem; margin-top: 20px; }
.h-info p { color: #FFF; opacity: 0.7; margin-top: 10px; font-size: 18px; font-weight: 600; }
/* ── TRENDY MARQUEE (MASSTIGE STYLE RE-DESIGN) ── */
#marquee-section { 
  padding: 100px 0; 
  background: #fff; 
  overflow: hidden; 
}
#marquee-section .inner { max-width: 1580px; margin: 0 auto; padding: 0 40px; }
.marquee-row {
  display: flex;
  flex-direction: column;
  gap: 40px;

}
.marquee-track { 
  display: flex; 
  width: max-content; 
  animation: marquee-scroll 40s linear infinite;
  align-items: center;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
}
.marquee-item span {
  font-size: clamp(60px, 8vw, 140px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -2px;
  color: #111;
  white-space: nowrap;
}
.marquee-item span.outline {
  color: transparent;
  -webkit-text-stroke: 1.5px #111;
}
/* 캡슐형 이미지 스타일 */
.marquee-capsule {
  width: 280px;
  height: 140px;
  border-radius: 100px;
  overflow: hidden;
  flex-shrink: 0;
  background: #eee;
}
.marquee-capsule img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 하단 서브 인포 라인 */
.marquee-footer {
  margin-top: 60px;
  border-top: 1px solid #ddd;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes marquee-scroll { 
  0% { transform: translateX(0); } 
  100% { transform: translateX(-50%); } 
}

@media (max-width: 768px) {
  .marquee-item span { font-size: 50px; }
  .marquee-capsule { width: 140px; height: 70px; }
}
/* [7. FULL PARALLAX IMAGE] */
.parallax-full { height: 80vh; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.p-bg { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./../img/p-bg.webp') center/cover no-repeat; background-attachment: fixed; }
.p-text { position: relative; z-index: 2; color: #fff; mix-blend-mode: overlay; font-family: 'SchoolSafetyNotification' }
.p-text h2 { font-size: 7vw; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 0; display: inline-flex; overflow: hidden; }
.char { display: inline-block; transform: translateY(100%); opacity: 0; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease; }
.char.is-visible { transform: translateY(0); opacity: 1; }
/* 기본 설정 & 1600px 컨테이너 */
.latest-insights { padding: 120px 0px; background-color: #FAFAFA; }
.grid-container { max-width: 1600px; margin: 0 auto; width: 100%; }
/* 상단 헤더 영역 */
.section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; border-bottom: 2px solid #111; padding-bottom: 20px; }
.section-title { font-size: 3rem; font-weight: 800; color: #111; margin: 0; letter-spacing: -0.02em; }
.view-all { font-size: 1.1rem; color: #555; text-decoration: none; font-weight: 600; transition: color 0.3s; }
.view-all:hover { color: #111; }
/* 메인 그리드 레이아웃 (7:5 비율 비대칭) */
.insights-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 50px; }
/* 공통 카드 스타일 및 호버 효과 */
.post-card { display: flex; flex-direction: column; }
.img-wrapper { display: block; overflow: hidden; border-radius: 16px; margin-bottom: 24px; }
.post-img { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.post-card:hover .post-img { transform: scale(1.05); }
.post-category { display: inline-block; font-size: 0.85rem; font-weight: 700; color: #0056b3; text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.05em; }
.post-title { margin: 0 0 16px 0; line-height: 1.4; word-break: keep-all; }
.post-title a { color: #111; text-decoration: none; transition: color 0.3s; }
.post-title a:hover { color: #0056b3; }
.post-date { font-size: 0.9rem; color: #888; font-weight: 600; }
/* 좌측 메인 글 특화 스타일 */
.featured .img-wrapper { aspect-ratio: 16 / 10; height: 100%; max-height: 500px; }
.featured .post-title { font-size: 2.5rem; font-weight: 700; }
.featured .post-excerpt { font-size: 1.1rem; color: #555; line-height: 1.6; margin-bottom: 24px; font-weight: 600; }
/* 우측 리스트 글 특화 스타일 */
.side-posts { display: flex; flex-direction: column; gap: 40px; }
.list-item { flex-direction: row; gap: 24px; align-items: center; }
.list-item .img-wrapper { width: 200px; height: 140px; margin-bottom: 0; flex-shrink: 0; border-radius: 12px; }
.list-item .post-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 12px; }
/* =========================================
   반응형 미디어 쿼리
   ========================================= */
/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    .insights-grid { grid-template-columns: 1fr; gap: 50px; }
    .featured .img-wrapper { aspect-ratio: 16 / 9; }
    .featured .post-title { font-size: 2rem; }
    .list-item { padding-top: 30px; border-top: 1px solid #eee; }
    .list-item:first-child { padding-top: 0; border-top: none; }
}
/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    .latest-insights { padding: 80px 20px; }
    .section-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
    .section-title { font-size: 2.2rem; }
    .list-item { flex-direction: column; align-items: flex-start; gap: 16px; }
    .list-item .img-wrapper { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .list-item .post-title { font-size: 1.3rem; }
}




.dw-selected-works { position:relative; min-height:auto; width:100%; padding:clamp(28px,4vw,64px); display:block; overflow:visible; isolation:isolate; background:radial-gradient(circle at 14% 20%,rgba(37,99,235,.08),transparent 28%),radial-gradient(circle at 86% 12%,rgba(14,165,233,.08),transparent 34%),linear-gradient(135deg,#ffffff 0%,#f8fafc 55%,#eef6ff 100%); box-sizing:border-box; }
.dw-selected-works::before { content:""; position:absolute; inset:0; z-index:-2; background-image:linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px); background-size:76px 76px; mask-image:radial-gradient(circle at center,black 0%,transparent 74%); opacity:.55; }
.dw-selected-works::after { content:""; position:absolute; width:54vw; height:54vw; right:-22vw; bottom:-28vw; z-index:-1; border-radius:999px; background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(14,165,233,.10)); filter:blur(8px); opacity:.85; }
.dw-works-inner { width:100%; max-width:1560px; min-height:auto; margin:0 auto; display:grid; grid-template-columns:minmax(280px,.78fr) minmax(540px,1.22fr); gap:clamp(24px,4vw,72px); align-items:start; box-sizing:border-box; }
.dw-works-copy { position:relative; top:auto; align-self:start; min-height:auto; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(22px,3vw,42px); border:1px solid rgba(15,23,42,.12); border-radius:28px; background:rgba(255,255,255,.82); box-shadow:0 30px 90px rgba(15,23,42,.10); backdrop-filter:blur(20px); }
.dw-eyebrow { display:inline-flex; align-items:center; gap:10px; margin:0 0 28px; color:#2563eb; font-size:13px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.dw-eyebrow::before { content:""; width:9px; height:9px; border-radius:50%; background:#2563eb; box-shadow:0 0 22px rgba(37,99,235,.45); }
.dw-title { margin:0; font-size:clamp(48px,7.5vw,116px); line-height:.88; letter-spacing:-.075em; font-weight:800; color:#0f172a; }
.dw-title span { display:block; background:linear-gradient(90deg,#0f172a,#2563eb 56%,#0ea5e9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dw-desc { max-width:440px; margin:30px 0 0; color:rgba(15,23,42,.68); font-size:clamp(15px,1.35vw,18px); line-height:1.8; word-break:keep-all; }
.dw-copy-bottom { display:grid; gap:18px; margin-top:44px; }
.dw-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dw-stat { padding:27px 24px; border:1px solid rgba(15,23,42,.10); border-radius:18px; background:#f8fafc; }
.dw-stat strong { display:block; color:#0f172a; font-size:clamp(20px,2vw,30px); line-height:1; }
.dw-stat span { display:block; margin-top:8px; color:rgba(15,23,42,.58); font-size:15px; line-height:1.4; }
.dw-cta { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:18px 20px; border-radius:999px; color:#ffffff; text-decoration:none; font-weight:800; background:linear-gradient(90deg,#2563eb,#0ea5e9 55%,#38bdf8); transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1); }
.dw-cta:hover { transform:translateY(-3px); box-shadow:0 20px 54px rgba(37,99,235,.22); }
.dw-works-panel { position:relative; min-height:auto; display:flex; flex-direction:column; border:1px solid rgba(15,23,42,.12); border-radius:28px; background:rgba(255,255,255,.88); overflow:visible; }
.dw-panel-head { position:relative; top:auto; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:clamp(18px,2vw,28px); border-bottom:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.82); backdrop-filter:blur(20px); }
.dw-filter { display:flex; gap:8px; flex-wrap:wrap; }
.dw-filter button { border:1px solid rgba(15,23,42,.12); border-radius:999px; padding:10px 14px; color:rgba(15,23,42,.62); background:#ffffff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:.28s cubic-bezier(.22,1,.36,1); }
.dw-filter button.is-active, .dw-filter button:hover { border-color:transparent; background:#fff151; }
.dw-count { color:rgba(15,23,42,.58); font-size:13px; font-weight:700; white-space:nowrap; }
.dw-work-list { display:grid; overflow:visible; max-height:none; height:auto; scrollbar-width:auto; }
.dw-work-card { position:relative; display:grid; grid-template-columns:88px 1.1fr .9fr 46px; gap:clamp(14px,2vw,28px); align-items:center; padding:clamp(22px,3vw,38px) clamp(18px,2.4vw,34px); border-bottom:1px solid rgba(15,23,42,.10); color:#111827; text-decoration:none; background:transparent; transition:background .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1),padding .35s cubic-bezier(.22,1,.36,1); }
.dw-work-card:last-child { border-bottom:0; }
.dw-work-card::before { content:""; position:absolute; inset:14px; z-index:-1; border-radius:22px; background:linear-gradient(90deg,rgba(37,99,235,.08),rgba(14,165,233,.08)); opacity:0; transform:scale(.985); transition:.35s cubic-bezier(.22,1,.36,1); }
.dw-work-card:hover::before, .dw-work-card:focus-visible::before { opacity:1; transform:scale(1); }
.dw-work-card:hover { padding-left:clamp(22px,3vw,44px); }
.dw-num { color:rgba(15,23,42,.28); font-size:clamp(18px,2vw,28px); font-weight:800; letter-spacing:-.06em; }
.dw-work-title { min-width:0; }
.dw-work-title h3 { margin:0; color:#0f172a; font-size:clamp(24px,3vw,70px); line-height:1; letter-spacing:-.065em; font-weight:800; }
.dw-work-title p { margin:12px 0 0; color:rgba(15,23,42,.62); font-size:18px; line-height:1.6; word-break:keep-all; }
.dw-tags { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.dw-tags span { display:inline-flex; align-items:center; min-height:32px; padding:7px 11px; border:1px solid rgba(15,23,42,.10); border-radius:999px; color:rgba(15,23,42,.68); font-size:15px; font-weight:700; background:#f8fafc; }
.dw-arrow { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(15,23,42,.12); border-radius:50%; color:#0f172a; background:#ffffff; transition:.35s cubic-bezier(.22,1,.36,1); }
.dw-work-card:hover .dw-arrow { color:#ffffff; background:#2563eb; transform:rotate(-45deg); }
.dw-preview { position:fixed; right:5vw; bottom:5vh; z-index:20; width:min(320px,34vw); aspect-ratio:4/3; border-radius:24px; border:1px solid rgba(15,23,42,.14); pointer-events:none; overflow:hidden; opacity:0; transform:translateY(18px) scale(.96); transition:.35s cubic-bezier(.22,1,.36,1); box-shadow:0 30px 100px rgba(15,23,42,.22); background:#ffffff; }
.dw-preview.is-visible { opacity:1; transform:translateY(0) scale(1); }
.dw-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.dw-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(15,23,42,.10)); }
@media (max-width:1180px) { .dw-works-inner { grid-template-columns:1fr; } .dw-works-copy { position:relative; top:auto; min-height:auto; } .dw-work-list { max-height:none; height:auto; overflow:visible; } .dw-preview { display:none; } }
@media (max-width:760px) { .dw-selected-works { padding:18px; } .dw-works-copy, .dw-works-panel { border-radius:22px; } .dw-title { font-size:clamp(48px,16vw,72px); } .dw-stat-row { grid-template-columns:1fr; } .dw-panel-head { align-items:flex-start; flex-direction:column; } .dw-work-card { grid-template-columns:1fr; gap:16px; padding:24px 20px; } .dw-work-card:hover { padding-left:20px; } .dw-num { font-size:15px; letter-spacing:.08em; } .dw-tags { justify-content:flex-start; } .dw-arrow { position:absolute; right:20px; top:22px; width:40px; height:40px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }



/*.dw-orbit-board { position:relative; width:100%; min-height:100vh; padding:clamp(150px,4vw,70px) clamp(16px,4vw,60px); display:flex; align-items:center; overflow:hidden; isolation:isolate; background:#f2f2f2;  box-sizing:border-box; }
.dw-orbit-board::before, .dw-orbit-board::after, .dw-left::before, .dw-board-panel::before, .dw-post::before { display:none; }
.dw-orbit-inner { width:100%; max-width:none; margin:0 auto; display:grid; grid-template-columns:minmax(300px,32%) minmax(0,68%); gap:clamp(28px,4vw,72px); align-items:stretch; box-sizing:border-box; }
.dw-left { position:relative; min-height:calc(100vh - clamp(48px,8vw,140px)); display:flex; flex-direction:column; justify-content:space-between; gap:40px; padding:clamp(10px,2vw,24px); border:none; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; overflow:visible; box-sizing:border-box; }
.dw-kicker { position:relative; z-index:1; display:inline-flex; align-items:center; gap:11px; margin:0 0 30px; color:#4f8cff; font-size:13px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
.dw-kicker::before { content:""; width:10px; height:10px; border-radius:50%; background:#4defff; box-shadow:0 0 24px rgba(77,239,255,.55); }
.dw-title { position:relative; z-index:1; margin:0; color:#111; font-size:clamp(52px,7.4vw,124px); line-height:.83; letter-spacing:-.09em; font-weight:900; }
.dw-title span { display:block; }
.dw-title .outline { color:transparent; -webkit-text-stroke:1.3px rgba(79,140,255,.72); }
.dw-desc { position:relative; z-index:1; max-width:520px; margin:30px 0 0; color:#555; font-size:clamp(15px,1.2vw,18px); line-height:1.82; word-break:keep-all; }
.dw-left-bottom { position:relative; z-index:1; display:grid; gap:18px; }
.dw-progress { display:grid; gap:12px; }
.dw-progress-head { display:flex; justify-content:space-between; color:#333; font-size:13px; font-weight:800; }
.dw-progress-bar { height:10px; border-radius:999px; background:#e9e9e9; overflow:hidden; }
.dw-progress-bar span { display:block; width:82%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#4f8cff,#4defff,#ff4fd8); }
.dw-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dw-stat { padding:17px 0; border:none; border-radius:0; background:transparent; }
.dw-stat strong { display:block; color:#111; font-size:clamp(22px,2.2vw,34px); line-height:.95; letter-spacing:-.06em; font-weight:900; }
.dw-stat span { display:block; margin-top:8px; color:#666; font-size:12px; line-height:1.4; font-weight:700; }
.dw-right { display:grid; grid-template-rows:auto 1fr; gap:24px; min-width:0; box-sizing:border-box; }
.dw-dashboard-head { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; padding:0 0 24px; border:none; border-radius:0; background:transparent; backdrop-filter:none; box-shadow:none; border-bottom:1px solid #e5e5e5; }
.dw-dashboard-title { margin:0; color:#111; font-size:clamp(25px,2.7vw,44px); line-height:1; letter-spacing:-.07em; font-weight:900; }
.dw-dashboard-desc { margin:10px 0 0; color:#666; font-size:14px; line-height:1.6; word-break:keep-all; }
.dw-filter { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.dw-filter span { min-height:36px; display:inline-flex; align-items:center; padding:0 14px; border:1px solid #ddd; border-radius:999px; color:#555; background:transparent; font-size:12px; font-weight:800; white-space:nowrap; }
.dw-filter span:first-child { color:#061018; border-color:transparent; background:#4defff; }
.dw-board-panel { position:relative; border:none; border-radius:0; background:transparent; backdrop-filter:none; overflow:visible; box-shadow:none; }
.dw-post-list { position:relative; display:grid; padding:0; max-height:none; overflow:visible; scrollbar-width:thin; scrollbar-color:#bbb transparent; }
.dw-post { position:relative; display:grid; grid-template-columns:76px minmax(0,1fr) 118px 84px; gap:14px; align-items:center; min-height:82px; padding:18px 0; border:none; border-bottom:1px solid #ddd; border-radius:0; color:#111; text-decoration:none; transition:opacity .25s ease, transform .25s ease; }
.dw-post + .dw-post { margin-top:0; }
.dw-post:hover { transform:none; border-color:#eee; background:transparent; opacity:.82; }
.dw-no { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; color:#061018; background:linear-gradient(135deg,#4f8cff,#fff); font-size:18px; font-weight:900; letter-spacing:-.06em; font-variant-numeric:tabular-nums; box-shadow:none; }
.dw-post.accent-cyan .dw-no { background:linear-gradient(135deg,#4defff,#fff); }
.dw-post.accent-pink .dw-no { background:linear-gradient(135deg,#ff4fd8,#fff); }
.dw-post.accent-orange .dw-no { background:linear-gradient(135deg,#ffad4f,#fff); }
.dw-post.accent-lime .dw-no { background:linear-gradient(135deg,#b7ff55,#fff); }
.dw-post.accent-blue .dw-no { background:linear-gradient(135deg,#4f8cff,#fff); }
.dw-post-main { min-width:0; }
.dw-post-title { display:flex; align-items:center; gap:8px; min-width:0; margin:0; color:#111; font-size:clamp(15px,1.1vw,20px); line-height:1.42; letter-spacing:-.045em; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:keep-all; }
.dw-link-icon { flex:0 0 auto; width:22px; height:22px; display:inline-grid; place-items:center; border-radius:50%; color:#061018; background:#b7ff55; font-size:11px; font-weight:900; }
.dw-mobile-meta { display:none; flex-wrap:wrap; gap:8px; margin-top:10px; }
.dw-mobile-meta span, .dw-type { display:inline-flex; align-items:center; min-height:30px; padding:0 10px; border:1px solid #ddd; border-radius:999px; color:#666; background:transparent; font-size:12px; font-weight:800; white-space:nowrap; }
.dw-type { justify-content:center; color:#061018; border-color:transparent; background:rgba(77,239,255,.32); }
.dw-writer, .dw-hit, .dw-date { color:#777; font-size:13px; font-weight:800; white-space:nowrap; }
.dw-hit, .dw-date { text-align:center; font-variant-numeric:tabular-nums; }
.dw-arrow { width:42px; height:42px; display:grid; place-items:center; border:1px solid #ddd; border-radius:50%; color:#111; background:transparent; transition:transform .25s ease, background .25s ease, color .25s ease; }
.dw-post:hover .dw-arrow { color:#061018; background:#4defff; transform:rotate(-45deg); }
@media (max-width:1220px) { .dw-orbit-inner { grid-template-columns:1fr; } .dw-left { min-height:auto; } .dw-post-list { max-height:none; overflow:visible; } }
@media (max-width:860px) { .dw-orbit-board { padding:40px 18px; align-items:flex-start; } .dw-left, .dw-dashboard-head, .dw-board-panel { border-radius:0; } .dw-dashboard-head { grid-template-columns:1fr; } .dw-filter { justify-content:flex-start; } .dw-stats { grid-template-columns:repeat(3,1fr); } .dw-post { grid-template-columns:58px minmax(0,1fr) 42px; min-height:auto; padding:18px 0; } .dw-post-title { white-space:normal; overflow:visible; text-overflow:initial; } .dw-type, .dw-writer, .dw-hit, .dw-date { display:none; } .dw-mobile-meta { display:flex; } }
@media (max-width:520px) { .dw-orbit-board { padding:34px 16px; } .dw-left, .dw-dashboard-head { padding-left:0; padding-right:0; } .dw-title { font-size:clamp(52px,18vw,78px); } .dw-stats { grid-template-columns:1fr; } .dw-post { grid-template-columns:1fr; } .dw-no { width:max-content; height:34px; padding:0 12px; border-radius:999px; font-size:14px; } .dw-arrow { display:none; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }*/






/* [9. NEWS SECTION] */
.news-section { padding: 150px 60px; border-top: 1px solid #eee; }
.news-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.news-card { cursor: pointer; }
.news-img { height: 350px; background: #eee; overflow: hidden; margin-bottom: 20px; border-radius: 4px; }
.news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.news-card:hover .news-img img { transform: scale(1.05); }
.news-date { font-size: 0.9rem; color: #333; display: block; margin-bottom: 10px; font-weight: 600; }
.news-title { font-size: 1.5rem; font-weight: 700; line-height: 1.4; transition: color 0.3s; }
.news-card:hover .news-title { color: var(--accent-color); }
/* [10. PARTNERS (Rolling)] */
.partner-section { padding: 100px 0; background: #fafafa; border-top: 1px solid #eee; overflow: hidden; }
.partner-track { display: flex; width: calc(200px * 10); animation: partnerScroll 20s linear infinite; gap: 100px }
.partner-logo { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; color: #ccc; flex-shrink: 0; }
.partner-logo img { width: 80%; }
@keyframes partnerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-200px * 5)); }
}
/* [반응형] */
@media (max-width: 1024px) {
    .fluid-wrapper, .list-section, .news-section { padding: 100px 20px; }
    .mega-title { font-size: 3.5rem; }
    .hero h1 { font-size: 15vw; }
    /* Horizontal Scroll Mobile */
    .track { padding-left: 20px; }
    .horizontal-swiper .swiper-slide { width: 85vw; margin-right: 40px; padding-top: 54px; }
    .h-item { height: calc(70vh - 54px); }
    .h-num { font-size: 5.8rem; transform: translate(-8px, -50%); }
    /* List Section Mobile */
    .list-row { flex-direction: column; align-items: flex-start; padding: 50px 0; }
    .l-meta { margin-left: 0; margin-right: 0; margin-bottom: 15px; }
    .l-title { font-size: 2.5rem; }
    .l-arrow { display: none; }
    .hover-reveal-img { width: 90%; height: 180px; border-radius: 20px; }
    /* News Mobile */
    .news-grid { grid-template-columns: 1fr; }
}