/* ─────────────────────────────────────────────────────────
   shared.css — codeslog demo pages
   공통 리셋, 디자인 토큰, 레이아웃, 컴포넌트
───────────────────────────────────────────────────────── */

/* ─ Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ─ Tokens ────────────────────────────────────────────── */
:root {
	--bg:        #0b1120;
	--bg-2:      #0e1528;
	--surface:   #111827;
	--surface-2: #162032;
	--bd:        #1e2d40;
	--bd-2:      #253347;
	--tx:        #c0ccd8;
	--tx-2:      #7a8ea0;
	--accent:    #5558e3;
	--green:     #22c55e;
	--red:       #f43f5e;
	--amber:     #f59e0b;
	--mono:      ui-monospace, 'SF Mono', 'Fira Code', monospace;
	--r:         6px;
}

/* ─ Base ──────────────────────────────────────────────── */
body {
	background: var(--bg);
	color: var(--tx);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

/* ─ Header ────────────────────────────────────────────── */
.hd {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--bd);
	flex-wrap: wrap;
}
.hd-back {
	font-size: 12px;
	color: var(--tx-2);
	text-decoration: none;
	white-space: nowrap;
	border-radius: 3px;
}
.hd-back:hover { color: var(--tx); }
.hd-back:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.hd-info { flex: 1; min-width: 0; }
.hd-title { font-size: 15px; font-weight: 600; }
.hd-desc  { font-size: 12px; color: var(--tx-2); margin-top: 1px; }
.hd-post-link { font-size: 11px; color: var(--accent); text-decoration: none; margin-top: 4px; display: inline-block; }
.hd-post-link:hover { text-decoration: underline; }
.hd-post-link:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─ Layout ────────────────────────────────────────────── */
.main {
	max-width: 880px;
	margin: 0 auto;
	padding: 20px 16px;
}
.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 640px) {
	.two-col { grid-template-columns: 1fr; }
}

/* ─ Tabs ──────────────────────────────────────────────── */
.tabs {
	display: flex;
	border-bottom: 1px solid var(--bd);
	margin-bottom: 18px;
}
.tab-btn {
	padding: 8px 16px;
	border: none;
	background: none;
	color: var(--tx-2);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color .15s;
	border-radius: 4px 4px 0 0;
}
.tab-btn:hover { color: var(--tx); }
.tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel         { display: none; }
.tab-panel.active  { display: block; }

/* ─ Segmented control ─────────────────────────────────── */
.seg {
	display: inline-flex;
	background: var(--surface);
	border: 1px solid var(--bd);
	border-radius: var(--r);
}
.seg label:first-child .seg-btn { border-radius: calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px); }
.seg label:last-child  .seg-btn { border-radius: 0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0; }
.seg-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.seg-btn {
	display: block;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 500;
	color: var(--tx-2);
	cursor: pointer;
	user-select: none;
	transition: background .15s, color .15s;
	white-space: nowrap;
}
.seg-btn:hover { color: var(--tx); }
.seg-radio:checked       + .seg-btn { background: var(--accent); color: #fff; }
.seg-radio:focus-visible + .seg-btn { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─ Status bar ────────────────────────────────────────── */
.status-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: var(--r);
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 14px;
	border: 1px solid var(--bd);
}
.status-bar::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}
.status-bar.on  { background: rgba(34,197,94,.07);  color: #4ade80; border-color: rgba(34,197,94,.2); }
.status-bar.on::before  { background: var(--green); }
.status-bar.off { background: rgba(244,63,94,.07);  color: #fb7185; border-color: rgba(244,63,94,.18); }
.status-bar.off::before { background: var(--red); }

/* ─ Card ──────────────────────────────────────────────── */
.card {
	background: var(--surface);
	border: 1px solid var(--bd);
	border-radius: var(--r);
	overflow: hidden;
}
.card-hd {
	padding: 10px 14px;
	border-bottom: 1px solid var(--bd);
}
.card-name { font-size: 14px; font-weight: 600; }
.card-sub  { font: 11px var(--mono); color: var(--tx-2); margin-top: 2px; }
.card-body { padding: 10px; }

/* ─ Buttons ───────────────────────────────────────────── */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
	padding: 7px 14px;
	border-radius: var(--r);
	border: none;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: opacity .15s, background .15s;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled      { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:not(:disabled):hover { opacity: .85; }
.btn-sub {
	background: var(--surface-2);
	color: var(--tx);
	border: 1px solid var(--bd-2);
}
.btn-sub:not(:disabled):hover { border-color: var(--accent); color: #818cf8; }
.btn-ghost {
	background: none;
	color: var(--tx-2);
	border: 1px solid var(--bd);
	font-size: 12px;
}
.btn-ghost:not(:disabled):hover { color: var(--tx); }
.btn-danger {
	background: rgba(244,63,94,.1);
	color: #fb7185;
	border: 1px solid rgba(244,63,94,.2);
	font-size: 12px;
	padding: 5px 10px;
}
.btn-danger:hover { background: rgba(244,63,94,.15); }

/* ─ Log rows ──────────────────────────────────────────── */
.log-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.log-row {
	padding: 5px 9px;
	border-radius: 4px;
	border-left: 2px solid transparent;
	font: 12px/1.5 var(--mono);
	background: rgba(255,255,255,.02);
	animation: fadein .12s ease;
}
@keyframes fadein {
	from { opacity: 0; transform: translateY(-2px); }
	to   { opacity: 1; transform: translateY(0); }
}
.log-row.pending  { border-left-color: var(--amber); color: var(--tx-2); }
.log-row.ok       { border-left-color: var(--green); color: var(--green); }
.log-row.err      { border-left-color: var(--red);   color: var(--red);   opacity: .85; }
.log-row.cancel   { border-left-color: var(--red);   color: var(--red);   opacity: .75; }
.log-row.info     { border-left-color: var(--bd-2);  color: var(--tx-2); }
.log-row.done-ok  {
	border-left-color: var(--green);
	background: rgba(34,197,94,.06);
	color: var(--green);
	font-weight: 600;
}
.log-row.done-err {
	border-left-color: var(--red);
	background: rgba(244,63,94,.06);
	color: var(--red);
	font-weight: 600;
}
.log-empty {
	padding: 32px 16px;
	color: var(--tx-2);
	font-size: 12px;
	text-align: center;
}

/* ─ Badge ─────────────────────────────────────────────── */
.badge {
	padding: 2px 7px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
}
.badge-bad  { background: rgba(244,63,94,.12); color: #f87171; border: 1px solid rgba(244,63,94,.25); }
.badge-good { background: rgba(34,197,94,.10); color: #4ade80; border: 1px solid rgba(34,197,94,.22); }

/* ─ SR log ────────────────────────────────────────────── */
.sr-log {
	background: var(--bg-2);
	border: 1px solid var(--bd);
	border-radius: 4px;
	padding: 7px;
	height: 100px;
	overflow-y: auto;
	font: 11px/1.5 var(--mono);
}
.sr-log::-webkit-scrollbar       { width: 3px; }
.sr-log::-webkit-scrollbar-thumb { background: var(--bd-2); border-radius: 10px; }
.sr-entry          { padding: 1px 3px; color: var(--tx-2); animation: fadeIn .12s ease; }
.sr-entry.announce { color: #818cf8; }
@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ─ Accessibility ─────────────────────────────────────── */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ─ Footer ────────────────────────────────────────────── */
.site-footer {
	padding: 24px 20px;
	text-align: center;
	border-top: 1px solid var(--bd);
	margin-top: 40px;
}
.site-footer a {
	font-size: 12px;
	color: var(--tx-2);
	text-decoration: none;
}
.site-footer a:hover { color: var(--tx); }
.site-footer a:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─ Motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}