/* ============================================================
   theme/41 — 리브온(LIVON) 인테리어  원본: interior 설계·시공 흡수
   브랜드 민트 #55C89F / 잉크 #111 / 보조 그레이 #f9fafb
   Tailwind utility 보조용 — 그리드 minmax(0,1fr)/full-bleed/동적상태
   ============================================================ */

:root{
  --brand:#55C89F; --brandd:#38b187; --ink:#111111; --kakao:#FEE500;
  --hero:url("https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1920&q=80");
}
html{font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;scroll-behavior:smooth;overflow-x:hidden;}
body{word-break:keep-all;overflow-x:hidden;}
*{min-width:0;}
img{max-width:100%;}

/* 컨테이너 */
.theme-area{max-width:80rem;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem;}
@media (min-width:768px){.theme-area{padding-left:1.5rem;padding-right:1.5rem;}}
@media (min-width:1280px){.theme-area{padding-left:2rem;padding-right:2rem;}}

/* ---------- 섹션 공통 타이틀 ---------- */
.sec-eyebrow{color:var(--brand);font-weight:800;letter-spacing:.25em;font-size:.8rem;}
.sec-title{margin-top:.75rem;font-size:clamp(1.9rem,4vw,2.75rem);font-weight:900;letter-spacing:-.02em;text-align:center;line-height:1.2;}
.sec-title.text-left{text-align:left;}
.sec-desc{margin-top:1rem;color:#6b7280;font-size:1.05rem;line-height:1.7;}
.text-center .sec-desc{margin-left:auto;margin-right:auto;}

/* ---------- 버튼 ---------- */
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;height:3.25rem;padding:0 1.75rem;border-radius:999rem;
  background:var(--brand);color:#fff;font-weight:800;font-size:1rem;box-shadow:0 .75rem 1.75rem rgba(85,200,159,.4);transition:.25s ease;cursor:pointer;}
.btn-primary:hover{background:var(--brandd);transform:translateY(-2px);box-shadow:0 1rem 2.25rem rgba(85,200,159,.5);}
.btn-primary:active{transform:translateY(0) scale(.97);}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;height:3.25rem;padding:0 1.75rem;border-radius:999rem;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.55);color:#fff;font-weight:800;font-size:1rem;transition:.25s ease;cursor:pointer;}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;}
.btn-ghost:active{transform:scale(.97);}

/* ---------- HEADER ---------- */
#siteHeader .hd-logo,#siteHeader .hd-nav a,#siteHeader .hd-burger{color:#fff;}
#siteHeader .hd-nav a{position:relative;transition:color .2s;}
#siteHeader .hd-nav a::after{content:"";position:absolute;left:0;bottom:-.4rem;width:0;height:2px;background:var(--brand);transition:width .25s;}
#siteHeader .hd-nav a:hover{color:var(--brand);}
#siteHeader .hd-nav a:hover::after{width:100%;}
#siteHeader.scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(12px);box-shadow:0 .25rem 1.5rem rgba(0,0,0,.07);}
#siteHeader.scrolled .hd-logo,#siteHeader.scrolled .hd-nav a,#siteHeader.scrolled .hd-burger{color:var(--ink);}
#siteHeader.scrolled .hd-nav a:hover{color:var(--brand);}

/* ---------- HERO ---------- */
.hero-bg{background:var(--hero) center/cover no-repeat;transform:scale(1.03);}
.hero-scrim{background:linear-gradient(90deg,rgba(10,12,14,.82) 0%,rgba(10,12,14,.55) 45%,rgba(10,12,14,.15) 100%);}
.hero-eyebrow .w-8{display:inline-block;}
.scroll-mouse{width:1.5rem;height:2.4rem;border:2px solid rgba(255,255,255,.55);border-radius:999rem;display:flex;justify-content:center;padding-top:.35rem;}
.scroll-dot{width:.3rem;height:.5rem;border-radius:999rem;background:#fff;animation:scrolly 1.6s ease-in-out infinite;}
@keyframes scrolly{0%{opacity:0;transform:translateY(-.2rem);}50%{opacity:1;}100%{opacity:0;transform:translateY(.5rem);}}

/* ---------- SERVICE ---------- */
.service-card{position:relative;background:#fff;border:1px solid #eef0f2;border-radius:1.25rem;padding:2rem 1.75rem 2.25rem;
  box-shadow:0 .5rem 1.5rem rgba(17,17,17,.04);transition:.28s ease;overflow:hidden;}
.service-card:hover{transform:translateY(-.5rem);border-color:transparent;box-shadow:0 1.5rem 3rem rgba(85,200,159,.18);}
.service-ico{display:grid;place-items:center;width:3.75rem;height:3.75rem;border-radius:1rem;background:color-mix(in srgb,var(--brand) 14%,#fff);color:var(--brand);font-size:1.5rem;transition:.28s ease;}
.service-card:hover .service-ico{background:var(--brand);color:#fff;}
.service-name{margin-top:1.4rem;font-size:1.4rem;font-weight:800;letter-spacing:-.02em;}
.service-sub{margin-top:.4rem;color:var(--brand);font-weight:700;font-size:.92rem;}
.service-text{margin-top:.9rem;color:#6b7280;line-height:1.65;font-size:.97rem;}
.service-arrow{position:absolute;top:1.75rem;right:1.75rem;color:#cbd5e1;transition:.28s ease;}
.service-card:hover .service-arrow{color:var(--brand);transform:translate(.15rem,-.15rem);}

/* ---------- PORTFOLIO ---------- */
.pf-tab{height:2.75rem;padding:0 1.4rem;border-radius:999rem;background:#fff;border:1px solid #e5e7eb;font-weight:700;color:#6b7280;transition:.2s ease;cursor:pointer;}
.pf-tab:hover{border-color:var(--brand);color:var(--brand);}
.pf-tab.is-active{background:var(--ink);border-color:var(--ink);color:#fff;}
.pf-card{background:#fff;border-radius:1.25rem;overflow:hidden;box-shadow:0 .5rem 1.5rem rgba(17,17,17,.05);transition:.3s ease;}
.pf-card.hide{display:none;}
.pf-card:hover{transform:translateY(-.4rem);box-shadow:0 1.5rem 3rem rgba(17,17,17,.12);}
.pf-thumb{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#eef0f2;}
.pf-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.pf-card:hover .pf-thumb img{transform:scale(1.07);}
.pf-badge{position:absolute;top:.9rem;left:.9rem;background:var(--brand);color:#fff;font-size:.78rem;font-weight:800;padding:.3rem .8rem;border-radius:999rem;}
.pf-zoom{position:absolute;inset:0;display:grid;place-items:center;background:rgba(17,17,17,.4);color:#fff;opacity:0;transition:.3s ease;}
.pf-card:hover .pf-zoom{opacity:1;}
.pf-body{padding:1.25rem 1.35rem 1.5rem;}
.pf-name{font-size:1.18rem;font-weight:800;letter-spacing:-.02em;}
.pf-meta{margin-top:.55rem;display:flex;align-items:center;gap:.35rem;color:#9ca3af;font-size:.92rem;font-weight:600;}

/* ---------- STATS ---------- */
.stats-band{background:linear-gradient(135deg,#16201c 0%,#0e1512 100%);position:relative;}
.stat-cell{text-align:center;padding:1.5rem 1rem;border-radius:1.25rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);}
.stat-num{display:flex;align-items:baseline;justify-content:center;font-weight:900;font-size:clamp(2.4rem,5vw,3.4rem);letter-spacing:-.03em;color:#fff;line-height:1;}
.stat-num em{font-style:normal;color:var(--brand);margin-left:.15rem;font-size:.6em;}
.stat-label{margin-top:.8rem;color:rgba(255,255,255,.6);font-weight:600;font-size:.98rem;}

/* ---------- WHY ---------- */
.why-photo{position:relative;border-radius:1.5rem;overflow:hidden;aspect-ratio:5/6;box-shadow:0 1.5rem 3.5rem rgba(17,17,17,.15);}
.why-photo img{width:100%;height:100%;object-fit:cover;}
.why-badge{position:absolute;left:1.25rem;bottom:1.25rem;background:#fff;border-radius:1rem;padding:1rem 1.25rem;display:flex;align-items:center;gap:.75rem;box-shadow:0 1rem 2rem rgba(17,17,17,.18);}
.why-badge b{display:block;font-size:1.2rem;font-weight:900;color:var(--ink);}
.why-badge span{font-size:.82rem;color:#6b7280;font-weight:600;}
.why-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:start;}
.why-ico{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:.9rem;background:color-mix(in srgb,var(--brand) 14%,#fff);color:var(--brand);flex-shrink:0;}
.why-name{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;}
.why-text{margin-top:.45rem;color:#6b7280;line-height:1.65;font-size:.97rem;}

/* ---------- REVIEWS ---------- */
.review-swiper{overflow:visible;}
.review-swiper .swiper-slide{height:auto;}
.rv-card{height:100%;background:#fff;border-radius:1.25rem;padding:2rem 1.85rem;border:1px solid #eef0f2;box-shadow:0 .5rem 1.5rem rgba(17,17,17,.04);display:flex;flex-direction:column;}
.rv-stars{color:#fbbf24;display:flex;gap:.2rem;font-size:.95rem;}
.rv-text{margin-top:1.1rem;color:#374151;line-height:1.75;font-size:1rem;flex:1;}
.rv-foot{margin-top:1.5rem;display:flex;align-items:center;gap:.85rem;}
.rv-avatar{width:2.85rem;height:2.85rem;border-radius:999rem;background:color-mix(in srgb,var(--brand) 16%,#fff);color:var(--brandd);display:grid;place-items:center;font-weight:900;font-size:1.05rem;}
.rv-foot b{display:block;font-weight:800;color:var(--ink);}
.rv-foot span{font-size:.85rem;color:#9ca3af;font-weight:600;}
.nav-round{width:2.85rem;height:2.85rem;border-radius:999rem;border:1px solid #e5e7eb;background:#fff;display:grid;place-items:center;color:#374151;transition:.2s ease;cursor:pointer;}
.nav-round:hover{background:var(--brand);border-color:var(--brand);color:#fff;}
.review-pagination{display:flex;justify-content:center;gap:.4rem;}
.review-pagination .swiper-pagination-bullet{width:.55rem;height:.55rem;background:#cbd5e1;opacity:1;transition:.2s;}
.review-pagination .swiper-pagination-bullet-active{width:1.6rem;border-radius:999rem;background:var(--brand);}

/* ---------- PROCESS ---------- */
.step-card{position:relative;background:#fff;border:1px solid #eef0f2;border-radius:1.25rem;padding:2.25rem 1.75rem 2rem;transition:.28s ease;}
.step-card:hover{transform:translateY(-.4rem);box-shadow:0 1.25rem 3rem rgba(17,17,17,.1);border-color:transparent;}
.step-no{position:absolute;top:1.5rem;right:1.75rem;font-size:2.5rem;font-weight:900;color:#f1f5f4;letter-spacing:-.04em;}
.step-ico{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:1rem;background:var(--ink);color:#fff;transition:.28s ease;}
.step-card:hover .step-ico{background:var(--brand);}
.step-name{margin-top:1.3rem;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;}
.step-text{margin-top:.7rem;color:#6b7280;line-height:1.65;font-size:.96rem;}

/* ---------- CTA BAND ---------- */
.cta-band{position:relative;background:linear-gradient(rgba(12,16,14,.86),rgba(12,16,14,.92)),var(--hero) center/cover fixed;}
@media (max-width:1023px){.cta-band{background-attachment:scroll;}}

/* ---------- FOOTER ---------- */
.foot-h{color:#fff;font-weight:800;font-size:1.05rem;margin-bottom:1.1rem;}
.foot-list{display:grid;gap:.75rem;}
.foot-list a{transition:color .2s;}
.foot-list a:hover{color:var(--brand);}
.foot-contact li{display:flex;align-items:center;gap:.55rem;}
.foot-sns{width:2.6rem;height:2.6rem;border-radius:.75rem;display:grid;place-items:center;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);transition:.2s ease;}
.foot-sns:hover{background:var(--brand);color:#fff;transform:translateY(-2px);}
.foot-select{margin-top:1.25rem;width:100%;height:2.85rem;border-radius:.6rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.8);padding:0 .9rem;font-weight:600;cursor:pointer;}
.foot-select option{color:#111;}

/* ---------- 플로팅 위젯 ---------- */
.float-dock{position:fixed;right:1rem;bottom:1.25rem;z-index:45;display:flex;flex-direction:column;gap:.6rem;}
.float-btn{width:3.25rem;height:3.25rem;border-radius:999rem;display:grid;place-items:center;color:#fff;box-shadow:0 .5rem 1.25rem rgba(0,0,0,.22);transition:.25s ease;cursor:pointer;}
.float-btn:hover{transform:translateY(-3px) scale(1.05);}
.float-phone{background:var(--brand);}
.float-kakao{background:var(--kakao);color:#3c1e1e;font-size:1.3rem;}
.float-top{background:var(--ink);opacity:0;visibility:hidden;}
.float-top.show{opacity:1;visibility:visible;}
@media (min-width:768px){.float-dock{right:1.5rem;bottom:1.75rem;}.float-btn{width:3.6rem;height:3.6rem;}}

/* ---------- 모바일 드로어 ---------- */
#mobileDrawer .drawer-panel{transform:translateX(100%);transition:transform .3s ease;}
#mobileDrawer.open{visibility:visible;}
#mobileDrawer.open .drawer-overlay{opacity:1;}
#mobileDrawer.open .drawer-panel{transform:translateX(0);}
.drawer-link{padding:.95rem .25rem;border-bottom:1px solid #f1f5f9;color:#1f2937;transition:color .2s;}
.drawer-link:hover{color:var(--brand);}
.drawer-cta{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:3.1rem;border-radius:999rem;background:var(--brand);color:#fff;font-weight:800;}
.drawer-cta:active{transform:scale(.97);}

/* ---------- 팝업 ---------- */
.popup-wrap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:1rem;}
.popup-wrap[hidden]{display:none;}
.popup-dim{position:absolute;inset:0;background:rgba(17,17,17,.55);}
.popup-card{position:relative;width:min(92vw,24rem);background:#fff;border-radius:1.25rem;overflow:hidden;box-shadow:0 1.5rem 4rem rgba(0,0,0,.3);animation:popin .3s ease;}
@keyframes popin{from{opacity:0;transform:translateY(1.5rem) scale(.97);}to{opacity:1;transform:none;}}
.popup-photo{position:relative;aspect-ratio:16/10;overflow:hidden;}
.popup-photo img{width:100%;height:100%;object-fit:cover;}
.popup-x{position:absolute;top:.75rem;right:.75rem;width:2.4rem;height:2.4rem;border-radius:999rem;background:rgba(17,17,17,.5);color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px);}
.popup-body{padding:1.5rem 1.5rem .5rem;}
.popup-foot{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid #f1f5f9;margin-top:1.25rem;}
.popup-today,.popup-close{height:3.25rem;font-weight:700;cursor:pointer;transition:.2s;}
.popup-today{color:#6b7280;background:#f8fafc;}
.popup-today:hover{background:#eef2f5;}
.popup-close{color:#fff;background:var(--ink);}
.popup-close:hover{background:#000;}

/* ---------- Lucide/FA 아이콘 정렬 고정(밀림 방지) ---------- */
[data-lucide]{display:inline-block;vertical-align:middle;stroke-width:2;}
.service-ico svg,.why-ico svg,.step-ico svg{width:1.5rem;height:1.5rem;}
.fa-solid,.fa-brands{line-height:1;}

/* ---------- 초소형 뷰포트 보정 ---------- */
@media (max-width:359px){
  .theme-area{padding-left:.9rem;padding-right:.9rem;}
  .btn-primary,.btn-ghost{height:3rem;padding:0 1.25rem;font-size:.92rem;}
  .pf-tab{height:2.5rem;padding:0 1rem;}
}
@media (max-width:280px){
  .sec-title{font-size:1.55rem;}
  .float-btn{width:2.9rem;height:2.9rem;}
}