/*******************************************************
*/
/* common
 *******************************************************/

.sub-title {}
.sub-title h3 {font-weight: 600; margin-bottom:1rem !important;}
.sub-title h6{color:#555;font-weight:400;}

.contents-area{margin-bottom:70px;}
.contents-area:last-child{margin-bottom:0;}

.wei-bold { font-weight: 600; }
.wei-normal { font-weight: 300; }
.col-white { color: #fff; }
.col-black { color: #232323; }
.size-big { font-size: 36px; }
.size-normal { font-size: 30px; }
.size-small { font-size: 21px; }

@media(max-width:1200px) {

}

@media(max-width:768px) {
    .sub-sec { padding: 60px 0; }
    .contents-area{margin-bottom:40px;}
}

.swiper-pagination-bullet-active{background: var(--primary) !important;}
.swiper-pagination-bullet{background:#fff;opacity: .7;margin:0 3px;}


/* table */
.tbl-common { margin-top: 20px; }
.tbl-common table { width: 100%; border-collapse: collapse; }
.tbl-common th { background-color:#f5f7fa; padding: 15px; text-align: center; font-weight: 600; font-size:1.125rem; border-top: 1px solid #e5e9f0; border-bottom: 1px solid #e5e9f0; }
.tbl-common td {color:#4a5568; padding: 15px; text-align: center; font-size:1.05rem; border-bottom: 1px solid #e2e8f0; }

.tbl-common tbody tr:hover { background-color:#f7fafc; }

.table-header {font-size:13px;color:#4a5568;}
.table-header ul{display:flex;align-items:center;}
.table-header ul li{margin-right:10px;display:flex;align-items:center;}
.table-header ul li:last-child{margin-right:0;}
.table-header ul li span{margin-right:5px;}
.table-header ul li span.color01{background-color:#e7f4ff;}
.table-header ul li span.color02{background-color:#fff5d9;}
.table-header ul li span.color03{background-color:#edf9e6;}
.table-header ul li span.color04{background-color:#f5e7ff;}

@media (max-width: 768px) {
    .tbl-common { overflow-x: auto; }
    .tbl-common table { min-width: 600px; }
    .tbl-common th, .tbl-common td { padding: 12px 10px; font-size: 14px; }
}

/*******************************************************
*/
/* contact
 *******************************************************/

.gj-datepicker{width: calc(100% - 180px);}
.gj-datepicker [role=right-icon]{display: none;}

@media (max-width:1200px) {
    .gj-datepicker{width: 100%;}
}



/*******************************************************
*/
/* calendar
 *******************************************************/
.calendar-table { width: 100%;}
.calendar-table .calendar_navi_area { display: flex; justify-content: center; align-items: center; margin-bottom: 40px; }
.calendar-table .cal_btn { display: flex; align-items: center; gap: 20px; }
.calendar-table .current_ym { font-size: 22px; font-weight: 600; color: #333; }
.calendar-table .prevMonth, .calendar-table .nextMonth { background: #f8f9fa; border: 1px solid #e2e8f0; border-radius: 6px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.calendar-table .prevMonth:hover, .calendar-table .nextMonth:hover { background-color: #edf2f7; border-color: #cbd5e0; }
.calendar-table .prevMonth i, .calendar-table .nextMonth i { font-size: 18px; color: #4a5568; }
.calendar-table .calendar_area { overflow-x: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.calendar-table table { width: 100%;min-width: 870px !important; border-collapse: collapse; border-spacing: 0; }
.calendar-table th { background-color: #f8f9fa;font-weight: bold;font-size:14px; color: #4a5568; padding:12px; text-align: center;border: 1px solid #e2e8f0; }

.calendar-table td { border: 1px solid #e2e8f0; vertical-align: top; height: 100px; transition: background-color 0.2s; }
.calendar-table td:hover { background-color: #f7fafc; }
.calendar-table td.sch { background-color: #f7fafc; }
.calendar-table .day_area { height: 100% !important; display: flex; flex-direction: column;}
.calendar-table .day { display: block; text-align:center; font-weight: 500; padding: 3px 5px; margin-bottom: 5px; color: #4a5568; }
.calendar-table .day.today_date{color: #000; font-weight: bold;}
.calendar-table th.sunday { color:#2c3e50; }
.calendar-table th.saturday { color:#2c3e50; }
.calendar-table .day.week_Sun { color:#2c3e50; }
.calendar-table .day.week_Sat { color:#2c3e50; }

.calendar-table .day_schedule { list-style: none; padding: 0; margin: 0; }
.calendar-table .day_schedule li {color: #4a5568;padding:2px 10px; font-size:14px; display: flex;justify-content:space-between;align-items: center; margin-bottom:4px; border-radius: 4px; background-color: #f1f5f9; font-weight:normal; overflow: hidden; transition: all 0.2s; }
.calendar-table .day_schedule li:last-child{margin-bottom:0;}
.calendar-table .day_schedule li:hover { background-color: #e2e8f0; }
.calendar-table .schedule-calendar-item { cursor: pointer; }
.calendar-table .day_schedule li a{display: flex;align-items: center;justify-content:space-between;width: 100%;}

.calendar-table .day_schedule li.A { background-color: #e7f4ff;}
.calendar-table .day_schedule li.B { background-color: #fff5d9;}
.calendar-table .day_schedule li.C { background-color: #edf9e6;}
.calendar-table .day_schedule li.D { background-color: #f5e7ff;}

.calendar-table .day_schedule .schedule_room {border: 1px solid #e2e8f0;font-size:11px;padding: 4px 6px;vertical-align: middle;margin-left:10px;border-radius: 5px;height: 20px;display: inline-flex;align-items: center;justify-content: center;}
.calendar-table .day_schedule li.activation .schedule_room{background:#000;color:white;}
.calendar-table .day_schedule li.deactivation .schedule_room{background: #9ca3af;color: #f3f4f6;}

.calendar-table .day_schedule li.activation p{opacity:1;}
.calendar-table .day_schedule li.deactivation p{opacity: 0.6;}

.calendar-table .day_schedule .schedule_name{}


@media(max-width:900px){
    .calendar-table .stockTbl-scrollbar-cover {display: block;position: absolute;  top: 0px;  left: 0px; right: 0px; bottom: 0px; background-color: rgba(0,0,0,0.5); z-index:100;}
    .calendar-table .stockTbl-scrollbar-cover .scroll-cover-txt {position: absolute; top: 50%; left: 0; transform:translateY(-50%);width: 100%;text-align: center; color: #fff; font-size: 15px;}
    .calendar-table .stockTbl-scrollbar-cover .scroll-cover-txt i {font-size: 30px; display: block; margin-bottom: 20px; }
}


@media screen and (max-width: 768px) {
    .calendar-table .current_ym { font-size: 20px; }
    .calendar-table .prevMonth, .calendar-table .nextMonth { width: 38px; height: 38px; }
    .calendar-table th { padding: 10px 5px;font-size:13px;}
    .calendar-table td { height: 80px; }
    .calendar-table .day { font-size: 14px; }
    .calendar-table .day_schedule { }
    .calendar-table .day_schedule li { font-size: 11px; padding: 4px 6px; }
}
@media screen and (max-width: 576px) {
    .calendar-table .current_ym { font-size: 18px; }
    .calendar-table .prevMonth, .calendar-table .nextMonth { width: 34px; height: 34px; }
    .calendar-table th { padding: 6px 3px; }
    .calendar-table td { height: 60px; }
    .calendar-table .day { font-size: 12px; padding: 2px 4px; margin-bottom: 2px; }
    .calendar-table .day_schedule { }
    .calendar-table .day_schedule li { font-size: 10px; padding: 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .calendar-table .calendar_navi_area{margin-bottom: 30px;}
}


.scheduleDeta .modal-content { background: #ffffff; border-radius: 8px; border: none; overflow: hidden; }
.scheduleDeta .modal-body { padding: 0; }
.scheduleDeta .cont { display: table; width: 100%; border-collapse: collapse; }
.scheduleDeta .modal-item { display: table-row; }
.scheduleDeta .modal-item span { display: table-cell; width: 130px;background: #f5f7fa;font-size: 0.95rem; color: #555; font-weight: 500; padding: 12px 15px; border: 1px solid #e5e9f0; vertical-align: middle; }
.scheduleDeta .schedule-date, .scheduleDeta .schedule-status, .scheduleDeta .schedule-name, .scheduleDeta .schedule-tel { display: table-cell; padding: 12px 15px; font-weight: bold; font-size: 0.95rem; color:#4a5568; border: 1px solid #e5e9f0; vertical-align: middle; }
.scheduleDeta .schedule-status { color:#000; }

@media screen and (max-width: 768px) {
    .scheduleDeta .modal-item span { width: 100px; font-size: 0.9rem; padding: 10px 12px; }
    .scheduleDeta .schedule-date, .scheduleDeta .schedule-status, .scheduleDeta .schedule-name, .scheduleDeta .schedule-tel { font-size: 0.9rem; padding: 10px 12px; }
}

/*******************************************************
*/
/* about
 *******************************************************/

.about-area { position: relative; width: 100%; overflow: hidden; display: flex; flex-direction: column; }

.about-area .image-area { height: 500px; position: relative; width: 100%; }
.about-area .image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.about-area .image img { width: 100%; height: 100%; object-fit: cover; }
#about-sli, .about-area .swiper-slide { width: 100%; height: 100%; }

.about-area .feature-list {position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin:0 auto 70px; }
.about-area .feature-list:after{content: '';clear: both;display:block;}
.about-area .feature-item {cursor: default; color: #4a5568; flex: 0 0 auto; padding: 12px 30px; text-align:center;background: #f8f9fa; border-radius: 8px; border: 1px solid #e2e8f0; font-weight: 500; transition: all 0.3s ease; position: relative; font-size: 16px; }
.about-area .feature-item:hover, .about-area .feature-item.active { background-color: #000; color: white; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); }

#about-page { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); }

@media (max-width: 1400px) {
    .about-area .image-area { height: calc(100vw / 2.8); max-height: 500px; }
}

@media (max-width: 1200px) {
    .about-area .feature-list {width:100%;display: grid;grid-template-columns: repeat(3, 2fr);margin:20px auto 40px;gap: 10px;}
    .about-area .image-area { height: calc(100vw / 2.8); max-height: 450px; }
}

@media (max-width: 1024px) {
    .about-area .feature-item { padding:12px 20px;}
    .about-area .image-area { height: calc(100vw / 2.8); max-height: 400px; }
}

@media (max-width: 768px) {
    .about-area .feature-list {margin:10px auto 30px;}
    .about-area .image-area { height: calc(100vw / 2.8); max-height: 350px; }
    #about-page { bottom: 15px; }
    .about-area .feature-item{padding:12px;}
}

@media (max-width: 480px) {
    .about-area .feature-list {margin:10px auto 20px;}
    .about-area .image-area { height: calc(100vw / 2.8); max-height: 300px; }
}

/*******************************************************
*/
/* studio
 *******************************************************/

/* tab */
.sub-tab-wrapper { }
.tab-wrap { position: relative; height:58px; z-index: 999; }
.tab-wrap ul { display: flex; justify-content: center; width: 100%; height: 100%; table-layout: fixed; }
.tab-wrap ul:after { display: none; }
.tab-wrap ul li { display: table-cell; vertical-align: middle; position: relative; width: 18rem;max-width:200px; background-color: #ebebeb; border-left: 0; transition:0.3s ease;}
.tab-wrap ul li:first-child { border-radius: 1rem 0 0 1rem; }
.tab-wrap ul li:last-child { border-radius: 0 1rem 1rem 0; }
.tab-wrap ul li a { display: table; height:58px; width: 100%; }
.tab-wrap ul li a h6{ display: table-cell; vertical-align: middle; color: #555;font-weight: 500; letter-spacing: -0.025em;text-align: center; margin-bottom: 0;}
.tab-wrap ul li.active { z-index: 1; background-color: #333; border-color: #333; pointer-events: none;}
.tab-wrap ul li.active a h6{ color: #fff; transition:.2s;}
.tab-wrap ul li:hover {background-color:#dedede;}

.tab-content { margin-top: 20px; }
.sub-tabcon { display: none; overflow: hidden; }
.sub-tabcon.active { display: block; }

@media (max-width: 768px) {
    .tab-wrap { height: auto; }
    .tab-wrap ul {display: grid;grid-template-columns: repeat(3, 2fr);gap: 0;}
    .tab-wrap ul li { width: 100%;max-width:100%; }
    .tab-wrap ul li a{height:50px;}

    .tab-wrap ul li:first-child {border-radius: 1rem 0 0 0;}
    .tab-wrap ul li:nth-child(3) {border-radius: 0 1rem 0 0;}
    .tab-wrap ul li:nth-child(4) {border-radius: 0 0 0 1rem;}
    .tab-wrap ul li:last-child {border-radius: 0 0 1rem 0;}
}

/* guide */
.facility-specs {border-radius: 10px; }
.specs-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 0; list-style: none; }
.specs-list-item { display: flex; align-items: center; padding:20px; background:#f8f9fa; border-radius: 8px;border: 1px solid #e2e8f0;transition: transform 0.3s ease; }

.spec-icon { flex: 0 0 50px; height: 50px; background: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; color: white; font-size:22px; }
.spec-content { flex: 1; }
.spec-label { display: block; font-size:1rem;color: #4a5568; }
.spec-value { display: block; font-size:20px; font-weight: 600; color: #333; margin-top: 5px;}


@media (max-width: 1024px) {
    .specs-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .specs-list { grid-template-columns: 1fr; gap: 15px; }
    .specs-list-item{padding:1rem;}
    .spec-icon { flex: 0 0 40px; height: 40px; font-size:16px; }
    .spec-label { font-size:14px; }
    .spec-value { font-size: 16px; }
}
@media (max-width: 768px) {
    .spec-value { font-size: 14px; }
}

.route-legend {display: inline-flex;justify-content: center;gap: 40px;margin: 0 0 40px;align-items: center;left: 50%;position: relative;transform: translateX(-50%);flex-flow: row wrap;}
.legend-item { display: flex; align-items: center; }
.line-sample { width: 30px; height: 3px; margin-right: 10px; }
.circle-sample{width:10px;height:10px;margin-right:8px;border-radius:100px;}
.cargo-line { background-color:#ff003f; }
.passenger-line { background-color:#1b3266; }

.circle-car1{ background-color:#07738d; }
.circle-car2{ background-color:#7fc44d; }

.circle-room1{ background-color:#a1b8e1; }
.circle-room2{ background-color:#df7f7f; }
.circle-room3{ background-color:#dfc77f; }
.circle-room4{ background-color:#f9d8c1; }
.circle-room5{ background-color:#7fd7f7; }
.circle-room6{ background-color:#d4e8c6; }
.circle-room7{ background-color:#b797cf; }

.note { text-align: left;color:#4a5568; font-size:14px;}
.tbl-common .studio-name {font-weight: 700;}

@media (max-width: 768px) {
    .route-legend { gap: 10px;width:100%;}
}


/* studio */
.spec-area{display:flex;flex-flow: column;}
.studio-item{width:100%;}
.floor-plan-image { margin-bottom:30px;display:flex;align-items:center;justify-content:center;}
.floor-plan-image img { width: 100%; height:100%;object-fit: cover;}

.studios-container { display: flex; gap: 30px;}
.studio-spec-card { flex: 1; background-color:#f8f9fa; border: 1px solid #e2e8f0; border-radius:8px; padding: 25px; transition: transform 0.2s ease; }

.studio-title { font-weight: 700; color: #333; margin: 0 0 20px; padding-bottom: 10px; border-bottom: 2px solid #eee; position: relative; }
.studio-title::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 40px; height: 2px; background-color: #333; }

.spec-list { list-style: none; padding: 0; margin: 0 0 25px; }
.spec-list li { display: flex; align-items:center;justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e2e8f0; }
.spec-list .spec-value { margin-top: 0;}

.facility-section { background-color:#f1f5f9; padding: 15px 20px; border-radius: 4px; }
.facility-list { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0; margin:10px 0 0; list-style: none; }
.facility-list li {position: relative;padding-left: 12px;color: #4a5568;font-size:1.125rem;}
.facility-list li::before { content: "•"; position: absolute; left: 0; top: -1px;color:#4a5568; }

#studio .sec03_contents h6{color:#333;}

@media (max-width:1200px) {
    .floor-plan-image{}
}

@media (max-width: 1024px) {
    .studios-container { gap: 20px; }
    .studio-spec-card { padding: 20px; }
    .facility-list li{font-size:1rem;}
}

@media (max-width: 768px) {
    .studios-container { flex-direction: column; }
    .studio-spec-card {}
    .facility-list li{font-size:14px;}
}