/* ==========================================================================
   소개 /about — 페이지 전용 스타일 (공용 컴포넌트: site.css · docs/front-components.md)
   본문은 공용 블록(.blocks)이 그린다. 블록은 덮어쓰지 않고, 페이지 틀과 '더 알아보기'만 다룬다.
   ========================================================================== */

/* 본문 — 화면 끝까지 닿는 머리 이미지 다음, 첫 글까지 한 번 더 숨을 둔다 */
.about-body { padding-top: clamp(32px, 4.5vw, 80px); }

/* ---------------------------------------------------------------- 더 알아보기 */
/* Home 피부 고민 목록과 같은 헤어라인 행: 큰 이름 · 영문 · 한 줄 설명 · 선 화살표 */
.about-next { padding-bottom: var(--section-y); }
.about-next__eyebrow { margin-bottom: clamp(36px, 4vw, 64px); }
.about-next__list { border-top: 1px solid var(--line); }
.about-next__list li + li { transition-delay: .12s; }

.about-next__link {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: center;
    padding: clamp(30px, 3.2vw, 52px) 0;
    border-bottom: 1px solid var(--line);
    transition: color .4s var(--ease);
}
.about-next__title {
    grid-column: 1 / span 5;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 18px;
}
.about-next__label {
    font-size: clamp(26px, 2.7vw, 46px);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -.03em;
}
.about-next__en {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.about-next__text {
    grid-column: 7 / span 5;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.8;
    color: var(--ink-2);
    transition: color .4s var(--ease);
}
.about-next__arrow {
    grid-column: 12;
    justify-self: end;
    width: 28px;
    transition: transform .45s var(--ease);
}

@media (hover: hover) {
    .about-next__list:hover .about-next__link,
    .about-next__list:hover .about-next__text { color: var(--ink-3); }
    .about-next__list .about-next__link:hover { color: var(--ink); }
    .about-next__list .about-next__link:hover .about-next__text { color: var(--ink-2); }
    .about-next__link:hover .about-next__arrow { transform: translateX(8px); }
}

@media (max-width: 767px) {
    .about-next__link {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 10px;
        padding: 28px 0;
    }
    .about-next__title { grid-column: 1; }
    .about-next__text { grid-column: 1; grid-row: 2; }
    .about-next__arrow { grid-column: 2; grid-row: 1 / span 2; width: 22px; }
}