/* ================================================================
   design.css — Pretendard 프리미엄 디자인 시스템
   Suzhou Care App · 전체 공유 스타일
   ================================================================ */

/* 1. Pretendard 웹폰트 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
    /* ── 색상 팔레트 ────────────────────── */
    --clr-primary:      #0052CC;   /* 삼성 블루 계열 */
    --clr-primary-mid:  #2D7FFF;
    --clr-primary-lite: #5AA8FF;
    --clr-accent:       #FF6B35;   /* 포인트 오렌지-앰버 */
    --clr-surface:      #F6F8FC;
    --clr-card:         #FFFFFF;
    --clr-text-hi:      #0A1628;
    --clr-text-mid:     #3D5375;
    --clr-text-lo:      #8FA3BF;
    --clr-border:       rgba(0,82,204,.10);

    /* 다크모드 */
    --clr-dark-surface: #0B1628;
    --clr-dark-card:    #112040;
    --clr-dark-text-hi: #E8F0FF;
    --clr-dark-text-mid:#8FA3BF;

    /* ── 그라디언트 ─────────────────────── */
    --grad-primary:  linear-gradient(135deg, #0052CC 0%, #2D7FFF 60%, #5AA8FF 100%);
    --grad-accent:   linear-gradient(135deg, #FF6B35 0%, #FFA63D 100%);
    --grad-subtle:   linear-gradient(135deg, #F0F5FF 0%, #E8F0FF 100%);
    --grad-header:   linear-gradient(135deg, #0A2463 0%, #0052CC 50%, #2D7FFF 100%);

    /* ── 타이포그래피 ────────────────────── */
    --font-main: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif;

    /* ── 형태 ───────────────────────────── */
    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  20px;
    --radius-xl:  28px;

    /* ── 그림자 ─────────────────────────── */
    --shadow-card: 0 2px 12px rgba(0,82,204,.08), 0 1px 3px rgba(0,0,0,.05);
    --shadow-btn:  0 4px 14px rgba(0,82,204,.30);
}

/* ── 폰트 전역 적용 ─────────────────────── */
*, *::before, *::after {
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
}

/* 숫자는 항상 굵고 tabular-nums */
.font-numeric,
[class*="text-[1"] {  /* Tailwind arbitrary size text */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── 버튼 공통 그라디언트 ───────────────── */
.btn-primary {
    background: var(--grad-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    box-shadow: var(--shadow-btn);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-primary:active {
    transform: scale(.96);
    box-shadow: 0 2px 6px rgba(0,82,204,.20);
    filter: brightness(.95);
}

.btn-accent {
    background: var(--grad-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(255,107,53,.30);
    transition: transform .15s, filter .15s;
}
.btn-accent:active { transform: scale(.96); filter: brightness(.95); }

/* ── 헤더 gradient accent ───────────────── */
.header-gradient {
    background: var(--grad-header) !important;
    color: #fff !important;
}
.header-gradient * { color: #fff !important; }

/* ── 카드 공통 ──────────────────────────── */
.card-premium {
    background: var(--clr-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--clr-border);
}

/* ── 아이콘 색상 통일 ────────────────────── */
/* Material Symbols 기본: primary blue */
.material-symbols-outlined {
    color: var(--clr-primary) !important;
}
/* 배경이 색상 있는 곳 (헤더, 버튼 등) 내부 아이콘은 흰색 */
.header-gradient .material-symbols-outlined,
.btn-primary .material-symbols-outlined,
.btn-accent  .material-symbols-outlined,
[class*="bg-primary"] .material-symbols-outlined,
[class*="bg-blue"] .material-symbols-outlined,
[class*="bg-rose"] .material-symbols-outlined,
[class*="bg-emerald"] .material-symbols-outlined,
[class*="bg-amber"] .material-symbols-outlined {
    color: inherit !important;
}

/* ── bottom-nav 아이콘 ───────────────────── */
#nav-home   .material-symbols-outlined,
#nav-guide  .material-symbols-outlined,
#nav-map    .material-symbols-outlined,
#nav-survey .material-symbols-outlined,
#nav-admin  .material-symbols-outlined,
#nav-chat   .material-symbols-outlined {
    color: var(--clr-text-lo) !important;
    transition: color .2s;
}
#nav-home.active   .material-symbols-outlined,
#nav-guide.active  .material-symbols-outlined,
#nav-map.active    .material-symbols-outlined,
#nav-survey.active .material-symbols-outlined,
#nav-admin.active  .material-symbols-outlined,
#nav-chat.active   .material-symbols-outlined {
    color: var(--clr-primary) !important;
}

/* ── 숫자 위젯 강조 ─────────────────────── */
#widget-weather-temp,
#widget-exchange-rate,
.w-city-temp {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

/* ── 버튼 전역 오버라이드 (Tailwind 기존 버튼보완) ── */
button:not([disabled]):not(.no-haptic) {
    -webkit-tap-highlight-color: transparent;
}

/* ── 다크모드 오버라이드 ─────────────────── */
@media (prefers-color-scheme: dark) {
    .card-premium {
        background: var(--clr-dark-card);
        border-color: rgba(255,255,255,.06);
    }
    .material-symbols-outlined {
        color: var(--clr-primary-lite) !important;
    }
}
.dark .material-symbols-outlined {
    color: var(--clr-primary-lite) !important;
}
.dark .card-premium {
    background: var(--clr-dark-card);
}

/* ================================================================
   user.html 전용 — 벤토 아이콘 통일 & 버튼 그라디언트 & 헤더 accent
   ================================================================ */

/* 헤더 gradient accent bar — 상단 3px 파란 선 */
body::before {
    content: '';
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad-primary);
    z-index: 9999;
    pointer-events: none;
}

/* 숫자 강조 */
#widget-weather-temp, #widget-exchange-rate, .w-city-temp,
#trip-progress-text, [id*="count"], [id*="temp"], [id*="rate"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    font-weight: 900 !important;
    letter-spacing: -0.03em;
}

/* 벤토 카드 아이콘 배경 통일 → subtle blue gradient */
[class*="bg-emerald-50 dark"][class*="flex items-center justify-center"],
[class*="bg-amber-50 dark"][class*="flex items-center justify-center"],
[class*="bg-violet-50"][class*="flex items-center justify-center"] {
    background: var(--grad-subtle) !important;
}

/* 제출/완료/등록 계열 버튼 그라디언트 */
button[type="submit"],
#btn-submit, #btn-save, #btn-register, .submit-btn {
    background: var(--grad-primary) !important;
    color: #fff !important;
    box-shadow: var(--shadow-btn) !important;
    border: none !important;
}