/* ===================================================================
   theme/47 — NOVA STUDIO (스타트업 비즈니스 / 웹·디자인 제작 스튜디오)
   본문은 Tailwind utility 중심, 이 파일은 예외 보조(그리드/풀블리드/히어로/슬라이더/CDN한계 보정)만.
   =================================================================== */

:root{
  --dark:#0b0b14;        /* 본문 다크 배경 */
  --ink:#15151f;         /* 카드 다크 */
  --color:#6c5ce7;       /* 브랜드 포인트(바이올렛) */
  --color-2:#22d3ee;     /* 보조 포인트(시안) */
  --accent:#a78bfa;      /* 하이라이트 */
  --line:#23232f;
}

html{ font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; scroll-behavior:smooth; }
body{ word-break:keep-all; }
.font-display{ font-family:'Inter','Pretendard Variable',sans-serif; letter-spacing:-.02em; }

/* 컨테이너 — area(중앙 제한) */
.theme-area{ width:100%; max-width:1280px; margin-inline:auto; padding-inline:1.25rem; }
@media (max-width:480px){ .theme-area{ padding-inline:1rem; } }

/* 풀블리드 다크 밴드 */
.theme-band{ background:
   radial-gradient(120% 140% at 12% 0%, rgba(108,92,231,.35), transparent 55%),
   radial-gradient(120% 140% at 90% 100%, rgba(34,211,238,.25), transparent 50%),
   var(--dark); }

/* 아이콘 정렬 고정 (밀림 방지) — Lucide/FA 공통 */
[data-lucide]{ width:1.25rem; height:1.25rem; stroke-width:2; display:inline-block; vertical-align:middle; flex:0 0 auto; }
.icon-btn [data-lucide]{ width:1.15rem; height:1.15rem; }
i.fa-solid,i.fa-regular,i.fa-brands{ line-height:1; vertical-align:middle; display:inline-flex; align-items:center; justify-content:center; }

/* ===================== 헤더 ===================== */
.site-header{ transition:background .35s ease, box-shadow .35s ease, border-color .35s ease; }
.site-header.is-solid{ background:rgba(11,11,20,.86); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08); box-shadow:0 .5rem 2rem rgba(0,0,0,.35); }
.nav-link{ position:relative; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:linear-gradient(90deg,var(--color),var(--color-2)); transition:width .3s ease; }
.nav-link:hover::after{ width:100%; }
.nav-item:hover .nav-drop{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-drop{ opacity:0; visibility:hidden; transform:translateY(8px); transition:all .25s ease; }

/* ===================== 히어로 풀스크린 슬라이더 ===================== */
.hero{ position:relative; height:100svh; min-height:560px; background:var(--dark); color:#fff; overflow:hidden; }
.hero-swiper, .hero-swiper .swiper-wrapper, .hero-swiper .swiper-slide{ height:100%; }
.hero-slide{ position:relative; display:flex; align-items:center; }
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.08); transition:transform 7s ease; }
.swiper-slide-active .hero-bg{ transform:scale(1); }
.hero-scrim{ position:absolute; inset:0;
  background:
   linear-gradient(180deg, rgba(11,11,20,.55) 0%, rgba(11,11,20,.35) 35%, rgba(11,11,20,.78) 100%),
   radial-gradient(80% 90% at 20% 30%, rgba(108,92,231,.28), transparent 60%); }
.hero-copy{ opacity:0; transform:translateY(28px); }
.swiper-slide-active .hero-copy{ opacity:1; transform:translateY(0); transition:all .9s .25s cubic-bezier(.2,.7,.2,1); }

/* 히어로 우측 세로 번호 페이지네이션 */
.hero-pager{ position:absolute; right:max(1.5rem,calc((100vw - 1280px)/2 + 1.25rem)); top:50%; transform:translateY(-50%); z-index:20; display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.hero-pager .num{ font-family:'Inter',sans-serif; font-weight:800; font-size:.8rem; color:rgba(255,255,255,.45); letter-spacing:.05em; cursor:pointer; transition:color .25s; background:none; }
.hero-pager .num.is-active{ color:#fff; }
.hero-pager .bar{ width:1px; height:46px; background:rgba(255,255,255,.25); position:relative; overflow:hidden; }
.hero-pager .bar > i{ position:absolute; top:0; left:0; width:100%; height:0; background:linear-gradient(180deg,var(--color),var(--color-2)); }
.hero-arrows{ position:absolute; right:max(1.5rem,calc((100vw - 1280px)/2 + 1.25rem)); bottom:2.2rem; z-index:20; display:flex; gap:.5rem; }
.hero-arrows button{ width:3rem; height:3rem; border:1px solid rgba(255,255,255,.3); border-radius:999px; display:grid; place-items:center; color:#fff; transition:all .25s; }
.hero-arrows button:hover{ background:#fff; color:var(--dark); border-color:#fff; }
.hero-scroll{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:20; color:rgba(255,255,255,.7); display:flex; flex-direction:column; align-items:center; gap:.35rem; font-size:.7rem; letter-spacing:.25em; }
.hero-scroll .dot{ width:1px; height:34px; background:rgba(255,255,255,.4); position:relative; overflow:hidden; }
.hero-scroll .dot::after{ content:''; position:absolute; left:0; top:-50%; width:100%; height:50%; background:#fff; animation:scrolldot 1.8s ease-in-out infinite; }
@keyframes scrolldot{ 0%{ top:-50%; } 100%{ top:100%; } }
@media (max-width:1340px){ .hero-pager,.hero-arrows{ right:1.25rem; } }
@media (max-width:767px){ .hero-pager{ right:.85rem; gap:.6rem; } .hero-pager .bar{ height:32px; } .hero-arrows{ display:none; } }

/* VIEW MORE 고스트 버튼 */
.btn-ghost{ display:inline-flex; align-items:center; gap:.75rem; height:3.4rem; padding-inline:1.8rem; border:1px solid rgba(255,255,255,.45); border-radius:999px; font-weight:800; letter-spacing:.02em; color:#fff; overflow:hidden; position:relative; transition:color .3s; }
.btn-ghost > span,.btn-ghost > i{ position:relative; z-index:1; }
.btn-ghost::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--color),var(--color-2)); transform:translateX(-101%); transition:transform .4s cubic-bezier(.2,.7,.2,1); z-index:0; }
.btn-ghost:hover{ color:#fff; border-color:transparent; }
.btn-ghost:hover::before{ transform:translateX(0); }
.btn-ghost:active{ transform:translateY(1px); }

/* 채움 버튼 */
.btn-fill{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:3.4rem; padding-inline:1.7rem; border-radius:999px; font-weight:800; color:#fff; background:linear-gradient(90deg,var(--color),#8b7bff); box-shadow:0 .8rem 1.6rem rgba(108,92,231,.4); transition:transform .2s, box-shadow .2s; }
.btn-fill:hover{ transform:translateY(-2px); box-shadow:0 1.1rem 2rem rgba(108,92,231,.55); }
.btn-fill:active{ transform:translateY(0); }

/* ===================== 섹션 라벨 ===================== */
.eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-family:'Inter',sans-serif; font-weight:800; letter-spacing:.28em; font-size:.72rem; color:var(--color); text-transform:uppercase; }
.eyebrow::before{ content:''; width:1.8rem; height:1px; background:var(--color); }

/* ===================== 서비스 카드 ===================== */
.svc-card{ position:relative; padding:2.2rem 1.8rem; border:1px solid var(--line); border-radius:1.25rem; background:var(--ink); overflow:hidden; transition:transform .3s, border-color .3s; }
.svc-card::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 100% at 50% 0%, rgba(108,92,231,.16), transparent 60%); opacity:0; transition:opacity .3s; }
.svc-card:hover{ transform:translateY(-8px); border-color:rgba(108,92,231,.6); }
.svc-card:hover::after{ opacity:1; }
.svc-ico{ width:3.4rem; height:3.4rem; border-radius:1rem; display:grid; place-items:center; background:linear-gradient(135deg,rgba(108,92,231,.25),rgba(34,211,238,.18)); color:var(--accent); position:relative; z-index:1; }
.svc-ico [data-lucide]{ width:1.6rem; height:1.6rem; }
.svc-card > *{ position:relative; z-index:1; }

/* ===================== 프로세스 ===================== */
.proc-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; }
@media (min-width:768px){ .proc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .proc-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.proc-card{ position:relative; padding:2rem 1.6rem; border-radius:1.25rem; border:1px solid var(--line); background:var(--ink); transition:transform .3s,border-color .3s; }
.proc-card:hover{ transform:translateY(-6px); border-color:rgba(34,211,238,.5); }
.proc-no{ font-family:'Inter',sans-serif; font-weight:800; font-size:2.4rem; line-height:1; background:linear-gradient(135deg,var(--color),var(--color-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===================== 포트폴리오 ===================== */
.pf-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.1rem; }
@media (min-width:640px){ .pf-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .pf-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pf-item{ position:relative; border-radius:1.25rem; overflow:hidden; aspect-ratio:4/3; min-width:0; background:var(--ink); }
.pf-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.pf-item:hover img{ transform:scale(1.08); }
.pf-cover{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; background:linear-gradient(180deg,transparent 35%, rgba(11,11,20,.88)); opacity:0; transform:translateY(10px); transition:all .35s; }
.pf-item:hover .pf-cover{ opacity:1; transform:translateY(0); }
.pf-item.hide{ display:none; }
.pf-filter button{ transition:all .25s; }
.pf-filter button.is-active{ background:linear-gradient(90deg,var(--color),var(--color-2)); color:#fff; border-color:transparent; }

/* ===================== 섹션 그리드 (Tailwind4 CDN의 arbitrary fr-track 버그 우회 — minmax(0,1fr) 명시) ===================== */
.grid-about,.grid-notice,.grid-video,.grid-footer{ display:grid; grid-template-columns:minmax(0,1fr); }
.grid-about{ gap:3rem; align-items:center; }
.grid-notice{ gap:3rem; }
.grid-video{ gap:3rem; align-items:center; }
.grid-footer{ gap:2.5rem; }
@media (min-width:1280px){
  .grid-about{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:4rem; }
  .grid-notice{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:4rem; }
  .grid-video{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
  .grid-footer{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); }
}

/* ===================== 카운터 ===================== */
.count-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
@media (min-width:768px){ .count-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ===================== 영상 섹션 ===================== */
.video-frame{ position:relative; border-radius:1.5rem; overflow:hidden; aspect-ratio:16/9; background:var(--ink); border:1px solid var(--line); }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:5rem; height:5rem; border-radius:999px; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); display:grid; place-items:center; color:#fff; border:1px solid rgba(255,255,255,.4); transition:transform .25s,background .25s; cursor:pointer; }
.video-play:hover{ transform:translate(-50%,-50%) scale(1.08); background:var(--color); }

/* ===================== 공지/탭 ===================== */
.tab-btn{ position:relative; padding:.6rem .2rem; font-weight:800; color:#7a7a8c; transition:color .25s; }
.tab-btn.is-active{ color:#fff; }
.tab-btn.is-active::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--color),var(--color-2)); }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }
.news-row{ display:flex; align-items:center; gap:1rem; padding:1.1rem .25rem; border-bottom:1px solid var(--line); transition:padding .25s,color .25s; }
.news-row:hover{ padding-left:.75rem; color:#fff; }
.news-row:hover .news-title{ color:var(--accent); }
.news-title{ min-width:0; }   /* flex 자식 truncate 동작 보장(280/320 overflow 방지) */

/* ===================== 폼 ===================== */
.form-input{ width:100%; height:3.25rem; padding:0 1rem; border-radius:.85rem; background:rgba(255,255,255,.04); border:1px solid var(--line); color:#fff; transition:border-color .25s,background .25s; }
.form-input::placeholder{ color:#6b6b7a; }
.form-input:focus{ outline:none; border-color:var(--color); background:rgba(108,92,231,.08); }
textarea.form-input{ height:auto; padding:.9rem 1rem; }

/* ===================== 모바일 드로어 ===================== */
.drawer{ transition:opacity .3s; }
.drawer-panel{ transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.drawer.is-open .drawer-panel{ transform:translateX(0); }
.drawer-acc-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.drawer-acc.is-open .drawer-acc-body{ max-height:22rem; }
.drawer-acc.is-open .drawer-acc-chevron{ transform:rotate(180deg); }
.drawer-acc-chevron{ transition:transform .3s; }

/* ===================== 팝업 ===================== */
.popup-wrap{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:1.25rem; background:rgba(7,7,12,.66); backdrop-filter:blur(4px); }
.popup-wrap.hidden{ display:none !important; }   /* Tailwind .hidden와 동일 특이도 충돌 방지 */
.popup-card{ position:relative; width:100%; max-width:24rem; border-radius:1.5rem; overflow:hidden; background:var(--ink); border:1px solid var(--line); box-shadow:0 2rem 4rem rgba(0,0,0,.5); }

/* TOP 버튼 */
#topBtn{ transition:opacity .3s, visibility .3s, transform .3s; }
#topBtn.show{ opacity:1; visibility:visible; }

/* AOS 보정 — CDN stale 대비 (script.js IO 폴백과 함께) */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* 가로 overflow 가드 */
img,video,iframe{ max-width:100%; }