@charset "utf-8";/* ========================================
   청사롱 페이지 공통 스타일
   - greeting.php (인사말)
   - hansanmosi.php (한산모시 소개)
   - ju_kyung_ja.php (주경자 프로필)
   - location.php (오시는 길)
======================================== */
/* ========================================
   기본 레이아웃
======================================== */
.pageContainer {}
/* ========================================
   페이지 헤더
======================================== */
.pageHero {margin-bottom:40px; padding:30px 20px; border:1px solid var(--ui-color-gray-100); border-radius:16px; background:linear-gradient(135deg, var(--ui-color-gray-50) 0%, var(--ui-color-white) 100%); text-align:center;}
.pageHero .heroIcon {display:inline-flex; justify-content:center; align-items:center; width:80px; height:80px; margin-bottom:20px; border-radius:50%; background:var(--color-prime); color:#fff; font-size:36px;}
.pageHero .heroTitle {margin:0 0 12px; color:var(--ui-color-gray-900); font-size:32px; font-weight:700;}
.pageHero .heroSubtitle {margin:0; color:var(--ui-color-gray-500); font-size:16px; line-height:1.6;}
/* ========================================
   섹션 공통 스타일
======================================== */
.pageSection {margin-bottom:40px;}
.pageSection .sectionHeader {display:flex; align-items:center; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--ui-color-gray-200);}
.pageSection .sectionTitle {display:flex; align-items:center; margin:0; color:var(--ui-color-gray-800); font-size:22px; font-weight:700; gap:10px;}
.pageSection .sectionTitle i {color:var(--color-prime); font-size:26px;}
.pageSection .sectionDesc {margin-top:8px; color:var(--ui-color-gray-500); font-size:14px;}
/* ========================================
   콘텐츠 박스
======================================== */
.contentBox {overflow:hidden; border:1px solid var(--ui-color-gray-200); border-radius:12px; background:var(--ui-color-white);}
.contentItem {display:flex; padding:24px; border-bottom:1px solid var(--ui-color-gray-100);}
.contentItem:last-child {border-bottom:none;}
.contentItem .itemIcon {display:flex; justify-content:center; align-items:flex-start; padding-top:4px; flex:0 0 60px;}
.contentItem .itemIcon i {color:var(--color-prime); font-size:32px;}
.contentItem .itemBody {flex:1;}
.contentItem .itemTitle {margin:0 0 8px; color:var(--ui-color-gray-800); font-size:18px; font-weight:600;}
.contentItem .itemText {margin:0; color:var(--ui-color-gray-600); font-size:14px; line-height:1.8;}
/* ========================================
   인트로 카드 (인사말용)
======================================== */
.introCard {display:flex; padding:40px; border:1px solid var(--ui-color-gray-200); border-radius:12px; background:linear-gradient(135deg, var(--ui-color-gray-50) 0%, var(--ui-color-white) 100%); gap:40px;}
.introCard .introImage {flex:0 0 280px;}
.introCard .introImage img {width:100%; height:auto; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.1);}
.introCard .introContent {flex:1;}
.introCard .introGreeting {margin:0 0 20px; color:var(--ui-color-gray-900); font-size:24px; font-weight:700; line-height:1.4;}
.introCard .introGreeting span {color:var(--color-prime);}
.introCard .introText {margin:0 0 16px; color:var(--ui-color-gray-600); font-size:15px; line-height:1.9;}
.introCard .introSignature {margin-top:30px; padding-top:20px; border-top:1px solid var(--ui-color-gray-200); text-align:right;}
.introCard .introSignature .signTitle {display:block; margin-bottom:4px; color:var(--ui-color-gray-500); font-size:13px;}
.introCard .introSignature .signName {color:var(--ui-color-gray-800); font-size:20px; font-weight:700;}
/* ========================================
   프로세스 카드 (한산모시 생산과정용)
======================================== */
.processGrid {display:grid; grid-template-columns:repeat(4, 1fr);gap:16px;}
.processCard {padding:24px 20px; border:1px solid var(--ui-color-gray-200); border-radius:12px; background:var(--ui-color-white); text-align:center; transition:all 0.3s ease;}
.processCard:hover {border-color:var(--color-prime); box-shadow:0 8px 24px rgba(0,0,0,0.08); transform:translateY(-4px);}
.processCard .processStep {display:inline-flex; justify-content:center; align-items:center; width:40px; height:40px; margin-bottom:12px; border-radius:50%; background:var(--color-prime); color:#fff; font-size:16px; font-weight:700;}
.processCard .processTitle {margin:0 0 8px; color:var(--ui-color-gray-800); font-size:16px; font-weight:600;}
.processCard .processDesc {margin:0; color:var(--ui-color-gray-500); font-size:13px; line-height:1.6;}
/* ========================================
   프로필 테이블
======================================== */
.profileTable {width:100%; border-collapse:collapse;}
.profileTable th,
.profileTable td {padding:14px 16px; border-bottom:1px solid var(--ui-color-gray-100); font-size:14px; text-align:left;}
.profileTable th {width:140px; background:var(--ui-color-gray-50); color:var(--ui-color-gray-700); font-weight:600; vertical-align:top;}
.profileTable td {color:var(--ui-color-gray-600); line-height:1.7;}
.profileTable tr:last-child th,
.profileTable tr:last-child td {border-bottom:none;}
/* ========================================
   타임라인 (연혁/경력용)
======================================== */
.timeline {position:relative; padding:30px 40px;}
.timeline::before {content:''; position:absolute; top:0; left:22px; bottom:0; width:1px; background:var(--ui-color-gray-200);}
.timelineItem {position:relative; padding-bottom:24px;}
.timelineItem:last-child {padding-bottom:0;}
.timelineItem::before {content:''; position:absolute; top:4px; left:-26px; width:12px; height:12px; border:2px solid var(--ui-color-white); border-radius:50%; background:var(--color-prime); box-shadow:0 0 0 3px var(--ui-color-gray-100);}
.timelineItem .timelineYear {display:inline-block; margin-bottom:8px; padding:4px 12px; border-radius:4px; background:var(--color-prime); color:#fff; font-size:13px; font-weight:600;}
.timelineItem .timelineTitle {margin:0 0 6px; color:var(--ui-color-gray-800); font-size:16px; font-weight:600;}
.timelineItem .timelineDesc {margin:0; color:var(--ui-color-gray-600); font-size:14px; line-height:1.7;}
/* ========================================
   배지/태그 스타일
======================================== */
.badgeList {display:flex; flex-wrap:wrap; gap:10px;}
.badge {display:inline-flex; align-items:center; padding:8px 14px; border-radius:20px; background:var(--ui-color-gray-100); color:var(--ui-color-gray-700); font-size:13px; font-weight:500; gap:6px;transition:all 0.2s ease;}
.badge i {color:var(--color-prime);}
.badge.badge-primary {background:var(--color-prime); color:#fff;}
.badge.badge-primary i {color:#fff;}
/* ========================================
   아코디언 스타일
======================================== */
.accordion {overflow:hidden; border:1px solid var(--ui-color-gray-200); border-radius:12px;}
.accordionItem {border-bottom:1px solid var(--ui-color-gray-100);}
.accordionItem:last-child {border-bottom:none;}
.accordionHeader {display:flex; justify-content:space-between; align-items:center; padding:18px 24px; background:var(--ui-color-white); cursor:pointer; transition:background 0.2s ease;}
.accordionHeader:hover {background:var(--ui-color-gray-50);}
.accordionHeader .accordionTitle {display:flex; align-items:center; color:var(--ui-color-gray-800); font-size:16px; font-weight:600; gap:12px;}
.accordionHeader .accordionTitle i {color:var(--color-prime); font-size:20px;}
.accordionHeader .accordionIcon {color:var(--ui-color-gray-400); font-size:20px; transition:transform 0.3s ease;}
.accordionItem.active .accordionIcon {transform:rotate(180deg);}
.accordionBody {display:none; padding:20px 24px; border-top:1px solid var(--ui-color-gray-100); background:var(--ui-color-gray-50);}
.accordionItem.active .accordionBody {display:block;}
/* ========================================
   연락처 카드 (오시는 길용)
======================================== */
.contactGrid {display:grid; grid-template-columns:repeat(3, 1fr);gap:20px;}
.contactCard {display:flex; align-items:center; flex-direction:column; padding:30px 20px; border:1px solid var(--ui-color-gray-200); border-radius:12px; background:var(--ui-color-white); text-align:center; transition:all 0.3s ease;}
.contactCard:hover {border-color:var(--color-prime); box-shadow:0 8px 24px rgba(0,0,0,0.08);}
.contactCard .contactIcon {display:flex; justify-content:center; align-items:center; width:60px; height:60px; margin-bottom:16px; border-radius:50%; background:var(--ui-color-gray-100); color:var(--color-prime); font-size:28px; transition:all 0.3s ease;}
.contactCard:hover .contactIcon {background:var(--color-prime); color:#fff;}
.contactCard .contactLabel {display:block; margin-bottom:6px; color:var(--ui-color-gray-500); font-size:13px; font-weight:500;}
.contactCard .contactValue {color:var(--ui-color-gray-800); font-size:16px; font-weight:600;}
.contactCard .contactValue a {color:inherit; text-decoration:none;}
.contactCard .contactValue a:hover {color:var(--color-prime);}
/* ========================================
   지도 영역
======================================== */
.mapContainer {margin-top:30px; overflow:hidden; border:1px solid var(--ui-color-gray-200); border-radius:12px;}
.mapContainer img {display:block; width:100%; height:auto;}
.mapContainer iframe {display:block; width:100%; height:400px;}
.mapActions {display:flex; margin-top:16px; gap:12px;}
.mapBtn {display:inline-flex; align-items:center; padding:12px 20px; border:1px solid var(--ui-color-gray-300); border-radius:8px; background:var(--ui-color-white); color:var(--ui-color-gray-700); font-size:14px; font-weight:500; text-decoration:none; gap:8px;transition:all 0.2s ease;}
.mapBtn:hover {border-color:var(--color-prime); background:var(--color-prime); color:#fff;}
.mapBtn i {font-size:18px;}
/* ========================================
   하이라이트 박스
======================================== */
.highlightBox {padding:0 24px; border-left:4px solid var(--color-prime); border-radius:0 12px 12px 0; background:linear-gradient(135deg, rgba(var(--color-prime-rgb), 0.05) 0%, rgba(var(--color-prime-rgb), 0.02) 100%);}
.highlightBox .highlightTitle {margin:0 0 12px; color:var(--ui-color-gray-800); font-size:18px; font-weight:600;}
.highlightBox .highlightText {margin:0; color:var(--ui-color-gray-600); font-size:14px; line-height:1.8;}
/* ========================================
   리스트 스타일
======================================== */
.listStyled {margin:0; padding:0; list-style:none;}
.listStyled li {position:relative; margin-bottom:10px; padding-left:20px; color:var(--ui-color-gray-600); font-size:14px; line-height:1.7;}
.listStyled li:last-child {margin-bottom:0;}
.listStyled li::before {content:''; position:absolute; top:8px; left:0; width:6px; height:6px; border-radius:50%; background:var(--color-prime);}
/* ========================================
   반응형
======================================== */
@media (max-width:992px) {
    .processGrid {grid-template-columns:repeat(2, 1fr);}
    .contactGrid {grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:768px) {
    .pageContainer {}
    .pageHero {margin-bottom:30px; padding:40px 20px;}
    .pageHero .heroIcon {width:60px; height:60px; font-size:28px;}
    .pageHero .heroTitle {font-size:24px;}
    .pageHero .heroSubtitle {font-size:14px;}
    .pageSection .sectionTitle {font-size:18px;}
    .pageSection .sectionTitle i {font-size:22px;}
    .introCard {flex-direction:column; padding:24px; gap:24px;}
    .introCard .introImage {max-width:240px; margin:0 auto; flex:none;}
    .introCard .introGreeting {font-size:20px;}
    .contentItem {flex-direction:column; padding:20px;}
    .contentItem .itemIcon {margin-bottom:12px; flex:none;}
    .processGrid {grid-template-columns:1fr 1fr;gap:12px;}
    .processCard {padding:20px 16px;}
    .contactGrid {grid-template-columns:1fr;gap:16px;}
    .contactCard {padding:24px 20px;}
    .profileTable th,
    .profileTable td {display:block; width:100%;}
    .profileTable th {padding-bottom:8px; border-bottom:none;}
    .profileTable td {padding-top:0;}
    .timeline {}
    .timelineItem::before {left:-20px;}
    .mapActions {flex-direction:column;}
}
@media (max-width:480px) {
    .processGrid {grid-template-columns:1fr;}
    .badgeList {gap:8px;}
    .badge {padding:6px 12px; font-size:12px;}
}