@charset "utf-8";
/* layout.css — header, footer, sub-visual, 공통 shell + 메인(index) 페이지 */

#skipToContent a {
z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px; height:50px; background:#21272e; color:#fff; font-size: var(--font-size-14); font-weight:bold; text-align:center; text-decoration:none; line-height: 3.57em; outline-color:#f37736}
.only-desktop {display:block}
.only-desktop-tablet {display:block}
.only-tablet-mobile {display:none}
.only-tablet {display:none}
.only-mobile {display:none}
#ws-wrapper {min-height:100vh}
#ws-header {position:fixed; top:0; left:0; z-index:100; overflow:auto; width:200px; height:100%; background:#fafafa; box-shadow:0 0 5px rgba(0,0,0,.2)}
.ws-menu .ui {display:block; padding: var(--space-12) 0; background:#5e31a1; color:#fff; font-size: var(--font-size-18); font-weight:700; line-height:1.5em; letter-spacing:-.03em; text-align:center; border-bottom:1px solid #3c2065}
.ws-menu .title {display:flex; align-items:center; justify-content:space-between; font-size: var(--font-size-15); font-weight:700; color:#fff; line-height:1.3em; padding: var(--space-10) var(--space-16); background:#7952b3; border-top:1px solid #3c2065}
.ws-menu .title:after {content:""; width:15px; height:15px; background:url("/images/arrow_down.svg") 50% 50% no-repeat}
.ws-menu .submenu {display:none}
.ws-menu .submenu .tt {padding: var(--space-4) var(--space-12); background:#837c8e; color:#fff; font-size: var(--font-size-14); font-weight:500; line-height:1.4em; letter-spacing:-.04em}
.ws-menu .submenu ul {display:flex; flex-wrap:wrap; padding: 0; list-style:none}
.ws-menu .submenu ul li {width:100%; border-bottom:1px solid #e5e5e5}
.ws-menu .submenu ul li.w50 {width:50%; border-right:1px solid #e5e5e5}
.ws-menu .submenu ul li.w50:nth-child(2n) {border-right:0}
.ws-menu .submenu ul li a {display:block; color:#333; text-decoration:none; font-size: var(--font-size-13); line-height:1.4em; letter-spacing:-.04em; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12)}
.ws-menu .submenu ul li a:hover,
.ws-menu .submenu ul li.active a {background:#eee; color:#653ba4; font-weight:500; padding-left: var(--space-12)}
.ws-menu.active .title {background:#6c42ab}
.ws-menu.active .title:after {transform:rotate(180deg)}
.ws-menu.active .submenu {display:block}
#ws-content {margin-left: var(--space-150); padding: var(--space-30)}
.ws-title {display:flex; align-items:center; padding-bottom: var(--space-16); margin-bottom: var(--space-50); border-bottom:1px solid #ddd}
.ws-title h2 {flex:1 1 auto; min-width:0; width:1%; font-size: var(--font-size-28); line-height:1.3em; letter-spacing:-.04em}
.btn-psd-download {display:inline-block; padding: var(--space-8) var(--space-20); font-family:"Roboto",sans-serif; color:#fff; font-size: var(--font-size-16); font-weight:500; line-height:1.3em; background:#7952b3; border-radius:4px}
.ws-real-cont {max-width:1200px; margin: 0 auto}
.syntaxhighlighter {position:relative; font-family: Consolas, Monaco, monospace; font-size: var(--font-size-14); line-height:1.33em; margin-top: var(--space-60)}
.syntaxhighlighter pre {padding: var(--space-20); background:#282b2e; color: #a9b7c6; overflow:auto; max-height:300px; margin: 0}
.syntaxhighlighter code {}
.code-tit {font-family:"Roboto",sans-serif; font-size: var(--font-size-18); font-weight:700; line-height:1.33em; margin-bottom: var(--space-10)}
.copy-code {position:absolute; top:0; right:0; font-size: var(--font-size-13); font-family:"맑은고딕"; letter-spacing:-.04em; color:red; background:transparent; border:0}
/* 서브 컨텐츠 */
.content-tab {margin-bottom: var(--space-30)}
.content-tab ul {display:flex; flex-wrap:wrap; gap: var(--space-4); padding: 0; list-style:none}
.content-tab ul li a {display:block; background:#555; color:#fff; padding: var(--space-4) var(--space-16); border-radius:6px}
.content-tab ul li.active a {background:#5e31a1}
.content-list {margin-bottom: var(--space-30)}
.content-list h3 {font-size: var(--font-size-24); line-height:1.3em; letter-spacing:-.04em; margin-bottom: var(--space-20)}
.content-list ul {display:flex; flex-wrap:wrap; margin: 0 calc(-1 * var(--space-18)); padding: 0; list-style:none}
.content-list ul li {width:20%; padding: 0 var(--space-18); margin-bottom: var(--space-34); text-align:center}
.content-list ul li a {display:block}
.content-list ul li .thumb {position:relative; padding-bottom: 64.8%; border:1px solid #222; border-bottom:0; border-radius:10px 10px 0 0; overflow:hidden}
.content-list ul li .thumb img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover}
.content-list ul li .tit {border-radius:0 0 10px 10px; color:#fff; line-height:1.33em; padding: var(--space-8); background:#222}
.content-list ul li .etc {margin-top: var(--space-8); font-size: var(--font-size-14); line-height:1.5em; color:red}
.content-list ul li .link {position:absolute; bottom:0; right:0; width:44px; height:44px; background:rgba(0,0,0,.5); border-radius:10px 0 0 0}
.content-list ul li .link svg {position:absolute; top:50%; left:50%; width:20px; height:20px; transform:translate(-50%,-50%); overflow:visible}
.content-list ul li .link svg path {transition:.2s}
.content-list ul li a:hover .link svg path:nth-child(1) {transform:translate(2px,-2px)}
.content-list ul li a:hover .link svg path:nth-child(2) {transform:translate(-2px,2px)}
.content-list ul li {width:50%; padding: 0 var(--space-8); margin-bottom: var(--space-16)}

/* 템플릿 */
.temp-tab {margin-bottom: var(--space-30)}
.temp-tab ul {display:flex; flex-wrap:wrap; padding: 0; list-style:none}
.temp-tab ul li {display:flex; align-items:center; padding: var(--space-4) 0}
.temp-tab ul li:before {content:''; width:1px; height:14px; margin: 0 var(--space-16); background:#ccc}
.temp-tab ul li:first-child::before {display:none}
.temp-tab ul li a {display:block; color:#242424}
.temp-tab ul li.active a {color:#5e31a1; font-weight:600; text-decoration:underline; text-underline-offset:0.25em}
.temp-list ul {display:flex; flex-wrap:wrap; margin: 0 calc(-1 * var(--space-16)); padding: 0; list-style:none}
.temp-list ul li {width:16.66666666%; padding: 0 var(--space-16); margin-bottom: var(--space-40)}
.temp-list ul li a {display:block}
.temp-list ul li .thumb {position:relative; margin-bottom: var(--space-10); border-radius:10px; background:#fff; overflow:hidden}
.temp-list ul li .thumb img {width:100%}
.temp-list ul li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.3); border-radius:10px}
.temp-list ul li .tit-wrap {display:flex; align-items:center; justify-content:space-between; padding: 0 var(--space-4)}
.temp-list ul li .tit {font-size: var(--font-size-16); font-weight:500; line-height:1.4em; letter-spacing:-.02em}
.temp-list ul li .links {display:flex}
.temp-list ul li .links a {display:flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left: var(--space-4); background:#fff; border:1px solid #ccc}
.temp-list ul li .links i {width:14px; height:14px; background-position:50% 50%; background-repeat:no-repeat; background-size:contain}
.temp-list ul li .links .icon-down {background-image:url('../images/sub/icon_down.svg')}
.temp-list ul li .links .icon-link {background-image:url('../images/sub/icon_link.svg')}
@media (min-width: 1920px) {
.temp-list ul li {width:14.2857142%; }
.temp-list ul li {width:50%; padding: 0 var(--space-8); margin-bottom: var(--space-24)}
}

.temp-view-wrap {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; overflow:auto; z-index:100}
.temp-view-wrap::-webkit-scrollbar {display:none}
.temp-view-inner {display:flex; width:100%; min-height:100%}
.temp-view-img {flex:1 1 auto; min-width:0; width:1%; padding: var(--space-50); background:#eff1f6; text-align:center}
.temp-view-cnt {position:sticky; top:0; left:0; align-self:self-start; width:25%; max-width:460px; padding: var(--space-50)}
.temp-view-cnt h2 {margin-bottom: var(--space-20); font-size: var(--font-size-24); line-height:1.33em; letter-spacing:-.02em}
.temp-view-cnt table {width:100%; border-collapse:collapse; border-spacing:0px; font-size: var(--font-size-15); line-height:1.5em; word-break:break-all}
.temp-view-cnt table th {width:120px; padding: var(--space-8) 0; vertical-align:top; text-align:left; font-size: var(--font-size-17); font-weight:600; background:none; border:0}
.temp-view-cnt table td {padding: var(--space-8) 0; vertical-align:top; border:0}
.temp-view-cnt table td a:hover {text-decoration:underline}
.temp-view-cnt .btns {display:flex; gap: var(--space-10); margin-top: var(--space-50)}
.temp-view-cnt .btns a {display:flex; align-items:center; justify-content:center; width:100%; height:48px; border:1px solid #ccc; font-weight:600; line-height:1.33em; letter-spacing:-.03em}
.temp-view-cnt .btns svg {width:24px; height:24px; margin-right: var(--space-8)}
.temp-view-cnt .btns a:hover {border-color:#000; color:#000}
.temp-view-close {position:fixed; top:0; right:0; width:100px; height:100px; z-index:10}
.temp-view-close svg {position:absolute; top:50%; left:50%; width:36px; height:36px; transform:translate(-50%,-50%)}
.contain {max-width:1460px; padding-left:var(--container-space); padding-right:var(--container-space); margin: 0 auto}
.wrap {width:100%; max-width:1440px; margin: 0 auto; padding:0 var(--container-space)}
.snap-main .wrap {max-width:1660px}
.visually-hidden {position:absolute; width:1px; height:1px; padding: 0; margin: -1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link {position:absolute; top:-100%; left:var(--space-16); z-index:1000; padding:var(--space-8) var(--space-16); background:var(--color-primary); color:var(--color-white)}
.skip-link:focus {top:var(--space-16)}
body.is-modal-open {overflow:hidden}
html.is-nav-open,
body.is-nav-open {overflow: hidden; overscroll-behavior: none}
.site-nav-overlay {display: none}
/* header */
.site-header {position:fixed; top:0; left:0; right:0; z-index:110; background:transparent; transition:background-color 0.25s ease, box-shadow 0.25s ease}
.site-header:hover,
.site-header:focus-within,
.site-header.is-mega-open {background:var(--color-white); box-shadow:0 1px 0 var(--color-border)}
.site-header[data-theme="light"]:not(:hover):not(:focus-within):not(.is-mega-open) {background:var(--color-white); box-shadow:0 1px 0 var(--color-border)}
.site-header__bar {position:relative; z-index:1; height:var(--header-height)}
.site-header__inner {display:flex; align-items:center; justify-content:space-between; height:100%; max-width: 1660px;}
.site-logo {display:flex; align-items:center; position:relative; flex-shrink:0; height:var(--logo-height)}
.site-logo__img {display:block; height:var(--logo-height); width:auto; max-width:var(--logo-width); object-fit:contain}
.site-logo__img--white {position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:1; transition:opacity 0.25s ease}
.site-logo__img--color {opacity:0; transition:opacity 0.25s ease}
.site-header[data-theme="light"]:not(:hover):not(:focus-within):not(.is-mega-open) .site-logo__img--white,
.site-header:hover .site-logo__img--white,
.site-header:focus-within .site-logo__img--white,
.site-header.is-mega-open .site-logo__img--white {opacity:0}
.site-header[data-theme="light"]:not(:hover):not(:focus-within):not(.is-mega-open) .site-logo__img--color,
.site-header:hover .site-logo__img--color,
.site-header:focus-within .site-logo__img--color,
.site-header.is-mega-open .site-logo__img--color {opacity:1}
.nav-toggle {display:none; flex-direction:column; justify-content:center; gap: var(--space-8); width:44px; height:44px; padding: var(--space-10); background:transparent; border:none; cursor:pointer}
.nav-toggle__bar {display:block; width:100%; height:2px; background:var(--color-white); transition:background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {transform:translateY(-4px) rotate(-45deg)}
.site-header[data-theme="light"]:not(:hover):not(:focus-within):not(.is-mega-open) .nav-toggle__bar,
.site-header:hover .nav-toggle__bar,
.site-header:focus-within .nav-toggle__bar,
.site-header.is-mega-open .nav-toggle__bar {background:var(--color-text-title)}
.site-nav__list {display:flex; align-items:center; gap:var(--space-64); list-style:none}
.site-nav__item {position:relative; display:flex; align-items:center; height:var(--header-height)}
.site-nav__link {display:block; padding:var(--space-8) 0; font-size: var(--font-size-20); line-height:1.4em; font-weight:600; color:var(--color-white); transition:color 0.2s ease}
.site-header[data-theme="light"]:not(:hover):not(:focus-within):not(.is-mega-open) .site-nav__link,
.site-header:hover .site-nav__link,
.site-header:focus-within .site-nav__link,
.site-header.is-mega-open .site-nav__link {color:var(--color-text-title)}
.site-nav__link:hover {color:var(--color-accent)}
.site-header:hover .site-nav__link:hover,
.site-header:focus-within .site-nav__link:hover,
.site-header.is-mega-open .site-nav__link:hover {color:var(--color-accent)}
.site-nav__link[aria-current="page"] {font-weight:600}
.site-header__mega {position:relative; z-index:0; height:0; overflow:hidden; background:var(--color-white); border-top:0 solid var(--color-border); transition:height 0.35s ease, border-top-width 0.2s ease}
.site-header:hover .site-header__mega,
.site-header:focus-within .site-header__mega,
.site-header.is-mega-open .site-header__mega {height:var(--mega-panel-height); border-top-width:1px}
.site-nav__sub {position:absolute; top:100%; left:50%; z-index:2; min-width:100%; padding:var(--space-32) 0; list-style:none; text-align:center; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%); transition:opacity 0.2s ease, visibility 0.2s ease}
.site-header:hover .site-nav__sub,
.site-header:focus-within .site-nav__sub,
.site-header.is-mega-open .site-nav__sub {opacity:1; visibility:visible; pointer-events:auto}
.site-nav__sub a {display:block; padding:var(--space-8) 0; font-size: var(--font-size-18); line-height:1.33em; white-space:nowrap; color:var(--color-text-muted); transition:color 0.2s ease}
.site-nav__sub a:hover {color:var(--color-accent)}
.site-nav__sub a[aria-current="page"] {color:var(--color-accent); font-weight:600}
@media (min-width:768px) {.site-nav__item {overflow:visible; } .site-nav__link {position:relative; overflow:visible; } .site-nav__link::before {content:""; position:absolute; top:0; left:-12px; width:8px; height:8px; background:var(--color-accent); opacity:0; transition:opacity 0.2s ease; pointer-events:none; } .site-nav__item:hover .site-nav__link::before, .site-nav__item:focus-within .site-nav__link::before {opacity:1; }}
/* main */
.main-visual {position:relative; overflow:hidden}
.main-visual .slick-slide {position:relative; height:100vh; overflow:hidden}
.main-visual .item {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden}
.main-visual .item .video-js,
.main-visual .item video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover}
.main-visual .item iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%)}
.main-visual .item img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover}
.main-visual .caption {position:absolute; top: 50%; left:50%; width: 100%; max-width: 1500px; padding:0 var(--container-space); transform: translate(-50%, -50%); color:#fff; z-index:40}
.main-visual .caption p {transition:1.2s; transform:translate(50px,0); opacity:0}
.main-visual .caption .txt1 {font-size: var(--font-size-60); font-weight:700; line-height: 1.2em; letter-spacing:-.03em}
.main-visual .caption .txt2 {font-size: var(--font-size-28); font-weight:600; line-height: 1.2em; letter-spacing:-.03em; margin-top: var(--space-30)}
.main-visual .controls {position:absolute; top: 50%; left:50%; width: 100%; max-width: 1600px; padding: 0 var(--space-100); transform: translate(-50%, -50%); display:flex; align-items:center; padding: 0 var(--space-50); margin-left: calc(-1 * var(--space-150)); color:#fff; z-index:40}
.main-visual .pager .current {display:inline-block; width:.6em}
.main-visual .progress {position:relative; margin: 0 var(--space-10); width:150px; height:2px; background:#fff}
.main-visual .progress-bar {position:absolute; top:0; left:0; height:100%; background:var(--primary-color)}
.main-visual .slide-btn {width:24px; height:24px; margin-right: var(--space-8); background-color:#000; background-position:50% 50%; background-repeat:no-repeat; border-radius:100%; border:0; overflow:hidden}
.main-visual .slide-prev {background-image:url("/images/main/mv-prev.png")}
.main-visual .slide-next {background-image:url("/images/main/mv-next.png")}
.main-visual .slide-stop {background-image:url("/images/main/mv-stop.png")}
.main-visual .slide-play {display:none; background-image:url("/images/main/mv-play.png")}
.main-visual .active .image {transform:scale(1)}
.main-visual .active .caption p {transform:translate(0,0); opacity:1}
.main-visual .active .caption .txt1 {transition-delay:.2s}
.main-visual .active .caption .txt2 {transition-delay:.5s}
.main-visual .scroll {position:absolute; bottom:80px; left:50%; width:20px; margin-left: calc(-1 * var(--space-10)); animation:scrollDown .9s linear infinite alternate; z-index:40}
.progress-bar.animated:not(.hero__control-progress) {animation:progressBar 1 linear}
.progress-bar.paused {animation-play-state:paused !important}
.progress-bar.play {animation-play-state:running !important}
@keyframes progressBar {0%{width:0; } 100%{width:100%; }}
@keyframes scrollDown {0%{transform:translateY(0); } 100%{transform:translateY(15px); }}
.btn-arrow {display: flex; align-items: center; gap: var(--space-8); width: fit-content; padding: var(--space-20) var(--space-34); border-radius: 100px; background: #CA484A; border: 1px solid #CA484A; color: #fff; font-size: var(--font-size-20); font-weight: 700; line-height: 1.7em; transition: .2s}
.btn-arrow:after {content: ''; display: block; width: 24px; height: 24px; background: url('/images/main/btn-arrow.svg') no-repeat center center / contain}
.btn-chk {display: flex; align-items: center; gap: var(--space-8); width: fit-content; padding: var(--space-20) var(--space-30); border-radius: 100px; background: #fff; border: 1px solid var(--dark-color); color: var(--dark-color); font-size: var(--font-size-18); font-weight: 700; line-height: 1.5556em; transition: .2s}
.btn-chk:before {content: ''; display: block; width: 24px; height: 24px; background: url('/images/main/btn-chk.svg') no-repeat center center / contain}
/* sub visual + location */
.sub-visual {position: relative; display: flex; flex-direction: column; justify-content: center; height: var(--sub-visual-height); min-height: var(--sub-visual-height); overflow: hidden; color: var(--color-white)}
.sub-visual__media {position: absolute; inset: 0}
.sub-visual__image {width: 100%; height: 100%; object-fit: cover; object-position: center center}
.sub-visual__overlay {position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35, 24, 21, 0.45) 0%, rgba(35, 24, 21, 0.75) 100%)}
.sub-visual__content {position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding-top: var(--header-height); padding-bottom: var(--sub-location-height); box-sizing: border-box; text-align: center}
.sub-visual__title {margin: 0 0 var(--space-16); font-size: var(--font-size-56); line-height: 1.25em; font-weight: 500; letter-spacing: -0.02em; color: var(--color-white)}
.sub-visual__breadcrumb {margin: 0}
.sub-visual__breadcrumb-list {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-10); list-style: none; margin: 0; padding: 0}
.sub-visual__breadcrumb-item {display: inline-flex; align-items: center; gap: var(--space-10); font-size: var(--font-size-16); line-height: 1.5em; color: rgba(255, 255, 255, 0.88)}
.sub-visual__breadcrumb-item:not(:last-child)::after {content: ">"; font-size: var(--font-size-14); line-height: 1; color: rgba(255, 255, 255, 0.55)}
.sub-visual__breadcrumb-link {display: inline-flex; align-items: center; color: rgba(255, 255, 255, 0.88); transition: color 0.2s ease}
.sub-visual__breadcrumb-link:hover {color: var(--color-white)}
.sub-visual__breadcrumb-link--home {line-height: 0}
.sub-visual__breadcrumb-link--home img {display: block; width: 16px; height: 16px}
.sub-visual__breadcrumb-current {color: var(--color-white); font-weight: 500}
.sub-location {position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: var(--sub-location-height); background: rgba(0, 0, 0, 0.45)}
.sub-location__inner {display: flex; align-items: stretch; height: var(--sub-location-height); max-width: 1460px}
.sub-location__list {width: 100%; height: var(--sub-location-height)}
.sub-location__list .swiper {width: 100%; height: 100%}
.sub-location__list .swiper-wrapper {height: 100%}
.sub-location__list .swiper-slide {width: auto; height: 100%}
.sub-location__link {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 var(--space-12); font-size: var(--font-size-16); line-height: 1.5em; font-weight: 500; color: rgba(255, 255, 255, 0.72); border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; white-space: nowrap}
.sub-location__link:hover {color: var(--color-white); background: rgba(255, 255, 255, 0.06)}
.sub-location__link.is-active,
.sub-location__link.active {color: var(--color-white); border-bottom-color: var(--color-accent); font-weight: 500; background: rgba(255, 255, 255, 0.08)}
.sub-head {margin-bottom: var(--space-80); text-align: center}
.sub-head__title {margin-bottom: var(--space-16); font-size: var(--font-size-40); line-height: 1.25em; font-weight: 600; color: var(--color-text-title); letter-spacing: -0.02em}
.sub-head__desc {max-width: 720px; margin-left: auto; margin-right: auto; font-size: var(--font-size-18); line-height: 1.56em; color: var(--color-text-body)}
/* legacy lnb (unmigrated sub pages) */
.lnb-wrap {position:relative; border-top:1px solid #ddd; border-bottom:1px solid #ddd}
.lnb {margin: 0 auto; max-width:1200px}
.lnb ul {display:flex}
.lnb ul li {flex:1; text-align:center; border-right:1px solid #ddd}
.lnb ul li:first-child {border-left:1px solid #ddd}
.lnb ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:var(--lnb-height); padding: 0 var(--space-16); color:#242424; font-size: var(--font-size-18); font-weight:500; line-height:1.2em; letter-spacing:-.03em}
.lnb ul li.active {background:var(--primary-color); border:0}
.lnb ul li.active a {color:#fff}
.sub-title {padding-bottom:var(--space-80); max-width:1440px; margin: 0 auto; text-align:center}
#contArea.wide .sub-title {padding-left:var(--container-space); padding-right:var(--container-space)}
.sub-title h2 {margin:0 0 var(--space-16); font-size: var(--font-size-42); line-height:1.3em; color:#2c2c2c}
.sub-title h2:last-child {margin-bottom: 0}
.sub-title__desc {font-size: var(--font-size-18); line-height: 1.56em; color:var(--color-text-body)}
#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:clamp(40px, calc( 120 / var(--inner) * 100vw ), 120px)}
.icon img {vertical-align: middle; margin-top: -.02em}
.txt-center {text-align: center}
.desc p:not(:last-child) {margin-bottom: 1.88em}
.pb100-40 {padding-bottom: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px)}
.pt100-40 {padding-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px)}
.border-box {position: relative}
.border-box:before {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #ddd}
.flex-wrap {display: flex}
.flex-center {display: flex; justify-content: center}
.flex-between {display: flex; justify-content: space-between}
.flex-mid {display: flex; align-items: center}
.flex-bottom {display: flex; align-items: flex-end}
.flex-column {display: flex; flex-direction: column}
.flex1 {flex: 1}
.fw400 {font-weight: 400}
.fw500 {font-weight: 500}
.fw600 {font-weight: 600}
.fw700 {font-weight: 700}
.primary-color {color: var(--primary-color)}
.secondary-color {color: var(--secondary-color)}
.dark-color {color: var(--dark-color)}
.white-color {color: #fff}
/* footer */
.site-footer {padding:var(--space-48) 0; background:#111111; color:rgba(255,255,255,0.7)}
.site-footer .contain {max-width: 1660px;}
.site-footer [data-scroll-reveal] {opacity:1; transform:none; transition:none}
.site-footer__top {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-16); margin-bottom:var(--space-24); padding-bottom:var(--space-24); border-bottom:1px solid rgba(255,255,255,0.15)}
.site-footer__brand {display:flex; align-items:center}
.site-footer__logo {height:var(--logo-height); width:auto; max-width:var(--logo-width); object-fit:contain}
.site-footer__meta {display:flex; flex-wrap:wrap; gap:var(--space-24); font-size: var(--font-size-14); line-height:1.57em}
.site-footer__address {margin-bottom:var(--space-4); font-style:normal; font-size: var(--font-size-16); line-height:1.5em; color:rgba(255,255,255,0.7)}
.site-footer__contact {display:flex; flex-wrap:wrap; gap:var(--space-24); margin-bottom:var(--space-24); font-size: var(--font-size-14); line-height:1.57em; color:rgba(255,255,255,0.7)}
.site-footer__contact a:hover {color:var(--color-white)}
.site-footer__bottom {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-16)}
.site-footer__copy {font-size: var(--font-size-12); line-height:1.67em; color:rgba(255,255,255,0.4)}
.site-footer__links {display:flex; flex-wrap:wrap; gap:var(--space-24); list-style:none; font-size: var(--font-size-14); line-height:1.43em}
.site-footer__links a {color:rgba(255,255,255,0.5); transition:color 0.2s ease}
.site-footer__links a:hover {color:var(--color-white)}
.scroll-top {display:flex; justify-content:center; align-items:center; z-index:80; position:fixed; bottom:var(--container-space); right:var(--container-space); width:70px; height:70px; border-radius:100%; border:1px solid #ddd; background-color:#23282c; color:#fff; font-size: var(--font-size-14); font-weight:500; line-height: 1.2em; text-align:center}
.scroll-top span:before {display:block; content:""; margin: 0 auto var(--space-10); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:7px solid #fff}
.notice-modal {position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:var(--space-24)}
.notice-modal[hidden] {display:none}
.notice-modal__overlay {position:absolute; inset:0; background:rgba(0,0,0,0.55)}
.notice-modal__panel {position:relative; z-index:1; width:100%; max-width:480px; padding:var(--space-32) var(--space-24) var(--space-24); background:var(--color-white); text-align:center}
.notice-modal__message {margin:0 0 var(--space-24); font-size: var(--font-size-16); line-height:1.75em; color:var(--color-text-body)}
.notice-modal__confirm {min-width:120px; background:var(--color-accent); color:var(--color-white); border:1px solid var(--color-accent)}
.btn {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: 48px; padding: 0 var(--space-24); border: 1px solid transparent; font-size: var(--font-size-16); line-height: 1.5em; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease}
.btn:hover {background: #231815; color: #ffffff; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none}
.btn:hover .btn__icon {filter: brightness(0) invert(1)}
.btn__icon {width: 16px; height: 16px; object-fit: contain; flex-shrink: 0}
.btn:has(.btn__icon) {padding-right: var(--space-20)}
.btn--lg {min-height: 48px; padding: 0 var(--space-32); font-size: var(--font-size-16); line-height: 1.5em}
.btn--block {display: flex; width: 100%}
.btn--primary {background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent)}
.btn--outline {background: rgba(255, 255, 255, 0.08); color: var(--color-white); border-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px)}
.btn.btn--outline:hover {background: rgba(255, 255, 255, 0.12); color: var(--color-white); border-color: var(--color-white); backdrop-filter: none; -webkit-backdrop-filter: none}
.btn.btn--outline:hover .btn__icon {filter: brightness(0) invert(1)}
/* ===== Main page (index) ===== */

/* Panel */

.panel {height: auto}
/* Scroll reveal — main & sub sections */
[data-scroll-reveal] {opacity: 0; transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1)}
[data-scroll-reveal="up"],
[data-scroll-reveal]:not([data-scroll-reveal="left"]):not([data-scroll-reveal="right"]):not([data-scroll-reveal="scale"]):not([data-scroll-reveal="soft"]):not([data-scroll-reveal="fade"]) {transform: translateY(48px)}
[data-scroll-reveal="soft"] {transform: translateY(24px); transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1), transform 1.05s cubic-bezier(0.16, 1, 0.3, 1)}
[data-scroll-reveal="fade"] {transform: none; transition: opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1)}
[data-scroll-reveal="left"] {transform: translateX(-48px)}
[data-scroll-reveal="right"] {transform: translateX(48px)}
[data-scroll-reveal="scale"] {transform: scale(0.94)}
[data-scroll-reveal].is-visible {opacity: 1; transform: none}
[data-scroll-delay="1"] {transition-delay: 0.12s}
[data-scroll-delay="2"] {transition-delay: 0.24s}
[data-scroll-delay="3"] {transition-delay: 0.36s}
@media (prefers-reduced-motion: reduce) {[data-scroll-reveal] { opacity: 1; transform: none; transition: none; }}
/* Hero */

.hero {position: relative; display: flex; align-items: center; box-sizing: border-box; min-height: 100vh; min-height: 100svh; margin-top: 0; overflow: hidden; --hero-slide-duration: 5s}
.hero__slides.swiper {position: absolute; inset: 0}
.hero__slides .swiper-slide {height: 100%}
.hero__slide {position: relative; height: 100%; width: 100%}
.hero__media {position: absolute; inset: 0; overflow: hidden}
.hero__image {width: 100%; height: 100%; object-fit: cover; transform: scale(1); transform-origin: center center; will-change: transform}
.hero__slides .swiper-slide-active .hero__slide--zoom .hero__image {animation: hero-image-zoom var(--hero-slide-duration) ease-out forwards}
.hero__slides .swiper-slide:not(.swiper-slide-active) .hero__slide--zoom .hero__image {animation: none; transform: scale(1)}
.hero:hover .swiper-slide-active .hero__slide--zoom .hero__image {animation-play-state: paused}
@keyframes hero-image-zoom {from { transform: scale(1); } to { transform: scale(1.08); }}
@media (prefers-reduced-motion: reduce) {.hero__slide--zoom .hero__image { animation: none !important; transform: scale(1) !important; }}
.hero__video {width: 100%; height: 100%; object-fit: cover; display: block; background: #000}
.hero__overlay {position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(35, 24, 21, var(--hero-overlay-left-strong)) 0%, rgba(35, 24, 21, var(--hero-overlay-left-mid)) var(--hero-overlay-left-stop-mid), rgba(35, 24, 21, var(--hero-overlay-left-light)) var(--hero-overlay-left-stop-light), rgba(35, 24, 21, 0) 100% ), linear-gradient( 180deg, rgba(35, 24, 21, var(--hero-overlay-top-light)) 0%, rgba(35, 24, 21, var(--hero-overlay-bottom-strong)) 100% )}
.hero__content {position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; width: 100%; box-sizing: border-box}
.hero__content[data-scroll-reveal] {transform: none}
.hero__content[data-scroll-reveal].is-visible {transform: none}
.hero__copy {position: relative; min-height: 220px}
.hero__copy-slide {position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease}
.hero__copy-slide.is-active {position: relative; opacity: 1; visibility: visible; transform: translateY(0)}
.hero__eyebrow {margin-bottom: var(--space-24); font-family: var(--font-family-eyebrow); font-size: var(--font-size-18); line-height: 1.22em; font-weight: 800; color: var(--color-accent); letter-spacing: 0.15em; opacity: 1}
.business__eyebrow,
.works__eyebrow,
.inquiry-panel__eyebrow,
.ceo-intro__eyebrow,
.location-intro__eyebrow {margin-bottom: var(--space-16); font-family: var(--font-family-eyebrow); font-size: var(--eyebrow-font-size); line-height: 1.38em; font-weight: 800; color: #999999; letter-spacing: 0.12em}
.brochure-panel__eyebrow {margin-bottom: var(--space-16); font-family: var(--font-family-eyebrow); font-size: var(--eyebrow-font-size); line-height: 1.38em; font-weight: 800; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.12em}
.hero__title {margin-bottom: var(--space-56); font-size: var(--font-size-60); line-height: 1.23em; font-weight: 600; color: var(--color-white); letter-spacing: -0.02em}
.hero__desc {max-width: 740px; margin-bottom: var(--space-64); font-size: var(--font-size-22); line-height: 1.36em; color: rgba(255, 255, 255, 0.9)}
.hero__control {position: absolute; top: 0; bottom: 0; right: calc(var(--content-side) + 30px); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-16); height: fit-content; margin-block: auto; --slide-duration: 5s}
.hero__control-current,
.hero__control-total {font-size: var(--font-size-14); line-height: 1; font-weight: 400; color: var(--color-white); font-variant-numeric: tabular-nums; letter-spacing: 0.08em}
.hero__control-track {position: relative; width: 1px; height: 120px; --hero-progress: 0}
.hero__control-track-bg {position: absolute; inset: 0; background: rgba(255, 255, 255, 0.35)}
.hero__control-progress {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-white); transform: scaleY(var(--hero-progress, 0)); transform-origin: top; will-change: transform}
.hero__control-nav {display: flex; flex-direction: column; align-items: center; gap: var(--space-8); margin-top: var(--space-4)}
.hero__control-btn {display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; background: transparent; cursor: pointer; transition: opacity 0.2s ease}
.hero__control-btn:hover {opacity: 0.65}
.hero__control-icon {display: block; width: 14px; height: auto; object-fit: contain; mix-blend-mode: screen}
.main-visual.hero {display: flex; align-items: center; min-height: 100vh; min-height: 100svh; margin-top: 0; --hero-slide-duration: 5s}
.main-visual.hero > .items {position: absolute; inset: 0; width: 100%}
.main-visual.hero .slick-list,
.main-visual.hero .slick-track,
.main-visual.hero .slick-slide,
.main-visual.hero .slick-slide > div,
.main-visual.hero .item {height: 100%}
.main-visual.hero .slick-slide {height: 100vh; height: 100svh; overflow: hidden}
.main-visual.hero .item {position: relative; overflow: hidden}
.main-visual.hero .hero__media {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; overflow: hidden}
.main-visual.hero .item img {position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; max-width: none; min-height: 100%; object-fit: cover; transform-origin: center center; will-change: transform}
.main-visual.hero .item video,
.main-visual.hero .item iframe {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; display: block; background: #000}
.main-visual.hero .hero__overlay {position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba(35, 24, 21, var(--hero-overlay-left-strong)) 0%, rgba(35, 24, 21, var(--hero-overlay-left-mid)) var(--hero-overlay-left-stop-mid), rgba(35, 24, 21, var(--hero-overlay-left-light)) var(--hero-overlay-left-stop-light), rgba(35, 24, 21, 0) 100% ), linear-gradient( 180deg, rgba(35, 24, 21, var(--hero-overlay-top-light)) 0%, rgba(35, 24, 21, var(--hero-overlay-bottom-strong)) 100% )}
.main-visual.hero .hero__content {position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; width: 100%; box-sizing: border-box; opacity: 1 !important; transform: none !important; pointer-events: none}
.main-visual.hero .hero__copy {position: relative; min-height: 220px; pointer-events: auto}
.main-visual.hero .hero__copy > * {opacity: 1; transform: none}
.main-visual.hero .caption {top: auto; left: auto; transform: none}
.main-visual.hero .caption p {transform: none; opacity: 1}
.main-visual.hero .slick-current.active .item--zoom .hero__image {animation: hero-image-zoom var(--hero-slide-duration) ease-out forwards}
.main-visual.hero .slick-current:not(.active) .item--zoom .hero__image {animation: none; transform: scale(1)}
.main-visual.hero:hover .slick-current.active .item--zoom .hero__image {animation-play-state: paused}
.main-visual.hero .visual-func.hero__control {position: absolute; z-index: 3; opacity: 1 !important; transform: none !important}
.main-visual.hero .hero__control-track {position: relative; width: 1px; height: 120px; margin: 0; background: transparent}
.main-visual.hero .hero__control-progress.progress-bar {position: absolute; inset: 0; width: 100% !important; height: 100% !important; background: var(--color-white) !important; transform: scaleY(0); transform-origin: top; will-change: transform}
.main-visual.hero .hero__control-progress.progress-bar.animated {animation-name: hero-slick-progress-y !important; animation-timing-function: linear !important; animation-fill-mode: forwards !important; animation-duration: var(--hero-slide-duration, 5s) !important; animation-iteration-count: 1 !important}
.main-visual.hero .hero__control-progress.progress-bar.paused {animation-play-state: paused !important}
.main-visual.hero .hero__control-progress.progress-bar.play {animation-play-state: running !important}
.main-visual.hero .slide-btn.slide-prev,
.main-visual.hero .slide-btn.slide-next {width: 28px; height: 28px; margin-right: 0; background: transparent; border-radius: 0; background-image: none}
.main-visual.hero .pager .current {width: auto; display: inline}
@keyframes hero-slick-progress-y {from { transform: scaleY(0); } to { transform: scaleY(1); }}
@keyframes hero-slick-progress-x {from { transform: scaleX(0); } to { transform: scaleX(1); }}
@media (prefers-reduced-motion: reduce) {.main-visual.hero .item--zoom .hero__image { animation: none !important; transform: scale(1) !important; } .main-visual.hero .hero__copy > * { opacity: 1; transform: none; }}
/* Business */

.business {position: relative; padding: var(--space-100) 0; background-color: #f8f8f8; background-image: linear-gradient(rgba(248, 248, 248, 0.84), rgba(248, 248, 248, 0.84)), url("/images/main/business-bg.png"); background-position: center; background-size: cover; background-repeat: no-repeat; --business-card-height: 430px}
.business__layout {display: grid; grid-template-columns: minmax(240px, 400px) minmax(0, 1fr); gap: var(--space-80); align-items: stretch; width: 100%}
.business__intro {min-width: 0; height: var(--business-card-height); max-height: var(--business-card-height); display: flex; align-items: center; justify-content: center; align-self: stretch; overflow: hidden; box-sizing: border-box}
.business__content {text-align: left}
.business__intro .business__content {flex: 0 0 auto; width: 100%; max-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: var(--space-16)}
.business__intro .business__eyebrow,
.works__title {margin-bottom: 0; font-family: var(--font-family-eyebrow); font-size: var(--font-size-40); line-height: 1.25em; font-weight: 700; color: #242424; letter-spacing: -0.02em}
.business__intro .business__desc {margin-bottom: var(--space-24)}
.business__intro .business__content .btn {align-self: flex-start; width: auto}
/* Section titles */

.business__title,
.inquiry-panel__title,
.brochure-panel__title {margin-bottom: var(--space-24); font-size: var(--font-size-40); line-height: 1.25em; font-weight: 700; letter-spacing: -0.02em}
.business__title,
.inquiry-panel__title {color: var(--color-text-title)}
.brochure-panel__title {color: var(--color-white); margin-bottom: var(--space-48)}
.business__desc {margin-bottom: var(--space-48); font-size: var(--font-size-18); line-height: 1.56em; color: var(--color-text-body)}
.business__cards {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; height: var(--business-card-height); max-height: var(--business-card-height); align-self: stretch; overflow: hidden}
.biz-card {position: relative; display: block; min-height: var(--business-card-height); overflow: hidden; color: var(--color-white)}
.biz-card__image {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease}
.biz-card:hover .biz-card__image {transform: scale(1.05)}
.biz-card__shade {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42)}
.biz-card__content {position: absolute; z-index: 1; padding: var(--space-40)}
.biz-card--center .biz-card__content {inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center}
.biz-card__title {display: block; margin-bottom: var(--space-16); font-size: var(--font-size-32); line-height: 1.31em; font-weight: 600; color: var(--color-white)}
.biz-card--center .biz-card__desc {opacity: 0; visibility: hidden; max-height: 0; overflow: hidden; transition: opacity 0.35s ease, visibility 0.35s ease, max-height 0.35s ease}
a.biz-card--center:hover .biz-card__desc,
a.biz-card--center:focus-within .biz-card__desc,
a.biz-card--center:focus-visible .biz-card__desc {opacity: 1; visibility: visible; max-height: 80px}
@media (hover: none) {.biz-card--center .biz-card__desc { opacity: 1; visibility: visible; max-height: none; }}
.biz-card__desc {display: block; font-size: var(--font-size-16); line-height: 1.62em; color: rgba(255, 255, 255, 0.88); word-break: keep-all}
.text-keep {white-space: nowrap}
.biz-card .btn.btn--outline {margin-top: var(--space-24); transition: margin-top 0.35s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease}
a.biz-card--center:hover .btn.btn--outline,
a.biz-card--center:focus-within .btn.btn--outline,
a.biz-card--center:focus-visible .btn.btn--outline {margin-top: var(--space-40)}
@media (hover: none) {.biz-card--center .btn.btn--outline { margin-top: var(--space-40); }}
a.biz-card:hover .btn.btn--outline {background: rgba(255, 255, 255, 0.12); color: var(--color-white); border-color: var(--color-white); backdrop-filter: none; -webkit-backdrop-filter: none}
/* Contact split — full bleed 50/50 */

.contact-split {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; background: var(--color-white)}
.contact-split__half {width: 100%; min-width: 0; box-sizing: border-box}
.contact-split__half--inquiry {display: flex; align-items: center; justify-content: flex-end; background: rgba(0, 0, 0, 0.04); padding: var(--space-100) var(--container-space); padding-right: var(--space-80)}
.inquiry-panel {display: grid; grid-template-columns: max-content 1fr; gap: var(--space-48); align-items: start; width: 100%; max-width: 720px}
.inquiry-panel__desc {margin-bottom: var(--space-32); font-size: var(--font-size-18); line-height: 1.56em; color: var(--color-text-body)}
.contact-info {list-style: none}
.contact-info__item {display: grid; grid-template-columns: 16px 1fr; gap: var(--space-16); align-items: start; padding: var(--space-8) 0}
.contact-info__icon {width: 16px; height: 16px; margin-top: var(--space-4); object-fit: contain}
.contact-info__value {font-size: var(--font-size-16); line-height: 1.5em; color: var(--color-text-body)}
.contact-info__value:hover {color: var(--color-accent)}
.inquiry-form {width: 100%; min-width: 0}
.inquiry-form__field {margin-bottom: var(--space-24)}
.inquiry-form__input,
.inquiry-form__textarea {width: 100%; padding: 0; border: none; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; color: var(--color-text-body)}
.inquiry-form__input {min-height: 44px}
.inquiry-form__input::placeholder,
.inquiry-form__textarea::placeholder {color: var(--color-placeholder)}
.inquiry-form__input:focus,
.inquiry-form__textarea:focus {outline: none; border-bottom-color: var(--color-accent)}
.inquiry-form__textarea {resize: none; min-height: 120px}
.contact-split__half--brochure {position: relative; width: 100%; min-width: 0; min-height: 558px}
.brochure-panel {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 558px; overflow: hidden; padding: 0; isolation: isolate}
.brochure-panel__bg {position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease}
.brochure-panel:hover .brochure-panel__bg {transform: scale(1.05)}
.brochure-panel__shade {position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(35, 24, 21, 0.52)}
.brochure-panel__content {position: relative; z-index: 2; max-width: 100%; padding: var(--space-64); text-align: center}
/* Main location (index — 오시는길 그리드) */

.location-section {padding: var(--space-100) 0; background: var(--color-white)}
.location-section .location-grid {align-items: stretch}
.location-section .location-grid__map {min-height: 480px}
.location-section .location-map,
.location-section .location-map__embed {height: 100%; min-height: 480px}
.location-section .location-map__frame {min-height: 480px}
/* Works (major construction status) */

.works {padding: var(--space-100) 0; background: #ffffff; overflow: visible; --works-stage-width: 1600px; --works-visible-count: 4; --works-gap: var(--space-24); --works-carousel-gap: var(--space-4); --works-shadow-padding: var(--space-20); --works-nav-size: var(--space-80)}
.works [data-scroll-reveal="soft"] {transform: translate3d(0, 48px, 0); transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1), transform 1.5s cubic-bezier(0.19, 1, 0.22, 1)}
.works [data-scroll-reveal="soft"].is-visible {opacity: 1; transform: none}
.works__carousel[data-scroll-reveal="soft"] {backface-visibility: hidden}
.works__stage {width: 100%; overflow: visible}
.works__head {display: flex; flex-direction: column; align-items: center; gap: var(--space-16); margin-bottom: var(--space-48); text-align: center}
.works__desc {margin: 0; font-size: var(--font-size-18); line-height: 1.56em; color: #454545}
.works__carousel {display: flex; flex-direction: row; align-items: center; gap: var(--works-carousel-gap); width: min( calc(var(--works-stage-width) + (var(--works-nav-size) * 2) + (var(--works-carousel-gap) * 2)), 100% ); margin: 0 auto}
.works:not(.is-slidable) .works__carousel {gap: 0; width: min(var(--works-stage-width), 100%)}
.works__nav {box-sizing: border-box; display: none; align-items: center; justify-content: center; flex: 0 0 var(--works-nav-size); width: var(--works-nav-size); height: var(--works-nav-size); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none}
.works.is-slidable .works__nav {display: inline-flex}
.works:not(.is-slidable) .works__viewport {max-width: 100%}
.works__nav img {display: block; width: calc(var(--works-nav-size) - 16px); height: calc(var(--works-nav-size) - 16px); object-fit: contain}
.works__nav:hover:not(:disabled) {opacity: 0.65}
.works__nav:disabled {opacity: 0.35; cursor: default; pointer-events: none}
.works__viewport {flex: 0 1 var(--works-stage-width); width: var(--works-stage-width); max-width: calc(100% - (var(--works-nav-size) * 2) - (var(--works-carousel-gap) * 2)); min-width: 0; overflow: hidden; padding: var(--space-16) var(--works-shadow-padding); margin: calc(var(--space-16) * -1) auto}
.works__viewport.swiper {overflow: hidden}
.works-swiper .swiper-slide {height: auto}
.works-swiper .swiper-slide-visible .work-card {box-shadow: 0 4px 16px rgba(35, 24, 21, 0.08)}
a.work-card,
.work-card {display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; background: #ffffff; box-shadow: none; transition: box-shadow 0.25s ease; color: inherit; text-decoration: none}
.work-card__media {position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #f5f5f5}
.work-card__image {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease}
.work-card:hover .work-card__image {transform: scale(1.05)}
.work-card__body {flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-16); padding: var(--space-32); background-color: #ffffff}
.work-card__title {margin: 0; font-size: var(--font-size-22); line-height: 1.27em; font-weight: 700; color: #242424; letter-spacing: -0.02em}
.work-card__meta {display: flex; flex-direction: column; gap: var(--space-8); margin: 0}
.work-card__row {display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-8); align-items: start; margin: 0; font-size: var(--font-size-16); line-height: 1.5em}
.work-card__row dt {margin: 0; color: #454545; font-weight: 500}
.work-card__row dd {margin: 0; color: #808080; font-weight: 400}
.location-grid {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-64); align-items: stretch; width: 100%}
.location-grid__info {height: fit-content}
.location-grid__map {display: flex; flex-direction: column; min-height: 0}
.location-intro {margin-bottom: var(--space-40); text-align: left}
.location-intro__title {margin: 0 0 var(--space-24); font-size: var(--font-size-32); line-height: 1.31em; font-weight: 600; color: var(--color-text-title); letter-spacing: -0.02em}
.location-intro__desc {margin: 0; font-size: var(--font-size-18); line-height: 1.56em; color: var(--color-text-body)}
.location-info-list {display: flex; flex-direction: column; gap: var(--space-32); margin: 0; padding: 0; list-style: none}
.location-info-item {display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-20); align-items: center}
.location-info-item__icon {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 80px; height: 80px; background: #ffffff; border: none; box-shadow: 0 2px 8px rgba(35, 24, 21, 0.1); transition: background-color 0.2s ease, box-shadow 0.2s ease}
.location-info-item__icon svg {display: block; width: 24px; height: 24px; stroke: var(--color-accent); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s ease}
.location-info-item:hover .location-info-item__icon {background: var(--color-accent); box-shadow: 0 2px 8px rgba(230, 0, 18, 0.2)}
.location-info-item:hover .location-info-item__icon svg {stroke: var(--color-white)}
.location-info-item__icon svg rect {fill: none}
.location-info-item__label {margin: 0 0 var(--space-4); font-size: var(--font-size-16); line-height: 1.5em; font-weight: 600; color: #454545; letter-spacing: 0.06em; text-transform: uppercase}
.location-info-item__value {margin: 0; font-size: var(--font-size-20); line-height: 1.4em; font-weight: 600; color: var(--color-text-title); transition: color 0.2s ease}
.location-info-item:hover .location-info-item__value {color: var(--color-accent)}
.location-info-item__value a {color: inherit; font-weight: inherit; transition: color 0.2s ease}
.location-info-item__value a:hover {color: var(--color-accent)}
.location-map {overflow: hidden; border: 1px solid var(--color-border); flex: 1; display: flex; flex-direction: column; min-height: 0}
.location-map__embed {width: 100%; flex: 1; display: flex; flex-direction: column; min-height: 0}
.location-map__frame {display: block; width: 100%; height: 100%; flex: 1; min-height: 0; border: 0; background: var(--color-surface, #f5f5f5)}