/* ────────────────────────────────────────────────────────────────────────
   리뷰키퍼 공개 페이지(about/guide/...) 공통 스타일
   ────────────────────────────────────────────────────────────────────────
   ▸ Pretendard 폰트 import
   ▸ 핑크/크림 톤 CSS 변수 (--rk-*)
   ▸ 유틸 클래스: .bg-cream, .text-ink, .accent-line ...
   ▸ 애니메이션: .reveal, .reveal-stagger, .card-lift, .animate-float, .pulse-soft, .heart-particle, .step-number, .dashed-line-path
   ▸ prefers-reduced-motion 감지 시 모든 애니메이션 비활성

   사용처:
     <link rel="stylesheet" href="/css/public/landing.css">
   포함되는 곳: templates/public/about.html, guide.html, (확장 시 privacy/terms/contact)
──────────────────────────────────────────────────────────────────────── */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
    --rk-cream:        #FFF8F0;
    --rk-cream-deep:   #FCE9DA;
    --rk-pink-bg:      #FFF1F0;
    --rk-pink-soft:    #FFCFCF;
    --rk-pink:         #FF8FA3;
    --rk-pink-strong:  #F76679;
    --rk-ink:          #3D2E27;
    --rk-ink-soft:     #6B5B52;
}

body {
    font-family: 'Pretendard', sans-serif;
    background-color: #FFFDFB;
    color: var(--rk-ink);
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* ─── 핑크/크림 유틸 ─── */
.bg-cream      { background-color: var(--rk-cream); }
.bg-cream-grad { background: linear-gradient(180deg, #FFF8F0 0%, #FFF1F0 100%); }
.bg-pink-soft  { background-color: var(--rk-pink-bg); }
.text-ink      { color: var(--rk-ink); }
.text-ink-soft { color: var(--rk-ink-soft); }
.text-rk-pink  { color: var(--rk-pink-strong); }
.bg-rk-pink    { background-color: var(--rk-pink); }
.bg-rk-pink:hover { background-color: var(--rk-pink-strong); }
.ring-rk-pink  { box-shadow: 0 8px 24px rgba(247, 102, 121, 0.25); }

/* 큰 라운드 */
.rounded-super { border-radius: 2.5rem; }

/* ─── 핑크 강조 언더라인 ─── */
.accent-line {
    background-image: linear-gradient(transparent 60%, var(--rk-pink-soft) 60%, var(--rk-pink-soft) 92%, transparent 92%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0 2px;
}

/* ─── 스크롤 페이드인 ─── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* 자식 stagger (최대 6개) */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-stagger.is-visible > * {
    opacity: 1;
    transform: none;
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }

/* ─── 카드 hover lift ─── */
.card-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(247, 102, 121, 0.10);
}

/* ─── 히어로 배경 부드러운 블롭 ─── */
.hero-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(60px);
    opacity: 0.55;
    pointer-events: none;
}

/* ─── 데모 카드 라벨 pulse ─── */
@keyframes pulseSoft {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
.pulse-soft { animation: pulseSoft 1.8s ease-in-out infinite; }

/* ─── 둥둥 떠다니는 마스코트 ─── */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(3deg); }
}
.animate-float {
    animation: float 6s ease-in-out infinite;
    will-change: transform;
    transform-origin: center center;
}
/* ⚠️ .reveal 과 같은 요소에 .animate-float 를 두면
       .reveal.is-visible { transform: none } 이 keyframe transform 을 덮어 멈춤.
       반드시 별도 wrapper 로 분리할 것 — guide/about 의 .float-wrap 참고.
   ▸ .float-wrap 은 inline-block 이라 부모에 text-center 가 있어야 가운데 정렬됨.
     (mx-auto 는 inline-block 에 동작하지 않음) */
.float-wrap {
    display: inline-block;
    transform-origin: center center;
    /* 마스코트가 자식 mascot-slot 의 크기를 그대로 따라가도록 */
    line-height: 0;
}

/* ─── 핑크 글로우 (CTA 버튼 등) ─── */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 143, 163, 0.5); }
    50%      { box-shadow: 0 0 0 16px rgba(255, 143, 163, 0); }
}
.animate-pulse-glow { animation: pulse-glow 2.6s ease-in-out infinite; }

/* ─── 살짝 튀어오르는 아이콘 (cloud arrow 등) ─── */
@keyframes bounce-soft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.animate-bounce-soft { animation: bounce-soft 1.8s ease-in-out infinite; }

/* ─── 마스코트 슬롯 — 사용자가 /image/mascot-*.png 넣으면 그 자리에 표시 ─── */
.mascot-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--rk-pink-soft);
    border: 4px solid #fff;
    border-radius: 9999px;
    box-shadow: 0 16px 32px -8px rgba(255, 143, 163, 0.25);
}
.mascot-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* 이미지 로드 전/실패 시 보이는 fallback 아이콘. 이미지가 정상이면 가려짐. */
.mascot-slot .mascot-fallback {
    font-size: 3rem;
    line-height: 1;
}

/* ─── 하트 파티클 (guide.html 배경) ─── */
@keyframes heart-particle {
    0%   { transform: translateY(0) scale(0); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateY(-100vh) scale(1.5) rotate(45deg); opacity: 0; }
}
.heart-particle {
    position: absolute;
    pointer-events: none;
    color: var(--rk-pink);
    animation: heart-particle 10s linear infinite;
}

/* ─── 단계 번호 (guide.html) ─── */
.step-number {
    font-family: 'Pretendard', sans-serif;
    text-shadow: 2px 2px 0px var(--rk-pink-soft);
}

/* ─── 점선 path (guide.html 제목 강조) ─── */
.dashed-line-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s ease-out;
}
.dashed-line-path.is-visible {
    stroke-dashoffset: 0;
}

/* ─── 핑크 그라데이션 ─── */
@keyframes gradient-bg {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.animate-gradient {
    background: linear-gradient(-45deg, #FFD6E0, #FF85A1, #FFFBF2, #FFD6E0);
    background-size: 400% 400%;
    animation: gradient-bg 15s ease infinite;
}

/* ─── pink 그림자 ─── */
.pink-shadow { box-shadow: 0 10px 25px -5px rgba(255, 133, 161, 0.2); }

/* ─── 접근성 — 모션 비선호 사용자 ─── */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-stagger > *,
    .card-lift,
    .pulse-soft, .animate-float, .heart-particle,
    .dashed-line-path, .animate-gradient {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}