gahusb
d1526af32c
공고 목록 탭에 📅 캘린더 토글 버튼 추가. 캘린더 모드: 월간 그리드, 접수 시작일 기준 도트 표시 (상태별 색상). 날짜 클릭 시 해당일 공고 목록 패널 표시, 항목 클릭 시 상세 뷰로 전환. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1657 lines
40 KiB
CSS
1657 lines
40 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════════
|
|
Subscription.css — 청약 관리 페이지
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
.sub {
|
|
display: grid;
|
|
gap: 24px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* ── 헤더 ─────────────────────────────────────────────────────────────── */
|
|
|
|
.sub-header {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
|
gap: 24px;
|
|
align-items: center;
|
|
}
|
|
|
|
.sub-kicker {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3em;
|
|
font-size: 12px;
|
|
color: var(--accent-subscription, #f43f5e);
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.sub-header h1 {
|
|
margin: 0 0 10px;
|
|
font-family: var(--font-display);
|
|
font-size: clamp(28px, 4vw, 38px);
|
|
}
|
|
|
|
.sub-desc {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.sub-header-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ── 스탯 바 ──────────────────────────────────────────────────────────── */
|
|
|
|
.sub-stats-bar {
|
|
display: flex;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface);
|
|
overflow: hidden;
|
|
align-self: center;
|
|
}
|
|
|
|
.sub-stat-item {
|
|
padding: 16px 20px;
|
|
text-align: center;
|
|
border-right: 1px solid var(--line);
|
|
flex: 1;
|
|
}
|
|
|
|
.sub-stat-item:last-child { border-right: none; }
|
|
|
|
.sub-stat-item__value {
|
|
font-family: var(--font-display);
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: var(--text-bright);
|
|
margin: 0;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.sub-stat-item__label {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
margin: 6px 0 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* ── 내 조건 카드 ─────────────────────────────────────────────────────── */
|
|
|
|
.sub-profile-card {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 24px;
|
|
align-items: center;
|
|
border: 1px solid rgba(244, 63, 94, 0.25);
|
|
border-radius: var(--radius-lg);
|
|
background: linear-gradient(135deg, rgba(244,63,94,0.05) 0%, rgba(139,92,246,0.05) 100%);
|
|
padding: 20px 24px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sub-profile-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #f43f5e, #8b5cf6);
|
|
}
|
|
|
|
.sub-profile-card__title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.sub-profile-card__label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.sub-profile-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.sub-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3px 10px;
|
|
border-radius: 100px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sub-tag.is-pass {
|
|
background: rgba(52, 211, 153, 0.12);
|
|
color: #34d399;
|
|
border: 1px solid rgba(52, 211, 153, 0.2);
|
|
}
|
|
|
|
.sub-tag.is-fail {
|
|
background: rgba(248, 113, 113, 0.1);
|
|
color: #f87171;
|
|
border: 1px solid rgba(248, 113, 113, 0.2);
|
|
}
|
|
|
|
.sub-tag.is-neutral {
|
|
background: var(--neon-cyan-muted);
|
|
color: var(--neon-cyan);
|
|
border: 1px solid rgba(0, 212, 255, 0.15);
|
|
}
|
|
|
|
.sub-tag.is-special {
|
|
background: rgba(244, 63, 94, 0.1);
|
|
color: #f43f5e;
|
|
border: 1px solid rgba(244, 63, 94, 0.2);
|
|
}
|
|
|
|
.sub-profile-card__right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sub-profile-score {
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sub-profile-score__number {
|
|
font-family: var(--font-display);
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
color: #f43f5e;
|
|
line-height: 1;
|
|
filter: drop-shadow(0 0 12px rgba(244, 63, 94, 0.4));
|
|
}
|
|
|
|
.sub-profile-score__label {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.sub-profile-score__breakdown {
|
|
display: grid;
|
|
gap: 8px;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.sub-score-row {
|
|
display: grid;
|
|
grid-template-columns: 60px 1fr 40px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.sub-score-bar {
|
|
height: 5px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-radius: 100px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sub-score-bar__fill {
|
|
height: 100%;
|
|
border-radius: 100px;
|
|
transition: width 0.5s var(--ease-out);
|
|
}
|
|
|
|
.sub-score-val {
|
|
text-align: right;
|
|
color: var(--text-dim);
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* ── 탭 바 ────────────────────────────────────────────────────────────── */
|
|
|
|
.sub-tabs-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sub-tabs {
|
|
display: flex;
|
|
gap: 2px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
padding: 4px;
|
|
}
|
|
|
|
.sub-tab {
|
|
padding: 8px 20px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-dim);
|
|
border-radius: var(--radius-xs);
|
|
cursor: pointer;
|
|
font-family: var(--font-body);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
transition: all 0.2s var(--ease-out);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sub-tab:hover { color: var(--text-bright); background: var(--surface-raised); }
|
|
|
|
.sub-tab.is-active {
|
|
color: var(--text-bright);
|
|
background: var(--bg-tertiary);
|
|
box-shadow: 0 0 0 1px var(--line);
|
|
}
|
|
|
|
/* ── 필터 ─────────────────────────────────────────────────────────────── */
|
|
|
|
.sub-filter {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sub-filter-btn {
|
|
padding: 4px 12px;
|
|
border: 1px solid var(--line);
|
|
background: transparent;
|
|
color: var(--text-dim);
|
|
border-radius: 100px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-family: var(--font-body);
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.sub-filter-btn:hover { border-color: var(--line-bright); color: var(--text); }
|
|
|
|
.sub-filter-btn.is-active {
|
|
background: rgba(244, 63, 94, 0.1);
|
|
border-color: rgba(244, 63, 94, 0.35);
|
|
color: #f43f5e;
|
|
}
|
|
|
|
/* ── 목록 레이아웃 ────────────────────────────────────────────────────── */
|
|
|
|
.sub-list-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 400px;
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
.sub-card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
/* ── 청약 카드 ────────────────────────────────────────────────────────── */
|
|
|
|
.sub-card {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px;
|
|
background: var(--surface);
|
|
cursor: pointer;
|
|
display: grid;
|
|
gap: 8px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.2s var(--ease-out);
|
|
animation: fadeIn 0.25s var(--ease-out) both;
|
|
}
|
|
|
|
.sub-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #f43f5e, #8b5cf6);
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.sub-card:hover { border-color: var(--line-bright); background: var(--surface-raised); transform: translateY(-2px); box-shadow: var(--shadow-md); }
|
|
.sub-card:hover::before, .sub-card.is-selected::before { opacity: 1; }
|
|
.sub-card.is-selected { border-color: rgba(244, 63, 94, 0.4); background: var(--surface-raised); box-shadow: 0 0 20px rgba(244,63,94,0.1); }
|
|
|
|
.sub-card__top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.sub-card__badges {
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
}
|
|
|
|
.sub-card__name {
|
|
font-family: var(--font-display);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
color: var(--text-bright);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.sub-card__address {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.sub-card__info {
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.sub-card__dot { color: var(--text-muted); }
|
|
|
|
.sub-card__bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.sub-card__dday {
|
|
font-family: var(--font-display);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* ── 뱃지류 ───────────────────────────────────────────────────────────── */
|
|
|
|
.sub-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: 100px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.sub-badge--lg { padding: 3px 10px; font-size: 11px; }
|
|
|
|
.sub-type-badge {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.sub-type-badge--lg { font-size: 12px; }
|
|
|
|
.sub-special-badge {
|
|
font-size: 10px;
|
|
background: rgba(244, 63, 94, 0.1);
|
|
color: #f43f5e;
|
|
border-radius: 100px;
|
|
padding: 1px 6px;
|
|
}
|
|
|
|
.sub-eligibility {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 2px 8px;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.sub-eligibility.is-ok { color: #34d399; background: rgba(52,211,153,0.1); }
|
|
.sub-eligibility.is-warn { color: #f59e0b; background: rgba(245,158,11,0.1); }
|
|
.sub-eligibility--badge { font-size: 10px; }
|
|
|
|
/* ── 상세 패널 ────────────────────────────────────────────────────────── */
|
|
|
|
.sub-detail-panel {
|
|
position: sticky;
|
|
top: 24px;
|
|
}
|
|
|
|
.sub-detail {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface);
|
|
overflow: hidden;
|
|
animation: fadeIn 0.2s var(--ease-out);
|
|
}
|
|
|
|
.sub-detail--empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 24px;
|
|
gap: 12px;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
min-height: 300px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sub-detail__empty-icon { font-size: 44px; opacity: 0.3; }
|
|
|
|
.sub-detail__header {
|
|
padding: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.sub-detail__badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.sub-detail__name {
|
|
font-family: var(--font-display);
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
margin: 0 0 4px;
|
|
color: var(--text-bright);
|
|
}
|
|
|
|
.sub-detail__address {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.sub-detail__actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sub-detail__price {
|
|
padding: 14px 20px;
|
|
border-bottom: 1px solid var(--line);
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sub-detail__price-label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.sub-detail__price-value {
|
|
font-family: var(--font-display);
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.sub-detail__price-loan {
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* ── 상세 섹션 탭 ─────────────────────────────────────────────────────── */
|
|
|
|
.sub-detail__sections { }
|
|
|
|
.sub-section-tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.sub-section-tab {
|
|
padding: 10px 14px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-dim);
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
transition: all 0.15s;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.sub-section-tab:hover { color: var(--text); }
|
|
|
|
.sub-section-tab.is-active {
|
|
color: #f43f5e;
|
|
border-bottom-color: #f43f5e;
|
|
}
|
|
|
|
.sub-detail__section-content { padding: 16px 20px; }
|
|
|
|
.sub-detail__memo {
|
|
padding: 14px 20px;
|
|
border-top: 1px solid var(--line-subtle);
|
|
}
|
|
|
|
.sub-detail__memo-title {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--text-muted);
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.sub-detail__memo p {
|
|
font-size: 13px;
|
|
color: var(--text-dim);
|
|
margin: 0;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ── 요건 비교표 ──────────────────────────────────────────────────────── */
|
|
|
|
.sub-compare {
|
|
display: grid;
|
|
gap: 0;
|
|
}
|
|
|
|
.sub-compare__row {
|
|
display: grid;
|
|
grid-template-columns: 90px 1fr 1fr 20px;
|
|
gap: 8px;
|
|
align-items: center;
|
|
padding: 9px 0;
|
|
border-bottom: 1px solid var(--line-subtle);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.sub-compare__row:last-of-type { border-bottom: none; }
|
|
|
|
.sub-compare__label {
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.sub-compare__required {
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.sub-compare__mine {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sub-compare__row.is-pass .sub-compare__mine { color: #34d399; }
|
|
.sub-compare__row.is-fail .sub-compare__mine { color: #f87171; }
|
|
|
|
.sub-compare__icon {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
text-align: right;
|
|
}
|
|
|
|
.sub-compare__row.is-pass .sub-compare__icon { color: #34d399; }
|
|
.sub-compare__row.is-fail .sub-compare__icon { color: #f87171; }
|
|
|
|
.sub-compare__notes {
|
|
margin: 10px 0 0;
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
background: rgba(255,255,255,0.02);
|
|
border-radius: var(--radius-xs);
|
|
padding: 8px 10px;
|
|
border-left: 2px solid rgba(244,63,94,0.4);
|
|
}
|
|
|
|
.sub-empty-sm {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
/* ── 일정 미니 ────────────────────────────────────────────────────────── */
|
|
|
|
.sub-schedule-mini {
|
|
display: grid;
|
|
gap: 0;
|
|
}
|
|
|
|
.sub-schedule-mini__item {
|
|
display: grid;
|
|
grid-template-columns: 10px 1fr auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 9px 0;
|
|
border-bottom: 1px solid var(--line-subtle);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.sub-schedule-mini__item:last-child { border-bottom: none; }
|
|
|
|
.sub-schedule-mini__dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sub-schedule-mini__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
|
|
.sub-schedule-mini__label { color: var(--text-dim); font-size: 12px; }
|
|
.sub-schedule-mini__date { color: var(--text-bright); font-size: 12px; font-weight: 500; }
|
|
.sub-schedule-mini__dday { font-family: var(--font-display); font-size: 11px; font-weight: 700; white-space: nowrap; }
|
|
|
|
/* ── 자금 섹션 ────────────────────────────────────────────────────────── */
|
|
|
|
.sub-finance {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.sub-finance__total {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sub-finance__total-label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.sub-finance__total-value {
|
|
font-family: var(--font-display);
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--text-bright);
|
|
}
|
|
|
|
.sub-finance__breakdown { }
|
|
|
|
.sub-finance__bar {
|
|
display: flex;
|
|
height: 8px;
|
|
border-radius: 100px;
|
|
overflow: hidden;
|
|
margin-bottom: 10px;
|
|
gap: 1px;
|
|
}
|
|
|
|
.sub-finance__bar > div {
|
|
border-radius: 0;
|
|
transition: width 0.4s var(--ease-out);
|
|
}
|
|
|
|
.sub-finance__bar > div:first-child { border-radius: 100px 0 0 100px; }
|
|
.sub-finance__bar > div:last-child { border-radius: 0 100px 100px 0; }
|
|
|
|
.sub-finance__legend {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.sub-finance__legend span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
|
|
.sub-finance__legend em {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 2px;
|
|
flex-shrink: 0;
|
|
font-style: normal;
|
|
}
|
|
|
|
.sub-finance__fund {
|
|
border-top: 1px solid var(--line-subtle);
|
|
padding-top: 12px;
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.sub-finance__fund-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto auto;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
align-items: center;
|
|
}
|
|
|
|
.sub-finance__fund-row--warn {
|
|
color: #f87171;
|
|
}
|
|
|
|
.sub-finance__fund-type {
|
|
font-size: 10px;
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 4px;
|
|
padding: 1px 6px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ── 일정 탭 ──────────────────────────────────────────────────────────── */
|
|
|
|
.sub-sched-panel {
|
|
padding: 24px;
|
|
display: grid;
|
|
gap: 28px;
|
|
}
|
|
|
|
.sub-sched-group {
|
|
display: grid;
|
|
gap: 0;
|
|
}
|
|
|
|
.sub-sched-group__title {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--text-muted);
|
|
margin: 0 0 12px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.sub-sched-group__title--past { opacity: 0.5; }
|
|
|
|
.sub-sched-row {
|
|
display: grid;
|
|
grid-template-columns: 110px 10px 1fr;
|
|
gap: 0 16px;
|
|
align-items: center;
|
|
padding: 13px 0;
|
|
border-bottom: 1px solid var(--line-subtle);
|
|
}
|
|
|
|
.sub-sched-row:last-child { border-bottom: none; }
|
|
|
|
.sub-sched-row__dates {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 3px;
|
|
}
|
|
|
|
.sub-sched-row__dday {
|
|
font-family: var(--font-display);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sub-sched-row__date {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.sub-sched-row__dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
justify-self: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sub-sched-row__content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sub-sched-row__complex {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-bright);
|
|
}
|
|
|
|
.sub-sched-row__label {
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* ── 자금 탭 ──────────────────────────────────────────────────────────── */
|
|
|
|
.sub-finance-tab {
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
|
|
.sub-finance-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 14px;
|
|
}
|
|
|
|
.sub-fin-stat {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
padding: 18px 20px;
|
|
background: var(--surface);
|
|
text-align: center;
|
|
}
|
|
|
|
.sub-fin-stat__label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--text-muted);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.sub-fin-stat__value {
|
|
font-family: var(--font-display);
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--text-bright);
|
|
margin: 0;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* ── 패널 공통 ────────────────────────────────────────────────────────── */
|
|
|
|
.sub-panel {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sub-panel__head {
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid var(--line);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.sub-panel__eyebrow {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.22em;
|
|
font-size: 10px;
|
|
color: var(--accent-subscription, #f43f5e);
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.sub-panel__head h3 {
|
|
margin: 0 0 3px;
|
|
font-family: var(--font-display);
|
|
font-size: 18px;
|
|
}
|
|
|
|
.sub-panel__sub {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.sub-panel__body {
|
|
padding: 20px 24px;
|
|
}
|
|
|
|
/* ── 모달 공통 ────────────────────────────────────────────────────────── */
|
|
|
|
.sub-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(7, 11, 25, 0.85);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
z-index: 200;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
}
|
|
|
|
.sub-modal {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid rgba(244, 63, 94, 0.3);
|
|
border-radius: var(--radius-xl);
|
|
width: 100%;
|
|
max-width: 500px;
|
|
max-height: 88vh;
|
|
overflow-y: auto;
|
|
box-shadow: var(--shadow-lg), 0 0 60px rgba(244,63,94,0.06);
|
|
animation: fadeIn 0.2s var(--ease-out);
|
|
}
|
|
|
|
.sub-modal--wide { max-width: 640px; }
|
|
|
|
.sub-modal__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 18px 24px;
|
|
border-bottom: 1px solid var(--line);
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--bg-secondary);
|
|
z-index: 1;
|
|
}
|
|
|
|
.sub-modal__header h3 { font-family: var(--font-display); font-size: 17px; margin: 0; }
|
|
|
|
.sub-modal__score {
|
|
font-family: var(--font-display);
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #f43f5e;
|
|
}
|
|
|
|
.sub-modal__close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-dim);
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
padding: 6px 8px;
|
|
border-radius: var(--radius-xs);
|
|
transition: color 0.15s, background 0.15s;
|
|
line-height: 1;
|
|
}
|
|
|
|
.sub-modal__close:hover { color: var(--text-bright); background: rgba(255,255,255,0.06); }
|
|
|
|
.sub-modal__tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 0 16px;
|
|
background: var(--bg-secondary);
|
|
position: sticky;
|
|
top: 57px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sub-modal__tab {
|
|
padding: 10px 14px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-dim);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
transition: all 0.15s;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.sub-modal__tab:hover { color: var(--text); }
|
|
.sub-modal__tab.is-active { color: #f43f5e; border-bottom-color: #f43f5e; }
|
|
|
|
.sub-modal__form { padding: 0; }
|
|
|
|
.sub-modal__footer {
|
|
padding: 16px 24px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
border-top: 1px solid var(--line);
|
|
background: var(--bg-secondary);
|
|
position: sticky;
|
|
bottom: 0;
|
|
}
|
|
|
|
/* ── 폼 요소 ──────────────────────────────────────────────────────────── */
|
|
|
|
.sub-form-section {
|
|
padding: 18px 24px;
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.sub-form-section__title {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.sub-form-section__hint {
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.sub-form-section__sub {
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
margin: 4px 0 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sub-form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.sub-form-row--three { grid-template-columns: 1fr 1fr 1fr; }
|
|
|
|
.sub-form-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sub-form-hint {
|
|
font-size: 10px;
|
|
color: var(--text-dim);
|
|
opacity: 0.7;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.sub-profile-hint {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 10px 14px;
|
|
background: color-mix(in srgb, var(--accent-cyan) 8%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--accent-cyan) 25%, transparent);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
line-height: 1.5;
|
|
margin: 0 16px 4px;
|
|
}
|
|
.sub-profile-hint__icon { flex-shrink: 0; font-size: 14px; }
|
|
|
|
.sub-form-input {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
padding: 8px 11px;
|
|
color: var(--text-bright);
|
|
font-family: var(--font-body);
|
|
font-size: 13px;
|
|
transition: border-color 0.15s;
|
|
width: 100%;
|
|
}
|
|
|
|
.sub-form-input:focus {
|
|
outline: none;
|
|
border-color: rgba(244, 63, 94, 0.5);
|
|
box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.08);
|
|
}
|
|
|
|
.sub-form-input option { background: var(--bg-secondary); }
|
|
|
|
.sub-form-textarea { resize: vertical; min-height: 64px; }
|
|
|
|
.sub-form-checks {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sub-form-check-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.sub-form-check {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sub-form-check input[type="checkbox"] {
|
|
width: 14px;
|
|
height: 14px;
|
|
accent-color: #f43f5e;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ── 공통 ─────────────────────────────────────────────────────────────── */
|
|
|
|
.sub-empty {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
text-align: center;
|
|
padding: 48px 24px;
|
|
}
|
|
|
|
/* ── 반응형 ───────────────────────────────────────────────────────────── */
|
|
|
|
@media (max-width: 1024px) {
|
|
.sub-list-layout { grid-template-columns: 1fr 360px; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sub-list-layout { grid-template-columns: 1fr; }
|
|
.sub-detail-panel { position: static; }
|
|
.sub-profile-card { grid-template-columns: 1fr; }
|
|
.sub-profile-card__right { flex-direction: column; align-items: flex-start; }
|
|
.sub-profile-score__breakdown { min-width: 0; width: 100%; }
|
|
.sub-header { grid-template-columns: 1fr; }
|
|
.sub-stats-bar { display: grid; grid-template-columns: repeat(2, 1fr); }
|
|
.sub-stat-item { border-right: none; border-bottom: 1px solid var(--line); }
|
|
.sub-stat-item:nth-child(1), .sub-stat-item:nth-child(2) { border-right: 1px solid var(--line); }
|
|
.sub-stat-item:nth-child(3), .sub-stat-item:nth-child(4) { border-bottom: none; }
|
|
.sub-finance-summary { grid-template-columns: 1fr; }
|
|
.sub-form-row { grid-template-columns: 1fr; }
|
|
.sub-form-row--three { grid-template-columns: 1fr; }
|
|
.sub-form-check-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.sub-tabs-bar { flex-direction: column; align-items: flex-start; }
|
|
.sub-sched-row { grid-template-columns: 90px 10px 1fr; gap: 0 10px; }
|
|
.sub-compare__row { grid-template-columns: 70px 1fr 1fr 16px; }
|
|
|
|
/* 공고 카드 1컬럼 */
|
|
.sub-card-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* 탭 가로 스크롤 */
|
|
.sub-tabs {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.sub-tabs > * {
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
/* === 신규: 자치구 5티어 + district 뱃지 (다크/네온 테마) =========== */
|
|
.sub-chip--district {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--text-dim);
|
|
border: 1px solid var(--line);
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.sub-chip--tier {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
/* 페이지 accent 컬러 팔레트와 정렬: rose / orange / mint / cyan / purple */
|
|
.sub-chip--tier-S {
|
|
background: rgba(244, 63, 94, 0.14);
|
|
color: #fda4af;
|
|
border: 1px solid rgba(244, 63, 94, 0.4);
|
|
box-shadow: 0 0 12px rgba(244, 63, 94, 0.18);
|
|
}
|
|
.sub-chip--tier-A {
|
|
background: rgba(251, 146, 60, 0.14);
|
|
color: #fdba74;
|
|
border: 1px solid rgba(251, 146, 60, 0.4);
|
|
box-shadow: 0 0 12px rgba(251, 146, 60, 0.16);
|
|
}
|
|
.sub-chip--tier-B {
|
|
background: rgba(52, 211, 153, 0.14);
|
|
color: #6ee7b7;
|
|
border: 1px solid rgba(52, 211, 153, 0.4);
|
|
box-shadow: 0 0 12px rgba(52, 211, 153, 0.16);
|
|
}
|
|
.sub-chip--tier-C {
|
|
background: rgba(56, 189, 248, 0.14);
|
|
color: #7dd3fc;
|
|
border: 1px solid rgba(56, 189, 248, 0.4);
|
|
box-shadow: 0 0 12px rgba(56, 189, 248, 0.16);
|
|
}
|
|
.sub-chip--tier-D {
|
|
background: rgba(192, 132, 252, 0.14);
|
|
color: #d8b4fe;
|
|
border: 1px solid rgba(192, 132, 252, 0.4);
|
|
box-shadow: 0 0 12px rgba(192, 132, 252, 0.16);
|
|
}
|
|
|
|
/* === 신규: DistrictTierEditor (다크/glass + rose accent) =========== */
|
|
.dte-pool {
|
|
border: 1px dashed var(--line);
|
|
border-radius: var(--radius-md);
|
|
padding: 14px 16px;
|
|
background: var(--surface-card);
|
|
transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
|
|
}
|
|
.dte-pool--over {
|
|
background: rgba(244, 63, 94, 0.06);
|
|
border-color: rgba(244, 63, 94, 0.5);
|
|
border-style: solid;
|
|
box-shadow: 0 0 24px rgba(244, 63, 94, 0.12), inset 0 0 24px rgba(244, 63, 94, 0.06);
|
|
}
|
|
.dte-pool__title {
|
|
margin: 0 0 10px;
|
|
font-family: var(--font-display);
|
|
font-size: 10px;
|
|
color: var(--accent-subscription);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.22em;
|
|
}
|
|
.dte-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
.dte-chip {
|
|
cursor: grab;
|
|
user-select: none;
|
|
background: var(--surface-raised);
|
|
color: var(--text);
|
|
border: 1px solid var(--line);
|
|
transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
|
|
}
|
|
.dte-chip:hover {
|
|
border-color: rgba(244, 63, 94, 0.4);
|
|
background: rgba(244, 63, 94, 0.08);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 0 12px rgba(244, 63, 94, 0.18);
|
|
}
|
|
.dte-chip:active { cursor: grabbing; transform: translateY(0); }
|
|
.dte-chip__remove {
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--text-muted);
|
|
margin-left: 6px;
|
|
padding: 0 2px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
opacity: 0.6;
|
|
transition: color 0.15s, opacity 0.15s;
|
|
}
|
|
.dte-chip__remove:hover { color: var(--accent-subscription); opacity: 1; }
|
|
|
|
.dte-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 10px;
|
|
}
|
|
.dte-zone {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
padding: 10px;
|
|
min-height: 140px;
|
|
background: var(--surface-card);
|
|
transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
|
|
}
|
|
.dte-zone--over {
|
|
background: rgba(244, 63, 94, 0.06);
|
|
border-color: rgba(244, 63, 94, 0.5);
|
|
box-shadow: 0 0 24px rgba(244, 63, 94, 0.12), inset 0 0 24px rgba(244, 63, 94, 0.06);
|
|
}
|
|
.dte-zone__head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-sm);
|
|
margin-bottom: 10px;
|
|
font-family: var(--font-display);
|
|
font-size: 12px;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
.dte-zone__weight {
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
opacity: 0.7;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.dte-zone__chips {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
/* 모바일 read-only 뷰 */
|
|
.dte-row {
|
|
display: grid;
|
|
grid-template-columns: 96px 1fr;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--line-subtle);
|
|
}
|
|
.dte-row:last-of-type { border-bottom: 0; }
|
|
.dte-row__list {
|
|
color: var(--text);
|
|
font-size: 13px;
|
|
font-family: var(--font-body);
|
|
line-height: 1.5;
|
|
}
|
|
.dte-empty {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
font-size: 12px;
|
|
}
|
|
.dte-mobile-hint {
|
|
margin: 8px 0 0;
|
|
padding-top: 12px;
|
|
border-top: 1px dashed var(--line-subtle);
|
|
color: var(--text-dim);
|
|
font-size: 12px;
|
|
letter-spacing: 0.02em;
|
|
text-align: center;
|
|
}
|
|
|
|
/* === 신규: NotificationSettings (다크/rose glow) =================== */
|
|
.ns-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
.ns-row--column {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 8px;
|
|
}
|
|
.ns-row__label {
|
|
font-family: var(--font-display);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-bright);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.ns-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.sub-toggle {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 44px;
|
|
height: 24px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
|
|
margin: 0;
|
|
}
|
|
.sub-toggle::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 18px;
|
|
height: 18px;
|
|
background: var(--text-dim);
|
|
border-radius: 50%;
|
|
transition: transform 0.25s var(--ease-spring), background 0.25s var(--ease-out);
|
|
}
|
|
.sub-toggle:checked {
|
|
background: rgba(244, 63, 94, 0.25);
|
|
border-color: rgba(244, 63, 94, 0.5);
|
|
box-shadow: 0 0 16px rgba(244, 63, 94, 0.3);
|
|
}
|
|
.sub-toggle:checked::before {
|
|
transform: translateX(20px);
|
|
background: var(--accent-subscription);
|
|
box-shadow: 0 0 8px rgba(244, 63, 94, 0.6);
|
|
}
|
|
.sub-toggle__label {
|
|
font-family: var(--font-display);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.12em;
|
|
}
|
|
input.sub-toggle:checked + .sub-toggle__label { color: var(--accent-subscription); }
|
|
|
|
.ns-slider {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: 2px;
|
|
outline: none;
|
|
margin: 6px 0 4px;
|
|
cursor: pointer;
|
|
}
|
|
.ns-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
background: var(--accent-subscription);
|
|
border: 2px solid var(--bg-secondary);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 12px rgba(244, 63, 94, 0.5);
|
|
transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
|
|
}
|
|
.ns-slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 0 18px rgba(244, 63, 94, 0.7); }
|
|
.ns-slider::-moz-range-thumb {
|
|
width: 18px;
|
|
height: 18px;
|
|
background: var(--accent-subscription);
|
|
border: 2px solid var(--bg-secondary);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 12px rgba(244, 63, 94, 0.5);
|
|
}
|
|
.ns-slider:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
.ns-slider:disabled::-webkit-slider-thumb { background: var(--text-muted); box-shadow: none; }
|
|
.ns-scale {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: var(--font-display);
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.ns-hint {
|
|
margin: 4px 0 0;
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
line-height: 1.6;
|
|
padding: 10px 12px;
|
|
background: var(--surface-card);
|
|
border-radius: var(--radius-sm);
|
|
border-left: 2px solid var(--accent-subscription);
|
|
}
|
|
|
|
/* === 신규: 매칭 분석 섹션 (다크/glass) ============================== */
|
|
.sub-match-analysis {
|
|
display: grid;
|
|
gap: 14px;
|
|
padding: 18px 20px;
|
|
background: var(--surface-card);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
margin-top: 16px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.sub-match-analysis::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 3px;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, var(--accent-subscription), transparent);
|
|
opacity: 0.6;
|
|
}
|
|
.sub-match-analysis__score {
|
|
font-family: var(--font-display);
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: var(--accent-subscription);
|
|
letter-spacing: -0.02em;
|
|
text-shadow: 0 0 24px rgba(244, 63, 94, 0.35);
|
|
}
|
|
.sub-match-analysis__reasons {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
color: var(--text);
|
|
font-size: 13px;
|
|
line-height: 1.8;
|
|
font-family: var(--font-body);
|
|
}
|
|
.sub-match-analysis__reasons li {
|
|
margin: 2px 0;
|
|
}
|
|
.sub-match-analysis__reasons li::marker {
|
|
color: var(--accent-subscription);
|
|
}
|
|
.sub-match-analysis__elig {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* 모바일 dte-grid → 1칼럼 */
|
|
@media (max-width: 767px) {
|
|
.dte-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* === 신규: 알림 대상 카운트 뱃지 ===================================== */
|
|
.ns-pass-count {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
padding: 1px 8px;
|
|
border-radius: 10px;
|
|
background: rgba(0, 212, 255, 0.12);
|
|
color: #00d4ff;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
.ns-pass-count strong {
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* === 캘린더 뷰 ========================================================= */
|
|
.sub-calendar {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
}
|
|
.sub-calendar__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 14px;
|
|
border-bottom: 1px solid var(--line);
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: var(--text-bright);
|
|
}
|
|
.sub-calendar__weekdays {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
background: var(--bg-tertiary);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.sub-calendar__weekday {
|
|
text-align: center;
|
|
padding: 6px 0;
|
|
font-size: 10px;
|
|
color: var(--text-dim);
|
|
font-weight: 600;
|
|
}
|
|
.sub-calendar__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
.sub-calendar__day {
|
|
min-height: 58px;
|
|
padding: 5px 4px 4px;
|
|
border-right: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
cursor: default;
|
|
transition: background 0.1s;
|
|
}
|
|
.sub-calendar__day:nth-child(7n) { border-right: none; }
|
|
.sub-calendar__day.is-empty { background: var(--bg-tertiary); opacity: 0.35; }
|
|
.sub-calendar__day.has-items { cursor: pointer; }
|
|
.sub-calendar__day.has-items:hover { background: var(--surface-raised); }
|
|
.sub-calendar__day.is-today .sub-calendar__day-num {
|
|
background: var(--accent-cyan, #00d4ff);
|
|
color: var(--bg-primary);
|
|
border-radius: 50%;
|
|
}
|
|
.sub-calendar__day-num {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 1;
|
|
font-weight: 500;
|
|
}
|
|
.sub-calendar__dots {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2px;
|
|
padding: 0 2px;
|
|
}
|
|
.sub-calendar__dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.sub-calendar__more {
|
|
font-size: 9px;
|
|
color: var(--text-dim);
|
|
line-height: 1.5;
|
|
}
|