/* wordcount.css */
:root {
    --wc-bg:      #0f0a0d;
    --wc-surface: #1a1018;
    --wc-border:  #3a1f33;
    --wc-accent:  #f472b6;
    --wc-accent2: #db2777;
    --wc-glow:    #f472b633;
    --wc-text:    #fdf2f8;
    --wc-muted:   #7a4a6a;
    --wc-error:   #f87171;
    --wc-success: #4ade80;
}

.wc-hero { background: var(--wc-bg); min-height: 100vh; padding: 2rem 0 4rem; font-family: -apple-system, sans-serif; }

.wc-header { text-align: center; margin-bottom: 2rem; }
.wc-badge { display: inline-block; background: #f472b615; border: 1px solid var(--wc-accent); color: var(--wc-accent); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; padding: 0.25rem 0.8rem; border-radius: 2px; margin-bottom: 1rem; text-transform: uppercase; font-family: monospace; }
.wc-title { font-size: 2.2rem; font-weight: 800; color: var(--wc-text); margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.wc-title span { color: var(--wc-accent); }
.wc-subtitle { color: var(--wc-muted); font-size: 0.85rem; }

/* 통계 카드 */
.wc-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.wc-stat-card {
    background: var(--wc-surface);
    border: 1px solid var(--wc-border);
    border-radius: 8px;
    padding: 0.9rem 0.75rem;
    text-align: center;
    transition: border-color 0.15s;
}

.wc-stat-card.highlight { border-color: var(--wc-accent); box-shadow: 0 0 12px var(--wc-glow); }
.wc-stat-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wc-muted); margin-bottom: 0.35rem; }
.wc-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--wc-accent); font-family: 'Tabular', monospace; line-height: 1; }
.wc-stat-sub { font-size: 0.65rem; color: var(--wc-muted); margin-top: 0.2rem; }

/* 제한 표시바 */
.wc-limit-bars {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.wc-limit-bar {
    flex: 1;
    min-width: 120px;
    background: var(--wc-surface);
    border: 1px solid var(--wc-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

.wc-limit-bar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.wc-limit-bar-name { font-size: 0.7rem; font-weight: 700; color: var(--wc-muted); }
.wc-limit-bar-count { font-size: 0.7rem; font-weight: 700; }
.wc-limit-bar-count.ok   { color: var(--wc-success); }
.wc-limit-bar-count.warn { color: #fbbf24; }
.wc-limit-bar-count.over { color: var(--wc-error); }
.wc-progress { height: 4px; background: var(--wc-border); border-radius: 2px; overflow: hidden; }
.wc-progress-fill { height: 100%; border-radius: 2px; transition: width 0.2s; background: var(--wc-success); }
.wc-progress-fill.warn { background: #fbbf24; }
.wc-progress-fill.over { background: var(--wc-error); }

/* 텍스트 에어리어 */
.wc-editor-wrap {
    background: var(--wc-surface);
    border: 1px solid var(--wc-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.wc-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--wc-border);
    background: #ffffff04;
}

.wc-editor-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wc-muted); font-family: monospace; }
.wc-editor-actions { display: flex; gap: 0.5rem; }

.wc-btn-sm { padding: 0.25rem 0.65rem; font-size: 0.72rem; font-family: monospace; font-weight: 700; border: 1px solid var(--wc-border); background: transparent; color: var(--wc-muted); border-radius: 4px; cursor: pointer; transition: all 0.15s; }
.wc-btn-sm:hover { border-color: var(--wc-accent); color: var(--wc-accent); }
.wc-btn-del:hover { border-color: var(--wc-error) !important; color: var(--wc-error) !important; }

.wc-btn-save {
    padding: 0.25rem 0.75rem; font-size: 0.72rem; font-family: monospace; font-weight: 700;
    border: 1px solid var(--wc-accent); background: transparent; color: var(--wc-accent);
    border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
.wc-btn-save:hover { background: var(--wc-accent); color: #0f0a0d; }

.wc-textarea {
    width: 100%; min-height: 280px; padding: 1.25rem; background: transparent; border: none;
    color: var(--wc-text); font-family: -apple-system, sans-serif; font-size: 0.95rem;
    line-height: 1.75; resize: vertical; outline: none; box-sizing: border-box;
}
.wc-textarea::placeholder { color: var(--wc-muted); opacity: 0.5; }

/* 기록 */
.wc-history-section { margin-top: 2rem; }
.wc-history-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wc-muted); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-family: monospace; }
.wc-plan-badge { display: inline-block; font-size: 0.65rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 3px; }
.wc-plan-badge.free    { background: #ffffff12; color: var(--wc-muted); border: 1px solid var(--wc-border); }
.wc-plan-badge.premium { background: linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; }

.wc-premium-nudge { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: linear-gradient(135deg,#f59e0b12,#ef444412); border: 1px solid #f59e0b44; border-radius: 6px; margin-bottom: 0.75rem; font-size: 0.8rem; color: var(--wc-text); }
.wc-premium-nudge a { color: #f59e0b; font-weight: 700; text-decoration: none; margin-left: auto; }

.wc-hist-item { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1rem; background: var(--wc-surface); border: 1px solid var(--wc-border); border-radius: 6px; margin-bottom: 0.5rem; gap: 1rem; transition: border-color 0.15s; }
.wc-hist-item:hover { border-color: var(--wc-accent); }
.wc-hist-meta { display: flex; align-items: center; gap: 0.75rem; overflow: hidden; flex: 1; }
.wc-hist-stats { display: flex; gap: 0.5rem; flex-shrink: 0; }
.wc-hist-stat { font-size: 0.7rem; background: #f472b615; color: var(--wc-accent); border-radius: 3px; padding: 0.1rem 0.35rem; font-family: monospace; font-weight: 700; }
.wc-hist-label { font-size: 0.82rem; color: var(--wc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-hist-time  { font-size: 0.7rem; color: var(--wc-muted); flex-shrink: 0; }
.wc-hist-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

.wc-history-empty { text-align: center; padding: 1.5rem; color: var(--wc-muted); font-size: 0.82rem; background: var(--wc-surface); border: 1px dashed var(--wc-border); border-radius: 6px; }

.wc-login-nudge { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--wc-surface); border: 1px solid var(--wc-border); border-radius: 8px; margin-top: 2rem; }
.wc-login-nudge-text { flex: 1; font-size: 0.82rem; color: var(--wc-muted); line-height: 1.5; }
.wc-login-nudge-text strong { color: var(--wc-text); display: block; margin-bottom: 0.2rem; }
.wc-btn-login { padding: 0.5rem 1rem; background: transparent; border: 1px solid var(--wc-accent); color: var(--wc-accent); border-radius: 5px; font-size: 0.78rem; font-weight: 700; text-decoration: none; transition: all 0.15s; white-space: nowrap; }
.wc-btn-login:hover { background: var(--wc-accent); color: #0f0a0d; }

.wc-toast { position: fixed; bottom: 2rem; right: 2rem; background: var(--wc-accent); color: #0f0a0d; padding: 0.6rem 1.2rem; border-radius: 6px; font-weight: 700; font-size: 0.85rem; transform: translateY(4rem); opacity: 0; transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); z-index: 9999; pointer-events: none; }
.wc-toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 640px) {
    .wc-stats-grid { grid-template-columns: repeat(3,1fr); }
    .wc-title { font-size: 1.7rem; }
    .wc-hist-time { display: none; }
}