@charset "utf-8";

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

:root {
	--bg: #0a0a14;
	--surface: #13131f;
	--surface2: #1c1c2e;
	--border: rgba(255,255,255,0.07);
	--pink: #e91e8c;
	--purple: #9b59e8;
	--blue: #4facfe;
	--green: #00e676;
	--orange: #ff9800;
	--yellow: #ffb74d;
	--red: #ff5252;
	--text: #f0f0f8;
	--text2: #a0a0b8;
	--text3: #606078;
	--gold: #ffd54f;
	--silver: #cfd8dc;
	--bronze: #d49060;
}

#report_cont .rpt_cont { display: none; margin-bottom: 24px; width: 100%; }
#report_cont #kcLandingHint.rpt_cont { display: block; }

.place-input-section-print { color: var(--text2); }
.place-input-section-print:hover { color: var(--text); }
#loadingSection { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.loading-spinner { width: 48px; height: 48px; border: 4px solid rgba(255,255,255,0.1); border-top-color: var(--blue); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }
.loading-text { margin-top: 16px; color: var(--text2); }

.section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.section-title i { color: var(--blue); }
.place-input-notice-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; width: 100%; }
.place-input-notice { flex: 1 1 auto; min-width: 0; background: rgba(79,172,254,0.08); border: 1px solid rgba(79,172,254,0.2); border-radius: 8px; padding: 14px 18px; box-sizing: border-box; }
.place-input-notice p { margin: 0; color: var(--text2); font-size: 0.9rem; line-height: 1.6; }
.place-input-notice i { color: var(--blue); margin-right: 8px; }

.status-banner-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; width: 100%; }
.status-banner { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 12px; font-size: 0.95rem; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.status-banner.status-found { background: linear-gradient(135deg, rgba(0,230,118,.15), rgba(0,200,83,.08)); border: 1px solid rgba(0,230,118,.35); color: var(--green); }
.status-banner.status-miss { background: linear-gradient(135deg, rgba(255,82,82,.15), rgba(255,82,82,.08)); border: 1px solid rgba(255,82,82,.3); color: #ff7070; }
.status-banner strong { color: #fff; }
.naver-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: rgba(3,199,90,.15); border: 1px solid rgba(3,199,90,.35); border-radius: 20px; color: #03c75a; font-size: 0.85rem; font-weight: 600; text-decoration: none; }

.kc-header { background: linear-gradient(135deg, rgba(155,89,232,.18), rgba(79,172,254,.12)); border: 1px solid rgba(155,89,232,.3); border-radius: 12px; padding: 22px; }
.kc-header-inner { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.kc-header-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--purple)); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: #fff; flex-shrink: 0; overflow: hidden; }
.kc-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kc-header-info h2 { margin: 0 0 4px; font-size: 1.35rem; color: var(--text); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kc-inf-type { font-size: 0.72rem; padding: 3px 10px; border-radius: 20px; background: rgba(155,89,232,.25); color: #c084fc; border: 1px solid rgba(155,89,232,.35); }
.kc-inf-id { font-size: 0.85rem; color: var(--text2); }
.kc-inf-id a { color: var(--blue); text-decoration: none; }
.kc-inf-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 0.85rem; color: var(--text2); }
.kc-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kc-cat-chip { padding: 3px 10px; border-radius: 20px; font-size: 0.74rem; border: 1px solid var(--border); color: var(--text2); }
.kc-cat-chip.primary { background: linear-gradient(135deg, rgba(233,30,140,.18), rgba(155,89,232,.18)); color: #fff; border-color: rgba(233,30,140,.35); }

.kc-desc {
	margin-top: 10px;
	font-size: 0.88rem;
	line-height: 1.55;
	color: #fff;
	word-break: break-word;
}

.kc-header-meta {
	flex: 1 1 200px;
	min-width: 0;
	align-self: flex-start;
	padding-top: 4px;
	font-size: 0.82rem;
	line-height: 1.45;
	color: #fff;
	word-break: break-word;
}

.kc-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; }
.kc-stat-grid > .kc-stat-card { min-width: 0; }
.kc-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.kc-stat-label { font-size: 0.72rem; color: var(--text3); margin-bottom: 6px; }
.kc-stat-value { font-size: 1.5rem; font-weight: 800; color: #fff; }
.kc-stat-sub { font-size: 0.72rem; color: var(--text3); margin-top: 4px; }
.val-green { color: var(--green); } .val-yellow { color: var(--yellow); } .val-accent { color: var(--blue); }

.kc-top-keywords { display: flex; flex-wrap: wrap; gap: 8px; }
.kc-top-kw-chip { padding: 6px 14px; border-radius: 20px; background: rgba(0,230,118,.12); border: 1px solid rgba(0,230,118,.35); color: var(--green); font-size: 0.82rem; font-weight: 600; }

.kc-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.kc-toolbar.kc-toolbar-cat { align-items: center; }
.kc-toolbar.kc-toolbar-cat .kc-cat-toolbar-title {
	margin: 0;
	flex: 0 0 auto;
	font-size: 1.1rem;
	gap: 8px;
}
.kc-toolbar.kc-toolbar-cat .kc-cat-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}
.kc-search-box { flex: 1 1 200px; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 9px 16px; color: var(--text); outline: none; }
.kc-filter-btn { padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); font-size: 0.78rem; cursor: pointer; }
.kc-filter-btn.active { background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; border-color: transparent; }

.section-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--text2); font-size: 0.88rem; font-weight: 700; }
.card-head-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--purple)); }
.table-wrap { overflow-x: auto; }
#kcTable { width: 100%; border-collapse: collapse; min-width: 680px; }
#kcTable th { padding: 10px 14px; text-align: left; font-size: 0.75rem; color: var(--text3); background: rgba(0,0,0,.2); border-bottom: 1px solid var(--border); cursor: pointer; }
#kcTable td { padding: 11px 14px; font-size: 0.84rem; color: var(--text2); border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
#kcTable tbody tr:hover td { background: rgba(255,255,255,.03); }
#kcTable tbody tr.hidden { display: none; }
#kcTable tr.grade-top td:first-child { box-shadow: inset 3px 0 0 var(--green); }
#kcTable tr.not-participated-row td:first-child { box-shadow: inset 3px 0 0 var(--text3); opacity: 0.88; }
.kc-keyword-hash { color: var(--pink); font-weight: 700; }
.kc-keyword-link { color: var(--text); text-decoration: none; }
.kc-keyword-link:hover { color: var(--pink); text-decoration: underline; }
.badge { display: inline-flex; padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; }
.badge-gold { background: rgba(255,213,79,.22); color: var(--gold); border: 1px solid rgba(255,213,79,.45); }
.badge-silver { background: rgba(207,216,220,.18); color: var(--silver); border: 1px solid rgba(207,216,220,.35); }
.badge-bronze { background: rgba(212,144,96,.22); color: var(--bronze); border: 1px solid rgba(212,144,96,.45); }
.badge-default { background: rgba(79,172,254,.15); color: var(--blue); border: 1px solid rgba(79,172,254,.35); }
.badge-gray { background: rgba(255,255,255,.06); color: var(--text3); border: 1px solid var(--border); }
.grade { display: inline-block; padding: 3px 10px; border-radius: 16px; font-size: 0.72rem; font-weight: 700; }
.grade-green { background: rgba(0,230,118,.15); color: var(--green); border: 1px solid rgba(0,230,118,.35); }
.grade-yellow { background: rgba(255,183,77,.12); color: var(--yellow); border: 1px solid rgba(255,183,77,.35); }
.grade-red { background: rgba(255,82,82,.12); color: #ff7070; border: 1px solid rgba(255,82,82,.35); }
.grade-gray { background: rgba(255,255,255,.05); color: var(--text3); border: 1px solid var(--border); }
.grade-participated { background: linear-gradient(135deg, rgba(233,30,140,.22), rgba(155,89,232,.22)); color: #fff; border: 1px solid rgba(233,30,140,.35); }

.kc-detail-row { display: none; }
.kc-detail-row.open { display: table-row; }
.kc-detail-td { padding: 0 14px 12px !important; background: rgba(0,0,0,.12); }
.kc-detail-inner { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; font-size: 0.82rem; color: var(--text2); }
.kc-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.kc-detail-meta strong { color: var(--text); margin-right: 4px; }
.kc-link { color: var(--blue); }
.kc-top3-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kc-top3-card { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; background: var(--surface); min-width: 160px; }
.kc-inf-sentinel td { pointer-events: none; }

.history-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.history-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 800px; max-height: 85vh; display: flex; flex-direction: column; }
.history-modal-header { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.history-modal-header h3 { margin: 0; color: var(--text); font-size: 18px; }
.history-modal-close { background: none; border: none; font-size: 28px; color: var(--text3); cursor: pointer; }
.history-modal-body { overflow-y: auto; padding: 16px 24px; }
.history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.history-table th { text-align: left; padding: 10px 8px; color: var(--text3); border-bottom: 1px solid var(--border); }
.history-table td { padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,.06);}
.slot-info { display: flex; align-items: center; gap: 10px; margin-left: auto; margin-right: 12px; font-size: 13px; flex-wrap: wrap; }
.slot-plan { background: var(--purple); color: #fff; padding: 2px 10px; border-radius: 10px; font-weight: 600; font-size: 12px; }
.slot-count,
.slot-count strong { color: #fff; }

/* .h-day-box-wrapper { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; max-width: 420px; } */
.h-day-box-wrapper {gap: 6px; flex-wrap: nowrap; overflow-x: auto; max-width: 420px; }
.h-day-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; min-width: 100px; flex-shrink: 0; cursor: pointer; }
.h-day-box--empty { opacity: 0.55; border-style: dashed; }
.h-day-box:hover { border-color: var(--blue); }
.h-day-box-date { font-size: 11px; color: var(--text3); text-align: center; }
.h-day-box-section { font-size: 11px; color: var(--text2); }

.h-action-btn { border: none; border-radius: 4px; padding: 5px 10px; font-size: 11px; cursor: pointer; color: #fff; margin-right: 4px; }
.h-refresh-btn { background: #1976d2; }
.h-delete-btn { background: var(--red); }
.kc-h-view-btn { background: linear-gradient(135deg, var(--purple), var(--pink)); font-weight: 600; }

#submitBtn {
	padding: 14px 24px;
	background: linear-gradient(135deg, #0ea5e9, var(--purple));
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
#submitBtn:hover { opacity: 0.92; }
#submitBtn:disabled { opacity: 0.55; cursor: not-allowed; }
#resetBtn {
	padding: 14px 20px;
	background: var(--surface);
	color: var(--text2);
	border: 1px solid var(--border);
	border-radius: 4px;
	font-size: 15px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
#resetBtn:hover { border-color: var(--blue); color: var(--text); }

.kc-empty { text-align: center; padding: 40px; color: var(--text3); }
.example-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; font-size: 11px; background: #555; border-radius: 4px; color: #fff; vertical-align: middle; }

@media (max-width: 720px) {
	#kcTable .kc-hide-mobile, #kcTable thead .kc-hide-mobile { display: none; }
}

/* 키첼 데모 배지 (?kc_demo=1) */
.example-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	color: #a8a8c0;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	vertical-align: middle;
}

/* 테이블 아래 등급 범례 */
.kc-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	margin-top: 18px;
	padding: 14px 18px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18));
	border: 1px solid var(--border);
	border-radius: 12px;
	box-sizing: border-box;
}
.kc-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
}
.kc-legend .grade {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	flex-shrink: 0;
}
.kc-legend-desc {
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--white);
	letter-spacing: -0.01em;
}
.kc-legend-note {
	flex: 1 1 100%;
	font-size: 0.74rem;
	line-height: 1.45;
	color: var(--white);
}

@media (max-width: 560px) {
	.kc-legend {
		gap: 10px 14px;
		padding: 12px 14px;
	}
	.kc-legend-item {
		flex: 1 1 calc(50% - 8px);
		min-width: 140px;
	}
}