/* JK 플립플롭 학습모드 - D 학습모드와 동일한 표 양식 사용 */
body.jkflip-study-mode #icInfoPanel,
body.jkflip-study-mode #componentSelectionPanel { display: none !important; }
body.jkflip-study-mode #saveWorkStatus { display: none !important; }
body.jkflip-study-mode .workspace { grid-template-columns: 2450px; gap: 0; padding: 0 0 30px; background: #fff !important; }
body.jkflip-study-mode .board-area { width: 2450px; height: 1450px; background: #fff !important; }
body.jkflip-study-mode .board-area::before { content: none !important; display: none !important; }
body.jkflip-study-mode #breadboard { transform: scale(1.4); transform-origin: 0 0; max-width: none; transition: none; position: relative; z-index: 1; }
body.jkflip-study-mode .wire-menu { 
	position: fixed !important;
	left: auto !important;
	right: 520px !important;
	top: 35px !important;
	z-index: 10020 !important;
	width: 260px !important;
	height: 265px !important;
	max-height: none !important;
	overflow: hidden !important;
	margin: 0 !important;
	transform: none !important;
	translate: none !important;
}
body.jkflip-study-mode .file-icon-toolbar {
	position: fixed !important;

	right: 642px !important;
	top: 315px !important;
	left: auto !important;

	z-index: 10010 !important;

	display: grid !important;
	grid-template-columns: repeat(3, 42px) !important;
	grid-auto-rows: 42px !important;
	gap: 6px !important;

	width: 138px !important;

	margin: 0 !important;
	transform: none !important;
}

/* =====================================================
   JK 플립플롭 학습영역 점선 프레임
   - D 학습모드와 위치·크기·양식 통일
   - JK 구분을 위해 보라색 계열만 사용
   ===================================================== */

.jkflip-study-frame,
body.jkflip-study-mode .jkflip-study-frame {
	position: fixed;

	left: 18px !important;
	top: 38px !important;
	right: 795px !important;
	bottom: 441px !important;

	z-index: 10005;
	box-sizing: border-box;

	border: 4px dashed rgba(124, 58, 237, 0.78);
	border-radius: 28px;

	background: rgba(139, 92, 246, 0.018);

	pointer-events: none;

	animation:
		jkflipStudyFrameAppear 0.24s ease-out both;
}

.jkflip-study-title {
	position: fixed;

	left: 40px;
	top: 6px;

	z-index: 10006;

	display: flex;
	align-items: baseline;
	gap: 10px;

	padding: 0 10px;

	background: #fff;

	color: #6d28d9;
	font-family: "맑은 고딕", sans-serif;

	pointer-events: none;

	animation:
		jkflipStudyFrameAppear 0.24s ease-out both;
}

.jkflip-study-title strong {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.35;
}

.jkflip-study-title span {
	color: #64748b;
	font-size: 11px;
	font-weight: 600;
}

@keyframes jkflipStudyFrameAppear {
	from {
		opacity: 0;
		transform: scale(0.992);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/*
 * 과거에 사용하던 왼쪽 아래 카드형 제목이 남아 있어도
 * 현재 상단 제목 양식만 보이도록 합니다.
 */
body.jkflip-study-mode .jkflip-study-badge {
	display: none !important;
}

/* 현재 상태 */
.jkflip-initial-panel { right: 20px; top: 35px; width: 250px; }

/* 7476 J·K 입력 */
.jkflip-input-panel {
	position: fixed;
	right: 530px;
	top: 460px;
	z-index: 10016;
	width: 250px;
	padding: 12px;
	box-sizing: border-box;
	background: #f4f4f4;
	border: 1px solid #cfcfcf;
	border-radius: 7px;
	box-shadow: 0 4px 14px rgba(0,0,0,.14);
	font-family: "맑은 고딕", sans-serif;
	color: #222;
}

/* D의 게이트 패널과 동일한 카드 구조 */
.jkflip-or-panel,
.jkflip-and-panel {
	position: fixed;
	top: 460px;
	z-index: 10015;
	width: 250px;
	max-height: calc(100vh - 310px);
	overflow-y: auto;
	padding: 12px;
	box-sizing: border-box;
	background: #f4f4f4;
	border: 1px solid #cfcfcf;
	border-radius: 7px;
	box-shadow: 0 4px 14px rgba(0,0,0,.14);
	font-family: "맑은 고딕", sans-serif;
	color: #222;
}
.jkflip-or-panel { right: 275px; }
.jkflip-and-panel { right: 20px; }

.jkflip-input-header,
.jkflip-input-row {
	display: grid;
	grid-template-columns: 42px 34px 34px 1fr;
	align-items: center;
	gap: 6px;
}
.jkflip-input-header {
	padding: 0 6px 5px;
	color: #777;
	font-size: 10px;
}
.jkflip-input-row {
	min-height: 34px;
	margin-bottom: 5px;
	padding: 5px 7px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 10px;
}
.jkflip-input-row b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #e5e7eb;
	font-size: 14px;
	font-weight: 700;
	color: #222;
}
.jkflip-input-row > span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jkflip-input-row[data-status="ready"] { border-color: #60a5fa; }
.jkflip-input-row[data-status="unknown"] { background: #fffbeb; border-color: #f59e0b; }
.jkflip-input-row[data-status="conflict"] { background: #fff5f5; border-color: #f87171; }

.jkflip-next-summary { margin-top: 10px; }
.jkflip-next-summary span { line-height: 1.25; }

@media (max-width: 1700px) {
	.jkflip-initial-panel { right: 20px; }
	.jkflip-input-panel { right: 348px; width: 290px; }
	.jkflip-or-panel { right: 670px; width: 290px; }
	.jkflip-and-panel { right: 992px; width: 290px; }
}

@media (max-width: 1100px) {
	.jkflip-study-frame,
	body.jkflip-study-mode .jkflip-study-frame {
		right: 356px !important;
	}

	.jkflip-study-title strong {
		font-size: 18px;
	}

	.jkflip-study-title span {
		display: none;
	}
}


/* JK 학습모드 클럭 제어 패널 */
.flip-clock-panel {
 position: fixed; right: 275px; top: 35px; z-index: 10018; width: 240px;
 padding: 12px; box-sizing: border-box; background: #f4f4f4; border: 1px solid #cfcfcf;
 border-radius: 7px; box-shadow: 0 4px 14px rgba(0,0,0,.14); font-family: "맑은 고딕", sans-serif;
}
.flip-clock-delay { display:grid; grid-template-columns:1fr 70px 18px; align-items:center; gap:6px; margin:10px 0; font-size:11px; }
.flip-clock-delay input { width:100%; box-sizing:border-box; padding:6px; border:1px solid #bbb; border-radius:5px; text-align:right; }
.flip-clock-buttons { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.flip-clock-buttons button { min-height:32px; border:1px solid #c4b5fd; border-radius:5px; background:#fff; cursor:pointer; font-weight:700; font-size:11px; }
.flip-clock-buttons button:hover { background:#f5f3ff; }
.flip-clock-buttons button[data-action="reset"],
.flip-clock-buttons button[data-action="initial-switch"] {
	min-height: 34px;
}
.flip-clock-buttons button[data-action="initial-switch"] {
	touch-action: none;
	user-select: none;
}
.flip-clock-buttons button[data-action="initial-switch"][aria-pressed="true"] {
	background: #7c3aed;
	border-color: #7c3aed;
	color: #fff;
	box-shadow: inset 0 2px 5px rgba(0,0,0,.2);
}
.flip-clock-panel[data-initial-pressed="true"] {
	outline: 2px solid #7c3aed;
	outline-offset: 2px;
}
.flip-clock-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:9px; }
.flip-clock-summary div { display:flex; flex-direction:column; gap:3px; padding:7px; border:1px solid #ddd; border-radius:5px; background:#fff; text-align:center; }
.flip-clock-summary span { color:#666; font-size:10px; }
.flip-clock-summary strong { font-size:15px; }
.flip-clock-panel[data-playing="true"] { border-color:#8b5cf6; box-shadow:0 4px 16px rgba(124,58,237,.22); }


/* Q1, Q2 등의 반전 신호를 기호 전체 위의 바로 표시 */
.logic-overline {
	display: inline-block;
	position: relative;
	padding-top: 1px;
	line-height: 1;
	white-space: nowrap;
}

.logic-overline::before {
	content: "";
	position: absolute;
	left: -0.04em;
	right: -0.04em;
	top: -0.08em;
	border-top: 1.35px solid currentColor;
}

/* 연습모드 IC 핀 배치도 이미지 레이어: 공통 스타일 */
.ic-study-image-layer { position:fixed; width:320px; height:374px; box-sizing:border-box; display:flex; flex-direction:column; background:#fff; border:1px solid #b9c6d8; border-radius:9px; box-shadow:0 8px 24px rgba(15,23,42,.2); overflow:hidden; font-family:"맑은 고딕",sans-serif; }
.ic-study-image-layer__header { flex:0 0 50px; display:flex; align-items:center; justify-content:space-between; padding:7px 8px 7px 12px; box-sizing:border-box; background:#f8fafc; border-bottom:1px solid #d9e2ef; cursor:move; user-select:none; touch-action:none; }
.ic-study-image-layer__header>div { display:flex; flex-direction:column; gap:1px; min-width:0; }
.ic-study-image-layer__header strong { font-size:13px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ic-study-image-layer__header small { color:#64748b; font-size:10px; }
.ic-study-image-layer__close { flex:0 0 30px; width:30px; height:30px; padding:0; border:1px solid #cbd5e1; border-radius:50%; background:#fff; color:#475569; font-size:21px; line-height:26px; cursor:pointer; }
.ic-study-image-layer__close:hover { background:#f1f5f9; color:#0f172a; }
.ic-study-image-layer__body { flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:8px; box-sizing:border-box; background:#fff; overflow:hidden; }
.ic-study-image-layer__body img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; user-select:none; -webkit-user-drag:none; }
.ic-study-image-layer.is-compact-height .ic-study-image-layer__body img { object-fit:fill; }
@media (max-width:1050px) { .ic-study-image-layer { width:min(310px,calc(100vw - 16px)); height:360px; } }