/* Sales Oracle — Light Professional Theme */
:root {
    --bg-1: #ffffff;
    --bg-2: #f8f9fb;
    --bg-3: #f0f2f5;
    --bg-accent: #eef4ff;
    --text-1: #1a1e2c;
    --text-2: #4e5668;
    --text-3: #8b92a0;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-dim: rgba(37,99,235,0.08);
    --green: #059669;
    --green-bg: #ecfdf5;
    --red: #dc2626;
    --red-bg: #fef2f2;
    --amber: #d97706;
    --amber-bg: #fffbeb;
    --border: #e2e5ea;
    --border-light: #eef0f3;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
    --radius: 12px;
    --radius-sm: 8px;
    --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); background:var(--bg-2); color:var(--text-1); min-height:100vh; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-hover); }
.header { background:var(--bg-1); display:flex; align-items:center; justify-content:space-between; padding:14px 24px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.logo { font-size:20px; font-weight:800; color:var(--text-1); letter-spacing:-0.3px; }
.logo span { color:var(--accent); }
.container { max-width:1100px; margin:0 auto; padding:24px; }
.card { background:var(--bg-1); border:1px solid var(--border-light); border-radius:var(--radius); padding:20px 24px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.card-header { font-size:17px; font-weight:700; color:var(--text-1); margin-bottom:12px; }
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 22px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; border:none; cursor:pointer; transition:all .15s; font-family:var(--font); }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-outline { background:var(--bg-1); border:1px solid var(--border); color:var(--text-2); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-lg { padding:14px 32px; font-size:16px; border-radius:var(--radius); }
.btn-block { width:100%; justify-content:center; }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { opacity:.9; }
input,select,textarea { background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 14px; color:var(--text-1); font-size:14px; width:100%; font-family:var(--font); transition:border-color .15s; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.sel-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 20px; }
.sel-btn { background:var(--bg-1); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:13px 14px; font-size:14px; font-weight:500; color:var(--text-2); text-align:center; cursor:pointer; transition:all .15s; }
.sel-btn:hover { border-color:var(--accent); color:var(--text-1); background:var(--bg-accent); }
.sel-btn.selected { border-color:var(--accent); background:var(--bg-accent); color:var(--accent); font-weight:600; }
.item-card { background:var(--bg-1); border:1.5px solid var(--border-light); border-radius:var(--radius); padding:20px; margin-bottom:12px; cursor:pointer; transition:all .2s; box-shadow:var(--shadow-sm); }
.item-card:hover { border-color:var(--accent); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.item-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.item-name { font-size:17px; font-weight:700; color:var(--text-1); }
.item-score { font-size:13px; padding:4px 12px; border-radius:20px; font-weight:700; }
.score-high { background:var(--green-bg); color:var(--green); }
.score-mid { background:var(--amber-bg); color:var(--amber); }
.score-low { background:var(--red-bg); color:var(--red); }
.item-row { display:flex; justify-content:space-between; font-size:14px; padding:5px 0; color:var(--text-2); border-bottom:1px solid var(--border-light); }
.item-row:last-child { border:none; }
.item-val { color:var(--text-1); font-weight:600; }
.item-val.profit { color:var(--green); font-weight:700; }
.progress-step { display:flex; align-items:center; gap:12px; padding:10px 0; font-size:14px; color:var(--text-2); }
.step-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.step-done { background:var(--green); }
.step-active { background:var(--accent); animation:pulse 1.5s infinite; }
.step-wait { background:var(--bg-3); border:2px solid var(--border); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.badge { display:inline-block; font-size:12px; padding:4px 12px; border-radius:20px; font-weight:600; }
.badge-blue { background:var(--bg-accent); color:var(--accent); }
.badge-green { background:var(--green-bg); color:var(--green); }
.badge-red { background:var(--red-bg); color:var(--red); }
.badge-amber { background:var(--amber-bg); color:var(--amber); }
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0; }
.metric { background:var(--bg-1); border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:16px; box-shadow:var(--shadow-sm); }
.metric-label { font-size:12px; color:var(--text-3); font-weight:500; margin-bottom:4px; }
.metric-value { font-size:22px; font-weight:800; color:var(--text-1); }
.quote-table { width:100%; font-size:14px; border-collapse:collapse; }
.quote-table td { padding:10px 0; border-bottom:1px solid var(--border-light); }
.quote-table td:first-child { color:var(--text-2); }
.quote-table td:last-child { text-align:right; color:var(--text-1); font-weight:600; }
.quote-table tr.total td { border-top:2px solid var(--accent); font-size:17px; font-weight:800; color:var(--accent); padding-top:14px; }
.loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px; }
.spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.loading-text { margin-top:14px; font-size:15px; color:var(--text-2); font-weight:500; }
.section-title { font-size:13px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; margin:24px 0 8px; }
.banner { padding:14px 18px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.banner-info { background:var(--bg-accent); color:var(--accent); border:1px solid rgba(37,99,235,.15); }
.banner-success { background:var(--green-bg); color:var(--green); border:1px solid rgba(5,150,105,.15); }
.hero { text-align:center; padding:60px 20px 40px; }
.hero h1 { font-size:38px; font-weight:800; line-height:1.3; color:var(--text-1); margin-bottom:16px; letter-spacing:-.5px; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero p { font-size:17px; color:var(--text-2); line-height:1.8; max-width:480px; margin:0 auto 36px; }
@media(max-width:600px) { .container{padding:16px} .sel-grid{grid-template-columns:1fr} .metrics{grid-template-columns:1fr 1fr} .hero h1{font-size:28px} .hero p{font-size:15px} }