/* =========================================================
   theme/43 — 빌딩iN 건물종합관리 (buildingin 원본 개별 흡수)
   보조 CSS: 본문은 Tailwind utility 중심, 여기는 예외 보강만
   (브랜드색·full-bleed·오버레이·마퀴·드로어·팝업·아코디언·리빌)
   ========================================================= */

:root{
  --color:   #1e5aa8;   /* 브랜드 프라이머리 (rgb 30,90,168) */
  --color-d: #16467f;   /* hover/active */
  --band:    #2160c4;   /* 밝은 블루 밴드 */
  --dark:    #13254a;   /* 네이비: 탑바·푸터·히어로 오버레이 */
  --accent:  #74a9e6;   /* 다크 위 라벨용 라이트 블루 */
  --soft:    #f6f8fc;   /* 옅은 회청 배경 */
  --line:    #e7ecf3;   /* 경계선 */
}

html{font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;}
body{word-break:keep-all;}

/* ---------- 컨테이너 ---------- */
.theme-area{ width:100%; max-width:75rem; margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:768px){ .theme-area{ padding-inline:2rem; } }

/* grid 안전판 (Tailwind4 CDN arbitrary grid 폭발 회피) */
.g-minmax > *{ min-width:0; }

/* ---------- 헤더 ---------- */
.nav-link{ position:relative; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-.45rem; width:0; height:2px;
  background:var(--color); transition:width .3s ease; }
.nav-link:hover::after{ width:100%; }

/* ---------- 히어로 ---------- */
.hero{
  position:relative; isolation:isolate; color:#fff;
  background:#0c1730 center/cover no-repeat;
  background-image:linear-gradient(180deg,rgba(11,21,46,.80),rgba(11,21,46,.60) 45%,rgba(11,21,46,.90)),
    url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1600&q=70&auto=format&fit=crop");
}
.hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 80% 10%,rgba(33,96,196,.30),transparent 60%); }
.hero-chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.05rem; border-radius:999px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  font-weight:800; font-size:.9rem; backdrop-filter:blur(4px); transition:.25s; white-space:nowrap; }
.hero-chip:hover{ background:rgba(255,255,255,.20); transform:translateY(-2px); }
.hero-chip i,.hero-chip svg{ width:1.05rem; height:1.05rem; color:var(--accent); }

/* 버튼 공통 */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:800; border-radius:999px; transition:transform .2s,box-shadow .2s,background .2s,color .2s;
  white-space:nowrap; cursor:pointer; }
.btn i,.btn svg{ width:1.15rem; height:1.15rem; }
.btn-primary{ background:var(--color); color:#fff; box-shadow:0 .9rem 1.8rem rgba(30,90,168,.34); }
.btn-primary:hover{ background:var(--color-d); transform:translateY(-3px); box-shadow:0 1.3rem 2.4rem rgba(30,90,168,.42); }
.btn-primary:active{ transform:translateY(-1px); }
.btn-ghost{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.45); }
.btn-ghost:hover{ background:rgba(255,255,255,.20); transform:translateY(-3px); }
.btn-light{ background:#fff; color:var(--color); box-shadow:0 .9rem 1.8rem rgba(15,23,42,.16); }
.btn-light:hover{ transform:translateY(-3px); box-shadow:0 1.3rem 2.4rem rgba(15,23,42,.22); }

/* ---------- 섹션 이름표 ---------- */
.eyebrow{ font-family:Inter,sans-serif; font-weight:800; letter-spacing:.22em; font-size:.82rem; }

/* ---------- WHY 카드 ---------- */
.why-card{ background:#fff; border:1px solid var(--line); border-radius:1.25rem; padding:1.6rem;
  transition:transform .25s,box-shadow .25s,border-color .25s; }
.why-card:hover{ transform:translateY(-6px); box-shadow:0 1.5rem 3rem rgba(19,37,74,.12); border-color:#cfe0f4; }
.why-ico{ width:3.4rem; height:3.4rem; border-radius:1rem; display:grid; place-items:center;
  background:rgba(30,90,168,.10); color:var(--color); margin-bottom:1.1rem; }
.why-ico i,.why-ico svg{ width:1.55rem; height:1.55rem; }

/* ---------- 주요 서비스 (밴드) ---------- */
.svc-band{ position:relative; isolation:isolate; color:#fff;
  background:linear-gradient(160deg,var(--band),var(--color) 55%,var(--dark)); overflow:hidden; }
.svc-band::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.16;
  background:url("https://images.unsplash.com/photo-1497366216548-37526070297c?w=1600&q=70&auto=format&fit=crop") center/cover; }
.svc-card{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:1.25rem;
  padding:1.7rem; transition:transform .25s,background .25s; backdrop-filter:blur(2px); }
.svc-card:hover{ transform:translateY(-6px); background:rgba(255,255,255,.13); }
.svc-ico{ width:3.4rem; height:3.4rem; border-radius:1rem; display:grid; place-items:center;
  background:rgba(255,255,255,.16); color:#fff; }
.svc-ico i,.svc-ico svg{ width:1.6rem; height:1.6rem; }
.region-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); font-weight:700; font-size:.9rem; }
.region-chip i,.region-chip svg{ width:1rem; height:1rem; color:var(--accent); }

/* ---------- PROCESS ---------- */
.step-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:1.25rem;
  padding:2rem 1.5rem 1.6rem; transition:transform .25s,box-shadow .25s; }
.step-card:hover{ transform:translateY(-6px); box-shadow:0 1.4rem 2.8rem rgba(19,37,74,.12); }
.step-no{ font-family:Inter,sans-serif; font-weight:800; font-size:2.4rem; line-height:1;
  color:rgba(30,90,168,.18); }
.step-ico{ width:3rem; height:3rem; border-radius:.9rem; display:grid; place-items:center;
  background:var(--color); color:#fff; margin:.6rem 0 1rem; }
.step-ico i,.step-ico svg{ width:1.4rem; height:1.4rem; }

/* ---------- CARE 사후관리 ---------- */
.care-card{ background:#fff; border:1px solid var(--line); border-radius:1.4rem; padding:2rem;
  transition:transform .25s,box-shadow .25s; }
.care-card:hover{ transform:translateY(-6px); box-shadow:0 1.5rem 3rem rgba(19,37,74,.13); }
.care-num{ width:3rem; height:3rem; border-radius:.9rem; display:grid; place-items:center;
  background:var(--color); color:#fff; font-family:Inter; font-weight:800; font-size:1.2rem; }
.care-li{ display:flex; gap:.6rem; align-items:flex-start; color:#475569; font-weight:600; line-height:1.5; }
.care-li i,.care-li svg{ width:1.15rem; height:1.15rem; color:var(--color); flex:none; margin-top:.15rem; }

/* ---------- PARTNERS 마퀴 ---------- */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:.9rem; width:max-content; will-change:transform; }
.marquee-l{ animation:marq-l 46s linear infinite; }
.marquee-r{ animation:marq-r 46s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marq-l{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marq-r{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
.partner-pill{ display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  padding:.7rem 1.3rem; border-radius:999px; background:#fff; border:1px solid var(--line);
  font-weight:700; color:#334155; font-size:.92rem; }

/* ---------- FAQ ---------- */
.faq-item{ border:1px solid var(--line); border-radius:1rem; background:#fff; overflow:hidden;
  transition:box-shadow .25s,border-color .25s; }
.faq-item.open{ box-shadow:0 1rem 2.4rem rgba(19,37,74,.10); border-color:#cfe0f4; }
.faq-q{ width:100%; display:flex; align-items:center; gap:1rem; padding:1.3rem 1.4rem; text-align:left;
  font-weight:800; font-size:1.05rem; color:#1e293b; cursor:pointer; background:transparent; }
.faq-q .q-mark{ width:1.9rem; height:1.9rem; border-radius:.55rem; flex:none; display:grid; place-items:center;
  background:rgba(30,90,168,.10); color:var(--color); font-family:Inter; font-weight:800; }
.faq-q .chev{ margin-left:auto; transition:transform .3s; color:#94a3b8; flex:none; }
.faq-item.open .chev{ transform:rotate(180deg); color:var(--color); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a-inner{ padding:0 1.4rem 1.3rem 4.3rem; color:#64748b; font-weight:600; line-height:1.7; }

/* ---------- RESERVATION ---------- */
.resv{ position:relative; isolation:isolate; color:#fff;
  background:linear-gradient(155deg,var(--dark),#0f1d3a); overflow:hidden; }
.resv::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.14;
  background:url("https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=1600&q=70&auto=format&fit=crop") center/cover; }
.resv-info{ display:flex; gap:1rem; align-items:flex-start; }
.resv-info .ri-ico{ width:3rem; height:3rem; border-radius:.9rem; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:var(--accent); }
.resv-info .ri-ico i,.resv-info .ri-ico svg{ width:1.4rem; height:1.4rem; }
.form-field{ width:100%; height:3.1rem; border-radius:.8rem; border:1px solid var(--line); background:#fff;
  padding:0 1rem; font-weight:600; color:#1e293b; font-size:.95rem; }
.form-field:focus{ outline:none; border-color:var(--color); box-shadow:0 0 0 3px rgba(30,90,168,.15); }
select.form-field{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%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.6rem; }

/* ---------- 푸터 ---------- */
.footer{ position:relative; isolation:isolate; color:rgba(255,255,255,.66);
  background:var(--dark); }
.footer::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.10;
  background:url("https://images.unsplash.com/photo-1582407947304-fd86f028f716?w=1600&q=70&auto=format&fit=crop") center/cover; }
.foot-link{ display:block; padding:.32rem 0; transition:color .2s,padding-left .2s; }
.foot-link:hover{ color:#fff; padding-left:.3rem; }
.foot-sns{ width:2.4rem; height:2.4rem; border-radius:.7rem; display:grid; place-items:center;
  background:rgba(255,255,255,.10); color:#fff; transition:.2s; }
.foot-sns:hover{ background:var(--color); transform:translateY(-3px); }
.foot-select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2'%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.6rem; }

/* ---------- 플로팅 ---------- */
.float-col{ position:fixed; right:1rem; top:50%; transform:translateY(-50%); z-index:40;
  flex-direction:column; gap:.6rem; } /* display는 Tailwind hidden/ws-md:flex가 제어 */
.float-btn{ width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center; color:#fff;
  box-shadow:0 .6rem 1.4rem rgba(15,23,42,.25); transition:transform .2s; }
.float-btn:hover{ transform:scale(1.1); }
.float-btn i,.float-btn svg{ width:1.3rem; height:1.3rem; }
.float-mobile{ position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -.4rem 1.2rem rgba(15,23,42,.10); } /* display는 Tailwind flex/ws-md:hidden가 제어 */
.float-mobile a{ flex:1; display:flex; align-items:center; justify-content:center; gap:.45rem;
  height:3.6rem; font-weight:800; font-size:.95rem; }
.float-mobile a i,.float-mobile a svg{ width:1.2rem; height:1.2rem; }

/* TOP 버튼 */
#topBtn{ transition:opacity .3s,visibility .3s,transform .2s; }
#topBtn:hover{ transform:translateY(-3px); }

/* ---------- 모바일 드로어 ---------- */
#drawer{ visibility:hidden; }
#drawer.open{ visibility:visible; }
#drawer .ov{ opacity:0; transition:opacity .3s; }
#drawer.open .ov{ opacity:1; }
#drawer .panel{ transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); }
#drawer.open .panel{ transform:translateX(0); }
.dr-item{ display:flex; align-items:center; gap:.8rem; padding:.85rem 0; font-weight:800; color:#1e293b; }
.dr-item .di-ico{ width:2.2rem; height:2.2rem; border-radius:.6rem; flex:none; display:grid; place-items:center;
  background:var(--soft); color:var(--color); }
.dr-item .di-ico i,.dr-item .di-ico svg{ width:1.2rem; height:1.2rem; }
.dr-card{ display:flex; flex-direction:column; align-items:center; gap:.45rem; padding:1.1rem .5rem;
  border-radius:.9rem; background:var(--soft); font-weight:800; color:#1e293b; font-size:.95rem; }
.dr-card .dc-ico{ color:var(--color); }
.dr-card .dc-ico i,.dr-card .dc-ico svg{ width:1.35rem; height:1.35rem; }
.dr-label{ font-family:Inter; font-weight:800; font-size:.72rem; letter-spacing:.12em; color:var(--color); }

/* ---------- 팝업 ---------- */
.popup-wrap{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  padding:1.25rem; background:rgba(11,21,46,.55); }
.popup-wrap.show{ display:flex; }
.popup-card{ position:relative; width:100%; max-width:23rem; background:#fff; border-radius:1.4rem;
  overflow:hidden; box-shadow:0 2rem 4rem rgba(15,23,42,.3); animation:pop .35s ease; }
@keyframes pop{ from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:none} }
.popup-img{ height:9rem; background:linear-gradient(135deg,var(--band),var(--dark));
  display:grid; place-items:center; color:#fff; }
.popup-img i,.popup-img svg{ width:2.6rem; height:2.6rem; }
.popup-close{ position:absolute; top:.8rem; right:.8rem; width:2.2rem; height:2.2rem; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.2); color:#fff; }
.popup-foot{ display:flex; border-top:1px solid var(--line); }
.popup-foot button{ flex:1; height:3.2rem; font-weight:800; cursor:pointer; }

/* ---------- 리빌(AOS CDN stale 회피용 자체 IO) ---------- */
.reveal-ready [data-reveal]{ opacity:0; transform:translateY(26px); }
.reveal-ready [data-reveal].is-in{ opacity:1; transform:none; transition:opacity .7s ease,transform .7s ease; }

/* body 스크롤 잠금 */
body.no-scroll{ overflow:hidden; }