/* 기본 레이아웃 */
html,body {
height:100%;
margin:0; padding:0;
font-family: 'IBMPlexSansKR-Regular',"Noto Sans KR",sans-serif;
background:#f8f9fa;
color:#222;
display:flex; flex-direction:column;
font-size: 16px;
line-height: 1.6;
}
/* 모바일에서는 더 큼 */
@media (max-width: 768px) {
body {
font-size: 17px;
}
}
.container {
max-width: 100% !important;
padding-left: 10px;
padding-right: 10px;
}
/* 화면이 1920px 이상일 때는 1600px로 고정 */
@media (min-width: 1599px) {
.container {
max-width: 1400px !important;
margin-left: auto;
margin-right: auto;
padding-left: 100px;
padding-right: 100px;
}
}
/* 로딩 스피너 */
#spinner {
position: fixed;
top:0; left:0; width:100%; height:100%;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
transition:opacity .5s ease, visibility .5s ease;
}
#spinner.hide {
opacity:0; visibility:hidden;
}
a, a:link, a:visited, a:hover, a:active {
text-decoration: none !important;
}
a:hover {
text-decoration: none !important;
color: inherit !important; /* 링크 색상도 부모 글자색 따라감 */
}
main { flex:1 0 auto; margin-top:120px; }
footer { flex-shrink:0; }
/* 헤더 */
header {
position:fixed; top:0; left:0; width:100%;
background:#fff; border-bottom:1px solid #eee;
z-index:1000; padding:1.4rem 0;
}
header .logo { padding-left:1rem; font-weight:700; font-size:1.4rem; color: var(--brand); }
header .logo span { color:var(--point); }
/* 헤더 전체 */
.navbar {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
/* 로고 */
.navbar-brand {
line-height: 1.2;
padding: 0;
font-size: 1.45rem;
font-weight: 800;
letter-spacing: -0.3px;
}
@media (min-width: 992px) {
.navbar-brand {
font-size: 1.7rem;
}
}
.nav-link {
color: #111;
font-size: 1rem;
font-weight: 600;
}
.nav-link:hover {
color: #5E5BEF;
}
/* YOUTH:HUB 강조 (유지) */
.title_logo {
margin-left: 6px;
padding: 3px 10px;
background: linear-gradient(135deg, #5E5BEF, #4CAF50);
color: #fff;
border-radius: 14px;
font-size: 0.85em;
font-weight: 800;
}
/* 모바일 버튼 */
.navbar-toggler {
padding: 4px 6px;
}
/* ===============================
모바일 풀스크린 오프캔버스
================================ */
/* offcanvas 자체를 화면 전체로 */
.offcanvas.offcanvas-fullscreen {
width: 100vw !important;
max-width: 100vw !important;
height: 100vh;
}
.offcanvas-end.offcanvas-fullscreen {
right: 0;
left: auto;
}
/* 열렸을 때만 전체 덮기 */
.offcanvas.offcanvas-fullscreen.show {
inset: 0;
}
/* 배경 살짝 투명 + 블러 */
.offcanvas-backdrop.show {
background-color: rgba(0, 0, 0, 0.35);
opacity: 1;
}
/* 뒤 화면 블러 */
body.menu-open main,
body.menu-open header,
body.menu-open footer {
filter: blur(3px);
transition: filter 0.2s ease;
}
/* 헤더 */
.offcanvas-header {
padding: 16px 20px;
border-bottom: 1px solid #eee;
}
/* 메뉴 영역 */
.offcanvas-body {
padding: 0;
}
/* 메뉴 리스트 */
.offcanvas-body .list-group-item {
padding: 18px 22px;
font-size: 1.15rem;
border-color: #eee;
}
/* 링크 스타일 */
.offcanvas-body .menu-link {
display: block;
width: 100%;
color: #1a1a1a;
text-decoration: none;
font-weight: 600;
}
/* hover */
.offcanvas-body .menu-link:hover {
color: var(--point);
}
/* 환불신청 강조 */
.offcanvas-body .text-danger {
font-weight: 700;
}
/* 상단 로고 영역 */
.offcanvas-header h5 span {
margin-left: 6px;
padding: 3px 10px;
background: linear-gradient(135deg, #5E5BEF, #4CAF50);
color: #fff;
border-radius: 14px;
font-size: 0.8em;
font-weight: 800;
}
/* Hero 카드 */
.hero-card {
background:linear-gradient(135deg,var(--brand) 0%,var(--point) 100%);
border-radius:16px; color:#fff;
padding:2rem; display:flex; flex-direction:column; min-height:400px;
}
.hero-card h2 { font-weight:800; font-size:1.5rem; }
.hero-card p { font-size:0.9rem; opacity:0.9; }
.hero-card .time h3 { font-weight: 800; font-size:1.6rem; }
.hero-card .badge { background:#ff4d4f; font-size:0.8rem; }
.hero-card .contact {
background:rgba(255,255,255,0.15);
border-radius:8px;
padding:0.8rem 1rem;
margin-top:1rem;
font-size:0.9rem;
}
.hero-card .contact strong { font-size:1.15rem; display:block; color:#fff; }
.hero-btn {
display:block; background:#fff; color:var(--point);
border:none; border-radius:10px;
font-size: 1.4rem; font-weight: bold; text-align:center;
padding:1.4rem 0; margin-top:1.5rem; transition:0.2s;
}
.hero-btn:hover { background:#f0f0ff; color:#3d3ae8; }
.space-card {
background: #ffffff;
border-radius: 6px;
box-shadow: 0 18px 40px rgba(0,0,0,0.08);
overflow: hidden;
}
/* 상단 컬러 헤더 */
.space-card-header {
background: linear-gradient(
135deg,
#f24f87,
#f06292
);
padding: 16px 26px;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.space-card-header h4 {
font-size: 1.2rem;
font-weight: 900;
margin: 6px 0 6px;
}
.space-card-header p {
margin: 0;
font-size: 0.95rem;
opacity: 0.9;
}
/* 버튼 */
.btn-detail {
background: rgba(255,255,255,0.25);
color: #fff;
padding: 4px 16px;
border-radius: 20px;
font-weight: 700;
font-size: 0.85rem;
text-decoration: none;
white-space: nowrap;
}
.btn-detail:hover {
background: rgba(255,255,255,0.4);
}
/* 정보 영역 */
.space-card-info {
list-style: none;
padding: 22px 26px;
margin: 0;
}
.space-card-info li {
padding: 10px 0;
border-bottom: 1px solid #eee;
font-size: 0.95rem;
color: #333;
}
.space-card-info li:last-child {
border-bottom: none;
}
.space-card.blue .space-card-header { background: linear-gradient(135deg,#2f5bea,#5e5bef); }
.space-card.green .space-card-header { background: linear-gradient(135deg,#43a047,#66bb6a); }
.space-card.orange .space-card-header { background: linear-gradient(135deg,#fb8c00,#ffa726); }
/* 자주묻는질문 */
.faq-card {
background: linear-gradient(
180deg,
#f4f6ff 0%,
#ffffff 60%
);
border-radius: 18px;
padding: 0;
border: 1px solid #e3e8ff;
box-shadow: 0 10px 30px rgba(47,91,234,0.08);
overflow: hidden;
}
.faq-card-header {
padding: 14px 20px;
font-weight: 800;
font-size: 1.05rem;
color: #3f6d5a;
background: linear-gradient(
135deg,
#eef2ff 0%,
#f8f9ff 60%,
#ffffff 100%
);
border-bottom: 1px solid #e3e8ff;
}
/* 카드 타이틀(공지사항 / 자주묻는질문) */
.faq-card .card-title,
.faq-card h5 {
font-weight: 800;
font-size: 1.1rem;
color: var(--brand);
margin-bottom: 1rem;
padding-left: 12px;
position: relative;
}
.faq-card .card-title::before,
.faq-card h5::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 60%;
background: var(--point);
border-radius: 2px;
}
/* 섹션 타이틀 컬러 정제 버전 */
.section-title {
position: relative;
padding-left: 16px;
font-size: 1.4rem;
font-weight: 800;
color: #0b1f44;
margin-bottom: 18px;
letter-spacing: -0.3px;
}
/* 좌측 포인트 바 */
.section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 70%;
background: linear-gradient(
180deg,
#4f6df5, /* 블루 */
#4CAF50 /* 그린 */
);
border-radius: 4px;
}
/* ===== 타임라인 전체 컨테이너 ===== */
.section-title,
.timeline-header h5 {
font-size: 1.25rem; /* 약 20px */
font-weight: 700;
}
@media (max-width: 768px) {
.section-title,
.timeline-header h5 {
font-size: 1.35rem;
}
}
.timeline-container {
display:flex;
background:#fff;
box-shadow:0 2px 6px rgba(0,0,0,0.25);
overflow:hidden;
}
/* ===== 왼쪽 시설명 컬럼 (고정) ===== */
.timeline-left {
flex:0 0 160px;
background:#fff;
border-right:1px solid #eee;
z-index:10;
}
.timeline-left-header {
height:25px;
line-height:25px;
text-align:left;
font-weight:700;
font-size:0.8rem;
color:#555;
padding-left:8px;
border-bottom:2px solid #ccc;
background:#fafafa;
}
.facility-name {
height:50px;
line-height:50px;
font-size: .9rem;
font-weight:600;
color:var(--brand);
padding-left:8px;
border-bottom:1px solid #eee;
white-space:nowrap;
background:#fff;
}
/* ===== 오른쪽 스크롤 영역 ===== */
.timeline-right {
flex:1;
overflow-x:auto;
overflow-y:hidden;
position:relative;
}
/* 시간축 */
.timeline-hours {
display:flex;
position:sticky;
top:0;
background:#fafafa;
border-bottom:2px solid #ccc;
height:25px;
min-width:2880px; /* 24시간 * 60분 / 10 = 144칸 * 20px = 2880px */
z-index:5;
}
.timeline-hour {
flex:0 0 20px;
text-align:center;
font-size:0.7rem;
color:#666;
border-left:1px solid #eee;
line-height:25px;
}
.timeline-hour:nth-child(6n+1){ font-weight:600; color:#333; }
.timeline-hour:first-child{ border-left:none; }
/* 시설별 행 */
.timeline-row {
display:flex;
align-items:center;
height:50px;
border-bottom:1px solid #eee;
}
.timeline-row .track {
flex:1;
position:relative;
height:100%;
min-width:2880px;
background:repeating-linear-gradient(to right,#fafafa,#fafafa 19px,#f3f3f3 20px);
}
/* timeline-right 기준 잡기 */
.timeline-right {
position: relative;
}
.now-line {
position: absolute;
top: 0;
bottom: 0;
width: 0;
border-left: 14px dashed rgba(255, 91, 91, 0.9);
z-index: 20;
pointer-events: none;
}
/* ===============================
운영안내 박스
================================ */
.operation-section h5 {
color: var(--brand);
font-size: 1.25rem;
}
/* 공통 박스 */
.op-box {
background: #ffffff;
border: 1px solid #e6e9f2;
border-radius: 14px;
padding: 22px 24px;
height: 100%;
box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
/* 헤더 */
.op-header {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.4rem;
font-weight: 700;
color: var(--brand);
margin-bottom: 14px;
}
/* 아이콘 */
.op-header i {
font-size: 2rem;
color: var(--point);
}
/* 휴관일 헤더 */
.op-header.danger {
color: #dc3545;
}
.op-header.danger i {
color: #dc3545;
}
/* 요일 배지 공통 */
.day-badge {
display: inline-flex;
align-items: center;
justify-content: center;
/* 크기 고정 */
width: 70px;
height: 30px;
margin-right: 6px;
border-radius: 13px;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: px;
white-space: nowrap;
/* 연한 블루-그린 톤 */
background: linear-gradient(
135deg,
rgba(79, 109, 245, 0.15),
rgba(76, 175, 80, 0.15)
);
color: #2f5bea;
}
/* 본문 */
.op-body {
line-height: 1.7;
}
/* 크게 보이는 핵심 텍스트 */
.op-main {
font-size: 1.25rem;
font-weight: 800;
margin-bottom: 6px;
}
/* 보조 설명 */
.op-sub {
font-size: 0.95rem;
color: #666;
}
.op-main,
.op-sub {
display: flex;
align-items: center; /* 세로 중앙 정렬 핵심 */
gap: 10px;
}
/* ===============================
모바일에서 간격 보정
================================ */
@media (max-width: 991px) {
.op-main {
font-size: 1.2rem;
}
}
/* 일정 카드 */
.schedule-item {
font-size: 1.05rem;
}
/* 시간 */
.schedule-item .time {
font-size: 1.1rem;
font-weight: 700;
}
/* 프로그램 제목 */
.schedule-item .title {
font-size: 1.15rem;
font-weight: 700;
}
/* 장소 */
.schedule-item .place {
font-size: 0.95rem;
color: #666;
}
/* 예약 블록 */
.block {
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
position:absolute;
top:6px;
height:38px;
border-radius:6px;
color:#fff;
font-size: 0.9rem;
padding:4px 8px;
white-space:nowrap;
/* 이 두 줄을 교체합니다 ↓ */
display: block; /* flex → block */
line-height: 0.95rem; /* 줄 간격 살짝 여유 */
align-items:center;
z-index:2;
}
.block small {
font-size: 0.8rem;
opacity: 0.9;
}
.block.rent {
background: rgba(94, 91, 239, 0.85); /* 기존 var(--rent) → 약간 투명 */
transition: background 0.3s ease;
}
.block.prog {
background: rgba(76, 175, 80, 0.85); /* 기존 var(--prog) → 약간 투명 */
}
/*
.block.rent { background:var(--rent); }
.block.prog { background:var(--prog); }
*/
.timeline-right::-webkit-scrollbar { height:6px; }
.timeline-right::-webkit-scrollbar-thumb {
background:rgba(0,0,0,0.3);
border-radius:6px;
}
@keyframes fadeIn {
from { opacity:0; transform:translateY(10px); }
to { opacity:1; transform:translateY(0); }
}
/* 기본 설정 */
h2.title {
font-weight:800;
color:var(--brand);
margin-bottom:0.5rem;
}
.subtitle {
color:#555;
margin-bottom:2rem;
}
/* 카드 */
.facility-card {
background:#fff;
border-radius:16px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
overflow:hidden;
transition:transform .2s ease, box-shadow .2s ease;
height:100%;
}
.facility-card:hover {
transform:translateY(-3px);
box-shadow:0 6px 16px rgba(0,0,0,0.08);
}
.facility-info { padding:1.6rem; }
.facility-info h5 { font-weight:700; color:var(--brand); margin-bottom:1rem; }
/* 항목 정렬 */
.info-row {
display:flex;
align-items:flex-start;
margin-bottom:0.4rem;
}
.info-label {
flex:0 0 80px;
color:#444;
font-weight:600;
font-size:0.9rem;
}
.info-value {
flex:1;
color:#555;
font-size:0.9rem;
word-break:keep-all;
line-height:1.4;
}
/* 이미지 */
.facility-img {
position:relative;
height:240px;
overflow:hidden;
}
.facility-img img {
width:100%;
height:100%;
object-fit:cover;
transition:transform .3s ease;
}
.facility-card:hover .facility-img img { transform:scale(1.05); }
/* 버튼 */
.btn-rent {
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
background:var(--point);
color:#fff !important;
border:none;
border-radius:8px;
padding:10px 20px;
font-weight:600;
font-size:0.95rem;
transition:background 0.2s ease;
margin-top:1.2rem;
text-decoration:none !important;
}
.btn-rent:hover {
background:#3b39d0;
color:#fff !important;
}
/* 네비게이션 */
.progress-steps {
max-width: 900px;
margin: 0 auto;
}
.progress-steps .step {
text-align: center;
position: relative;
flex: 1;
color: #999;
}
.progress-steps .circle {
width: 50px;
height: 50px;
margin: 0 auto;
border-radius: 50%;
border: 2px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #999;
background: #fff;
transition: all 0.3s;
}
.progress-steps .line {
flex: 0 0 60px;
height: 2px;
background: #ddd;
}
.progress-steps .step span {
display: block;
margin-top: 6px;
font-size: 0.9rem;
font-weight: 600;
}
.progress-steps .step.active .circle {
background: #053272;
color: #fff;
border-color: #053272;
}
.progress-steps .step.active span {
color: #053272;
}
.progress-steps .step.active + .line {
background: #053272;
}
/* 네비게이션 */
/* 신청하기 */
.section-box {
background:#fff;
border-radius:16px;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
padding:2rem;
margin-bottom:2rem;
}
.btn-toggle {
border:1px solid #ccc;
border-radius:50px;
padding:8px 25px;
font-weight:600;
background:#fff;
color:#333;
transition:.2s;
}
.btn-toggle.active {
background:#053272;
color:#fff;
border-color:#053272;
}
.table-info td {
padding:6px 10px;
vertical-align:middle;
font-size:0.9rem;
}
label.form-label {
font-weight:600;
margin-top:10px;
}
input, select, textarea {
font-size:0.9rem !important;
}
.info-photo {
border-radius:12px;
overflow:hidden;
margin-bottom:1rem;
}
.info-photo img {
width:100%;
height:auto;
object-fit:cover;
}
.price-table {
border-radius:12px;
background:#f9fafc;
font-size:0.9rem;
}
.price-table th {
background:#f1f3f8;
color:#053272;
text-align:center;
}
.price-table td {
text-align:center;
vertical-align:middle;
}
.btn-next {
background:linear-gradient(90deg,#053272,#5E5BEF);
color:#fff;
border:none;
padding:14px 30px;
border-radius:50px;
font-weight:600;
}
.btn-cancel {
background:#dee2e6;
color:#555;
border:none;
padding:14px 30px;
border-radius:50px;
font-weight:600;
}
/* 신청하기 */
/* 동의 */
.rule-box {
background:#fff;
border-radius:16px;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
padding:2rem;
margin-bottom:2rem;
}
.scroll-box {
height:200px;
overflow-y:auto;
border:1px solid #ddd;
border-radius:8px;
padding:1rem;
background:#fafafa;
font-size:0.9rem;
line-height:1.5;
}
.btn-choice {
border:1px solid #ccc;
border-radius:30px;
padding:8px 25px;
font-weight:600;
background:#fff;
color:#333;
transition:.2s;
}
.btn-choice.active {
background:#053272;
color:#fff;
border-color:#053272;
}
.btn-gradient {
background:linear-gradient(90deg,#053272,#5E5BEF);
color:#fff;
border:none;
border-radius:50px;
padding:14px 36px;
font-weight:600;
}
canvas#signature {
width:100%;
height:220px;
background:#f2f2f2;
border-radius:8px;
border:1px solid #ccc;
cursor:url('/image/pen.png') 4 28, crosshair;
}
/* 동의 */
/* Footer */
footer {
background:var(--brand);
color:#fff;
padding:2rem 0;
font-size:0.9rem;
margin-top:3rem;
}
footer a { color:#fff; text-decoration:none; }
footer a:hover { color:var(--point); }
.table-light { border-top: 2px solid #666; border-color: #aaa; }
.table-light th { background: #eeeeee !important; }