/* taxcalc.css */
:root {
    --tx-bg:      #08060f;
    --tx-surface: #10091a;
    --tx-surface2:#170d25;
    --tx-border:  #2a1a45;
    --tx-accent:  #a855f7;
    --tx-accent2: #7c3aed;
    --tx-green:   #10b981;
    --tx-red:     #ef4444;
    --tx-blue:    #3b82f6;
    --tx-yellow:  #f59e0b;
    --tx-glow:    #a855f733;
    --tx-text:    #f0e8ff;
    --tx-muted:   #5a3a80;
    --tx-dim:     #9a78cc;
}

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

.tx-header { text-align: center; margin-bottom: 2rem; }
.tx-badge { display: inline-block; background: #a855f715; border: 1px solid var(--tx-accent); color: var(--tx-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; }
.tx-title { font-size: 2.2rem; font-weight: 800; color: var(--tx-text); margin-bottom: 0.4rem; letter-spacing: -0.02em; }
.tx-title span { color: var(--tx-accent); }
.tx-subtitle { color: var(--tx-muted); font-size: 0.85rem; }

/* 탭 */
.tx-tabs { display: flex; gap: 0; margin-bottom: 1.5rem; background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: 8px; padding: 4px; }
.tx-tab { flex: 1; padding: 0.65rem 0.5rem; border: none; background: transparent; color: var(--tx-muted); border-radius: 5px; cursor: pointer; font-size: 0.82rem; font-weight: 700; transition: all 0.15s; text-align: center; }
.tx-tab:hover { color: var(--tx-text); }
.tx-tab.active { background: var(--tx-accent); color: #fff; box-shadow: 0 2px 12px var(--tx-glow); }
.tx-tab-sub { font-size: 0.62rem; font-weight: 400; opacity: 0.75; display: block; margin-top: 2px; }

/* 패널 */
.tx-panel { background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: 10px; padding: 1.5rem; margin-bottom: 1.25rem; }
.tx-panel-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-muted); margin-bottom: 1.25rem; font-family: monospace; }

.tx-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.tx-input-group { display: flex; flex-direction: column; gap: 0.4rem; }
.tx-input-group label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-muted); }
.tx-input-group .tx-hint { font-size: 0.65rem; color: var(--tx-muted); margin-top: 0.2rem; }
.tx-input-wrap { position: relative; }
.tx-input-wrap .tx-unit { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 0.8rem; color: var(--tx-muted); font-weight: 600; pointer-events: none; }
.tx-input { width: 100%; padding: 0.65rem 2.8rem 0.65rem 0.85rem; background: var(--tx-bg); border: 1px solid var(--tx-border); border-radius: 6px; color: var(--tx-text); font-size: 0.95rem; font-weight: 600; outline: none; box-sizing: border-box; transition: border-color 0.15s; }
.tx-input:focus { border-color: var(--tx-accent); }
.tx-input-plain { padding-right: 0.85rem; }
.tx-select { width: 100%; padding: 0.65rem 0.85rem; background: var(--tx-bg); border: 1px solid var(--tx-border); border-radius: 6px; color: var(--tx-text); font-size: 0.88rem; outline: none; }
.tx-select:focus { border-color: var(--tx-accent); }

/* VAT 방향 토글 */
.tx-direction-btns { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.tx-dir-btn { flex: 1; padding: 0.6rem; border: 1px solid var(--tx-border); background: transparent; color: var(--tx-muted); border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-weight: 700; transition: all 0.15s; text-align: center; }
.tx-dir-btn.active { border-color: var(--tx-accent); color: var(--tx-accent); background: #a855f712; }

/* 계산 버튼 */
.tx-btn-calc { width: 100%; padding: 0.85rem; background: linear-gradient(135deg, var(--tx-accent2), var(--tx-accent)); color: #fff; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 800; cursor: pointer; letter-spacing: 0.05em; transition: all 0.15s; box-shadow: 0 4px 20px var(--tx-glow); margin-top: 0.5rem; }
.tx-btn-calc:hover { opacity: 0.9; transform: translateY(-1px); }

/* 결과 */
.tx-result-wrap { display: none; margin-bottom: 1.25rem; }
.tx-result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.75rem; }
.tx-result-card { background: var(--tx-surface2); border: 1px solid var(--tx-border); border-radius: 8px; padding: 1rem; text-align: center; }
.tx-result-card.highlight { border-color: var(--tx-accent); box-shadow: 0 0 16px var(--tx-glow); }
.tx-result-card-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-muted); margin-bottom: 0.4rem; }
.tx-result-card-value { font-size: 1.25rem; font-weight: 800; font-family: monospace; }
.tx-result-card-value.accent { color: var(--tx-accent); }
.tx-result-card-value.red    { color: var(--tx-red); }
.tx-result-card-value.green  { color: var(--tx-green); }
.tx-result-card-value.blue   { color: var(--tx-blue); }
.tx-result-card-sub { font-size: 0.68rem; color: var(--tx-muted); margin-top: 0.25rem; }

/* 세율 테이블 */
.tx-rate-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 0.75rem; }
.tx-rate-table th { padding: 0.5rem 0.75rem; text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx-muted); border-bottom: 1px solid var(--tx-border); }
.tx-rate-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid #ffffff05; color: var(--tx-dim); font-family: monospace; }
.tx-rate-table tr.active-row td { background: #a855f712; color: var(--tx-text); font-weight: 700; }
.tx-rate-table tr:last-child td { border-bottom: none; }

/* 기록 */
.tx-history-section { margin-top: 2rem; }
.tx-history-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-muted); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-family: monospace; }
.tx-plan-badge { display: inline-block; font-size: 0.65rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 3px; }
.tx-plan-badge.free    { background: #ffffff12; color: var(--tx-muted); border: 1px solid var(--tx-border); }
.tx-plan-badge.premium { background: linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; }
.tx-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(--tx-text); }
.tx-premium-nudge a { color: #f59e0b; font-weight: 700; text-decoration: none; margin-left: auto; }
.tx-hist-item { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.1rem; background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: 8px; margin-bottom: 0.5rem; gap: 1rem; transition: border-color 0.15s; }
.tx-hist-item:hover { border-color: var(--tx-accent); }
.tx-hist-meta { flex: 1; overflow: hidden; }
.tx-hist-label { font-size: 0.88rem; color: var(--tx-text); font-weight: 600; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-hist-detail { font-size: 0.75rem; color: var(--tx-muted); font-family: monospace; }
.tx-hist-type { font-size: 0.62rem; font-weight: 800; padding: 0.1rem 0.4rem; border-radius: 3px; background: #a855f722; color: var(--tx-accent); font-family: monospace; flex-shrink: 0; }
.tx-hist-tax { font-size: 0.95rem; font-weight: 800; color: var(--tx-red); white-space: nowrap; font-family: monospace; }
.tx-hist-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.tx-btn-sm { padding: 0.25rem 0.65rem; font-size: 0.72rem; font-family: monospace; font-weight: 700; border: 1px solid var(--tx-border); background: transparent; color: var(--tx-muted); border-radius: 4px; cursor: pointer; transition: all 0.15s; }
.tx-btn-sm:hover { border-color: var(--tx-accent); color: var(--tx-accent); }
.tx-btn-del:hover { border-color: var(--tx-red) !important; color: var(--tx-red) !important; }
.tx-history-empty { text-align: center; padding: 1.5rem; color: var(--tx-muted); font-size: 0.82rem; background: var(--tx-surface); border: 1px dashed var(--tx-border); border-radius: 6px; }
.tx-login-nudge { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: 8px; margin-top: 2rem; }
.tx-login-nudge-text { flex: 1; font-size: 0.82rem; color: var(--tx-muted); line-height: 1.5; }
.tx-login-nudge-text strong { color: var(--tx-text); display: block; margin-bottom: 0.2rem; }
.tx-btn-login { padding: 0.5rem 1rem; background: transparent; border: 1px solid var(--tx-accent); color: var(--tx-accent); border-radius: 5px; font-size: 0.78rem; font-weight: 700; text-decoration: none; transition: all 0.15s; white-space: nowrap; }
.tx-btn-login:hover { background: var(--tx-accent); color: #08060f; }
.tx-notice { padding: 0.85rem 1rem; background: var(--tx-surface); border: 1px solid var(--tx-border); border-left: 3px solid var(--tx-accent); border-radius: 6px; margin-bottom: 1rem; font-size: 0.78rem; color: var(--tx-muted); line-height: 1.6; }
.tx-toast { position: fixed; bottom: 2rem; right: 2rem; background: var(--tx-accent); color: #fff; 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; }
.tx-toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 640px) {
    .tx-title { font-size: 1.7rem; }
    .tx-tabs { flex-direction: column; }
    .tx-input-grid { grid-template-columns: 1fr; }
    .tx-result-grid { grid-template-columns: 1fr 1fr; }
}