/*
|--------------------------------------------------------------------------
| theme.css — 색 팔레트 한 곳
|--------------------------------------------------------------------------
| 색만 여기 둔다. 규칙(레이아웃·크기)은 각 페이지 CSS 에 있다.
|
| 화면이 넷으로 나뉘어 있다 — 메인(app.css) · 내 노래(mylist) ·
| 목록 공유(songlist) · 로그인(auth). 예전에는 넷이 각자 #f2f2f5 를
| 적어 두고 있어서, 다크 모드를 넣으려면 네 군데를 따로 고쳐야 했고
| 한 곳만 빠뜨려도 그 화면만 흰 채로 남는다.
|
| 이 파일을 모든 화면이 먼저 읽는다. 색은 여기서만 바뀐다.
|--------------------------------------------------------------------------
*/

:root {
    /*
    | 이 페이지가 밝고 어두운 두 벌을 다 갖고 있다고 브라우저에 알린다.
    |
    | 이 선언이 없으면 안드로이드 크롬·삼성 인터넷이 '다크 모드를 모르는
    | 사이트' 로 보고 색을 알아서 뒤집는다(Auto Dark Theme). 알고리즘이
    | 추측으로 칠하는 것이라 결과가 제멋대로고, 갤럭시에서 목록이 누렇게
    | 나온다는 신고가 여기서 나왔다.
    | 우리가 색을 정해 주면 브라우저는 손대지 않는다.
    */
    color-scheme: light dark;

    --bg:            #f5f5f7;
    --surface:       #ffffff;
    --surface-hover: #fafafa;
    /*
    | 밝은 모니터에서 너무 연해 보인다는 지적이 있어 대비를 올렸다.
    | 괄호 안은 흰 배경 기준 명암비 (WCAG AA 는 본문 4.5:1 이상)
    */
    --hairline:      rgba(0,0,0,0.14);   /* 0.08 → 선이 거의 안 보였다 */
    --label:         #1d1d1f;            /* 16.1:1  본문 */
    --label-2:       #5a5a5f;            /*  7.0:1  보조 (was #6e6e73 5.0:1) */
    --label-3:       #78787e;            /*  4.4:1  설명·플레이스홀더 (was #aeaeb2 2.2:1) */
    --blue:          #007aff;
    --purple:        #af52de;
    --orange:        #ff9500;
    --card-shadow:   0 1px 3px rgba(0,0,0,0.08);

    /*
    | 면·선·채움을 의미 단위로 모아 둔다.
    | 예전에는 rgba(0,0,0,0.10) 같은 값이 코드 곳곳에 흩어져 있었다.
    | 검은 반투명은 어두운 배경 위에서 보이지 않으므로, 다크 모드에서는
    | 이 값들이 통째로 흰 반투명으로 뒤집혀야 한다.
    | (그림자는 예외다 — 다크에서도 검정이 맞다.)
    */
    --surface-2:     #f2f2f5;              /* 눌린 상태·보조 면 */
    --fill:          rgba(0,0,0,0.05);     /* 아주 옅은 채움 */
    --fill-2:        rgba(0,0,0,0.10);
    --fill-3:        rgba(0,0,0,0.16);
    --line:          rgba(0,0,0,0.10);     /* 카드 테두리 */
    --line-2:        rgba(0,0,0,0.16);
    --line-3:        rgba(0,0,0,0.22);
    --glass:         rgba(245,245,247,0.85); /* 고정 헤더 (backdrop-filter 뒤) */
    --glass-2:       rgba(255,255,255,0.92);
    --scrim:         rgba(0,0,0,0.35);     /* 모달 가림막 */
    --surface-3:     #ececf1;              /* 눌린 면 */
    --np-ky-c:       #3d6b9c;
    --np-tj-c:       #4a8079;

    /* 강조색의 옅은 채움·선·글자 — 다크에서 한 단계씩 밝아진다 */
    --blue-2:        #0062cc;
    --blue-fill:     rgba(0,122,255,0.10);
    --blue-line:     rgba(0,122,255,0.28);
    --green:         #2da44e;
    --green-2:       #1f8a3d;
    --green-fill:    rgba(52,199,89,0.12);
    --green-line:    rgba(52,199,89,0.45);
    --pink:          #ff2d55;
    --pink-2:        #e0244b;
    --pink-fill:     rgba(255,45,85,0.12);
    --pink-line:     rgba(255,45,85,0.30);
    --red:           #ff3b30;
    --red-fill:      rgba(255,59,48,0.12);
    --red-fill-2:    rgba(255,59,48,0.26);
    --purple-2:      #8a34b8;
    --purple-fill:   rgba(175,82,222,0.12);

    /*
    | 꽉 찬 버튼 — 배경과 글자가 서로 반대다.
    | 밝을 때 '검은 버튼에 흰 글자', 어두울 때 '흰 버튼에 검은 글자' 로
    | 저절로 뒤집힌다. #1c1c1e 를 그대로 두면 어두운 배경에 묻혀 사라진다.
    */
    --solid:         #1c1c1e;
    --on-solid:      #ffffff;

    --radius-l:      18px;
    --radius-m:      13px;
    --radius-s:      9px;
    --ease:          cubic-bezier(0.25, 0.1, 0.25, 1);
}

/*
|--------------------------------------------------------------------------
| 다크 모드
|--------------------------------------------------------------------------
| 색은 위에서 변수로 모아 두었으므로 여기서는 그 값만 바꿔 끼운다.
| 규칙을 다시 쓰지 않으므로 한쪽만 고쳐져 어긋나는 일이 없다.
|
| 면 색은 Apple 의 다크 팔레트를 따른다 — 순검정 바탕(#000)에 카드가
| #1c1c1e 로 한 겹 떠 있는 구성이다. OLED 에서 배경이 실제로 꺼지고,
| 카드 경계가 빛 번짐 없이 드러난다.
|
| 글자색은 반대로 뒤집지 않는다. 흰 바탕의 #1d1d1f 를 그대로 뒤집으면
| 검은 바탕에 순백(#fff)이 되어 눈이 부시다. #f5f5f7 로 한 단계 낮춘다.
|--------------------------------------------------------------------------
*/
/*
| 어두운 값은 두 가지 경우에 켜진다.
|
|   ① 폰이 다크인데 사용자가 '밝게' 를 고르지 않았을 때
|   ② 사용자가 '어둡게' 를 직접 골랐을 때
|
| 규칙이 같아야 하므로 두 선택자를 나란히 둔다. 미디어 쿼리 안팎이라
| 한 줄로 합칠 수 없다 — 한쪽만 고치면 어긋나니 항상 같이 손볼 것.
*/
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #000000;
        --surface:       #1c1c1e;
        --surface-2:     #2c2c2e;
        --surface-hover: #242426;

        --hairline:      rgba(255,255,255,0.16);
        --label:         #f5f5f7;
        --label-2:       #a1a1a6;
        --label-3:       #8e8e93;

        /* 어두운 바탕에서는 같은 색이 가라앉는다 — 한 단계 밝은 쪽을 쓴다 */
        --blue:          #0a84ff;
        --purple:        #bf5af2;
        --orange:        #ff9f0a;

        /* 검은 반투명 → 흰 반투명. 값도 조금 올린다 (어두운 면에서는 덜 보인다) */
        --fill:          rgba(255,255,255,0.08);
        --fill-2:        rgba(255,255,255,0.14);
        --fill-3:        rgba(255,255,255,0.22);
        --line:          rgba(255,255,255,0.14);
        --line-2:        rgba(255,255,255,0.22);
        --line-3:        rgba(255,255,255,0.30);

        --glass:         rgba(28,28,30,0.85);
        --glass-2:       rgba(28,28,30,0.94);
        --scrim:         rgba(0,0,0,0.60);

        --surface-3:     #3a3a3c;

        /*
        | 강조색은 어두운 바탕에서 가라앉는다. 글자색은 밝은 쪽으로 올리고,
        | 반투명 채움은 같은 값이면 거의 안 보이므로 조금씩 진하게 한다.
        */
        --blue-2:        #64b5ff;
        --blue-fill:     rgba(10,132,255,0.20);
        --blue-line:     rgba(10,132,255,0.45);
        --green:         #30d158;
        --green-2:       #30d158;
        --green-fill:    rgba(48,209,88,0.18);
        --green-line:    rgba(48,209,88,0.50);
        --pink:          #ff375f;
        --pink-2:        #ff6482;
        --pink-fill:     rgba(255,55,95,0.20);
        --pink-line:     rgba(255,55,95,0.45);
        --red:           #ff453a;
        --red-fill:      rgba(255,69,58,0.20);
        --red-fill-2:    rgba(255,69,58,0.34);
        --purple-2:      #d9a6ff;
        --purple-fill:   rgba(191,90,242,0.20);
        --solid:         #f5f5f7;
        --on-solid:      #1c1c1e;

        /* 금영·태진 번호 색 — 어두운 남색·청록은 검은 바탕에서 안 읽힌다 */
        --np-ky-c:       #7aa9d8;
        --np-tj-c:       #6fb8ae;

        /* 어두운 면 위의 그림자는 더 진해야 보인다 */
        --card-shadow:   0 1px 3px rgba(0,0,0,0.50);

    }
}
:root[data-theme="dark"] {
        --bg:            #000000;
        --surface:       #1c1c1e;
        --surface-2:     #2c2c2e;
        --surface-hover: #242426;

        --hairline:      rgba(255,255,255,0.16);
        --label:         #f5f5f7;
        --label-2:       #a1a1a6;
        --label-3:       #8e8e93;

        /* 어두운 바탕에서는 같은 색이 가라앉는다 — 한 단계 밝은 쪽을 쓴다 */
        --blue:          #0a84ff;
        --purple:        #bf5af2;
        --orange:        #ff9f0a;

        /* 검은 반투명 → 흰 반투명. 값도 조금 올린다 (어두운 면에서는 덜 보인다) */
        --fill:          rgba(255,255,255,0.08);
        --fill-2:        rgba(255,255,255,0.14);
        --fill-3:        rgba(255,255,255,0.22);
        --line:          rgba(255,255,255,0.14);
        --line-2:        rgba(255,255,255,0.22);
        --line-3:        rgba(255,255,255,0.30);

        --glass:         rgba(28,28,30,0.85);
        --glass-2:       rgba(28,28,30,0.94);
        --scrim:         rgba(0,0,0,0.60);

        --surface-3:     #3a3a3c;

        /*
        | 강조색은 어두운 바탕에서 가라앉는다. 글자색은 밝은 쪽으로 올리고,
        | 반투명 채움은 같은 값이면 거의 안 보이므로 조금씩 진하게 한다.
        */
        --blue-2:        #64b5ff;
        --blue-fill:     rgba(10,132,255,0.20);
        --blue-line:     rgba(10,132,255,0.45);
        --green:         #30d158;
        --green-2:       #30d158;
        --green-fill:    rgba(48,209,88,0.18);
        --green-line:    rgba(48,209,88,0.50);
        --pink:          #ff375f;
        --pink-2:        #ff6482;
        --pink-fill:     rgba(255,55,95,0.20);
        --pink-line:     rgba(255,55,95,0.45);
        --red:           #ff453a;
        --red-fill:      rgba(255,69,58,0.20);
        --red-fill-2:    rgba(255,69,58,0.34);
        --purple-2:      #d9a6ff;
        --purple-fill:   rgba(191,90,242,0.20);
        --solid:         #f5f5f7;
        --on-solid:      #1c1c1e;

        /* 금영·태진 번호 색 — 어두운 남색·청록은 검은 바탕에서 안 읽힌다 */
        --np-ky-c:       #7aa9d8;
        --np-tj-c:       #6fb8ae;

        /* 어두운 면 위의 그림자는 더 진해야 보인다 */
        --card-shadow:   0 1px 3px rgba(0,0,0,0.50);

}