@charset "utf-8";  

/* 서브 레이아웃 */
.flex-wrapper {display:flex; width:100%; min-width:1200px; _min-height:100dvh;}

.body {flex:1 1 auto; min-width:0; width:1%; position:relative; display:flex; flex-direction:column; padding-top:var(--header-height);}
.body #header {padding-right:clamp(0px, calc(20 / var(--inner) * 100vw), 20px); position:fixed; width:auto; margin-left:360px; right:0;}
.body #header .contain {max-width:100%;}
.body #container {flex:1 1 auto; min-height:0; height:1%; position:relative;}

.content-wrap {max-width:1620px; padding:var(--space-50) var(--space-container) var(--space-100); _margin:10px;}

.sub-title {border-bottom:1px solid #000; padding-bottom:var(--space-20); margin-bottom:var(--space-30);}
.sub-title h2 {font-size:var(--font-size-30); line-height:1.3em; letter-spacing:-.03em;}
.sub-title h2.normal {font-weight: 400;}
.sub-title h2 .num {margin-left:5px; font-size:var(--font-size-16); font-weight: 400; line-height:1.3em;}

/* 공통 */
.sub-tab {margin:var(--space-50) 0; text-align:center;}
.sub-tab ul {display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-10);}
.sub-tab ul li a {display:block; color:#888; font-size:14px; font-weight: 500; line-height:30px; padding:0 24px; border:1px solid #ddd; background:#f8f8f8; border-radius:30px;}
.sub-tab ul li.active a {background:#062964; border-color:#062964; color:#fff;}

.doc-tit {margin-bottom:var(--space-20); font-size:var(--font-size-20); line-height:1.3em; letter-spacing:-.03em;}
.doc-tit .num {color:#666; font-size:14px; line-height:1.3em; margin-left:5px;}

.view-more {position:absolute; top:0; right:0; display:inline-flex; justify-content:center; align-items:center; width:32px; height:32px; background:#062964 url('/html/front/images/sub/plus-white.svg') 50% 50%/14px no-repeat; border:0;}

/* 서브 좌측 메뉴 */
.aside {position:relative; z-index:101; width:360px; background:#f5f5f5; border-right:1px solid #f5f5f5; min-width:300px;}
.aside-inner {position:fixed; top:0; left:0; z-index:101; width:360px;  background:#f5f5f5; align-self:self-start; display:flex; flex-direction:column; justify-content:space-between; height:100dvh;}
.aside-top {position:relative; padding:30px 26px 0 16px;}
.aside-logo {margin-bottom:var(--space-30);}

.aside-user {position:absolute; top:25px; right:25px;}
.aside-user-name {display:flex; justify-content:center; align-items:center; background:var(--color-home); border-radius:50px; width:35px; height:35px; color:#fff; font-size:var(--font-size-18); line-height:1.3em;}

.user-profile-dropdown.active {opacity:1; pointer-events:auto;z-index:100}
.user-profile-dropdown {position:absolute; left:0; margin-top:10px; min-width:190px; background:#fff; border-radius:10px; padding:15px; border:1px solid #ddd; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); opacity:0; pointer-events:none; transition:all 0.3s ease;}
.user-profile-dropdown .profile-header {margin-bottom:12px;}
.user-profile-dropdown .profile-header .name {font-size:var(--font-size-16); line-height:1.3em;}
.user-profile-dropdown .profile-header .email {font-size:var(--font-size-14); line-height:1.3em; letter-spacing:-.02em;}
.user-profile-dropdown .profile-menu {display:flex; flex-direction:column; gap:7px;}
.user-profile-dropdown .profile-menu .menu-link {display:flex; align-items:center; gap:5px; font-size:var(--font-size-16); line-height:1.3em;}
.user-profile-dropdown .profile-menu .menu-link .menu-icon {width:15px; height:15px; background-position:50% 50%; background-repeat:no-repeat;}
.user-profile-dropdown .profile-menu .menu-link .menu-icon.icon-person {background-image:url("/html/front/images/common/user-icon-1.png");}
.user-profile-dropdown .profile-menu .menu-link .menu-icon.icon-logout-arrow {background-image:url("/html/front/images/common/user-icon-2.png");}
.user-profile-dropdown .profile-menu .menu-link .menu-text {font-size:var(--font-size-16); font-weight:400; line-height:1.3em;}

.aside-nav {margin-top:var(--space-30);}
.aside-nav h2 {margin-bottom:var(--space-20); font-size:var(--font-size-20); font-weight:700; line-height:1.3em; padding-left:12px;}
.aside-nav ul li a {display:flex; align-items:center; gap:12px; padding:10px 20px 10px 12px; border-radius:50px; font-size:var(--font-size-16); line-height:1.25em;}
.aside-nav ul li .ico {width:18px; height:18px; margin-top:-.1em; background-position:50% 50%; background-size:contain; background-repeat:no-repeat;}
.aside-nav ul li .ico-paper {background-image:url("/html/front/images/common/nav-icon-paper.png");}
.aside-nav ul li .ico-office {background-image:url("/html/front/images/common/nav-icon-office.png");}
.aside-nav ul li .ico-search {background-image:url("/html/front/images/common/nav-icon-search.png");}
.aside-nav ul li .ico-trend {background-image:url("/html/front/images/common/nav-icon-trend.png");}
.aside-nav ul li .ico-ranking {background-image:url("/html/front/images/common/nav-icon-ranking.png");}
.aside-nav ul li .ico-bookmark {background-image:url("/html/front/images/common/nav-icon-bookmark.png");}
.aside-nav ul li .ico-inquiry {background-image:url("/html/front/images/common/nav-icon-inquiry.png");}
.aside-nav ul li .ico-user {background-image:url("/html/front/images/common/nav-icon-user.png");}
.aside-nav ul li .ico-withdrawal {background-image:url("/html/front/images/common/nav-icon-withdrawal.png");}
.aside-nav ul li .tit {flex:1 1 auto; min-width:0; width:1%;}
.aside-nav ul li .count {display:none; font-weight:500; letter-spacing:-.01em; color:#fff;}
.aside-nav ul li.active a , .aside-nav ul li.active:hover a{background:var(--color-lnb);_background:#dbe3f0;}
.aside-nav ul li.active .ico-paper {background-image:url("/html/front/images/common/nav-icon-paper-on.png");}
.aside-nav ul li.active .ico-office {background-image:url("/html/front/images/common/nav-icon-office-on.png");}
.aside-nav ul li.active .ico-search {background-image:url("/html/front/images/common/nav-icon-search-on.png");}
.aside-nav ul li.active .ico-trend {background-image:url("/html/front/images/common/nav-icon-trend-on.png");}
.aside-nav ul li.active .ico-ranking {background-image:url("/html/front/images/common/nav-icon-ranking-on.png");}
.aside-nav ul li.active .ico-bookmark {background-image:url("/html/front/images/common/nav-icon-bookmark-on.png");}
.aside-nav ul li.active .ico-inquiry {background-image:url("/html/front/images/common/nav-icon-inquiry-on.png");}
.aside-nav ul li.active .ico-user {background-image:url("/html/front/images/common/nav-icon-user-on.png");}
.aside-nav ul li.active .ico-withdrawal {background-image:url("/html/front/images/common/nav-icon-withdrawal-on.png");}
.aside-nav ul li.active .tit {  color:#fff; font-weight: 700;}
.aside-nav ul li.active .count {display:block;}

.aside-nav ul li:hover a {background : #fff}
.aside-nav ul li:hover .count {display:block;}

.top-search {position:relative; width:320px; height:38px;}
.top-search .input {width:100%; height:100%; border:1px solid #aaa; border-radius:50px; padding-left:15px; padding-right:3em; font-size:14px;}
.top-search .filter {position:absolute; top:0; right:clamp(40px, calc(44 / var(--inner) * 100vw), 44px); width:40px; height:100%; background:url("/html/front/images/common/search-filter.png") 50% 50%/contain no-repeat; border:0;}
.top-search .submit {position:absolute; top:50%; right:clamp(10px, calc(15 / var(--inner) * 100vw), 15px); width:clamp(16px, calc(20 / var(--inner) * 100vw), 20px); aspect-ratio:1/1; transform:translateY(-50%); background:url("/html/front/images/main/search.svg") 50% 50%/contain no-repeat; border:0;}

.top-search-wrap {position:relative; width:400px;}
.top-search-wrap .top-search {width:100%;}
.top-search-wrap .top-search .input {padding-right:95px;}
.top-search-wrap.active .top-search .input {border-radius:10px 10px 0 0;}
.top-search-wrap.active .top-search-filter {display:block;}

.top-search-filter {display:none; position:absolute; left:0; top:calc(100% - 1px); width:100%; padding:12px 15px 20px; background:#fff; border:1px solid #aaa; border-top:1px solid #ddd; border-radius:0 0 10px 10px;}
.top-search-filter .inner {display:flex; flex-direction:column; gap:15px;}
.filter-dropdowns {display:flex; flex-direction:column; gap:6px;}
.filter-row {display:flex; gap:10px;}
.filter-item {gap:6px; display:flex; align-items:center; font-size:14px; color:#555;}
.filter-item .input {display:block; width:100%; height:32px; padding:4px 10px; border:1px solid #aaa; border-radius:5px; font-size:14px; line-height:1.5em; color:#aaa;}
.filter-item select.input {background-position:right 9px center; background-size:10px auto;}
.filter-item .unit {min-width:2em;}

.amenities-title {margin-bottom:8px; color:#000; font-size:14px; font-weight:400; line-height:1.5em;}
.amenities-grid {display:flex; flex-wrap:wrap; gap:6px 14px; color:#555; font-size:14px; font-weight:400; line-height:1.5em;}
.amenity-item {display:flex; align-items:center; gap:3px;}
.amenity-item input[type=checkbox] {min-width:16px; width:16px; height:16px; margin:0 !important; background-color:#fff; border:1px solid #aaa; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.amenity-item input[type=checkbox]:checked {background:var(--color-primary) url("/html/front/images/bbs/checkbox.svg") 50% 50% no-repeat; border-color:var(--color-primary);}
.filter-buttons {display:flex; gap:10px; justify-content:center;}
.filter-buttons .btn {display:inline-flex; justify-content:center; align-items:center; width:98px; height:35px; border:0; border-radius:35px; font-size:14px; font-weight:700; color:#fff; line-height:1.25em;}
.filter-buttons .btn-search {background:#487cd3;}
.filter-buttons .btn-close {background:#aaa;}

.aside-scroll {flex:1 1 auto; min-height:0; height:1%; overflow-y:auto;}
.aside-scroll::-webkit-scrollbar {width:6px; height:6px; background-color:transparent;}
.aside-scroll::-webkit-scrollbar-thumb {background:rgba(0,0,0,.1); border-radius:5px;}
.aside-scroll .aside-top {padding-top:0;}

.aside-office-list {
    margin-top:var(--space-20);
    flex:1 1 auto;
    min-height:0;
    height:1%;
    /*overflow-y:auto;  hidden에서 auto로 변경 */
    border-top:1px solid #ddd; /* border 추가 */
    border-bottom:1px solid #ddd; /* border 추가 */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

.aside .aside-office-list {overflow:unset !important; height:1% !important;}

.aside-office-list::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Opera */
}
.aside-office-list .end-message { text-align: center; font-size: var(--font-size-16);} /* 마지막 목록일 때 */
.aside-office-list .no-data-message { text-align: center; font-size: var(--font-size-16);} /* 검색 결과가 없을때 */
.aside-office-list-items {
    /* height:100%; 제거 */
    /* overflow-y:auto; 제거 */
    /* border-top:1px solid #ddd; 제거 - 부모로 이동 */
    /* border-bottom:1px solid #ddd; 제거 - 부모로 이동 */
    background:#fff;
}

/* .aside-office-list-items 내부에 내용이 없으면 부모의 border-bottom 제거 */
.aside-office-list:has(.aside-office-list-items:empty) {
    border-bottom:0;
}
/* 스크롤바 스타일을 .aside-office-list로 이동 
.aside-office-list::-webkit-scrollbar {width:5px; height:5px; background-color:transparent;}
.aside-office-list::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.2); border-radius:5px;}*/
/*
.aside-office-list {margin-top:var(--space-20); flex:1 1 auto; min-height:0; height:1%;}
.aside-office-list-items {max-height:100%; overflow-y:auto; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background:#fff;}
.aside-office-list-items::-webkit-scrollbar {width:5px; height:5px; background-color:transparent;}
.aside-office-list-items::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.2); border-radius:5px;} */
.aside-office-list-item {position:relative; padding:15px; border-bottom:1px solid #ddd; background:#fff;}
.aside-office-list-item:hover, .aside-office-list-item.active  {background: #f8f8f8;}
.aside-office-list-item .cont-wrap {display:flex; align-items:center; gap:10px;}
.aside-office-list-item .img {position:relative; width:100px; aspect-ratio:1/1; overflow:hidden;}
.aside-office-list-item .img img {width:100%; height:100%; object-fit:cover;}
.aside-office-list-item .img .favorite-btn {color:#888;position:absolute; top:5px; right:5px; color:#fff; line-height:1em; background:transparent; border:0;}
.aside-office-list-item .img .favorite-btn.on {color:#e61655;}
.aside-office-list-item .info {flex:1 1 auto; min-width:0; width:1%;}
.aside-office-list-item .info .tit {margin-bottom:3px; font-size:var(--font-size-16); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.aside-office-list-item .info .addr {margin-bottom:10px; font-size:var(--font-size-14); font-weight:400; line-height:1.3em; letter-spacing:-.03em;}
.aside-office-list-item .info .marker {display:inline-block; width:12px; aspect-ratio:15/20; background:url("/html/front/images/common/map-marker.png") 50% 50%/contain no-repeat; vertical-align:middle; margin:-.02em 2px 0 0;}
.aside-office-list-item .info .details {font-size:var(--font-size-14); line-height:1.4em; letter-spacing:-.03em;}
.aside-office-list-item .info .details dl {display:flex; align-items:center; gap:4px;}
.aside-office-list-item .info .details dt {min-width:3em; color:#666; font-weight:400;}
.aside-office-list-item .tags {display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.aside-office-list-item .tags .tag {padding:2px 6px; background:#fff; border : 1px solid #777; border-radius:5px; font-size:var(--font-size-13); font-weight:400; line-height:1.3em; letter-spacing:-.03em; color:#777;}
.aside-office-list-item .etc {margin-top:10px; display:flex; align-items:center; flex-wrap:wrap; gap:.4em; font-size:var(--font-size-13); font-weight:400; line-height:1.3em; letter-spacing:-.03em; color:#0b5eea;}
.aside-office-list-item .more {position:absolute; bottom:15px; right:15px; width:30px; height:30px; border-radius:100%; background:#222 url('/html/front/images/sub/right-arrow-white.svg') 50% 50% no-repeat; background-size:70%; z-index:10; opacity:0; pointer-events:none;}
.aside-office-list-item:hover .tit {text-decoration:underline;}
.aside-office-list-item:hover .more {opacity:1; pointer-events:auto;}

.aside-bottom {padding:13px 16px; background:#f0f1f3;}

.btn-office-apply {display:flex; justify-content:center; align-items:center; margin:0 auto; gap:10px; width:clamp(150px, calc(220 / var(--inner) * 100vw), 220px); height:clamp(40px, calc(55 / var(--inner) * 100vw), 55px); background:var(--color-primary); border-radius:70px; color:#fff; font-size:var(--font-size-18); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}

.btn-office-register {display:inline-flex; vertical-align:middle; align-items:center; gap:10px; font-size:var(--font-size-16); font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.btn-office-register img {width:16px;}

/* 오피스 상세 */
.office-heading .title-area {display:flex; justify-content:space-between; align-items:flex-end; gap:10px 20px;}
.office-heading .title-area .left {display:flex; flex-wrap:wrap; align-items:flex-end; gap:5px 10px;}
.office-heading .title-area .right {display:flex; align-items:center; gap:16px;}
.office-heading .office-name {font-size:var(--font-size-30); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.office-heading .office-address {font-size:var(--font-size-16); line-height:1.4em; letter-spacing:-.02em;}
.office-heading .office-type-tag {display:flex; flex-wrap:wrap; gap:6px;}
.office-heading .office-type-tag span {display:inline-block; padding:4px 6px; background:#4177ed; color:#fff; border-radius:5px; font-size:var(--font-size-13); line-height:1.2em; letter-spacing:-.02em;}
.office-heading .share-btn {border:0; background:none; line-height:0; color:#777;}
.office-heading .share-btn:hover {color:#555;}
.office-heading .favorite-btn {color:#888; background:none; border:0; font-size:24px; line-height:1em; transition:all 0.2s ease; cursor:pointer;}
.office-heading .favorite-btn.on {color:#e61655 !important;}
.office-heading .favorite-btn:hover {color:#555;}
.office-heading .text-area {border-top:1px solid #000; padding-top:16px; margin-top:16px;}

.office-detail {display:flex; gap:32px; margin-top:var(--space-40);}
.office-detail-left {width:40%; max-width:480px; min-width:480px;}
.office-detail-right {flex:1 1 auto; min-width:0; width:1%;}

.office-summary {background:#f5f5f5; margin-bottom:40px;}

.office-gallery {position:relative;}
.office-gallery .gallery-tabs {position:absolute; top:0; left:0; z-index:10; display:flex;}
.office-gallery .gallery-tabs .tab-btn {display:flex; justify-content:center; align-items:center; width:55px; height:27px; border:0; background:#000; font-size:var(--font-size-14); font-weight:700; color:#fff; cursor:pointer; transition:all 0.3s ease;}
.office-gallery .gallery-tabs .tab-btn.active {background:#e61655; color:#fff;}
.office-gallery-swiper {position:relative; overflow:hidden;}
.office-gallery-swiper .swiper-slide img {width:100%; aspect-ratio:480/360; object-fit:cover;}
.office-gallery-swiper .swiper-button-prev,
.office-gallery-swiper .swiper-button-next {width:30px; height:30px; background:transparent; border-radius:0; color:#fff; font-size:var(--font-size-18); font-weight:700; transition:all 0.3s ease;}
.office-gallery-swiper .swiper-button-prev {left:0;}
.office-gallery-swiper .swiper-button-next {right:0;}
.office-gallery-swiper .swiper-button-prev:after,
.office-gallery-swiper .swiper-button-next:after {font-size:inherit; font-weight:inherit;}
.office-gallery-swiper .swiper-pagination {bottom:20px; line-height:0;}
.office-gallery-swiper .swiper-pagination .swiper-pagination-bullet {width:8px; height:8px; border-radius:8px; background:#fff; opacity:.7;}
.office-gallery-swiper .swiper-pagination .swiper-pagination-bullet-active {width:20px; opacity:1;}

.rent-calculator {background:#f5f5f5; padding:var(--space-30);}

.calculator-header {display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:15px;}
.calculator-header h2 {font-size:var(--font-size-24); line-height:1.3em;}
.calculator-header p {font-size:var(--font-size-14); line-height:1.3em;}

.calculator-selector {position:relative; margin-bottom:var(--space-15);}
.calculator-selector .area-display { margin-bottom:var(--space-15); font-size:var(--font-size-14); line-height:1.3em;}
.calculator-selector .area-display .area-label {margin-right:4px;}
.calculator-selector .area-display strong {font-size:var(--font-size-30); font-weight:700; color:#e61655;}
.calculator-selector .slider-labels {position:absolute; top:0; right:0;}
.calculator-selector .slider-labels .max-label {display:inline-block; margin-right:4px; font-size:var(--font-size-14);}
.calculator-selector .slider-labels .max-value {display:inline-block; background:#fff; padding:2px 14px; line-height:1.5em; border:1px solid #ddd; border-radius:5px;}
.calculator-selector .slider-container {position:relative;}
.calculator-selector .area-slider {width:100%; height:9px; background:#e8e8ea; border:1px solid #ddd; outline:none; -webkit-appearance:none;}
.calculator-selector .area-slider::-webkit-slider-thumb {width:24px; height:24px; background-image: linear-gradient(to bottom, #487cd3, #004a99); border-radius:50%; cursor:pointer; -webkit-appearance:none; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.2);}
.calculator-selector .area-slider::-moz-range-thumb {width:24px; height:24px; background-image: linear-gradient(to bottom, #487cd3, #004a99);  border-radius:50%; cursor:pointer; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.2);}
.calculator-selector .slider-instruction {font-size:var(--font-size-12); text-align: center; margin-top:5px;}

.rent-details {margin-bottom:var(--space-30);}
.rent-details .vat-note {font-size:var(--font-size-14); line-height:1.3em; color:#555; text-align:right; margin-bottom:8px;}
.rent-details .rent-items {display:grid; grid-template-columns:repeat(2,auto); border-top:1px solid #aaa;}
.rent-details .rent-item {display:flex; align-items:center; justify-content: space-between; gap:10px; padding:7px 16px; border-bottom:1px solid #ddd; font-size:var(--font-size-14); line-height:1.5em;}
.rent-details .rent-label {font-weight:500;}
.rent-details .rent-value {display:flex; align-items:center; gap:5px;}
.rent-details .rent-value .val {display:inline-block; width:66px; background:#fff; border:1px solid #ddd; border-radius:5px; padding:6px 8px; text-align:right;}
.rent-details .disclaimer {margin-bottom:var(--space-30); padding:6px 4px 0; font-size:12px; color:#555; line-height:1.5em;}

.agency-inquiry {margin-bottom:20px;}
.agency-inquiry h2 {margin-bottom:var(--space-10); font-size:var(--font-size-20); line-height:1.3em;}
.agency-inquiry p {font-size:14px; line-height:1.5em;}

.agency-info {display:flex; align-items: flex-start; gap:var(--space-20); margin-bottom:var(--space-30);}
.agency-info .agency-logo {width:88px; aspect-ratio:1; border-radius:50%; overflow:hidden; background:#fff; border:1px solid #e0e0e0; padding:0 10px}
.agency-info .agency-logo img {width:100%; height:100%; object-fit:contain;}
.agency-info .agency-details {flex:1 1 auto; min-width:0; width:1%; padding-top:var(--space-15);}
.agency-info .agency-details h3 {font-size:var(--font-size-18); font-weight:700; line-height:1.3em; margin-bottom:5px;}
.agency-info .agency-details .name {font-size:var(--font-size-14); line-height:1.4em; margin-bottom:12px;}
.agency-info .agency-details .info-arae {display:flex; margin-top:4px; font-size:var(--font-size-14); font-weight:500; line-height:1.4em;}
.agency-info .agency-details .info-label {width:clamp(72px, calc(110 / var(--inner) * 100vw), 110px); color:#888;}
.agency-info .agency-details .cost-arae { font-size:14px; line-height:1.5em;}
.agency-info .agency-details .cost-label {margin-right:8px; color:#888; font-weight:500;}
.agency-info .agency-details .cost-value strong {color:#e61655; font-size:30px; line-height:1em;}

.inquiry-btn {display:flex; gap:8px; align-items:center; justify-content:center; width:100%; max-width:200px; margin:0 auto; padding:var(--space-10) var(--space-24); background:var(--color-primary); color:#fff; border:none; border-radius:100px; font-size:var(--font-size-16); font-weight:700; text-align:center; cursor:pointer; transition:all 0.3s ease;}
.inquiry-btn:hover {background:var(--color-primary-over); transform:translateY(-2px); box-shadow:0 4px 12px rgba(26,79,167,0.3);}
.inquiry-btn img {width:16px;}

.btn-write {display:inline-flex; align-items:center; gap:4px; padding:4px 8px; background:var(--color-primary); border-radius:5px; color:#fff; font-size:var(--font-size-13); line-height:1.5em; letter-spacing:-.03em;}
.btn-write img {width:12px;}

.detail-article {position:relative; margin-bottom:40px;}

.detail-trends .items {display:grid; gap:10px;}
.detail-trends .item {border:1px solid #aaaaaa; border-radius:5px; padding:14px;}
.detail-trends .user-area {display:flex; justify-content:space-between; align-items:center; font-size:13px; line-height:1.5em; margin-bottom:14px;}
.detail-trends .user-area .label {display:inline-block; font-size:12px; color:#fff; line-height:1.5em; background:#aaaaaa; border-radius:4px; padding:2px 6px; margin-right:6px;}
.detail-trends .user-area .name {margin-right:5px;}
.detail-trends .user-area button {display:inline-block; background:none; border:0;}
.detail-trends .user-area button img {width:16px; height:auto;}
.detail-trends .user-area .bt-like.on {color:#e61655}
.detail-trends .text-arae {font-size:14px; line-height:1.5em; max-height:calc(1.5em * 3); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.detail-trends .img-area {margin-top:12px;}

.detail-heading {display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px;}
.detail-heading h3 {font-size:var(--font-size-20); line-height:1.3em;}
.detail-heading h3 small {margin-left:.4em; color:#666; font-size:var(--font-size-14); line-height:1.3em; font-weight:200;}

.detail-table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #aaa; line-height:1.5em;}
.detail-table th {padding:10px 20px; background:#f5f5f5; border-bottom:1px solid #ddd; font-weight:500; text-align:left;}
.detail-table td {padding:10px 20px; border-bottom:1px solid #ddd;}
.detail-table.centered th {text-align:center;}
.detail-table.centered td {text-align:center;}
.detail-table .small-text {font-size:14px; line-height:1.5em; margin-top:1.2em;}

.detail-map {position:relative; width:100%; height:300px; margin-top:10px; background:#eee;}
.detail-map > div {position:absolute; inset:0; width:100% !important; height:100% !important;}

.detail-office-info {border-top:1px solid #aaa;}
.detail-office-item {display:flex; gap:20px; border-bottom:1px solid #ddd; padding:20px 0;}
.detail-office-item .img-area {width:30%; max-width:200px;}
.detail-office-item .img-area img {width:100%; height:100%; object-fit:cover;}
.detail-office-item .cnt-area {flex:1 1 auto; min-width:0; width:1%; line-height:1.3em;}
.detail-office-item .cnt-area .title {margin-bottom:10px; font-size:var(--font-size-20); font-weight:700; line-height:1.3em;}
.detail-office-item .cnt-area .meta {display:flex; flex-direction:column; gap:3px; margin-bottom:10px;}
.detail-office-item .cnt-area .meta .meta-row {display:flex; gap:10px;}
.detail-office-item .cnt-area .desc {margin-bottom:10px; max-height:calc(1.3em * 2); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.detail-office-item .cnt-area .share-stats {display:flex; flex-wrap:wrap; gap:6px 22px; margin-bottom:10px;}
.detail-office-item .cnt-area .share-stats strong {margin-left:2px;}
.detail-office-item .cnt-area .btn {display:inline-block; padding:8px 20px; background:var(--color-primary); color:#fff; border-radius:50px; font-weight:700;}

.detail-recommend {display:grid; gap:20px; grid-template-columns:repeat(3,1fr);}
.detail-recommend .link-item {border-radius:15px; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);}
.detail-recommend .link-item .img {aspect-ratio:1/1;}
.detail-recommend .link-item .img img {width:100%; height:100%; object-fit:cover; border-top-left-radius:15px; border-top-right-radius:15px;}
.detail-recommend .link-item .tit {display:flex; justify-content:center; text-align:center; padding:14px; font-size:var(--font-size-18); line-height:1.3em; word-break:break-all;}

.office-introduce {font-size:var(--font-size-18); line-height:1.6em;}

.office-amenities {display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:20px 20px 20px 40px; border-top:1px solid #aaa; border-bottom:1px solid #ddd;}
.office-amenitie {display:flex; align-items:center; gap:10px;}
.office-amenitie .icon {width:35px;}
.office-amenitie .text {flex:1 1 auto; min-width:0; width:1%;}

/* 지도 */
.btn-map-view {position:fixed; right:0; top:60%; z-index:61; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:var(--font-size-14); line-height:1.3em; color:#fff; text-align:center; background:#000; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4); width:68px; aspect-ratio:1/1; border:0;}

#search-map {position:fixed; left:360px; right:0; top:var(--header-height); bottom:0; z-index:60; transition:transform 0.7s ease; -webkit-transform:translateX(100%); transform:translateX(100%);}

html.map-opened,
html.map-opened body {overflow:hidden;}
html.map-opened #search-map {-webkit-transform:translateX(0); transform:translateX(0);}
html.map-opened .btn-map-view img {-webkit-transform:scaleX(-1); transform:scaleX(-1);}

/* 간편 오피스 탐색 */
.select-area .select-station {display:inline-flex; align-items:center; gap:7px; padding:5px 14px; background:#487cd3; border:0; border-radius:60px; text-align:center; letter-spacing:-.03em; color:#fff; font-size:16px; line-height:1.5em;}
.select-area .select-station:after {content:''; display:block; margin:-.1em 0 0 0; width:15px; height:15px; background:url('/html/front/images/sub/delete-white.svg') 50% 50%/contain no-repeat;}
.office-search-wrap {max-width:520px; margin:10px;}
.office-search-item {border:1px solid #aaaaaa; margin-bottom:-1px;}
.office-search-item .toggle {display:flex; justify-content:space-between; align-items:center; width:100%; padding:24px 24px; background:none; border:0; font-size:var(--font-size-20); line-height:1.3em; color:#aaa; letter-spacing:-.03em;}
.office-search-item .content {display:none;}
.office-search-item .content .inner-wrap {display:flex; flex-direction: column; gap:16px; padding:5px 0 3px 0;}
.office-search-item .content .text {color:#555; line-height:1.5em; letter-spacing:-.03em;}
.office-search-item .select-options {display:flex; flex-wrap:wrap; gap:12px;}
.office-search-item .select-option {display:inline-block; padding:10px 20px; background:#fff; border:1px solid #ddd; border-radius:60px; text-align:center;  font-size:16px; line-height:1.5em; letter-spacing:-.03em;}
.office-search-item .select-option.selected {border-color:#1864eb; color:#1864eb; font-weight:500;}

.office-search-item .select-subway {display:flex; flex-wrap:wrap; gap:10px;}
.office-search-item .select-station {display:inline-flex; align-items:center; gap:7px; padding:5px 14px; background:#487cd3; border:0; border-radius:60px; text-align:center; letter-spacing:-.03em; color:#fff; font-size:16px; line-height:1.5em;}
.office-search-item .select-station:after {content:''; display:block; margin:-.1em 0 0 0; width:15px; height:15px; background:url('/html/front/images/sub/delete-white.svg') 50% 50%/contain no-repeat;}

.office-search-item.active {position:relative; padding:24px 24px; border:1px solid #1864eb; background:#f2f7ff;}
.office-search-item.active .toggle {padding:0; color:#1864eb; font-weight: 700;}
.office-search-item.active .toggle svg {-webkit-transform:scaleY(-1); transform:scaleY(-1);}

.modal-filter {margin-bottom:35px;}
.modal-filter:last-child {margin-bottom:0;}
.modal-filter-title {margin-bottom:12px; font-size:var(--font-size-18); font-weight:700; line-height:1.3em;}
.modal-filter-list {display:flex; flex-wrap:wrap; gap:12px;}
.modal-filter-list .filter-item input {display:none;}
.modal-filter-list .filter-item label {display:inline-block; padding:9px 20px; background:#fff; border:1px solid #ddd; border-radius:60px; text-align:center;  font-size:16px; line-height:1.5em; letter-spacing:-.03em; cursor:pointer;}
.modal-filter-list .filter-item input:checked + label {border-color:#1864eb; color:#1864eb; font-weight:500;}

.filter-subways {display:flex; gap:15px;}
.filter-subway {width:50%; max-width:235px; position:relative;}
.filter-subway .input {display:flex; align-items:center; gap:6px; height:45px; padding:0 50px 0 14px; border-radius:10px; overflow:hidden; background:url('/html/front/images/bbs/select2.png') right 13px center/14px auto no-repeat; color:#000;}
.filter-subway .input .circle {width:12px; height:12px; background:#aaa; border-radius:100%;}
.filter-subway .input b {font-weight:500;}
.filter-subway ul {display:none; position:absolute; top:calc(100% - 1px); left:0; width:100%; max-height:250px; overflow:auto; padding:4px 0; border:1px solid #ddd; border-radius:10px; background:#fff;}
.filter-subway ul::-webkit-scrollbar {width:5px; height:5px; background-color:transparent;}
.filter-subway ul::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.2); border-radius:5px;}
.filter-subway ul li {padding:11px 14px; display:flex; align-items:center; gap:6px; line-height:1.5em; font-size:16px; letter-spacing:-.03em; transition:.2s;}
.filter-subway ul li:hover {background:#dbe3f0;}
.filter-subway ul li .circle {width:12px; height:12px; background:#aaa; border-radius:100%;}
.filter-subway ul li input[type="checkbox"] {-webkit-appearance:none; width:18px; height:18px; background-color:#fff; border:1px solid #aaa; }
.filter-subway ul li input[type="checkbox"]:checked {background:var(--color-primary) url("/html/front/images/bbs/checkbox.svg") 50% 50% no-repeat; border-color:var(--color-primary);}
.filter-subway ul li label {flex:1 1 auto; min-width:0; width:1%;}

/* 사무실찾기 신청 */
.apply-form {display:grid; gap:40px 0;}
.apply-form .required {color:#e61655;}
.apply-form .title {margin-bottom:var(--space-16);}
.apply-form .title .doc-tit {margin-bottom:0;}
.apply-form .title .doc-desc {color:#555; line-height:1.5em; margin-top:4px; font-size:var(--font-size-14); }
.apply-form .area-selection {display:flex; align-items:flex-start; gap:20px;}
.apply-form .btn-area-select {display:inline-block; padding:10px 20px; border:1px solid #0b5eea; border-radius:50px; background:#fff; text-align:center; color:#0b5eea; font-weight:500; font-size:16px; line-height:1.5em; transition:.2s;}
.apply-form .btn-area-select:hover {background:#0b5eea; color:#fff;}
.apply-form .select-subway {flex:1 1 auto; min-width:0; width:1%; padding:6px 0; display:flex; flex-wrap:wrap; gap:10px;}
.apply-form .select-station {display:inline-flex; align-items:center; gap:7px; padding:5px 14px; background:#487cd3; border:0; border-radius:60px; text-align:center; letter-spacing:-.03em; color:#fff; font-size:16px; line-height:1.5em;}
.apply-form .select-station:after {content:''; display:block; margin:-.1em 0 0 0; width:15px; height:15px; background:url('/html/front/images/sub/delete-white.svg') 50% 50%/contain no-repeat;}
.apply-form .input-item {margin-bottom:12px; display:flex; align-items:center; gap:20px;}
.apply-form .input-item:last-child {margin-bottom:0;}
.apply-form .input-item .cnt {flex:1 1 auto; min-width:0; width:1%; display:flex; align-items:center; gap:10px;}
.apply-form .input-item .cnt span {display:flex; align-items:center; gap:6px;}
.apply-form .input {width:100%; _max-width:143px; height:41px; border-color:#aaa; border-radius:5px;}
.apply-form textarea.input {width:100%; max-width:none; height:190px;}
.apply-form .checkbox-item {margin-left:60px;}
.apply-form .movein-option {display:flex; flex-wrap:wrap; align-items:center; gap:26px;}
.apply-form .movein-option .item {display:flex; align-items:center; gap:20px;}

/* 글 작성 - 커스텀 */
.form-container {max-width:520px; margin:0 auto;}

.form-header {margin-bottom:20px;}
.form-header h2 {font-size:var(--font-size-30); font-weight:700; line-height:1.3em;}
.form-header h2:after {content:''; display:block; width:100%; height:1px; background:#000; margin:20px 0 16px;}
.form-header p {line-height:1.5em;}

.form-bd-name {display:flex; align-items:center; gap:10px; margin-bottom:20px; border-radius:5px; background:#ecf3ff; padding:11px 20px; font-size:var(--font-size-20); line-height:1.3em; color:#0b5eea;}
.form-bd-name img {width:24px; height:auto;}
.form-bd-name span {flex:1 1 auto; min-width:0; width:1%;}

.form-input-area {display:grid; grid-template-columns:repeat(2,1fr); gap:18px 16px; margin-bottom:30px;}
.form-input-area .col.wide {grid-column:span 2;}
.form-input-area .input {display:block; width:100%; height:46px; border:1px solid #aaa; border-radius:5px; padding:var(--space-10) var(--space-20);}
.form-input-area .btn {display:inline-flex; align-items:center; justify-content:center; min-width:120px; height:46px; background:var(--color-primary); color:#fff; line-height:1.2em; border-radius:5px; font-size:var(--font-size-18); font-weight:600; border:0; cursor:pointer;}
.form-input-area textarea.input {height:190px; padding:var(--space-16) var(--space-20);}
.form-input-area .input-group {display:flex; gap:8px;}
.form-input-area .input-group .input {flex:1;}
.form-input-area .form-section {display:flex; flex-direction:column; gap:var(--space-10);}
.form-input-area .form-section-title {margin-top:4px; margin-bottom:4px; font-size:var(--font-size-18); font-weight:400; line-height:1.3em;}
.form-input-area .form-checkbox-group {display:flex; flex-wrap:wrap; gap:var(--space-10) var(--space-20);}
.form-input-area .form-budget-group {display:flex; align-items:center; gap:var(--space-8);}
.form-input-area .form-budget-group .input {flex:1 1 auto; min-width:0; width:1%;}
.form-input-area .form-budget-group .budget-separator,
.form-input-area .form-budget-group .budget-unit {white-space:nowrap;}



.form-agree-area {display:flex; flex-direction:column; gap:var(--space-16); margin-bottom:20px; line-height:1.5em;}
.form-agree-area .etc {color:#666;}
.form-agree-area em {font-style:normal; color:#5296f2;}
.form-agree-area .link-item {display:inline-block; margin-left:8px; font-weight:700; text-decoration:underline; text-underline-offset:3px;}
.form-agree-area .link-item:after {content:''; display:inline-block; width:9px; aspect-ratio:9/14; background:url("/html/front/images/sub/chevrons-right.svg") 50% 50%/contain no-repeat; vertical-align:middle; margin-left:8px;}

.input-error {border-color:var(--color-primary) !important; color:var(--color-primary);}
.input-error::-webkit-input-placeholder {color:var(--color-primary);}
.input-error:-moz-placeholder {color:var(--color-primary);}
.input-error::-moz-placeholder {color:var(--color-primary);}
.input-error:-ms-input-placeholder {color:var(--color-primary);}
.input-error:placeholder-shown {color:var(--color-primary);}
.input-error-text {color:var(--color-primary); margin-top:6px; line-height:1.5em;}

.form-submit-area {text-align:center; margin-top:var(--space-50);}

.btn-submit {display:inline-flex; justify-content:center; align-items: center; width:clamp(140px, calc(210 / var(--inner) * 100vw), 210px); height:clamp(40px, calc(55 / var(--inner) * 100vw), 55px); padding:var(--space-12) var(--space-24); background:var(--color-primary); border:0; cursor:pointer; color:#fff; border-radius:50px; font-size:var(--font-size-18); font-weight:700; transition:all 0.3s ease;}
.btn-submit:hover {background:var(--color-primary-over);}

/* 오피스 공실 등록 */
.vacancy-between {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-40); margin-bottom:55px;}
.vacancy-between .box {background:#f5f5f5; padding:var(--space-40);}
.vacancy-between .input-group {margin-bottom:26px;}
.vacancy-between .input-group:last-child {margin-bottom:0;}
.vacancy-between .input-group .title {margin-bottom:10px; font-size:var(--font-size-18); font-weight: 500; line-height:1.5em;}
.vacancy-between .input-group .items {display:flex; flex-wrap:wrap; gap:10px 30px;}
.vacancy-between .input-group .require {color:#e61655;}
.vacancy-between .input-group .input {display:block; width:100%; height:46px; border:1px solid #aaa; border-radius:6px;}
.vacancy-between .input-group textarea.input {height:190px;}
.vacancy-between .input-group .flex {display:flex; gap:var(--space-16);}

.vacancy-form {margin-bottom:45px;}
.vacancy-form .title-area {display:flex; justify-content:space-between; align-items:center; gap:10px 30px; margin-bottom:var(--space-20);}
.vacancy-form .title-area h3 {margin:0;}
.vacancy-form .title-area .btns {display:flex; gap:6px;}

.vacancy-table table {width:100%; border-collapse:collapse; border-spacing:0px; line-height:1.3em; border-top:2px solid var(--color-primary);}
.vacancy-table table th {height:45px; padding:7px 12px; font-weight:500; background:#f5f5f5; border:1px solid #ddd; text-align:center;}
.vacancy-table table td {height:45px; padding:7px; border:1px solid #ddd; text-align:center;}
.vacancy-table table tr th:first-child,
.vacancy-table table tr td:first-child {border-left:0;}
.vacancy-table table tr th:last-child,
.vacancy-table table tr td:last-child {border-right:0;}
.vacancy-table .flex {display:flex; align-items:center; gap:5px; white-space:nowrap;}
.vacancy-table .flex .input {flex:1 1 auto; min-width:0; width:1%;}
.vacancy-table .input {display:block; width:100%; height:29px; padding:4px 8px; font-size:14px; border-radius:5px;}
.vacancy-table select.input {padding-right:20px; background-position:right 5px center;}
.vacancy-table .add-field {display:flex; align-items:center; padding:2px; gap:4px; background:none; border:none; font-size:inherit; font-weight:inherit;}
.vacancy-table .add-field:before {content:''; display:block; width:15px; height:15px; background:var(--color-primary) url('/html/front/images/sub/plus-white.svg') 50% 50%/60% no-repeat; border-radius:4px;}
.vacancy-table input[type="checkbox"] {-webkit-appearance:none; width:18px; height:18px; background-color:#fff; border:1px solid #aaa; }
.vacancy-table input[type="checkbox"]:checked {background:var(--color-primary) url("/html/front/images/bbs/checkbox.svg") 50% 50% no-repeat; border-color:var(--color-primary);}


/* 오피스 동향 */
.trend-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    align-items: flex-start;
    gap: 26px;
}.trend-items .trend-item:hover {transform: translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.08);}
.trend-item {display:flex; flex-direction:column; padding:16px; border:1px solid #aaa; border-radius:5px;}
.trend-item .info-area {display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.trend-item .info-area .img {width:50px; height:50px; border-radius:5px; overflow:hidden;}
.trend-item .info-area .img img {width:100%; height:100%; object-fit:cover;}
.trend-item .info-area .cnt {flex:1 1 auto; min-width:0; width:1%;}
.trend-item .info-area .cnt .title {margin-bottom:5px; font-size:var(--font-size-18); font-weight:700; line-height:1.3em; color:#111;}
.trend-item .info-area .cnt .meta {display:flex; justify-content:space-between; align-items:center; font-size:13px; line-height:1.3em;}
.trend-item .info-area .cnt .meta .label {display:inline-block; font-size:12px; color:#fff; line-height:1.5em; background:#aaaaaa; border-radius:2px; padding:0 4px; margin-right:6px;}
.trend-item .info-area .cnt .meta .name {margin-right:5px;}
.trend-item .info-area .cnt .meta button {display:inline-block; background:none; border:0;}
.trend-item .info-area .cnt .meta button img {width:16px; height:auto;}
.trend-item .info-area .cnt .meta .bt-like {margin-left:3px;}
.trend-item .info-area .cnt .meta .bt-like.on {color:#e61655}
.trend-item .text-area {font-size:14px; line-height:1.5em; max-height:calc(1.5em * 3); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.trend-item .img-area {margin-top:10px; aspect-ratio:340/220; overflow:hidden;}
.trend-item .img-area img {width:100%; height:100%; object-fit:cover;}

.modal-body .trend-item {padding:0; border:none; border-radius:0;}
.modal-body .trend-item .text-area {max-height:none; -webkit-line-clamp:unset;}
.modal-body .trend-item .img-area {aspect-ratio:unset;}

/* 오피스 인기 순위 */
.office-ranking-first {max-width:495px; margin:0 auto 30px;}
.office-ranking-first .office-ranking-item {padding:9px 7px;}
.office-ranking-first .office-ranking-item .num-area img {width:53px;}
.office-ranking-first .office-ranking-item .cnt {padding:15px 0;}
.office-ranking-first .office-ranking-item .text-area .tit {font-size:var(--font-size-26);}
.office-ranking-first .office-ranking-item .text-area .txt {font-size:var(--font-size-22);}

.office-ranking-items {display:grid; grid-template-columns:repeat(3, 1fr); align-items:flex-start; gap:30px;}
.office-ranking-item {display:flex; flex-direction:column; padding:7px 5px; background:#f5f5f5;}
.office-ranking-item:hover .img img {transform:scale(1.1);}
.office-ranking-item .img {aspect-ratio:370/238; overflow:hidden;}
.office-ranking-item .img img {width:100%; height:100%; object-fit:cover; transition:.4s;}
.office-ranking-item .cnt {display:flex; align-items:flex-start;padding:10px 0;}
.office-ranking-item .num-area {padding:0 12px; font-size:var(--font-size-26); font-weight:700; line-height:1em; color:var(--color-primary);}
.office-ranking-item .num-area img {width:40px;}
.office-ranking-item .text-area {flex:1 1 auto; min-width:0; width:1%;}
.office-ranking-item .text-area .tit {font-size:var(--font-size-20); font-weight:700; line-height:1.4em;}
.office-ranking-item .text-area .txt {font-size:var(--font-size-18); line-height:1.4em;}

/* 마이워크 */
.mywork-counter {text-align:center; background:#f5f5f5; padding:46px; margin-bottom:55px;}
.mywork-counter .items {display:flex; gap:var(--space-40); margin-bottom:var(--space-50);}
.mywork-counter .item {flex:1; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:10px; background:#fff; padding:var(--space-40); border-radius:var(--radius-24); line-height:1.5em;}
.mywork-counter .item .tit strong {font-size:var(--font-size-20);}
.mywork-counter .item .txt strong {display:inline-block; margin-top:10px; font-family: 'JalnanGothic',sans-serif; font-size:clamp(24px, calc(40 / var(--inner) * 100vw), 40px); font-weight:700; line-height:1em; letter-spacing:0; color:var(--color-primary);}

.mywork-section {position:relative; margin-bottom:55px;}
.mywork-section:last-child {margin-bottom:0;}
.mywork-section.flex {display:flex; gap:40px;}
.mywork-section.flex > div {flex:1;}

.mywork-bookmark {position:relative;}
.mywork-bookmark .items {border-top:1px solid #d8d8d8;}
.mywork-bookmark .item {display:flex; gap:var(--space-20); padding:12px; border-bottom:1px solid #d8d8d8;}
.mywork-bookmark .item .img {width:60px; height:60px; border-radius:var(--radius-10); overflow:hidden;}
.mywork-bookmark .item .img img {width:100%; height:100%; object-fit:cover; transition:.4s;}
.mywork-bookmark .item .cnt {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction:column; justify-content:center;}
.mywork-bookmark .item .cnt .tit {margin-bottom:5px; font-size:var(--font-size-20); font-weight:400; line-height:1.3em;}
.mywork-bookmark .item .cnt .tag {display:inline-block; vertical-align:middle; margin:-.2em 0 0 5px; padding:0px 6px; border-radius:5px; background:#4177ed; text-align:center; color:#fff; font-size:13px; line-height:23px;}
.mywork-bookmark .item .cnt .txt {color:#555; font-size:var(--font-size-16); font-weight:400; line-height:1.4em;}
.mywork-bookmark .item:hover .img img {transform:scale(1.1);}

.data-total-wrap {display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:var(--space-16);}
.data-total-wrap .total {display:flex; align-items:center; gap:8px 15px;}
.data-total-wrap .total em {font-style: normal; color:#888}
.data-total-wrap .sort {display:flex; align-items:center; gap:8px; color:#555;}
.data-total-wrap .sort select.input {height:auto; padding:0 20px 0 0; border:0; color:inherit; background:url('/html/front/images/bbs/select2.png') 100% 50%/13px auto no-repeat;}

.data-table table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #aaa;}
.data-table table th {height:44px; padding:10px; font-weight:700; line-height:1.4em; background:#f5f5f5; border:1px solid #ddd; border-top:0;}
.data-table table td {height:44px; padding:10px; line-height:1.4em; text-align:center; border:1px solid #ddd; border-top:0;}
.data-table tr th:first-child,
.data-table tr td:first-child {border-left:0;}
.data-table tr th:last-child,
.data-table tr td:last-child {border-right:0;}
.data-table .link {text-decoration:underline; text-underline-offset:3px;}

.data-list table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #aaa;}
.data-list table th {height:44px; padding:14px 5px; font-weight:500; line-height:1.4em; background:#f5f5f5; border-bottom:1px solid #ddd;}
.data-list table td {height:44px; padding:14px 5px; line-height:1.4em; text-align:center; border-bottom:1px solid #ddd;}
.data-list input[type="checkbox"] {-webkit-appearance:none; width:18px; height:18px; background-color:#fff; border:1px solid #aaa; }
.data-list input[type="checkbox"]:checked {background:var(--color-primary) url("/html/front/images/bbs/checkbox.svg") 50% 50% no-repeat; border-color:var(--color-primary);}
.data-list .btn-detail {display:inline-block; border-radius:50px; padding:6px 16px; background:var(--color-primary); color:#fff; font-size:var(--font-size-14); line-height:1.3em; border:0; cursor:pointer; transition:all 0.3s ease;}
.data-list .office-info {display:flex; gap:var(--space-20);}
.data-list .office-info .img {width:42px; height:42px; border-radius:10px; overflow:hidden;}
.data-list .office-info .img img {width:100%; height:100%; object-fit:cover; transition:all 0.4s ease;}
.data-list .office-info .cnt {flex:1 1 auto; min-width:0; width:1%; text-align:left; display:flex; flex-direction:column; justify-content:center;}
.data-list .office-info .cnt .tit {margin-bottom:2px; font-size:var(--font-size-18); line-height:1.4em;}
.data-list .office-info .cnt .txt {color:#666; line-height:1.4em;}
.data-list .lease-terms {width:100%; text-align:left;}
.data-list .lease-terms dl {display:flex; gap:1em; padding:1px 0;}
.data-list .lease-terms dt {min-width:6.5em; color:#666;}

.data-group {font-size:14px; line-height:1.5em;}
.data-group .row {display:flex; align-items:center; padding:12px 6px;}
.data-group .row.th {padding:8px 6px; background:#f5f5f5; text-align:center;}
.data-group .row.td {border-bottom:1px solid #ddd;}
.data-group .col {padding:0 6px;}
.data-group .col.text {flex:1 1 auto; min-width:0; width:1%;}
.data-group input[type="checkbox"] {-webkit-appearance:none; width:18px; height:18px; background-color:#fff; border:1px solid #aaa; }
.data-group input[type="checkbox"]:checked {background:var(--color-primary) url("/html/front/images/bbs/checkbox.svg") 50% 50% no-repeat; border-color:var(--color-primary);}
.data-group .office-info {display:flex; gap:var(--space-20);}
.data-group .office-info .img {width:45px; height:45px; border-radius:5px; overflow:hidden;}
.data-group .office-info .img img {width:100%; height:100%; object-fit:cover; transition:all 0.4s ease;}
.data-group .office-info .cnt {flex:1 1 auto; min-width:0; width:1%; text-align:left; display:flex; flex-direction:column; justify-content:center;}
.data-group .office-info .cnt .tit {margin-bottom:2px; font-size:15px; line-height:1.4em;}
.data-group .office-info .cnt .txt {color:#666; font-size:12px; line-height:1.4em;}

.office-cards {display:grid; gap:32px 16px; grid-template-columns:repeat(4,1fr);}
.office-card {display:flex; flex-direction:column; background:#fff; border-radius:15px; box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.4); text-align:center;}
.office-card .cate {padding:10px; border-radius:15px 15px 0 0; color:#fff; font-size:16px; font-weight:700; line-height:1.5em; background:#487cd3;}
.office-card .img {aspect-ratio: 1/1; overflow:hidden;}
.office-card .img img {width:100%; height:100%; object-fit:cover; transition:all 0.4s ease;}
.office-card .cnt {padding:14px;}
.office-card .tit {margin-bottom:8px; font-size:18px; font-weight:700; line-height:1.5em;}
.office-card .txt {line-height:1.5em;}
.office-card:hover .img img {transform:scale(1.1);}

/* 컨텐츠 위에 올라가도록 설정 마이워크용*/
.office-card.mywork {position: relative; /* 자식 요소인 .cate의 기준점이 됩니다. */display: block;overflow: hidden; /* 이미지를 벗어나는 부분을 깔끔하게 처리합니다. */}
/* 이미지 설정 (기본) */
.office-card.mywork .img img {width: 100%;display: block;}
/* 이미지 위에 겹칠 태그 스타일 */
.office-card.mywork .cate {
    position: absolute; /* 부모인 .office-card 기준으로 위치 고정 */
    top: 10px;
    left: 10px;
    z-index: 10;        /* 이미지보다 위에 보이도록 설정 */
    background-color: rgba(0, 0, 0, 0.7); /* 반투명 검정 배경 */
    color: #fff;/* 흰색 글자 */
    padding: 4px 8px;/* 안쪽 여백 */
    font-size: 14px;/* 글자 크기 */
    border-radius: 4px;/* 모서리 둥글게 */
}

.myinfo-table {margin-bottom:var(--space-60)}
.myinfo-table table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #aaa; line-height:1.5em;}
.myinfo-table th {padding:10px 20px; background:#f5f5f5; border-bottom:1px solid #ddd; border-left:1px solid #ddd; font-weight:500; text-align:left;}
.myinfo-table td {padding:10px 20px; border-bottom:1px solid #ddd;}
.myinfo-table th:first-child {border-left:0;}

/* modal */
.modal-sm {position:relative; max-width:414px; border-radius:20px; padding:var(--space-30);}
.modal-md {position:relative; max-width:650px; border-radius:20px; padding:var(--space-40);}

.modal-header {margin-bottom:16px;}
.modal-header h2 {font-size:18px; font-weight:700; line-height:1.3em;}

.modal-close {position:absolute; top:16px; right:16px; width:20px; height:20px; background:url("/html/front/images/sub/close.png") 50% 50%/contain no-repeat; border:0; cursor:pointer;}

#loginLayer .input-group {margin-bottom:10px;}
#loginLayer .input {display:block; width:100%; height:46px; border:1px solid #aaa; border-radius:5px; padding:var(--space-10) var(--space-20);}
#loginLayer .link {margin-top:17px; text-align:right; color:var(--color-primary); line-height:1.3em;}
#loginLayer .link a:hover {text-decoration: underline;}
#loginLayer .buttons {display:flex; flex-direction:column; gap:10px; margin-top:var(--space-30);}
#loginLayer .btn {display:flex; justify-content:center; align-items:center; width:100%; height:55px; padding:0 20px; border:1px solid var(--color-primary); border-radius:55px; font-size:18px; font-weight:700; cursor:pointer; transition:all 0.3s ease; text-align:center;}
#loginLayer .btn.border {background:#fff; border:1px solid var(--color-primary); color:var(--color-primary);}
#loginLayer .btn.focus {background:var(--color-primary); border:1px solid var(--color-primary); color:#fff;}


/* 간단한 스피너 CSS */
.body-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.body-loading-overlay .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 12px;
}

.body-loading-overlay .loading-text {
    color: #333;
    font-size: 16px;
    font-weight: 500;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* LNB 전용 로딩 스피너 CSS  .aside-office-list 전용 로딩 스피너 CSS */
.aside-office-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(245, 245, 245, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 5px;
}

.aside-office-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top: 3px solid #0b5eea;
    border-radius: 50%;
    animation: asideOfficeSpin 1s linear infinite;
    margin-bottom: 10px;
}

.aside-office-loading-text {
    color: #555;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

@keyframes asideOfficeSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* 툴팁 스타일 (물음표 커서 제거) */
.custom-tooltip {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.4;
}

.custom-tooltip::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(0, 0, 0, 0.8);
}

/* 툴팁이 위에 표시될 때의 화살표*/
.custom-tooltip.tooltip-bottom::before {
    top: -5px;
    bottom: auto;
    border-top: none;
    border-bottom: 5px solid rgba(0, 0, 0, 0.8);
}

/* 툴팁 요소 스타일 */
.tooltip {
    cursor: default; /* 또는 cursor: pointer; */
    position: relative;
}

/* 회사소개 */
.about-hero {position:relative; display:flex; justify-content:center; align-items:center; padding:clamp(80px, calc(160 / var(--inner) * 100vw), 160px) 25px clamp(90px, calc(185 / var(--inner) * 100vw), 185px); text-align:center; background:url('/html/front/images/sub/about-hero.jpg') center center/cover no-repeat;}
.about-hero .inner {padding:clamp(25px, calc(60 / var(--inner) * 100vw), 60px) clamp(15px, calc(60 / var(--inner) * 100vw), 60px); color:#fff; background:rgba(0,0,0,0.4);}
.about-hero h2 {font-size:var(--font-size-60); line-height:1.3em; letter-spacing:-.025em; margin-bottom:var(--space-70);}
.about-hero p {font-size:var(--font-size-24); line-height:1.5em; letter-spacing:-.025em;}

.why-officefind {padding:var(--space-120) 0 var(--space-160); background:#f0f0f0; overflow:hidden;}
.why-officefind .contain {max-width:1460px;}
.why-officefind .m-head {margin-bottom:var(--space-100);}
.why-officefind .m-head h2 {font-weight:400;}
.why-officefind .items {display:grid; justify-content:center; grid-template-columns:repeat(2,auto); gap:var(--space-70) var(--space-140);}
.why-officefind .item {display:flex; gap:12px;}
.why-officefind .item .img {width:79px;}
.why-officefind .item .cnt {flex:1 1 auto; min-width:0; width:1%;}
.why-officefind .item .cnt h3 {font-size:var(--font-size-30); line-height:1.3em; letter-spacing:-.03em; margin-bottom:var(--space-10);}
.why-officefind .item .cnt p {font-size:var(--font-size-22); line-height:1.5em; letter-spacing:-.03em; color:#555;}

.our-works {padding:var(--space-140) 0 var(--space-160); background:#476661; overflow:hidden; color:#fff; text-align:center;}
.our-works .contain {max-width:1460px;}
.our-works .m-head {margin-bottom:var(--space-100);}
.our-works .m-head h2 {margin-bottom:var(--space-40); font-weight:400;}
.our-works .m-head p {font-size:var(--font-size-24); line-height:1.4em; letter-spacing:-.03em;}
.our-works .items {display:flex; flex-wrap:wrap; justify-content: space-around; gap:var(--space-40);}
.our-works .item .icon {margin-bottom:var(--space-24);}
.our-works .item .text {font-size:var(--font-size-30); font-weight:700; line-height:1.5em; letter-spacing:-.03em;}

.history-wrap {padding:var(--space-200) 0 var(--space-160); overflow:hidden;}
.history-wrap .contain {max-width:1560px;}
.history-wrap .m-head {margin-bottom:var(--space-60);}
.history-wrap .m-head h2 {font-weight:400;}
.history {position:relative; display:flex; flex-direction:column; gap:55px;}
.history:before {content:''; position:absolute; top:0; left:50%; z-index:-1; width:1px; height:100%; background:#d8d8d8;}
.history .group {position:relative; width:50%;}
.history .group:before {content:''; position:absolute; top:.3em; width:19px; height:19px; background:#fff; border:5px solid #476661; border-radius:50%;}
.history .group .year {margin-bottom:var(--space-16); font-size:var(--font-size-30); font-weight:700; line-height:1em; letter-spacing:-.03em; color:#476661;}
.history .group .list {display:flex; flex-direction:column; gap:7px; font-size:var(--font-size-22); line-height:1.5em; letter-spacing:-.03em;}
.history .group .list li {display:flex; gap:var(--space-15);}
.history .group .list .month {width:1.8em; color:#000; font-weight:700; text-align:right;}
.history .group .list .text {flex:1 1 auto; min-width:0; width:1%; color:#555;}
.history .group:nth-child(odd) {margin-left:50%; padding-left:40px;}
.history .group:nth-child(odd):before {left:-9px;}
.history .group:nth-child(even) {padding-right:40px; text-align:right;}
.history .group:nth-child(even):before {right:-10px;}
.history .group:nth-child(even) .list li {flex-direction:row-reverse;}

.directions {padding:var(--space-140) 0 var(--space-150); background:#f0f0f0;}
.directions .contain {max-width:1460px;}
.directions .m-head {margin-bottom:var(--space-60);}
.directions-info {display:flex; flex-direction:column; gap:5px; margin-bottom:var(--space-30); text-align:center;}
.directions-info p {font-size:var(--font-size-24); line-height:1.5em; letter-spacing:-.03em;}
.directions-info p img {vertical-align:middle; margin:-.1em 5px 0 0;}
.directions-map .root_daum_roughmap {width:100% !important;}
.directions-map .root_daum_roughmap .cont {display:none;}