/* main 안에 있을 때, 화면 전체로 펼치기 */
main.container.wrap > .page-hero{
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
}


/* Layout */
/* ========================
   Greeting 섹션 (원장 인사말)
   ======================== */

.greeting{
  margin: 40px 0 80px;
}

.greeting-card{
  background:#fff;
  border-radius:20px;
  border:1px solid #e3e7f2;
  box-shadow:0 12px 35px rgba(6,24,63,.08);
  padding:40px 48px;
  display:grid;
  grid-template-columns: minmax(0,1fr);
  row-gap:32px;
}

/* 상단 타이틀 영역 */
.greeting-card__head{
  grid-column:1 / -1;
  text-align: center; 
}

.greeting-card__title-row{
  display:flex;
  align-items:center;
  justify-content: center;
  gap:20px;
}

.greeting-card__dot{
  width:22px;
  height:22px;
  border-radius:50%;
  background:#D7FAEE;
}

.greeting-card__title{
  margin:0;
  font-family:'Pretendard', system-ui, -apple-system;
  font-size:32px;
  line-height:38px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:#333;
}

.greeting-card__desc{
  margin:8px 0 30px;
  font-size:18px;
  line-height:21px;
  color:#666;
  letter-spacing:-0.02em;
}

/* 본문 2열 */
.greeting-card__body{
  display:grid;
  grid-template-columns: 380px minmax(0,1fr);
  gap:40px;
}

/* 왼쪽 사진 영역 */
.greeting-photo{
  position:relative;
  align-self:start;
}

/* 뒤쪽 파란 배경 카드 */
.greeting-photo::before{
  content:"";
  position:absolute;
  left:20px;
  top:60px;
  width:360px;
  height:440px;
  border-radius:20px;
  background:#E6EDF7;
  z-index:0;
}

.greeting-photo__frame{
  position:relative;
  width:360px;
  height:470px;
  border-radius:20px;
  overflow:hidden;
  background:#D9D9D9;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  z-index:1;
  margin:0;
}

.greeting-photo__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* 오른쪽 텍스트 영역 */
.greeting-text{
  max-width: 830px;
}

.greeting-text__lead{
  margin:0 0 18px;
  font-size:28px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:-0.02em;
  color:#194A6C;
}

.greeting-text__quote{
  margin:0 0 14px;
  font-size:20px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:-0.02em;
  color:#666;
}

.greeting-text__para{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.6;
  letter-spacing:-0.02em;
  color:#666;
}

.greeting-text__sign{
  margin-top:18px;
  font-size:16px;
  line-height:1.4;
  letter-spacing:-0.02em;
  color:#333;
}
.greeting-text__sign strong{
  font-weight:700;
}

/* 소개자료 블럭 */
.greeting-download{
  margin-top:36px;
}

.greeting-download__title{
  margin:0;
  font-size:18px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-0.02em;
  color:#194A6C;
}
.greeting-download__title .bar{
  margin-right:6px;
}

.greeting-download__desc{
  margin:8px 0 16px;
  font-size:18px;
  line-height:1.4;
  letter-spacing:-0.02em;
  color:#666;
}

.greeting-download__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* 버튼들 (이 페이지 전용) */
.btn-download,
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 30px;
  border-radius:8px;
  font-size:16px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:-0.02em;
  text-decoration:none;
  cursor:pointer;
}

.btn-download{
  background:#194A6C;
  color:#fff;
  border:none;
}

.btn-download .ico-download{
  width:14px;
  height:14px;
  margin-left:8px;
  background:url('/images/download_icon.png') center/contain no-repeat;
}

.btn-outline{
  background:#fff;
  color:#194A6C;
  border:1px solid #194A6C;
}

/* 반응형 */
@media (max-width: 960px){
  .greeting-card{
    padding:28px 20px 32px;
  }
  .greeting-card__body{
    grid-template-columns: 1fr;
    gap:28px;
  }
  .greeting-photo{
    justify-self:center;
  }
}

@media (max-width: 560px){
  .greeting-photo__frame{
    width:280px;
    height:380px;
  }
}



/* Download */
.download h3{ margin:0 0 6px; font-size:16px; }
.download .btn{ width:100%; text-align:center; margin-top:8px; }
/* ========= Accent Palette (About/Greeting 전용) ========= */
:root{
  --accent:   #0a5bd3;   /* 주 포인트 */
  --accent-2: #0b3d91;   /* 딥 블루 */
  --accent-soft:#eaf1ff; /* 아주 옅은 포인트 배경 */
}

/* ========= 카드 & 호버에 살짝 포인트 ========= */
.greeting .card{
  border-color:#e6ecf5;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.greeting .card:hover{
  box-shadow: 0 8px 24px rgba(10,91,211,.12);
  border-color: rgba(10,91,211,.25);
  transform: translateY(-1px);
}

/* ========= 인사말 본문 포인트 ========= */
.greeting__message .lead{
  color:#1f2b3c;
}
.greeting__message .quote{
  border-left: 6px solid var(--accent);
  background: var(--accent-soft);
  color:#1f2b3c;
}
.signature{
  border-top: 1px dashed rgba(10,91,211,.35);
}
.signature .name{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* 인라인 하이라이트(선택): <mark class="hl">키워드</mark> */
.hl{
  background: linear-gradient(transparent 60%, rgba(10,91,211,.18) 0);
  padding: 0 .15em;
  border-radius: 3px;
}

/* ========= 사이드: 프로필/칩/버튼 색감 ========= */
.profile .avatar{ border-color:#f0f5ff; }
.profile__meta li{ position:relative; padding-left:18px; }
.profile__meta li::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background: var(--accent); position:absolute; left:0; top:.55em;
  box-shadow: 0 0 0 3px rgba(10,91,211,.12);
}

.chip{
  background: var(--accent-soft);
  color:#0e2247;
  border: none;
}
.chip:nth-child(2n){ background:#eef7ff; }
.chip:nth-child(3n){ background:#f3f0ff; }

/* 다운로드 카드 버튼을 그라데이션으로 */
.download .btn{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; border:0;
}
.download .btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.download .btn.ghost{
  background:transparent; color:var(--accent);
  border:1px solid rgba(10,91,211,.35);
}
.download .btn.ghost:hover{ background: rgba(10,91,211,.06); }

/* Responsive */
@media (max-width: 960px){
  .greeting{ grid-template-columns: 1fr; }
  .greeting__side{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .greeting__side{ grid-template-columns: 1fr; }
}



/* ==== Introduce: 섹션 간격 살짝 통일 ==== */
.intro-overview, .intro-roles, .intro-impact,
.intro-history, .intro-governance, .intro-lead, .intro-visit {
  margin: var(--space-sec) 0;
}

/* 개요 리드문 강조 */
.intro-overview .lead { font-weight: 700; color:#1f2b3c; }

/* 역할 카드 내부 리스트 */
.role-list { margin: 10px 0 0; padding-left: 18px; color:#2a2f36; }
.role-list li { margin: 6px 0; }

/* ==== 타임라인 ==== */
.timeline {
  list-style:none; margin:0; padding:0 0 0 14px; position:relative;
}
.timeline::before {
  content:""; position:absolute; left:0; top:4px; bottom:4px;
  width:2px; background:#e6ecf5;
}
.timeline > li { position:relative; margin: 14px 0 18px 0; }
.timeline > li::before {
  content:""; position:absolute; left:-6px; top:6px;
  width:10px; height:10px; border-radius:50%; background: var(--accent);
  box-shadow:0 0 0 4px rgba(10,91,211,.12);
}
.timeline time { font-weight:800; color:#0e2247; display:block; }
.timeline .tl-body h4 { margin:.2em 0; font-size:16px; }
.timeline .tl-body p { margin:.2em 0 0; color:#2a2f36; }

/* 리드 카드 */
.lead-card { display:flex; align-items:center; justify-content:space-between; }
.lead-card .btn { margin-top:8px; }

/* 숫자 카드 살짝 강조 (impact__grid 재사용) */
.intro-impact .impact__grid strong { color:#0e2247; }
/* =========================
   Introduce v2 (기관 소개 공통 섹션)
   ========================= */
/* ====== About: 공통 섹션 ====== */

/* 섹션 타이틀 + 밑줄 */
.intro-sec-head{
  margin: 40px 0 24px;          /* 위쪽/아래쪽 여백은 원하는대로 조절 */
  border-bottom: 2px solid #194A6C;
}

.intro-sec-head h2{
  display: inline-block;        /* 제목만 한 덩어리로 */
  margin: 0;
  padding: 0 24px 8px 0;        /* 오른쪽 24px 만큼 띄우고, 아래 8px 간격 */
  font-size: 24px;
  font-weight: 700;
  color: #194A6C;
  background: #ffffff;          /* 섹션 배경색(지금은 흰색)으로 줄을 가려 버림 */
}


.intro-cards{
  display:flex;
  flex-wrap:wrap;
  gap:31px;
}

.intro-cards--overview,
.intro-cards--roles,
.intro-cards--gov{
  justify-content:space-between;
}

/* ====== 기본 카드 ====== */
.intro-card{
  flex:1 1 0;
  min-width:260px;
  background:#E6EDF7;
  border-radius:12px;
  padding:34px 32px;
  /* Figma 처럼 카드 안 내용 가운데 배치 */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* 미션/비전/핵심가치 아이콘 */
.intro-card__icon{
  width:110px;
  height:110px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}
.intro-card__icon img{
  max-width:110px;
  max-height:110px;
}

/* 제목 */
.intro-card__title{
  font-size:24px;
  font-weight:700;
  color:#333;
  margin:0 0 14px;
}

/* 한 줄/두 줄 설명 */
.intro-card__lead,
.intro-card__desc{
  max-width:280px;
  margin:0 auto;
  font-size:18px;
  line-height:1.4;
  letter-spacing:-0.02em;
  color:#666;
}

/* 역할/거버넌스 카드(주요 기능, 조직·거버넌스) */
.intro-card--role,
.intro-card--gov{
  text-align:center;   /* 제목, 리드문 중앙 정렬 */
}

/* 리스트 블록은 Figma처럼 가운데에 놓고 안쪽은 왼쪽 정렬 */
.intro-card__list{
  list-style:disc;
  margin:12px auto 0;
  padding-left:1.2em;
  max-width:260px;     /* Figma에서 width가 더 좁은 느낌 */
  font-size:18px;
  line-height:1.6;
  letter-spacing:-0.02em;
  color:#666;
  text-align:left;
}
.intro-card__list li+li{ margin-top:4px; }

/* 조직도 보기 버튼 */
.intro-card__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:18px;
  padding:10px 20px;
  border-radius:6px;
  border:1px solid #194A6C;
  font-size:18px;
  font-weight:700;
  color:#194A6C;
}
.intro-cards--overview .intro-card{
  min-height: 311px;      /* Figma: height 311px */
  padding-top: 34px;      /* 이미 쓰고 있던 값 유지 */
  padding-bottom: 40px;   /* 아래 공간 조금 여유 */
}

/* 이 섹션 설명문 폭(Figma: 330/230/171 정도) */
.intro-cards--overview .intro-card__desc{
  max-width: 330px;
}

/* 주요 지표 텍스트 */
.intro-impact__text {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #666;
}

/* 연혁 타임라인 */
.intro-history__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid #E6EDF7;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intro-history__item {
  position: relative;
  padding-left: 10px;
}

.intro-history__item::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #194A6C;
  box-shadow: 0 0 0 4px rgba(25,74,108,0.12);
}

.intro-history__year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 10px 20px;
  border-radius: 60px;
  background: #194A6C;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.intro-history__text {
  font-size: 18px;
  line-height: 1.5;
  color: #666;
}

/* 찾아오시는 길 */
.intro-visit__card {
  background: #F7F9FC;
  border-radius: 12px;
  padding: 24px 28px;
  border: 1px solid #E6EDF7;
}

.intro-visit__addr {
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 960px) {
  .intro-cards,
  .intro-cards--gov {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intro-history__list {
    padding-left: 10px;
  }
}

@media (max-width: 640px) {
  .intro-cards,
  .intro-cards--gov {
    grid-template-columns: 1fr;
  }

  .intro-sec {
    margin: 40px 0;
  }
}
/* 설립 목적 카드 */
.intro-history__purpose {
  padding: 24px;
}

/* 조직도 */
.intro-chart__card {
  background:#fff;
  border:1px solid #e6ecf5;
  border-radius: 12px;
  padding: 24px;
}
.intro-chart__img {
  max-width:100%;
  height:auto;
  display:block;
  margin: 0 auto 8px;
}
.intro-chart__caption {
  text-align:center;
  font-size:13px;
}

/* 운영 규정 리스트 */
.intro-rules__card {
  padding:24px;
}
.intro-rules__list {
  list-style:none;
  margin:16px 0 0;
  padding:0;
}
.intro-rules__item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-top:1px dashed #e1e4ec;
}
.intro-rules__item:first-child {
  border-top:none;
}
.intro-rules__name {
  font-size:15px;
}
.intro-rules__link {
  font-size:14px;
  color:#194A6C;
  text-decoration:underline;
}

/* 찾아오시는 길 카드/지도 */
.intro-visit__card {
  background:#fff;
  border:1px solid #e6ecf5;
  border-radius:12px;
  padding:24px;
}
.intro-visit__addr {
  margin:0 0 16px;
  font-style:normal;
}
.intro-visit__map {
  width:100%;
  height:360px;
  background:#f5f7fb;
  border-radius:8px;
  overflow:hidden;
}
.intro-visit__guide {
  margin-top:10px;
  font-size:13px;
}
/* =========================
   서브 공통 Hero 스타일
   (about / cert / news / community 공용)
   ========================= */

.page-hero{
  position: relative;
  padding: 72px 0 64px;
  color: #fff;
  overflow: hidden;
}

.page-hero.page-hero--tight{
  padding: 56px 0 44px;
}

.page-hero .wrap{
  position: relative;
  z-index: 2;
}

.page-hero h1{
  font-size: 32px;
  line-height: 1.3;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}

.page-hero .desc{
  margin: 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
}

/* 기본 사진형 hero는 배경 이미지를 깔고 위에 살짝 오버레이 */
.page-hero--photo{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 공통 오버레이 (전역 .page-hero--photo::after 가 있다면 그것보다 뒤에 둬도 됨) */
.page-hero--photo::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
}

.page-hero--photo .wrap{
  position: relative;
  z-index: 2;
}

/* ====== 개별 섹션별 색감/이미지 ====== */

/* 1) 치위평원 소개 > 원장 인사말 */
.page-hero--greeting{
  background-image:
    linear-gradient(135deg, rgba(10,91,211,.9), rgba(4,32,90,.96)),
    url("/images/hero_greeting.jpg");
}

/* 2) 치위평원 소개 > 기관 소개
      👉 이 페이지는 배경을 조금 더 밝게, 그리고 오버레이 제거 */
.page-hero--introduce{
  background-image:
    linear-gradient(135deg, #0a9f6d, #075e43),
    url("/images/hero_intro.jpg");
}

/* introduce만 photo 오버레이 제거 */
.page-hero--introduce.page-hero--photo::after{
  background: none;
}

/* 3) 평가인증사업 */
.page-hero--cert{
  background-image:
    linear-gradient(135deg, #0a9f6d, #023b28),
    url("/images/hero_cert.jpg");
}

/* 4) 소식 */
.page-hero--news{
  background-image:
    linear-gradient(135deg, #0a5bd3, #08266e),
    url("/images/hero_news.jpg");
}

/* 5) 참여광장 */
.page-hero--community{
  background-image:
    linear-gradient(135deg, #7a4acc, #3f1e7c),
    url("/images/hero_community.jpg");
}

/* 반응형 - 모바일에서 패딩만 조금 줄이기 */
@media (max-width: 768px){
  .page-hero{
    padding: 52px 0 40px;
  }
  .page-hero h1{
    font-size: 24px;
  }
  .page-hero .desc{
    font-size: 14px;
  }
}