/* ========================================================= */
/* 기본 레이아웃 및 여백 설정 */
/* ========================================================= */
.about {
  padding: 0 !important;
  padding-top: 0vh !important; /* 섹션 상단에 뷰포트 높이의 3%만큼 여백 추가 */
  padding-bottom: 0 !important; /* 하단 패딩 제거 */
  margin-bottom: 0 !important; /* 하단 마진 제거 */
  position: relative; /* 자식 요소인 ::before의 기준점 역할 */
  isolation: isolate;
}

/* 상단 흰색 배경을 만드는 ::before 요소 */
.about::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%; /* 상단 절반만 */
  background: #ffffff;
  z-index: -1;
}

/* 하단 파란색 배경을 만드는 ::after 요소 - fc-scope까지 확장 */
.about::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -100px; /* fc-scope 영역까지 확장 */
  height: calc(50% + 100px); /* 하단 절반 + 추가 영역 */
  background: hsl(228, 88%, 13%); /* 색상 변경 완료 (기존 rgb 제거) */
  z-index: -1;
}

.about-flex-container {
  /* ★★★ PC(기본) 간격 ★★★ */
  --profile-section-top-gap: 40px; /* 파란색 배경 영역에 맞게 조정 */

  padding-top: var(--profile-section-top-gap);
  display: flex; 
  flex-direction: row; 
  align-items: center; 
  gap: 2rem; 
  margin-bottom: 0 !important; /* 하단 마진 제거 */
  padding-bottom: 0 !important; /* 하단 패딩 제거 */
}

.about-profile-image,
.about-profile-text {
  flex-basis: 50%; /* 컨테이너의 50% 너비를 기본 크기로 설정 */
  max-width: 50%; /* 최대 너비를 50%로 제한 */
}

.inner-image-wrap {
  position: relative; /* 자식 요소인 overlay-image의 기준점 역할 */
  width: 100%;
  height: auto;
}

.base-image {
  display: block; /* 블록 요소로 설정하여 여백 문제 해결 */
  width: 100%; /* 부모 요소 너비에 맞게 조정 */
  height: auto;
  border-radius: 12px; /* 모서리를 둥글게 처리 */
}

.overlay-image {
  position: absolute;
  width: auto;
  height: auto;
  max-width: min(100%, 900px); /* 400px * 1.5 = 600px */
  max-height: min(100%, 1050px); /* 500px * 1.5 = 750px */
  bottom: 0;
  left: 72%; /* 45% → 55% (오른쪽으로 이동) */
  transform: translateX(-50%) scale(1.3); /* scale 추가로 1.5배 확대 */
  z-index: 10;
  object-fit: contain; /* 비율 유지 */
}


/* ========================================================= */
/* PC (Desktop) 스타일 */
/* ========================================================= */

/* --- about-profile-text 영역 --- */
.about-profile-text {
  text-align: right; 
  padding-right: 60px;
}

.about-profile-text h2,
.about-profile-text p {
    margin: 0; 
}







.about-profile-text .bio-list {
  list-style: none; 
  padding: 0;
  margin: 0;
}

.about-profile-text 


/* 디버깅: about section-label 하단에 가로줄 추가 */
#about-section .section-label {
  border-bottom: 2px solid blue !important; /* 디버깅용 파란 가로줄 */
  background-color: rgba(0, 0, 255, 0.1) !important; /* 디버깅용 파란 배경 */
}

/* --- about-extra-block 영역 --- */
#about-section .about-extra-block {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
  margin-top: 20px; /* 라벨과의 간격을 위해 상단 마진 추가 */
  margin-bottom: 0 !important; /* 하단 마진 제거 */
  
  /* 가로줄 기준으로 아래로 70px에서 시작 */
  padding-top: 70px !important; /* 가로줄 기준으로 아래로 70px에서 시작 */
  padding-bottom: 60px !important; /* 하단 여백 추가 */

  --aeb-line-height-pc: 1.2;
  --aeb-line-gap: 0.1rem;
  --aeb-tagline-gap: 2.5rem;
}

#about-section .aeb-line1 {
  font-size: 3rem; 
  font-weight: 500; 
  line-height: var(--aeb-line-height-pc) !important;
  margin-bottom: var(--aeb-line-gap) !important;
}

#about-section .aeb-line2 {
  font-size: 3rem; 
  font-weight: 500; 
}

#about-section .pc-only {
  font-size: 4rem; 
  color: oklab(34.048% -0.01813 -0.1857);
  white-space: nowrap;
  display: inline;
  padding-inline: 1.2rem;
}


#about-section .mobile-only {
  display: none; 
}

#about-section .aeb-tagline {
  white-space: normal; 
  text-align: center;  
  font-size: 4rem;
  font-weight: 900;
  color: oklab(28.209% -0.0153 -0.15041)  !important;
  margin-top: var(--aeb-tagline-gap);
}

/* ========================================================= */
/* 모바일 (911px 이하) 스타일 */
/* ========================================================= */
@media (max-width: 911px) {
  .about {
    padding-top: 60px; /* 라벨 아래 콘텐츠 시작을 위한 상단 패딩 */
  }
  
  .about-flex-container {
    /* ▼▼▼▼▼ 모바일 간격 수정 ▼▼▼▼▼ */
    /* ★★★ 여기서 모바일 전용 간격을 조절하세요 ★★★ */
    --profile-section-top-gap: 40px; /* 모바일에서는 40px로 간격 축소 */
    /* ▲▲▲▲▲ 모바일 간격 수정 ▲▲▲▲▲ */
    
    flex-direction: column-reverse; 
    gap: 0;
  }

  .about-profile-image,
  .about-profile-text {
    flex-basis: 100%;
    max-width: 100%;
  }

  .about-profile-image {
    margin-bottom: 20px; 
  }
  
  .about-profile-text {
    text-align: center; 
    padding-right: 0; 
    background-color: #ffffff; 
    background-image: url("../images/about_txt_bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border: 2px solid #ddd;
    border-radius: 16px;
    padding: 20px;
    margin: 0 auto 20px auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-width: 90%;
    box-sizing: border-box;
    position: relative; 
    padding-left: var(--abt-box-padding-left, 47px);
    padding-right: var(--abt-box-padding-right, 47px);
  }

  .about-profile-text::before{
    content:"";
    position:absolute;
    top: 12px;
    left: 0;
    width: 30%;
    height: 6px;
    background:hsl(232, 100%, 24%);
    z-index:2;
    transform-origin: left center;
    animation: abtAccentIn .6s ease-out both;
  }

  @keyframes abtAccentIn{
    0%   { transform: scaleX(0); opacity:0; }
    100% { transform: scaleX(1); opacity:1; }
  }

  

  

  

  .about-profile-text 


  /* --- about-extra-block 영역 --- */
  #about-section .about-extra-block {
    margin-bottom: 0 !important; 
    max-width: 100%;
    --aeb-line-gap: 0.1rem;
    
    /* 모바일에서도 가로줄 기준으로 아래로 5px에서 시작 */
    padding-top: 5px !important; /* 모바일에서도 가로줄 기준으로 아래로 5px에서 시작 */
    padding-bottom: 0px !important; /* 모바일에서는 하단 패딩 완전 제거 */
    margin-bottom: -80px !important; /* 하단 마진을 더 큰 음수로 설정하여 공백 더 제거 */
  }

  #about-section .aeb-line1 {
    font-size: 2rem; 
    font-weight: 600;
    margin-bottom: var(--aeb-line-gap); 
  }
  
  #about-section .aeb-line2 {
    font-size: 2rem;
    font-weight: 600;
  }
  
  #about-section .aeb-tagline {
    font-size: 1.7rem; 
    font-weight: 900;
    --aeb-tagline-gap: 1.5rem; 
    margin-top: var(--aeb-tagline-gap);
  }

  #about-section .pc-only {
    display: none; 
  }

  #about-section .mobile-only {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.8rem, 3.6vw, 1.6rem); 
    padding-inline: clamp(0.4rem, 2vw, 0.8rem);
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
  }

  #about-section .mobile-only::before,
  #about-section .mobile-only::after {
    position: static;
    transform: none;
    top: auto; left: auto; right: auto;
    font-size: clamp(2.6rem, 14vw, 3.8rem);
    line-height: 1;
    font-weight: 200;
    color: oklab(34.048% -0.01813 -0.1857);
  }
  #about-section .mobile-only::before { content: '['; }
  #about-section .mobile-only::after  { content: ']'; }
}


/* ===== Scroll-Reveal (스크롤 시 나타나는 효과) 공통 ===== */
.sr { opacity: 0; will-change: opacity, transform; }
.sr.in-view { opacity: 1; }
.reveal-down { transform: translateY(-14px); transition: opacity .6s ease, transform .6s ease; }
.reveal-down.in-view { transform: translateY(0); }
.popit { transform: scale(.94); }
.popit.in-view { animation: popIt .5s cubic-bezier(.2,.9,.25,1.0) both; }
@keyframes popIt { 
  0% { opacity:0; transform: scale(.88); } 
  70% { opacity:1; transform: scale(1.04); }
  100% { opacity:1; transform: scale(1); }
}
.fixed-fade { transition: opacity .8s ease-out; }
.fixed-fade.in-view { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .sr, .reveal-down, .popit, .fixed-fade {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* =========================
   이름/영문명/직함 + 약력 : PC/모바일 완전 분리 (공통 없음)
   ========================= */

/* PC 전용 */
@media (min-width: 912px){
  .about-profile-text .name-kor { font-size: 7rem; font-weight: 800; color: lab(0% 0 0); line-height: 1.2; margin-bottom: .5rem; text-align: left; }
  .about-profile-text .name-en  { font-size: 2rem; font-weight: 700; color: #5b6b8a; line-height: 1.2; margin-bottom: 1.1rem; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
  .about-profile-text .title-kor{ font-size: 2rem; font-weight: 700; color: #1133cc; line-height: 1.5; margin-bottom: 1.25rem; text-align: left; }

}

/* 모바일 전용 */
@media (max-width: 911px){
  .about-profile-text .name-kor { font-size: clamp(1.6rem, 5.4vw, 2.1rem); font-weight: 800; color: #111; line-height: 1.2; margin-bottom: .4rem; text-align: center; }
  .about-profile-text .name-en  { font-size: clamp(.9rem, 3.4vw, 1.05rem); font-weight: 700; color: #333; line-height: 1.2; margin-bottom: .8rem; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
  .about-profile-text .title-kor{ font-size: clamp(1rem, 3.6vw, 1.15rem); font-weight: 700; color: #2a4cff; line-height: 1.45; margin-bottom: 1rem; text-align: center; }

  .bio-ansae  { font-size:.98rem; font-weight:500; color:#003366; line-height:1.5; margin-bottom:.45rem; text-align:center; }
  .bio-seosang{ font-size:.92rem; font-weight:400; color:#555;    line-height:1.5; margin-bottom:.35rem; text-align:center; }
  .bio-noomu  { font-size:1.02rem; font-weight:600; color:#880000; line-height:1.5; margin-bottom:.55rem; text-align:center; }
  .bio-police { font-size:.88rem; font-weight:400; color:#444;    line-height:1.5; margin-bottom:.2rem;  text-align:center; font-style:italic; }
}
/* about-extra-block 영역 중앙 정렬 */
.about-extra-block {
  text-align: center !important;
}

.about-extra-block p {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}
.about-extra-block {
  display: block;
  max-width: 100%;        /* 필요시 최대 너비 제한 */
  margin-left: auto;      /* 왼쪽 자동 */
  margin-right: auto;     /* 오른쪽 자동 */
  text-align: center;     /* 내부 텍스트 중앙 정렬 */
}
/* PC 전용: 약력 왼쪽 정렬 */
@media (min-width: 912px){
  .bio-ansae,
  .bio-seosang,
  .bio-noomu,
  .bio-police {
    text-align: left !important;
  }
}
/* ===== PC 강제 좌측정렬 & 마진 리셋 ===== */
@media (min-width: 912px){
  /* 텍스트 박스 자체를 좌측 기준으로 */
  .about-profile-text{
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;  /* 혹시 auto-right로 밀려있던 경우 방지 */
  }

  /* 약력 블록과 각 항목: 어떤 중앙/우측 설정도 전부 무시 */
  .about-profile-text .bio-list{
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .about-profile-text .bio-item,
  .bio-ansae, .bio-seosang, .bio-noomu, .bio-police{
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
  }
}
/* 좌측 텍스트 영역 폭 안정화 */
.about-profile-text {
  flex: 1 1 50%;          /* flex: grow, shrink, basis → 50% 영역 차지 */
  max-width: 50%;         /* PC에서 절반 폭 고정 */
  min-width: 300px;       /* 최소폭 보장 (원하는 값으로 조정) */
  box-sizing: border-box;
  text-align: left;       /* 좌측 정렬 */
  word-break: keep-all;   /* 한글 단어 단위 줄바꿈 */
  white-space: normal;    /* 강제 개행 방지 */
}

/* 약력 리스트 기본 세팅 */
.about-profile-text .bio-list {
  width: 100%;
  margin: 0;
  padding: 0;
}

.about-profile-text .bio-item {
  display: block;
  width: 100%;
}
/* ===== 약력 전체(Global) 컨트롤: HTML 수정 불필요 ===== */

/* 원하는 값만 여기서 바꾸면 됩니다 */
:root{
  /* PC */
  --bio-fs-pc: 2rem;            /* 글자 크기 */
  --bio-weight-pc: 500;         /* 굵기: 300~900 */
  --bio-color-pc: hsl(0,0%,100%);/* 색상 */
  --bio-lh-pc: 1.6;             /* 줄 간격 */
  --bio-gap-pc: .7rem;          /* 항목 간 간격 */
  --bio-align-pc: left;         /* left | center | right */

  /* MOBILE */
  --bio-fs-mo: 0.95rem;
  --bio-weight-mo: 500;
  --bio-color-mo: #000000;
  --bio-lh-mo: 1.5;
  --bio-gap-mo: .45rem;
  --bio-align-mo: center;       /* 모바일 기본은 가운데 */
}

/* PC 전용 적용 */
@media (min-width: 912px){
  .about-profile-text .bio-item{
    font-size: var(--bio-fs-pc) !important;
    font-weight: var(--bio-weight-pc) !important;
    color: var(--bio-color-pc) !important;
    line-height: var(--bio-lh-pc) !important;
    margin-bottom: var(--bio-gap-pc) !important;
    text-align: var(--bio-align-pc) !important;

    /* 깨짐 방지 */
    word-break: keep-all;
    white-space: normal;
    display: block;
    width: 100%;
  }
}

/* 모바일 전용 적용 */
@media (max-width: 911px){
  .about-profile-text .bio-item{
    font-size: var(--bio-fs-mo) !important;
    font-weight: var(--bio-weight-mo) !important;
    color: var(--bio-color-mo) !important;
    line-height: var(--bio-lh-mo) !important;
    margin-bottom: var(--bio-gap-mo) !important;
    text-align: var(--bio-align-mo) !important;

    word-break: keep-all;
    white-space: normal;
    display: block;
    width: 100%;
  }
}
/* =======================
   PC 전용
   ======================= */
@media (min-width: 912px){

  /* 한글 이름 */
  #about-section .about-profile-text .name-kor {
    font-size: 3rem !important;      /* 글자 크기 */
    font-weight: 800 !important;     /* 굵기 */
    color: #ffffff !important;       /* 색상: 흰색 */
    margin-bottom: .5rem !important; /* 아래 간격 */
    text-align: left !important;     /* 정렬: left/center/right */
  }

  /* 영문 이름 */
  #about-section .about-profile-text .name-en {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: lab(40.32% 0 -0.01) !important;
    margin-bottom: 1rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }

  /* 직함 (소속 + 대표 행정사) */
  #about-section .about-profile-text .title-kor {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: hwb(0 100% 0%) !important;
    margin-bottom: 1.25rem !important;
    text-align: left !important;
  }
}

/* =======================
   모바일 전용
   ======================= */
@media (max-width: 911px){

  /* 한글 이름 */
  #about-section .about-profile-text .name-kor {
    font-size: clamp(1.6rem, 5vw, 2rem) !important;
    font-weight: 800 !important;
    color: hsl(34.048% -0.01813 -0.1857) !important;
    margin-bottom: .4rem !important;
    text-align: center !important;
  }

  /* 영문 이름 */
  #about-section .about-profile-text .name-en {
    font-size: clamp(1rem, 3.5vw, 1.2rem) !important;
    font-weight: 700 !important;
    color: hsl(0, 1%, 24%) !important;
    margin-bottom: .8rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-align: center !important;
  }

  /* 직함 (소속 + 대표 행정사) */
  #about-section .about-profile-text .title-kor {
    font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
    font-weight: 700 !important;
    color: hsl(0, 0%, 0%) !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
  }
}
/* PC 전용: 프로필 텍스트 영역을 오른쪽으로 이동 */
@media (min-width: 912px){
  .about-profile-text {
    position: relative;
    left: 50px;          /* 원하는 만큼 이동 (양수=오른쪽, 음수=왼쪽) */
  }
}
.about::before { top: var(--about-bg-start, 50%); }

/* 모바일에서 about::after가 파트너 섹션에 영향을 주지 않도록 제한 */
@media (max-width: 911px) {
  .about {
    overflow: hidden !important; /* 가상 요소가 섹션 경계를 넘지 않도록 */
    position: relative;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* 모바일에서 --about-bg-start 변수 무시하고 고정값 사용 */
  .about::before {
    top: 0 !important; /* --about-bg-start 변수 무시하고 고정값 사용 */
    height: 50% !important; /* 고정 높이 */
  }
  
  .about::after {
    bottom: 0 !important; /* 모바일에서는 확장하지 않음 */
    top: auto !important; /* top을 auto로 설정하여 bottom 기준으로 작동 */
    height: 65% !important; /* 문구의 절반까지 올라가도록 높이 증가 */
    max-height: none !important; /* 최대 높이 제한 제거 */
  }
  
  /* 파트너 섹션이 about 배경 위에 표시되도록 */
  .partners-new {
    position: relative !important;
    z-index: 1 !important;
    background: #f8f9fa !important; /* 배경색 명시적으로 설정 */
    margin-top: 0 !important;
  }
  
  /* about 섹션과 파트너 섹션 사이의 간격 제거 */
  .about + .partners-new {
    margin-top: 0 !important;
  }
}

/* ===================== 모바일/PC 프로필 분리 제어 ===================== */
@media (max-width: 911px){
  #about-section .about-flex-container,
  #about-section .about-profile-text,
  #about-section .about-profile-image,
  #about-section .bio-list,
  #about-section .bio-item,
  #about-section .inner-image-wrap {
    display: none !important;
    visibility: hidden !important;
  }
  #about-section .about-mobile-image-block{ display:block !important; margin-top:0px; }
  #about-section .about-mobile-figure{ display:block; width:100%; border-radius:16px; overflow:hidden; }
  #about-section .about-mobile-figure img{ display:block; width:100%; height:auto; object-fit:cover; }

  #about-section .aeb-line1::before,
  #about-section .aeb-line1::after,
  #about-section .aeb-line2::before,
  #about-section .aeb-line2::after,
  #about-section .aeb-tagline::before,
  #about-section .aeb-tagline::after,
  #about-section .mobile-only::before,
  #about-section .mobile-only::after {
    content:none !important; display:none !important;
  }
  #about-section .aeb-tagline .pc-only{ display:none !important; }
  #about-section .aeb-tagline .mobile-only{ display:inline !important; }
}
@media (min-width: 912px){
  #about-section .about-flex-container{ display:flex !important; }
  #about-section .about-profile-text,
  #about-section .about-profile-image{ display:block !important; }
  #about-section .about-mobile-image-block{ display:none !important; }
}
@media (max-width: 911px){
  #about-section .about-mobile-image-block{
    padding: 0 !important;
    margin: 0 !important;
  }
}
/* 1) 먼저 about 내부의 모든 mobile-only 가상요소를 초기화(괄호 제거) */
#about-section .mobile-only::before,
#about-section .mobile-only::after{
  content: none !important;
  display: none !important;
}

/* 2) 괄호는 'aeb-tagline' 안의 mobile-only 에만 다시 부여 */
@media (max-width: 911px){
  #about-section .aeb-tagline .mobile-only{
    display: inline-flex;          /* 줄바꿈해도 괄호가 같은 줄에 붙게 */
    align-items: center;
    flex-wrap: wrap;               /* 내부 줄바꿈 허용 */
    gap: clamp(0.6rem, 3vw, 1rem);
    padding-inline: clamp(0.2rem, 1.5vw, 0.6rem);
    white-space: normal;
  }
  #about-section .aeb-tagline .mobile-only::before,
  #about-section .aeb-tagline .mobile-only::after{
    content: "" !important;        /* 초기화 후 */
    display: inline !important;
    position: static !important;
    transform: none !important;
    font-size: clamp(2.6rem, 14vw, 3.8rem);
    line-height: 1;
    font-weight: 200;
    color: oklab(34.048% -0.01813 -0.1857);
  }
  #about-section .aeb-tagline .mobile-only::before { content: "[" !important; }
  #about-section .aeb-tagline .mobile-only::after  { content: "]" !important; }

  /* PC용 문구는 모바일에서 숨김(중복 방지) */
  #about-section .aeb-tagline .pc-only   { display: none !important; }
  #about-section .aeb-tagline .mobile-only { display: inline-flex !important; }
}
/* ========================================================= */
/* PC 버전: 프로필 이미지와 텍스트 위치 교체 및 정렬 조정 */
/* ========================================================= */
@media (min-width: 912px) {

  /* 1. Flexbox 아이템 순서 재정의 */
  .about-flex-container {
    /* flex-direction을 row-reverse로 설정하여 간단하게 순서를 뒤집습니다. */
    flex-direction: row-reverse;
  }

  /* 2. 텍스트 영역 스타일 조정 */
  .about-profile-text {
    /* 기존에 적용된 상대 위치 및 이동 값 초기화 */
    position: static;
    left: auto;

    /* 텍스트를 왼쪽으로 정렬하고, 이미지와의 간격을 위해 패딩 조정 */
    text-align: left !important;
    padding-right: 0;       /* 기존 오른쪽 패딩 제거 */
    padding-left: 60px;     /* 이미지와 간격을 위해 왼쪽에 패딩 추가 */
  }

  /* 3. 약력 텍스트도 좌측 정렬 유지 */
  .about-profile-text .bio-item {
    text-align: left !important;
  }
}

@media (max-width: 911px) {
  #about-section .about-extra-block {
    margin-bottom: 0 !important;
  }
  #about-section .about-extra-block h2,
  #about-section .about-extra-block p {
    margin-bottom: 0 !important;
  }
  #about-section .about-mobile-image-block {
    margin-top: -80px !important; /* 위쪽 요소와의 간격을 더 크게 줄임 */
  }
}
/* ===== About: Mobile-only smooth reveals ===== */
@media (max-width: 911px){
  :root{
    /* 한 곳에서 조정 가능 */
    --aeb-ease: cubic-bezier(.22,1,.36,1);
    --aeb-dur: .72s;          /* 0.45s → 0.72s 로 부드럽게 */
    --aeb-stagger: .12s;      /* 라인1 → 라인2 살짝 간격 */
  }

  /* 살짝 뒤에서 나오는 느낌: 컷팅 */
  #about-section .about-extra-block{ overflow: hidden; }

  /* 1) aeb-line1 + aeb-line2: 위→아래 (거리↓, 시간↑, 블러→선명) */
  #about-section .aeb-line1,
  #about-section .aeb-line2{
    opacity: 0;
    transform: translateY(-16px);              /* -24px → -16px (부드럽게) */
    filter: blur(2px);
    transition:
      opacity var(--aeb-dur) ease,
      transform var(--aeb-dur) var(--aeb-ease),
      filter var(--aeb-dur) ease;
    will-change: opacity, transform, filter;
  }
  /* in-view 시 노출 */
  #about-section .about-extra-block.aeb-lines-inview .aeb-line1{
    opacity: 1; transform: translateY(0); filter: blur(0);
    transition-delay: 0s;
  }
  #about-section .about-extra-block.aeb-lines-inview .aeb-line2{
    opacity: 1; transform: translateY(0); filter: blur(0);
    transition-delay: var(--aeb-stagger);     /* 라인2만 살짝 늦게 */
  }

  /* 2) aeb-tagline: 오른쪽→왼쪽 (거리↓, 시간↑) */
  #about-section .aeb-tagline{
    opacity: 0;
    transform: translateX(20px);              /* 28px → 20px */
    filter: blur(2px);
    transition:
      opacity .76s ease,
      transform .76s var(--aeb-ease),
      filter .76s ease;
    will-change: opacity, transform, filter;
  }
  #about-section .aeb-tagline.is-inview{
    opacity: 1; transform: translateX(0); filter: blur(0);
  }

  /* 3) 모바일 대표 이미지: 페이드 인 + 미세 스케일 다운 */
  #about-section .about-mobile-figure img{
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .85s ease, transform .85s ease;
    will-change: opacity, transform;
  }
  #about-section .about-mobile-figure.is-inview img{
    opacity: 1; transform: scale(1);
    transition-delay: .08s;                   /* 텍스트보다 아주 살짝 뒤에 */
  }

  /* 접근성: 모션 최소화 설정 시 즉시 표시 */
  @media (prefers-reduced-motion: reduce){
    #about-section .aeb-line1,
    #about-section .aeb-line2,
    #about-section .aeb-tagline,
    #about-section .about-mobile-figure img{
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }
  }
}
/* ===== About: Desktop-only reveals ===== */
@media (min-width: 912px){
  :root{
    --about-pc-ease: cubic-bezier(.22,1,.36,1);
    --about-pc-dur: .75s;         /* 부드럽게 */
    --about-pc-stagger: .10s;     /* line1 → line2 살짝 지연 */
  }

  /* 상단에서 '뒤에서' 내려오는 컷팅 느낌 */
  #about-section .about-extra-block{ overflow: hidden; }

  /* 1) aeb-line1 + aeb-line2 : 위→아래 (부드러운 블러) */
  #about-section .aeb-line1,
  #about-section .aeb-line2{
    opacity: 0;
    transform: translateY(-18px);
    filter: blur(2px);
    transition:
      opacity var(--about-pc-dur) ease,
      transform var(--about-pc-dur) var(--about-pc-ease),
      filter var(--about-pc-dur) ease;
    will-change: opacity, transform, filter;
  }
  #about-section .about-extra-block.pc-lines-inview .aeb-line1{
    opacity: 1; transform: translateY(0); filter: blur(0);
    transition-delay: 0s;
  }
  #about-section .about-extra-block.pc-lines-inview .aeb-line2{
    opacity: 1; transform: translateY(0); filter: blur(0);
    transition-delay: var(--about-pc-stagger);
  }

  /* 2) aeb-tagline : 페이드 인 */
  #about-section .aeb-tagline{
    opacity: 0;
    transition: opacity .8s ease;
    will-change: opacity;
  }
  #about-section .aeb-tagline.pc-inview{
    opacity: 1;
  }

  /* 3) 사진/약력 : 사진 ← 오른쪽, 약력 → 왼쪽 */
  /* 사진(왼→오) */
  #about-section .about-flex-container .about-profile-image,
  #about-section .about-flex-container .about-profile-figure,
  #about-section .about-flex-container .about-profile-figure img{
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity .85s ease, transform .85s var(--about-pc-ease);
    will-change: opacity, transform;
  }
  #about-section .about-flex-container.pc-photo-inview .about-profile-image,
  #about-section .about-flex-container.pc-photo-inview .about-profile-figure,
  #about-section .about-flex-container.pc-photo-inview .about-profile-figure img{
    opacity: 1; transform: translateX(0);
  }

  /* 약력(오→왼) */
  #about-section .about-flex-container .about-profile-text{
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .85s ease, transform .85s var(--about-pc-ease);
    will-change: opacity, transform;
  }
  #about-section .about-flex-container.pc-bio-inview .about-profile-text{
    opacity: 1; transform: translateX(0);
  }
}
/* ========================================================= */
/* 추가: comparison-stack 모바일 전용 스타일 */
/* ========================================================= */

/* 화면 너비가 911px 이하일 때만 적용됩니다. */
@media (max-width: 911px) {
  .comparison-stack .layer.layer-top img {
    transform: scaleY(0.9);
    /* 기준점을 '중앙'으로 변경하여 위아래가 대칭으로 줄어들게 합니다. */
    transform-origin: center; 
  }
}