/* ===========================================================
   WEBIS CLEAN (theme/26) — 보조 CSS
   본문은 Tailwind utility 중심. 여기엔 브랜드 토큰/풀블리드/
   grid 함정 보정/슬라이더·탭 보조만 둔다.
   =========================================================== */

/* 브랜드 색은 index.html의 @theme 블록(--color-ink/brand/...)에 등록되어
   Tailwind가 bg-ink/80, text-ink/55, bg-brand-dark 등 /opacity 변형까지 생성한다.
   여기선 폼/슬라이더/탭 등 비색상 보조 CSS만 둔다. */
:root{
  --brand:        #1f9d87;
  --brand-dark:   #177d72;
  --ink:          #1a1a2e;
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* Pretendard 기본 폰트 */
.font-pretendard{
  font-family:"Pretendard Variable",Pretendard,"Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}

/* ---- full-bleed 컨테이너 (좌우 배경 확장) ---- */
.full{ width:100%; }

/* ---- Tailwind4 CDN grid 함정 보정: 단일 1fr → minmax(0,1fr) ---- */
#serviceGrid,
#portfolioGrid{ grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:640px){
  #serviceGrid,#portfolioGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1280px){
  #serviceGrid,#portfolioGrid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
#serviceGrid > *, #portfolioGrid > *{ min-width:0; }

/* contact 2컬럼 명시 */
@media (min-width:1024px){
  #contact .grid.ws-md\:grid-cols-\[1\.4fr_1fr\]{
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  }
}

/* ---- 폼 입력 ---- */
.ws-input{
  width:100%;
  border:1px solid #e3e6ec;
  border-radius:.75rem;
  padding:.8rem 1rem;
  font-size:.95rem;
  color:var(--ink);
  background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.ws-input::placeholder{ color:#9aa1ad; }
.ws-input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(31,157,135,.15);
}
select.ws-input{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa1ad' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem;
}

/* ---- 푸터 패밀리사이트 셀렉트 ---- */
.ws-fselect{
  width:100%;
  appearance:none; -webkit-appearance:none;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:.625rem;
  color:rgba(255,255,255,.75);
  font-size:.875rem;
  padding:.7rem 2.25rem .7rem 1rem;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.ws-fselect:hover{ border-color:var(--brand); }
.ws-fselect:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(31,157,135,.2); }
.ws-fselect option{ color:#1a1a2e; background:#fff; }

/* ---- 진입 팝업(공지/이벤트) PC·모바일 ---- */
#introPopup{ position:fixed; inset:0; z-index:80; display:none; }
#introPopup.is-open{ display:flex; align-items:center; justify-content:center; }
#introPopup .pop-dim{ position:absolute; inset:0; background:rgba(26,26,46,.6); backdrop-filter:blur(2px); }
#introPopup .pop-card{
  position:relative; width:88%; max-width:380px;
  max-height:90vh; overflow:hidden auto;
  background:#fff; border-radius:1.25rem;
  box-shadow:0 24px 60px rgba(26,26,46,.35);
  animation:popIn .35s ease;
}
@keyframes popIn{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }

/* ---- 포트폴리오 필터 탭 ---- */
.pf-tab{
  border-radius:9999px;
  padding:.5rem 1.1rem;
  font-size:.875rem;
  font-weight:600;
  color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  transition:all .2s;
  cursor:pointer;
}
.pf-tab:hover{ color:#fff; background:rgba(255,255,255,.14); }
.pf-tab.is-active{ color:#fff; background:var(--brand); border-color:var(--brand); }

.pf-item{ transition:opacity .35s, transform .35s; }
.pf-item.is-hidden{ display:none; }

/* ---- Swiper(리뷰) 보정: 슬라이드 높이 정렬 ---- */
.reviewSwiper .swiper-slide{ height:auto; display:flex; }
.reviewSwiper .swiper-pagination-bullet{ background:var(--brand); opacity:.3; }
.reviewSwiper .swiper-pagination-bullet-active{ opacity:1; }

/* ---- 모바일 메뉴 패널 ----
   Tailwind v4 translate-x-full은 transform이 아닌 translate 속성을 쓰므로
   충돌 방지를 위해 패널 이동은 transform으로 일원화한다. */
#mobilePanel{ transform:translateX(100%); transition:transform .3s ease; }
#mobileMenu.is-open{ display:block; }
#mobileMenu.is-open #mobilePanel{ transform:translateX(0); }
body.menu-open{ overflow:hidden; }

/* ---- 헤더 스크롤 상태 ---- */
#header.is-scrolled{ box-shadow:0 6px 24px rgba(26,26,46,.08); }

/* ---- AOS CDN stale 대비: 등장 강제 보정 클래스 ---- */
.aos-init.aos-animate{ opacity:1; }