@charset "utf-8";
/* layout.css — 헤더·푸터·쉘·메인·서브비주얼/LNB (.contain / #contArea) */

#skipToContent a {z-index:100000; position:absolute; overflow:hidden; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0;}
#skipToContent a:focus,
#skipToContent a:active {width:200px; height:50px; background:#21272e; color:#fff; font-size:var(--font-size-14); font-weight:700; text-align:center; text-decoration:none; line-height:3.57em; outline-color:#f37736;}

.only-desktop-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}
.fr-box .swiper-wrapper {display:block;}

.contain {max-width:1460px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;}

/* header */
#header {position:sticky; top:0; width:100%; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid #e5e2db; z-index:200; transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;}
#header .contain {position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--space-30); max-width:100%; min-height:var(--header-height); z-index:10;}
#header .sitelogo {grid-column:1; justify-self:start;}
#header .sitelogo a {display:inline-grid; gap:8px; line-height:1; text-decoration:none;}
#header .sitelogo img {display:block; height:38px; width:auto; object-fit:contain;}
#header .logo-text {display:block; color:#505050; font-size:var(--font-size-18); font-weight:500; line-height:1em; letter-spacing:-.04em; text-align:center; white-space:nowrap;}
#gnb {grid-column:2; justify-self:center; text-align:center;}
#gnb>ul {display:flex; align-items:center; justify-content:center; gap:var(--space-60);}
#gnb>ul>li {position:relative; padding:0;}
#gnb>ul>li>a {position:relative; display:inline-flex; align-items:center; height:34px; color:#2c2c2c; font-size:var(--font-size-20); font-weight:500; letter-spacing:-.02em; line-height:1.7em; white-space:nowrap; transition:color .2s;}
#gnb>ul>li>a:after {content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent; transition:background .2s;}
#gnb>ul>li>a:hover,
#gnb>ul>li.active>a {color:var(--color-primary);}
#gnb>ul>li>a:hover:after,
#gnb>ul>li.active>a:after {background:var(--color-primary);}
#gnb .submenu {display:none; position:absolute; left:50%; top:100%; z-index:20; width:max-content; min-width:140px; overflow:hidden; text-align:center; transform:translateX(-50%);}
#gnb .submenu>ul {margin-top:12px; padding:12px; border:1px solid #eee; border-radius:8px; background:#fff; box-shadow:0 12px 40px rgba(26,26,46,.1);}
#gnb .submenu>ul>li>a {display:block; width:100%; padding:10px; border-radius:4px; color:#878787; font-size:var(--font-size-16); font-weight:500; line-height:1.625em; letter-spacing:-.02em; white-space:nowrap; transition:color .2s, background .2s;}
#gnb .submenu>ul>li>a:hover,
#gnb .submenu>ul>li.active>a {color:var(--color-primary); background:#f3fafd;}
.submenu-bg {display:none;}
.header-actions {grid-column:3; justify-self:end; display:flex; align-items:center; gap:20px;}
.btn-contact {display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; min-width:104px; height:50px; padding:2px 20px 0; border-radius:80px; background:var(--color-primary); color:#fff; font-size:var(--font-size-16); font-weight:500; line-height:1.5em; letter-spacing:-.02em; white-space:nowrap; transition:background .2s;}
.btn-contact:hover {background:#0280b8; color:#fff;}
.header-hotline {display:flex; flex-direction:column; gap:2px;}
.header-hotline .hotline-row {display:flex; align-items:center; gap:20px; margin:0; font-size:var(--font-size-14); font-weight:500; line-height:1.43em; letter-spacing:-.02em; white-space:nowrap;}
.header-hotline .hotline-label {min-width:28px; color:#bbb; font-size:var(--font-size-13);}
.header-hotline .hotline-value {color:#2c2c2c;}
#header.active {background:rgba(255,255,255,.94); box-shadow:0 2px 12px rgba(26,26,46,.06);}

/* sub: 상단 투명·흰글씨 / 스크롤·.active 시 흰바 */
#sub #header {background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; box-shadow:none;}
#sub #header .logo-text {color:#fff;}
#sub #header .sitelogo img {filter:brightness(0) invert(1);}
#sub #gnb>ul>li>a {color:rgba(255,255,255,.82);}
#sub #gnb>ul>li>a:hover,
#sub #gnb>ul>li.active>a {color:#fff;}
#sub #gnb>ul>li>a:hover:after,
#sub #gnb>ul>li.active>a:after {background:var(--color-primary);}
#sub .header-hotline .hotline-label {color:rgba(255,255,255,.65);}
#sub .header-hotline .hotline-value {color:#fff;}
#sub .btn-m-menu {border-color:rgba(255,255,255,.35);}
#sub .btn-m-menu span,
#sub .btn-m-menu span:before,
#sub .btn-m-menu span:after {background:#fff;}
#sub #header.active {background:rgba(255,255,255,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid #e5e2db; box-shadow:0 2px 12px rgba(26,26,46,.06);}
#sub #header.active .logo-text {color:#505050;}
#sub #header.active .sitelogo img {filter:none;}
#sub #header.active #gnb>ul>li>a {color:#2c2c2c;}
#sub #header.active #gnb>ul>li>a:hover,
#sub #header.active #gnb>ul>li.active>a {color:var(--color-primary);}
#sub #header.active #gnb>ul>li>a:hover:after,
#sub #header.active #gnb>ul>li.active>a:after {background:var(--color-primary);}
#sub #header.active .header-hotline .hotline-label {color:#bbb;}
#sub #header.active .header-hotline .hotline-value {color:#2c2c2c;}
#sub #header.active .btn-m-menu {border-color:#e5e2db;}
#sub #header.active .btn-m-menu span,
#sub #header.active .btn-m-menu span:before,
#sub #header.active .btn-m-menu span:after {background:#2c2c2c;}

.btn-m-menu {display:none; position:relative; width:44px; height:44px; border:1px solid #e5e2db; border-radius:8px;}
.btn-m-menu span {position:absolute; left:11px; right:11px; top:50%; height:2px; margin-top:-1px; background:#2c2c2c;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:""; position:absolute; left:0; right:0; height:2px; background:#2c2c2c;}
.btn-m-menu span:before {top:-8px;}
.btn-m-menu span:after {bottom:-8px;}
.mobile-navigation {display:none; position:fixed; top:0; right:0; width:min(100%,320px); height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .home {display:flex; align-items:center; min-height:var(--header-height); padding:0 20px; border-bottom:1px solid #e5e2db;}
.mobile-navigation .sitelogo {display:inline-grid; gap:6px;}
.mobile-navigation .sitelogo img {height:32px; width:auto;}
.mobile-navigation .logo-text {color:#505050; font-size:var(--font-size-16); font-weight:500; line-height:1em;}
.mobile-navigation .nav-menu>ul {border-top:0;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #e5e2db;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:14px var(--space-50) 14px 20px; display:block; color:#1a1a2e; font-size:var(--font-size-18); font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:11px; height:11px; border-right:2px solid #505050; border-bottom:2px solid #505050;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:var(--color-primary);}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff;}
.mobile-navigation .nav-menu .submenu {display:none; background:#f8f8f8; color:#505050; font-size:var(--font-size-15); font-weight:400; line-height:1.5em;}
.mobile-navigation .nav-menu .submenu ul li {border-top:1px solid #e5e5e5;}
.mobile-navigation .nav-menu .submenu ul li a {display:block; padding:12px 20px 12px var(--space-30);}
.mobile-navigation .nav-menu .submenu ul li a:hover {color:var(--color-primary);}
.mobile-navigation .close {position:absolute; top:0; right:15px; width:26px; height:var(--header-height); text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:""; position:absolute; top:50%; left:0; width:100%; height:3px; background:#242424; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.6; z-index:101;}
html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* sub visual · LNB */
.sub-visual {position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:clamp(250px, calc(600 / var(--inner) * 100vw), 600px); margin:0; padding:var(--header-height) 0 0; overflow:hidden; border-bottom:none; background:#1a1a2e; color:#fff; text-align:center; box-sizing:border-box;}
#sub .sub-visual {margin-top:calc(-1 * var(--header-height));}
.sub-visual:has(+ .lnb-wrap) {margin-bottom:calc(-1 * var(--space-80)); padding-bottom:var(--space-80);}
.sub-visual .bg {position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; z-index:0;}
.sub-visual:before {content:""; position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.36); pointer-events:none;}
.sub-visual .inner {position:relative; z-index:2; top:auto; left:auto; width:100%; transform:translateY(-10px);}
.sub-visual:not(:has(+ .lnb-wrap)) .inner {transform:translateY(-26px);}
.sub-visual .contain {display:flex; flex-direction:column; align-items:center; gap:16px;}
.sub-visual h2 {margin:0; color:#fff; font-size:var(--font-size-48); font-weight:500; line-height:1.31em; letter-spacing:-.02em; word-break:keep-all;}
.sub-path {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:0;}
.sub-path-home {display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:24px; height:24px; color:rgba(255,255,255,.56); transition:color .2s;}
.sub-path-home:hover {color:#fff;}
.sub-path-home svg {display:block; width:20px; height:20px;}
.sub-path-sep {flex-shrink:0; width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.56);}
.sub-path-item {color:rgba(255,255,255,.56); font-size:var(--font-size-18); font-weight:500; line-height:1.78em; letter-spacing:-.02em; white-space:nowrap;}
.lnb-wrap {position:relative; overflow: hidden; z-index:50; width:100%; padding:0 var(--container-space); border-bottom:none; background:rgba(0,0,0,.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-sizing:border-box;}
.lnb {margin:0 auto; max-width:none; padding:0; width: 100%;}
.lnb .swiper {overflow:visible; width: 100%; max-width: 1490px; margin: 0 auto;}
.lnb ul {display:flex; align-items:stretch; width:max-content; min-width: 100%; margin:0; padding:0; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.lnb ul li {flex:1 1 0; min-width:0; text-align:center; border:0;}
.lnb ul li a {display:flex; flex-direction:row; align-items:center; justify-content:center; width:100%; min-height:var(--lnb-height); height:auto; padding:0 12px; border:0; border-radius:0; background:transparent; color:#fff; font-size:var(--font-size-18); font-weight:500; line-height:1.78em; letter-spacing:-.02em; text-align:center; white-space:nowrap; transition:background .2s, color .2s;}
.lnb ul li.active {background:transparent; border:0;}
.lnb ul li.active a {background:var(--color-primary); color:#fff;}
.lnb ul li a:hover {background:rgba(255,255,255,.08); color:#fff;}
.lnb ul li.active a:hover {background:var(--color-primary); color:#fff;}

.sub-title {padding-bottom:var(--space-80); max-width:1460px; margin:0 auto;}
#contArea.wide .sub-title {padding-left:var(--container-space); padding-right:var(--container-space);}
.sub-title h2 {color:var(--color-secondary); font-size:var(--font-size-40); font-weight:700; line-height:1.3em;}
#contArea {max-width:1460px; padding-left:var(--container-space); padding-right:var(--container-space); padding-top:var(--space-100); margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}
.real-cont {padding-bottom:var(--space-120);}
.icon img {vertical-align:middle; margin-top:-.02em;}
.icon18 {width:18px; height:18px;}
.icon16 {width:16px; height:16px;}
.icon20 {width:20px; height:20px;}

/* footer */
#footer {padding:var(--space-50) 0 0; border-top:1px solid #dfdfdf; background:#fff; color:#676767; font-size:var(--font-size-14);}
#footer .contain {max-width:1460px;}
#footer .f-top {display:flex; flex-direction:column; gap:var(--space-50); padding-bottom:var(--space-40); border-bottom:1px solid #e5e2db;}
#footer .f-brand {display:flex; align-items:center; justify-content:space-between; gap:var(--space-30); flex-wrap:wrap;}
#footer .f-logo {display:inline-grid; gap:10px; line-height:1; text-decoration:none;}
#footer .f-logo img {display:block; height:clamp(36px, calc(46 / var(--inner) * 100vw), 46px); width:auto; object-fit:contain;}
#footer .f-logo .logo-text {display:block; color:#505050; font-size:var(--font-size-20); font-weight:500; line-height:1em; letter-spacing:-.04em; text-align:center;}
#footer .f-legal {display:flex; flex-wrap:wrap; align-items:center; gap:12px var(--space-40); color:var(--color-secondary); font-size:var(--font-size-16); font-weight:500; line-height:1.5em;}
#footer .f-legal a:hover {color:var(--color-primary);}
#footer .f-info {display:flex; flex-direction:column; gap:12px;}
#footer .f-info-row {display:flex; flex-wrap:wrap; align-items:center; gap:8px var(--space-30); font-size:var(--font-size-18); font-weight:500; line-height:1.56em; letter-spacing:-.02em;}
#footer .f-info-item {display:inline-flex; align-items:center; gap: 2px 10px;}
#footer .f-info .label {color:#bbb; white-space:nowrap;}
#footer .f-info .value {color:#505050;}
#footer .f-bottom {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px var(--space-30); padding:var(--space-30) 0;}
#footer .f-copy {display:flex; flex-wrap:wrap; align-items:center; gap:8px var(--space-30); font-size:var(--font-size-16); font-weight:500; line-height:1.5em;}#footer .f-copy .credit {color:#aaa;}
#footer .f-copy a:hover {color:var(--color-primary);}
#footer .f-sns {display:flex; align-items:center; gap:8px;}
#footer .f-sns a {display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:4px; background:#f1f1f1; transition:background .2s;}
#footer .f-sns a:hover {background:#e8e8e8;}
#footer .f-sns .icon {display:flex; align-items:center; justify-content:center; width:18px; height:18px;}
#footer .f-sns img {display:block; width:18px; height:18px; object-fit:contain;}
.scroll-top {display:flex; align-items:center; justify-content:center; z-index:80; position:fixed; bottom:var(--container-space); right:var(--container-space); width:clamp(44px, calc(56 / var(--inner) * 100vw), 56px); height:clamp(44px, calc(56 / var(--inner) * 100vw), 56px); border:0; border-radius:500px; background:var(--color-warm); transition:background .2s;}
.scroll-top:hover {background:#e57202;}
.scroll-top .icon {display:flex; align-items:center; justify-content:center; width:16px; height:16px;}
.scroll-top img {display:block; width:16px; height:16px; object-fit:contain;}

/* ========== MAIN ========== */
.page-main .animated {-webkit-animation-duration:1s; animation-duration:1s;}
.page-main .sec-label {display:block; margin-bottom:12px; color:var(--color-primary); font-size:var(--font-size-14); font-weight:500; line-height:1.57em; letter-spacing:-.02em;}
.page-main .sec-title {margin:0; color:var(--color-ink); font-size:var(--font-size-40); font-weight:700; line-height:1.35em; letter-spacing:-.03em;}
.page-main .sec-desc {margin:0; color:var(--color-body); font-size:var(--font-size-18); font-weight:400; line-height:1.56em; letter-spacing:-.02em;}
.page-main .sec-more {margin-top:var(--space-30);}
.page-main .btn-ghost {display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:2px var(--space-30) 0; border:1.5px solid #2c2c2c; border-radius:var(--radius-pill); background:transparent; color:#2c2c2c; font-size:var(--font-size-16); font-weight:500; line-height:1.5em; letter-spacing:-.02em; transition:background .2s, color .2s, border-color .2s;}
.page-main .btn-ghost:hover {background:var(--color-accent); border-color:transparent; color:#fff;}
.page-main .sec-head {margin-bottom:var(--space-80);}
.page-main .sec-head-split {display:grid; grid-template-columns:1fr auto; column-gap:var(--space-80); row-gap:0; align-items:start;}
.page-main .sec-head-split .sec-label {grid-column:1; grid-row:1;}
.page-main .sec-head-split .sec-head-left {grid-column:1; grid-row:2; min-width:0;}
.page-main .sec-head-split .sec-head-right {grid-column:2; grid-row:2; width:fit-content; max-width:min(480px, 42%); justify-self:end; text-align:left;}
.page-main .sec-categories .sec-head-split .sec-head-right,
.page-main .sec-cases .sec-head-split .sec-head-right {width:max-content; max-width:100%;}
.main-visual {background:#fafafa; overflow:hidden;}
.main-visual .hero-wrap {position:relative; width:100%; max-width:100%; padding:var(--space-40); overflow:hidden; box-sizing:border-box;}
.main-visual .items {display:block; width:100%;}
.main-visual .item {display:block; outline:none;}
.main-visual .hero-panel {position:relative; width:100%; min-width:0; aspect-ratio:1840 / 640; padding:0; border-radius:8px; box-shadow:0 6px 24px rgba(26,26,46,.12); box-sizing:border-box; overflow:hidden;}
.main-visual .hero-panel-bg {position:absolute; inset:0; border-radius:8px; overflow:hidden; pointer-events:none;}
.main-visual .hero-panel-bg img {width:100%; height:100%; object-fit:contain; border-radius:8px; transform:scale(1.06); transition:transform 1.1s ease;}
.main-visual .slick-slide.active .hero-panel-bg img,
.main-visual .slick-current .hero-panel-bg img {transform:scale(1);}
.main-visual .hero-content {position:absolute; left:50%; top:50%; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-80); width:100%; max-width:1800px; padding:0 var(--space-50); transform:translate(-50%, -50%); box-sizing:border-box;}
.main-visual .caption,
.main-visual .hero-actions {transform:translateY(24px); transition:transform .6s ease, opacity .6s ease; opacity:0;}
.main-visual .slick-slide.active .caption,
.main-visual .slick-current .caption {transform:translateY(0); transition-delay:.15s; opacity:1;}
.main-visual .slick-slide.active .hero-actions,
.main-visual .slick-current .hero-actions {transform:translateY(0); transition-delay:.28s; opacity:1;}
.main-visual .caption {display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-30); width:100%; text-align:left;}
.main-visual .caption .txt1 {margin:0; color:#2c2c2c; font-size:var(--font-size-48); font-weight:500; line-height:1.29em; letter-spacing:-.02em;}
.main-visual .caption .txt1 .hero-title-line,
.main-visual .caption .txt2 .hero-desc-line {display:block;}
.main-visual .caption .txt1 .is-accent {color:var(--color-accent);}
.main-visual .caption .txt2 .hero-desc-line {width:max-content; max-width:100%;}
.main-visual .caption .txt2 {margin:0; max-width:none; color:#878787; font-size:var(--font-size-22); font-weight:400; line-height:1.45em; letter-spacing:-.02em;}
.main-visual .hero-actions {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px;}
.main-visual .hero-btn {display:inline-flex; align-items:center; justify-content:center; min-width:148px; height:56px; padding:2px var(--space-30) 0; border:1px solid transparent; border-radius:var(--radius-pill); background:#f6f6f6; color:#505050; font-size:var(--font-size-18); font-weight:500; line-height:1em; transition:background .2s, border-color .2s, color .2s;}
.main-visual .hero-btn:hover {background:var(--color-accent); border-color:transparent; color:#fff;}
.main-visual .visual-func {position:absolute; left:50%; bottom:clamp(20px, calc(70 / var(--inner) * 100vw), 100px); z-index:5; display:flex; align-items:center; gap:8px; width:100%; max-width:980px; padding:0 var(--space-50); transform:translateX(-50%); box-sizing:border-box; pointer-events:none;}
.main-visual .visual-func .slide-btn,
.main-visual .visual-func .slide-play {display:none;}
.main-visual .pagination {pointer-events:auto;}
.main-visual .pagination .slick-dots {display:flex; gap:8px; margin:0; padding:0; list-style:none;}
.main-visual .pagination .slick-dots li {margin:0; width:auto; height:auto;}
.main-visual .pagination .slick-dots li button {width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#ccc; font-size:0; line-height:0; text-indent:-999px; overflow:hidden; cursor:pointer; transition:background .2s;}
.main-visual .pagination .slick-dots li.slick-active button {background:var(--color-accent);}
.sec-categories {padding:var(--space-120) 0 var(--space-140);}
.bento-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-20);}
.bento-card {display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-30); padding:var(--space-30); border:2px solid var(--color-accent); border-radius:8px; background:var(--color-surface); transition:box-shadow .25s, transform .25s, border-color .25s;}
.bento-card:hover {border-color:var(--color-accent); box-shadow:var(--shadow-md); transform:translateY(-3px);}
.bento-card-head {display:flex; flex-direction:column; gap:14px; margin-bottom:20px;}
.bento-card-tag {color:var(--color-warm); font-size:var(--font-size-14); font-weight:500; line-height:1.57em;}
.bento-card-title {margin:0; color:var(--color-ink); font-size:var(--font-size-24); font-weight:500; line-height:1.17em;}
.bento-card-text {margin:0; color:var(--color-muted); font-size:var(--font-size-16); font-weight:500; line-height:1.7em;}
.bento-card-thumb {aspect-ratio:1/1; border-radius:4px; overflow:hidden;}
.bento-card-thumb img {width:100%; height:100%; object-fit:cover;}
.sec-rental {width:100%; padding:0; background:#f7fbfd; overflow:hidden;}
.rental-split {display:grid; grid-template-columns:calc(max(0px, (100vw - var(--section-w)) / 2) + min(700px, var(--section-w) / 2)) 1fr; width:100%; align-items:stretch;}
.rental-split-content {position:relative; display:flex; flex-direction:column; justify-content:flex-start; width:min(730px, calc(var(--section-w) / 2)); justify-self:end; padding:var(--space-120) var(--space-80) var(--space-140) var(--container-space); box-sizing:border-box;}
.rental-split-body {display:flex; flex-direction:column; position:relative; z-index:1;}
.rental-split-text {display:flex; flex-direction:column; gap:var(--space-60);}
.rental-split-head {display:flex; flex-direction:column; gap:12px;}
.rental-split-head .sec-label,
.rental-split-head .sec-title {margin-bottom:0;}
.rental-split-copy {display:flex; flex-direction:column; gap:20px;}
.sec-rental .sec-desc {margin-top:0; max-width:none; text-align:left;}
.sec-rental .sec-more {margin-top:var(--space-100);}
.rental-split-media {position:relative; align-self:start; width:100%; max-width:960px; aspect-ratio:1 / 1; overflow:hidden;}
.rental-split-photos {position:absolute; inset:0; width:100%; height:100%;}
.rental-split-photos img {display:block; width:100%; height:100%; object-fit:contain; object-position:center;}
.sec-steps {padding:var(--space-120) 0 var(--space-140);}
.step-row {display:grid; grid-template-columns:repeat(5, 1fr); gap:10px;}
.step-card {position:relative; padding:var(--space-30) var(--space-30); border:1px solid #eee; border-radius:8px; background:var(--color-surface); transition:border-color .2s;}
.step-card:hover {border-color:var(--color-accent);}
.step-card-num {margin-bottom:var(--space-50); color:#ccc; font-size:var(--font-size-32); font-weight:500; line-height:1em;}
.step-card-title {margin:0 0 8px; color:#2c2c2c; font-size:var(--font-size-20); font-weight:500; line-height:1.4em; transition:color .2s;}
.step-card:hover .step-card-title {color:var(--color-accent);}
.step-card-text {margin:0; color:var(--color-muted); font-size:var(--font-size-16); line-height:1.65em;}
.lp-marquee {display:flex; align-items:center; padding:16px 0; border:none; background:linear-gradient(90deg, #fe8003 0%, #f06858 50%, #039ade 100%); overflow:hidden;}
.marquee-track {display:flex; width:max-content; align-items:center; animation:marquee-scroll var(--marquee-duration, 35s) linear infinite;}
.marquee-group {display:flex; align-items:center; gap:var(--space-30); flex-shrink:0; padding-right:var(--space-30);}
.marquee-item {display:inline-flex; align-items:center; gap:10px; height:28px; padding-top:2px; box-sizing:border-box; color:rgba(255,255,255,.92); font-size:var(--font-size-18); font-weight:500; line-height:1em; letter-spacing:-.02em; white-space:nowrap;}
.marquee-item:before {content:""; flex-shrink:0; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.85); transform:translateY(-1px);}
/* 이동거리를 트랙의 50%(=문구 한 벌 너비)로 잡는다. 예전엔 --marquee-shift 변수를 썼는데
   그 값을 채워줄 JS 가 없어 기본값 0px 그대로였고, 결과적으로 띠가 멈춰 있었다.
   from -50% → to 0 이라 문구가 오른쪽으로 흘러간다(왼쪽으로 돌리려면 from/to 를 맞바꾼다).
   ※ sub/main.php 의 .marquee-group 이 "같은 내용 2벌"이어야 이어붙는다. */
@keyframes marquee-scroll {from {transform:translate3d(-50%,0,0);} to {transform:translate3d(0,0,0);}}
.sec-cases {padding:var(--space-120) 0 var(--space-140); background:var(--color-surface);}
.case-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-30);}
.case-card {display:block; min-width:0; border:1px solid var(--color-border); border-radius:8px; background:var(--color-bg); overflow:hidden; color:inherit; text-decoration:none; transition:box-shadow .25s, transform .25s;}
.case-card:hover {box-shadow:var(--shadow-md); transform:translateY(-4px);}
.case-card-img {aspect-ratio:16 / 10; overflow:hidden;}
.case-card-img img {width:100%; height:100%; object-fit:cover;}
.case-card-body {padding:var(--space-20) var(--space-30) var(--space-30);}
.case-card-meta {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;}
.case-card-date {color:var(--color-muted); font-size:var(--font-size-13); font-variant-numeric:tabular-nums;}
.case-card-tag {padding:4px 12px; border-radius:var(--radius-pill); background:var(--color-accent-soft); color:var(--color-accent); font-size:var(--font-size-12); font-weight:500; line-height:1.5em;}
.case-card-title {margin:0 0 6px; color:var(--color-ink); font-size:var(--font-size-18); font-weight:500; line-height:1.4em;}
.case-card-sub {margin:0; color:var(--color-muted); font-size:var(--font-size-14); line-height:1.6em;}
.cta-band {position:relative; margin:0; padding:var(--space-40) 0; background:#fafafa; overflow:hidden; text-align:left;}
.cta-band-inner {display:flex; justify-content:space-between; gap:var(--space-80);}
.cta-band-content {display:flex; flex:1 1 0; flex-direction:column; align-items:flex-start; gap:var(--space-60); min-width:0; padding:var(--space-120) 0;}
.cta-band-head {display:flex; flex-direction:column; gap:10px; align-items:flex-start;}
.cta-band-head .sec-label,
.cta-band-head .sec-title {margin:0;}
.cta-band-body {display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-60); width:fit-content; max-width:100%;}
.cta-band-desc {margin:0; max-width:100%; color:var(--color-body); font-size:var(--font-size-20); line-height:1.7em; letter-spacing:-.02em; word-break:keep-all;}
.cta-band-contacts {display:flex; flex-direction:column; align-items:flex-start; gap:12px; width:100%; margin:0; padding:16px 0 0; border-top:1px solid var(--color-border); list-style:none; box-sizing:border-box;}
.cta-band-contact {display:flex; align-items:center; gap:12px; color:var(--color-ink); font-size:var(--font-size-18); font-weight:500; line-height:1.78em; letter-spacing:-.02em;}
.cta-band-contact .icon {display:inline-flex; flex-shrink:0; align-items:center; justify-content:center;}
.cta-band-map {position:relative; flex:0 0 min(880px, 45%); width:min(880px, 45%); min-height:270px; max-width:100%; margin-left:auto; border-radius:8px; background:#f3f4f6; overflow:hidden;}
.cta-band-map img {position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover;}
@media (prefers-reduced-motion: reduce) {
	.main-visual .caption,
	.main-visual .hero-actions,
	.main-visual .hero-panel-bg img {transition:none; transform:none; opacity:1;}
	.marquee-track {animation:none;}
}