@charset "utf-8";
/* 역대시장 v2 - 시작 (PC 우선) */
.mayor_area{margin-top:1.2rem;}

.mayor_area .my_photo img{display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit;}

/* 탭 */
.mayor_area .my_tabs{display:flex; gap:1rem; padding:.6rem; border-radius:1.4rem; border:1px solid rgba(255,255,255,.6); background:linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.28)); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); box-shadow:0 1.6rem 3.4rem -3rem rgba(20,40,80,.5), inset 0 1px 0 rgba(255,255,255,.7);}
.mayor_area .my_tab{position:relative; flex:1; display:flex; align-items:center; justify-content:center; gap:.8rem; min-height:5.6rem; padding:0 2rem; border-radius:1rem; background:transparent; font-size:1.9rem; font-weight:600; letter-spacing:-.05rem; color:#4d5563; transition:color .25s ease;}
.mayor_area .my_tab .cnt{font-size:1.5rem; font-weight:600; color:#5c6472; font-variant-numeric:tabular-nums;}

.mayor_area .my_tab:hover{color:var(--point);}
.mayor_area .my_tab.is_on{color:#fff; background:linear-gradient(135deg, rgba(26,95,180,.95), rgba(26,95,180,.78)); box-shadow:0 1.2rem 2.6rem -1.6rem rgba(26,95,180,.9), inset 0 1px 0 rgba(255,255,255,.35);}
.mayor_area .my_tab.is_on .cnt{color:rgba(255,255,255,.92);}

.mayor_area .my_lead{display:flex; align-items:baseline; justify-content:space-between; gap:2rem; margin:3.2rem 0 2.4rem;}
.mayor_area .my_lead .lt{font-size:2rem; font-weight:700; letter-spacing:-.06rem; color:var(--ink);}
.mayor_area .my_lead .ld{font-size:1.7rem; font-weight:500; color:#7b8494;}

/* 카드 그리드 : 사진 좌 · 내용 우 */
.mayor_area .my_grid{margin-top:3.2rem; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.6rem,1.6vw,2rem); align-items:stretch;}
/* 탭 패널 숨김 : display:grid 가 [hidden] 기본값을 덮어써 탭 전환이 되지 않던 문제 */
.mayor_area .my_grid[hidden]{display:none;}
/* 탭 전환 모션 : 패널이 보이는 순간 카드가 스르릅 나타남 */
@keyframes myPanelIn{from{opacity:0; transform:translateY(1.2rem);} to{opacity:1; transform:none;}}
.mayor_area .my_grid:not([hidden]) > .my_card{animation:myPanelIn .5s cubic-bezier(.16,1,.3,1) backwards;}
.mayor_area .my_grid:not([hidden]) > .my_card:nth-child(2){animation-delay:.06s;}
.mayor_area .my_grid:not([hidden]) > .my_card:nth-child(3){animation-delay:.12s;}
.mayor_area .my_grid:not([hidden]) > .my_card:nth-child(4){animation-delay:.18s;}
.mayor_area .my_grid:not([hidden]) > .my_card:nth-child(n+5){animation-delay:.24s;}
@media (prefers-reduced-motion:reduce){
  .mayor_area .my_grid:not([hidden]) > .my_card{animation:none;}
}
.mayor_area .my_card{container-type:inline-size; display:block; height:100%; padding:clamp(2.2rem,2.4vw,2.8rem); border:1px solid rgba(255,255,255,.6); border-radius:1.6rem; background:linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.34)); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); box-shadow:0 2rem 4.4rem -3rem rgba(20,40,80,.42), inset 0 1px 0 rgba(255,255,255,.7); transition:border-color .3s ease, box-shadow .4s ease, transform .45s cubic-bezier(.16,1,.3,1);}
.mayor_area .my_card:hover{transform:translateY(-.4rem); border-color:rgba(255,255,255,.85); box-shadow:0 3rem 5.6rem -3rem rgba(20,40,80,.45), inset 0 1px 0 rgba(255,255,255,.8);}

.mayor_area .my_in{display:grid; grid-template-columns:clamp(15rem,26cqi,22rem) minmax(0,1fr); gap:clamp(3.4rem,6cqi,6rem); align-items:start;}
/* 카드 폭이 좁아지면(화면 폭과 무관하게) 사진을 위로 올리고 내용은 전체 폭 */
.mayor_area .my_photo{position:relative; display:block; width:100%; max-width:22rem; aspect-ratio:3/4; border-radius:1.1rem; overflow:hidden; background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.7); box-shadow:0 1.4rem 3rem -2.2rem rgba(20,40,80,.6);}
.mayor_area .my_photo image-slot{display:block; width:100%; height:100%;}

.mayor_area .my_main{display:flex; flex-direction:column; min-width:0;}
.mayor_area .my_ord{font-size:1.6rem; font-weight:600; letter-spacing:-.02rem; color:#5c6472;}
.mayor_area .my_name{margin-top:.5rem; font-family:'YuhanKimberlyPureunSup'; font-size:2.4rem; font-weight:700; line-height:1.3; letter-spacing:-.09rem; color:var(--ink);}
.mayor_area .my_term{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; font-size:1.7rem; font-weight:400; letter-spacing:.01rem; color:#4d5563; font-variant-numeric:tabular-nums;}

.mayor_area .my_body{display:grid; grid-template-columns:max-content 1fr; column-gap:clamp(1.2rem,1.4vw,1.6rem); row-gap:clamp(1.6rem,1.8vw,2rem); align-items:start; margin-top:clamp(1.8rem,2vw,2.2rem); padding-top:clamp(1.8rem,2vw,2.2rem); border-top:1px solid rgba(255,255,255,.75); box-shadow:0 -1px 0 rgba(20,40,80,.07);}
.mayor_area .my_body.is_hide{display:none;}
.mayor_area .my_group,
.mayor_area .my_goal{display:contents;}
.mayor_area .my_goal .lb,
.mayor_area .my_glabel{padding-top:.1rem; font-family:'YuhanKimberlyPureunSup'; font-size:1.7rem; font-weight:700; letter-spacing:-.02rem; color:var(--point);}
.mayor_area .my_gtext p{word-break:keep-all; font-size:1.7rem; font-weight:500; line-height:1.6; letter-spacing:-.04rem; color:var(--ink); text-wrap:pretty;}
.mayor_area .my_gtext p + p{margin-top:.4rem;}
.mayor_area .my_items{display:flex; flex-direction:column; gap:.75rem;}
.mayor_area .my_items li{word-break:keep-all; position:relative; padding-left:1.2rem; font-size:1.7rem; line-height:1.6; letter-spacing:-.03rem; color:#3d4553; text-wrap:pretty;}
.mayor_area .my_items li::before{content:''; position:absolute; left:.1rem; top:1.05rem; width:.35rem; height:.35rem; border-radius:50%; background:var(--point); opacity:.8;}
/* 카드 폭이 좁아지면(화면 폭과 무관하게) 사진을 위로 올리고 내용은 가운데 정렬 : 기본 규칙 이후에 위치해야 적용됨 */
@container (max-width:46rem){
  .mayor_area .my_in{grid-template-columns:1fr; gap:2rem; justify-items:center;}
  .mayor_area .my_in .my_photo{max-width:16rem; margin-inline:auto;}
  .mayor_area .my_main{width:100%; align-items:center; text-align:center;}
  .mayor_area .my_head{text-align:center;}
  .mayor_area .my_term{justify-content:center;}
  .mayor_area .my_body{grid-template-columns:1fr; column-gap:0; row-gap:.6rem; justify-items:center; text-align:center; width:100%;}
  .mayor_area .my_glabel,
  .mayor_area .my_goal .lb{margin-top:1.4rem;}
  .mayor_area .my_group:first-child .my_glabel,
  .mayor_area .my_goal:first-child .lb{margin-top:0;}
  .mayor_area .my_items{width:fit-content; margin-inline:auto; text-align:left;}
  .mayor_area .my_none{text-align:center;}
}

.mayor_area .my_none{margin-top:2.2rem; padding-top:2.2rem; border-top:1px solid rgba(255,255,255,.75); font-size:1.7rem; color:#4d5563;}

/* 태블릿 : 카드 1단 (사진 폭은 위 컨테이너 쿼리 clamp가 처리) */
@media (max-width:1024px){
  /* 카드 1단 : 넓어진 폭을 사진에 되돌려줌 */
  .mayor_area .my_grid{margin-top:2.8rem; grid-template-columns:1fr;}
  .mayor_area .my_card{padding:2.6rem;}
  .mayor_area .my_in{gap:clamp(3.6rem,5cqi,5.2rem);}
  .mayor_area .my_body{column-gap:1.8rem;}
  .mayor_area .my_glabel, .mayor_area .my_goal .lb{margin-top:0;}
}
@media (max-width:768px){
  .mayor_area .my_tabs{gap:.6rem;}
  .mayor_area .my_tab{font-size:1.8rem;}
  .mayor_area .my_lead{flex-direction:column; align-items:flex-start; gap:.6rem; margin:2.6rem 0 2rem;}
  .mayor_area .my_lead .lt{font-size:1.9rem;}
  .mayor_area .my_grid{margin-top:2.4rem;}
  .mayor_area .my_card{padding:2.4rem;}
  .mayor_area .my_in{gap:2.8rem;}
  /* 라벨을 본문 위로 : 좁은 폭에서 두 단 유지하면 글이 눌림 */
  .mayor_area .my_body{grid-template-columns:1fr; column-gap:0; row-gap:.6rem;}
  .mayor_area .my_glabel, .mayor_area .my_goal .lb{margin-top:1.4rem;}
  .mayor_area .my_group:first-child .my_glabel, .mayor_area .my_goal:first-child .lb{margin-top:0;}
}
/* 모바일 : 사진 위 · 내용 아래 : 텍스트가 좁은 칼럼에서 잘게 접히는 것을 막음 */
@media (max-width:600px){
  .mayor_area .my_card{padding:2.4rem 2.6rem 2.8rem;}
  .mayor_area .my_in{gap:2.2rem;}
  .mayor_area .my_main{display:flex; flex-direction:column; min-width:0;}
  .mayor_area .my_name{font-size:2.2rem;}
  .mayor_area .my_term{margin-top:.7rem; font-size:1.6rem; line-height:1.5;}
  .mayor_area .my_body,
  .mayor_area .my_none{margin-top:1.8rem; padding-top:1.8rem;}
  .mayor_area .my_glabel, .mayor_area .my_goal .lb{margin-top:1rem;}
}
@media (max-width:420px){
  .mayor_area .my_tabs{gap:.4rem; padding:.5rem;}
  .mayor_area .my_tab{padding:0 .8rem; font-size:1.7rem; letter-spacing:-.08rem;}
  .mayor_area .my_card{padding:2.2rem 2.2rem 2.6rem;}
  .mayor_area .my_photo{max-width:14rem;}
  .mayor_area .my_in{gap:1.8rem;}
  .mayor_area .my_glabel, .mayor_area .my_goal .lb{margin-top:.8rem;}
  .mayor_area .my_name{font-size:2.1rem;}
}
/* 역대시장 v2 - 끝 */