/* ═══════════════════════════════════════════════════════════════════════════
   에이픽 공용 테마 (2026-11-13 대표 지시: 통합 대시보드의 다섯 디자인을 다른 앱에도)
   크리스탈(6) · 간유리(7) · 오로라(9) · 블랙 크롬(11) · 세라믹(12)

   쓰는 법: <html data-skin="7"> 처럼 data-skin 이 붙어 있을 때만 동작한다.
            data-skin 이 없으면(=기본) 이 파일은 아무것도 바꾸지 않는다.
   원리:   앱들이 공통으로 쓰는 색 변수(--bg --card --ink --sub --faint --line --soft
            --blue --accent --grad --sh-d --sh-l --up --up-sm --in --in-sm)를 테마 값으로 덮어쓴다.
   그림:   apeak-themes.js 가 --t-bgimg(화면 배경) · --t-card(카드 바탕) 주소를 넣어 준다.
   주의:   --bg 는 불투명 색으로 둔다(전체 화면을 덮는 창이 --bg 를 바탕으로 쓰기 때문).
            비치는 유리 느낌은 --card(반투명)로 낸다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 화면 배경 그림 (고정, 아이폰에서도 버벅이지 않게 가짜 요소로) ── */
html[data-skin]{background:var(--bg)!important}
html[data-skin] body{background:transparent!important}
html[data-skin] body::before{content:"";position:fixed;z-index:-1;top:0;left:0;right:0;height:100vh;height:100lvh;
  background:var(--t-veil,linear-gradient(transparent,transparent)),var(--t-bgimg,none) center / cover no-repeat;pointer-events:none}

/* ── 6 크리스탈: 색을 거의 뺀 투명 유리, 가는 무지개 테두리 ── */
html[data-skin="6"]{
  --bg:#f1f2f7; --card:rgb(255 255 255/.48); --ink:#14162c; --sub:#4f546c; --faint:#7b8098; --line:rgb(120 130 170/.22); --soft:rgb(120 130 170/.12);
  --blue:#3d4460; --accent:#c0621a; --ok:#12964f;
  --sh-d:rgb(60 70 120/.26); --sh-l:rgb(255 255 255/.95);
  --grad:linear-gradient(135deg,#ff9ad5 0%,#ffd27a 22%,#9ff0c8 46%,#7cc8ff 70%,#b69cff 100%);
  --up:0 26px 44px -30px rgb(60 70 120/.5),inset 0 1.5px 0 rgb(255 255 255/.95),inset 0 0 0 1px rgb(255 255 255/.7),inset 0 -1.5px 0 rgb(150 160 200/.22);
  --up-sm:0 10px 18px -12px rgb(60 70 120/.5),inset 0 1.5px 0 #fff,inset 0 0 0 1px rgb(255 255 255/.75),inset 0 -2px 3px rgb(150 160 200/.2);
  --in:inset 0 3px 6px rgb(90 100 140/.2),inset 0 -1px 0 #fff,inset 0 0 0 1px rgb(120 130 170/.14);
  --in-sm:inset 0 2px 4px rgb(90 100 140/.18),inset 0 -1px 0 #fff,inset 0 0 0 1px rgb(120 130 170/.12);
  --t-veil:linear-gradient(rgb(241 242 247/.30),rgb(241 242 247/.42)); --t-dark:0;
}
/* ── 7 간유리: 우윳빛 유리, 보라·파랑·분홍 ── */
html[data-skin="7"]{
  --bg:#ebe9f6; --card:rgb(255 255 255/.36); --ink:#1b1740; --sub:#59557f; --faint:#8380a6; --line:rgb(130 110 220/.20); --soft:rgb(140 110 240/.12);
  --blue:#6a4fe0; --accent:#c9521f; --ok:#12964f;
  --sh-d:rgb(110 80 220/.30); --sh-l:rgb(255 255 255/.9);
  --grad:linear-gradient(110deg,#8f6bff 0%,#5aa2ff 55%,#ff8fd8 100%);
  --up:0 30px 50px -32px rgb(110 80 220/.55),inset 1.5px 1.5px 0 rgb(255 255 255/.95),inset -1.5px -1.5px 0 rgb(150 130 230/.2),inset 0 0 40px rgb(255 255 255/.2);
  --up-sm:0 12px 20px -12px rgb(110 80 220/.5),inset 0 1.5px 0 rgb(255 255 255/.95),inset 0 0 0 1px rgb(255 255 255/.55);
  --in:inset 0 3px 6px rgb(110 80 200/.18),inset 0 -1px 0 rgb(255 255 255/.8),inset 0 0 0 1px rgb(140 110 240/.12);
  --in-sm:inset 0 2px 4px rgb(110 80 200/.16),inset 0 -1px 0 rgb(255 255 255/.8),inset 0 0 0 1px rgb(140 110 240/.10);
  --t-veil:linear-gradient(rgb(235 233 246/.18),rgb(235 233 246/.30)); --t-dark:0;
}
/* ── 12 세라믹: 따뜻한 흰 도자기, 진주빛 ── */
html[data-skin="12"]{
  --bg:#f5f2ed; --card:rgb(255 255 255/.60); --ink:#23223a; --sub:#5d5a72; --faint:#8a879c; --line:rgb(150 135 120/.24); --soft:rgb(150 135 120/.12);
  --blue:#6f5fae; --accent:#b9591c; --ok:#12964f;
  --sh-d:rgb(150 135 120/.42); --sh-l:rgb(255 255 255/.95);
  --grad:linear-gradient(110deg,#f3c9dc 0%,#d9c8f2 30%,#bfe0f0 60%,#c9efdc 85%,#f6e3c2 100%);
  --up:12px 14px 26px -12px rgb(150 135 120/.42),-8px -8px 18px -8px rgb(255 255 255/.9),inset 1.5px 1.5px 1px #fff,inset -1.5px -2px 3px rgb(170 160 150/.2);
  --up-sm:6px 7px 14px -6px rgb(150 135 120/.48),-4px -4px 10px -4px #fff,inset 1.5px 1.5px 0 #fff,inset -1.5px -2px 3px rgb(170 160 150/.2);
  --in:inset 4px 4px 8px rgb(150 135 120/.3),inset -3px -3px 6px #fff;
  --in-sm:inset 3px 3px 6px rgb(150 135 120/.28),inset -2px -2px 4px #fff;
  --t-veil:linear-gradient(rgb(245 242 237/.30),rgb(245 242 237/.46)); --t-dark:0;
}
/* ── 9 오로라 (어두움): 검은 유리, 초록·청록·보라 빛 ── */
html[data-skin="9"]{
  --bg:#060a09; --card:rgb(14 22 20/.56); --ink:#f1fbf7; --sub:#b4cfc6; --faint:#86a39a; --line:rgb(120 255 210/.14); --soft:rgb(60 230 170/.09);
  --blue:#4fe6b4; --accent:#ffb877; --ok:#3dff8f; --warn:#ffb877; --bad:#ff7a86;
  --sh-d:rgb(0 0 0/.75); --sh-l:rgb(120 255 210/.10);
  --grad:linear-gradient(100deg,#12c98a 0%,#1fb8c8 55%,#7a6cff 100%);
  --up:0 26px 40px -24px #000,0 22px 34px -28px rgb(40 220 160/.7),inset 0 1px 0 rgb(180 255 230/.22),inset 0 0 0 1px rgb(60 230 170/.14);
  --up-sm:0 12px 20px -12px #000,inset 0 1px 0 rgb(180 255 230/.25),inset 0 0 0 1px rgb(60 230 170/.20);
  --in:inset 0 3px 6px rgb(0 0 0/.65),inset 0 -1px 0 rgb(120 255 210/.12),inset 0 0 0 1px rgb(60 230 170/.10);
  --in-sm:inset 0 2px 4px rgb(0 0 0/.6),inset 0 -1px 0 rgb(120 255 210/.12),inset 0 0 0 1px rgb(60 230 170/.08);
  --t-veil:linear-gradient(rgb(6 10 9/.30),rgb(6 10 9/.52)); --t-dark:1;
  color-scheme:dark;
}
/* ── 11 블랙 크롬 (어두움): 검은 금속, 가는 네온 선 ── */
html[data-skin="11"]{
  --bg:#050507; --card:rgb(20 22 30/.62); --ink:#eef2ff; --sub:#b2b9d2; --faint:#868ca8; --line:rgb(120 170 255/.16); --soft:rgb(120 170 255/.08);
  --blue:#6cc4ff; --accent:#ffb877; --ok:#3dff8f; --warn:#ffb877; --bad:#ff7a86;
  --sh-d:rgb(0 0 0/.85); --sh-l:rgb(120 170 255/.10);
  --grad:linear-gradient(110deg,#1fd5ff 0%,#3f7dff 50%,#8a5cff 100%);
  --up:0 26px 40px -24px #000,inset 0 1px 0 rgb(255 255 255/.16),inset 0 0 0 1px rgb(110 170 255/.26);
  --up-sm:0 10px 16px -10px #000,inset 0 1px 0 rgb(255 255 255/.18),inset 0 0 0 1px rgb(110 170 255/.30);
  --in:inset 0 3px 6px #000,inset 0 0 0 1px rgb(120 170 255/.14);
  --in-sm:inset 0 2px 5px #000,inset 0 0 0 1px rgb(120 170 255/.12);
  --t-veil:linear-gradient(rgb(5 5 7/.34),rgb(5 5 7/.56)); --t-dark:1;
  color-scheme:dark;
}

/* ── 테마 고르는 칸 (apeak-themes.js 의 ApeakThemes.mount 가 그림) ── */
.apk-skins{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin:10px 0}   /* 놓인 자리 폭에 맞춰 칸 수가 바뀜(좁은 창 안에서도 글자 안 잘림) */
.apk-skins button{display:flex;align-items:center;gap:8px;height:46px;padding:0 10px 0 6px;border-radius:999px;min-width:0;width:100%;text-align:left;
  font:inherit;font-size:13px;font-weight:700;color:var(--ink,#22293a);background:var(--card,#f6f8fb);box-shadow:var(--up-sm,0 2px 6px rgb(0 0 0/.15));border:0;cursor:pointer}
.apk-skins button i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--sw,#ddd) center / 260% auto;box-shadow:inset 0 1.5px 0 rgb(255 255 255/.7),inset 0 0 0 1px rgb(0 0 0/.14),0 3px 6px -3px rgb(0 0 0/.5)}   /* 흰 미리보기도 보이게 옅은 테두리 */
.apk-skins button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apk-skins button.on{box-shadow:0 0 0 2px var(--bg,#fff),0 0 0 4px var(--blue,#5a7cf0)}
.apk-skins button:active{transform:scale(.98)}

/* 통합 대시보드로 가는 홈 버튼 (각 앱 머리줄) */
.apk-home{display:grid;place-items:center;text-decoration:none;color:inherit;flex:none}
.apk-home svg{width:20px;height:20px}