@charset "utf-8";

/* 인사말 시작 */
.ngm-insa { width: 100%; }

.ngm-insa__bg {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  min-height: 60rem;
  display: flex;
  align-items: stretch;
  background:
    radial-gradient(ellipse 65% 80% at 12% 110%, rgba(22, 72, 156, .20) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 92% 0%,   rgba(242, 111, 33, .10) 0%, transparent 50%),
    radial-gradient(ellipse 55% 65% at 48% 48%,  rgba(58, 75, 150, .08) 0%, transparent 55%),
    #EEF2FB;
}

.ngm-insa__deco { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.ngm-insa__deco--ring1 { display:none; top: -14rem; right: -9rem; width: 48rem; height: 48rem; border: 1.5px solid rgba(22, 72, 156, .13); }
.ngm-insa__deco--ring2 { display:none; top: -7rem; right: -2rem; width: 30rem; height: 30rem; border: 1px solid rgba(22, 72, 156, .08); }
.ngm-insa__deco--ring3 { display:none; bottom: -7rem; left: 30%; width: 20rem; height: 20rem; border: 1px solid rgba(242, 111, 33, .15); }

.ngm-insa__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.ngm-insa__text-area {
  flex: 0 0 56%;
  min-width: 0;
  padding: 5.6rem 4.8rem;
  display: flex;
  align-items: center;
}

.ngm-insa__card {
  width: 100%;
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 2rem;
  padding: 5.2rem 5.6rem;
  box-shadow: 0 2px 8px rgba(22, 72, 156, .06), 0 12px 40px rgba(22, 72, 156, .10);
}

.ngm-insa__label { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.4rem; font-size: 1.4rem; font-weight: 500; color:#0c4da2; letter-spacing: 0.11em; list-style: none; padding: 0; font-family: 'esamanru'; }
.ngm-insa__label-line { display: inline-block; width: 2.8rem; height: 2px; background:#00a651; border-radius: 2px; flex-shrink: 0; }
.ngm-insa__heading { margin: 0 0 2.8rem; font-size: 4.0rem; font-weight: 900; color: var(--ngm-ink, #1A1D21); letter-spacing: -0.04em; line-height: 1.22; word-break: keep-all; font-family: 'esamanru'; }
.ngm-insa__body { margin-bottom: 4rem; }
.ngm-insa__body p { font-size: 1.7rem; color: var(--ngm-text, #3D434C); line-height: 1.95; word-break: keep-all; text-wrap: pretty; margin: 0 0 1.8rem; }
.ngm-insa__body p:last-child { margin-bottom: 0; }
.ngm-insa__body p strong{color:black;}
.ngm-insa__sign { padding-top: 2.8rem; border-top: 1px solid rgba(20, 28, 46, .09); }
.ngm-insa__sign-title { font-size: 1.4rem; color: var(--ngm-faint, #9AA0A8); margin: 0 0 0.6rem; letter-spacing: 0.02em; font-family: 'esamanru'; font-weight: 400; }
.ngm-insa__sign-name { font-size: 3.4rem; font-weight: 900; color: #241613; letter-spacing: -0.02em; line-height: 1.2; margin: 0; font-family: 'esamanru'; }
.ngm-insa__sign-name-img_wrap > img{width: 140px; margin-top: 13px;}

.ngm-insa__photo-wrap {
  position: relative;
  flex: 0 0 44%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 12%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 12%);
}

.ngm-insa__photo-halo { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 34rem; height: 34rem; border-radius: 50%; background: radial-gradient(circle, rgba(22, 72, 156, .14) 0%, transparent 68%); pointer-events: none; }
.ngm-insa__photo-dots { position: absolute; top: 2.8rem; left: 1.6rem; width: 9rem; height: 9rem; background-image: radial-gradient(circle, rgba(22, 72, 156, .28) 1.5px, transparent 1.5px); background-size: 1.2rem 1.2rem; pointer-events: none; }
.ngm-insa__photo-ring { position: absolute; bottom: 8rem; left: 50%; transform: translateX(-50%); width: 26rem; height: 26rem; border-radius: 50%; border: 1.5px solid rgba(22, 72, 156, .14); pointer-events: none; }

.ngm-insa__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
  display: block;
}

/* =============================================================================
   반응형 미디어쿼리 (⭐서로 절대 가리지 않고 고유 영역 사수 구간)
   ============================================================================= */

/* 1280px 이하 (태블릿 진입 구간) */
@media (max-width: 1280px) {
  .ngm-insa__bg           { min-height: 55rem; }
  
  /* 🎯 [조율] 카드 여백과 내부 패딩을 다이어트시켜서 가로 공간을 벌어지게 합니다. */
  .ngm-insa__text-area    { flex: 0 0 55%; padding: 3.5rem 2.5rem; }
  .ngm-insa__card         { padding: 3.5rem 3.5rem; }
  
  /* 🎯 [조율] 카드 안의 폰트 사이즈를 줄여 텍스트가 늘어져서 밀어내는 현상을 막습니다. */
  .ngm-insa__heading      { font-size: 3.2rem; margin-bottom: 2rem; }
  .ngm-insa__body p       { font-size: 1.55rem; line-height: 1.8; margin-bottom: 1.2rem; }
  .ngm-insa__sign         { padding-top: 2rem; }
  .ngm-insa__sign-name    { font-size: 3.0rem; }
  .ngm-insa__sign-name-img_wrap > img{width: 125px; margin-top: 10px;}

  /* 🎯 [사수] 사진 영역은 절대 쪼그라들지 않게 45% 크기를 듬직하게 유지합니다. 
     absolute가 아니기 때문에 카드와 절대 서로를 덮치거나 가리지 않습니다. */
  .ngm-insa__photo-wrap   { flex: 0 0 45%; height: 100%; display: flex; align-items: flex-end; }
  .ngm-insa__photo        { object-position: bottom center; width: 100%; height: 100%; }

  .ngm-insa__photo-ring   { width: 22rem; height: 22rem; bottom: 4rem; display:none;}
  .ngm-insa__photo-halo   { width: 28rem; height: 28rem; }

}

/* 1024px 이하 (더 좁은 태블릿 구간) */
@media (max-width: 1024px) {
  .ngm-insa__bg           { min-height: 48rem; }
  
  /* 🎯 [조율] 화면이 더 좁아지면 카드의 비율을 52%로 줄이고 패딩을 더 타이트하게 잡습니다. */
  .ngm-insa__text-area    { flex: 0 0 52%; padding: 2.5rem 1.5rem; }
  .ngm-insa__card         { padding: 2.8rem 2.8rem; }
  
  .ngm-insa__heading      { font-size: 2.6rem; margin-bottom: 1.6rem; }
  .ngm-insa__body p       { font-size: 1.5rem; line-height: 1.75; margin-bottom: 1rem; }
  .ngm-insa__sign-name    { font-size: 2.6rem; }

  /* 🎯 [사수] 사진 공간을 48%까지 늘려서 좁은 해상도에서도 사진이 큼직하고 이쁘게 나오도록 보호합니다. */
  .ngm-insa__photo-wrap   { flex: 0 0 48%; }
  .ngm-insa__deco--ring1  { width: 34rem; height: 34rem; opacity: 0.5;}
  .ngm-insa__deco--ring2{display:none;}
}

/* 768px 이하 — 세로 1단 모바일 (모바일은 순서대로 정렬) */
@media (max-width: 768px) {
  .ngm-insa__bg           { min-height: auto; border-radius: 1.4rem; }
  .ngm-insa__inner        { flex-direction: column-reverse; }
  
  .ngm-insa__text-area    { flex: none; width: 100%; padding: 3.6rem 2.8rem 3.2rem; }
  .ngm-insa__photo-wrap   { flex: none; width: 100%; height: 44rem; overflow: hidden; justify-content: center; align-items: flex-end; }
  .ngm-insa__photo        { width: auto; height: 100%; max-height: 44rem; margin: 0 auto;}
  .ngm-insa__card         { padding: 3.2rem; border-radius: 1.6rem; }
  .ngm-insa__heading      { font-size: 2.8rem; }
  .ngm-insa__body p       { font-size: 1.65rem; }
  .ngm-insa__deco--ring2  { display: none; }
  .ngm-insa__photo-ring   { bottom: 5rem; width: 22rem; height: 22rem; }
  .ngm-insa__photo-halo   { width: 28rem; height: 28rem; }
}

/* 500px 이하 */
@media (max-width: 500px) {
  .ngm-insa__card         { padding: 2.6rem 2.4rem; }
  .ngm-insa__heading      { font-size: 2.5rem; margin-bottom: 2.2rem; }
  .ngm-insa__body p       { font-size: 1.6rem; }
  .ngm-insa__body         { margin-bottom: 3rem; }
  .ngm-insa__sign-name    { font-size: 2.8rem; }
  .ngm-insa__photo-wrap   { height: 38rem; }
  .ngm-insa__photo        { height: 100%; width: auto; max-height: 38rem; }
  .ngm-insa__photo-badge  { display: none; }
  .ngm-insa__deco--ring3  { display: none; }
}

/* 375px 이하 */
@media (max-width: 375px) {
  .ngm-insa__card         { padding: 2.4rem 2rem; }
  .ngm-insa__heading      { font-size: 2.3rem; }
  .ngm-insa__body p       { font-size: 1.55rem; }
  .ngm-insa__sign-name    { font-size: 2.5rem; }
  .ngm-insa__label        { font-size: 1.2rem; }
}/* =============================================================================
   반응형 미디어쿼리 (아무것도 안 건드리고 순수 레이어만 정돈)
   ============================================================================= */

/* 1280px 이하 (태블릿 진입 구간) */
@media (max-width: 1280px) {
  .ngm-insa__bg           { min-height: 54rem; }
  .ngm-insa__card         { padding: 4rem; }
  .ngm-insa__heading      { font-size: 3.2rem; }
  .ngm-insa__body p       { font-size: 1.6rem; }

  /* 원래 주신 Flex 비율 그대로 유지, 레이어만 위로 */
  .ngm-insa__text-area    { 
    flex: 0 0 55%; 
    padding: 4rem 2rem; 
    position: relative;
    z-index: 2; 
  }
  
  /* 원래 주신 Flex 비율 그대로 유지, 레이어만 아래로 (마진/패딩 일절 안 건드림) */
  .ngm-insa__photo-wrap   { 
    flex: 0 0 45%; 
    position: relative;
    z-index: 1; 
    height: 100%;
  }
  
  .ngm-insa__photo        { object-position: bottom center; }
  .ngm-insa__photo-ring   { width: 22rem; height: 22rem; bottom: 4rem; }
  .ngm-insa__photo-halo   { width: 28rem; height: 28rem; }
}

/* 1024px 이하 (더 좁은 태블릿 구간) */
@media (max-width: 1024px) {
  .ngm-insa__bg           { min-height: 48rem; }
  .ngm-insa__card         { padding: 3.2rem; }
  .ngm-insa__heading      { font-size: 2.8rem; }
  .ngm-insa__body p       { font-size: 1.55rem; }

  .ngm-insa__text-area    { flex: 0 0 52%; padding: 3.2rem 1.5rem; position: relative; z-index: 2; }
  
  .ngm-insa__photo-wrap   { 
    flex: 0 0 48%; 
    position: relative;
    z-index: 1;
    height: 100%;
  }
  .ngm-insa__deco--ring1  { width: 36rem; height: 36rem; }
}

/* 768px 이하 — 세로 1단 모바일 */
@media (max-width: 768px) {
  .ngm-insa__bg           { min-height: auto; border-radius: 1.4rem; }
  .ngm-insa__inner        { flex-direction: column-reverse; }
  
  .ngm-insa__text-area    { flex: none; width: 100%; padding: 0rem 2.8rem 3.2rem; z-index: 2; }
  .ngm-insa__photo-wrap   { flex: none; width: 100%; height: 44rem; overflow: hidden; justify-content: center; align-items: flex-end; z-index: 1; }
  
  .ngm-insa__photo        { width: auto; height: 100%; max-height: 44rem; margin: 0 auto; object-fit: contain;}
  .ngm-insa__card         { padding: 3.2rem; border-radius: 1.6rem; }
  .ngm-insa__heading      { font-size: 2.8rem; }
  .ngm-insa__body p       { font-size: 1.65rem; }
  .ngm-insa__deco--ring2  { display: none; }
  .ngm-insa__photo-ring   { bottom: 5rem; width: 22rem; height: 22rem; }
  .ngm-insa__photo-halo   { width: 28rem; height: 28rem; }
}
/* 인사말 끝 */


/* 걸어온 길 시작 */
@keyframes ngm2-pulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(192,57,43,.30); }
  60%      { box-shadow: 0 0 0 7px rgba(192,57,43,0);   }
}

/* ── 래퍼 ── */
.ngm2-profile {
  width: 100%;
  background: linear-gradient(135deg, #f5eeee 0%, #f0eef5 50%, #eef0f7 100%);
  border-radius: 2rem;
  padding: 4rem 3.6rem;
}

/* ── 메인 그리드 ── */
.ngm2-grid {
  display: grid;
  grid-template-columns: 32rem 1fr;
  gap: 3.2rem;
  align-items: start;
}

/* ── 좌측 컬럼 ── */
.ngm2-left {
  display: flex; flex-direction: column; gap: 1.6rem;
  position: sticky; top: 8rem;
}

/* ── 사진 ── */
.ngm2-photo {
    position: relative;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 .8rem 3.2rem rgba(0, 0, 0, .14), 0 .2rem .6rem rgba(0, 0, 0, .06);
    max-width: 370px;
    margin: 0 auto;
}
.ngm2-photo__img { width: 100%; display: block; }
.ngm2-photo__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14rem 2.4rem 2rem;
    background: linear-gradient(to top, rgba(4, 14, 42, .80) 0%, rgba(4, 14, 42, .28) 55%, transparent 100%);
}
.ngm2-photo__role {
  font-size: 1.4rem; color: rgba(255,255,255,.65);
  font-weight: 400; letter-spacing: .04em; margin: 0 0 .4rem;
}
.ngm2-photo__name {
  font-size: 2.8rem; font-weight: 800; color: #fff;
  letter-spacing: -.02em; line-height: 1.15; margin: 0;
}

/* ── 인적사항 카드 (글래스) ── */
.ngm2-info-card {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 1.8rem;
  padding: 2.4rem 2.6rem;
  box-shadow: 0 .4rem 2.4rem rgba(0,0,0,.06);
  position: relative; overflow: hidden;
}
.ngm2-info-card::before {
  content: ''; position: absolute; left: 0; top: 2rem; bottom: 2rem;
  width: 3px; background: #C0392B;
  border-radius: 0 3px 3px 0;
}
.ngm2-info-card__head {
  display: flex; align-items: center; gap: 1rem;
  padding-bottom: 1.6rem; margin-bottom: 1.8rem;
  border-bottom: 1px solid rgba(112,115,124,.1);
}
.ngm2-info-card__icon {
  width: 3.4rem; height: 3.4rem; border-radius: 1rem;
  background: rgba(192,57,43,.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ngm2-info-card__cat {
  font-size: 1.2rem; font-weight: 700; color: #C0392B;
  letter-spacing: .1em; text-transform: uppercase; margin: 0;
}
.ngm2-info-card__tit {
  font-size: 2rem;  font-family: 'esamanru'; font-weight: 500; color: #171719;
  letter-spacing: -.015em; margin: .2rem 0 0;
}
.ngm2-info-rows { display: flex; flex-direction: column; gap: 1.4rem; }
.ngm2-info-row  { display: flex; gap: 1rem; align-items: flex-start; }
.ngm2-info-row__dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: #C0392B; margin-top: .7rem;
}
.ngm2-info-row__lbl {
  font-size: 1.4rem; font-weight: 600; color: rgb(27 28 30 / 65%);
  letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .3rem;
}
.ngm2-info-row__val {
  font-size: 1.6rem; font-weight: 600; color: #171719;
  letter-spacing: -.01em; line-height: 1.5; margin: 0;
}
.ngm2-info-row__val span{font-size:large;}
.ngm2-info-row__val small {
  font-size: 1.4rem; font-weight: 400; color: rgba(112,115,124,.7);
}
.ngm2-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: .4rem 0 0;
}
.ngm2-info-grid__lbl {
  font-size: 1.4rem; font-weight: 600; color: rgba(112,115,124,.65);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: .3rem;
}
.ngm2-info-grid__val { font-size: 1.6rem; font-weight: 500; color: #333D4B; }

/* ── 우측 컬럼 ── */
.ngm2-right { display: flex; flex-direction: column; gap: 2.4rem; }

/* ── 공통 글래스 카드 ── */
.ngm2-card {
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 2rem;
  padding: 3.2rem 3.6rem;
  box-shadow: 0 .4rem 2.8rem rgba(0,0,0,.07), 0 .1rem .4rem rgba(0,0,0,.04);
  position: relative; overflow: hidden;
}
.ngm2-card::before {
  content: ''; position: absolute; left: 0; top: 2.4rem; bottom: 2.4rem;
  width: 3px; background: #C0392B;
  border-radius: 0 3px 3px 0;
}

/* ── 카드 헤더 ── */
.ngm2-card__head {
  display: flex; align-items: center; gap: 1.2rem;
  padding-bottom: 2rem; margin-bottom: 2.4rem;
  border-bottom: 1px solid rgba(112,115,124,.08);
}
.ngm2-card__icon {
  width: 4rem; height: 4rem; border-radius: 1.2rem;
  background: rgba(192,57,43,.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ngm2-card__cat {
  font-size: 1.3rem; font-weight: 700; color: #C0392B;
  letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .3rem;
}
.ngm2-card__tit {
  font-size: 2.3rem; font-family: 'esamanru'; font-weight: 500; color: #171719;
  letter-spacing: -.02em; margin: 0; line-height: 1.2;
}

/* ── 학력 목록 ── */
.ngm2-edu-list { display: flex; flex-direction: column; }
.ngm2-edu-item {
  display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.8rem 0;
}
.ngm2-edu-item + .ngm2-edu-item { border-top: 1px solid rgba(112,115,124,.07); }
.ngm2-edu-item:first-child { padding-top: 0; }
.ngm2-edu-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #C0392B; margin-top: .6rem;
}
.ngm2-edu-name {
  font-size: 1.8rem; font-weight: 700; color: #171719;
  letter-spacing: -.012em; line-height: 1.45; margin: 0;
}
.ngm2-edu-deg {
  font-size: 1.5rem; color: rgba(112,115,124,.75); margin: .4rem 0 0; font-weight: 400;
}

/* ── 경력 타임라인 ── */
.ngm2-tl { position: relative; }
.ngm2-tl__line {
  position: absolute;
  left: 5.6rem;
  top: 2rem;
  bottom: 2rem;
  width: 1px;
  background: rgba(112, 115, 124, .1);
  pointer-events: none;
  z-index:-1;
}
.ngm2-tl__item { display: flex; align-items: flex-start; padding: 1.4rem 0; }
.ngm2-tl__yr-col {
  width: 11rem; flex-shrink: 0;
  display: flex; justify-content: flex-end;
  padding-right: 1.8rem; padding-top: .4rem;
}
.ngm2-tl__yr-chip {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1.1rem;
    border-radius: .8rem;
    background: rgb(237 237 241);
    color: #4E5968;
    font-size: 1.6rem;
    letter-spacing: -0.075rem;
    font-weight: 700;
    letter-spacing: -.02em;
    white-space: nowrap;
    border: 1px solid rgba(112, 115, 124, .13);
}
.ngm2-tl__yr-chip--cur {
  background: #C0392B; color: #fff;
  border-color: #C0392B;
  box-shadow: 0 .2rem .8rem rgba(192,57,43,.3);
}
.ngm2-tl__yr-chip--old {
  background: rgb(246 246 249); color: rgba(112,115,124,.45);
  border-color: rgba(112,115,124,.08);
}
.ngm2-tl__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: rgba(112,115,124,.3); margin-top: 1.1rem;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(112,115,124,.2);
}
.ngm2-tl__dot--cur {
  width: 10px; height: 10px; background: #C0392B; margin-top: 1rem;
  animation: ngm2-pulse 2s infinite;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(192,57,43,.25);
}
.ngm2-tl__dot--old {
  background: rgba(112,115,124,.2);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(112,115,124,.12);
}
.ngm2-tl__body { flex: 1; padding-left: 1.8rem; }
.ngm2-tl__title {
  font-size: 1.7rem; font-weight: 500; color: #333D4B;
  letter-spacing: -.01em; line-height: 1.55; margin: 0;
}
.ngm2-tl__title--cur { font-weight: 800; color: #2B2D36; font-size: 1.8rem; }
.ngm2-tl__title--old { color: #5A6473; }
.ngm2-tl__badge {
  margin-top: .5rem; display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .9rem; background: rgba(192,57,43,.08); border-radius: 9999px;
}
.ngm2-tl__badge-dot {
  width: 5px; height: 5px; border-radius: 50%; background: #C0392B; flex-shrink: 0;
}
.ngm2-tl__badge-txt {
  font-size: 1.3rem; font-weight: 700; color: #C0392B; letter-spacing: .04em;
}
.ngm2-tl__subs { display: flex; flex-direction: column; gap: .4rem; }
.ngm2-tl__sub {
  font-size: 1.6rem; font-weight: 400; color: rgba(78,89,104,.85);
  letter-spacing: -.005em; line-height: 1.5; margin: 0;
  padding-top: .6rem; border-top: 1px dashed rgba(112,115,124,.12);
}
.ngm2-tl__sub:first-child { border-top: none; padding-top: 0; }

/* ══════════════════════════════════════
   반응형
   ══════════════════════════════════════ */
@media (max-width: 1079px) {
  .ngm2-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .ngm2-left { position: static; }
  .ngm2-left { grid-template-columns: auto;}
  .ngm2-photo {aspect-ratio: 1 / 1;}
  .ngm2-photo__name { font-size: 2.4rem; }
  .ngm2-card { padding: 2.8rem 3rem; }
  .ngm2-card__tit { font-size: 2rem; }
  .ngm2-edu-name { font-size: 1.7rem; }
}
@media (max-width: 767px) {
  .ngm2-profile{padding: 4rem 2.6rem;}
  .ngm2-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .ngm2-left {
    position: static;
    display: grid; gap: 1.4rem; align-items: start;
  }
  .ngm2-photo { border-radius: 1.6rem;}
  .ngm2-photo__overlay { padding: 13rem 1.6rem 1.6rem; }
  .ngm2-photo__name { font-size: 2.0rem; }
  .ngm2-info-card { border-radius: 1.6rem; padding: 2rem; }
  .ngm2-info-card__tit { font-size: 1.9rem; }
  .ngm2-card { padding: 2.4rem 2rem; border-radius: 1.6rem; }
  .ngm2-card__tit { font-size: 1.9rem; }
  .ngm2-card__head { padding-bottom: 1.6rem; margin-bottom: 1.8rem; }
  .ngm2-edu-name { font-size: 1.6rem; }
  .ngm2-edu-deg { font-size: 1.4rem; }
  .ngm2-edu-item{gap:1rem;}
  .ngm2-tl__yr-col { width: 9.5rem; padding-right: 1.4rem; }
  .ngm2-tl__yr-chip { font-size: 1.5rem; padding: .35rem 1rem; }
  .ngm2-tl__line { left: 4.75rem; }
  .ngm2-tl__title { font-size: 1.6rem; }
  .ngm2-tl__title--cur { font-size: 1.7rem; }
  .ngm2-tl__sub { font-size: 1.5rem; }
}
@media (max-width: 480px) {
  .ngm2-profile{padding: 4rem 1.6rem;}
  .ngm2-photo__name { font-size: 1.8rem; display:none;}
  .ngm2-photo__role { display: none; }
  .ngm2-info-card__tit { font-size: 1.8rem; }
  .ngm2-info-row__val { font-size: 1.4rem; }
  .ngm2-card { padding: 2rem 2rem; }
  .ngm2-card__tit { font-size: 1.8rem; }
  .ngm2-edu-name { font-size: 1.5rem; }
  .ngm2-edu-deg { font-size: 1.3rem; }
  .ngm2-tl__yr-col { width: 6rem; padding-right: 1rem; }
  .ngm2-tl__yr-chip { font-size: 1.4rem; padding: .3rem .8rem; }
  .ngm2-tl__line { left: 2rem; }
  .ngm2-tl__title { font-size: 1.5rem; }
  .ngm2-tl__sub { font-size: 1.4rem; }
  .ngm2-tl__body { padding-left: 1.2rem; }
  .ngm2-tl__dot{margin-top: 1rem;}
}
@media (max-width: 375px) {
  .ngm2-photo__name { font-size: 1.6rem; }
}
/* 걸어온 길 끝 */


/* 역대구청장 시작 */
@keyframes ngm-fadeIn    { from{opacity:0}to{opacity:1} }
@keyframes ngm-dotPulse  {
  0%,100%{box-shadow:0 0 0 0 rgba(0,102,255,.38)}
  60%    {box-shadow:0 0 0 8px rgba(0,102,255,0)}
}
@keyframes ngm-hist-cardIn {
  from{transform:translateY(16px)}
  to  {transform:translateY(0)}
}

.ngm-history__section {
  position: relative;
}
.ngm-history__orb { position:absolute; border-radius:50%; pointer-events:none; }
.ngm-history__orb--1 {
  top:60px; left:calc(50% - 520px); width:700px; height:700px;
  background:radial-gradient(circle,rgba(0,102,255,0.06) 0%,transparent 60%);
}
.ngm-history__orb--2 {
  bottom:40px; right:calc(50% - 620px); width:620px; height:620px;
  background:radial-gradient(circle,rgba(0,160,255,0.05) 0%,transparent 60%);
}
.ngm-history__inner {
  position:relative; z-index:1;
}

/* 헤딩 */
.ngm-history__heading { margin-bottom: 3.2rem; }
.ngm-history__heading-eyebrow { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.ngm-history__heading-line { height:2px; width:2.8rem; background:linear-gradient(90deg,#0066FF,#33AAFF); border-radius:2px; }
.ngm-history__heading-label { font-size:1.2rem; font-weight:700; color:#0066FF; letter-spacing:0.14em; text-transform:uppercase; }
.ngm-history__heading-title { font-size:2.8rem; font-weight:700; color:#171719; letter-spacing:-0.025em; line-height:1.26; margin:0; }
.ngm-history__heading-title strong { color:#0066FF; }
.ngm-history__heading-sub { font-size:1.4rem; color:#5C5F68; margin-top:.7rem; line-height:1.6; }

/* 탭 */
.ngm-history__tabs {
  display:flex; gap:.8rem; margin-bottom:4.8rem; flex-wrap:wrap;
}
.ngm-history__tab {
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.8rem 2rem; border-radius:9999px;
  font-size:1.5rem; font-weight:600; cursor:pointer;
  border:1.5px solid rgba(112,115,124,0.20);
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:#4E5968; font-family:inherit;
  transition:all 0.18s ease;
}
.ngm-history__tab:hover { border-color:rgba(0,102,255,0.35); color:#0066FF; background:rgba(0,102,255,0.05); }
.ngm-history__tab.is-active { background:#0066FF; color:#fff; border-color:#0066FF; box-shadow:0 4px 16px rgba(0,102,255,0.30); }
.ngm-history__tab-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2rem; height:2rem; padding:0 .5rem; border-radius:9999px;
  font-size:1.3rem; font-weight:700;
}
.ngm-history__tab.is-active .ngm-history__tab-count { background:rgba(255,255,255,0.22); color:#fff; }
.ngm-history__tab:not(.is-active) .ngm-history__tab-count { background:rgba(0,102,255,0.09); color:#0066FF; }

/* 시대 블록 */
.ngm-history__era-block { margin-bottom:6rem; }
.ngm-history__era-block:last-child { margin-bottom:0; }

/* 시대 헤더 */
.ngm-history__era-header {
  display:flex; align-items:center; gap:1.4rem;
  margin-bottom:2.2rem; padding-bottom:1.6rem;
  border-bottom:1px solid rgba(112,115,124,0.10);
}
.ngm-history__era-icon {
  width:4rem; height:4rem; border-radius:1.2rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.ngm-history__era-icon--gwanseon {
  background:linear-gradient(135deg,rgba(90,100,116,0.55) 0%,rgba(62,72,88,0.65) 100%);
  box-shadow:0 3px 12px rgba(60,72,90,0.22);
}
.ngm-history__era-icon--minseon {
  background:linear-gradient(135deg,#0066FF 0%,#003DB2 100%);
  box-shadow:0 4px 14px rgba(0,102,255,0.35);
}
.ngm-history__era-info { flex:1; }
.ngm-history__era-title { font-size:2.0rem; font-weight:700; color:#171719; letter-spacing:-0.02em; line-height:1.2; }
.ngm-history__era-desc  { font-size:1.5rem; color:#5C5F68; margin-top:.3rem; letter-spacing:0.01em; }
.ngm-history__era-chip {
  padding:.4rem 1.4rem; border-radius:9999px;
  font-size:1.15rem; font-weight:700; letter-spacing:0.03em; flex-shrink:0;
}
.ngm-history__era-chip--gwanseon { background:rgba(90,100,116,0.10); color:rgba(60,72,88,0.72); }
.ngm-history__era-chip--minseon  { background:rgba(0,102,255,0.08); color:#0066FF; }

/* 그리드 */
.ngm-history__grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.4rem;
}

/* 카드 */
.ngm-history__card {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:.8rem;
  padding:2rem 1.2rem;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border: 1px solid rgb(0 0 0 / 3%);
  border-radius:1.8rem;
  position:relative; overflow:hidden;
  box-shadow:0 3px 18px rgba(0,50,160,0.07),0 1px 3px rgba(0,0,0,0.04);
  transition:transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  animation:ngm-hist-cardIn 0.48s ease both;
}
.ngm-history__grid .ngm-history__card:nth-child(1){animation-delay:.03s}
.ngm-history__grid .ngm-history__card:nth-child(2){animation-delay:.07s}
.ngm-history__grid .ngm-history__card:nth-child(3){animation-delay:.11s}
.ngm-history__grid .ngm-history__card:nth-child(4){animation-delay:.15s}
.ngm-history__grid .ngm-history__card:nth-child(5){animation-delay:.19s}
.ngm-history__grid .ngm-history__card:nth-child(6){animation-delay:.23s}
.ngm-history__grid .ngm-history__card:nth-child(7){animation-delay:.27s}
.ngm-history__grid .ngm-history__card:nth-child(8){animation-delay:.31s}
.ngm-history__grid .ngm-history__card:nth-child(9){animation-delay:.35s}
.ngm-history__card:hover {
  transform:translateY(-5px);
  box-shadow:0 16px 44px rgba(0,50,160,0.13),0 4px 10px rgba(0,0,0,0.05);
  border-color:rgba(0,102,255,0.20);
}
.ngm-history__card::after {
  content:''; position:absolute; top:0; left:22%; right:22%; height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(0,102,255,0.30),transparent);
  opacity:0; transition:opacity 0.22s ease;
}
.ngm-history__card:hover::after { opacity:1; }
.ngm-history__card--gwanseon { background:rgba(244,245,248,0.76); }
.ngm-history__card--current {
  background:rgba(234,244,255,0.84);
  border-color:rgba(0,102,255,0.24);
  box-shadow:0 4px 24px rgba(0,102,255,0.10),0 1px 4px rgba(0,0,0,0.04);
}
.ngm-history__card--current::before {
  content:''; position:absolute; inset:0; border-radius:1.8rem;
  background:linear-gradient(135deg,rgba(0,102,255,0.04) 0%,rgba(0,160,255,0.02) 100%);
  pointer-events:none;
}

/* 사진 플레이스홀더 */
.ngm-history__photo {
    width: 10rem;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 30, 100, 0.16);
    aspect-ratio: 1 / 1.18;
}
.ngm-history__photo--gwanseon { background:linear-gradient(148deg,#DCDFE5 0%,#C6CCD6 100%); }
.ngm-history__photo--minseon  { background:linear-gradient(148deg,#CCDEFF 0%,#B4CBFF 100%); }
.ngm-history__photo--current  { background:linear-gradient(148deg,#B8D4FF 0%,#94BAFF 100%); }
.ngm-history__photo img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  z-index:1;
}
.ngm-history__photo::before {
  content:''; position:absolute;
  left:50%; top:18%; transform:translateX(-50%);
  width:36px; height:36px; border-radius:50%;
}
.ngm-history__photo::after {
  content:''; position:absolute;
  left:50%; bottom:-4px; transform:translateX(-50%);
  width:64px; height:36px; border-radius:50% 50% 0 0;
}
.ngm-history__photo--gwanseon::before { background:rgba(62,72,90,0.26); }
.ngm-history__photo--gwanseon::after  { background:rgba(62,72,90,0.22); }
.ngm-history__photo--minseon::before  { background:rgba(0,60,180,0.24); }
.ngm-history__photo--minseon::after   { background:rgba(0,60,180,0.20); }
.ngm-history__photo--current::before  { background:rgba(0,60,200,0.32); }
.ngm-history__photo--current::after   { background:rgba(0,60,200,0.26); }

/* 카드 텍스트 */
.ngm-history__card-info { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; width:100%; }
.ngm-history__gen {
    display: inline-flex;
    align-self: center;
    padding: .5rem 1rem;
    border-radius: 9999px;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: .5rem;
    line-height: 1;
    font-family: 'esamanru';
    font-weight: 500;
    margin-top: .5rem;
}
.ngm-history__gen--gwanseon { background:rgba(90,100,116,0.10); color:rgba(60,72,88,0.72); }
.ngm-history__gen--minseon  { background:rgba(0,102,255,0.08); color:#0066FF; }
.ngm-history__gen--current  {
  background:linear-gradient(135deg,#0066FF,#0047CC);
  color:#fff; box-shadow:0 2px 8px rgba(0,102,255,0.32);
}
.ngm-history__name {
  font-size:1.8rem; font-weight:700; color:#171719;
  letter-spacing:-0.02em; line-height:1.2; margin-bottom:.2rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ngm-history__name--current { color:#0066FF; }
.ngm-history__hanja { font-size:1.5rem; color:#6B6E78; margin-bottom:.8rem; letter-spacing:0.04em; }
.ngm-history__card-divider { height:1px; background:rgba(112,115,124,0.10); margin-bottom:.7rem; }
.ngm-history__dates {
  display:flex; flex-direction:column; gap:.3rem;
  width:100%;
  border-top:1px solid rgba(112,115,124,0.12);
  padding-top:.9rem; margin-top:.2rem;
}
.ngm-history__date-row { display:flex; align-items:center; justify-content:center; gap:.8rem; }
.ngm-history__date-lbl { font-size:1.4rem; font-weight:600; color:#5C5F68; letter-spacing:0.06em; flex-shrink:0; }
.ngm-history__date-val { font-size:1.6rem; font-weight:500; color:#2B2D36; }
.ngm-history__date-val--current { color:#0066FF; font-weight:700; }

/* 현직 태그 */
.ngm-history__now-tag {
  position:absolute; top:.9rem; right:.9rem;
  display:flex; align-items:center; gap:.3rem;
  padding:.3rem .8rem; border-radius:9999px;
  background:rgba(0,102,255,0.10); color:#0066FF;
  font-size:1.4rem; font-weight:700; letter-spacing:0.04em;
}
.ngm-history__now-dot {
  width:5px; height:5px; border-radius:50%; background:#0066FF;
  animation:ngm-dotPulse 2s infinite;
}

/* ══════ 반응형 ══════ */
@media (max-width: 1079px) {
  .ngm-history__grid { grid-template-columns:repeat(4,1fr); gap:1.2rem; }
  .ngm-history__heading-title { font-size:2.4rem; }
  .ngm-history__orb--1{display:none;}
  .ngm-history__orb--2{display:none;}
}
@media (max-width: 767px) {
  .ngm-history__grid { grid-template-columns:repeat(3,1fr); gap:1rem; }
  .ngm-history__heading-title { font-size:2.2rem; }
  .ngm-history__tabs { gap:.6rem; margin-bottom:3.2rem; }
  .ngm-history__tab { padding:.7rem 1.4rem; }
  .ngm-history__era-chip { display:none; }
}
/* 찌부 구간: 3열→2열 전환 */
@media (max-width: 640px) {
  .ngm-history__grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
  .ngm-history__card { padding:1.6rem 1rem 1.4rem; }
  .ngm-history__name { font-size:1.7rem; }
  .ngm-history__date-lbl { font-size:1.4rem; }
  .ngm-history__date-val { font-size:1.5rem; }
}
/* 520px — 이미 column이므로 grid만 조정 */
@media (max-width: 520px) {
  .ngm-history__grid { grid-template-columns:repeat(2,1fr); gap:1rem; }

}
@media (max-width: 400px) {
  .ngm-history__grid { grid-template-columns:1fr; }
  .ngm-history__name{font-size:1.8rem;}
}
@media (max-width: 360px) {
}
/* 역대구청장 끝 */


/* 구청장에게 바란다 */
@keyframes ngv-pulse-glow {
  0%, 100% { box-shadow: 0 4px 14px rgba(242,111,33,0.28); }
  50%       { box-shadow: 0 6px 22px rgba(242,111,33,0.46); }
}


/* ── ① 안내문구 박스 (3단 위계) ────────────────────────── */

.ngm-voice__notice {
  background: linear-gradient(
    140deg,
    #EBF3FF 0%,
    #EEF0FF 55%,
    #FFF5EE 100%
  );
  border: 1px solid rgba(30,95,204,0.18);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: 0 2px 16px rgba(30,95,204,0.08);
}

/* 상단: Lv.1 레이블 + Lv.2 핵심 안내문 */
.ngm-voice__notice-top {
  padding: 28px 36px 22px;
}

/* Lv.1 — 레이블 (가장 작고 옅게, 시선 진입점) */
.ngm-voice__notice-label {
  margin: 0 0 5px;
  font-size: 2.1rem;
  font-weight: 600;
  font-family: 'esamanru';
  color: #1E5FCC;
  display: flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
}
.ngm-voice__notice-label svg {
  flex-shrink: 0;
}

/* Lv.2 — 핵심 안내문 (크고 명확하게, 주 메시지) */
.ngm-voice__notice-body {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.78;
  color: #1A1D21;
  letter-spacing: -0.02em;
  word-break: keep-all;
  text-wrap: pretty;
}
.ngm-voice__notice-highlight {
  color: #1E5FCC;
  font-weight: 700;
}
.ngm-voice__notice-sub-text {
  color: #3D434C;
}

/* 구분선 */
.ngm-voice__notice-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(30,95,204,0.15) 0%,
    rgba(30,95,204,0.04) 100%
  );
  margin: 0 36px;
}

/* 하단: Lv.3 보조문 + CTA (같은 행) */
.ngm-voice__notice-bottom {
  padding: 16px 36px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* Lv.3 — ※ 보조 안내 (가장 작고 가장 옅게) */
.ngm-voice__notice-footnote {
  margin: 0;
  font-size: 1.5rem;
  color: #6E747E;
  line-height: 1.6;
  word-break: keep-all;
  flex: 1;
  min-width: 220px;
  text-wrap: pretty;
}
.ngm-voice__notice-footnote-mark {
  color: #F26F21;
  font-weight: 700;
  margin-right: 2px;
}
.ngm-voice__notice-footnote strong {
  color: #3D434C;
  font-weight: 600;
}

/* CTA — 유일한 행동 요소 */
.ngm-voice__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F26F21;
  color: #fff;
  font-weight: 600;
  font-size: 1.7rem;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(242,111,33,0.28);
  transition: filter 0.15s ease, transform 0.15s ease;
  animation: ngv-pulse-glow 3.5s ease-in-out infinite;
}
.ngm-voice__cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.ngm-voice__cta:active {
  filter: brightness(0.96);
  transform: translateY(0);
}
.ngm-voice__cta svg {
  display: block;
  flex-shrink: 0;
}


/* ── ② 탭 메뉴 (Segmented Control) ─────────────────────── */

.ngm-voice__tabs {
  display: flex;
  align-items: center;
  background: rgba(20,28,46,0.065);
  border-radius: 16px;
  padding: 5px;
  gap: 4px;
  margin-bottom: 24px;
  border: 1px solid rgba(20,28,46,0.07);
}

.ngm-voice__tab {
  flex: 1;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #9AA0A8;
  background: transparent;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background 0.22s cubic-bezier(0.34,1.15,0.64,1),
    color      0.22s cubic-bezier(0.34,1.15,0.64,1),
    box-shadow 0.22s cubic-bezier(0.34,1.15,0.64,1);
}
.ngm-voice__tab svg {
  flex-shrink: 0;
  transition: stroke 0.22s ease;
}

/* 비활성 탭 호버 */
.ngm-voice__tab:not(.is-active):hover {
  background: rgba(20,28,46,0.05);
  color: #6E747E;
}
.ngm-voice__tab:not(.is-active):hover svg {
  stroke: #6E747E;
}

/* 활성 탭 */
.ngm-voice__tab.is-active {
  background: #ffffff;
  color: #1A1D21;
  box-shadow:
    0 2px 16px rgba(28,40,66,0.10),
    0 0 0 1px rgba(20,28,46,0.06);
}
.ngm-voice__tab.is-active svg {
  stroke: #1E5FCC;
}

/* 키보드 포커스 링 */
.ngm-voice__tab:focus-visible {
  box-shadow:
    0 0 0 3px rgba(30,95,204,0.30),
    0 2px 16px rgba(28,40,66,0.08);
  outline: none;
}


/* ── ③ 아이프레임 컨테이너 ──────────────────────────────── */

.ngm-voice__panel {
  display: block;
}
.ngm-voice__panel[hidden] {
  display: none !important;
}

.ngm-voice__frame-wrap {
  background: #fff;
  border: 1px solid rgba(20,28,46,0.10);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(28,40,66,0.06);
  min-height: 600px;
}

.ngm-voice__iframe {
  display: block;
  width: 100%;
  min-height: 800px;
  border: none;
}


/* ── 반응형 ────────────────────────────────────────────── */

/* 태블릿 (768px ~ 1023px) */
@media (max-width: 1023px) {
  .ngm-voice__notice-top,
  .ngm-voice__notice-bottom {
    padding-left: 24px;
    padding-right: 24px;
  }
  .ngm-voice__notice-divider {
    margin: 0 24px;
  }
  .ngm-voice__notice-body {
    font-size: 1.6rem;
  }
  .ngm-voice__cta {
    font-size: 1.7rem;
    padding: 11px 18px;
  }
}

/* 모바일 (~ 767px) */
@media (max-width: 767px) {
  .ngm-voice__notice {
    border-radius: 16px;
    margin-bottom: 24px;
  }
  .ngm-voice__notice-top {
    padding: 20px 20px 16px;
  }
  .ngm-voice__notice-divider {
    margin: 0 20px;
  }
  .ngm-voice__notice-bottom {
    padding: 14px 20px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .ngm-voice__notice-body {
    font-size: 1.5rem;
    line-height: 1.75;
  }
  .ngm-voice__notice-footnote {
    font-size: 1.5rem;
    min-width: unset;
  }
  .ngm-voice__cta {
    width: 100%;
    font-size:1.6rem;
    justify-content: center;
    padding: 13px 20px;
  }
  .ngm-voice__tabs {
    border-radius: 13px;
    padding: 4px;
    margin-bottom: 20px;
  }
  .ngm-voice__tab {
    height: 48px;
    border-radius: 9px;
    font-size:1.6rem;
    gap: 6px;
  }
  .ngm-voice__tab svg {
    width: 16px;
    height: 16px;
    margin-top:2px;
  }
  .ngm-voice__frame-wrap {
    border-radius: 16px;
    min-height: 500px;
  }
  .ngm-voice__iframe {
    min-height: 600px;
  }
  .ngm-voice__notice-label{font-size:1.9rem;}
}

@media (max-width: 500px) {
  .ngm-voice__tab {
    font-size:1.5rem;
  }
}


/* 준비중인 페이지 - 시작 */
.mgs-coming-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 70px 32px 80px;
  min-height: 520px;
  background: #f9fafb;
  border-radius: 16px;
}
.mgs-coming-clock {
  position: relative;
  width: 280px;
  height: 280px;
  margin-bottom: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mgs-coming-clock-ring {
  position: absolute;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.mgs-coming-clock-ring:nth-child(1) {
  width: 240px; height: 240px;
  border: 1px solid #e5e7eb;
}
.mgs-coming-clock-ring:nth-child(2) {
  width: 280px; height: 280px;
  border: 1px solid #f3f4f6;
}
.mgs-coming-clock-svg {
  width: 200px; height: 200px; display: block;
  position: relative; z-index: 1;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.06));
}
.mgs-coming-hour { transform-origin: 100px 100px; transition: transform 0.5s cubic-bezier(.4,2.08,.55,.44); }
.mgs-coming-min  { transform-origin: 100px 100px; transition: transform 0.4s ease-out; }
.mgs-coming-sec  { transform-origin: 100px 100px; transition: transform 0.2s ease-out; }

.mgs-coming-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.mgs-coming-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #9ca3af;
  animation: mgs-blink 2s ease-in-out infinite;
}
@keyframes mgs-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}
.mgs-coming-eyebrow-text {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #9ca3af;
  text-transform: uppercase;
}

.mgs-coming-title {
  margin: 0 0 16px;
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: #111827;
}

.mgs-coming-desc {
  margin: 0 0 36px;
  font-size: 1.55rem;
  line-height: 1.8;
  color: #6b7280;
  letter-spacing: -0.01em;
  word-break: keep-all;
  text-wrap: pretty;
  max-width: 400px;
}

.mgs-coming-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -0.02em;
  cursor: pointer;
  border: 1.5px solid #d1d5db;
  text-decoration: none;
  color: #374151;
  background: #fff;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.mgs-coming-btn svg { width: 15px; height: 15px; display: block; flex-shrink: 0; }
.mgs-coming-btn:hover {
  border-color: #111827;
  color: #111827;
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.mgs-coming-btn:active { transform: translateY(0); }

.mgs-coming-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 16px;
  font-size: 1.35rem;
  color: #9ca3af;
  letter-spacing: -0.01em;
}
.mgs-coming-contact svg { width: 13px; height: 13px; flex-shrink: 0; }

  @media (max-width: 767px) {
    .mgs-coming-wrap  { padding: 56px 24px 64px; min-height: 440px; border-radius: 12px; }
    .mgs-coming-clock { width: 232px; height: 232px; margin-bottom: 30px; }
    .mgs-coming-clock-svg { width: 160px; height: 160px; }
    .mgs-coming-clock-ring:nth-child(1) { width: 196px; height: 196px; }
    .mgs-coming-clock-ring:nth-child(2) { width: 232px; height: 232px; }
    .mgs-coming-title { font-size: 2.8rem; }
    .mgs-coming-desc  { font-size: 1.5rem; margin-bottom: 30px; }
  }

  @media (max-width: 480px) {
    .mgs-coming-wrap  { padding: 44px 20px 52px; min-height: 380px; border-radius: 10px; }
    .mgs-coming-clock { width: 170px; height: 170px; margin-bottom: 24px; }
    .mgs-coming-clock-svg { width: 140px; height: 140px; }
    .mgs-coming-clock-ring:nth-child(1) { width: 170px; height: 170px; }
    .mgs-coming-clock-ring:nth-child(2) { display: none; }
    .mgs-coming-title { font-size: 2.4rem; }
    .mgs-coming-desc  { font-size: 1.45rem; }
    .mgs-coming-btn   { height: 48px; }
  }

  @media (max-width: 360px) {
    .mgs-coming-title { font-size: 2.1rem; }
  }
/* 준비중인 페이지 - 끝 */


/* 구정목표와 비전 - 시작 */
.ngm-vision {
  position: relative;
  overflow: hidden;
  border-radius: 2.4rem;
  padding: 6rem 4rem 6.4rem;
  background:
    radial-gradient(ellipse 70% 85% at 10% 115%, rgba(12, 77, 162, .18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 90% 0%,   rgba(242, 111, 33, .10) 0%, transparent 50%),
    radial-gradient(ellipse 60% 65% at 50% 50%,  rgba(46, 65, 148, .06) 0%, transparent 55%),
    #EEF2FB;
  border: 5px solid #fff;
  box-shadow: 0px 8px 20px 2.4px rgba(0, 0, 0, 0.05);
}

/* 배경 장식 – 오브 */
.ngm-vision__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.ngm-vision__orb--1 {
  top: -12rem; right: -10rem;
  width: 48rem; height: 48rem;
  background: radial-gradient(circle, rgba(12, 77, 162, .09) 0%, transparent 65%);
}
.ngm-vision__orb--2 {
  bottom: -8rem; left: -8rem;
  width: 38rem; height: 38rem;
  background: radial-gradient(circle, rgba(242, 111, 33, .08) 0%, transparent 60%);
}
.ngm-vision__orb--3 {
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72rem; height: 28rem;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .45) 0%, transparent 65%);
}

/* 배경 장식 – 코너 브래킷 */
.ngm-vision__bracket {
  position: absolute;
  width: 4.4rem;
  height: 4.4rem;
  pointer-events: none;
  z-index: 0;
}
/* 우상단 — 파랑 */
.ngm-vision__bracket--tr {
  display:none;
  top: 2.4rem;
  right: 2.4rem;
  border-top: 2px solid rgba(12, 77, 162, .28);
  border-right: 2px solid rgba(12, 77, 162, .28);
  border-radius: 0 6px 0 0;
}
/* 좌하단 — 오렌지 */
.ngm-vision__bracket--bl {
  display:none;
  bottom: 2.4rem;
  left: 2.4rem;
  border-bottom: 2px solid rgba(242, 111, 33, .30);
  border-left: 2px solid rgba(242, 111, 33, .30);
  border-radius: 0 0 0 6px;
}

/* 배경 장식 – 점 패턴 */
.ngm-vision__dots {
  position: absolute;
  top: 3rem; left: 2rem;
  width: 10rem; height: 10rem;
  background-image: radial-gradient(circle, rgba(12, 77, 162, .22) 1.5px, transparent 1.5px);
  background-size: 1.2rem 1.2rem;
  pointer-events: none;
  z-index: 0;
  opacity: .6;
}

/* 본문 컨테이너 */
.ngm-vision__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.6rem;
}

/* 상단 레이블 */
.ngm-vision__label-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ngm-vision__label-line {
  display: inline-block;
  width: 2.8rem;
  height: 2px;
  background: #00a651;
  border-radius: 2px;
  flex-shrink: 0;
}
.ngm-vision__label-text {
  font-size: 2rem;
  font-weight: 700;
  color: #153155;
  letter-spacing: .12em;
  font-family: 'esamanru', sans-serif;
  text-transform: uppercase;
}

/* 이미지 */
.ngm-vision__img-wrap {
  width: 100%;
  max-width: 100rem;
  filter: drop-shadow(0 6px 28px rgba(12, 77, 162, .14));
}
.ngm-vision__img {
  width: 100%;
  height: auto;
  display: block;
}
.ngm-vision__img.mobile{display:none;}

/* 글래스모피즘 태그라인 */
.ngm-vision__glass-bar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 9999px;
  padding: 1.6rem 4rem;
  box-shadow:
    0 2px 8px  rgba(12, 77, 162, .06),
    0 12px 40px rgba(12, 77, 162, .11),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
.ngm-vision__glass-icon {
  width: 2rem;
  height: 2rem;
  color: #0c4da2;
  opacity: .7;
  flex-shrink: 0;
}
.ngm-vision__tagline {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  font-family: 'esamanru', sans-serif;
  color: #0c4da2;
  letter-spacing: -.02em;
  text-align: center;
  word-break: keep-all;
  white-space: nowrap;
  background-image: linear-gradient(118deg, #0063b1 0%, #302a93 55%, #ff0087 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 비전 설명 문구 */
.ngm-vision__desc {
  text-align: center;
  font-size: 1.75rem;
  line-height: 1.9;
  color: #3A4E6E;
  letter-spacing: -0.015em;
  word-break: keep-all;
  text-wrap: pretty;
  margin: 0;
  background-color: rgb(255 255 255 / 50%);
  padding: 1.4rem 5rem;
  border-radius: 13px;
}

/* ── 반응형 ────────────────────────────── */
@media (max-width: 1079px) {
  .ngm-vision{border:4px solid #fff;}
  .ngm-vision { padding: 5.2rem 3.2rem 4.8rem; }
  .ngm-vision__img-wrap { max-width: 72rem; }
  .ngm-vision__tagline { font-size: 2.2rem; }
  .ngm-vision__label-text{ font-size: 1.8rem;}
}

@media (max-width: 767px) {
  .ngm-vision {
    padding: 4rem 2.4rem 3.6rem;
    border-radius: 1.6rem;
    border:3px solid #fff;
  }
  .ngm-vision__label-text{ font-size: 1.6rem;}
  .ngm-vision__inner { gap: 2.8rem; }
  .ngm-vision__img-wrap { max-width: 100%; }
  .ngm-vision__glass-bar {
    padding: 1.4rem 2.8rem;
    border-radius: 9999px;
  }
  .ngm-vision__tagline {
    font-size: 2rem;
    white-space: normal;
  }
  .ngm-vision__orb--1 { width: 32rem; height: 32rem; }
  .ngm-vision__orb--2 { width: 26rem; height: 26rem; }
  .ngm-vision__ring--1 { width: 34rem; height: 34rem; opacity: .6; }
  .ngm-vision__img.pc{display:none;}
  .ngm-vision__img.mobile{ display: block; padding: 0 20px; max-width: 400px; margin: 0 auto; }
  .ngm-vision__desc { font-size: 1.55rem; padding: 1.4rem 3rem; line-height:1.8;}
}

@media (max-width: 480px) {
  .ngm-vision { padding: 3.2rem 1.8rem 2.8rem; }
  .ngm-vision__label-text{ font-size: 1.4rem;}
  .ngm-vision__inner { gap: 2.4rem; }
  .ngm-vision__glass-bar { padding: 1.2rem 2rem 0.8rem 2rem; gap: .8rem; }
  .ngm-vision__glass-icon { display:none; width: 1.6rem; height: 1.6rem; }
  .ngm-vision__tagline { font-size: 1.8rem; letter-spacing: -.01em; }
  .ngm-vision__dots { display: none; }
  .ngm-vision__desc { font-size: 1.5rem; padding: 1rem 2rem;}
}

@media (max-width: 375px) {
  .ngm-vision__tagline { font-size: 1.65rem; }
  .ngm-vision__glass-bar { padding: 1rem 1.6rem 0.6rem 1.6rem; }
}

/* ── 구정지표 섹션 ────────────────────────────── */
.ngm-jipyo {
  margin-top: 4rem;
  position: relative;
  overflow: hidden;
  border-radius: 2.4rem;
  padding: 5.6rem 4rem 6rem;
  background:
    radial-gradient(ellipse 60% 70% at 5% 110%,  rgba(12, 77, 162, .10) 0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 95% 0%,   rgba(100, 130, 220, .07) 0%, transparent 50%),
    radial-gradient(ellipse 55% 60% at 50% 50%,  rgba(200, 210, 255, .06) 0%, transparent 55%),
    #f7f8fd;
}

.ngm-jipyo__head {
  text-align: center;
  margin-bottom: 2.4rem;
}

.ngm-jipyo__label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.ngm-jipyo__label-line {
  display: inline-block;
  width: 2.8rem;
  height: 2px;
  background: #00a651;
  border-radius: 2px;
  flex-shrink: 0;
}

.ngm-jipyo__label-text {
  font-size: 2rem;
  font-weight: 700;
  color: #153155;
  letter-spacing: .12em;
  font-family: 'esamanru', sans-serif;
}

/* 차트 이미지 (중앙 단독 배치) */
.ngm-jipyo__chart-wrap {
  text-align: center;
  margin-bottom: 3.6rem;
}
.ngm-jipyo__chart-img {
  max-width: 1152px;
  width: 100%;
  height: auto;
  display: inline-block;
}

/* 4개 카드 그리드 */
.ngm-jipyo__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

/* 글래스모피즘 카드 */
.ngm-jipyo__card {
  position: relative;
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 2rem;
  padding: 2.8rem 2.2rem 2.4rem;
  box-shadow: 0 4px 24px rgba(12,77,162,0.10), 0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.92);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ngm-jipyo__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 36px rgba(12,77,162,0.16), 0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.92);
}
.ngm-jipyo__card::after {
  content: '';
  position: absolute;
  top: 0; left: 18%; right: 18%;
  height: 3px;
  border-radius: 0 0 3px 3px;
}
.ngm-jipyo__card--1::after { background: linear-gradient(90deg, #b89ee0, #9070cc); }
.ngm-jipyo__card--2::after { background: linear-gradient(90deg, #e0c830, #c8a820); }
.ngm-jipyo__card--3::after { background: linear-gradient(90deg, #f090a0, #e06878); }
.ngm-jipyo__card--4::after { background: linear-gradient(90deg, #70b8f0, #4898e0); }

/* 아이콘 */
.ngm-jipyo__card-icon {
  width: 5.6rem;
  height: 5.6rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.ngm-jipyo__card-icon img {
  width: 4.8rem;
  height: 4.8rem;
  object-fit: contain;
}

/* 제목 */
.ngm-jipyo__card-title {
  display: block;
  font-size: 2.3rem;
  font-weight: 700;
  color: #153155;
  letter-spacing: -0.03em;
  line-height: 1.3;
  font-family: 'esamanru', sans-serif;
  word-break: keep-all;
}
.ngm-jipyo__card-title > span{font-family: 'esamanru', sans-serif;}
.ngm-jipyo__card--1 .ngm-jipyo__card-title > span{color:#5728da;}
.ngm-jipyo__card--2 .ngm-jipyo__card-title > span{color:#e77800;}
.ngm-jipyo__card--3 .ngm-jipyo__card-title > span{color:#ff4723;}
.ngm-jipyo__card--4 .ngm-jipyo__card-title > span{color:#0059cb;}

/* 설명 */
.ngm-jipyo__card-desc {
  font-size: 1.6rem;
  color: #4A5568;
  line-height: 1.8;
  letter-spacing: -0.05em;
  word-break: keep-all;
  text-wrap: pretty;
  margin: 0;
}

/* ── 반응형 ── */
@media (max-width: 1200px) {
  .ngm-jipyo__cards { gap: 1.6rem; }
  .ngm-jipyo__card  { padding: 2.4rem 1.8rem 2rem; border-radius: 1.8rem; }
  .ngm-jipyo__card-title { font-size: 2.2rem; }
  .ngm-jipyo__card-desc  { font-size: 1.55rem; }
  .ngm-jipyo__card-icon img { width: 4.2rem; height: 4.2rem; }
}

@media (max-width: 1023px) {
  .ngm-jipyo { padding: 4.8rem 3.2rem 5.2rem; border-radius: 2rem; }
  .ngm-jipyo__chart-img { max-width: 86%; }
  .ngm-jipyo__cards { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .ngm-jipyo__card  { padding: 2.2rem 1.8rem; border-radius: 1.6rem; }
  .ngm-jipyo__card-title { font-size: 2.1rem; }
  .ngm-jipyo__card-desc  { font-size: 1.5rem; }
}

@media (max-width: 767px) {
  .ngm-jipyo { padding: 4rem 2.4rem 4.8rem; border-radius: 1.6rem; margin-top:3rem;}
  .ngm-jipyo__chart-img { max-width: 100%; }
  .ngm-jipyo__cards { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .ngm-jipyo__card  { padding: 2rem 1.6rem; border-radius: 1.6rem; gap: 1rem; }
  .ngm-jipyo__card-icon img { width: 4rem; height: 4rem; }
}

@media (max-width: 480px) {
  .ngm-jipyo__cards { grid-template-columns: 1fr; gap: 2rem; }
  .ngm-jipyo__card  { padding: 2.5rem; }
}
/* 구정목표와 비전 - 끝*/