/* ===== 스킨 — 색·톤만 갈아입는다 (구조·간격·문구는 site.css 그대로) ===== assets/skin.js 가 에 skin-mz / skin-neo 를 붙이면 여기가 켜진다. 클래스가 없으면 이 파일은 아무것도 하지 않는다 — 원래 화면이 기본이다. 변수만 덮으면 대부분 따라오지만, site.css 안에 옅은 파랑이 하드코딩된 자리가 몇 군데 있다. 눈에 크게 걸리는 것(고른 칩·태그·아이콘 바탕·계산 중 화면)만 여기서 다시 칠한다. 아주 옅은 배경(#f5faff 급)은 거의 흰색이라 그대로 둔다. */ /* ── MZ — Y2K 퍼플 × 핫핑크 ─────────────────────────────── */ html.skin-mz{ --ink:#1a1523; --sub:#8b82a3; --card:#ffffff; --line:#efeaf7; --accent:#7c5cff; --accent2:#e5449b; --bg1:#f6f2ff; --bg2:#f6f2ff; --bg3:#f6f2ff; --shadow:0 3px 14px rgba(88,52,160,.09); } html.skin-mz body{background:linear-gradient(180deg,#f7f2ff 0%,#fdf2fa 100%);} /* 고른 칩·세그 — 원래는 옅은 파랑(#dbeafe) */ html.skin-mz .chips button.on, html.skin-mz .seg button.on, html.skin-mz .seg-mini button.on, html.skin-mz .chip.on{background:#f0e7ff; color:#6a45f5;} html.skin-mz .chip.on{background:linear-gradient(135deg,#7c5cff,#e5449b); color:#fff;} html.skin-mz .tag{background:#f4ecff; color:#6a45f5;} html.skin-mz .rcard .re{background:#f4ecff; color:#7c5cff;} html.skin-mz .pc-acts .edit{background:#f0e7ff; color:#6a45f5;} html.skin-mz .pc-acts .setrep{color:#7c5cff; box-shadow:inset 0 0 0 1px #e0d2ff;} html.skin-mz .pc-name .rel-b{background:#f6edff; color:#7c5cff;} /* 근거 상자 — 옅은 파랑 바탕과 따옴표 */ html.skin-mz .saju-why{background:linear-gradient(180deg,#f9f5ff,#f5eeff);} html.skin-mz .saju-why::before, html.skin-mz .saju-why::after{color:#cdb8ff;} html.skin-mz .lk-menu{background:#faf6ff; border-color:#ece0ff;} html.skin-mz .lk-menu .lk-grp{color:#7c5cff;} /* 계산 중 화면 — 원래는 남색 밤하늘 */ html.skin-mz .ld{background:#241a3d;} html.skin-mz .ld-card{background:#31234f;} html.skin-mz .ld-bar i{background:linear-gradient(90deg,#a78bff,#ff7ac0);} html.skin-mz .ld-who, html.skin-mz .ld-step, html.skin-mz .ld-card-h{color:#b9a6dd;} /* 홈 배너·CTA — 파랑이 박혀 있어 스킨과 따로 놀았다 */ html.skin-mz .today-card{background:linear-gradient(135deg,#8f6bff,#e988c8);} html.skin-mz .home-cta{box-shadow:0 8px 18px rgba(124,92,255,.28);} html.skin-mz .nbar{background:#f9f0ff; border-bottom-color:#ead9ff;} html.skin-mz .nbar .nb-t b, html.skin-mz .nbar .nb-arr{color:#7c5cff;} html.skin-mz .hero-dots i.on{background:#7c5cff;} /* 라운드를 조금 더 굴려 말랑한 느낌만 더한다 (크기·여백은 그대로) */ html.skin-mz .card, html.skin-mz .icon-grid{border-radius:24px;} html.skin-mz .btn, html.skin-mz .field input, html.skin-mz .field select{border-radius:16px;} html.skin-mz .today-card{border-radius:26px;} /* ── NEO — 형광 라임 × 잉크 블랙 ────────────────────────── */ html.skin-neo{ --ink:#12141a; --sub:#767f8c; --card:#ffffff; --line:#e8ebef; /* 주색은 형광 라임. 흰 글씨로는 안 읽히니 버튼 글자색을 아래에서 검정으로 바꾼다 */ --accent:#c9ec3b; --accent2:#3d7a1f; --bg1:#f3f4f2; --bg2:#f3f4f2; --bg3:#f3f4f2; --shadow:0 2px 10px rgba(18,20,26,.06); } html.skin-neo body{background:#f3f4f2;} /* 라임 위 흰 글씨는 대비가 1.4밖에 안 나온다 — 잉크 블랙으로 뒤집는다 */ html.skin-neo .btn, html.skin-neo .home-cta{color:#141a06;} html.skin-neo .home-cta{background:#c9ec3b; box-shadow:0 8px 18px rgba(150,190,30,.3);} html.skin-neo .today-card{background:linear-gradient(135deg,#1d2416,#3b4a1c);} html.skin-neo .nbar{background:#f6f8ec; border-bottom-color:#e4ebc9;} html.skin-neo .nbar .nb-t b, html.skin-neo .nbar .nb-arr{color:#4a6b16;} html.skin-neo .hero-dots i.on{background:#3d7a1f;} /* 탭바·본문 링크는 라임으로 하면 안 읽힌다 — 짙은 녹색을 쓴다 */ html.skin-neo .tabbar .tab.on{color:#141a06;} html.skin-neo .sf-next.on{background:#c9ec3b; color:#141a06;} /* 형광은 넓게 깔면 눈이 아프다 — 고른 자리와 게이지에만 쓴다 */ html.skin-neo .chips button.on, html.skin-neo .seg button.on, html.skin-neo .seg-mini button.on{background:#d8f65a; color:#20300a;} html.skin-neo .chip.on{background:#d8f65a; color:#20300a; box-shadow:none;} html.skin-neo .tag{background:#e9f7bd; color:#3d5a12;} html.skin-neo .rcard .re{background:#eef0ec; color:#2b3a12;} html.skin-neo .pc-acts .edit{background:#d8f65a; color:#20300a;} html.skin-neo .pc-acts .setrep{color:#2f3a1a; box-shadow:inset 0 0 0 1px #d3dcc2;} html.skin-neo .pc-name .rep-b{background:#111418;} html.skin-neo .pc-name .rel-b{background:#eef0ec; color:#3d5a12;} html.skin-neo .saju-why{background:#f1f3ee;} html.skin-neo .saju-why::before, html.skin-neo .saju-why::after{color:#c2cfa4;} html.skin-neo .lk-menu{background:#f4f6f0; border-color:#e3e8d8;} html.skin-neo .lk-menu .lk-grp{color:#3d5a12;} html.skin-neo .ld{background:#14170f;} html.skin-neo .ld-card{background:#20260f;} html.skin-neo .ld-bar i{background:linear-gradient(90deg,#b9e33f,#d8f65a);} html.skin-neo .ld-who, html.skin-neo .ld-step, html.skin-neo .ld-card-h{color:#a8b78a;} /* 각을 살려 스트릿한 느낌만 더한다 */ html.skin-neo .card, html.skin-neo .icon-grid{border-radius:14px;} html.skin-neo .btn, html.skin-neo .field input, html.skin-neo .field select{border-radius:10px;}