/* ============================================
   CSS 변수: 테마는 여기서 한 번에 관리
   ============================================ */
:root {
    /* 색상 */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-text: #191f28;
    --color-text-muted: #4e5968;  /* 노안 고려: 흰 배경 대비 7:1 이상 */
    --color-border: #e5e7eb;

    --color-primary: #dce8fd;
    --color-primary-hover: #cbdcfb;

    --color-kakao-bg: #fee500;
    --color-kakao-text: #191919;
    --color-kakao-hover: #fdd835;

    --color-error-bg: #fef2f2;
    --color-error-text: #b91c1c;
    --color-error-border: #fecaca;

    /* 간격 */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* 모양 */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* 그림자 */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);

    /* 폰트 */
    --font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans KR", Roboto, sans-serif;

    /* 모션: 앱의 모든 움직임은 이 값만 사용한다.
       Tailwind의 transition-* 유틸리티도 head 조각의 tailwind.config에서 이 값을 쓰도록 연결돼 있다 */
    --motion-fast: 150ms;      /* 색 변화, 누름 피드백 */
    --motion-base: 260ms;      /* 탭 알약 이동, 목록 등장 */
    --motion-slow: 400ms;      /* 큰 영역 등장 */
    --motion-stagger: 35ms;    /* 카드가 차례로 나타나는 간격 */
    --motion-stagger-max: 8;   /* 이 개수 이후 카드는 같이 나타난다 */
    --motion-distance: 8px;    /* 등장할 때 아래에서 올라오는 거리 */
    --motion-press-scale: 0.97;
    --motion-breathe: 1800ms;  /* 처리 중 표시가 한 번 깜빡이는 주기 */

    --ease-standard: cubic-bezier(0.2, 0, 0, 1);       /* 일반적인 상태 변화 */
    --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.15);  /* 알약처럼 위치가 바뀌는 요소, 살짝 튕김 */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);            /* 화면에 들어오는 요소 */
}

/* 동작 줄이기 설정을 켠 사용자에게는 움직임 없이 바로 바뀌게 한다 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms;
        --motion-base: 0ms;
        --motion-slow: 0ms;
        --motion-stagger: 0ms;
        --motion-distance: 0px;
        --motion-press-scale: 1;
    }
}

/* ============================================
   Reset
   ============================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}

/* ============================================
   Layout
   ============================================ */
.container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.container--top {
    min-height: auto;
    align-items: flex-start;
    flex-direction: column;
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
}

/* ============================================
   Buttons (재사용 컴포넌트)
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard),
                transform var(--motion-fast) var(--ease-standard);
}

.btn:active {
    transform: scale(var(--motion-press-scale));
}

.btn--primary {
    background-color: var(--color-primary);
    color: #1e3a8a;
    max-width: 200px;
}

.btn--primary:hover {
    background-color: var(--color-primary-hover);
}

.btn--kakao {
    background-color: var(--color-kakao-bg);
    color: var(--color-kakao-text);
    margin-bottom: var(--space-md);
}

.btn--kakao:hover {
    background-color: var(--color-kakao-hover);
}

.btn__icon {
    font-size: 1.125rem;
}

.btn-text {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-xs);
}

.btn-text:hover {
    color: var(--color-text);
}

/* ============================================
   Alert (재사용 컴포넌트)
   ============================================ */
.alert {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    margin-bottom: var(--space-md);
    border: 1px solid transparent;
}

.alert--error {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    border-color: var(--color-error-border);
}

/* ============================================
   Link (재사용 컴포넌트)
   ============================================ */
.link {
    display: inline-block;
    margin-top: var(--space-md);
    font-size: 1rem;
}

.link--muted {
    color: var(--color-text-muted);
}

.link--muted:hover {
    color: var(--color-text);
}

/* ============================================
   유틸리티
   ============================================ */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* ============================================
   모션 (재사용 컴포넌트) - 값은 :root의 --motion-*, --ease-*에서 관리
   ============================================ */

/* 누르면 살짝 눌리는 피드백: 카드, 버튼 등에 붙인다.
   Tailwind의 transition-colors와 같이 써도 transform 전환이 지워지지 않도록 html을 붙여 우선순위를 높인다 */
html .motion-press {
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: var(--motion-fast);
    transition-timing-function: var(--ease-standard);
}

html .motion-press:active {
    transform: scale(var(--motion-press-scale));
}

/* 화면에 새로 들어오는 영역 (목록, 빈 상태 안내 등).
   fill-mode를 backwards로 둬서 등장이 끝난 뒤에는 누름 피드백(transform)을 막지 않는다 */
.motion-enter {
    animation: motion-enter var(--motion-base) var(--ease-out) backwards;
}

/* 차례로 나타나는 항목: style="--i: 순번"을 함께 지정한다 */
.motion-stagger {
    animation: motion-enter var(--motion-base) var(--ease-out) backwards;
    animation-delay: calc(min(var(--i, 0), var(--motion-stagger-max)) * var(--motion-stagger));
}

@keyframes motion-enter {
    from {
        opacity: 0;
        transform: translateY(var(--motion-distance));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* 상태 탭: 왼쪽 정렬한 글자 탭. 선택된 탭 글자 아래에만 짧은 밑줄이 있고,
   밑줄은 common.js의 initStatusTabs()가 정한 --tab-x, --tab-w로 선택된 글자 밑으로 미끄러진다 */
.status-tabs {
    position: relative;
    display: flex;
    gap: 1.25rem;
}

.status-tabs__indicator {
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--tab-w, 0);
    height: 2px;
    border-radius: 2px;
    background-color: #191f28;
    transform: translateX(var(--tab-x, 0));
    transition: transform var(--motion-base) var(--ease-emphasized),
                width var(--motion-base) var(--ease-emphasized);
}

.status-tabs__button {
    position: relative;
    padding: 0.375rem 0 0.625rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #6b7684;
    transition: color var(--motion-fast) var(--ease-standard);
}

.status-tabs__button[aria-selected="true"] {
    color: #191f28;
    font-weight: 700;
}

/* 하단 내비게이션 아이콘: 현재 탭이 되면 색만 바뀌고, 바탕 알약은 .nav-indicator가 따로 그린다 */
.nav-pill {
    transition: color var(--motion-fast) var(--ease-standard);
}

/* 하단 내비게이션의 현재 탭 알약: 탭이 바뀌면 이전 탭 자리에서 새 탭 자리로 미끄러진다.
   한 칸 너비(탭 3개)의 상자를 --nav-index만큼 옮기고, 그 안 가운데에 아이콘 크기의 알약을 둔다 */
.nav-indicator {
    position: absolute;
    top: 4px;
    left: 0;
    display: flex;
    justify-content: center;
    width: calc(100% / 3);
    height: 32px;
    pointer-events: none;
    transform: translateX(calc(var(--nav-index, 0) * 100%));
    transition: transform var(--motion-base) var(--ease-emphasized),
                opacity var(--motion-fast) var(--ease-standard);
}

.nav-indicator.is-hidden {
    opacity: 0;
}

.nav-indicator__pill {
    width: 64px;   /* 아이콘(24px) + 좌우 여백(20px씩) */
    height: 100%;
    border-radius: 9999px;
    background-color: #eef3fe;
}

/* 처리 중인 요소가 천천히 숨 쉬듯 깜빡인다 (예: 사진 준비 중 아이콘) */
.motion-breathe {
    animation: motion-breathe var(--motion-breathe) ease-in-out infinite;
}

@keyframes motion-breathe {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

@media (prefers-reduced-motion: reduce) {
    .motion-breathe {
        animation: none;
    }
}

/* 헤더의 대표 아이콘: 홈 화면처럼 흰 타일에 담아 살짝 기울인다 */
.brand-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px rgba(25, 31, 40, 0.05), 0 4px 12px rgba(25, 31, 40, 0.08);
    transform: rotate(6deg);
    transition: transform var(--motion-fast) var(--ease-standard);
}

.brand-tile:hover {
    transform: rotate(0deg);
}

/* 배경의 은은한 도형: 흐릿한 복숭아빛 원과 라벤더빛 둥근 네모가 아주 천천히 떠다닌다.
   보이는 듯 마는 듯해야 하므로 흐림을 크게 주고 움직임은 수십 초에 걸쳐 조금만 준다 */
.ambient {
    display: none;  /* 임시로 숨김: 도형 없이 보려고 끈 상태. 다시 켜려면 이 줄만 지운다 */
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.ambient__shape {
    position: absolute;
    filter: blur(48px);
    will-change: transform;
}

.ambient__shape--circle {
    top: -80px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #FDEAE3;
    opacity: 0.55;
    animation: ambient-drift-circle 28s ease-in-out infinite alternate;
}

.ambient__shape--square {
    bottom: -70px;
    left: -80px;
    width: 230px;
    height: 230px;
    border-radius: 60px;
    background-color: #EEEBFB;
    opacity: 0.45;
    transform: rotate(18deg);
    animation: ambient-drift-square 34s ease-in-out infinite alternate;
}

@keyframes ambient-drift-circle {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-40px, 50px) scale(1.06); }
}

@keyframes ambient-drift-square {
    from { transform: translate(0, 0) rotate(18deg); }
    to   { transform: translate(36px, -44px) rotate(26deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ambient__shape {
        animation: none;
    }
}

/* 헤더: 구분선이나 그림자 없이, 헤더 아래로 조금 더 내려온 반투명 흐림 막이 아래쪽으로 갈수록 투명해진다.
   그래서 스크롤한 쿠폰은 선에 잘리지 않고 헤더 밑으로 서서히 흐려지며 사라진다 */
.app-header {
    background-color: transparent;
}

.app-header::before {
    content: "";
    position: absolute;
    inset: 0 0 -24px 0;
    z-index: -1;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
    mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* 하단 내비: 화면 가장자리에서 띄운 아일랜드. 아이폰 홈 바 영역만큼 더 띄운다 */
.nav-island {
    bottom: calc(12px + env(safe-area-inset-bottom));
}

.nav-island__bar {
    background-color: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-radius: 28px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* 떠오르는 주요 버튼: 화면 위쪽의 주요 버튼(data-float-cta)이 스크롤로 가려지면
   같은 버튼이 하단 내비 바로 위 가운데에 올라온다. 동작은 common.js의 initFloatingCta() */
.floating-cta {
    position: fixed;
    left: 50%;
    bottom: calc(88px + env(safe-area-inset-bottom));
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    box-shadow: 0 6px 18px rgba(30, 58, 138, 0.16);
    transition: transform var(--motion-base) var(--ease-emphasized),
                opacity var(--motion-fast) var(--ease-standard),
                background-color var(--motion-fast) var(--ease-standard);
}

.floating-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.floating-cta:active {
    transform: translate(-50%, 0) scale(var(--motion-press-scale));
}

/* 헤더의 프로필 메뉴(<details>): 기본 삼각형 표시를 숨기고, 열린 메뉴는 옅은 그림자로 띄운다 */
.profile-menu > summary {
    list-style: none;
}

.profile-menu > summary::-webkit-details-marker {
    display: none;
}

.profile-menu__panel {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.1);
}