/* ============================================================
   데어무드 · 모바일청첩장 샘플 (dev)

   이 파일 하나로 동작한다(dev.css 미사용).
     0) 토큰 / 기본
     1) 페이지 골격 / 헤더
     2) 샘플 그리드 · 카드
     3) 액션 (PC hover 오버레이 ↔ 모바일 상시 노출)
     4) 모바일 (~900px)

   --fs-* / --lh-* / --ls-* 는 전역(app/commons/layout.css)에서 온다.
   ============================================================ */


/* ---------------- 0) 토큰 / 기본 ----------------
   랜딩(dev.css)과 같은 값이다. 파일을 분리하면서 필요한 것만 옮겨 왔다.
   ※ 브랜드 색을 바꿀 일이 생기면 dev.css 와 이 블록을 함께 고쳐야 한다. */

:root {
    --ld-bg:      #F9F7F6;
    --ld-surface: #FFFFFF;
    --ld-tint:    #F1EDE9;
    --ld-ink:     #17171A;
    --ld-ink-2:   rgba(60, 60, 67, 0.72);
    --ld-ink-3:   rgba(60, 60, 67, 0.50);
    --ld-line:    rgba(60, 60, 67, 0.10);
    --ld-point:   #FDD835;

    --ld-r-md: 20px;
    --ld-r-sm: 14px;

    /* 썸네일 라운드. hover 오버레이(.sp-actions)가 썸네일 위에 정확히 겹치므로
       두 곳이 같은 값을 써야 한다. 어긋나면 hover 때 모서리가 튄다. */
    --sp-thumb-r: 16px;
}

body, html {
    background: var(--ld-bg) !important;
}


/* ---------------- 1) 골격 / 헤더 ---------------- */

.sp-page {
    padding: 72px 0 120px;
}
/* 랜딩(--ld-content 1120px)보다는 넓게 쓰되 1360px까지 벌리지는 않는다.
   썸네일 하나하나가 이미 시각적으로 강해서, 크게 키우면 40장이 서로 밀어낸다.
   폭을 조이고 간격을 벌리는 쪽이 각 장을 더 잘 보이게 한다. */
.sp-wrap {
    width: min(1280px, 100% - 48px);
    margin: 0 auto;
}

/* 폭 1360px 그리드 위에 왼쪽 정렬 헤드를 두면 오른쪽이 비어 균형이 깨진다.
   가운데 정렬 + 좁은 최대폭으로 잡아 그리드와 분리된 '머리'로 읽히게 한다. */
.sp-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 680px;
    margin: 0 auto 56px;
    text-align: center;
}
/* 카테고리명은 알약으로 낮추고, 큰 글자는 문장이 가져간다.
   '모바일청첩장 샘플' 같은 명사를 40px 볼드로 세우면 라벨을 확대한 것처럼 투박해진다. */
.sp-eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--ld-surface);
    border: 1px solid var(--ld-line);
    color: var(--ld-ink-2);
    font-size: var(--fs-13);
    line-height: var(--lh-13);
    letter-spacing: var(--ls-13);
    font-weight: 700;
    white-space: nowrap;
    user-select: none;
}
.sp-title {
    margin: 0;
    color: var(--ld-ink);
    font-size: var(--fs-40);
    line-height: var(--lh-40);
    letter-spacing: var(--ls-40);
    font-weight: 700;
}
.sp-title .mute { color: rgba(60, 60, 67, 0.40); }

.sp-lead {
    margin: 0;
    color: var(--ld-ink-2);
    font-size: var(--fs-16);
    line-height: 1.7;
    letter-spacing: var(--ls-16);
    font-weight: 500;
}
.sp-lead b {
    color: var(--ld-ink);
    font-weight: 700;
}


/* ---------------- 2) 그리드 · 카드 ---------------- */

/* 강한 이미지들은 서로 붙어 있으면 경쟁한다. 간격이 곧 각 장의 숨통이다.
   행 간격을 열 간격의 2배로 크게 잡는 이유 : 카드 아래 이름이 붙어 있어서,
   행 간격이 좁으면 그 이름이 아래 줄 썸네일의 것처럼 딸려 보인다.
   100px면 이름은 자기 썸네일(8px)에 확실히 붙고 아래 줄과는 확실히 끊긴다. */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 100px 48px;
}

/* 좁은 데스크톱·태블릿 : 4열을 유지하면 카드가 200px까지 줄어
   hover 오버레이의 버튼 두 개가 들어가지 못한다. 3열로 낮춘다. */
@media only screen and (min-width: 901px) and (max-width: 1200px) {
    .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 액션 오버레이(.sp-actions)의 기준이 되므로 relative.
   바깥 간격(링크 덩어리 ↔ 버튼)은 안쪽 간격보다 넓어야 이름이 썸네일 쪽에 붙어 보인다. */
.sp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 썸네일 + 이름을 한 링크로 묶는다.
   안쪽 간격 8px < 바깥 간격 14px — 근접성만으로 '이름은 이 썸네일의 것'이 읽힌다. */
.sp-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 썸네일 : 실제 청첩장 첫 화면 비율 */
.sp-thumb {
    display: block;
    position: relative;
    aspect-ratio: 253 / 381;
    border-radius: var(--sp-thumb-r);
    overflow: hidden;
    background: var(--ld-tint) center / cover no-repeat;
    box-shadow: 0 1px 2px rgba(60, 60, 67, 0.06), 0 14px 30px -22px rgba(60, 60, 67, 0.6);
    transition: box-shadow .28s ease;
}
.sp-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
/* 카드가 살아 있다는 신호. 확대는 4%면 충분하고, 넘기면 썸네일이 잘려 보인다 */
.sp-card:hover .sp-thumb > img { transform: scale(1.04); }
.sp-card:hover .sp-thumb {
    box-shadow: 0 2px 6px rgba(60, 60, 67, 0.08), 0 26px 44px -24px rgba(60, 60, 67, 0.75);
}

/* ── 유리 재질 (Liquid Glass) ──
   썸네일 위에 얹히는 요소(배지 · 눈 아이콘)가 공유한다.
     1) 반투명 그라데이션  : 위가 밝고 아래로 옅어져 빛의 방향을 만든다
     2) backdrop saturate  : 뒤 사진의 색이 유리에 배어 나온다 — 이 인터페이스의 핵심
     3) inset 하이라이트   : 모서리에 빛이 걸리는 스페큘러
   불투명도 하한을 0.50 으로 잡은 근거 : 가장 어두운 썸네일(#1B1B1F) 위에서도
   잉크 글자 대비가 5.4:1 로 WCAG AA를 통과하는 최소값이다. 더 투명하면 4.0:1로 떨어진다. */
.sp-glass {
    background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0.66),
                rgba(255, 255, 255, 0.54));
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    /* 테두리를 흰색으로 두면 밝은 썸네일(INVITÉ·톤온톤 등) 위에서 흰색 위 흰색이 되어
       배지 자체가 사라진다. 어두운 헤어라인으로 윤곽을 만들고 그림자를 두 겹으로 깔아
       어떤 밝기의 썸네일 위에서도 '떠 있는 조각'으로 읽히게 한다. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),    /* 윗 모서리 스페큘러 */
        inset 0 0 0 1px rgba(23, 23, 26, 0.07),     /* 어두운 헤어라인 — 밝은 배경에서 윤곽 */
        0 1px 3px rgba(23, 23, 26, 0.16),           /* 밀착 그림자 */
        0 10px 22px -10px rgba(23, 23, 26, 0.45);   /* 부양 그림자 */
    color: var(--ld-ink);
}
/* backdrop-filter 미지원 환경에서는 뒤가 그대로 비쳐 글자를 못 읽는다. 불투명으로 되돌린다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sp-glass { background: rgba(255, 255, 255, 0.93); }
}

/* 조건 배지 : 사진 없이 / 큰 글씨 — 썸네일로는 알 수 없는 정보만 얹는다.
   PC는 카드가 319px라 11px 배지가 눌려 보인다. 12px + 여백으로 키운다.
   (모바일은 카드가 173px뿐이라 아래 미디어쿼리에서 11px로 되돌린다) */
.sp-badge {
    position: absolute;
    top: 13px;
    right: 13px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: var(--fs-12);
    line-height: var(--lh-12);
    letter-spacing: var(--ls-12);
    font-weight: 700;
    white-space: nowrap;
}

/* 배지는 종류와 무관하게 전부 같은 흰 유리다.
   썸네일 위에 재질이 두 종류로 섞이면 40장이 깔린 그리드가 어수선해진다. */

/* 모바일 전용 탭 신호. PC는 hover 오버레이가 그 역할을 하므로 숨긴다.
   배지와 같은 썸네일 위에 함께 뜨므로 재질을 어긋나게 두면 어수선해진다 → .sp-glass 공유 */
.sp-eye {
    display: none;
    position: absolute;
    right: 10px;
    bottom: 10px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

/* 이름은 한 줄 고정. 넘치면 말줄임 — 줄바꿈되면 카드 높이가 들쭉날쭉해진다.
   카드가 319px로 커졌으므로 15px면 캡션처럼 작게 눌린다. 16px가 균형점.
   좌우 padding을 두지 않는다. 2px만 들어가도 썸네일과 좌측 정렬선이 어긋나
   두 덩어리로 갈라져 보인다. */
.sp-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
/* 카탈로그 넘버 : 이름보다 작고 흐리게. 한 줄 안의 두 번째 톤이 캡션 덩어리를 만든다.
   tabular-nums 로 자릿수를 고정해야 세로로 번호가 흔들리지 않는다. */
.sp-num {
    flex: none;
    color: var(--ld-ink-3);
    font-style: normal;
    font-size: var(--fs-12);
    line-height: inherit;
    letter-spacing: var(--ls-12);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sp-name b {
    min-width: 0;
    color: var(--ld-ink);
    font-size: var(--fs-16);
    line-height: 1.4;
    letter-spacing: var(--ls-16);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* hover에 썸네일만 반응하면 '둘은 별개'라고 매번 확인시켜 준다. 이름도 같이 반응시킨다.
       text-decoration을 켰다 끄면 1~2px 밀리므로 색만 투명↔잉크로 바꾼다. */
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    transition: text-decoration-color .18s ease;
}
.sp-card:hover .sp-name b { text-decoration-color: var(--ld-ink); }


/* ---------------- 3) 액션 ----------------
   마크업은 한 벌이고 위치만 CSS로 갈린다.
   PC   : 썸네일 영역과 같은 박스를 덮고 hover 때만 보인다.
   모바일: 카드 맨 아래에 그냥 흐른다(hover가 없으니 상시 노출).
   ------------------------------------------------------ */

/* 버튼을 가운데 띄운다.
   PC 카드가 319×480px로 세로가 길어, 하단 고정이면 카드 위쪽에서 진입했을 때
   버튼까지 400px 가까이 내려가야 한다. 중앙이면 어느 지점에서 들어와도 이동거리가 절반이다.
   썸네일 아래쪽엔 청첩장 자체 텍스트(이름·날짜)가 몰려 있어 겹침도 피할 수 있다. */
.sp-actions {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 253 / 381;   /* 썸네일과 같은 박스를 만들어 정확히 겹친다 */
    display: flex;
    flex-direction: column;             /* 세로 배열 : 카드가 세로로 길어 위아래 여백이 넉넉하다 */
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border-radius: var(--sp-thumb-r);   /* 썸네일과 반드시 같은 값 */
    /* 내용이 가운데 있으므로 아래로 쏠린 그라데이션이 아니라 균일한 스크림이 맞다.
       버튼을 둘 다 밝게 가져가므로 스크림도 조금 걷어야 오버레이 전체가 무겁지 않다. */
    background: rgba(23, 23, 26, 0.36);
    opacity: 0;
    pointer-events: none;      /* 어두운 영역 클릭은 뒤 썸네일 링크로 통과 */
    transition: opacity .18s ease;
}
.sp-card:hover .sp-actions { opacity: 1; }

/* 세로로 쌓이므로 두 버튼의 폭을 고정해 좌우 끝선을 맞춘다.
   폭이 제각각이면 계단처럼 보여 한 덩어리로 안 읽힌다.
   184px 는 가장 긴 문구('이 샘플로 제작하기' ≈ 165px)에 자간·글꼴 편차 여유를 더한 값이다. */
.sp-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 42px;
    width: 184px;
    max-width: 100%;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    color: var(--ld-ink);
    font-size: var(--fs-13);
    line-height: var(--lh-13);
    letter-spacing: var(--ls-13);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;      /* 버튼만 클릭을 받는다 */
    transition: transform .15s ease, box-shadow .15s ease;
}
.sp-btn svg { flex: none; }

/* 둘 다 흰 계열이므로 색이 아니라 '채움 여부'로 위계를 만든다.
   어두운 스크림 위라 테두리만 있는 버튼과 꽉 찬 버튼이 확실히 갈린다.
   아이콘은 currentColor 라 각 버튼의 글자색을 자동으로 따라간다. */
/* 미리보기 = 검은 유리 (부). 짙은 흰 유리인 제작하기와 밝기가 정반대라 위계가 한눈에 갈린다.
   알파를 0.44~0.54 로 잡은 근거 : 스크림을 0.36 으로 걷어내면서 배경이 밝아져,
   이전 값(0.30)으로는 밝은 썸네일 위에서 흰 글자가 4.00:1 로 AA 에서 떨어진다.
   0.44 부터 5.40:1 로 통과한다. */
.sp-btn.ghost {
    background: linear-gradient(to bottom,
                rgba(23, 23, 26, 0.44),
                rgba(23, 23, 26, 0.54));
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    color: #fff;
    /* 사방을 두르는 균일한 흰 링은 유리가 아니라 '오려붙인 스티커'로 읽혀 입체감을 죽인다.
       빛은 위에서 온다 → 윗면만 밝게, 아래쪽은 안쪽 그늘로 두께를 만들고,
       바깥 그림자를 밀착 + 부양 두 겹으로 깔아 떠 있게 한다. */
    box-shadow:
        inset 0 1.5px 0.5px rgba(255, 255, 255, 0.40),   /* 윗면 하이라이트 */
        inset 0 -10px 14px -12px rgba(0, 0, 0, 0.60),    /* 아래쪽 안쪽 그늘 = 두께 */
        0 2px 4px rgba(0, 0, 0, 0.28),                   /* 밀착 그림자 */
        0 10px 24px -10px rgba(0, 0, 0, 0.55);           /* 부양 그림자 */
}
/* backdrop-filter 미지원 환경 : 투과가 없으면 너무 옅어 글자가 묻힌다. 불투명하게 굳힌다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sp-btn.ghost { background: rgba(23, 23, 26, 0.68); }
}
/* 제작하기 = 짙은 유리 (주). 거의 흰색까지 채워 앞으로 나오게 한다. */
.sp-btn.primary {
    background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0.94),
                rgba(255, 255, 255, 0.86));
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: var(--ld-ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),       /* 윗 모서리 스페큘러 */
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),  /* 흰 유리 테두리 = 채움형 */
        0 8px 22px -8px rgba(0, 0, 0, 0.45);        /* 깊은 그림자 = 더 앞에 떠 보임 */
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sp-btn.primary { background: rgba(255, 255, 255, 0.97); }
}
.sp-btn:hover { transform: translateY(-1px); }
.sp-btn.ghost:hover {
    background: linear-gradient(to bottom,
                rgba(23, 23, 26, 0.56),
                rgba(23, 23, 26, 0.66));
    box-shadow:
        inset 0 1.5px 0.5px rgba(255, 255, 255, 0.52),
        inset 0 -10px 14px -12px rgba(0, 0, 0, 0.65),
        0 2px 5px rgba(0, 0, 0, 0.30),
        0 14px 30px -10px rgba(0, 0, 0, 0.6);
}
.sp-btn.primary:hover {
    background: rgba(255, 255, 255, 0.99);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        0 10px 26px -8px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .sp-actions, .sp-btn, .sp-thumb, .sp-thumb > img, .sp-name { transition: none; }
    .sp-card:hover .sp-thumb > img { transform: none; }
}


/* ---------------- 4) 모바일 (~900px) ---------------- */

@media only screen and (max-width: 900px) {

    .sp-page { padding: 32px 0 64px; }
    .sp-wrap { width: min(100%, 100% - 32px); }

    .sp-head { gap: 12px; margin-bottom: 26px; }

    .sp-title {
        font-size: var(--fs-24);
        line-height: 1.42;
        letter-spacing: var(--ls-24);
    }
    .sp-lead {
        font-size: var(--fs-14);
        line-height: 1.65;
        letter-spacing: var(--ls-14);
    }

    /* 1열이면 30~56개가 화면 수십 개 분량이 된다. 2열로 훑는 비용을 절반으로.
       행 간격은 넉넉히 : 카드 높이가 330px대인데 22px로 붙여두면 위아래 줄이 한 덩어리로
       뭉쳐 보여 어느 이름이 어느 썸네일 것인지 순간 헷갈린다. 열 간격(12px)의 3배로 벌린다. */
    .sp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 44px 12px;
    }
    .sp-card { gap: 12px; }
    .sp-link { gap: 7px; }
    .sp-thumb { border-radius: var(--ld-r-sm); }
    /* PC에서 키운 값을 되돌린다. 카드가 173px이라 그대로 두면 배지가 썸네일을 덮는다 */
    /* 카드가 173px뿐이라 배지가 썸네일 폭의 절반 가까이 차지한다. PC보다 한 단 작게.
       (앞서 안 보이던 원인은 크기가 아니라 윤곽이었고, 그건 .sp-glass 의 헤어라인·그림자가 해결한다) */
    .sp-badge {
        top: 9px;
        right: 9px;
        padding: 5px 10px;
        font-size: var(--fs-11);
        line-height: var(--lh-11);
        letter-spacing: var(--ls-11);
    }
    /* 카드 폭이 173px이라 14px가 상한. 15px면 8자 이름부터 말줄임이 걸린다.
       번호가 자리를 먹으므로 간격도 함께 줄인다. */
    .sp-name { gap: 6px; }
    .sp-name b {
        font-size: var(--fs-14);
        letter-spacing: var(--ls-14);
    }
    .sp-num {
        font-size: var(--fs-11);
        letter-spacing: var(--ls-11);
    }

    /* hover가 없으므로 오버레이를 풀고 카드 아래에 그대로 흐르게 둔다 */
    .sp-actions {
        position: static;
        flex-direction: row;   /* PC의 세로 배열을 되돌린다 */
        aspect-ratio: auto;
        margin-top: auto;
        padding: 0;
        border-radius: 0;
        background: none;
        opacity: 1;
        pointer-events: auto;
    }
    .sp-eye { display: flex; }

    /* 미리보기 버튼은 지운다. 썸네일 탭이 이미 같은 동작이라 카드마다 두 번 말하는 셈이고,
       버튼이 절반으로 줄면서 그리드가 훨씬 조용해진다. */
    .sp-btn.ghost { display: none; }

    /* 노란색(--ld-point)은 랜딩에서 '단 하나의 주요 CTA'에 쓰는 색이라 40개가 깔리면
       브랜드 색이 벽지가 되고 썸네일보다 먼저 눈에 들어온다.
       여기서 못 눌러도 썸네일 → 청첩장 안에 같은 CTA가 있으므로,
       이 버튼은 '지름길'일 뿐이다. 흰 버튼으로 낮춰도 전환 경로가 끊기지 않는다.
       배경(--ld-bg #F9F7F6) 위 흰색은 거의 구분되지 않아 테두리가 버튼 역할을 진다. */
    .sp-btn.primary {
        background: var(--ld-surface);
        color: var(--ld-ink);
        box-shadow: inset 0 0 0 1px rgba(60, 60, 67, 0.18);
        /* 모바일은 밝은 배경 위에 그냥 놓인다. 투과시킬 대상이 없어 blur 는 낭비다. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    /* 모바일은 오버레이가 아니라 카드 하단에 그냥 놓이므로 폭을 꽉 채운다.
       PC에서 고정한 width: 168px 를 auto 로 되돌려야 flex 가 늘어난다. */
    .sp-btn {
        flex: 1;
        width: auto;
        min-width: 0;
        height: 38px;
        gap: 4px;
        padding: 0 10px;
        font-size: var(--fs-13);
        letter-spacing: var(--ls-13);
        font-weight: 500;
    }
    /* 모바일엔 hover가 없다. 잔여 hover 스타일이 탭 후 남아 테두리가 사라지지 않도록 고정 */
    .sp-btn:hover { transform: none; }
    .sp-btn.primary:hover { box-shadow: inset 0 0 0 1px rgba(60, 60, 67, 0.18); }
}