/* 디데이 계산기 — 공통 도구 스타일에 없는 것만 정의한다. */

.dd-inline { display: flex; gap: .5rem; align-items: center; }
.dd-inline .input-tool { flex: 1 1 auto; min-width: 0; }
.dd-inline .btn-tool { flex: 0 0 auto; width: auto; white-space: nowrap; } /* 공통 모바일 규칙의 전폭 버튼이 입력칸 옆에서 카드 밖으로 밀려났다 */

.dd-main {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    margin-top: var(--spacing-md, 1rem);
    padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
    border: 1px solid var(--border-color, #e5e8ed);
    border-radius: var(--radius-md, 8px);
    background: var(--primary-soft, #eef3fd);
    text-align: center;
}
.dd-main-value {
    font-size: 2.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
    color: var(--primary-strong, #2c56b8);
    font-variant-numeric: tabular-nums;
}
.dd-main-value[data-state="today"] { color: #c0392b; }
.dd-main-value[data-state="past"]  { color: var(--text-secondary, #3d4450); }
.dd-main-sub { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); word-break: keep-all; }

.dd-alert { margin-top: var(--spacing-md, 1rem); }
.dd-save { margin-top: var(--spacing-md, 1rem); }

.dd-table-wrap { overflow-x: auto; }
.dd-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm, .875rem); }
.dd-table th, .dd-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--border-color, #e5e8ed); text-align: left; white-space: nowrap; }
.dd-table th { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); font-weight: 600; }
.dd-table .dd-rel { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dd-table tr.is-past td { color: var(--text-muted, #626977); }
.dd-table tr.is-past .dd-rel { font-weight: 400; }
.dd-table tr.is-today td { color: #c0392b; font-weight: 700; }

.dd-hint { margin: .625rem 0 0; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }

.dd-list-title { margin: var(--spacing-lg, 1.5rem) 0 .5rem; font-size: var(--text-sm, .9375rem); font-weight: 700; }
.dd-list-title i { margin-right: .25rem; opacity: .7; }
.dd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.dd-item { display: flex; gap: .375rem; align-items: stretch; }
.dd-item-main {
    flex: 1 1 auto; min-width: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: .5rem;
    padding: .5rem .625rem; text-align: left; cursor: pointer;
    border: 1px solid var(--border-color, #e5e8ed); border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface, #fff); color: inherit; font: inherit;
}
.dd-item-main:hover, .dd-item-main:focus-visible { border-color: var(--primary-color, #3b6fe0); outline: none; }
.dd-item-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-item-date { grid-column: 1; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.dd-item-value { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; color: var(--primary-strong, #2c56b8); font-variant-numeric: tabular-nums; }
.dd-item-del { flex: 0 0 auto; }

@media (max-width: 768px) {
    .dd-main-value { font-size: 1.8rem; }
}