@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

.t_white {color: #fff;}

.p_top_3 {padding-top: 3rem;}
.p_bottom_3 {padding-bottom: 3rem;}
.p_top_4 {padding-top: 4rem;}
.p_bottom_4 {padding-bottom: 4rem;}
.p_top_6 {padding-top: 6rem;}
.p_bottom_6 {padding-bottom: 6rem;}
.p_top_8 {padding-top: 8rem;}
.p_bottom_8 {padding-bottom: 8rem;}

/* =====================
   인사말
   ===================== */

/* 인사말 2컬럼 그리드 */
.greeting_wrap {display: grid; grid-template-columns: 1fr 2fr; gap: 70px; align-items: top; padding: 8rem 0 5rem; margin: 0 auto;}

/* 좌측 셀: 사진 + 이름 */
.greeting_photo_box {display: flex; flex-direction: column; align-items: center;}
.greeting_photo_box img {width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; display: block;}
.greeting_director_name {font-weight: 600; color: #2c2c2c; margin: 1.2rem 0 0.2rem; padding: 0; text-align: center;}
.greeting_director_title {font-weight: 400; color: #8a7d6b; text-transform: uppercase; margin: 0; padding: 0; text-align: center;}

/* 우측 셀: 텍스트 */
.greeting_text_box {display: flex; flex-direction: column; align-items: flex-start;}
.greeting_label {display: flex; align-items: center; gap: 0.8rem; margin-bottom: clamp(1rem, 2vh, 1.8rem);}
.greeting_label::before {content: ''; display: block; width: 2.5rem; height: 1px; background-color: #8a7d6b; flex-shrink: 0;}
.greeting_label span {font-weight: 400; color: #8a7d6b; text-transform: uppercase;}
.greeting_heading {font-weight: 700; color: #2c2c2c; margin: 0 0 clamp(1.5rem, 3vh, 2.5rem); padding: 0; word-break: keep-all;}
.greeting_heading .name_point {color: #b5914a; font-weight: 700;}
.greeting_body {font-weight: 300; color: #4a4a4a; word-break: keep-all; margin: 0 0 clamp(0.8rem, 2vh, 1.4rem); padding: 0; line-height: 2;}
.greeting_institution_bar {margin-top: clamp(2rem, 4vh, 3.5rem); padding-top: clamp(1.5rem, 3vh, 2.5rem); border-top: 1px solid rgba(138, 125, 107, 0.25); display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end; width: 100%;}
.greeting_institution_label {font-weight: 400; color: #b5914a; text-transform: uppercase; margin: 0 0 0.4rem; padding: 0;}
.greeting_institution_name {font-weight: 500; color: #2c2c2c; margin: 0; padding: 0;}
.greeting_sig_wrap {display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem;}
.greeting_sig_wrap img {width: clamp(60px, 8vw, 90px); height: auto; opacity: 0.85; display: block;}
.greeting_sig_caption {font-weight: 400; color: #8a7d6b; white-space: nowrap; margin: 0; padding: 0;}

/* 통계 3컬럼 그리드 */
.stats_wrap {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 auto; padding: clamp(2.5rem, 5vh, 4rem) 0;}
.stats_item {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(1.5rem, 3vh, 2.5rem) clamp(1rem, 2vw, 2rem); border-right: 1px solid rgba(138, 125, 107, 0.2); text-align: center;}
.stats_item:last-child {border-right: none;}
.stats_item svg {width: clamp(2rem, 3.5vw, 2.8rem); height: clamp(2rem, 3.5vw, 2.8rem); margin-bottom: clamp(0.8rem, 1.5vh, 1.2rem); display: block;}
.stats_label {font-weight: 500; margin: 0 0 0.5rem; padding: 0;}
.stats_value {font-weight: 700; margin: 0; padding: 0;}

/* =====================
   연혁
   ===================== */

/* Hero Section */
.living_hero_layout {display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8rem 0;}
.living_hero_title {font-weight: 700; color: #442a22; margin-bottom: 2rem;}
.living_hero_title span {font-weight: 700; color: #775a19;}
.living_hero_desc {font-weight: 400; color: #504441; opacity: 0.8; margin: 0 auto;}

/* Timeline Wrappers */
.living_timeline_wrap {position: relative;}
.living_timeline_wrap::before {content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background-color: rgba(119, 90, 25, 0.2); transform: translateX(-50%); z-index: 1;}

/* Layer 5 (Custom Item Layout) */
.living_timeline_item {display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; margin-bottom: 6rem; width: 100%; z-index: 2;}
.living_timeline_year_unit {font-weight: 700; color: #442a22; opacity: 0.1; transition: opacity 0.7s;}
.living_timeline_item:hover .living_timeline_year_unit {opacity: 1;}
.living_timeline_content_unit {font-weight: 400; color: #442a22;}
.living_timeline_content_unit .date {font-weight: 700; color: #775a19; display: block; margin-bottom: 0.5rem;}
.living_timeline_content_unit h3 {font-weight: 700; color: #442a22; margin-bottom: 0.5rem;}
.living_timeline_content_unit p {font-weight: 400; color: #504441; opacity: 0.7;}

/* 안정적인 교차 정렬 (컴포넌트 분할 대응용 명시적 클래스) */
.living_timeline_item.item-odd .living_timeline_year_unit {text-align: right;}
.living_timeline_item.item-even .living_timeline_year_unit {order: 2; text-align: left;}
.living_timeline_item.item-even .living_timeline_content_unit {order: 1; text-align: right;}

/* Connector Dot */
.living_timeline_item::after {content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; background-color: #cbb77c; border-radius: 50%; border: 3px solid #fff; transform: translate(-50%, -50%); z-index: 3;}

/* Quote Section */
.living_quote_layout {display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2rem; border-top: 1px solid rgba(212, 195, 190, 0.2); padding-top: 4rem;}
.living_quote_icon {font-weight: 400; color: #775a19;}
.living_quote_text {font-weight: 400; font-style: italic; color: #442a22; max-width: 48rem; margin: 0 auto;}
.living_quote_btns {display: flex; gap: 1.5rem; margin-top: 1rem;}
.living_btn_primary {font-weight: 700; background-color: #442a22; color: #ffffff; padding: 1rem 2.5rem; text-decoration: none; border-radius: 4px;}
.living_btn_secondary {font-weight: 700; color: #442a22; border-bottom: 2px solid #775a19; text-decoration: none; padding-bottom: 0.2rem;}

/* =====================
   오시는길
   ===================== */
/* Namespace Wrapper Base */
.living-arrival-theme {background-color: transparent; color: #1c1c17;}

.living-arrival-hero {display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 2rem;}
.living-arrival-accent {width: 1px; height: 100px; background-color: #e9c176; margin: 0 auto 3rem auto;}
.living-arrival-title {font-weight: 700; color: #442a22; letter-spacing: -0.05em; margin-bottom: 1rem;}
.living-arrival-subtitle {font-weight: 400; color: #775a19; font-style: italic;}

/* Left Column: Address / Contact */
.living-arrival-info-col {padding-right: 3rem;}
.living-arrival-info-group {margin-bottom: 3.5rem;}
.living-arrival-label {letter-spacing: 0.2em; color: #827470; font-weight: 600; margin-bottom: 1.5rem;}
.living-arrival-text {color: #442a22; line-height: 1.7;}
.living-arrival-italic {font-style: italic;}
.opacity-70 {opacity: 0.7;}
.living-arrival-contact-wrap {display: flex; flex-direction: column; gap: 0.5rem;}

/* Google Maps Link Button */
.living-arrival-link-wrap {padding-top: 2rem; border-top: 1px solid rgba(212, 195, 190, 0.3);}
.living-arrival-map-link {display: inline-flex; align-items: center; gap: 1rem; text-decoration: none; cursor: pointer;}
.living-arrival-map-link .icon {color: #775a19; font-variation-settings: 'FILL' 1;}
.living-arrival-map-link .text {color: #442a22; letter-spacing: 0.1em; font-weight: 600; border-bottom: 1px solid #775a19; padding-bottom: 2px; transition: opacity 0.3s ease;}
.living-arrival-map-link:hover .text {opacity: 0.7;}

/* Info Tag over Map */
.living-arrival-exhibit-tag {position: absolute; bottom: 2rem; right: 2rem; background-color: rgba(252, 249, 240, 0.9); backdrop-filter: blur(8px); padding: 1rem 1.5rem; border-radius: 4px; border: 1px solid rgba(212, 195, 190, 0.1); box-shadow: 0 1px 2px rgba(0,0,0,0.05);}

.living-arrival-transport-container {border-top: 1px solid rgba(212, 195, 190, 0.5); padding-top: 4rem;}
.living-arrival-transport-unit {padding-right: 1.5rem;}
.living-arrival-transport-head {display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem;}
.living-arrival-transport-head .material-symbols-outlined {color: #775a19;}
.living-arrival-transport-head h3 {font-weight: 700; color: #442a22; margin: 0;}

/* 대중교통 리스트 레이아웃 (배지와 텍스트를 가로로 배치) */
.living-arrival-transport-list li {display: flex; flex-direction: row; align-items: flex-start; gap: 0.8rem; margin-bottom: 1rem;}
.living-arrival-transport-list li span:last-child {color: #504441; flex: 1; padding-top: 0;}

/* 대중교통 공통 배지 스타일 */
.transport-badge {display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; color: #ffffff !important; font-size: 0.85rem; font-weight: 600; text-align: center; min-width: 3.5rem; flex-shrink: 0; letter-spacing: 0.05em;}

/* 부산 지하철 노선별 고유 색상 */
.badge-subway-1 {background-color: #f58f3e;} /* 1호선: 주황 */
.badge-subway-4 {background-color: #579fdb;} /* 4호선: 파랑 */
.badge-subway-donghae {background-color: #3166c1;} /* 동해선: 코레일 블루 */

/* 부산 버스 종류별 고유 색상 */
.badge-bus-normal {background-color: #6ebbc7;} /* 일반버스: 청록 */
.badge-bus-village {background-color: #79bb62;} /* 마을버스: 초록 */
.badge-bus-express {background-color: #db6b74;} /* 급행버스: 빨강 */
.font-weight-bold {font-weight: 600;}

.living-arrival-transport-desc {display: flex; flex-direction: column; gap: 1rem; color: #504441; line-height: 1.6;}
.living-arrival-parking-note {border-left: 2px solid #e9c176; padding-left: 1rem; font-style: italic; color: #504441;}

/* =====================
   Media Queries
   ===================== */
@media (max-width: 1024px) {
    /* 인사말 */
    .greeting_wrap {grid-template-columns: 1fr; gap: 2rem; padding: 5rem 0 3rem;}
    .greeting_text_box {align-items: center;}
    .greeting_heading {text-align: center;}
    .greeting_body {text-align: left;}

    /* 연혁 */
    .living_timeline_wrap::before {left: 20px;}
    .living_timeline_item {grid-template-columns: 1fr; gap: 1rem; padding-left: 60px;}
    .living_timeline_item::after {left: 20px; top: 2rem; transform: translateX(-50%);}
    
    /* 모바일에서는 교차 배열 무시하고 일관된 좌측 정렬 */
    .living_timeline_item.item-odd .living_timeline_year_unit,
    .living_timeline_item.item-even .living_timeline_year_unit,
    .living_timeline_item.item-odd .living_timeline_content_unit,
    .living_timeline_item.item-even .living_timeline_content_unit {text-align: left !important;}
    
    .living_timeline_item.item-odd .living_timeline_year_unit,
    .living_timeline_item.item-even .living_timeline_year_unit {order: 1 !important;}
    
    .living_timeline_item.item-odd .living_timeline_content_unit,
    .living_timeline_item.item-even .living_timeline_content_unit {order: 2 !important;}
    
    .living_hero_layout {padding: 3rem 0;}
}

@media (max-width: 767px) {
	
	.p_top_4 {padding-top: 3rem;}
	.p_bottom_4 {padding-bottom: 3rem;}
	.p_top_6 {padding-top: 3rem;}
	.p_bottom_6 {padding-bottom: 3rem;}
	.p_top_8 {padding-top: 4rem;}
	.p_bottom_8 {padding-bottom: 4rem;}
	
	
    /* 인사말 */
    .greeting_wrap {grid-template-columns: 1fr;}
    .greeting_institution_bar {flex-direction: column; align-items: flex-start; gap: 1.2rem;}

    .stats_wrap {grid-template-columns: 1fr;}
    .stats_item {border-right: none; border-bottom: 1px solid rgba(138, 125, 107, 0.2);}
    .stats_item:last-child {border-bottom: none;}
	
	/* 연혁 */
	.living_timeline_item::after {left: 6px;}
	.living_timeline_item {padding-left: 40px;}
	
    /* 오시는길 */
    .living-arrival-info-col {padding-right: 15px; margin-bottom: 4rem;}
    .living-arrival-exhibit-tag {bottom: 1rem; right: 1rem;}
    .living-arrival-transport-unit {margin-bottom: 3rem; padding-right: 15px;}
}