/* [ssi20-Global-Common] 
  상상인(SSI) 표준 레이아웃 및 16px 저주 방지 방어 코드 [cite: 478]
*/

/* 1. 기본 타이포그래피 정규화 */
body {
  font-family: var(--font-body, "Pretendard", sans-serif) !important;
  color: var(--color-text-main, #2d2d2d) !important;
  background-color: var(--color-bg-base, #ffffff);
  line-height: var(
    --leading-relaxed,
    1.8
  ) !important; /* 요양원 특유의 여유로운 줄간격 [cite: 405] */
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.font-display {
  font-family: var(--font-display, "Pretendard", sans-serif) !important;
  line-height: var(--leading-tight, 1.2) !important;
  letter-spacing: -0.02em !important;
}

/* 2. 섹션 공통 구조 및 여백 (Technical Shield) */
section {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  padding-top: var(--spacing-section, 6rem) !important;
  padding-bottom: var(--spacing-section, 6rem) !important;
}

@media (max-width: 768px) {
  section {
    padding-top: var(--spacing-section-mobile, 3.5rem) !important;
    padding-bottom: var(--spacing-section-mobile, 3.5rem) !important;
  }
}

/* 3. 컨테이너 정규화 (Standard: 1200px) */
.container-flexible {
  width: 100% !important;
  max-width: 1400px !important; /* 콘텐츠가 노출되는 최대 폭 제한 */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4. 상상인 표준: 부드러운 버튼 및 카드 스타일 */
.rounded-button {
  border-radius: var(--radius-button, 0.75rem) !important;
  transition: all 0.3s ease !important;
}

.warm-card {
  background: var(--color-surface-card, #ffffff) !important;
  border: 1px solid var(--color-border-base, #eeeeee) !important;
  border-radius: var(--radius-logic, 1.5rem) !important;
  box-shadow: var(--shadow-elevation-md) !important;
}

/* 5. 이미지 기본 보정 */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}
/*--- header begin ---------------*/
/* 1.1 공통 설정 (Common) */
#ssi20-Header .logo-img {
  height: 56px !important;
  width: auto !important;
  object-fit: contain !important;
}

#ssi20-Header .container-flexible {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* 1.2 PC 전용 스타일 (Desktop: 1024px 이상) */
@media (min-width: 1024px) {
  #ssi20-Header nav {
    display: flex !important;
    justify-content: center !important;
    flex: 1 !important;
    gap: 20px !important; /* 메뉴 사이 간격 */
  }
  #ssi20-Header {
    height: 100px !important; /* 메뉴가 커졌으므로 높이 상향 */
  }

  #ssi20-Header .logo-img {
    height: 64px !important; /* 로고도 시원하게 키움 */
  }

  /* [핵심] PC 메인 메뉴 폰트 20px */
  #ssi20-Header .pc-menu-link {
    font-size: 20px !important; 
    font-weight: 700 !important; 
    color: #2b5797 !important;
    white-space: nowrap !important;
    letter-spacing: -0.04em !important; /* 20px이라 자간을 더 좁혀서 6개 메뉴 유지 */
    transition: all 0.3s ease !important;
    padding: 0 5px !important;
  }

  #ssi20-Header .pc-menu-link:hover {
    color: var(--color-brand-primary, #d32f2f) !important;
    transform: translateY(-2px);
  }

  #ssi20-Header nav {
    gap: 1.5rem !important; /* 메뉴 사이 간격 최적화 */
  }

  /* PC 드롭다운 패널 */
  #ssi20-Header .dropdown-panel {
    position: absolute !important;
    top: 90%; /* 헤더 높이에 맞게 조정 */
    left: 50%;
    transform: translateX(-50%);
    padding-top: 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 110;
  }

  #ssi20-Header .group:hover .dropdown-panel {
    opacity: 1 !important;
    visibility: visible !important;
  }

  #ssi20-Header .dropdown-card {
    background: white;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 1.5rem;
    min-width: 170px;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  #ssi20-Header .dropdown-card a {
    font-size: 17px !important; /* 서브메뉴도 1px 상향 */
    color: #444444 !important;
    font-weight: 500 !important;
  }

  #ssi20-Header .dropdown-card a:hover {
    color: var(--color-brand-primary, #d32f2f) !important;
  }
}

/* 1.3 모바일 전용 스타일 (Mobile: 1023px 이하) */
@media (max-width: 1023px) {
  #ssi20-Header .logo-img {
    height: 44px !important;
  }

  #ssi20-Header .dropdown-panel {
    display: none !important;
  }

  #mobile-menu {
    position: fixed !important;
    inset: 0 !important;
    background: white !important;
    z-index: 120 !important;
    overflow-y: auto !important;
    padding: 110px 24px 60px !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  #mobile-menu a.text-xl,
  #mobile-menu button.text-xl {
    font-size: 1.25rem !important; /* 20px */
    font-weight: 700 !important;
    color: #2b5797 !important;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 14px;
    margin-bottom: 4px;
    text-align: left;
    width: 100%;
  }

  .mobile-sub-container div:not(.hidden) {
    display: flex !important;
    flex-direction: column;
    background-color: #f8fafc;
    border-radius: 10px;
    margin: 10px 0 20px 0;
    padding: 15px;
    gap: 12px;
  }
}

/* 1.4 버튼 및 공통 UI */
#ssi20-Header .header-cta {
  background-color: var(--color-brand-primary, #d32f2f) !important;
  color: white !important;
  padding: 0.7rem 1.4rem;
  border-radius: 0.6rem;
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
  transition: all 0.3s;
}

#ssi20-Header .header-cta:hover {
  background-color: #b71c1c !important;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.2);
}
@media (min-width: 1600px) {
  #ssi20-Header nav { gap: 40px !important; } /* 넓은 모니터에선 간격 더 확보 */
}
/*--- header end ---------------*/
/*------------- hero begin ---*/
#ssi20-Hero {
  min-height: 800px !important;
  height: 90vh !important;
  /* 상단에서부터 배치를 시작하도록 flex-start(items-start) 대응 */
  align-items: flex-start !important;
}

@media (min-width: 1440px) {
  #ssi20-Hero {
    height: 980px !important;
  }
}

#ssi20-Hero .hero-bg-img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

#ssi20-Hero .hero-title {
  /* 기존 크기에서 약 20% 확대 */
  font-size: clamp(1.8rem, 7.2vw, 4rem) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  word-break: keep-all;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

#ssi20-Hero .hero-title span.text-white {
  display: inline-block;
  margin-top: 20px; /* 행간 사이 20px 추가 벌림 */
}

#ssi20-Hero .hero-cta-btn {
  display: inline-block !important;
  background-color: var(--color-brand-primary, #d32f2f) !important;
  color: #ffffff !important;
  padding: 1rem 2.8rem !important; /* 버튼 크기도 소폭 조정 */
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  border-radius: 99px !important;
  box-shadow: 0 8px 20px rgba(211, 47, 47, 0.3) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

/* 모바일 대응 (Technical Shield) */
@media (max-width: 768px) {
  #ssi20-Hero {
    min-height: 600px !important;
  }
  #ssi20-Hero .hero-title {
    font-size: 1.8rem !important; /* 20% 확대 반영 (1.5rem -> 1.8rem) */
  }
  #ssi20-Hero .relative.z-10 {
    padding-top: 180px !important; /* 모바일 환경에 맞는 세로 위치 조정 */
  }
}
/*------------- hero end -----------*/
/*---------- activity begin ---------*/
#ssi20-Activity {
  background-color: #f9fafb !important;
}

#ssi20-Activity .activity-card {
  border: 1px solid #edf2f7 !important;
}

/* 16px 저주 방지 및 텍스트 정렬 */
#ssi20-Activity h4 {
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.5 !important;
}

#ssi20-Activity .aspect-\[4\/3\] {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 비율 강제 고정 */
}

#ssi20-Activity .aspect-\[4\/3\] img {
  position: absolute;
  top: 0;
  left: 0;
}
/*---------- activity end ---------*/
/*--------- map + gongji begin ----------*/
#ssi20-Community {
  background-color: #ffffff !important;
}

#ssi20-Community a.group:hover {
  background-color: #f8fafc; /* 마우스 올렸을 때 살짝 강조 */
  padding-left: 8px;
  transition: all 0.3s ease;
}

#ssi20-Community iframe {
  filter: grayscale(0.2) contrast(1.1); /* 지도를 사이트 분위기에 맞게 살짝 살균 */
}

@media (max-width: 1023px) {
  #ssi20-Community .flex-col-reverse {
    gap: 3rem;
  }
}
/*--------- map + gongji end ----------*/
/*-----  footer begin------------------*/
#ssi20-Footer {
  background-color: #1a2436 !important; /* 조금 더 깊이감 있는 네이비 */
}

#ssi20-Footer span.text-red-500 {
  min-width: 65px;
  display: inline-block;
}

#ssi20-Footer a:hover {
  color: #ffffff !important;
}

/* 모바일 텍스트 정렬 보정 */
@media (max-width: 768px) {
  #ssi20-Footer .grid {
    gap: 2rem !important;
  }
}
/*-----  footer end------------------*/
/*---------- SubPage & Header Mobile Standard (v2.0) -------------*/

/* 1. SubHero: 회색 여백 제거 및 이미지 꽉 채움 보정 */
#ssi20-SubHero {
    padding: 0 !important;
    min-height: auto !important;
    background-color: #ffffff !important;
}

#ssi20-SubHero img {
    filter: brightness(0.85); /* 텍스트 가독성 확보  */
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 상하 회색 여백 제거 핵심 */
}

/* 2. Greeting: 섹션 기본 스타일 및 텍스트 정규화 [cite: 481] */
#ssi20-Greeting {
    background-color: var(--color-bg-base, #ffffff) !important;
}

#ssi20-Greeting p {
    word-break: keep-all !important; /* 한글 단어 끊김 방지  */
    text-align: justify !important;
    text-justify: inter-word !important;
    line-height: var(--leading-relaxed, 1.8) !important;
}

/* 3. Greeting Image: 그림자 및 표준 라운딩 적용  */
#ssi20-Greeting img {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--radius-logic, 1.5rem) !important;
}

/* 4. Responsive: 모바일 환경 강제 살균 (1023px 이하)  */
/*---------- Header & Mobile Menu Standard (v2.6) -------------*/

@media (max-width: 1023px) {
    /* 1. 헤더 루트: 메뉴가 버튼을 뚫고 나오지 못하도록 레이어 격리  */
    #ssi20-Header {
        height: 70px !important;
        position: relative !important;
        z-index: 50 !important; /* 기본 헤더는 낮게 설정 */
        background-color: #ffffff !important;
    }

    /* 2. 모바일 메뉴 컨테이너: 전체 화면을 덮고 배경을 불투명하게 강제 [cite: 457, 464] */
    #mobile-menu {
        position: fixed !important;
        inset: 0 !important;
        background-color: #ffffff !important; /* 투명화 방지  */
        z-index: 1000 !important; /* 최상위 계층으로 설정하여 모든 요소 위에 노출  */
        display: flex !important; /* 내부 요소 강제 노출 */
        flex-direction: column !important;
        padding: 0 !important;
        overflow-y: auto !important;
        opacity: 1 !important; /* 가시성 100% 보장 */
    }

    /* 3. 메뉴 상단 바 (로고 + X버튼): 메뉴가 열려도 항상 상단에 노출  */
    .menu-top-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 70px !important;
        padding-inline: var(--gutter, 1rem) !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid #f2f2f2 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1010 !important; /* 메뉴 컨테이너보다 높게 설정 */
    }

    /* 4. 닫기 버튼(X) 및 로고 색상 살균 [cite: 478] */
    .close-btn {
        color: #2b5797 !important; /* X표 색상 강제 [cite: 478] */
        font-size: 2rem !important;
        z-index: 1020 !important;
    }

    /* 5. 메뉴 리스트: 텍스트가 사라지지 않도록 색상 및 간격 고정 [cite: 478, 480] */
    .menu-list-container {
        padding: 20px 24px 80px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .menu-list-container > a,
    .menu-list-container .mobile-sub-container > button {
        font-size: 1.25rem !important; /* 20px 표준 [cite: 478] */
        font-weight: 700 !important;
        color: #2b5797 !important; /* 브랜드 컬러 강제 노출 [cite: 478] */
        border-bottom: 1px solid #f8fafc !important;
        padding-bottom: 15px !important;
        text-align: left !important;
        display: block !important;
        width: 100% !important;
    }

    .mobile-sub-container div a {
        font-size: 1.05rem !important;
        font-weight: 500 !important;
        color: #334155 !important;
        padding: 5px 0 !important;
        border: none !important;
        display: block !important;
        width: 100% !important;
    }
}
/*---------- SubPage & Header end --------------*/

/*---------- SubPages Common Rules (Establish/Facility) ----------*/
#ssi20-Establish p,
#ssi20-Facility p,
#ssi20-Facility li {
    text-align: justify !important;
    text-justify: inter-word !important;
    line-height: 1.6 !important;
}

@media (max-width: 768px) {
    #ssi20-Establish p,
    #ssi20-Facility p,
    #ssi20-Facility li { 
        text-align: left !important; 
        font-size: 1.125rem !important; 
    }
    #ssi20-Establish, #ssi20-Facility {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}