diff --git a/apps/web/src/app/auth-buttons.tsx b/apps/web/src/app/auth-buttons.tsx index cdfab9d..81eaf7f 100644 --- a/apps/web/src/app/auth-buttons.tsx +++ b/apps/web/src/app/auth-buttons.tsx @@ -29,7 +29,7 @@ export function AuthButtons({ session }: AuthButtonsProps) {
로그인 @@ -37,9 +37,8 @@ export function AuthButtons({ session }: AuthButtonsProps) { href="/auth/register" className="rounded-full px-4 py-1.5 text-sm font-semibold text-white transition-transform hover:-translate-y-0.5" style={{ - background: - 'linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%)', - boxShadow: '0 6px 20px -6px rgba(168, 85, 247, 0.55)', + background: 'linear-gradient(135deg,#03C75A 0%,#02A149 55%,#018f40 100%)', + boxShadow: '0 8px 20px -6px rgba(3, 199, 90, 0.5)', }} > 회원가입 @@ -50,15 +49,16 @@ export function AuthButtons({ session }: AuthButtonsProps) { return (
- + {session.user.name} - + ({ROLE_LABELS[session.user.primaryRole] || session.user.primaryRole}) diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index 1d767e2..88c51cd 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -8,60 +8,81 @@ --font-serif: 'Instrument Serif', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; - /* Legacy warm palette — still referenced on sub-pages (blog, stores, about, etc.) */ - --color-warm-50: #fefcf9; - --color-warm-100: #fdf6ec; - --color-warm-200: #f9e8cf; - --color-warm-300: #f2d1a5; - --color-warm-400: #e8b06e; - --color-warm-500: #d4874a; - --color-warm-600: #b8622e; - --color-warm-700: #8e4a22; - --color-warm-800: #6b3a1e; - --color-warm-900: #3d2213; - --color-ink: #1a1410; - --color-ink-light: #4a4035; - --color-ink-muted: #8a7e72; - --color-sage-500: #6b8f71; - --color-sage-600: #527a58; + /* Naver Green signature system */ + --color-naver: #03C75A; + --color-naver-dark: #02A149; + --color-naver-deep: #018f40; + --color-naver-light: #2BD673; + --color-naver-soft: #E4F9EC; + --color-naver-tint: #F2FBF6; - /* invyone-inspired dark foundation */ - --color-night-0: #05050f; - --color-night-1: #0a0a18; - --color-night-2: #10101f; - --color-night-3: #1a1a2e; - --color-night-4: #252540; - --color-night-5: #353848; - --color-cloud-0: #ffffff; - --color-cloud-1: rgba(255, 255, 255, 0.92); - --color-cloud-2: rgba(255, 255, 255, 0.68); - --color-cloud-3: rgba(255, 255, 255, 0.48); - --color-cloud-4: rgba(255, 255, 255, 0.28); + /* Gradient complements */ + --color-mint: #00C4A7; + --color-lime-accent: #84E1A1; + --color-emerald: #0AB070; - /* Rainbow accent palette */ - --color-iris: #6366f1; - --color-iris-light: #818cf8; - --color-violet: #a855f7; - --color-violet-light: #c084fc; - --color-rose: #ec4899; - --color-rose-light: #f472b6; - --color-tangerine: #f97316; - --color-tangerine-light: #fb923c; - --color-azure: #60a5fa; - --color-lime: #22c55e; - --color-lime-light: #34d399; - --color-amber: #fbbf24; + /* Neutral (white-first) palette */ + --color-ink: #0F1D17; /* near-black text */ + --color-ink-light: #3E4A44; /* secondary text */ + --color-ink-muted: #7B8581; /* muted text */ + --color-line: #E4E8E6; /* subtle border */ + --color-line-soft: #EFF2F0; /* softer border */ + --color-surface: #FFFFFF; + --color-surface-soft: #F7FAF8; + --color-surface-mute: #F0F5F2; + + /* Legacy warm palette remap → light neutrals so old pages stay readable */ + --color-warm-50: #ffffff; + --color-warm-100: #F7FAF8; + --color-warm-200: #EFF2F0; + --color-warm-300: #E4E8E6; + --color-warm-400: #84E1A1; + --color-warm-500: #03C75A; + --color-warm-600: #02A149; + --color-warm-700: #018f40; + --color-warm-800: #0F1D17; + --color-warm-900: #0A1410; + + --color-sage-500: #03C75A; + --color-sage-600: #02A149; + + /* Legacy dark night palette kept as neutrals (in case referenced) */ + --color-night-0: #ffffff; + --color-night-1: #F7FAF8; + --color-night-2: #EFF2F0; + --color-night-3: #E4E8E6; + --color-night-4: #D3D9D6; + --color-night-5: #B6BEB9; + --color-cloud-0: #0F1D17; + --color-cloud-1: rgba(15, 29, 23, 0.92); + --color-cloud-2: rgba(15, 29, 23, 0.68); + --color-cloud-3: rgba(15, 29, 23, 0.48); + --color-cloud-4: rgba(15, 29, 23, 0.32); + + /* Accent palette remapped toward green family */ + --color-iris: #03C75A; + --color-iris-light: #2BD673; + --color-violet: #00C4A7; + --color-violet-light: #4FD9C3; + --color-rose: #0AB070; + --color-rose-light: #34D399; + --color-tangerine: #84E1A1; + --color-tangerine-light: #A5EBB8; + --color-azure: #34D399; + --color-lime: #03C75A; + --color-lime-light: #2BD673; + --color-amber: #02A149; } /* ----------------------------------------------------------------- - * Global body defaults + * Global body defaults — LIGHT theme * ----------------------------------------------------------------- */ html { - background: #05050f; + background: #ffffff; } body { - background: #05050f; - color: rgba(255, 255, 255, 0.92); + background: #ffffff; + color: #0F1D17; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -69,8 +90,8 @@ body { } ::selection { - background: rgba(168, 85, 247, 0.35); - color: #ffffff; + background: rgba(3, 199, 90, 0.22); + color: #0F1D17; } /* ----------------------------------------------------------------- @@ -102,8 +123,8 @@ body { 50% { background-position: 100% 50%; } } @keyframes pulse-glow { - 0%, 100% { opacity: 0.55; transform: scale(1); } - 50% { opacity: 0.95; transform: scale(1.07); } + 0%, 100% { opacity: 0.45; transform: scale(1); } + 50% { opacity: 0.85; transform: scale(1.06); } } @keyframes marquee { 0% { transform: translateX(0); } @@ -134,94 +155,88 @@ body { .animate-spin-slow { animation: spin-slow 30s linear infinite; } /* ----------------------------------------------------------------- - * Gradient / text utilities + * Gradient / text utilities — Naver green family * ----------------------------------------------------------------- */ .text-grad-primary { - background: linear-gradient(135deg, #6366f1 0%, #a855f7 40%, #ec4899 70%, #f97316 100%); + background: linear-gradient(135deg, #03C75A 0%, #00C4A7 55%, #0AB070 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-grad-subtle { - background: linear-gradient(120deg, #818cf8 0%, #c084fc 30%, #f472b6 60%, #fb923c 100%); + background: linear-gradient(120deg, #2BD673 0%, #4FD9C3 50%, #84E1A1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-grad-rainbow { - background: linear-gradient(120deg, #60a5fa, #c084fc, #f472b6, #fb923c, #fbbf24, #34d399, #60a5fa); + background: linear-gradient(120deg, #03C75A, #00C4A7, #2BD673, #0AB070, #84E1A1, #03C75A); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; - animation: shimmer 8s linear infinite; -} -.text-grad-iris { - background: linear-gradient(135deg, #818cf8 0%, #6366f1 50%, #4f46e5 100%); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - color: transparent; -} -.text-grad-rose { - background: linear-gradient(135deg, #f472b6 0%, #ec4899 50%, #db2777 100%); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - color: transparent; + animation: shimmer 10s linear infinite; } +.text-grad-iris, +.text-grad-rose, .text-grad-tangerine { - background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #ea580c 100%); + background: linear-gradient(135deg, #03C75A 0%, #00C4A7 60%, #0AB070 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } +.bg-grad-primary { + background: linear-gradient(135deg, #03C75A 0%, #00C4A7 55%, #0AB070 100%); +} +.bg-grad-soft { + background: linear-gradient(135deg, #E4F9EC 0%, #F2FBF6 60%, #FFFFFF 100%); +} + /* ----------------------------------------------------------------- - * Backgrounds / patterns + * Backgrounds / patterns (light) * ----------------------------------------------------------------- */ .bg-grid { background-image: - linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px), - linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px); + linear-gradient(to right, rgba(15, 29, 23, 0.04) 1px, transparent 1px), + linear-gradient(to bottom, rgba(15, 29, 23, 0.04) 1px, transparent 1px); background-size: 48px 48px; } .bg-grid-animated { background-image: - linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px), - linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px); + linear-gradient(to right, rgba(3, 199, 90, 0.07) 1px, transparent 1px), + linear-gradient(to bottom, rgba(3, 199, 90, 0.07) 1px, transparent 1px); background-size: 48px 48px; animation: grid-drift 20s linear infinite; } .bg-dot { - background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px); + background-image: radial-gradient(circle, rgba(3, 199, 90, 0.18) 1px, transparent 1px); background-size: 24px 24px; } .bg-radial-fade { - background: radial-gradient(ellipse at center, transparent 0%, #05050f 75%); + background: radial-gradient(ellipse at center, transparent 0%, #ffffff 75%); } -/* Glow orbs */ +/* Glow orbs — green family */ .orb { position: absolute; border-radius: 50%; - filter: blur(80px); - opacity: 0.55; + filter: blur(90px); + opacity: 0.35; pointer-events: none; animation: mesh-float 18s ease-in-out infinite, pulse-glow 9s ease-in-out infinite; } -.orb-iris { background: radial-gradient(circle, #6366f1 0%, transparent 70%); } -.orb-violet { background: radial-gradient(circle, #a855f7 0%, transparent 70%); } -.orb-rose { background: radial-gradient(circle, #ec4899 0%, transparent 70%); } -.orb-tangerine{ background: radial-gradient(circle, #f97316 0%, transparent 70%); } -.orb-azure { background: radial-gradient(circle, #60a5fa 0%, transparent 70%); } -.orb-lime { background: radial-gradient(circle, #34d399 0%, transparent 70%); } +.orb-iris { background: radial-gradient(circle, #03C75A 0%, transparent 70%); } +.orb-violet { background: radial-gradient(circle, #00C4A7 0%, transparent 70%); } +.orb-rose { background: radial-gradient(circle, #2BD673 0%, transparent 70%); } +.orb-tangerine { background: radial-gradient(circle, #84E1A1 0%, transparent 70%); } +.orb-azure { background: radial-gradient(circle, #4FD9C3 0%, transparent 70%); } +.orb-lime { background: radial-gradient(circle, #03C75A 0%, transparent 70%); } -/* Legacy mesh-blob preserved for other pages */ .mesh-blob { position: absolute; border-radius: 50%; @@ -231,27 +246,24 @@ body { } /* ----------------------------------------------------------------- - * Glass / gradient-border cards + * Card surfaces (light glass) * ----------------------------------------------------------------- */ -.glass-dark { - background: rgba(16, 16, 31, 0.6); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.08); -} +.glass-dark, .glass-darker { - background: rgba(10, 10, 24, 0.72); - backdrop-filter: blur(24px); - -webkit-backdrop-filter: blur(24px); - border: 1px solid rgba(255, 255, 255, 0.06); + background: rgba(255, 255, 255, 0.82); + backdrop-filter: blur(18px); + -webkit-backdrop-filter: blur(18px); + border: 1px solid rgba(15, 29, 23, 0.06); + box-shadow: 0 6px 30px -18px rgba(15, 29, 23, 0.18); } .grad-border { position: relative; - background: rgba(16, 16, 31, 0.65); + background: #ffffff; border-radius: 20px; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), - background 0.4s ease; + box-shadow 0.4s ease; + box-shadow: 0 4px 18px -10px rgba(15, 29, 23, 0.12); } .grad-border::before { content: ''; @@ -260,10 +272,9 @@ body { padding: 1px; border-radius: inherit; background: linear-gradient(135deg, - rgba(99, 102, 241, 0.5) 0%, - rgba(168, 85, 247, 0.35) 35%, - rgba(236, 72, 153, 0.25) 65%, - rgba(249, 115, 22, 0.18) 100%); + rgba(3, 199, 90, 0.55) 0%, + rgba(0, 196, 167, 0.38) 50%, + rgba(10, 176, 112, 0.30) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); @@ -277,14 +288,13 @@ body { } .grad-border:hover { transform: translateY(-6px); - background: rgba(24, 24, 48, 0.8); + box-shadow: 0 16px 40px -18px rgba(3, 199, 90, 0.35); } .grad-border:hover::before { background: linear-gradient(135deg, - rgba(99, 102, 241, 0.9) 0%, - rgba(168, 85, 247, 0.75) 35%, - rgba(236, 72, 153, 0.6) 65%, - rgba(249, 115, 22, 0.45) 100%); + rgba(3, 199, 90, 0.95) 0%, + rgba(0, 196, 167, 0.75) 50%, + rgba(10, 176, 112, 0.60) 100%); } /* ----------------------------------------------------------------- @@ -292,51 +302,53 @@ body { * ----------------------------------------------------------------- */ .btn-grad { position: relative; - background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%); - color: white; + background: linear-gradient(135deg, #03C75A 0%, #00C4A7 60%, #0AB070 100%); + color: #ffffff; border-radius: 999px; padding: 14px 28px; - font-weight: 600; + font-weight: 700; letter-spacing: -0.01em; - box-shadow: 0 10px 32px -8px rgba(168, 85, 247, 0.55), - 0 0 0 1px rgba(255, 255, 255, 0.08) inset; + box-shadow: 0 12px 28px -10px rgba(3, 199, 90, 0.5), + 0 0 0 1px rgba(255, 255, 255, 0.14) inset; transition: transform 0.25s ease, box-shadow 0.25s ease; } .btn-grad:hover { transform: translateY(-2px); - box-shadow: 0 16px 40px -8px rgba(168, 85, 247, 0.7), - 0 0 0 1px rgba(255, 255, 255, 0.14) inset; + box-shadow: 0 18px 40px -10px rgba(3, 199, 90, 0.65), + 0 0 0 1px rgba(255, 255, 255, 0.2) inset; } .btn-ghost { - background: rgba(255, 255, 255, 0.04); - color: rgba(255, 255, 255, 0.92); - border: 1px solid rgba(255, 255, 255, 0.14); + background: #ffffff; + color: #0F1D17; + border: 1px solid rgba(15, 29, 23, 0.12); border-radius: 999px; padding: 14px 28px; - font-weight: 600; - backdrop-filter: blur(10px); + font-weight: 700; transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s ease; } .btn-ghost:hover { - background: rgba(255, 255, 255, 0.08); - border-color: rgba(255, 255, 255, 0.28); + background: #F2FBF6; + border-color: #03C75A; + color: #02A149; transform: translateY(-2px); } /* ----------------------------------------------------------------- - * Card lift (legacy + dark variant) + * Card lift * ----------------------------------------------------------------- */ .card-lift { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, background 0.3s ease; + box-shadow: 0 2px 12px -6px rgba(15, 29, 23, 0.1); } .card-lift:hover { - transform: translateY(-6px); + transform: translateY(-4px); + box-shadow: 0 18px 40px -18px rgba(3, 199, 90, 0.25); } /* ----------------------------------------------------------------- - * Link underline (legacy) + * Link underline * ----------------------------------------------------------------- */ .link-underline { position: relative; @@ -349,14 +361,13 @@ body { bottom: -2px; width: 0; height: 2px; - background: var(--color-warm-600); + background: #03C75A; transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .link-underline:hover::after { width: 100%; } -/* Gradient underline for dark theme */ .link-grad { position: relative; display: inline-block; @@ -368,7 +379,7 @@ body { bottom: -3px; width: 0; height: 2px; - background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #f97316); + background: linear-gradient(90deg, #03C75A, #00C4A7, #0AB070); transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .link-grad:hover::after { @@ -391,21 +402,19 @@ body { } /* ----------------------------------------------------------------- - * Conic/orbit decorative ring + * Conic decorative ring * ----------------------------------------------------------------- */ .conic-ring { background: conic-gradient( from 0deg, - #6366f1 0deg, - #a855f7 90deg, - #ec4899 180deg, - #f97316 270deg, - #6366f1 360deg + #03C75A 0deg, + #00C4A7 120deg, + #2BD673 240deg, + #03C75A 360deg ); filter: blur(2px); } -/* Reduce motion preference */ @media (prefers-reduced-motion: reduce) { .reveal, .animate-fade-up, @@ -424,128 +433,138 @@ body { } /* ================================================================= - * SITE-WIDE DARK THEME OVERRIDES - * Legacy pages (stores/blog/about/auth/faq/contact/admin/etc.) - * use warm-*/ink/white color classes. Remap them to dark equivalents - * here so every page inherits the new look without touching code. + * SITE-WIDE LIGHT THEME OVERRIDES + * Remap legacy color tokens (warm / ink / white / sage) to the + * new white + Naver green palette. All sub-pages inherit this + * without code changes. * ================================================================= */ -/* --- Page / section backgrounds (warm-50, warm-100) --- */ -.bg-warm-50 { background-color: #05050f !important; } -.bg-warm-50\/50 { background-color: rgba(5, 5, 15, 0.6) !important; } -.bg-warm-50\/60 { background-color: rgba(5, 5, 15, 0.7) !important; } -.bg-warm-50\/70 { background-color: rgba(5, 5, 15, 0.75) !important; } -.bg-warm-50\/80 { background-color: rgba(5, 5, 15, 0.8) !important; } +/* --- Page / section backgrounds --- */ +.bg-warm-50, +.bg-warm-50\/50, +.bg-warm-50\/60, +.bg-warm-50\/70, +.bg-warm-50\/80 { background-color: #ffffff !important; } -.bg-warm-100 { background-color: #0a0a18 !important; } -.bg-warm-100\/40 { background-color: rgba(10, 10, 24, 0.45) !important; } -.bg-warm-100\/50 { background-color: rgba(10, 10, 24, 0.55) !important; } -.bg-warm-100\/60 { background-color: rgba(10, 10, 24, 0.65) !important; } -.bg-warm-100\/70 { background-color: rgba(10, 10, 24, 0.75) !important; } +.bg-warm-100 { background-color: #F7FAF8 !important; } +.bg-warm-100\/40 { background-color: rgba(247, 250, 248, 0.6) !important; } +.bg-warm-100\/50 { background-color: rgba(247, 250, 248, 0.7) !important; } +.bg-warm-100\/60 { background-color: rgba(247, 250, 248, 0.82) !important; } +.bg-warm-100\/70 { background-color: rgba(247, 250, 248, 0.9) !important; } -.bg-warm-200 { background-color: #10101f !important; } -.bg-warm-200\/50 { background-color: rgba(16, 16, 31, 0.6) !important; } +.bg-warm-200 { background-color: #EFF2F0 !important; } +.bg-warm-200\/50 { background-color: rgba(239, 242, 240, 0.7) !important; } -/* --- Accent color tints (warm-400/500/600 → violet/iris/rose) --- */ -.bg-warm-400\/15 { background-color: rgba(192, 132, 252, 0.14) !important; } -.bg-warm-400\/30 { background-color: rgba(192, 132, 252, 0.28) !important; } -.bg-warm-400\/40 { background-color: rgba(192, 132, 252, 0.38) !important; } -.bg-warm-500 { background-color: #a855f7 !important; color: white !important; } -.bg-warm-500\/10 { background-color: rgba(168, 85, 247, 0.12) !important; } -.bg-warm-500\/15 { background-color: rgba(168, 85, 247, 0.18) !important; } -.bg-warm-500\/20 { background-color: rgba(168, 85, 247, 0.24) !important; } -.bg-warm-600 { background-color: #ec4899 !important; color: white !important; } -.bg-warm-600\/90 { background-color: rgba(236, 72, 153, 0.92) !important; color: white !important; } -.bg-warm-700 { background-color: #6366f1 !important; color: white !important; } -.bg-warm-800 { background-color: #0f0f22 !important; } -.bg-warm-900 { background-color: #050510 !important; } +/* --- Accent tints (warm-400/500/600/700) → Naver green family --- */ +.bg-warm-400\/15 { background-color: rgba(3, 199, 90, 0.12) !important; color: #02A149 !important; } +.bg-warm-400\/30 { background-color: rgba(3, 199, 90, 0.22) !important; color: #02A149 !important; } +.bg-warm-400\/40 { background-color: rgba(3, 199, 90, 0.32) !important; color: #02A149 !important; } +.bg-warm-500 { background-color: #03C75A !important; color: #ffffff !important; } +.bg-warm-500\/10 { background-color: rgba(3, 199, 90, 0.10) !important; } +.bg-warm-500\/15 { background-color: rgba(3, 199, 90, 0.16) !important; } +.bg-warm-500\/20 { background-color: rgba(3, 199, 90, 0.22) !important; } +.bg-warm-600 { background-color: #02A149 !important; color: #ffffff !important; } +.bg-warm-600\/90 { background-color: rgba(2, 161, 73, 0.92) !important; color: #ffffff !important; } +.bg-warm-700 { background-color: #018f40 !important; color: #ffffff !important; } +.bg-warm-800 { background-color: #0F1D17 !important; color: #ffffff !important; } +.bg-warm-900 { background-color: #0A1410 !important; color: #ffffff !important; } -/* --- Ink (dark) backgrounds — now map to darkest navy --- */ -.bg-ink { background-color: #05050f !important; } -.bg-ink\/5 { background-color: rgba(255, 255, 255, 0.04) !important; } -.bg-ink\/10 { background-color: rgba(255, 255, 255, 0.07) !important; } -.bg-ink\/20 { background-color: rgba(255, 255, 255, 0.12) !important; } +/* --- Ink (dark) backgrounds → near-black text surfaces remain, tint utilities soft gray --- */ +.bg-ink { background-color: #0F1D17 !important; color: #ffffff !important; } +.bg-ink\/5 { background-color: rgba(15, 29, 23, 0.04) !important; } +.bg-ink\/10 { background-color: rgba(15, 29, 23, 0.08) !important; } +.bg-ink\/20 { background-color: rgba(15, 29, 23, 0.14) !important; } -/* --- Sage (green) tints --- */ -.bg-sage-500 { background-color: #34d399 !important; color: #05050f !important; } -.bg-sage-500\/5 { background-color: rgba(52, 211, 153, 0.08) !important; } -.bg-sage-500\/10 { background-color: rgba(52, 211, 153, 0.14) !important; } -.bg-sage-500\/15 { background-color: rgba(52, 211, 153, 0.2) !important; } -.bg-sage-500\/90 { background-color: rgba(52, 211, 153, 0.88) !important; color: #05050f !important; } +/* --- Sage → Naver green (preserve semantic meaning) --- */ +.bg-sage-500 { background-color: #03C75A !important; color: #ffffff !important; } +.bg-sage-500\/5 { background-color: rgba(3, 199, 90, 0.06) !important; } +.bg-sage-500\/10 { background-color: rgba(3, 199, 90, 0.12) !important; } +.bg-sage-500\/15 { background-color: rgba(3, 199, 90, 0.18) !important; } +.bg-sage-500\/90 { background-color: rgba(3, 199, 90, 0.92) !important; color: #ffffff !important; } -/* --- White backgrounds → dark glass cards --- */ -.bg-white { - background-color: rgba(16, 16, 31, 0.85) !important; - color: rgba(255, 255, 255, 0.92) !important; -} -.bg-white\/50 { - background-color: rgba(16, 16, 31, 0.55) !important; - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); -} -.bg-white\/60 { - background-color: rgba(16, 16, 31, 0.6) !important; - backdrop-filter: blur(18px); - -webkit-backdrop-filter: blur(18px); -} -.bg-white\/70 { - background-color: rgba(16, 16, 31, 0.65) !important; - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); -} -.bg-white\/80 { - background-color: rgba(16, 16, 31, 0.75) !important; - backdrop-filter: blur(22px); - -webkit-backdrop-filter: blur(22px); -} -.bg-white\/90 { - background-color: rgba(16, 16, 31, 0.85) !important; -} +/* --- White backgrounds — keep truly white --- */ +.bg-white { background-color: #ffffff !important; color: #0F1D17 !important; } +.bg-white\/50 { background-color: rgba(255, 255, 255, 0.7) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } +.bg-white\/60 { background-color: rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } +.bg-white\/70 { background-color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } +.bg-white\/80 { background-color: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } +.bg-white\/90 { background-color: rgba(255, 255, 255, 0.95) !important; } + +/* --- Night backgrounds (dark legacy) → light --- */ +.bg-night-0 { background-color: #ffffff !important; } +.bg-night-0\/70 { background-color: rgba(255, 255, 255, 0.82) !important; } +.bg-night-1 { background-color: #F7FAF8 !important; } +.bg-night-2 { background-color: #EFF2F0 !important; } +.bg-night-3 { background-color: #E4E8E6 !important; } /* --- Text colors --- */ -.text-ink { color: #ffffff !important; } -.text-ink-light { color: rgba(255, 255, 255, 0.68) !important; } -.text-ink-muted { color: rgba(255, 255, 255, 0.45) !important; } -.text-warm-50 { color: #ffffff !important; } -.text-warm-100 { color: rgba(255, 255, 255, 0.9) !important; } -.text-warm-200 { color: rgba(255, 255, 255, 0.72) !important; } -.text-warm-400 { color: #c084fc !important; } -.text-warm-500 { color: #a855f7 !important; } -.text-warm-600 { color: #ec4899 !important; } -.text-warm-700 { color: #818cf8 !important; } -.text-warm-800 { color: #c084fc !important; } -.text-warm-900 { color: #ffffff !important; } -.text-sage-500 { color: #34d399 !important; } -.text-sage-600 { color: #10b981 !important; } +.text-ink { color: #0F1D17 !important; } +.text-ink-light { color: #3E4A44 !important; } +.text-ink-muted { color: #7B8581 !important; } +.text-warm-50 { color: #ffffff !important; } +.text-warm-100 { color: #F7FAF8 !important; } +.text-warm-200 { color: #7B8581 !important; } +.text-warm-400 { color: #03C75A !important; } +.text-warm-500 { color: #03C75A !important; } +.text-warm-600 { color: #02A149 !important; } +.text-warm-700 { color: #018f40 !important; } +.text-warm-800 { color: #0F1D17 !important; } +.text-warm-900 { color: #0A1410 !important; } +.text-sage-500 { color: #03C75A !important; } +.text-sage-600 { color: #02A149 !important; } + +.text-cloud-0 { color: #0F1D17 !important; } +.text-cloud-1 { color: rgba(15, 29, 23, 0.92) !important; } +.text-cloud-2 { color: rgba(15, 29, 23, 0.68) !important; } +.text-cloud-3 { color: rgba(15, 29, 23, 0.5) !important; } +.text-cloud-4 { color: rgba(15, 29, 23, 0.35) !important; } /* --- Borders --- */ -.border-ink { border-color: rgba(255, 255, 255, 0.92) !important; } -.border-ink\/5 { border-color: rgba(255, 255, 255, 0.05) !important; } -.border-ink\/10 { border-color: rgba(255, 255, 255, 0.08) !important; } -.border-ink\/15 { border-color: rgba(255, 255, 255, 0.12) !important; } -.border-ink\/20 { border-color: rgba(255, 255, 255, 0.16) !important; } -.border-ink\/40 { border-color: rgba(255, 255, 255, 0.3) !important; } -.border-warm-200 { border-color: rgba(255, 255, 255, 0.1) !important; } -.border-warm-200\/30{ border-color: rgba(255, 255, 255, 0.12) !important; } -.border-warm-200\/60{ border-color: rgba(255, 255, 255, 0.2) !important; } -.border-warm-500 { border-color: #a855f7 !important; } +.border-ink { border-color: rgba(15, 29, 23, 0.85) !important; } +.border-ink\/5 { border-color: rgba(15, 29, 23, 0.06) !important; } +.border-ink\/10 { border-color: rgba(15, 29, 23, 0.1) !important; } +.border-ink\/15 { border-color: rgba(15, 29, 23, 0.14) !important; } +.border-ink\/20 { border-color: rgba(15, 29, 23, 0.18) !important; } +.border-ink\/40 { border-color: rgba(15, 29, 23, 0.3) !important; } +.border-warm-200 { border-color: #EFF2F0 !important; } +.border-warm-200\/30 { border-color: rgba(239, 242, 240, 0.6) !important; } +.border-warm-200\/60 { border-color: rgba(228, 232, 230, 0.9) !important; } +.border-warm-300\/40 { border-color: rgba(3, 199, 90, 0.28) !important; } +.border-warm-500 { border-color: #03C75A !important; } + +.border-white { border-color: #ffffff !important; } +.border-white\/5 { border-color: rgba(15, 29, 23, 0.05) !important; } +.border-white\/\[0\.06\] { border-color: rgba(15, 29, 23, 0.06) !important; } +.border-white\/\[0\.08\] { border-color: rgba(15, 29, 23, 0.08) !important; } +.border-white\/10 { border-color: rgba(15, 29, 23, 0.08) !important; } +.border-white\/15 { border-color: rgba(15, 29, 23, 0.1) !important; } +.border-white\/20 { border-color: rgba(15, 29, 23, 0.12) !important; } +.border-white\/30 { border-color: rgba(15, 29, 23, 0.18) !important; } + +/* bg white/0.02, 0.03 etc (glass tints on dark theme) → very subtle gray */ +.bg-white\/\[0\.02\] { background-color: #FAFCFB !important; } +.bg-white\/\[0\.03\] { background-color: #F7FAF8 !important; } +.bg-white\/\[0\.04\] { background-color: #F5F8F6 !important; } +.bg-white\/\[0\.05\] { background-color: #F2F6F4 !important; } +.bg-white\/\[0\.08\] { background-color: #EEF3F0 !important; } /* --- Hover variants --- */ -.hover\:bg-warm-50:hover { background-color: rgba(255, 255, 255, 0.03) !important; } -.hover\:bg-warm-100:hover { background-color: rgba(255, 255, 255, 0.05) !important; } -.hover\:bg-warm-200:hover { background-color: rgba(255, 255, 255, 0.08) !important; } -.hover\:bg-warm-400:hover { background-color: #c084fc !important; } -.hover\:bg-warm-500:hover { background-color: #a855f7 !important; } -.hover\:bg-warm-600:hover { background-color: #ec4899 !important; } -.hover\:bg-warm-700:hover { background-color: #6366f1 !important; } -.hover\:bg-warm-800:hover { background-color: #10101f !important; } -.hover\:text-warm-600:hover { color: #ec4899 !important; } -.hover\:text-warm-700:hover { color: #818cf8 !important; } -.hover\:text-warm-800:hover { color: #c084fc !important; } -.hover\:border-ink\/40:hover{ border-color: rgba(255, 255, 255, 0.3) !important; } -.hover\:border-warm-200:hover { border-color: rgba(255, 255, 255, 0.2) !important; } +.hover\:bg-warm-50:hover { background-color: #F7FAF8 !important; } +.hover\:bg-warm-100:hover { background-color: #EFF2F0 !important; } +.hover\:bg-warm-200:hover { background-color: #E4E8E6 !important; } +.hover\:bg-warm-400:hover { background-color: #2BD673 !important; color: #ffffff !important; } +.hover\:bg-warm-500:hover { background-color: #02A149 !important; color: #ffffff !important; } +.hover\:bg-warm-600:hover { background-color: #018f40 !important; color: #ffffff !important; } +.hover\:bg-warm-700:hover { background-color: #0F1D17 !important; color: #ffffff !important; } +.hover\:bg-warm-800:hover { background-color: #0A1410 !important; color: #ffffff !important; } +.hover\:text-warm-600:hover { color: #02A149 !important; } +.hover\:text-warm-700:hover { color: #018f40 !important; } +.hover\:text-warm-800:hover { color: #0F1D17 !important; } +.hover\:border-ink\/40:hover { border-color: rgba(15, 29, 23, 0.3) !important; } +.hover\:border-warm-200:hover { border-color: #03C75A !important; } +.hover\:text-cloud-0:hover { color: #03C75A !important; } -/* --- Form inputs: dark theme by default --- */ +/* --- Form inputs: light theme --- */ input[type="text"], input[type="email"], input[type="password"], @@ -559,64 +578,98 @@ input[type="datetime-local"], input:not([type]), textarea, select { - background-color: rgba(16, 16, 31, 0.6) !important; - border: 1px solid rgba(255, 255, 255, 0.1) !important; - color: #ffffff !important; + background-color: #ffffff !important; + border: 1px solid #E4E8E6 !important; + color: #0F1D17 !important; border-radius: 10px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } input::placeholder, textarea::placeholder { - color: rgba(255, 255, 255, 0.35) !important; + color: rgba(15, 29, 23, 0.42) !important; } input:focus, textarea:focus, select:focus { - border-color: #a855f7 !important; - box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.18) !important; + border-color: #03C75A !important; + box-shadow: 0 0 0 4px rgba(3, 199, 90, 0.18) !important; outline: none !important; } -/* Checkbox / radio — keep accent purple */ input[type="checkbox"], input[type="radio"] { - accent-color: #a855f7; + accent-color: #03C75A; } -/* Option elements inside select */ select option { - background-color: #10101f; - color: #ffffff; + background-color: #ffffff; + color: #0F1D17; } -/* --- Blog article prose (if used) --- */ +/* --- Blog article prose --- */ .prose, .prose-lg, .prose-xl { - --tw-prose-body: rgba(255, 255, 255, 0.78); - --tw-prose-headings: #ffffff; - --tw-prose-lead: rgba(255, 255, 255, 0.72); - --tw-prose-links: #c084fc; - --tw-prose-bold: #ffffff; - --tw-prose-counters: rgba(255, 255, 255, 0.5); - --tw-prose-bullets: rgba(255, 255, 255, 0.35); - --tw-prose-hr: rgba(255, 255, 255, 0.1); - --tw-prose-quotes: rgba(255, 255, 255, 0.85); - --tw-prose-quote-borders: rgba(168, 85, 247, 0.5); - --tw-prose-captions: rgba(255, 255, 255, 0.5); - --tw-prose-code: #f472b6; - --tw-prose-pre-code: #e4e4e7; - --tw-prose-pre-bg: rgba(16, 16, 31, 0.75); - --tw-prose-th-borders: rgba(255, 255, 255, 0.15); - --tw-prose-td-borders: rgba(255, 255, 255, 0.08); + --tw-prose-body: #3E4A44; + --tw-prose-headings: #0F1D17; + --tw-prose-lead: #3E4A44; + --tw-prose-links: #02A149; + --tw-prose-bold: #0F1D17; + --tw-prose-counters: #7B8581; + --tw-prose-bullets: #B6BEB9; + --tw-prose-hr: #E4E8E6; + --tw-prose-quotes: #0F1D17; + --tw-prose-quote-borders: #03C75A; + --tw-prose-captions: #7B8581; + --tw-prose-code: #02A149; + --tw-prose-pre-code: #0F1D17; + --tw-prose-pre-bg: #F7FAF8; + --tw-prose-th-borders: #E4E8E6; + --tw-prose-td-borders: #EFF2F0; } -/* --- Placeholder/disabled states --- */ *:disabled { opacity: 0.5; cursor: not-allowed; } -/* --- Ensure html/body stay dark for non-home routes too --- */ html, body { - background-color: #05050f; - color-scheme: dark; + background-color: #ffffff; + color-scheme: light; +} + +/* ----------------------------------------------------------------- + * Mobile-first helpers for the app-style home layout + * ----------------------------------------------------------------- */ +.category-tile { + position: relative; + overflow: hidden; + border-radius: 24px; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} +.category-tile:active { transform: scale(0.98); } +.category-tile.primary { + background: linear-gradient(135deg, #03C75A 0%, #02A149 55%, #018f40 100%); + color: #ffffff; + box-shadow: 0 16px 40px -12px rgba(3, 199, 90, 0.45); +} +.category-tile.soft { + background: #F2FBF6; + color: #02A149; + border: 1px solid #D5EEE0; +} +.category-tile.neutral { + background: #ffffff; + color: #0F1D17; + border: 1px solid #E4E8E6; +} + +/* Photo hero for property detail */ +.photo-hero { + position: relative; + width: 100%; + aspect-ratio: 4 / 3; + overflow: hidden; + background: #EFF2F0; +} +@media (min-width: 768px) { + .photo-hero { aspect-ratio: 16 / 9; border-radius: 24px; } } diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 1805543..64ffd06 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -75,22 +75,32 @@ const NAV_LINKS = [ { href: '/faq', label: 'FAQ' }, ]; +const MOBILE_TABS = [ + { href: '/', label: '홈', icon: 'M3 12l9-9 9 9M5 10v10h14V10' }, + { href: '/stores', label: '매장', icon: 'M21 21l-4.35-4.35M16 10a6 6 0 10-12 0 6 6 0 0012 0z' }, + { href: '/matching', label: '매칭', icon: 'M7 8h10M7 12h6M7 16h10M3 4h18v16H3z' }, + { href: '/subsidies', label: '지원금', icon: 'M12 3v18M6 8h9a3 3 0 010 6H9a3 3 0 000 6h9' }, +]; + async function Navigation() { const session = await auth(); const isOperator = session?.user && OPERATOR_ROLES.includes(session.user.primaryRole); return ( -
); } +function MobileTabBar() { + return ( + + ); +} + function Footer() { return ( -