/* ============================================================
   메인페이지 — 에디토리얼(패션 매거진) 레이아웃

   콘텐츠가 아이돌·배우 포트레이트라 이미지가 주인공이 되도록 설계했다.
   타이포는 절제하고, 카드는 인물명(캡션)과 스타일명(헤드라인) 두 줄만 남긴다.

   이 파일은 hair_news.css 없이 단독으로 동작한다 — 메인의 compact 카드가 쓰는
   .hair-news-* 클래스 스타일을 여기서 전부 소유한다. (헤어뉴스 페이지는
   기존대로 hair_news.css 를 쓰므로 서로 간섭하지 않는다.)
   ============================================================ */

.ed {
    --ink: #0f0f0f;
    --ink-dim: #6f6f6f;
    --ink-faint: #a8a5a0;
    --line: #ececea;
    --line-strong: #d6d3ce;
    --accent: #0f0f0f;       /* 강조색도 검정으로 통일 */
    /* 한글은 전부 고딕(Pretendard) 하나로. 디스플레이/본문 구분은 크기와 굵기로만 준다. */
    --serif: var(--font-sans);
    --sans: var(--font-sans);

    position: relative;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 64px) 120px;
    color: var(--ink);
    font-family: var(--sans);
}

/* 종이 질감 — 평면적인 검정 배경에 깊이를 준다 */
.ed-grain {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ed > *:not(.ed-grain) {
    position: relative;
    z-index: 1;
}

/* ---------- 매스트헤드 ---------- */
.ed-masthead {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 30px 0 0;
}

.ed-rule {
    flex: 1;
    height: 1px;
    background: var(--line);
}

.ed-issue {
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ink-dim);
    white-space: nowrap;
}

/* ---------- 히어로 ---------- */
.ed-hero {
    padding: clamp(44px, 7vw, 92px) 0 clamp(36px, 5vw, 64px);
}

/* max-width 에 ch 를 쓰지 않는다 — 부모 폰트 크기 기준으로 계산돼 큰 제목이 좁은 박스에
   갇히고, 한글은 라틴과 글리프 폭이 달라 예측도 어긋난다. em 은 요소 자신의 크기 기준이라
   폰트 크기가 변해도 줄당 글자 수가 일정하게 유지된다. */
.ed-hero-title {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(38px, 6.4vw, 88px);
    line-height: 1.06;   /* 한글 받침이 잘리지 않을 만큼은 확보한다 */
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 11em;
    text-wrap: balance;
}

.ed-hero-sub {
    margin: clamp(18px, 2.2vw, 28px) 0 0;
    max-width: 32em;
    font-size: clamp(13px, 1.15vw, 15px);
    line-height: 1.75;
    color: var(--ink-dim);
    letter-spacing: 0.01em;
}

/* ---------- 그리드 ---------- */
.ed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(30px, 3.4vw, 58px) clamp(18px, 2.2vw, 34px);
    border-top: 1px solid var(--line-strong);
    padding-top: clamp(30px, 3.4vw, 54px);
}

.ed-cell {
    position: relative;
    opacity: 0;
    transform: translateY(18px);
    animation: ed-rise 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    /* 로드 시 순차적으로 떠오르는 스태거. 12장 넘어가면 지연을 묶어 체감 지연을 막는다 */
    animation-delay: calc(min(var(--i), 11) * 55ms);
}

@keyframes ed-rise {
    to {
        opacity: 1;
        transform: none;
    }
}

/* 매거진 인덱스 번호 */
.ed-num {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    font-family: var(--serif);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--ink-faint);
    transition: color 0.4s ease;
}

.ed-cell:hover .ed-num {
    color: var(--ink);
}

/* ---------- 카드 ---------- */
.ed-cell .hair-news-card {
    position: relative;
    display: block;
    padding-top: 22px;
}

.ed-cell .hair-news-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--muted-bg, #fafaf8);
}

.ed-cell .hair-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.92) contrast(1.04);
    transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1), filter 0.6s ease;
}

.ed-cell:hover .hair-news-thumb img {
    transform: scale(1.055);
    filter: saturate(1) contrast(1.04);
}

.ed-cell .hair-news-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ink-faint);
    font-size: 22px;
}

/* 이미지 하단에서 올라오는 그라데이션 — CTA 가 사진 위에 얹혀도 읽히게 한다 */
.ed-cell .hair-news-thumb::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 46%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.ed-cell:hover .hair-news-thumb::after {
    opacity: 1;
}

/* ---------- 캡션 ---------- */
.ed-cell .hair-news-card-body {
    padding: 15px 0 0;
}

.ed-cell .hair-news-person {
    display: block;
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 7px;
}

.ed-cell .hair-news-card-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(19px, 1.5vw, 23px);
    line-height: 1.24;
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 제목 아래로 그어지는 헤어라인 */
.ed-cell .hair-news-card-title::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    margin-top: 11px;
    background: var(--line-strong);
    transition: width 0.62s cubic-bezier(0.19, 1, 0.22, 1);
}

.ed-cell:hover .hair-news-card-title::after {
    width: 100%;
}

/* ---------- CTA ----------
   버튼은 템플릿에서 .hair-news-thumb 안에 렌더된다(compact 전용). 썸네일이 곧
   포지셔닝 컨텍스트라 bottom 으로 바로 붙일 수 있다. */
.ed-cell .hair-news-thumb .hair-news-try-btn {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    transform: translateY(14px);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border: none;
    border-radius: 2px;
    background: var(--ink);
    color: #ffffff;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.25s ease, color 0.25s ease;
}

.ed-cell:hover .hair-news-thumb .hair-news-try-btn,
.ed-cell .hair-news-thumb .hair-news-try-btn:focus-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.ed-cell .hair-news-thumb .hair-news-try-btn:hover {
    background: #000000;
    color: #ffffff;
}

.ed-cell .hair-news-thumb .hair-news-try-btn i {
    font-size: 11px;
}

/* ---------- 더보기 ---------- */
.ed-more {
    display: flex;
    justify-content: center;
    margin-top: clamp(56px, 6vw, 96px);
}

.ed-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--line-strong);
    color: var(--ink);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.35s ease, gap 0.35s ease;
}

.ed-more-btn:hover {
    border-color: var(--ink);
    gap: 22px;
}

.ed-more-arrow {
    font-size: 14px;
    line-height: 1;
}

/* ---------- 빈 상태 ---------- */
.ed-empty {
    padding: 120px 0;
    text-align: center;
    color: var(--ink-dim);
    font-family: var(--serif);
    font-size: 20px;
    border-top: 1px solid var(--line);
}

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
    .ed-hero {
        max-width: none;
    }

    .ed-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }
}

@media (max-width: 560px) {
    .ed {
        /* 하단 고정 메뉴에 콘텐츠가 가리지 않도록 여유 */
        padding-bottom: 110px;
    }

    .ed-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 14px;
    }

    .ed-cell .hair-news-card-title {
        font-size: 16px;
    }

    .ed-cell .hair-news-person {
        font-size: 9px;
        letter-spacing: 0.2em;
    }

    /* 카드 폭이 150px 안팎이라 사진 위에 얹으면 버튼이 두 줄로 깨지고 얼굴을 가린다.
       좁은 화면에서는 흐름에 되돌려 캡션 아래에 둔다. */
    .ed-cell .hair-news-thumb .hair-news-try-btn {
        position: static;
        margin-top: 10px;
        padding: 10px 8px;
        font-size: 11px;
        gap: 5px;
    }

    /* 버튼이 흐름에 들어오므로 썸네일 높이는 비율 고정을 풀고 내용에 맞춘다.
       3:4 비율은 이미지 자신이 갖는다. */
    .ed-cell .hair-news-thumb {
        aspect-ratio: auto;
        background: none;
    }

    .ed-cell .hair-news-thumb img {
        aspect-ratio: 3 / 4;
        height: auto;
    }

    .ed-cell .hair-news-thumb::after {
        display: none;
    }
}

/* 호버가 없는 환경에서는 CTA 를 항상 노출한다.
   (hover: none) 만 믿지 않는 이유: 터치 노트북·트랙패드 태블릿 등 일부 기기가
   hover 가능으로 보고해, 그 경우 핵심 전환 버튼이 영영 안 보이게 된다.
   폭 조건을 함께 걸어 좁은 화면에서는 무조건 보이도록 한다. */
@media (hover: none), (max-width: 900px) {
    .ed-cell .hair-news-thumb .hair-news-try-btn {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        /* 좌우 12px 인셋을 없애 카드 폭과 정확히 같게 만든다(썸네일 = 카드 폭). */
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
    }

    .ed-cell .hair-news-thumb::after {
        opacity: 1;
        height: 34%;
    }
}

/* ============================================================
   상세 모달 — 카드 클릭 시
   그리드와 같은 규칙(흑백, 헤어라인, 여백)을 쓰되 사진을 크게 보여준다.
   ============================================================ */

.ed-cell .hair-news-card--compact {
    cursor: pointer;
    outline: none;
}

.ed-cell .hair-news-card--compact:focus-visible {
    outline: 1px solid #0f0f0f;
    outline-offset: 6px;
}

body.ed-modal-open {
    overflow: hidden;
}

.ed-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 4vw, 48px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.ed-modal.is-open {
    opacity: 1;
}

.ed-modal[hidden] {
    display: none;
}

.ed-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 12, 0.72);
    -webkit-backdrop-filter: saturate(120%) blur(3px);
    backdrop-filter: saturate(120%) blur(3px);
}

.ed-modal-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    /* 행이 내용 크기로 늘어나지 않게 minmax(0,1fr) 로 잡는다. 이때 높이가 확정돼 있어야
       하므로 max-height 가 아니라 height 를 준다 — max-height 만으로는 행이 내용대로
       792px 까지 커지고 패널이 overflow:hidden 으로 잘라내기만 해서, 사진이 넘치고
       정보 영역은 scrollHeight == clientHeight 라 스크롤 자체가 안 걸렸다. */
    grid-template-rows: minmax(0, 1fr);
    width: min(1080px, 100%);
    height: min(88vh, 820px);
    background: #ffffff;
    border: 1px solid #e6e4e0;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    transform: translateY(12px) scale(0.985);
    transition: transform 0.42s cubic-bezier(0.19, 1, 0.22, 1);
}

.ed-modal.is-open .ed-modal-panel {
    transform: none;
}

.ed-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    /* 스크롤되는 스펙 목록이 이 버튼 아래를 지나가므로 배경은 불투명해야 읽힌다. */
    background: #ffffff;
    color: #0f0f0f;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ed-modal-close:hover {
    background: #0f0f0f;
    color: #ffffff;
}

.ed-modal-close:focus-visible {
    outline: 1px solid #0f0f0f;
    outline-offset: 3px;
}

/* 모달을 열 때 포커스를 받는 컨테이너. 링은 띄우지 않는다(컨트롤이 아니라 영역이라
   테두리가 그려지면 패널에 네모가 덧대진 것처럼 보인다). */
.ed-modal-panel:focus {
    outline: none;
}

/* ---------- 좌: 사진 ----------
   원본 비율 그대로 전체가 보이게 한다(contain). 남는 자리는 배경색이 매트처럼 채운다 —
   인물 사진이라 crop 하면 얼굴/헤어가 잘려서 정작 봐야 할 게 안 보인다. */
.ed-modal-figure {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f4f2;
    overflow: hidden;
    /* 그리드 아이템 기본값 min-height:auto 를 풀어야 행 높이에 맞춰 줄어든다. */
    min-height: 0;
    min-width: 0;
}

.ed-modal-figure[hidden] {
    display: none;
}

.ed-modal-figure img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---------- 우: 정보 ---------- */
.ed-modal-body {
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3vw, 44px) clamp(22px, 2.6vw, 40px);
    overflow: hidden;
    /* min-height:0 이 없으면 내용이 행을 밀어 늘려 스크롤이 안 걸린다. */
    min-height: 0;
    min-width: 0;
}

/* 실제로 스크롤되는 영역. 액션은 이 밖에 있어 늘 보인다. */
.ed-modal-scroll {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 자간/대문자 변환은 라틴 문자 전제의 에디토리얼 관용구다. 한글에 그대로 걸면
   "이 동 욱" 처럼 낱자가 흩어져 읽힌다. 기본은 한글 기준으로 좁게 두고,
   영문 로케일에서만 넓은 자간 + 대문자를 준다. */
/* 닫기 버튼(우상단)과 제목이 겹치지 않게 자리를 비워 둔다. */
.ed-modal-head {
    padding-right: 46px;
}

.ed-modal-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: #6f6f6f;
    margin-bottom: 12px;
}

html[lang="en"] .ed-modal-eyebrow {
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.ed-modal-eyebrow[hidden] {
    display: none;
}

.ed-modal-title {
    margin: 0;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #0f0f0f;
}

.ed-modal-context {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #6f6f6f;
}

.ed-modal-context[hidden] {
    display: none;
}

/* 스펙 표 — 라벨/값 2열 */
.ed-modal-specs {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
    gap: 0;
    margin: 0;
    border-top: 1px solid #ececea;
}

.ed-modal-specs dt,
.ed-modal-specs dd {
    padding: 11px 0;
    border-bottom: 1px solid #ececea;
    font-size: 13px;
    line-height: 1.5;
}

.ed-modal-specs dt {
    font-size: 12px;
    letter-spacing: 0;
    color: #a8a5a0;
    padding-right: 20px;
    align-self: center;
}

html[lang="en"] .ed-modal-specs dt {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ed-modal-specs dd {
    margin: 0;
    color: #0f0f0f;
}

/* ---------- 액션 ---------- */
/* 스크롤 영역 밖의 고정 푸터. 스펙이 길어도 CTA 는 늘 보인다. */
.ed-modal-actions {
    flex: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ececea;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ffffff;
}

.ed-modal-try {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 15px 18px;
    border: none;
    border-radius: 2px;
    background: #0f0f0f;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.ed-modal-try:hover {
    background: #000000;
}

.ed-modal-try[hidden] {
    display: none;
}

.ed-modal-try i {
    font-size: 12px;
}

.ed-modal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.ed-modal-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6f6f6f;
    font-size: 12px;
    letter-spacing: 0;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.ed-modal-link:hover {
    color: #0f0f0f;
    border-color: #0f0f0f;
}

html[lang="en"] .ed-modal-link {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ed-modal-link i {
    font-size: 10px;
}

/* ---------- 모달 반응형 ---------- */
@media (max-width: 860px) {
    .ed-modal {
        padding: 0;
        align-items: stretch;
    }

    /* 세로로 쌓고, 스크롤은 패널이 통째로 맡는다(사진 + 정보가 한 흐름).
       데스크톱의 minmax(0,1fr) 을 여기서 auto 로 되돌린다. */
    .ed-modal-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border: none;
        overflow-y: auto;
    }

    .ed-modal-figure {
        max-height: 52vh;
        padding: 10px 0;
    }

    .ed-modal-figure img {
        max-height: 52vh;
    }

    /* 모바일은 패널이 통째로 스크롤하므로 안쪽 스크롤 영역을 풀어준다. */
    .ed-modal-body,
    .ed-modal-scroll {
        overflow: visible;
        min-height: 0;
    }
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .ed-cell {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .ed-cell .hair-news-thumb img,
    .ed-cell .hair-news-card-title::after,
    .ed-cell .hair-news-thumb .hair-news-try-btn {
        transition: none;
    }

    .ed-modal,
    .ed-modal-panel {
        transition: none;
    }

    .ed-modal-panel {
        transform: none;
    }
}