/* ============================================================
   MediPrice 테마 토큰
   ------------------------------------------------------------
   마크업은 손대지 않는다. Tailwind 유틸 클래스를 다크 스코프에서
   재정의하는 방식이라, 앞으로 새로 쓰는 bg-white / text-gray-900 도
   자동으로 테마를 탄다.
   JS가 문자열로 찍어내는 인라인 스타일은 var(--mp-*) 를 직접 쓴다.
   ============================================================ */

:root {
    --mp-page:         #F9FAFB;
    --mp-surface:      #FFFFFF;
    --mp-surface-2:    #F2F4F6;
    --mp-surface-3:    #E5E7EB;
    --mp-tint:         #EEF4FF;
    --mp-border:       #E5E7EB;
    --mp-border-soft:  #F3F4F6;

    --mp-t-strong:     #111827;
    --mp-t:            #374151;
    --mp-t-mid:        #4B5563;
    --mp-t-muted:      #6B7280;
    --mp-t-faint:      #9CA3AF;
    --mp-t-faintest:   #D1D5DB;

    --mp-accent:       #2563EB;
    --mp-accent-hi:    #1D4ED8;
    /* 채워진 버튼 배경용 — 위에 흰 글자가 올라간다 */
    --mp-accent-bg:    #2563EB;
    --mp-accent-bg-hi: #1D4ED8;
    --mp-accent-weak:  #EFF6FF;
    --mp-accent-weak2: #DBEAFE;
    --mp-accent-weak3: #BFDBFE;
    --mp-on-accent:    #FFFFFF;

    --mp-amber-bg:     #FFFBEB;
    --mp-amber-bd:     #FEF3C7;
    --mp-amber-tx:     #B45309;
    --mp-amber-ic:     #FBBF24;

    --mp-pin-bg:       #FFFFFF;
    --mp-pin-tx:       #374151;
    --mp-pin-bd:       #E5E7EB;
    --mp-pin-stem:     #D1D5DB;
    --mp-map-bg:       #E8EDF5;
    --mp-toast-bg:     #1F2937;
    --mp-toast-err:    #EF4444;
    --mp-toast-tx:     #FFFFFF;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --mp-page:         #0F1012;
    --mp-surface:      #17191C;
    --mp-surface-2:    #1E2024;
    --mp-surface-3:    #2A2D32;
    --mp-tint:         #14171C;
    --mp-border:       #2E3136;
    --mp-border-soft:  #25282C;

    --mp-t-strong:     #ECEDEE;
    --mp-t:            #D3D6D9;
    --mp-t-mid:        #B7BBBF;
    --mp-t-muted:      #9298A0;
    --mp-t-faint:      #70767D;
    --mp-t-faintest:   #6B7078;

    /* 글자·아이콘용은 밝게(어두운 면 위에서 읽혀야 한다),
       채운 버튼 배경용은 중간 톤으로 — 그래야 그 위의 흰 글자가 읽힌다.
       text-white 는 회색 원 위에도 쓰이므로 흰색 그대로 둔다. */
    --mp-accent:       #86A9D8;
    --mp-accent-hi:    #9CBCE4;
    --mp-accent-bg:    #3E5F8E;
    --mp-accent-bg-hi: #4C7099;
    --mp-accent-weak:  #192230;
    --mp-accent-weak2: #1F2B3B;
    --mp-accent-weak3: #2A3A4E;

    --mp-amber-bg:     #241D10;
    --mp-amber-bd:     #44361C;
    --mp-amber-tx:     #E3BE7A;
    --mp-amber-ic:     #C79A4A;

    --mp-pin-bg:       #23262B;
    --mp-pin-tx:       #D3D6D9;
    --mp-pin-bd:       #3A3E44;
    --mp-pin-stem:     #4A4F56;
    /* --mp-map-bg 는 다크에서 덮지 않는다. #map 에 invert 필터가 걸려 있어
       어두운 값을 넣으면 오히려 밝은 회색으로 뒤집힌다. */
    --mp-toast-bg:     #2A2D32;
    --mp-toast-err:    #F87171;
    --mp-toast-tx:     #ECEDEE;
}

/* ── 배경 ───────────────────────────────────────────── */
:root[data-theme="dark"] body             { background-color: var(--mp-page); }
:root[data-theme="dark"] .bg-white        { background-color: var(--mp-surface); }
:root[data-theme="dark"] .bg-gray-50      { background-color: var(--mp-surface-2); }
:root[data-theme="dark"] .bg-gray-100     { background-color: var(--mp-surface-2); }
:root[data-theme="dark"] .bg-gray-200     { background-color: var(--mp-surface-3); }
:root[data-theme="dark"] .bg-gray-300     { background-color: var(--mp-surface-3); }
:root[data-theme="dark"] .bg-blue-50      { background-color: var(--mp-accent-weak); }
:root[data-theme="dark"] .bg-blue-100     { background-color: var(--mp-accent-weak2); }
:root[data-theme="dark"] .bg-blue-200     { background-color: var(--mp-accent-weak3); }
:root[data-theme="dark"] .bg-blue-700     { background-color: var(--mp-accent-bg-hi); }
:root[data-theme="dark"] .bg-amber-50     { background-color: var(--mp-amber-bg); }
:root[data-theme="dark"] .bg-\[\#F2F4F6\] { background-color: var(--mp-surface-2); }
:root[data-theme="dark"] .bg-\[\#EEF4FF\] { background-color: var(--mp-tint); }
:root[data-theme="dark"] .bg-\[\#F9FAFB\] { background-color: var(--mp-page); }
:root[data-theme="dark"] .bg-\[\#2563EB\] { background-color: var(--mp-accent-bg); }

/* ── 글자 ───────────────────────────────────────────── */
:root[data-theme="dark"] .text-gray-900     { color: var(--mp-t-strong); }
:root[data-theme="dark"] .text-gray-800     { color: var(--mp-t); }
:root[data-theme="dark"] .text-gray-700     { color: var(--mp-t); }
:root[data-theme="dark"] .text-gray-600     { color: var(--mp-t-mid); }
:root[data-theme="dark"] .text-gray-500     { color: var(--mp-t-muted); }
:root[data-theme="dark"] .text-gray-400     { color: var(--mp-t-faint); }
:root[data-theme="dark"] .text-gray-300     { color: var(--mp-t-faintest); }
:root[data-theme="dark"] .text-blue-600     { color: var(--mp-accent); }
:root[data-theme="dark"] .text-amber-700    { color: var(--mp-amber-tx); }
:root[data-theme="dark"] .text-amber-400    { color: var(--mp-amber-ic); }
:root[data-theme="dark"] .text-\[\#2563EB\] { color: var(--mp-accent); }
:root[data-theme="dark"] .placeholder-gray-400::placeholder { color: var(--mp-t-faint); }
:root[data-theme="dark"] .placeholder-gray-300::placeholder { color: var(--mp-t-faintest); }

/* 404·500 의 큰 숫자 (text-[#2563EB]/20) */
:root[data-theme="dark"] [class*="text-\[\#2563EB\]\/"] { color: color-mix(in srgb, var(--mp-accent) 22%, transparent); }

/* ── 테두리 ─────────────────────────────────────────── */
:root[data-theme="dark"] .border-gray-200     { border-color: var(--mp-border); }
:root[data-theme="dark"] .border-gray-100     { border-color: var(--mp-border-soft); }
/* 표 행 구분선. 등록이 빠져 있으면 다크에서 거의 흰 선이 그어진다. */
:root[data-theme="dark"] .border-gray-50      { border-color: var(--mp-border-soft); }
:root[data-theme="dark"] .border-blue-100     { border-color: var(--mp-accent-weak2); }
:root[data-theme="dark"] .border-amber-100    { border-color: var(--mp-amber-bd); }
:root[data-theme="dark"] .border-amber-200,
:root[data-theme="dark"] .border-amber-300    { border-color: var(--mp-amber-bd); }
:root[data-theme="dark"] .border-\[\#2563EB\] { border-color: var(--mp-accent); }
:root[data-theme="dark"] .divide-gray-100 > * + * { border-color: var(--mp-border-soft); }
:root[data-theme="dark"] .divide-gray-200 > * + * { border-color: var(--mp-border); }

/* ── hover / active / group ─────────────────────────── */
:root[data-theme="dark"] .hover\:bg-gray-50:hover    { background-color: var(--mp-surface-2); }
:root[data-theme="dark"] .hover\:bg-gray-100:hover   { background-color: var(--mp-surface-2); }
:root[data-theme="dark"] .hover\:bg-gray-200:hover   { background-color: var(--mp-surface-3); }
:root[data-theme="dark"] .hover\:bg-blue-100:hover   { background-color: var(--mp-accent-weak2); }
:root[data-theme="dark"] .hover\:bg-blue-700:hover   { background-color: var(--mp-accent-bg-hi); }
:root[data-theme="dark"] .active\:bg-blue-200:active { background-color: var(--mp-accent-weak3); }
:root[data-theme="dark"] .hover\:text-gray-700:hover   { color: var(--mp-t); }
:root[data-theme="dark"] .hover\:text-\[\#2563EB\]:hover { color: var(--mp-accent); }
:root[data-theme="dark"] .hover\:border-blue-200:hover   { border-color: var(--mp-accent-weak3); }
:root[data-theme="dark"] .group:hover .group-hover\:bg-blue-100     { background-color: var(--mp-accent-weak2); }
:root[data-theme="dark"] .group:hover .group-hover\:text-\[\#2563EB\] { color: var(--mp-accent); }

/* ── 그라디언트 카드 (검색 항목 가격) ───────────────── */
:root[data-theme="dark"] #pd-section-search-price,
:root[data-theme="dark"] #section-search-price {
    background-image: linear-gradient(to bottom right, var(--mp-accent-weak), var(--mp-surface));
}

/* ── 그림자 ─────────────────────────────────────────── */
/* 어두운 배경에선 검은 그림자가 보이지 않는다. 레이아웃을 건드리지 않도록
   테두리 대신 0-blur 링을 써서 카드 경계를 만든다. 인라인 style 을 이겨야 해 !important. */
:root[data-theme="dark"] [style*="box-shadow"] {
    box-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 0 1px var(--mp-border) !important;
}
:root[data-theme="dark"] #panel-detail {
    box-shadow: 0 -8px 40px rgba(0,0,0,.6);
}

/* ── 지도 ───────────────────────────────────────────── */
/* 네이버 타일은 서버가 내려주는 이미지라 CSS 로 색을 못 바꾼다.
   지도 전체를 반전시키고, 우리가 그린 마커와 네이버 로고만 역반전해 되돌린다. */
:root[data-theme="dark"] #map {
    background: var(--mp-map-bg);
    filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.92);
}
:root[data-theme="dark"] #map .mp-pin,
:root[data-theme="dark"] #map .mp-cluster,
:root[data-theme="dark"] #map .mp-me,
:root[data-theme="dark"] #map a[href*="naver.com"] {
    filter: invert(1) hue-rotate(180deg);
}

/* ── 자동완성 ───────────────────────────────────────── */
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:hover,
:root[data-theme="dark"] input:-webkit-autofill:focus,
:root[data-theme="dark"] input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--mp-t-strong);
}

/* ── 테마 토글 버튼 ─────────────────────────────────── */
#theme-toggle svg { display: none; }
:root:not([data-theme="dark"]) #theme-toggle [data-icon="moon"] { display: block; }
:root[data-theme="dark"]       #theme-toggle [data-icon="sun"]  { display: block; }