/*
Theme Name: GNS SIGN
Theme URI: https://dispaly.gnssign.com
Author: GNS SIGN
Description: 지앤에스(GNS SIGN) LED간판/LED전광판/LED디스플레이 시공 전문 업체 사이트 테마
Version: 1.0
Text Domain: gns-sign
*/

:root{
  --bg:#FEFDFB;
  --bg-sub:#D5D5D5;
  --accent-green:#84CC16;
  --accent-amber:#F59E0B;
  --text:#0F172A;
  --gutter:24px;
  --section-gap:48px;
  --radius:12px;
  --touch:44px;
  --icon:24px;
  --btn-pad-x:20px;
  --container:1160px;
}

*,*::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:inherit;background:none;border:0;cursor:pointer;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.3}
h1{font-size:29px}
h2{font-size:22px}
h3{font-size:18px}
h4{font-size:16px}
p{margin:0}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-gap) 0}
.section-sub{margin-top:8px;color:#475569;font-weight:400}
.section-head{margin-bottom:32px}
.section-head .eyebrow{display:inline-block;font-size:13px;font-weight:700;color:var(--accent-amber);margin-bottom:10px;letter-spacing:.02em}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Buttons ---------- */
.cta-group{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--touch);
  padding:0 var(--btn-pad-x);
  border-radius:999px;
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
  border:2px solid transparent;
}
.btn-primary{background:var(--accent-green);color:var(--text)}
.btn-outline{background:transparent;border-color:var(--text);color:var(--text)}
.btn-sm{min-height:40px;font-size:15px;padding:0 16px}

/* ---------- Icons ---------- */
.icon{width:var(--icon);height:var(--icon);flex:0 0 var(--icon);display:inline-block}
.icon-badge{
  width:52px;height:52px;border-radius:14px;
  background:var(--text);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.icon-badge .icon{color:var(--accent-green)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--bg-sub);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.logo .icon{width:34px;height:34px;flex:0 0 34px}
.pc-nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.pc-nav ul{display:flex;gap:24px}
.pc-nav a{font-weight:600;display:flex;align-items:center;gap:6px}
.pc-nav .btn{margin-left:8px}

.hamburger-btn{
  width:var(--touch);height:var(--touch);
  display:flex;align-items:center;justify-content:center;
  margin-left:auto;
}
.hamburger-drawer{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
  background:var(--bg);
  border-top:1px solid var(--bg-sub);
}
.hamburger-drawer.is-open{max-height:320px}
.hamburger-drawer ul{padding:8px var(--gutter) 20px}
.hamburger-drawer li{border-bottom:1px solid var(--bg-sub)}
.hamburger-drawer a{display:flex;align-items:center;gap:10px;min-height:var(--touch);font-weight:600}

/* ---------- Hero ---------- */
.hero{position:relative;color:var(--text);overflow:hidden}
.hero-pc{
  background-size:cover;background-position:center;
  padding:96px 0;
}
.hero-pc::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(254,253,251,.72),rgba(254,253,251,.5));
  z-index:0;
}
.hero-pc .container{position:relative;z-index:1;max-width:720px}
.hero-mobile-img{width:100%;height:auto}
.hero-mobile-body{padding:32px var(--gutter) var(--section-gap)}
.hero .eyebrow{display:block;font-weight:700;color:var(--accent-amber);margin-bottom:12px}
.hero h1{margin-bottom:16px}
.hero p{margin-bottom:24px;color:#334155}

/* ---------- Card grid (cases / services) ---------- */
.card-grid{display:grid;grid-template-columns:1fr;gap:var(--gutter)}
.media-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  display:block;background:var(--bg-sub);
}
.media-card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.media-card .overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,23,42,0) 40%,rgba(15,23,42,.82) 100%);
  display:flex;align-items:flex-end;padding:16px;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease;
}
.media-card:hover .overlay,.media-card:focus-visible .overlay{opacity:1;transform:translateY(0)}
.media-card .overlay-title{color:#fff;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}
.media-card .link-indicator{
  width:32px;height:32px;border-radius:50%;flex:0 0 32px;
  background:var(--accent-green);
  display:flex;align-items:center;justify-content:center;
}
.media-card .link-indicator .icon{width:16px;height:16px;color:var(--text)}
.more-link{margin-top:32px;text-align:center}

/* ---------- Pain points / Why us / About (swipe cards) ---------- */
.swipe-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  gap:var(--gutter);
  scrollbar-width:none;-ms-overflow-style:none;
  margin:0 calc(var(--gutter) * -1);
  padding:0 var(--gutter);
}
.swipe-track::-webkit-scrollbar{display:none}
.swipe-card{
  flex:0 0 100%;scroll-snap-align:start;
  background:#fff;border:1px solid var(--bg-sub);border-radius:var(--radius);
  padding:24px;
}
.swipe-card p{color:#475569}
.swipe-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.swipe-dots button{width:8px;height:8px;border-radius:50%;background:var(--bg-sub)}
.swipe-dots button.is-active{background:var(--accent-green);width:20px;border-radius:6px;transition:width .25s ease}

/* ---------- Fullscreen image ---------- */
.fullscreen-media{width:100%;position:relative;overflow:hidden;aspect-ratio:16/9}
.fullscreen-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  animation:fsCrossfade 12s infinite, fsZoom 12s infinite;
  animation-timing-function:ease-in-out, linear;
}
.fullscreen-media img:nth-child(1){animation-delay:0s, 0s}
.fullscreen-media img:nth-child(2){animation-delay:4s, 4s}
.fullscreen-media img:nth-child(3){animation-delay:8s, 8s}
@keyframes fsCrossfade{
  0%{opacity:0}
  8%{opacity:1}
  30%{opacity:1}
  38%{opacity:0}
  100%{opacity:0}
}
@keyframes fsZoom{
  0%{transform:scale(1)}
  100%{transform:scale(1.12)}
}
@media (prefers-reduced-motion:reduce){
  .fullscreen-media img{animation:none;opacity:1}
}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--bg-sub)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:18px 0;min-height:var(--touch);
  text-align:left;font-weight:700;font-size:17px;
}
.faq-q .icon{transition:transform .25s ease;flex:0 0 var(--icon)}
.faq-item.is-open .faq-q .icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.is-open .faq-a{max-height:400px}
.faq-a p{padding:0 0 20px;color:#475569}

/* ---------- Consult CTA (above footer) ---------- */
.consult-cta{background:var(--text);color:#fff;text-align:center}
.consult-cta h2{color:#fff}
.consult-cta .section-sub{color:#cbd5e1}
.consult-cta .cta-group{justify-content:center;margin-top:24px}
.consult-cta .btn-outline{border-color:#fff;color:#fff}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-sub);padding:40px 0}
.footer-info p{margin-bottom:6px;color:#334155;font-size:14px}
.footer-links{display:flex;gap:20px;margin-top:20px;flex-wrap:wrap}
.footer-links a{display:flex;align-items:center;gap:6px;font-weight:600;min-height:var(--touch)}

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

/* ---------- Breakdown grids (about/pain/why on desktop) ---------- */
.grid-3{display:grid;grid-template-columns:1fr;gap:var(--gutter)}

/* ---------- Image + text blocks ---------- */
.media-text{display:flex;flex-direction:column;gap:16px}
.media-text img{border-radius:var(--radius)}

/* ---------- Case/service detail layout helpers ---------- */
.detail-banner{width:100%;position:relative}
.detail-banner img{width:100%;aspect-ratio:16/9;object-fit:cover}
.detail-banner .detail-banner-caption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(15,23,42,0),rgba(15,23,42,.75));
  padding:32px var(--gutter) 24px;color:#fff;
}
.detail-banner .detail-banner-caption h1{color:#fff}
.prose p{margin-bottom:16px;color:#334155}
.prose{margin-bottom:32px}
.check-list{display:flex;flex-direction:column;gap:12px;margin:24px 0}
.check-list li{display:flex;align-items:flex-start;gap:12px}
.check-list .icon{color:var(--accent-green);flex:0 0 var(--icon);margin-top:2px}
.two-col{display:grid;grid-template-columns:1fr;gap:var(--gutter);margin-bottom:32px}
.icon-list-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:24px 0}
.icon-list-grid .icon-list-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--bg-sub);border-radius:var(--radius);padding:14px 16px}
.icon-list-grid .icon-list-item .icon{color:var(--accent-green);flex:0 0 var(--icon)}

/* ---------- Desktop ---------- */
@media (min-width:768px){
  :root{--gutter:40px;--section-gap:96px}
  body{font-size:17px}
  h1{font-size:52px}
  h2{font-size:34px}
  h3{font-size:20px}
  .pc-nav{display:flex}
  .mobile-nav{display:none}
  .card-grid{grid-template-columns:repeat(3,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .swipe-track{
    overflow:visible;display:grid;grid-template-columns:repeat(3,1fr);
    margin:0;padding:0;
  }
  .swipe-card{flex:auto}
  .swipe-dots{display:none}
  .media-text{flex-direction:row;align-items:center}
  .media-text img{flex:1}
  .media-text .media-text-body{flex:1}
  .hero-mobile-only{display:none}
  .two-col{grid-template-columns:1fr 1fr}
  .icon-list-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .hero-pc-only{display:none}
}