/* 출처: Genspark 'InstaCoupang' 프로토타입 reference/genspark-prototype/css/style.css 를 그대로 옮긴 사본(10/14, 관리 화면 겉모습 맞춤). */
/* InstaCoupang Autopilot — styles */
:root { --pink: #E1306C; --orange: #F77737; --yellow: #FFE500; }
body { font-family: "Pretendard", "Noto Sans KR", system-ui, sans-serif; }
.brand-grad { background: linear-gradient(135deg, #833AB4, #E1306C 55%, #F77737); }

/* nav */
.nav-link { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: .75rem; font-weight: 600; transition: .15s; text-align: left; }
.nav-link i { width: 1.1rem; text-align: center; opacity: .8; }
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.active { background: linear-gradient(90deg, rgba(225,48,108,.25), rgba(247,119,55,.1)); color: #fff; box-shadow: inset 3px 0 0 var(--pink); }

/* panels */
.panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 1.1rem; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.panel-title { font-weight: 800; font-size: 1.02rem; margin-bottom: 1rem; }
.kpi-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1rem 1.1rem; }
.kpi-label { font-size: .75rem; color: #64748b; font-weight: 600; }
.kpi-value { font-size: 1.75rem; font-weight: 900; letter-spacing: -.02em; margin-top: .25rem; }
.kpi-sub { font-size: .7rem; color: #94a3b8; }

/* form */
.field { display: block; }
.field > span { display: block; font-size: .78rem; font-weight: 700; color: #475569; margin-bottom: .35rem; }
.input { width: 100%; border: 1px solid #cbd5e1; border-radius: .65rem; padding: .6rem .8rem; background: #fff; outline: none; transition: .15s; }
.input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(225,48,108,.15); }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc; cursor: pointer; font-size: .8rem; }
.chip:hover { border-color: var(--pink); }
.hook-chip { padding: .35rem .7rem; border-radius: 999px; background: #fdf2f8; color: #be185d; font-size: .78rem; font-weight: 600; border: 1px solid #fbcfe8; }
.hook-chip:hover { background: #fce7f3; }

.btn-primary, .btn-dark, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem 1rem; border-radius: .7rem; font-weight: 700; transition: .15s; white-space: nowrap; }
.btn-primary { background: linear-gradient(135deg, #E1306C, #F77737); color: #fff; }
.btn-primary:hover { filter: brightness(1.07); }
.btn-dark { background: #0f172a; color: #fff; }
.btn-dark:hover { background: #1e293b; }
.btn-ghost { background: #fff; border: 1px solid #e2e8f0; color: #334155; }
.btn-ghost:hover { background: #f1f5f9; }
.btn-ghost:disabled { opacity: .45; cursor: not-allowed; }

.drop-zone { display: block; border: 2px dashed #cbd5e1; border-radius: 1rem; padding: 1.5rem; text-align: center; cursor: pointer; background: #f8fafc; transition: .15s; }
.drop-zone.drag { border-color: var(--pink); background: #fdf2f8; }

.style-btn { padding: .6rem .4rem; border: 2px solid #e2e8f0; border-radius: .7rem; font-weight: 700; font-size: .85rem; background: #fff; }
.style-btn.active { border-color: var(--pink); background: #fdf2f8; color: #be185d; }

.card-slot { aspect-ratio: 4/5; border-radius: .8rem; background: repeating-linear-gradient(45deg,#f1f5f9,#f1f5f9 10px,#f8fafc 10px,#f8fafc 20px); border: 1px dashed #cbd5e1; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-weight: 700; font-size: .85rem; }
.card-canvas { width: 100%; height: auto; border-radius: .8rem; box-shadow: 0 6px 20px rgba(0,0,0,.12); cursor: zoom-in; }

/* table */
.data-table { width: 100%; font-size: .85rem; border-collapse: collapse; }
.data-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #64748b; padding: .6rem .75rem; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.data-table td { padding: .7rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.data-table tr:hover td { background: #fafafa; }
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.b-sent { background: #dcfce7; color: #15803d; } .b-no_match { background: #f1f5f9; color: #64748b; }
.b-skipped_self { background: #e0e7ff; color: #4338ca; } .b-failed { background: #fee2e2; color: #b91c1c; }
.b-active { background: #dcfce7; color: #15803d; } .b-paused { background: #fef3c7; color: #b45309; }
.kw-tag { font-weight: 800; color: #be185d; background: #fdf2f8; padding: .15rem .5rem; border-radius: .4rem; }

/* pipeline */
.pipeline { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: .5rem; counter-reset: s; }
.pipeline li { position: relative; background: #f8fafc; border-radius: .9rem; padding: .9rem .5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.pipeline li span { width: 1.8rem; height: 1.8rem; border-radius: 999px; background: linear-gradient(135deg,#E1306C,#F77737); color: #fff; font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.pipeline li b { font-size: .8rem; } .pipeline li small { font-size: .68rem; color: #94a3b8; }
@media (max-width: 900px) { .pipeline { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* chat bubbles (simulator) */
.ig-bubble { border-radius: 1.1rem; padding: .75rem 1rem; font-size: .88rem; white-space: pre-wrap; word-break: break-all; }
.ig-in { background: #f1f5f9; }
.ig-out { background: linear-gradient(135deg,#7C3AED,#E1306C); color: #fff; margin-left: 2rem; }
.step-row { display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; }
.step-row i { margin-top: .2rem; }

/* code */
.code-block { position: relative; background: #0f172a; color: #e2e8f0; border-radius: .8rem; padding: 1rem; font-size: .78rem; overflow-x: auto; white-space: pre; font-family: ui-monospace, Menlo, monospace; }
.copy-code { position: absolute; top: .5rem; right: .5rem; font-size: .7rem; background: #334155; color: #fff; padding: .25rem .6rem; border-radius: .4rem; }

/* nav groups */
.nav-group { font-size: .65rem; font-weight: 800; letter-spacing: .08em; color: #64748b; padding: .9rem .9rem .3rem; text-transform: uppercase; }
.nav-new { margin-left: auto; font-size: .6rem; font-weight: 800; background: #E1306C; color: #fff; padding: .1rem .4rem; border-radius: .3rem; }

/* trends */
.trend-hero { background: linear-gradient(135deg, #fff 60%, #fdf2f8); }
.cat-tab { padding: .45rem .9rem; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; font-size: .82rem; font-weight: 700; }
.cat-tab.active { background: #0f172a; color: #fff; border-color: #0f172a; }
.trend-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1.1rem; overflow: hidden; }
.trend-card header { padding: .9rem 1.1rem; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid #f1f5f9; }
.trend-row { display: grid; grid-template-columns: 2rem 1fr auto; gap: .6rem; align-items: center; padding: .7rem 1.1rem; border-bottom: 1px solid #f8fafc; cursor: pointer; }
.trend-row:hover { background: #fdf2f8; }
.trend-row:last-child { border-bottom: 0; }
.rank-no { width: 1.8rem; height: 1.8rem; border-radius: .55rem; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .85rem; background: #f1f5f9; color: #475569; }
.rank-1 { background: linear-gradient(135deg,#FFD54F,#FFB300); color: #fff; }
.rank-2 { background: linear-gradient(135deg,#CFD8DC,#90A4AE); color: #fff; }
.rank-3 { background: linear-gradient(135deg,#FFAB91,#D84315); color: #fff; }
.score-bar { height: 5px; border-radius: 99px; background: #f1f5f9; overflow: hidden; margin-top: .3rem; }
.score-bar i { display: block; height: 100%; background: linear-gradient(90deg,#F77737,#E1306C); }
.grade { font-size: .65rem; font-weight: 900; padding: .1rem .4rem; border-radius: .3rem; }
.g-S { background: #E1306C; color: #fff; } .g-A { background: #F77737; color: #fff; } .g-B { background: #fde68a; color: #92400e; } .g-C { background: #e2e8f0; color: #475569; }
.delta-up { color: #e11d48; font-weight: 800; font-size: .7rem; } .delta-down { color: #2563eb; font-weight: 800; font-size: .7rem; } .delta-same { color: #94a3b8; font-size: .7rem; }
.reason-chip { font-size: .66rem; padding: .1rem .45rem; border-radius: 999px; background: #f1f5f9; color: #475569; white-space: nowrap; }
.trend-detail { background: #fafafa; padding: .8rem 1.1rem 1rem 3.7rem; font-size: .8rem; border-bottom: 1px solid #f1f5f9; }

/* trend engine v3 */
.src-pill { font-size: .68rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; white-space: nowrap; }
.src-pill.ok { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.src-pill.fail { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.src-pill.idle { color: #94a3b8; }
.env-chip { font-size: .72rem; padding: .25rem .6rem; border-radius: .5rem; background: #f1f5f9; color: #334155; white-space: nowrap; }
.phase-tag { font-size: .62rem; font-weight: 700; padding: .05rem .4rem; border-radius: .3rem; background: #f1f5f9; color: #475569; white-space: nowrap; }
.ph-rising { background: #ffe4e6; color: #be123c; } .ph-early { background: #dcfce7; color: #15803d; } .ph-up { background: #fff1f2; color: #e11d48; }
.ph-peak { background: #ffedd5; color: #c2410c; } .ph-down { background: #dbeafe; color: #1d4ed8; } .ph-off { background: #f1f5f9; color: #94a3b8; } .ph-new { background: #ede9fe; color: #6d28d9; }
.hot-card { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; padding: .8rem 1rem; border-radius: 1rem; background: linear-gradient(135deg,#fff1f2,#fff7ed); border: 1px solid #fecdd3; transition: .15s; }
.hot-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(225,48,108,.15); }
.discover-item { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; padding: .6rem .75rem; border: 1px solid #f1f5f9; border-radius: .7rem; font-size: .85rem; }

/* 산출 방식·기준 시점 */
.calc-meta { background: #fff; border: 1px solid #e2e8f0; border-radius: .9rem; padding: .85rem 1rem; }
.kind-badge { font-size: .72rem; font-weight: 800; padding: .2rem .6rem; border-radius: .45rem; white-space: nowrap; }
.kind-official { background: #0f172a; color: #fff; }
.kind-official-alt { background: #334155; color: #fff; }
.kind-auto, .kind-manual { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.kind-past { background: #ede9fe; color: #6d28d9; }
.kind-none { background: #f1f5f9; color: #64748b; }
.asof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .25rem .9rem; }
.asof-row { display: grid; grid-template-columns: .6rem 9.5rem 1fr; gap: .4rem; align-items: center; font-size: .72rem; }
.asof-row .asof-note { grid-column: 3; color: #94a3b8; font-size: .66rem; margin-top: -.2rem; }
.asof-label { color: #475569; font-weight: 600; white-space: nowrap; }
.asof-when { font-weight: 700; color: #0f172a; }
.asof-dot { width: .5rem; height: .5rem; border-radius: 99px; background: #cbd5e1; }
.asof-dot.ok { background: #10b981; } .asof-dot.fail { background: #f87171; } .asof-dot.idle { background: #cbd5e1; }
.card-stamp { font-size: .62rem; font-weight: 700; color: #64748b; background: #f1f5f9; padding: .1rem .45rem; border-radius: .35rem; white-space: nowrap; }

/* 운영 준비 점검 */
.ready-red { border-color: #fecaca; background: linear-gradient(135deg,#fff,#fef2f2); }
.ready-yellow { border-color: #fde68a; background: linear-gradient(135deg,#fff,#fffbeb); }
.ready-green { border-color: #a7f3d0; background: linear-gradient(135deg,#fff,#ecfdf5); }
.ready-badge { font-size: .75rem; font-weight: 800; padding: .2rem .6rem; border-radius: .5rem; background: #0f172a; color: #fff; }
.ready-item { display: grid; grid-template-columns: 1.2rem 1fr auto; gap: .6rem; align-items: center; padding: .55rem .7rem; border-radius: .7rem; background: #fff; border: 1px solid #f1f5f9; font-size: .82rem; }
.ready-item p { font-size: .72rem; color: #64748b; overflow-wrap: anywhere; }
.ready-item.ok i { color: #10b981; } .ready-item.todo i { color: #ef4444; } .ready-item.opt i { color: #94a3b8; }

/* 시작 가이드 */
.guide-hero { background: linear-gradient(135deg, #fff 55%, #fdf2f8); }
.guide-ring { --p: 0; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(#E1306C calc(var(--p) * 1%), #f1f5f9 0); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.guide-ring span { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .95rem; }
.guide-step { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; }
.guide-step.complete { border-color: #a7f3d0; }
.guide-step.optional { background: #fafafa; }
.guide-head { width: 100%; display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; }
.guide-head:hover { background: #fafafa; }
.guide-no { width: 2rem; height: 2rem; border-radius: .6rem; background: #0f172a; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.guide-step.complete .guide-no { background: #10b981; }
.guide-items { border-top: 1px solid #f1f5f9; padding: .4rem .6rem .7rem; }
.guide-item { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .5rem; border-radius: .6rem; font-size: .86rem; }
.guide-item + .guide-item { border-top: 1px dashed #f1f5f9; }
.guide-item.important:not(.done) { background: #fff7ed; }
.guide-item.done .font-semibold { color: #94a3b8; text-decoration: line-through; }
.guide-item input { accent-color: #E1306C; width: 1rem; height: 1rem; }

/* modal & toast */
.modal { width: min(640px, 94vw); border-radius: 1.2rem; padding: 1.5rem; border: 0; box-shadow: 0 25px 60px rgba(0,0,0,.25); }
.modal::backdrop { background: rgba(15,23,42,.5); }
#toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(120%); background: #0f172a; color: #fff; padding: .75rem 1.25rem; border-radius: .8rem; font-size: .88rem; font-weight: 600; transition: .25s; z-index: 60; opacity: 0; }
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; cursor: zoom-out; }
.lightbox img { max-height: 92vh; max-width: 92vw; border-radius: 1rem; }