/* STREAMING_CHUNK:Variables and Reset */
:root {
--bg-color: #e9edf4;
--bg-mesh: radial-gradient(at 0% 0%, rgba(224, 231, 255, 0.8) 0px, transparent 50%),
           radial-gradient(at 100% 0%, rgba(254, 240, 138, 0.4) 0px, transparent 50%),
           radial-gradient(at 100% 100%, rgba(209, 250, 229, 0.6) 0px, transparent 50%),
           radial-gradient(at 0% 100%, rgba(237, 233, 254, 0.6) 0px, transparent 50%),
           #e9edf4;
--text-color: #0f172a;

/* 벤토 그리드 고유 액센트 테마 */
--accounting-point: #3b82f6;
--accounting-light: #eff6ff;
--accounting-border: #bfdbfe;

--seohee-point: #f43f5e;
--seohee-light: #fff1f2;
--seohee-border: #fecdd3;

--heera-point: #10b981;
--heera-light: #ecfdf5;
--heera-border: #a7f3d0;

--general-point: #8b5cf6;
--general-light: #f5f3ff;
--general-border: #ddd6fe;

--drawing-point: #f59e0b;
--drawing-light: #fffbeb;
--drawing-border: #fde68a;

--header-bg: rgba(255, 255, 255, 0.95);
--card-bg: #ffffff;
--card-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
--card-hover-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.12), 0 6px 14px rgba(15, 23, 42, 0.06);

--delete-btn-bg: #fee2e2;
--delete-btn-text: #dc2626;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* STREAMING_CHUNK:Layout and Header */
body {
background: var(--bg-mesh);
color: var(--text-color);
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 12px 18px;
}

body > header {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--header-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 10px 24px;
border-radius: 20px;
box-shadow: 0 6px 20px -2px rgba(15, 23, 42, 0.07);
border: 1px solid rgba(255, 255, 255, 0.9);
margin-bottom: 12px;
flex-shrink: 0;
position: relative;
z-index: 40;
}

.logo-section {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}

.logo-section h1 {
font-size: 1.45rem;
color: #0f172a;
font-weight: 800;
margin: 0;
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 8px;
}

.logo-section h1 span#logo-level-badge {
background: linear-gradient(135deg, #3b82f6, #6366f1);
color: #ffffff;
font-size: 0.82rem;
font-weight: 800;
padding: 3px 10px;
border-radius: 8px;
letter-spacing: 0;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

#grade-toggle-btn {
cursor: pointer;
font-size: 0.88rem;
font-weight: 700;
color: #3b82f6;
background: #eff6ff;
border: 1px solid #bfdbfe;
padding: 4px 12px;
border-radius: 10px;
transition: all 0.2s ease;
user-select: none;
display: inline-flex;
align-items: center;
}
#grade-toggle-btn:hover {
background: #dbeafe;
border-color: #93c5fd;
transform: translateY(-1px);
}

.header-links {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
font-size: 0.95rem;
font-weight: 700;
}

.header-right-section { display: flex; align-items: center; gap: 12px; }

.login-section { display: flex; align-items: center; gap: 8px; }
.login-section input {
padding: 6px 12px;
border: 1px solid #cbd5e1;
border-radius: 10px;
outline: none;
font-size: 0.85rem;
background: #ffffff;
transition: all 0.2s ease;
}
.login-section input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.btn {
padding: 6px 14px;
border: none;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.85rem;
display: inline-flex;
align-items: center;
gap: 4px;
}
.btn-primary {
background-color: #3b82f6;
color: #ffffff;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
.btn-primary:hover {
background-color: #2563eb;
transform: translateY(-1px);
}
.btn-logout {
background-color: #fee2e2;
color: #dc2626;
border: 1px solid #fecaca;
}
.btn-logout:hover {
background-color: #fecaca;
}
.btn-status-private {
background-color: #fef3c7;
color: #b45309;
border: 1px solid #fde68a;
font-weight: 700;
border-radius: 10px;
padding: 5px 12px;
font-size: 0.82rem;
}
.btn-status-public {
background-color: #d1fae5;
color: #047857;
border: 1px solid #a7f3d0;
font-weight: 700;
border-radius: 10px;
padding: 5px 12px;
font-size: 0.82rem;
}

.page-wrapper {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 12px;
overflow: hidden;
min-height: 0;
}

.main-grid-container {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
min-height: 0;
width: 100%;
min-width: 0;
overflow: hidden;
}

/* STREAMING_CHUNK:Flex Wrapper and Resizer */
.column-wrapper,
.seohee-wrapper {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
gap: 0;
min-width: 0;
width: 100%;
overflow: hidden;
}

.col1-sub-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 14px;
flex: 1 1 0;
min-height: 0;
min-width: 0;
width: 100%;
overflow: hidden;
}

.col1-sub-grid .card {
flex: 1 1 0;
height: 100%;
min-height: 0;
min-width: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}

#card-drawing {
flex: 1 1 0;
min-height: 0;
min-width: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}

.seohee-wrapper .card {
flex: 1 1 0;
min-height: 0;
min-width: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}

/* 세련된 상하 크기 조절바 (Resizer) */
.resizer-horizontal {
height: 14px;
cursor: row-resize;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
z-index: 10;
background: transparent;
transition: all 0.2s;
user-select: none;
margin: 2px 0;
}

.resizer-horizontal::before {
content: "";
width: 54px;
height: 4px;
background: #cbd5e1;
border-radius: 4px;
transition: all 0.2s;
}

.resizer-horizontal:hover::before,
.resizer-horizontal.dragging::before {
background: #3b82f6;
width: 90px;
height: 5px;
box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

/* STREAMING_CHUNK:Cards and Bento Grid */
.card {
background: var(--card-bg);
border-radius: 20px;
padding: 14px 16px;
display: flex;
flex-direction: column;
box-shadow: var(--card-shadow);
border: 1px solid rgba(255, 255, 255, 0.8);
min-height: 0;
min-width: 0;
width: 100%;
overflow: hidden;
position: relative;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
box-shadow: var(--card-hover-shadow);
}

/* 상단 그라데이션 액센트 라인 */
.card::before {
content: "";
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 4px;
border-radius: 0 0 6px 6px;
}

.card.accounting::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.card.general::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.card.drawing::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.card.seohee::before { background: linear-gradient(90deg, #f43f5e, #fb7185); }
.card.heera::before { background: linear-gradient(90deg, #10b981, #34d399); }

.card-header {
margin-bottom: 10px;
padding-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
border-bottom: 1px solid #f1f5f9;
width: 100%;
min-width: 0;
flex-shrink: 0;
}

.card-title {
font-size: 1.02rem;
font-weight: 800;
flex: 1;
min-width: 0;
color: #0f172a;
display: flex;
align-items: center;
gap: 6px;
letter-spacing: -0.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.card-title .title-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* 캡슐형 세그먼트 뷰 컨트롤러 */
.view-controls {
display: flex;
gap: 2px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
padding: 2px;
border-radius: 8px;
align-items: center;
flex-shrink: 0;
margin-left: auto;
}
.btn-view {
background: transparent;
border: none;
color: #64748b;
padding: 2px 7px;
border-radius: 6px;
font-size: 0.72rem;
cursor: pointer;
font-weight: 800;
transition: all 0.15s ease;
}
.btn-view:hover {
background: #e2e8f0;
color: #0f172a;
}
.btn-view.active {
background: #ffffff;
color: #0f172a;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 초슬림 컴팩트 파일 업로드 바 */
.upload-section { 
background: #f8fafc; 
border-radius: 12px; 
padding: 6px 10px; 
margin-bottom: 8px; 
border: 1px dashed #cbd5e1; 
display: none; 
flex-direction: row; 
align-items: center; 
gap: 8px; 
flex-shrink: 0;
}
.upload-section.active { display: flex; }
.upload-section input[type="file"] { 
font-size: 0.75rem; 
color: #475569; 
flex: 1; 
min-width: 0; 
cursor: pointer;
}
.upload-btn { 
background: #0f172a; 
border: none; 
color: #ffffff; 
padding: 5px 12px; 
border-radius: 8px; 
font-size: 0.75rem; 
font-weight: 700; 
cursor: pointer; 
white-space: nowrap; 
transition: all 0.15s ease;
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15);
flex-shrink: 0;
}
.upload-btn:hover { 
background: #1e293b; 
transform: translateY(-1px);
}

.paste-guide {
font-size: 0.75rem; 
color: #64748b; 
background: #fffbeb; 
padding: 6px 12px; 
border-radius: 10px;
margin-bottom: 8px; 
text-align: center; 
border: 1px solid #fde68a;
display: none;
flex-shrink: 0;
font-weight: 500;
}
.upload-section.active ~ .paste-guide,
.card.drawing:has(.upload-section.active) .paste-guide { display: block; }

.file-list {
list-style: none;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: max-content;
gap: 8px;
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
padding-right: 4px;
align-content: start;
width: 100%;
min-width: 0;
}
.file-list.view-1 { grid-template-columns: minmax(0, 1fr); }
.file-list.view-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.file-list.view-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.file-list.view-icon { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }

.file-list::-webkit-scrollbar { width: 6px; }
.file-list::-webkit-scrollbar-track { background: transparent; }
.file-list::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.3); border-radius: 10px; }
.file-list::-webkit-scrollbar-thumb:hover { background-color: rgba(148, 163, 184, 0.5); }

/* 모던 파일 아이템 디자인 (카드 행) - 컴팩트하고 파일명 가독성을 극대화한 슬림 디자인 */
.file-item { 
background: #f8fafc; 
border-radius: 10px; 
padding: 0 8px; 
height: 38px;
min-height: 38px;
max-height: 38px;
flex-shrink: 0;
display: flex; 
justify-content: space-between; 
align-items: center; 
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02); 
border: 1px solid #e2e8f0; 
transition: all 0.15s ease; 
position: relative; 
gap: 6px;
min-width: 0;
overflow: hidden;
}
.file-item:hover { 
background: #ffffff;
border-color: #93c5fd;
box-shadow: 0 3px 10px -2px rgba(59, 130, 246, 0.12); 
transform: translateY(-1px);
}

.file-info-row {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
overflow: hidden;
}

.file-name { 
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.80rem; 
font-weight: 600; 
color: #1e293b; 
text-decoration: none; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
cursor: pointer; 
min-width: 0;
flex: 1;
transition: color 0.15s ease;
}
a.file-name:hover, span.file-name:hover { 
color: #3b82f6;
}
.file-name-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
}
.file-size-tag {
font-size: 0.65rem;
font-weight: 600;
color: #94a3b8;
background: #ffffff;
border: 1px solid #e2e8f0;
padding: 1px 4px;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
}

/* 세련된 확장자 뱃지 (3D 틴트) */
.badge-ext {
font-size: 0.64rem;
font-weight: 800;
padding: 2px 5px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.2px;
flex-shrink: 0;
}
.badge-hwp { background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }
.badge-pdf { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.badge-xls { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.badge-zip { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.badge-img { background: #f3e8ff; color: #9333ea; border: 1px solid #e9d5ff; }
.badge-default { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }

.action-container { 
display: flex; 
align-items: center; 
gap: 4px; 
flex-shrink: 0;
}

/* 선명하고 컴팩트한 액션 버튼 */
.btn-view-preview {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 7px;
border-radius: 6px;
font-size: 0.68rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
background: #3b82f6;
border: 1px solid #2563eb;
color: #ffffff;
box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
transition: all 0.15s ease;
white-space: nowrap;
flex-shrink: 0;
}
.btn-view-preview:hover {
background: #2563eb;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
color: #ffffff;
}

.btn-download {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 7px;
border-radius: 6px;
font-size: 0.68rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
background: #ffffff;
border: 1px solid #cbd5e1;
color: #334155;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
transition: all 0.15s ease;
white-space: nowrap;
flex-shrink: 0;
}
.btn-download:hover {
background: #f1f5f9;
border-color: #94a3b8;
color: #0f172a;
transform: translateY(-1px);
}

.file-list.view-icon .file-item { 
flex-direction: column; 
justify-content: center; 
padding: 12px 10px; 
text-align: center; 
gap: 8px; 
height: 100%; 
border-radius: 16px;
}
.file-list.view-icon .file-info-row {
flex-direction: column;
align-items: center;
gap: 6px;
width: 100%;
}
.file-list.view-icon .file-name { 
font-size: 0.8rem; 
display: block; 
text-align: center;
white-space: normal;
word-break: break-all;
line-height: 1.3;
}
.file-list.view-icon .action-container { 
margin-top: 4px;
}
.file-list.view-icon .btn-delete { padding: 3px 6px; font-size: 0.7rem; }

.btn-delete {
background-color: var(--delete-btn-bg);
color: var(--delete-btn-text);
border: 1px solid #fecaca;
padding: 2px 6px;
font-size: 0.68rem;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
display: none;
transition: all 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
.btn-delete:hover { background-color: #fca5a5; }
.btn-delete.active { display: inline-block; }

.empty-message {
text-align: center;
color: #94a3b8;
font-size: 0.85rem;
font-weight: 500;
padding: 30px 0;
width: 100%;
grid-column: 1 / -1;
margin: auto;
}

.video-item { cursor: pointer; justify-content: flex-start; gap: 15px; align-items: flex-start; }
.video-item:hover { background-color: #faf5ff; border-color: var(--video-border); transform: translateY(-2px); }
.video-item .icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1.4; }
.video-item .file-info { max-width: 100%; }
.video-item .action-container { position: static; }

.btn-nav { background: #fff; border: 1px solid var(--video-border); color: var(--video-point); padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; display: none; align-items: center; gap: 5px; transition: 0.2s; }
.btn-nav:hover { background: var(--video-point); color: #fff; }

/* STREAMING_CHUNK:Modals and Overlays */
.modal-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(15, 23, 42, 0.75); z-index: 1000;
display: none; justify-content: center; align-items: center;
backdrop-filter: blur(6px);
}

/* 통합 문서 미리보기 모달 */
.doc-modal-content {
position: relative;
width: 90vw;
max-width: 1280px;
height: 88vh;
min-width: 360px;
min-height: 260px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid rgba(0, 0, 0, 0.08);
animation: modalFadeIn 0.2s ease-out;
box-sizing: border-box;
}
@keyframes modalFadeIn {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}

.doc-modal-header {
background: #f8fafc;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
gap: 12px;
cursor: grab;
user-select: none;
touch-action: none;
}
.doc-modal-header:active,
.doc-modal-header.is-dragging {
cursor: grabbing !important;
}
.doc-header-left {
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
min-width: 0;
}
.doc-title-text {
font-size: 1.05rem;
font-weight: 700;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.doc-header-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.doc-zoom-group {
display: inline-flex;
align-items: center;
gap: 4px;
background: #f1f5f9;
padding: 2px 4px;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.btn-modal-action {
background: #4f46e5;
color: #ffffff;
font-size: 0.8rem;
font-weight: 700;
padding: 6px 14px;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: background 0.15s;
}
.btn-modal-action:hover {
background: #4338ca;
color: #ffffff;
}
.btn-modal-close {
background: transparent;
border: none;
color: #64748b;
font-size: 1.6rem;
cursor: pointer;
line-height: 1;
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.btn-modal-close:hover {
background: #e2e8f0;
color: #0f172a;
}

/* 우측 하단 리사이즈 핸들 */
.doc-modal-resizer {
position: absolute;
right: 4px;
bottom: 4px;
width: 22px;
height: 22px;
cursor: se-resize;
z-index: 50;
opacity: 0.7;
transition: opacity 0.2s, transform 0.2s;
touch-action: none;
}
.doc-modal-resizer:hover {
opacity: 1;
transform: scale(1.2);
}
.doc-modal-resizer::after {
content: '';
position: absolute;
right: 4px;
bottom: 4px;
width: 10px;
height: 10px;
border-right: 2.5px solid #94a3b8;
border-bottom: 2.5px solid #94a3b8;
border-radius: 1px;
}

/* 엑셀 시트 탭 바 */
.preview-sheet-tabs {
background: #f1f5f9;
padding: 6px 16px;
display: flex;
gap: 6px;
border-bottom: 1px solid #cbd5e1;
overflow-x: auto;
flex-shrink: 0;
}
.sheet-tab-btn {
background: #ffffff;
border: 1px solid #cbd5e1;
color: #475569;
padding: 4px 12px;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s;
}
.sheet-tab-btn:hover {
background: #f8fafc;
color: #0f172a;
}
.sheet-tab-btn.active {
background: #10b981;
border-color: #059669;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.doc-modal-body {
flex: 1;
overflow: auto;
background: #f8fafc;
position: relative;
display: flex;
flex-direction: column;
}
.preview-frame {
width: 100%;
height: 100%;
min-height: 100%;
flex: 1;
background: #ffffff;
}
.preview-img-box {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
background: #0f172a;
overflow: auto;
user-select: none;
}
.preview-img-box img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
transition: transform 0.15s ease-out;
}
.preview-xlsx-box {
padding: 16px;
overflow: auto;
width: 100%;
height: 100%;
background: #ffffff;
}
.excel-table-scroll-wrapper table {
border-collapse: collapse;
width: 100%;
font-size: 0.82rem;
font-family: inherit;
color: #1e293b;
}
.excel-table-scroll-wrapper th,
.excel-table-scroll-wrapper td {
border: 1px solid #cbd5e1;
padding: 6px 10px;
white-space: nowrap;
}
.excel-table-scroll-wrapper tr:first-child td,
.excel-table-scroll-wrapper tr th {
background: #f8fafc;
font-weight: 600;
color: #0f172a;
}
.excel-table-scroll-wrapper tr:nth-child(even) td {
background: #fafafa;
}
.excel-table-scroll-wrapper tr:hover td {
background: #f0fdf4;
}

.preview-doc-box {
padding: 24px 16px;
overflow: auto;
background: #f1f5f9;
height: 100%;
}

/* 문서 뷰어 용지 스타일 (A4 세로 / 가로) */
/* 문서 뷰어 용지 스타일 (A4 세로 / 가로 다단) */
.doc-col-group {
display: inline-flex;
background: #f1f5f9;
padding: 2px;
border-radius: 8px;
border: 1px solid #cbd5e1;
gap: 2px;
}
.btn-col-btn {
background: transparent;
border: none;
color: #64748b;
padding: 3px 8px;
font-size: 0.72rem;
font-weight: 700;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
}
.btn-col-btn:hover {
color: #0f172a;
background: #e2e8f0;
}
.btn-col-btn.active {
background: #ffffff;
color: #4f46e5;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.doc-paper {
background: #ffffff;
margin: 0 auto;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
padding: 36px 44px;
transition: all 0.2s ease;
}
.doc-paper.doc-portrait {
width: 100%;
max-width: 820px;
min-height: 750px;
}
.doc-paper.doc-landscape {
width: 100%;
max-width: 1240px;
min-height: 520px;
padding: 28px 36px;
}

/* 가로 다단 레이아웃 (3단 / 2단 / 1단) */
.doc-paper.doc-cols-3 .doc-paper-body,
.hwpx-rendered-content.doc-cols-3,
.doc-paper.doc-landscape .doc-paper-body {
column-count: 3;
column-gap: 30px;
column-rule: 1px dashed #cbd5e1;
}

.doc-paper.doc-cols-2 .doc-paper-body,
.hwpx-rendered-content.doc-cols-2 {
column-count: 2 !important;
column-gap: 36px !important;
column-rule: 1px dashed #cbd5e1 !important;
}

.doc-paper.doc-cols-1 .doc-paper-body,
.hwpx-rendered-content.doc-cols-1 {
column-count: 1 !important;
column-rule: none !important;
}

/* 단 나눔 방지 (제목, 표, 분개) */
.doc-paper h4, .hwpx-rendered-content h4 {
break-after: avoid;
break-inside: avoid;
margin-top: 14px;
margin-bottom: 6px;
}
.doc-paper table, .hwpx-rendered-content table, .doc-paper .bg-amber-50\/70 {
break-inside: avoid;
margin-top: 8px;
margin-bottom: 12px;
}
.doc-paper p, .hwpx-rendered-content p {
break-inside: avoid;
margin-bottom: 4px;
line-height: 1.6;
}

.doc-paper-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 10px;
margin-bottom: 20px;
}
.doc-paper-body {
font-family: 'Noto Sans KR', sans-serif;
color: #1e293b;
line-height: 1.7;
}

.btn-orientation {
background: #f1f5f9;
color: #334155;
border: 1px solid #cbd5e1;
cursor: pointer;
}
.btn-orientation:hover {
background: #e2e8f0;
color: #0f172a;
}
.preview-loading {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 50;
}
.spinner {
width: 36px;
height: 36px;
border: 3px solid #e2e8f0;
border-top-color: #4f46e5;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}

.modal-content {
position: absolute; width: 80vw; height: 75vh; min-width: 400px; min-height: 300px;
background: #0f172a; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
resize: both; overflow: hidden; display: flex; flex-direction: column;
left: 50%; top: 50%; transform: translate(-50%, -50%);
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.modal-content::-webkit-resizer {
background-color: #1e293b;
background-image: repeating-linear-gradient(-45deg, #1e293b, #1e293b 4px, #64748b 4px, #64748b 6px);
border-top-left-radius: 100%;
}
.modal-header {
background: #1e293b; padding: 10px 18px; display: flex; align-items: center;
cursor: grab; flex-shrink: 0; user-select: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-header:active { cursor: grabbing; }
.drag-handle { color: var(--video-point); margin-right: 12px; font-size: 1.25rem; cursor: grab; padding: 0 2px; }
.video-title { color: #f8fafc; font-size: 0.95rem; font-weight: 600; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-close { color: #94a3b8; font-size: 1.5rem; cursor: pointer; text-decoration: none; transition: all 0.2s; line-height: 1; margin-left: 15px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; }
.modal-close:hover { color: #ffffff; background: rgba(255, 255, 255, 0.12); }
.video-wrapper { flex-grow: 1; display: flex; justify-content: center; align-items: center; background: #0b0f19; min-height: 0; width: 100%; padding: 0; }
video, img#image-viewer { width: 100%; height: 100%; max-height: 100%; object-fit: contain; outline: none; background: transparent; }

.paste-modal-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.6); z-index: 2000;
display: none; align-items: center; justify-content: center;
}
.paste-modal-content { background: #fff; padding: 25px; border-radius: 16px; width: 400px; display: flex; flex-direction: column; gap: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.paste-modal-content h3 { font-size: 1.2rem; color: #333; margin: 0; }
.paste-preview { width: 100%; max-height: 200px; object-fit: contain; background: #f0f0f0; border-radius: 8px; border: 1px solid #ddd; }
.paste-modal-content input { padding: 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; width: 100%; outline: none; }
.paste-modal-content input:focus { border-color: var(--drawing-point); box-shadow: 0 0 0 3px rgba(159, 122, 234, 0.1); }
.paste-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.btn-save { background: var(--drawing-point); color: #fff; padding: 8px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }
.btn-save:hover { background: #805ad5; }
.btn-cancel { background: #e2e8f0; color: #4a5568; padding: 8px 20px; border: none; border-radius: 8px; cursor: pointer; }
.btn-cancel:hover { background: #cbd5e0; }

/* STREAMING_CHUNK:Calculator */
#calculator-widget {
position: fixed;
top: 100px;
right: 30px;
width: 270px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
border: 1px solid #e2e8f0;
z-index: 1050;
display: flex;
flex-direction: column;
overflow: hidden;
user-select: none;
}
#calculator-widget.hidden {
display: none;
}
.calc-header {
background: #f8fafc;
padding: 10px 15px;
font-size: 0.9rem;
font-weight: bold;
color: #475569;
display: flex;
justify-content: space-between;
align-items: center;
cursor: grab;
border-bottom: 1px solid #e2e8f0;
}
.calc-header:active {
cursor: grabbing;
}
.calc-header button {
background: none;
border: none;
font-size: 1.1rem;
color: #94a3b8;
cursor: pointer;
line-height: 1;
}
.calc-header button:hover {
color: #ef4444;
}

/* 기억 토글 버튼 및 패널 스타일 */
.calc-mem-toggle-btn {
background: #e0e7ff !important;
color: #3730a3 !important;
font-size: 0.75rem !important;
font-weight: bold;
padding: 3px 8px;
border-radius: 6px;
transition: all 0.2s;
}
.calc-mem-toggle-btn:hover {
background: #c7d2fe !important;
}

#calc-memory-panel {
background: #f1f5f9;
border-bottom: 1px solid #cbd5e1;
padding: 10px 12px;
font-size: 0.8rem;
}
#calc-memory-panel.hidden {
display: none;
}
.calc-mem-header {
display: flex;
justify-content: space-between;
align-items: center;
color: #475569;
font-weight: bold;
margin-bottom: 6px;
font-size: 0.75rem;
}
.calc-mem-reset-btn {
background: #fee2e2;
color: #dc2626;
border: none;
border-radius: 4px;
padding: 2px 6px;
font-size: 0.7rem;
font-weight: bold;
cursor: pointer;
}
.calc-mem-reset-btn:hover {
background: #fca5a5;
}
.calc-mem-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 110px;
overflow-y: auto;
}
.calc-mem-empty {
color: #94a3b8;
text-align: center;
padding: 8px 0;
font-size: 0.75rem;
}
.calc-mem-item {
background: #ffffff;
padding: 5px 8px;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
border: 1px solid #e2e8f0;
transition: all 0.15s;
}
.calc-mem-item:hover {
background: #e0e7ff;
border-color: #a5b4fc;
}
.calc-mem-idx {
font-size: 0.7rem;
color: #6366f1;
font-weight: bold;
}
.calc-mem-val {
font-weight: 600;
color: #1e293b;
font-size: 0.85rem;
}

.calc-display {
background: #f8fafc;
padding: 15px;
font-size: 1.8rem;
text-align: right;
color: #1e293b;
font-weight: 600;
border-bottom: 1px solid #e2e8f0;
word-wrap: break-word;
word-break: break-all;
}
.calc-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 15px;
background: #ffffff;
}
.calc-btn {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 12px 0;
font-size: 1.1rem;
font-weight: 600;
color: #334155;
cursor: pointer;
transition: all 0.1s;
}
.calc-btn:hover {
background: #e2e8f0;
}
.calc-btn:active {
transform: scale(0.95);
}
.calc-btn-000, .calc-btn-00 {
font-size: 0.95rem;
font-weight: 700;
background: #f1f5f9;
color: #1e293b;
border-color: #cbd5e1;
}
.calc-btn-000:hover, .calc-btn-00:hover {
background: #e2e8f0;
}
.calc-op {
background: #eff6ff;
color: #2563eb;
border-color: #bfdbfe;
}
.calc-op:hover {
background: #dbeafe;
}
.calc-clear {
background: #fef2f2;
color: #dc2626;
border-color: #fecaca;
}
.calc-clear:hover {
background: #fee2e2;
}
.calc-eq {
background: #2563eb;
color: #ffffff;
border-color: #2563eb;
}
.calc-eq:hover {
background: #1d4ed8;
}

@media (max-width: 900px) {
body { height: auto; overflow-y: auto; }
.page-wrapper, .main-grid-container, .column-wrapper, .seohee-wrapper { display: flex; flex-direction: column; overflow: visible; min-height: auto; }
.card { height: 400px; flex: none; }
.resizer-horizontal { display: none; }
.card.video-section { height: 400px; flex: none;}
.file-list.view-2, .file-list.view-3 { grid-template-columns: 1fr; }
.modal-content { width: 100%; height: 100%; max-width: none; left: 0 !important; top: 0 !important; transform: none !important; border-radius: 0; resize: none; }
#calculator-widget { width: 220px; top: 70px; right: 10px; }
.calc-display { font-size: 1.4rem; padding: 10px; }
.calc-btn { padding: 10px 0; font-size: 1rem; }
}
#quiz-dropdown-wrapper {
    position: relative;
    z-index: 1001;
}

#quiz-menu-dropdown, #quiz1-menu-dropdown {
    z-index: 99999 !important;
}

/* 모바일 및 태블릿 환경 강제 문제풀이 모드 및 상단 레이아웃 */
@media (max-width: 1024px) {
    #main-content-view {
        display: none !important;
    }
    #quiz-content-view:not(.hidden) {
        display: flex !important;
        position: relative;
        z-index: 1;
    }
    #learning-course-view:not(.hidden) {
        display: block !important;
        position: relative;
        z-index: 1;
    }
    
    body > header {
        padding: 10px 16px;
        position: relative;
        z-index: 999999;
    }
    .logo-section {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .logo-section h1 {
        margin-right: 10px;
        white-space: nowrap;
        font-size: 1.2rem;
    }
    .header-links {
        gap: 10px;
    }
    .login-section {
        display: none !important;
    }
    .mobile-hidden {
        display: none !important;
    }
}

/* =========================================================================
   1급 맞춤 코스 학습 (Learning Course) 모던 스타일 시스템
   ========================================================================= */

/* 1. 간편 회원가입 / 로그인 뷰 */
.learning-auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    padding: 20px 10px;
}
.learning-auth-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 24px;
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.8);
    width: 100%;
    max-width: 440px;
    padding: 32px 28px;
    transition: transform 0.2s ease;
}
.learning-auth-header {
    text-align: center;
    margin-bottom: 24px;
}
.auth-icon-badge {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #ffffff;
    font-size: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    box-shadow: 0 8px 16px -4px rgba(59, 130, 246, 0.4);
}
.auth-tabs {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 20px;
    gap: 4px;
}
.auth-tab-btn {
    flex: 1;
    padding: 8px 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.auth-tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.auth-form-body .form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}
.auth-form-body .form-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    transition: all 0.15s ease;
    box-sizing: border-box;
}
.auth-form-body .form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.btn-auth-submit {
    width: 100%;
    padding: 12px 0;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 16px -2px rgba(37, 99, 235, 0.35);
    transition: all 0.15s ease;
}
.btn-auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -2px rgba(37, 99, 235, 0.45);
}
.auth-error-msg {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc2626;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

/* 2. 학습자 대시보드 */
.learning-dashboard-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}
.learning-profile-banner {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border-radius: 20px;
    padding: 20px 24px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05);
}
.profile-avatar-circle {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #ffffff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}
.btn-learning-wrong-notes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff1f2;
    border: 1px solid #ffe4e6;
    color: #e11d48;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-learning-wrong-notes:hover {
    background: #ffe4e6;
    transform: translateY(-1px);
}
.badge-wrong-pill {
    padding: 1px 7px;
    background: #e11d48;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    border-radius: 9999px;
}
/* 맞춤 학습 활성화 시 바디 전체 스크롤 허용 */
body.learning-app-active {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
}

/* 1급 맞춤 학습 뷰 스크롤 및 전체 높이 컨테이너 */
#learning-course-view.hidden {
    display: none !important;
}

#learning-course-view:not(.hidden) {
    display: block !important;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    flex: 1;
    padding-bottom: 120px;
}
#learning-course-view::-webkit-scrollbar {
    width: 8px;
}
#learning-course-view::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.6);
    border-radius: 4px;
}
#learning-course-view::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
#learning-course-view::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 마지막 학습 위치 이어하기 버튼 */
.btn-resume-last-learning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #ffffff;
    border: 1px solid #334155;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
    transition: all 0.2s ease;
}
.btn-resume-last-learning:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.btn-resume-last-learning .pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: #38bdf8;
    box-shadow: 0 0 6px #38bdf8;
    animation: pulseGlow 1.5s infinite;
}
@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}
.btn-resume-last-learning .last-step-name {
    color: #93c5fd;
    font-size: 0.68rem;
    font-weight: 600;
}

.btn-learning-logout-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-learning-logout-text:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
    transform: translateY(-1px);
}

/* 로그아웃 커스텀 웹 모달 팝업 */
.learning-custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.learning-custom-modal-content {
    background: #ffffff;
    border-radius: 24px;
    padding: 28px 24px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(226, 232, 240, 0.8);
    animation: modalPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPopIn {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.modal-emoji-badge {
    width: 52px;
    height: 52px;
    background: #fee2e2;
    border-radius: 18px;
    font-size: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-custom-modal-cancel {
    padding: 9px 18px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-custom-modal-cancel:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.btn-custom-modal-danger {
    padding: 9px 20px;
    background: #dc2626;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    transition: all 0.15s ease;
}
.btn-custom-modal-danger:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

/* 단원 카드 */
.curriculum-section-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 18px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}
.curriculum-section-card:hover {
    transform: translateY(-3px);
    border-color: #93c5fd;
    box-shadow: 0 12px 24px -4px rgba(59, 130, 246, 0.12);
}
.section-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.section-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.section-book-page {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0369a1;
    background: #f0f9ff;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    border: 1px solid #e0f2fe;
}
.btn-section-enter {
    width: 100%;
    padding: 7px 0;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}
.curriculum-section-card:hover .btn-section-enter {
    background: #3b82f6;
    color: #ffffff;
    border-color: #2563eb;
}

/* 3. 단원 상세 학습 뷰 */
.learning-study-view {
    max-width: 900px;
    margin: 0 auto;
}
.study-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.btn-learning-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-learning-back:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.step-nav-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.step-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.step-tab-btn.active {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}
.step-tab-btn.done .step-num {
    background: #10b981;
    color: #ffffff;
}
.step-num {
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: #cbd5e1;
    color: #475569;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 이론 카드 */
.theory-study-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 22px 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
}
.theory-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.book-ref-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    padding: 3px 10px;
    border-radius: 8px;
}
.theory-points-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.theory-point-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.theory-tip-box {
    background: #fffbeb;
    border: 1px dashed #f59e0b;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #92400e;
}

/* 실전 체크 퀴즈 카드 */
.practice-quiz-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 22px 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
}
.badge-quiz-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    margin-bottom: 4px;
}
.badge-quiz-type.theory { background: #dbeafe; color: #1e40af; }
.badge-quiz-type.journal { background: #fef3c7; color: #b45309; }

.quiz-question-text {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.5;
    background: #f8fafc;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.quiz-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quiz-option-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.quiz-option-item:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}
.quiz-option-item.selected {
    background: #eff6ff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.quiz-option-item input[type="radio"] {
    display: none;
}
.quiz-option-item .opt-num {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.quiz-option-item.selected .opt-num {
    background: #3b82f6;
    color: #ffffff;
}
.quiz-option-item .opt-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    flex: 1;
}

/* 실무 분개 입력 박스 */
.journal-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
}
.journal-box.debit-box { border-left: 4px solid #3b82f6; }
.journal-box.credit-box { border-left: 4px solid #f59e0b; }
.journal-box .box-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #475569;
}

.btn-quiz-submit {
    padding: 9px 20px;
    background: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
    transition: all 0.15s ease;
}
.btn-quiz-submit:hover {
    background: #1e293b;
    transform: translateY(-1px);
}
.btn-quiz-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.quiz-feedback-container {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid transparent;
}
.quiz-feedback-container.correct {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.quiz-feedback-container.wrong {
    background: #fff1f2;
    border-color: #fecdd3;
}

/* 4. 오답노트 카드 및 필터 탭 */
.learning-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
}
.learning-filter-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.filter-tab-btn {
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.filter-tab-btn.active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}
.wrong-note-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.2s ease;
}
.wrong-note-card.resolved {
    background: #f8fafc;
    opacity: 0.75;
    border-color: #cbd5e1;
}
.note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.badge-note-type {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 800;
}
.badge-note-type.journal { background: #fef3c7; color: #b45309; }
.badge-note-type.theory { background: #dbeafe; color: #1e40af; }
.badge-wrong-count {
    padding: 1px 6px;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 800;
}
.badge-resolved {
    padding: 2px 8px;
    background: #dcfce7;
    color: #15803d;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 800;
}
.badge-active {
    padding: 2px 8px;
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 800;
}
.note-book-ref-box {
    background: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 10px;
    padding: 8px 12px;
}
.note-explanation-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
}
.note-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}
.btn-note-resolve {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    color: #15803d;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-note-resolve:hover {
    background: #bbf7d0;
}
.btn-note-unresolve {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}
.btn-note-delete {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    cursor: pointer;
}
.btn-note-delete:hover {
    background: #fca5a5;
}

/* =========================================================================
   영상 강의실 (Video Course) & 스마트 비디오 플레이어 모달 스타일
   ========================================================================= */
body.video-app-active {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
}

#video-course-view {
    animation: fadeInVideoView 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInVideoView {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.video-folder-card {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-folder-card:hover {
    transform: translateY(-2px);
}

.video-item-card {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-item-card:hover {
    transform: translateY(-3px);
}

/* 비디오 모달 컨테이너 */
.video-modal-container {
    animation: modalScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

#video-main-player::-webkit-media-controls-panel {
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

/* 빵가루 바 */
.breadcrumb-item {
    transition: color 0.15s ease;
}

/* 단축키 kbd */
kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: -0.2px;
}

/* 속도 셀렉트 박스 다크 테마 (글씨 흰색 바탕 문제 방지) */
#video-speed-select {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}
#video-speed-select option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    padding: 6px 10px;
}

/* 스마트 비디오 플레이어 모달 오버레이 최상위 레이어 */
#video-player-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1000005 !important;
    padding: 16px !important;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.video-modal-container {
    position: relative;
    user-select: auto;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8);
    touch-action: none;
    min-width: 340px;
    box-sizing: border-box;
}

.video-modal-header {
    cursor: grab;
    touch-action: none;
}
.video-modal-header:active,
.video-modal-header.is-dragging {
    cursor: grabbing !important;
}

/* 우측 하단 리사이즈 핸들 */
.video-modal-resizer {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 22px;
    height: 22px;
    cursor: se-resize;
    z-index: 50;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
    touch-action: none;
}
.video-modal-resizer:hover {
    opacity: 1;
    transform: scale(1.2);
}
.video-modal-resizer::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid #94a3b8;
    border-bottom: 2.5px solid #94a3b8;
    border-radius: 1px;
}

/* 우측 사이드바 숨김 시 전폭 확장 */
.video-modal-body.sidebar-collapsed #video-player-col {
    grid-column: span 4 / span 4 !important;
    width: 100% !important;
}
.video-modal-body.sidebar-collapsed #video-sidebar-col {
    display: none !important;
}

/* 극장 모드 (Theater Mode) */
.video-modal-container.theater-mode {
    max-width: 98vw !important;
    width: 98vw !important;
    max-height: calc(100vh - 32px) !important;
    height: calc(100vh - 32px) !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: auto !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-modal-container.theater-mode .video-modal-body {
    flex: 1 1 auto !important;
}

.video-modal-container.theater-mode #video-main-player {
    max-height: calc(100vh - 170px) !important;
}

/* 영상 로그인 게이트 모달 */
.video-gate-container {
    animation: modalScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}