/* idgen.css — 사이버/네온 블루 테마 */
:root {
    --id-bg:      #080c14;
    --id-surface: #0d1526;
    --id-border:  #1e3a5f;
    --id-accent:  #38bdf8;
    --id-accent2: #0284c7;
    --id-glow:    #38bdf833;
    --id-text:    #e0f2fe;
    --id-muted:   #4a7a9b;
    --id-error:   #f87171;
    --id-uuid:    #a78bfa;
    --id-nano:    #34d399;
}

.id-hero { background: var(--id-bg); min-height: 100vh; padding: 2rem 0 4rem; font-family: 'Roboto Mono', monospace; }

.id-header { text-align: center; margin-bottom: 2.5rem; }
.id-badge {
    display: inline-block; background: #38bdf815; border: 1px solid var(--id-accent);
    color: var(--id-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;
}
.id-title { font-size: 2.2rem; font-weight: 700; color: var(--id-text); margin-bottom: 0.5rem; }
.id-title span { color: var(--id-accent); }
.id-subtitle { color: var(--id-muted); font-size: 0.85rem; font-family: -apple-system, sans-serif; }

/* 타입 선택 */
.id-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1.5rem; }
.id-type-btn {
    padding: 0.65rem 0.5rem; border: 1px solid var(--id-border); background: var(--id-surface);
    color: var(--id-muted); border-radius: 6px; cursor: pointer; font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem; font-weight: 700; text-align: center; transition: all 0.15s;
}
.id-type-btn:hover { color: var(--id-text); border-color: var(--id-accent); }
.id-type-btn.active { border-color: var(--id-accent); color: var(--id-accent); background: #38bdf812; box-shadow: 0 0 12px var(--id-glow); }
.id-type-btn[data-type="uuid4"].active { border-color: var(--id-uuid); color: var(--id-uuid); background: #a78bfa12; }
.id-type-btn[data-type="nanoid"].active { border-color: var(--id-nano); color: var(--id-nano); background: #34d39912; }
.id-type-sub { font-size: 0.62rem; font-weight: 400; opacity: 0.6; display: block; margin-top: 2px; }

/* 컨트롤 */
.id-controls {
    background: var(--id-surface); border: 1px solid var(--id-border);
    border-radius: 10px; padding: 1.25rem; margin-bottom: 1.5rem;
}
.id-ctrl-row { display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; flex-wrap: wrap; }
.id-ctrl-group { display: flex; flex-direction: column; gap: 0.4rem; }
.id-ctrl-group label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--id-muted); }
.id-input { padding: 0.5rem 0.75rem; background: var(--id-bg); border: 1px solid var(--id-border); border-radius: 5px; color: var(--id-text); font-family: 'Roboto Mono', monospace; font-size: 0.85rem; outline: none; width: 90px; }
.id-input:focus { border-color: var(--id-accent); }

.id-checks { display: flex; gap: 1rem; flex-wrap: wrap; }
.id-toggle { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.8rem; color: var(--id-muted); font-family: -apple-system, sans-serif; }
.id-toggle input { accent-color: var(--id-accent); }
.id-toggle:hover { color: var(--id-text); }

/* 생성 버튼 */
.id-btn-gen {
    width: 100%; padding: 0.85rem; background: linear-gradient(135deg, var(--id-accent2), var(--id-accent));
    color: #080c14; border: none; border-radius: 8px; font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem; font-weight: 700; cursor: pointer; letter-spacing: 0.05em;
    transition: all 0.15s; box-shadow: 0 4px 20px var(--id-glow);
}
.id-btn-gen:hover { opacity: 0.9; transform: translateY(-1px); }

/* 결과 */
.id-result-panel { background: var(--id-surface); border: 1px solid var(--id-border); border-radius: 10px; overflow: hidden; margin-bottom: 1rem; }
.id-result-header { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1rem; border-bottom: 1px solid var(--id-border); background: #ffffff04; }
.id-result-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--id-muted); }
.id-result-actions { display: flex; gap: 0.5rem; }
.id-btn-sm { padding: 0.25rem 0.65rem; font-size: 0.72rem; font-family: 'Roboto Mono', monospace; font-weight: 700; border: 1px solid var(--id-border); background: transparent; color: var(--id-muted); border-radius: 4px; cursor: pointer; transition: all 0.15s; }
.id-btn-sm:hover { border-color: var(--id-accent); color: var(--id-accent); }
.id-btn-del:hover { border-color: var(--id-error) !important; color: var(--id-error) !important; }

.id-result-body { padding: 1rem; min-height: 120px; }
.id-result-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0.75rem; border-radius: 5px; margin-bottom: 0.4rem;
    background: #ffffff05; border: 1px solid var(--id-border);
    font-family: 'Roboto Mono', monospace; font-size: 0.9rem;
    color: var(--id-accent); word-break: break-all;
    transition: border-color 0.15s;
}
.id-result-item:hover { border-color: var(--id-accent); }
.id-result-item .copy-one { margin-left: auto; flex-shrink: 0; }
.id-empty { color: var(--id-muted); font-size: 0.85rem; padding: 1rem; font-family: -apple-system, sans-serif; }

/* 기록 */
.id-history-section { margin-top: 2.5rem; }
.id-history-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--id-muted); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.id-plan-badge { display: inline-block; font-size: 0.65rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 3px; }
.id-plan-badge.free { background: #ffffff12; color: var(--id-muted); border: 1px solid var(--id-border); }
.id-plan-badge.premium { background: linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; }
.id-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; font-family: -apple-system, sans-serif; color: var(--id-text); }
.id-premium-nudge a { color: #f59e0b; font-weight: 700; text-decoration: none; margin-left: auto; }
.id-hist-item { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1rem; background: var(--id-surface); border: 1px solid var(--id-border); border-radius: 6px; margin-bottom: 0.5rem; gap: 1rem; transition: border-color 0.15s; }
.id-hist-item:hover { border-color: var(--id-accent); }
.id-hist-meta { display: flex; align-items: center; gap: 0.75rem; overflow: hidden; flex: 1; }
.id-hist-type { font-size: 0.62rem; font-weight: 800; padding: 0.1rem 0.4rem; border-radius: 3px; background: #38bdf822; color: var(--id-accent); flex-shrink: 0; }
.id-hist-preview { font-size: 0.82rem; color: var(--id-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Roboto Mono', monospace; }
.id-hist-time { font-size: 0.7rem; color: var(--id-muted); flex-shrink: 0; font-family: -apple-system, sans-serif; }
.id-hist-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.id-history-empty { text-align: center; padding: 1.5rem; color: var(--id-muted); font-size: 0.82rem; background: var(--id-surface); border: 1px dashed var(--id-border); border-radius: 6px; font-family: -apple-system, sans-serif; }
.id-login-nudge { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--id-surface); border: 1px solid var(--id-border); border-radius: 8px; margin-top: 2rem; }
.id-login-nudge-text { flex: 1; font-size: 0.82rem; color: var(--id-muted); line-height: 1.5; font-family: -apple-system, sans-serif; }
.id-login-nudge-text strong { color: var(--id-text); display: block; margin-bottom: 0.2rem; }
.id-btn-login { padding: 0.5rem 1rem; background: transparent; border: 1px solid var(--id-accent); color: var(--id-accent); border-radius: 5px; font-family: 'Roboto Mono', monospace; font-size: 0.78rem; font-weight: 700; text-decoration: none; transition: all 0.15s; white-space: nowrap; }
.id-btn-login:hover { background: var(--id-accent); color: #080c14; }

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

@media (max-width: 576px) {
    .id-type-grid { grid-template-columns: repeat(2,1fr); }
    .id-title { font-size: 1.7rem; }
    .id-hist-time { display: none; }
}