/* loremgen.css */
:root {
    --lg-bg:      #0f0e0c;
    --lg-surface: #1a1815;
    --lg-border:  #2e2b26;
    --lg-accent:  #f59e0b;
    --lg-accent2: #d97706;
    --lg-glow:    #f59e0b33;
    --lg-text:    #f0ead8;
    --lg-muted:   #7a7060;
    --lg-error:   #f87171;
    --lg-success: #4ade80;
    --lg-ko:      #f59e0b;
    --lg-en:      #60a5fa;
    --lg-mixed:   #a78bfa;
}

.lg-hero {
    background: var(--lg-bg);
    min-height: 100vh;
    padding: 2rem 0 4rem;
}

/* 헤더 */
.lg-header { text-align: center; margin-bottom: 2.5rem; }

.lg-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b22, #d9770622);
    border: 1px solid var(--lg-accent);
    color: var(--lg-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: 'DM Mono', monospace;
}

.lg-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--lg-text);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    font-family: 'Playfair Display', Georgia, serif;
}

.lg-title span { color: var(--lg-accent); font-style: italic; }

.lg-subtitle {
    color: var(--lg-muted);
    font-size: 0.85rem;
    font-family: -apple-system, sans-serif;
}

/* 컨트롤 패널 */
.lg-controls {
    background: var(--lg-surface);
    border: 1px solid var(--lg-border);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.lg-control-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.lg-control-group label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lg-muted);
    margin-bottom: 0.5rem;
    font-family: 'DM Mono', monospace;
}

/* 모드 선택 */
.lg-mode-btns {
    display: flex;
    gap: 0.4rem;
}

.lg-mode-btn {
    flex: 1;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--lg-border);
    background: transparent;
    color: var(--lg-muted);
    border-radius: 5px;
    cursor: pointer;
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.15s;
    text-align: center;
}

.lg-mode-btn:hover { color: var(--lg-text); }
.lg-mode-btn.active[data-mode="lorem"]  { border-color: var(--lg-en);    color: var(--lg-en);    background: #60a5fa12; }
.lg-mode-btn.active[data-mode="ko"]     { border-color: var(--lg-ko);    color: var(--lg-ko);    background: #f59e0b12; }
.lg-mode-btn.active[data-mode="mixed"]  { border-color: var(--lg-mixed); color: var(--lg-mixed); background: #a78bfa12; }

/* 타입/카운트 셀렉트 */
.lg-select, .lg-input-num {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--lg-bg);
    border: 1px solid var(--lg-border);
    border-radius: 5px;
    color: var(--lg-text);
    font-family: 'DM Mono', monospace;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.lg-select:focus, .lg-input-num:focus { border-color: var(--lg-accent); }

/* 옵션 체크박스들 */
.lg-options-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.lg-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--lg-muted);
    font-family: -apple-system, sans-serif;
    transition: color 0.15s;
}

.lg-toggle input[type=checkbox] { accent-color: var(--lg-accent); width: 14px; height: 14px; }
.lg-toggle:hover { color: var(--lg-text); }

/* 생성 버튼 */
.lg-btn-gen {
    width: 100%;
    padding: 0.9rem;
    background: linear-gradient(135deg, var(--lg-accent2), var(--lg-accent));
    color: #0f0e0c;
    border: none;
    border-radius: 8px;
    font-family: 'DM Mono', monospace;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.08em;
    transition: all 0.15s;
    box-shadow: 0 4px 20px var(--lg-glow);
    margin-top: 1.25rem;
}

.lg-btn-gen:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 6px 28px var(--lg-glow); }
.lg-btn-gen:active { transform: translateY(0); }

/* 결과 패널 */
.lg-result-panel {
    background: var(--lg-surface);
    border: 1px solid var(--lg-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
}

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

.lg-result-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lg-muted);
    font-family: 'DM Mono', monospace;
}

.lg-result-actions { display: flex; gap: 0.5rem; align-items: center; }

.lg-btn-sm {
    padding: 0.25rem 0.65rem;
    font-size: 0.72rem;
    font-family: 'DM Mono', monospace;
    font-weight: 700;
    border: 1px solid var(--lg-border);
    background: transparent;
    color: var(--lg-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.lg-btn-sm:hover { border-color: var(--lg-accent); color: var(--lg-accent); }
.lg-btn-del:hover { border-color: var(--lg-error) !important; color: var(--lg-error) !important; }

.lg-char-count {
    font-size: 0.7rem;
    color: var(--lg-muted);
    font-family: 'DM Mono', monospace;
}

.lg-result-body {
    padding: 1.25rem;
    color: var(--lg-text);
    font-family: Georgia, 'Nanum Myeongjo', serif;
    font-size: 0.95rem;
    line-height: 1.85;
    min-height: 200px;
    white-space: pre-wrap;
    word-break: break-word;
}

.lg-result-body.empty {
    color: var(--lg-muted);
    font-style: italic;
    font-size: 0.85rem;
    font-family: -apple-system, sans-serif;
}

/* 기록 패널 */
.lg-history-section { margin-top: 2.5rem; }

.lg-history-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.lg-history-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lg-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'DM Mono', monospace;
}

.lg-plan-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.lg-plan-badge.free    { background: #ffffff12; color: var(--lg-muted); border: 1px solid var(--lg-border); }
.lg-plan-badge.premium { background: linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; }

.lg-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(--lg-text);
}

.lg-premium-nudge a { color: #f59e0b; font-weight: 700; text-decoration: none; margin-left: auto; white-space: nowrap; font-size: 0.75rem; }

.lg-hist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    background: var(--lg-surface);
    border: 1px solid var(--lg-border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    transition: border-color 0.15s;
    gap: 1rem;
}

.lg-hist-item:hover { border-color: var(--lg-accent); }

.lg-hist-meta { display: flex; align-items: center; gap: 0.75rem; overflow: hidden; flex: 1; }

.lg-hist-mode {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    flex-shrink: 0;
    font-family: 'DM Mono', monospace;
    text-transform: uppercase;
}

.lg-hist-mode.lorem { background: #60a5fa22; color: var(--lg-en); }
.lg-hist-mode.ko    { background: #f59e0b22; color: var(--lg-ko); }
.lg-hist-mode.mixed { background: #a78bfa22; color: var(--lg-mixed); }

.lg-hist-preview { font-size: 0.82rem; color: var(--lg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: Georgia, serif; }
.lg-hist-time    { font-size: 0.7rem; color: var(--lg-muted); flex-shrink: 0; font-family: -apple-system, sans-serif; }
.lg-hist-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

.lg-history-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--lg-muted);
    font-size: 0.82rem;
    background: var(--lg-surface);
    border: 1px dashed var(--lg-border);
    border-radius: 6px;
    font-family: -apple-system, sans-serif;
}

/* 비로그인 안내 */
.lg-login-nudge {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--lg-surface);
    border: 1px solid var(--lg-border);
    border-radius: 8px;
    margin-top: 2rem;
}

.lg-login-nudge-text { flex: 1; font-size: 0.82rem; color: var(--lg-muted); line-height: 1.5; font-family: -apple-system, sans-serif; }
.lg-login-nudge-text strong { color: var(--lg-text); display: block; margin-bottom: 0.2rem; }

.lg-btn-login {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--lg-accent);
    color: var(--lg-accent);
    border-radius: 5px;
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.15s;
}

.lg-btn-login:hover { background: var(--lg-accent); color: #0f0e0c; }

/* 토스트 */
.lg-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--lg-accent);
    color: #0f0e0c;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.85rem;
    font-family: 'DM 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;
}

.lg-toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 576px) {
    .lg-title { font-size: 1.7rem; }
    .lg-control-grid { grid-template-columns: 1fr 1fr; }
    .lg-hist-time { display: none; }
    .lg-hist-item { flex-direction: column; align-items: flex-start; }
    .lg-hist-actions { width: 100%; justify-content: flex-end; }
}