.sk-jr-wrapper {
max-width: 900px;
margin: 2rem auto;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #1a1a1a;
}
.sk-jr-header {
margin-bottom: 1.5rem;
}
.sk-jr-headline {
font-size: 1.4rem;
font-weight: 600;
margin: 0 0 0.5rem;
color: #0f172a;
}
.sk-jr-intro {
font-size: 0.95rem;
line-height: 1.4;
color: #475569;
margin: 0;
} .sk-jr-table-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
padding: 1rem;
box-shadow: 0 12px 30px -10px rgba(0,0,0,0.08);
margin-bottom: 1.5rem;
}
.sk-jr-table-head {
display: grid;
grid-template-columns: 1fr 110px 120px 32px;
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
border-bottom: 1px solid #e2e8f0;
padding: 0 0 0.5rem;
margin-bottom: 0.5rem;
}
.sk-jr-row {
display: grid;
grid-template-columns: 1fr 110px 120px 32px;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.sk-jr-col-name,
.sk-jr-col-amount,
.sk-jr-col-interval,
.sk-jr-col-remove {
display: flex;
flex-direction: column;
}
.sk-jr-input-name,
.sk-jr-input-amount,
.sk-jr-select-interval {
width: 100%;
font-size: 0.9rem;
padding: 0.6rem 0.6rem;
border-radius: 0.5rem;
border: 1px solid #cbd5e1;
background: #fff;
color: #0f172a;
line-height: 1.2;
}
.sk-jr-input-amount {
text-align: right;
}
.sk-jr-input-name:focus,
.sk-jr-input-amount:focus,
.sk-jr-select-interval:focus {
outline: 2px solid #38bdf8;
border-color: #38bdf8;
}
.sk-jr-remove-row-btn {
border: 0;
background: #ffe4e6;
color: #be123c;
font-size: 0.8rem;
line-height: 1;
padding: 0.4rem 0.4rem;
cursor: pointer;
border-radius: 0.5rem;
font-weight: 600;
}
.sk-jr-remove-row-btn:hover {
background: #fecdd3;
} .sk-jr-add-row-btn {
margin-top: 0.75rem;
font-size: 0.9rem;
font-weight: 600;
background: #f8fafc;
border: 1px dashed #94a3b8;
border-radius: 0.6rem;
padding: 0.7rem 1rem;
cursor: pointer;
color: #334155;
width: 100%;
text-align: center;
}
.sk-jr-add-row-btn:hover {
background: #f1f5f9;
} .sk-jr-result-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 700px){
.sk-jr-result-grid {
grid-template-columns: 1fr;
}
} .sk-jr-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
box-shadow: 0 20px 40px -16px rgba(0,0,0,0.12);
padding: 1rem 1rem 1.2rem;
display: flex;
flex-direction: column;
min-height: 220px;
}
.sk-jr-card-headline {
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 0.5rem;
}
.sk-jr-total-year {
font-size: 1.4rem;
font-weight: 600;
color: #0f172a;
line-height: 1.2;
}
.sk-jr-total-month {
font-size: 0.95rem;
color: #475569;
margin-top: 0.3rem;
}
.sk-jr-hint {
margin-top: 0.9rem;
font-size: 0.8rem;
line-height: 1.4;
color: #64748b;
} .sk-jr-saving-card {
background: #f0fdf4;
border: 1px solid #86efac;
box-shadow: 0 20px 40px -16px rgba(16,185,129,0.4);
}
.sk-jr-saving-amount {
font-size: 1.4rem;
font-weight: 600;
color: #065f46;
line-height: 1.2;
}
.sk-jr-saving-hint {
font-size: 0.9rem;
color: #065f46;
margin-top: 0.3rem;
line-height: 1.4;
font-weight: 500;
}
.sk-jr-saving-list {
margin-top: 1rem;
font-size: 0.85rem;
line-height: 1.4;
color: #064e3b;
}
.sk-jr-saving-item {
background: #ffffff;
border: 1px solid #bbf7d0;
border-radius: 0.6rem;
padding: 0.7rem 0.8rem 0.8rem;
box-shadow: 0 12px 22px -12px rgba(0,0,0,0.15);
margin-bottom: 0.6rem;
}
.sk-jr-saving-item-head {
font-weight: 600;
font-size: 0.9rem;
color: #065f46;
margin-bottom: 0.2rem;
}
.sk-jr-saving-item-text {
font-size: 0.8rem;
color: #065f46;
line-height: 1.4;
margin-bottom: 0.4rem;
}
.sk-jr-saving-cta {
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
background: #065f46;
color: #ecfdf5;
padding: 0.4rem 0.6rem;
border-radius: 0.5rem;
}
.sk-jr-saving-cta:hover {
background: #047857;
} .sk-jr-legal {
font-size: 0.7rem;
color: #64748b;
margin-top: auto;
line-height: 1.4;
}