/* =====================================================
   D 플립플롭 학습모드
   - 브레드보드는 250% 확대
   - 오른쪽 조작 패널은 화면에 고정
   ===================================================== */

body.dflip-study-mode #icInfoPanel {
	display: none !important;
}

body.dflip-study-mode #saveWorkStatus { display: none !important; }

body.dflip-study-mode .workspace {
	grid-template-columns: 2450px;
	gap: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 30px;
}

body.dflip-study-mode .board-area {
	width: 2450px;
	height: 1450px;
}

/* 브레드보드만 정확히 250% 확대 */
body.dflip-study-mode #breadboard {
	transform: scale(1.4);
	transform-origin: 0 0;
	max-width: none;
	transition: none;
}

/*
 * 선 연결하기. 이전 패치처럼 board-area의 모든 자식을 이동시키지 않습니다.
 * 오른쪽 패널은 viewport 기준 fixed로 고정합니다.
 */
body.dflip-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.dflip-study-mode #componentSelectionPanel {
	position: fixed !important;
	left: auto !important;
	right: 220px !important;
	top: 286px !important;
	z-index: 10010 !important;
	width: 260px !important;
	max-height: calc(100vh - 306px);
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0 !important;
	padding: 10px !important;
	box-sizing: border-box;
	background: #f0f0f0;
	border: 1px solid #cfcfcf;
	border-radius: 7px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
	transform: none !important;
	translate: none !important;
}

body.dflip-study-mode #componentSelectionPanel .component-list {
	margin-top: 8px;
}

body.dflip-study-mode #componentSelectionPanel .selection-control-area {
	margin-top: 10px;
}

body.dflip-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;
}

body.dflip-study-mode .dflip-study-portal {
	isolation: isolate;
}

body.dflip-study-mode .board-area::before {
	left: 0;
	top: 0;
	width: 1350px;
	height: 1305px;
}

.dflip-study-badge {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 10040;

	display: flex;
	flex-direction: column;
	gap: 2px;

	min-width: 170px;
	padding: 8px 11px;
	box-sizing: border-box;

	background: rgba(255, 255, 255, 0.96);
	border: 1px solid #60a5fa;
	border-radius: 7px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);

	color: #1e3a8a;
	font-family: "맑은 고딕", sans-serif;
	pointer-events: none;
}

.dflip-study-badge strong {
	font-size: 13px;
}

.dflip-study-badge span {
	color: #555;
	font-size: 11px;
}

@media (max-width: 1100px) {
	body.dflip-study-mode .wire-menu,
	body.dflip-study-mode #componentSelectionPanel {
		right: 76px !important;
	}

	body.dflip-study-mode .file-icon-toolbar {
		right: 12px !important;
	}
}


body.dflip-study-mode #componentSelectionPanel {
	display: none !important;
}

.dflip-initial-panel {
	position: fixed;
	right: 150px;
	top: 286px;
	z-index: 10015;
	width: 260px;
	padding: 12px;
	box-sizing: border-box;
	background: #f4f4f4;
	border: 1px solid #cfcfcf;
	border-radius: 7px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
	font-family: "맑은 고딕", sans-serif;
	color: #222;
}

.dflip-panel-title {
	padding-bottom: 1px;
	margin-bottom: 1px;
	border-bottom: none;
	font-size: 15px;
	font-weight: 700;
}

.dflip-panel-note {
	margin: 9px 0 11px;
	padding: 8px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	color: #555;
	font-size: 11px;
	line-height: 1.5;
}

.dflip-bit-header,
.dflip-bit-row {
	display: grid;
	grid-template-columns: 42px 42px 1fr;
	align-items: center;
	gap: 6px;
}

.dflip-bit-header {
	padding: 0 6px 5px;
	color: #777;
	font-size: 10px;
}

.dflip-bit-row {
	min-height: 34px;
	margin-bottom: 5px;
	padding: 5px 7px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 11px;
}

.dflip-bit-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: #e5e7eb;
	font-size: 15px;
	font-weight: 700;
}

.dflip-bit-row[data-status="one"] {
	border-color: #60a5fa;
}

.dflip-bit-row[data-status="one"] .dflip-bit-value {
	background: #dbeafe;
	color: #1d4ed8;
}

.dflip-bit-row[data-status="zero"] {
	border-color: #86efac;
}

.dflip-bit-row[data-status="zero"] .dflip-bit-value {
	background: #dcfce7;
	color: #166534;
}

.dflip-bit-row[data-status="forbidden"] {
	border-color: #f87171;
	background: #fff5f5;
}

.dflip-bit-row[data-status="forbidden"] .dflip-bit-value {
	background: #fee2e2;
	color: #b91c1c;
}

.dflip-value-summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
	margin-top: 1px;
}

.dflip-value-summary > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 9px;
	background: #fff;
	border: 1px solid #d7d7d7;
	border-radius: 5px;
}

.dflip-value-summary span {
	color: #666;
	font-size: 10px;
}

.dflip-value-summary strong {
	font-size: 14px;
}

.dflip-analysis-message {
	margin-top: 9px;
	padding: 8px;
	border-radius: 5px;
	background: #fff7ed;
	border: 1px solid #fdba74;
	color: #9a3412;
	font-size: 11px;
	line-height: 1.45;
}

.dflip-analysis-message[data-status="success"] {
	background: #f0fdf4;
	border-color: #86efac;
	color: #166534;
}

.dflip-analysis-message[data-status="error"] {
	background: #fef2f2;
	border-color: #fca5a5;
	color: #b91c1c;
}

@media (max-width: 1100px) {
	.dflip-initial-panel {
		right: 76px;
	}
}


.dflip-bit-row[data-status="incomplete"] {
	border-color: #f59e0b;
	background: #fffbeb;
}

.dflip-bit-row[data-status="incomplete"] .dflip-bit-value {
	background: #fef3c7;
	color: #92400e;
}

.dflip-bit-row[data-status="idle"] {
	border-color: #cbd5e1;
	background: #f8fafc;
}

.dflip-bit-row[data-status="idle"] .dflip-bit-value {
	background: #e2e8f0;
	color: #475569;
}


/* =====================================================
   D 플립플롭 학습영역 점선 프레임
   ===================================================== */

.dflip-study-frame {
	position: fixed;

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

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

	border: 4px dashed rgba(37, 99, 235, 0.78);
	border-radius: 28px;

	background: rgba(59, 130, 246, 0.018);

	pointer-events: none;

	animation:
		dflipStudyFrameAppear 0.24s ease-out both;
}

.dflip-study-title {
	position: fixed;

	left: 40px;
	top: 6px;

	z-index: 10006;

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

	padding: 0 10px;

	background: #f0f0f0;

	color: #1d4ed8;
	font-family: "맑은 고딕", sans-serif;

	pointer-events: none;

	animation:
		dflipStudyFrameAppear 0.24s ease-out both;
}

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

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

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

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

/*
 * 기존 왼쪽 아래 학습모드 배지는 더 이상 사용하지 않습니다.
 * 과거 요소가 남아 있더라도 숨깁니다.
 */
body.dflip-study-mode .dflip-study-badge {
	display: none !important;
}

@media (max-width: 1100px) {
	.dflip-study-frame {
		right: 356px;
	}

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

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


/* =====================================================
   오늘 추가된 학습 로직 패널
   - 예전 250% 디자인을 유지
   - 각 패널은 오른쪽에 고정 배치
   ===================================================== */

/* 현재 상태 패널은 예전 위치를 그대로 사용합니다. */
.dflip-initial-panel {
	right: 20px;
	top: 35px;
	width: 250px;
	max-height: calc(100vh - 306px);
	overflow-y: auto;
}

/* 7474 D 입력 */
.dflip-dinput-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, 0.14);
	font-family: "맑은 고딕", sans-serif;
	color: #222;
}

/* 7432 OR */
.dflip-or-panel {
	position: fixed;
	right: 275px;
	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, 0.14);
	font-family: "맑은 고딕", sans-serif;
	color: #222;
}

/* 7408 AND */
.dflip-and-panel {
	position: fixed;
	right: 20px;
	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, 0.14);
	font-family: "맑은 고딕", sans-serif;
	color: #222;
}

.dflip-dinput-header,
.dflip-dinput-row {
	display: grid;
	grid-template-columns: 42px 42px 1fr;
	align-items: center;
	gap: 6px;
}

.dflip-dinput-header {
	padding: 0 6px 5px;
	color: #777;
	font-size: 10px;
}

.dflip-dinput-row {
	min-height: 34px;
	margin-bottom: 5px;
	padding: 5px 7px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 10px;
}

.dflip-dinput-row > span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dflip-dinput-row[data-status="one"] {
	border-color: #60a5fa;
}

.dflip-dinput-row[data-status="zero"] {
	border-color: #86efac;
}

.dflip-dinput-row[data-status="incomplete"] {
	border-color: #f59e0b;
	background: #fffbeb;
}

.dflip-dinput-row[data-status="conflict"] {
	border-color: #f87171;
	background: #fff5f5;
}

.dflip-or-header,
.dflip-or-row {
	display: grid;
	grid-template-columns: 72px 38px 38px 38px;
	align-items: center;
	gap: 5px;
}

.dflip-or-header {
	padding: 0 6px 5px;
	color: #777;
	font-size: 10px;
	text-align: center;
}

.dflip-or-row {
	margin-bottom: 6px;
	padding: 7px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 10px;
}

.dflip-or-row strong {
	font-size: 10px;
	line-height: 1.25;
}

.dflip-or-row small {
	grid-column: 1 / -1;
	padding-top: 4px;
	border-top: 1px dashed #ddd;
	color: #555;
	font-size: 10px;
	overflow-wrap: anywhere;
}

.dflip-or-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #e5e7eb;
	font-size: 14px;
	font-weight: 700;
}

.dflip-or-output {
	border: 2px solid #94a3b8;
}

.dflip-or-row[data-status="one"] {
	border-color: #60a5fa;
}

.dflip-or-row[data-status="one"] .dflip-or-output {
	background: #dbeafe;
	color: #1d4ed8;
}

.dflip-or-row[data-status="zero"] {
	border-color: #86efac;
}

.dflip-or-row[data-status="zero"] .dflip-or-output {
	background: #dcfce7;
	color: #166534;
}

.dflip-or-row[data-status="incomplete"] {
	border-color: #f59e0b;
	background: #fffbeb;
}

.dflip-or-row[data-status="conflict"],
.dflip-or-row[data-status="power"] {
	border-color: #f87171;
	background: #fff5f5;
}

.dflip-or-empty {
	padding: 18px 8px;
	background: #fff;
	border: 1px dashed #bbb;
	border-radius: 5px;
	color: #777;
	font-size: 11px;
	text-align: center;
}

@media (max-width: 1700px) {
	.dflip-and-panel {
		right: 670px;
		width: 290px;
	}

	.dflip-dinput-panel,
	.dflip-or-panel {
		right: 348px;
		width: 290px;
	}

	body.dflip-study-mode .dflip-study-frame {
		right: 1000px;
	}
}

/* =====================================================
   D 학습모드 전체 작업영역 흰색 처리
   ===================================================== */

body.dflip-study-mode .workspace,
body.dflip-study-mode .board-area {
	background: #fff !important;
}

/* 기존의 별도 가상 배경은 사용하지 않음 */
body.dflip-study-mode .board-area::before {
	content: none !important;
	display: none !important;
}

/* 브레드보드는 작업영역 위에 표시 */
body.dflip-study-mode #breadboard {
	position: relative;
	z-index: 1;
}

/* 학습모드 클럭 제어 패널 */
.flip-clock-panel {
 position: fixed; right: 275px; top: 35px; z-index: 10018; 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;
}
.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 #b8c4d4; border-radius:5px; background:#fff; cursor:pointer; font-weight:700; font-size:11px; }
.flip-clock-buttons button:hover { background:#eff6ff; }
.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: #2563eb;
	border-color: #2563eb;
	color: #fff;
	box-shadow: inset 0 2px 5px rgba(0,0,0,.2);
}
.flip-clock-panel[data-initial-pressed="true"] {
	outline: 2px solid #2563eb;
	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:#60a5fa; box-shadow:0 4px 16px rgba(37,99,235,.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, 0.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;
}
/* 7408 원본은 세로가 길기 때문에 학습창 안에서만 높이를 압축합니다. */
.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;
	}
}