/*
Theme Name: GNS SIGN
Theme URI: https://space.gnssign.com
Author: GNS SIGN
Description: 지앤에스(GNS SIGN) LED실내간판, 전광판, 상가간판 시공 전문 사이트 테마
Version: 1.0
Text Domain: gnssign
*/

:root{
  --bg:#FAF9F6;
  --bg-sub:#E6E6E6;
  --accent:#6366F1;
  --accent2:#FF3366;
  --text:#111827;
  --radius-card:12px;
  --gap-mobile:24px;
  --section-gap:48px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}

h1,h2,h3,h4{font-weight:700;line-height:1.3;margin:0}
h1{font-size:29px}
h2{font-size:22px}
h3{font-size:18px}
h4{font-size:16px}
p{margin:0 0 16px}

@media (min-width:768px){
  h1{font-size:48px}
  h2{font-size:34px}
  h3{font-size:22px}
}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@media (min-width:768px){ .wrap{padding:0 40px} }

.section{padding:48px 0}
@media (min-width:768px){ .section{padding:96px 0} }

.section-sub{background:var(--bg-sub)}

.section-head{margin-bottom:32px}
.section-head .title{font-weight:700}
.section-head .subtitle{font-weight:400;color:#4B5563;margin-top:8px;font-size:16px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;border-radius:8px;
  font-weight:700;font-size:16px;white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-accent{background:var(--accent2);color:#fff}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--text)}
.cta-buttons{display:flex;gap:12px;flex-wrap:wrap}

/* cards */
.card{border-radius:var(--radius-card);overflow:hidden;background:#fff}
.card-body{padding:16px}
.card-img{aspect-ratio:4/3;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}

/* icon */
.icon{width:24px;height:24px;flex:none}

/* fade-in on scroll */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.fade-in.is-visible{opacity:1;transform:none}

/* grid */
.grid-2{display:grid;grid-template-columns:1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr);gap:24px}
}

/* portfolio card hover overlay */
.case-card{position:relative}
.case-card .overlay{
  position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,24,39,.75),rgba(17,24,39,0) 60%);
  display:flex;align-items:flex-end;padding:16px;opacity:0;transition:opacity .3s ease;
}
.case-card .overlay .title{color:#fff;transform:translateY(10px);transition:transform .3s ease}
.case-card:hover .overlay,.case-card:focus-within .overlay{opacity:1}
.case-card:hover .overlay .title,.case-card:focus-within .overlay .title{transform:translateY(0)}
.link-indicator{
  position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
}

/* mobile swipe slider (Pain Points / Why Us / About strengths) */
.swipe-slider{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  -ms-overflow-style:none;scrollbar-width:none;
}
.swipe-slider::-webkit-scrollbar{display:none}
.swipe-slider .card{flex:0 0 100%;scroll-snap-align:start}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.slider-dots .dot{width:8px;height:8px;border-radius:50%;background:var(--bg-sub)}
.slider-dots .dot.active{background:var(--accent)}
@media (min-width:768px){
  .swipe-slider{overflow-x:visible;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .swipe-slider .card{flex:auto}
  .slider-dots{display:none}
}

/* header */
.site-header{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--bg-sub)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.site-header .logo{font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px}
.site-header .logo img{height:32px;width:auto}
/* pc-nav/hamburger는 wp_is_mobile() 서버사이드 분기로 둘 중 하나만 소스에 출력되므로 뷰포트 기준 숨김 처리는 하지 않는다 */
.pc-nav{display:flex;align-items:center;gap:32px;margin-left:auto;margin-right:24px}
.pc-nav a{font-weight:700}
.hamburger-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.hamburger-btn span,.hamburger-btn span::before,.hamburger-btn span::after{
  content:"";display:block;width:24px;height:2px;background:var(--text);position:relative;transition:.3s;
}
.hamburger-btn span::before{position:absolute;top:-8px}
.hamburger-btn span::after{position:absolute;top:8px}

.mobile-menu{
  max-height:0;overflow:hidden;transition:max-height .35s ease;background:var(--bg);
  border-bottom:1px solid var(--bg-sub);
}
.mobile-menu.open{max-height:320px}
.mobile-menu ul{padding:8px 24px 16px}
.mobile-menu li{padding:12px 0;border-bottom:1px solid var(--bg-sub);display:flex;align-items:center;gap:12px;font-weight:700}

/* hero */
.hero{position:relative;color:#fff;padding:64px 0}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero .overlay{position:absolute;inset:0;background:rgba(17,24,39,.35);z-index:1}
.hero .wrap{position:relative;z-index:2}
@media (max-width:767px){
  .hero{color:var(--text);padding:0 0 32px}
  .hero .overlay{display:none}
  .hero-bg{position:static;aspect-ratio:4/3}
  .hero .wrap{padding-top:24px}
}
.hero .copy{margin:16px 0 24px;font-size:16px}

/* pain point / faq icon+text row */
.icon-row{display:flex;gap:16px;align-items:flex-start}

/* faq accordion */
.faq-item{border-bottom:1px solid var(--bg-sub)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-weight:700;width:100%;text-align:left}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding-bottom:20px}
.faq-item.open .faq-a{max-height:400px}
.faq-item .faq-q .plus{transition:transform .3s ease}
.faq-item.open .faq-q .plus{transform:rotate(45deg)}

/* footer */
.site-footer{background:var(--bg-sub);padding:48px 0}
.site-footer .info{margin-bottom:24px}
.site-footer .info p{margin:0 0 4px;font-size:14px;color:#4B5563}
.site-footer nav ul{display:flex;flex-wrap:wrap;gap:16px}
.site-footer nav a{display:flex;align-items:center;gap:6px;font-weight:700}

/* fullscreen image section */
.fullscreen-img{width:100%}
.fullscreen-img img{width:100%;height:auto}

/* 세부페이지 공통 여백 유틸리티 (인라인 스타일 대체) */
.pt-32{padding-top:32px}
.mt-12{margin-top:12px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.mb-24{margin-bottom:24px}
.mb-32{margin-bottom:32px}
.my-16{margin:16px 0}
.my-16-24{margin:16px 0 24px}
.my-16-32{margin:16px 0 32px}
.my-12-20{margin:12px 0 20px}
.py-6{padding:6px 0}
.py-8{padding:8px 0}
.shaded{background:var(--bg-sub)}
.align-center{align-items:center}
.center{text-align:center}
.relative{position:relative}
.cta-box{margin-top:48px;padding:32px 24px}

/* consult CTA section (before footer) */
.consult-cta{background:var(--text);color:#fff;text-align:center}
.consult-cta .title{color:#fff}
.consult-cta .subtitle{color:#D1D5DB}
.consult-cta .cta-buttons{justify-content:center;margin-top:24px}