/* ================================
   ABOUT SECTION
   ================================ */
#about {
    margin: 70px 0 0 0;
    /* 기본 폰트 설정 (상속용) */
    font-family: 'Abel', sans-serif;
    font-size: 16px;
    max-width: 800px; /* 최대 폭 제한 */
}

/* Quote Section */
.quote img {
    padding: 0;
    width: 150px;
}

.quote p {
    color: darkslategray;
    font-style: italic;
    text-decoration: underline;
    text-decoration-color: lightgray;
}

/* Reading Section */
#reading_in_about {
    padding-bottom: 60px;
}

#reading_in_about a {
    color: orangered;
}

/* ================================
   CONTACT SECTION
   ================================ */
#contact {
    padding-bottom: 60px;
}

#contact .socialmedia a {
    color: cadetblue;
    padding: 10px;
}

/* ================================
   CLIENTS GRID - 모든 화면 크기 공통
   ================================ */
ul.clients-grid {
    list-style: none;
    padding: 0;
    margin: 20px auto 0 auto; /* 중앙 정렬을 위해 좌우 margin을 auto로 수정 */
    display: grid;
    row-gap: 12px;
    max-width: 600px; /* 최대 폭 제한 */
}

ul.clients-grid li {
    /* about 섹션과 동일한 폰트 스타일 */
    font-family: inherit; /* #about에서 상속 */
    font-size: 16px; /* about과 동일한 크기 */
    line-height: 1.6;

    letter-spacing: 0.5px;
}

ul.clients-grid li[data-country]::after {
    content: attr(data-country);
    display: inline-block;
    color: lightgray;
    font-size: 12px;
    margin-left: 6px;
    font-weight: normal;
}


.email-copy {
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.email-tooltip {
  position: absolute;
  bottom: 100%;              /* was 125% – closer to the text now */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  transform-origin: bottom center;
  z-index: 10;
}

.email-tooltip.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-1px); /* slightly less offset */
}


/* ================================
   RESPONSIVE DESIGN
   ================================ */

/* Mobile: 620px 이하 - 1단 레이아웃 */
@media (max-width: 620px) {
    #about {
        max-width: 100%;
        position: static;
        left: 0;
        right: 0;
        display: block;
    }
    
    #about .profile img {
        display: inline-block;
        position: inherit;
        object-fit: cover;
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }
    
    .quote {
        padding: 10px 20px 20px 20px;
        margin: 0;
    }
    
    ul.clients-grid {
        grid-template-columns: 1fr; /* 모바일: 1단 */
        /* 모바일에서는 좌우 여백을 조금 주는 것이 보기 좋을 수 있습니다 */
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* Tablet: 621px ~ 760px - 2단 레이아웃 */
@media (min-width: 621px) and (max-width: 760px) {
    #about {
        position: relative;
    }
    
    #about img {
        max-width: 600px;
        padding: 10px;
    }
    
    .quote {
        padding: 35px;
        margin: 0;
    }
    
    ul.clients-grid {
        grid-template-columns: 1fr 1fr; /* 태블릿: 2단 */
        column-gap: 30px;
    }
}

/* Desktop: 761px 이상 - 2단 레이아웃 */
@media (min-width: 761px) {
    #about {
        position: relative;
    }
    
    #about img {
        max-width: 600px;
        padding: 10px;
    }
    
    .quote {
        padding: 10px 40px 50px 40px;
        margin: 0;
    }
    
    ul.clients-grid {
        grid-template-columns: 1fr 1fr; /* 데스크톱: 2단 */
        column-gap: 30px;
    }
}