163 lines
3.4 KiB
CSS
163 lines
3.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--bg: #14171c; /* 차콜 다크 */
|
|
--bg2: #1b1f26;
|
|
--mint: #85fca8; /* CTA 버튼 */
|
|
--mint-ink: #0a2417; /* 민트 버튼 위 텍스트 */
|
|
--green: #4affa0; /* 글로우/액센트 (포인트 컬러) */
|
|
|
|
--sheet: #f2f3ef; /* 레이어드 화이트 시트 */
|
|
--sheet-card: #ffffff;
|
|
--ink: #14171c; /* 화이트 위 텍스트 */
|
|
--ink-muted: #79808c;
|
|
--line-d: #2b313c; /* 다크 보더 */
|
|
--line-l: #e3e5df; /* 라이트 보더 */
|
|
|
|
/* 상금 카드 — 골드 대신 민트/틸그린 쿨 톤 */
|
|
--gold-border: #5ef0b4; /* 민트 액센트 */
|
|
--gold-bg: #0e1f1b; /* 딥 틸그린 */
|
|
--gold-btn-1: #85fca8; /* 민트 */
|
|
--gold-btn-2: #15a99b; /* 틸그린 */
|
|
|
|
--gpt: #15a99b; /* 틸그린 (teal green) */
|
|
/* Claude 오렌지 토큰 제거 — 오렌지 금지 규칙. Claude 표시는 공식 로고 이미지가 담당 */
|
|
--gemini: #5b8cff;
|
|
|
|
--share: #a65eff; /* 공유/바이럴 액션 (ADO2 브랜드 포인트 퍼플) */
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background:
|
|
radial-gradient(120% 50% at 50% -5%, #20302a 0%, var(--bg) 48%) no-repeat,
|
|
var(--bg);
|
|
color: #fff;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
body {
|
|
font-family:
|
|
"Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
|
|
"Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
|
|
margin: 0;
|
|
}
|
|
|
|
.shell {
|
|
max-width: 460px;
|
|
margin: 0 auto;
|
|
padding: 0 16px 56px;
|
|
}
|
|
|
|
/* Triple Pick 2026 타이틀용 Impact */
|
|
.font-impact {
|
|
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", system-ui,
|
|
sans-serif;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.flag-img {
|
|
object-fit: cover;
|
|
border: 1px solid var(--line-d);
|
|
}
|
|
|
|
/* 레이어드 화이트 시트 */
|
|
.sheet {
|
|
background: var(--sheet);
|
|
border-radius: 22px;
|
|
box-shadow:
|
|
0 -2px 0 rgba(255, 255, 255, 0.04),
|
|
0 24px 60px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* 코너 브래킷 (HUD) */
|
|
.bracket {
|
|
position: relative;
|
|
}
|
|
.bracket > .bk {
|
|
content: "";
|
|
position: absolute;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--green);
|
|
}
|
|
.bracket > .bk-tl {
|
|
top: 0;
|
|
left: 0;
|
|
border-right: 0;
|
|
border-bottom: 0;
|
|
border-top-left-radius: 6px;
|
|
}
|
|
.bracket > .bk-tr {
|
|
top: 0;
|
|
right: 0;
|
|
border-left: 0;
|
|
border-bottom: 0;
|
|
border-top-right-radius: 6px;
|
|
}
|
|
.bracket > .bk-br {
|
|
bottom: 0;
|
|
right: 0;
|
|
border-left: 0;
|
|
border-top: 0;
|
|
border-bottom-right-radius: 6px;
|
|
}
|
|
.bracket > .bk-bl {
|
|
bottom: 0;
|
|
left: 0;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
border-bottom-left-radius: 6px;
|
|
}
|
|
|
|
.vs-glow {
|
|
background: radial-gradient(
|
|
closest-side,
|
|
rgba(74, 255, 160, 0.5),
|
|
rgba(74, 255, 160, 0) 70%
|
|
);
|
|
}
|
|
|
|
.btn-mint {
|
|
background: var(--mint);
|
|
color: var(--mint-ink);
|
|
box-shadow:
|
|
0 0 0 1px rgba(133, 252, 168, 0.55),
|
|
0 10px 28px rgba(133, 252, 168, 0.28);
|
|
}
|
|
|
|
/* 사용자 액션(투표 제출) — 브랜드 포인트 퍼플 */
|
|
.btn-share {
|
|
background: var(--share);
|
|
color: #fff;
|
|
box-shadow:
|
|
0 0 0 1px rgba(166, 94, 255, 0.5),
|
|
0 12px 30px rgba(166, 94, 255, 0.35);
|
|
}
|
|
|
|
.gold-card {
|
|
background:
|
|
linear-gradient(180deg, rgba(94, 240, 180, 0.08), rgba(21, 169, 155, 0.03)),
|
|
var(--gold-bg);
|
|
border: 1px solid rgba(94, 240, 180, 0.45);
|
|
box-shadow: inset 0 0 24px rgba(94, 240, 180, 0.06);
|
|
}
|
|
.gold-btn {
|
|
background: linear-gradient(180deg, var(--gold-btn-1), var(--gold-btn-2));
|
|
color: #06231a;
|
|
box-shadow: 0 6px 18px rgba(21, 169, 155, 0.3);
|
|
}
|
|
|
|
@keyframes barfill {
|
|
from {
|
|
width: 0;
|
|
}
|
|
}
|
|
.bar-anim {
|
|
animation: barfill 0.8s ease-out;
|
|
}
|