/* =================================================
   TEST STYLE 2 – MAIN RENEWAL (Synology-like clean)
   scope: body.home-renewal
================================================= */

.home-renewal{
  --max-width:1560px;
  --container-pad:40px;

  --brand:#00a6d6;
  --text:#101828;
  --muted:#667085;
  --line:#e6ebf1;
  --bg:#ffffff;

  --radius:18px;
  --shadow:0 10px 26px rgba(16,24,40,.08);

  --header-h:90px;

  --hero-h-desktop: clamp(520px, 56vh, 640px);
}

.home-renewal *{ box-sizing:border-box; }
.home-renewal img{ max-width:100%; display:block; }

body.home-renewal{ padding-top:0 !important; background:var(--bg); overflow-x:hidden; }
.home-renewal .home-main{
  padding-top: calc(var(--header-h) + env(safe-area-inset-top));
}

/* 구버전 고정폭 래퍼 풀기 – home-renewal에서만 */
body.home-renewal .all,
body.home-renewal #wrap,
body.home-renewal #container,
body.home-renewal #content,
body.home-renewal #contents,
body.home-renewal #main,
body.home-renewal .wrapper{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  overflow:visible !important; /* 그누보드 내부 스크롤바 완전 제거 */
}

.home-renewal .container{
  width:min(100%, var(--max-width)) !important;
  max-width:var(--max-width) !important;
  margin:0 auto;
  padding:0 var(--container-pad);
  overflow:visible !important;
}

.home-renewal .section{
  padding:96px 0;
  overflow:visible !important;
}

/* =================================================
   Section Head
================================================= */
.home-renewal .section-head{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:14px;
  margin-bottom:34px;
  text-align:center;
}
.home-renewal .section-head .more-link{
  align-self:flex-end;
}

.home-renewal .section-title{
  margin:0;
  font-size:28px;
  letter-spacing:-.02em;
  color:var(--text);
}
.home-renewal .section-title.left{ text-align:center; }

.home-renewal .section-sub{
  margin:10px 0 0;
  font-size:14px;
  color:var(--muted);
}
.home-renewal .more-link{
  font-size:14px;
  color:#344054;
  text-decoration:none;
  white-space:nowrap;
}
.home-renewal .more-link:hover{ text-decoration:underline; }

/* =================================================
   Buttons
================================================= */
/* 기존 .btn-primary 스타일 아래에 추가 또는 교체 */
.home-renewal .btn-custom-img {
  display: inline-block;
  transition: transform 0.2s ease-in-out, opacity 0.2s;
  vertical-align: middle;
  text-decoration: none;
}

.home-renewal .btn-custom-img img {
  display: block;
  width: auto;      /* PNG 원본 비율 유지 */
  max-width: 200px; /* 원하는 버튼 크기에 맞춰 조절하세요 */
  height: auto;
}

/* 마우스 호버 시 부드러운 효과 (전문가다운 디테일) */
.home-renewal .btn-custom-img:hover {
  transform: translateY(-2px); /* 살짝 떠오르는 효과 */
  opacity: 0.9;                /* 살짝 투명해지는 효과 */
}

.home-renewal .btn-custom-img:active {
  transform: translateY(0);    /* 클릭 시 눌리는 느낌 */
}
/* =================================================
   GRID
================================================= */
.home-renewal .grid{ display:grid; gap:28px; }
.home-renewal .grid-3{ grid-template-columns:repeat(3, 1fr); }

.home-renewal .ally-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}

/* =================================================
   HERO
================================================= */
.home-renewal .hero{
  position:relative;
  padding:0;
  overflow:hidden;
  background:#fff;
}
.home-renewal .hero-viewport{ overflow:hidden; }
.home-renewal .hero-track{
  display:flex;
  width:100%;
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* =================================================
   HERO 슬라이드 – 배경 이미지만 적용
================================================= */

.home-renewal .hero-slide {
  min-width: 100%;
  min-height: var(--hero-h-desktop);
  position: relative;
  display: flex;
  align-items: center;

  /* 배경 이미지만 설정, 그라데이션 제거 */
  background-image: var(--hero-bg); /* 이미지 */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* 이미지 크기 자동 맞춤 */
}

/* 그라데이션 오버레이 완전 제거 */
.home-renewal .hero-slide::before {
  display: none !important;
}





/* hero content wrapper */
.home-renewal .hero-grid{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-pad);
}
.home-renewal .hero-text{ max-width:640px; }
.home-renewal .hero-text h1{
  margin:0 0 12px;
  font-size:48px;
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--text);
}
.home-renewal .hero-text p{
  margin:0 0 26px;
  max-width:520px;
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
}

/* =================================================
   HERO – Split layout (좌 텍스트 / 우 GIF 풀)
================================================= */
.home-renewal .hero-grid--split{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-pad);

  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap:36px;
  align-items:stretch;
  min-height: var(--hero-h-desktop);
}

.home-renewal .hero-left{
  display:flex;
  align-items:center;
  min-width:0;
}

.home-renewal .hero-right{
  position:relative;
  overflow:hidden;
  background:transparent;
  min-height:100%;
}

.home-renewal .hero-right img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ✅ 1번 슬라이드: overlay를 왼쪽까지만 적용 */
.home-renewal .hero-slide.is-split::before{
  width: min(58%, 920px);
  right:auto;
}

/* nav */
.home-renewal .hero-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(17,24,39,.55);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  font-size:26px;
  line-height:1;
  padding:0;           /* 버튼 기본 패딩 제거 */
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.home-renewal .hero-nav:hover{ background:rgba(17,24,39,.72); }
.home-renewal .hero-nav.prev{ left:18px; }
.home-renewal .hero-nav.next{ right:18px; }

/* dots */
.home-renewal .hero-dots{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:6;
}
.home-renewal .hero-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.55);
  cursor:pointer;
}
.home-renewal .hero-dot.is-active{ background:#fff; }


/* 6HERO 텍스트 위 로고 */
.home-renewal .hero-text .hero-logo{
  display:block;
  width: 45px;        /* 필요하면 140~220 사이로 조절 */
  max-width: 60%;
  height:auto;
  margin: 0 0 14px 0;  /* 로고 아래 여백 */
}

.home-renewal .hero-text .hero-h1-light{
  font-weight: 500;   /* 400~600 사이로 조절 */
  font-size: 35px;
}


/* =================================================
   Cards (Synology-like)
================================================= */
.home-renewal .card{
  background:#fff;
  border:1px solid rgba(16,24,40,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.home-renewal .card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(16,24,40,.12);
}

/* media card */
.home-renewal .media-card{ display:flex; flex-direction:column; }
.home-renewal .media-thumb{
  width:100%;
  aspect-ratio:16/9;
  background:#f2f4f7;
  overflow:hidden;
}
.home-renewal .media-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.home-renewal .media-body{ padding:18px 18px 20px; }
.home-renewal .media-title{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--text);
}
.home-renewal .media-desc{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}

/* Ally cards */
.home-renewal .ally-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  min-height:150px;
  background-image:var(--bg);
  background-size:cover;
  background-position:center;
  border:1px solid rgba(16,24,40,.08);
  box-shadow:var(--shadow);
  text-decoration:none;
  color:#fff;
}
.home-renewal .ally-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(16,24,40,.72) 0%, rgba(16,24,40,.25) 70%, rgba(16,24,40,.15) 100%);
}
.home-renewal .ally-overlay{
  position:relative;
  z-index:1;
  height:100%;
  padding:22px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.home-renewal .ally-title{
  font-size:22px;
  letter-spacing:-.02em;
}
.home-renewal .ally-subtitle{
  font-size:13px;
  opacity:.9;
}
.home-renewal .ally-cta{
  position:absolute;
  right:18px;
  top:18px;
  font-size:12px;
  padding:6px 10px;
  border-radius:8px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
}

/* =================================================
   Nebula dark (좌 로고+텍스트 + 우 2카드 / 배경이미지)
================================================= */
.home-renewal .nebula-dark {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: #0b1220;
  color: #fff;
  padding: 90px 0; /* 섹션 상하 패딩 */
}

/* 배경 이미지 레이어 */
.home-renewal .nebula-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/images/main/nebula_back.webp"); /* PNG 1,308KB → WebP 69KB (2026-10-20) */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1; /* 배경 이미지 설정 */
}

/* 기존 section-head 숨김 */
.home-renewal .nebula-dark .section-head { display: none; }

/* wrap 레이아웃 */
.home-renewal .nebula-dark .nebula-wrap {
  display: flex;             /* grid 대신 flex로 변경해서 간격 조절을 더 미세하게 함 */
  justify-content: center;   /* 왼쪽과 오른쪽을 가운데로 모음 */
  align-items: center;
  gap: 60px;                 /* 카피와 박스 사이의 실제 거리 (원하는 만큼 숫자를 줄여봐!) */
  max-width: 1400px;         /* 전체가 너무 퍼지지 않게 제한 */
  margin: 0 auto;            /* 중앙 정렬 */
}

/* Left Content */
.home-renewal .nebula-dark .nebula-left {
  flex: 0 0 320px;           /* 너비를 320px로 고정 */
  min-width: 0;
}
.home-renewal .nebula-dark .nebula-logo {
  width: 64px;
  height: auto;
  display: block;
  margin: 0 0 14px;
  opacity: .95;
}

.home-renewal .nebula-dark .nebula-title {
  margin: 0 0 14px;
  font-size: 34px;
  line-height: 1.35;
  letter-spacing: -.02em;
  font-weight: 400;
  color: #fff;
}

.home-renewal .nebula-dark .nebula-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: #baeeff;
}

/* Right Cards Grid */
.home-renewal .nebula-dark .nebula-right {
  flex: 0 1 850px;           /* 박스 영역 전체 너비 제한 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
/* 카드 스타일 (박스 크기 유지의 핵심) */
.home-renewal .nebula-dark .nebula-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  transition: transform .18s ease;
}

.home-renewal .nebula-dark .nebula-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}
/* 이미지 영역 비율 유지 */
.home-renewal .nebula-dark .nebula-card-top {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}

.home-renewal .nebula-dark .nebula-card-inner {
  width: 100%;
  height: 100%;
  display: block; /* flex 대신 block으로 이미지 전체 점유 유도 */
}

/* ✅ 이미지가 박스를 빈틈없이 채우도록 설정 */
.home-renewal .nebula-dark .nebula-pack-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* 핵심: 비율 유지하며 박스 가득 채움 */
  object-position: center;
}

/* Bottom Bar */
.home-renewal .nebula-dark .nebula-card-bottom {
  background: #001324;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
}

.home-renewal .nebula-dark .nebula-cta {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.home-renewal .nebula-dark .nebula-pack {
  transition: color .18s ease;
}

/* Hover Effects */
.home-renewal .nebula-dark .nebula-card.plus:hover .nebula-pack { color: #ff8a00; }
.home-renewal .nebula-dark .nebula-card.pro:hover .nebula-pack { color: #55b300; }

.home-renewal .nebula-dark .nebula-cta-icon {
  width: 16px;
  height: 16px;
  display: block;
  opacity: .95;
}


/* =================================================
   Nebula 카드 이미지 Hover 교체
   - Plus: nebula_section1_hover
   - Pro : nebula_section2_hover
================================================= */

/* 기본 상태: 이미지가 들어있는 영역을 배경으로도 쓸 수 있게 */
.home-renewal .nebula-dark .nebula-card-top{
  position: relative;
}

/* hover 시: img 숨기고, 카드 top에 hover 이미지를 배경으로 깔기 */
.home-renewal .nebula-dark .nebula-card:hover .nebula-pack-img{
  opacity: 0;
}

/* Plus hover */
.home-renewal .nebula-dark .nebula-card.plus:hover .nebula-card-top{
  background: url("/images/main/nebula_section1_hover.jpg") center/cover no-repeat;
}

/* Pro hover */
.home-renewal .nebula-dark .nebula-card.pro:hover .nebula-card-top{
  background: url("/images/main/nebula_section2_hover.jpg") center/cover no-repeat;
}

/* (선택) 이미지 전환이 부드럽게 */
.home-renewal .nebula-dark .nebula-pack-img{
  transition: opacity .18s ease;
}




/* Case slider */
.home-renewal .case-slider{ position:relative; }
.home-renewal .case-viewport{
  overflow:hidden;
  border-radius:16px;
}
.home-renewal .case-track{
  display:flex;
  gap:24px;
  transition:transform .45s ease;
  will-change:transform;
}
.home-renewal .case-card{
  flex:0 0 calc((100% - 24px) / 2);
  border-radius:16px;
}
.home-renewal .case-card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.home-renewal .case-card span{
  display:block;
  padding:14px 16px;
  font-weight:700;
  color:var(--text);
  background:#fff;
}
.home-renewal .case-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(16,24,40,.12);
  background:rgba(255,255,255,.9);
  color:#111;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  font-size:26px;
  line-height:1;
}
.home-renewal .case-nav:hover{ background:#f0f0f0; color:#555; }
.home-renewal .case-nav.prev{ left:-10px; }
.home-renewal .case-nav.next{ right:-10px; }

.home-renewal .case-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:16px;
}
.home-renewal .case-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  background:#d0d5dd;
  cursor:pointer;
}
.home-renewal .case-dot.is-active{ background:var(--brand); }

/* Logo marquee */
.home-renewal .logo-wall{ background:#fff; }
.home-renewal .logo-marquee{
  overflow:hidden;
  border-radius:0;
  background:transparent;
  padding:10px 0;
  border:0;
}
.home-renewal .logo-track{
  display:flex;
  align-items:center;
  gap:44px;
  width:max-content;
  animation:homeLogoMarquee 28s linear infinite;
}
.home-renewal .logo-track img{
  height:38px;
  width:auto;
  filter:grayscale(1);
  opacity:.85;
}
.home-renewal .logo-track img:hover{
  filter:none;
  opacity:1;
}
@keyframes homeLogoMarquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* =================================================
   Responsive
================================================= */
/* 태블릿(768~1024px) — h1 크기 줄여서 한 줄 유지 */
@media (max-width: 1024px) and (min-width: 768px) {
  .home-renewal .hero-text h1        { font-size: 36px; }
  .home-renewal .hero-text .hero-h1-light { font-size: 28px; }
}

/* Nebula — 모바일 단일 컬럼 */
@media (max-width: 767px) {
  .home-renewal .nebula-dark .nebula-wrap { grid-template-columns: 1fr; gap: 18px; }
  .home-renewal .nebula-dark .nebula-right { grid-template-columns: 1fr; gap: 14px; }
  .home-renewal .nebula-dark .nebula-title { font-size: 28px; }
  .home-renewal .nebula-dark .nebula-logo { width: 56px; margin-bottom: 12px; }
  .home-renewal .nebula-dark .nebula-card-top { max-height: none; }
}
/* 그리드/앨라이/케이스/히어로 — 모바일 단일 컬럼 */
@media (max-width: 767px){
  .home-renewal{ --container-pad:24px; }
  .home-renewal .grid-3{ grid-template-columns:1fr; }
  .home-renewal .ally-grid{ grid-template-columns:1fr; }
  .home-renewal .case-card{ flex:0 0 100%; }
  .home-renewal .case-nav{ display:none; }
  .home-renewal .hero-grid--split{ grid-template-columns:1fr; gap:18px; }
  .home-renewal .hero-slide.is-split::before{ width:auto; right:0; }
  .home-renewal .hero-right{ display:none; }  /* 모바일에서 영상 영역 숨김 */
}

/* 모바일 히어로 / 섹션 공통 */
@media (max-width: 767px){
  .home-renewal{ --container-pad:18px; }
  .home-renewal .section{ padding:68px 0; }
  .home-renewal .hero-slide{
    min-height: calc(100svh - var(--header-h) - 110px);
    min-height: calc(100vh  - var(--header-h) - 110px);
    align-items:flex-start;
  }
  .home-renewal .hero-text h1{ font-size:28px; }
  .home-renewal .hero-text p{ font-size:14px; }
  .home-renewal .hero-grid{ padding-top:34px; padding-bottom:34px; }
  .home-renewal .hero-nav{ width:40px; height:40px; display:none !important; }
  .home-renewal .hero-right{ min-height:220px; }
  .home-renewal .logo-track img{ height:24px; }
  .home-renewal .logo-track{ gap:28px; }       /* 로고 간격도 모바일에 맞게 축소 */
}
@media (prefers-reduced-motion: reduce){
  .home-renewal .logo-track{ animation:none; }
  .home-renewal .case-track{ transition:none; }
}

/* =================================================
   반응형 줄바꿈 — PC에서만 <br class="pc-br"> 적용
   태블릿·모바일에서는 숨겨서 자연스럽게 흐르도록
================================================= */
/* hero-br: PC(1025px+)에서만 줄바꿈, 태블릿·모바일은 인라인으로 자연스럽게 흐름 */
.hero-br { display: block; }
@media (max-width: 1024px) {
  .hero-br { display: inline; }
}

@media (max-width: 767px) {
  .pc-br { display: none; }          /* 모바일: 줄바꿈 제거, 자연스럽게 흐름 */
}

/* =================================================
   p 태그 — 한국어 띄어쓰기 기준 줄바꿈
   word-break: keep-all → 단어 중간에서 잘리지 않고
   반드시 공백(띄어쓰기) 위치에서만 줄바꿈
================================================= */
.home-renewal p {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* =================================================
   공지 배너 — 자세히 보기 텍스트 스타일
================================================= */
.notice-bar-link {
  color: #3b9ac9;
  font-size: 0.85em;
  margin-left: 6px;
}