Migrate saju service UI

This commit is contained in:
2026-05-28 03:16:42 +09:00
parent 86f020182a
commit d8dcf682c4
23 changed files with 1800 additions and 170 deletions

View File

@@ -3,6 +3,8 @@
/* paper texture */
.saju-v2 .paper-bg {
background:
linear-gradient(rgba(247, 242, 232, 0.86), rgba(251, 247, 239, 0.92)),
url('/images/saju/horyung/background.png') center top / cover no-repeat,
radial-gradient(ellipse at top, rgba(212, 175, 55, 0.06), transparent 60%),
radial-gradient(ellipse at bottom, rgba(106, 76, 124, 0.04), transparent 60%),
linear-gradient(180deg, var(--ivory) 0%, var(--ivory-soft) 100%);
@@ -30,6 +32,8 @@
.saju-v2 .mt-wash {
position: relative;
background:
linear-gradient(rgba(251, 247, 239, 0.82), rgba(244, 236, 219, 0.9)),
url('/images/saju/horyung/background.png') center top / cover no-repeat,
radial-gradient(ellipse 70% 50% at 10% 80%, rgba(31, 42, 68, 0.06), transparent 65%),
radial-gradient(ellipse 60% 40% at 90% 70%, rgba(31, 42, 68, 0.05), transparent 65%),
radial-gradient(ellipse 100% 60% at 50% 100%, rgba(212, 175, 55, 0.04), transparent 70%),
@@ -49,6 +53,34 @@
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 180' fill='none' stroke='%231F2A44' stroke-width='1' opacity='0.4'><path d='M0 160 L50 100 L100 140 L160 70 L220 130 L280 90 L330 140 L380 110 L380 180 L0 180 Z'/></svg>");
}
.saju-v2 .k-frame {
position: relative;
background: rgba(251, 247, 239, 0.9);
border: 1px solid rgba(31, 42, 68, 0.10);
border-radius: 14px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 28px rgba(31, 42, 68, 0.05);
}
.saju-v2 .k-frame::before {
content: '';
position: absolute;
inset: 6px;
border: 1px solid rgba(212, 175, 55, 0.16);
border-radius: 10px;
pointer-events: none;
}
.saju-v2 .k-frame.dark {
background: #1F2A44;
border: 1px solid rgba(212, 175, 55, 0.4);
color: #F7F2E8;
box-shadow: 0 1px 0 rgba(212, 175, 55, 0.2) inset, 0 12px 40px rgba(31, 42, 68, 0.2);
}
.saju-v2 .k-frame.dark::before {
border-color: rgba(212, 175, 55, 0.25);
}
/* screen entry */
@keyframes saju-screen-in {
from { transform: translateY(6px); opacity: 0.8; }
@@ -76,6 +108,6 @@
@media (min-width: 1024px) {
.saju-v2 .page {
padding-bottom: 0;
padding-top: var(--desktop-header-h);
padding-top: 0;
}
}