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

:root {
  --primary: #4A90D9; --primary-dark: #357ABD; --primary-light: #E8F2FF;
  --primary-hover: #357ABD;
  --success: #27AE60; --danger: #E74C3C; --warning: #F39C12;
  --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB;
  --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-700: #374151; --gray-900: #111827;
  --text: var(--gray-900); --text-light: var(--gray-500);
  --bg: var(--gray-50); --card-bg: #ffffff; --border: var(--gray-200);
  --radius: 12px; --radius-lg: 16px;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
  --transition: 0.2s ease;
}

body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background:var(--bg); color:var(--text); line-height:1.6; min-height:100vh; }
#app { max-width:1080px; margin:0 auto; padding:0 16px; }
.view { display:none; }
.view.active { display:block; }

/* ── Login ── */
.login-container { text-align:center; padding:120px 20px 60px; }
.login-container h1 { font-size:2.8rem; margin-bottom:8px; }
.login-container .subtitle { color:var(--text-light); font-size:1.1rem; margin-bottom:40px; }
.btn-google { display:inline-flex; align-items:center; gap:12px; padding:14px 28px; border:2px solid var(--gray-200); border-radius:var(--radius); background:white; font-size:1.1rem; font-weight:600; cursor:pointer; transition:all var(--transition); }
.btn-google:hover { border-color:var(--gray-400); box-shadow:var(--shadow); }

/* ── Pending Approval ── */
.pending-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:40px 32px; box-shadow:var(--shadow); display:inline-block; margin-top:20px; }
.pending-icon { font-size:3rem; margin-bottom:12px; }
.pending-card h2 { font-size:1.3rem; margin-bottom:8px; }
.pending-email { color:var(--primary); font-weight:600; font-size:.95rem; margin-bottom:8px; }
.pending-desc { color:var(--text-light); font-size:.9rem; margin-bottom:20px; }

/* ── Users Management ── */
.users-list { display:flex; flex-direction:column; gap:8px; }
.user-card { display:flex; align-items:center; justify-content:space-between; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:14px 20px; box-shadow:var(--shadow); gap:12px; flex-wrap:wrap; }
.user-info { display:flex; flex-direction:column; gap:2px; position:relative; }
.btn-edit-name { background:none; border:none; cursor:pointer; font-size:.8rem; padding:2px 4px; position:absolute; right:-28px; top:0; opacity:.4; transition:opacity .15s; }
.btn-edit-name:hover { opacity:1; }
.user-card:hover .btn-edit-name { opacity:.7; }
.user-info-name { font-weight:700; font-size:.95rem; }
.user-info-email { font-size:.85rem; color:var(--text-light); }
.user-info-date { font-size:.75rem; color:var(--text-light); }
.user-status { display:inline-block; padding:2px 10px; border-radius:12px; font-size:.75rem; font-weight:700; }
.status-approved { background:#dcfce7; color:#166534; }
.status-pending { background:#fef3c7; color:#92400e; }
.status-rejected { background:#fee2e2; color:#991b1b; }
.status-admin { background:var(--primary-light); color:var(--primary); }
.user-actions { display:flex; gap:6px; }
.btn-approve { padding:6px 14px; border:none; border-radius:6px; background:#16a34a; color:#fff; font-size:.8rem; font-weight:600; cursor:pointer; }
.btn-approve:hover { background:#15803d; }
.btn-reject { padding:6px 14px; border:none; border-radius:6px; background:var(--danger); color:#fff; font-size:.8rem; font-weight:600; cursor:pointer; }
.btn-reject:hover { background:#dc2626; }
.btn-revoke { padding:6px 14px; border:none; border-radius:6px; background:var(--card-bg); border:1px solid var(--border); color:var(--text-light); font-size:.8rem; font-weight:600; cursor:pointer; }
.btn-revoke:hover { background:var(--bg); color:var(--danger); border-color:var(--danger); }
.user-usage { font-size:.78rem; color:var(--text-light); margin-top:2px; }
.user-usage strong { color:var(--primary); font-weight:700; }
.usage-summary {
  display:flex; gap:20px; padding:12px 20px; margin-bottom:12px;
  background:var(--primary-light); border-radius:var(--radius);
  font-size:.85rem; color:var(--text-light);
}
.usage-summary strong { color:var(--primary); font-weight:700; }
.usage-console-link { color:var(--primary); text-decoration:none; font-weight:600; margin-left:auto; white-space:nowrap; }
.usage-console-link:hover { text-decoration:underline; }
.users-tab-bar { display:flex; gap:4px; padding:0 20px; margin-bottom:12px; }
.users-tab {
  padding:8px 18px; border:1px solid var(--border); border-radius:20px;
  background:var(--card-bg); font-size:.85rem; font-weight:600;
  cursor:pointer; color:var(--text-light); transition:all .15s;
}
.users-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.users-tab:hover:not(.active) { background:var(--bg); }
#rejected-count-badge { font-size:.75rem; font-weight:700; }

/* ── Student: Name Entry ── */
.name-container { max-width:480px; margin:60px auto; text-align:center; }
.name-board-info { margin-bottom:32px; }
.name-board-info h1 { font-size:1.8rem; margin-bottom:8px; }
.name-form { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); }
.name-form label { display:block; font-size:1.1rem; font-weight:700; margin-bottom:12px; color:var(--text); }
.name-form input { width:100%; padding:14px; border:2px solid var(--border); border-radius:8px; font-size:1.2rem; text-align:center; font-weight:600; margin-bottom:16px; transition:border-color .15s; }
.name-form input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(74,144,217,.1); }

/* ── Student: Gallery ── */
.gallery-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; gap:16px; flex-wrap:wrap; }
.gallery-header-left h1 { font-size:1.5rem; }
.gallery-desc { color:var(--text-light); font-size:.9rem; margin-top:4px; white-space:pre-wrap; }
.gallery-header-right { display:flex; align-items:center; gap:8px; }
.student-badge { background:var(--primary-light); color:var(--primary); padding:4px 12px; border-radius:20px; font-weight:700; font-size:.85rem; }
.gallery-toolbar { display:flex; align-items:center; margin-bottom:16px; }

.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}

.gallery-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:all .15s;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.gallery-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }

.gallery-card-mine { border-color:var(--primary); border-width:2px; }

.mine-badge {
  position:absolute; top:-8px; right:12px;
  background:var(--primary); color:#fff;
  padding:2px 10px; border-radius:10px;
  font-size:.7rem; font-weight:700;
}

.card-type-icon { font-size:1.5rem; }

.card-title { font-size:1rem; font-weight:700; line-height:1.3; }

.card-url { font-size:.8rem; color:var(--primary); word-break:break-all; }
.card-text { font-size:.85rem; color:var(--text-light); line-height:1.5; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.card-files { display:flex; flex-direction:column; gap:3px; }
.card-file-chip { font-size:.8rem; color:var(--text-light); }
.card-file-more { font-size:.75rem; color:var(--primary); font-weight:600; }
.card-memo { font-size:.8rem; color:var(--text-light); font-style:italic; }

.card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:8px; border-top:1px solid var(--border); }
.card-author { font-size:.8rem; font-weight:600; color:var(--text); }
.card-time { font-size:.75rem; color:var(--text-light); }

.card-actions { display:flex; gap:2px; position:absolute; top:8px; right:8px; }

/* FAB */
.fab {
  position:fixed; bottom:30px; right:30px;
  width:auto; padding:14px 24px;
  background:var(--primary); color:#fff;
  border:none; border-radius:28px;
  font-size:1rem; font-weight:700;
  cursor:pointer; box-shadow:0 4px 14px rgba(74,144,217,.4);
  transition:all .2s; z-index:100;
}
.fab:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(74,144,217,.5); }
.fab.fab-secondary { background:#fff; color:var(--primary); border:2px solid var(--primary); box-shadow:0 4px 14px rgba(0,0,0,.1); }
.fab.fab-secondary:hover { background:var(--primary); color:#fff; }

/* ── Modal ── */
.modal { display:none; position:fixed; inset:0; z-index:500; align-items:center; justify-content:center; }
.modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,.4); }
.modal-content {
  position:relative; background:var(--card-bg); border-radius:var(--radius);
  width:90%; max-width:560px; max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); z-index:1;
}
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px 0; }
.modal-header h2 { font-size:1.3rem; }
.modal-close { background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--text-light); padding:4px; }
.modal-close:hover { color:var(--text); }
.modal-body { padding:20px 24px 24px; }

/* Detail modal */
.detail-meta { display:flex; justify-content:space-between; margin-bottom:16px; }
.detail-author { font-weight:700; }
.detail-time { color:var(--text-light); font-size:.85rem; }
.detail-content { padding:16px; background:var(--bg); border-radius:8px; margin-bottom:12px; word-break:break-all; line-height:1.7; }
.detail-text-content { white-space:pre-wrap; }
.detail-content a { color:var(--primary); }
.detail-files { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.detail-memo { color:var(--text-light); font-style:italic; }

/* Media embeds (detail modal) */
.file-media { margin-bottom:12px; }
.file-embed-img { max-width:100%; height:auto; border-radius:8px; display:block; cursor:pointer; }
.file-embed-video { max-width:100%; border-radius:8px; display:block; }
.file-media-name { font-size:.8rem; color:var(--text-light); margin-top:4px; }

/* Card thumbnail (gallery) */
.card-thumbnail { margin:-16px -16px 8px; border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; max-height:144px; position:relative; }
.card-thumbnail img, .card-thumbnail video { width:100%; height:144px; object-fit:cover; display:block; }
.card-thumbnail-badge { position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,.6); color:#fff; font-size:.7rem; padding:2px 8px; border-radius:10px; }

/* Detail modal navigation */
.detail-modal-header { display:flex; align-items:center; gap:8px; }
.detail-modal-header h2 { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-header-right { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.detail-nav { background:none; border:1px solid var(--border); border-radius:50%; width:36px; height:36px; font-size:1.4rem; cursor:pointer; color:var(--text); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
.detail-nav:hover { background:var(--bg); border-color:var(--primary); color:var(--primary); }
.detail-modal-content { max-width:640px; }

/* Comments */
.detail-comments { margin-top:20px; border-top:1px solid var(--border); padding-top:16px; }
.comments-title { font-size:1rem; font-weight:700; margin-bottom:12px; }
.comments-title span { font-weight:400; color:var(--text-light); font-size:.85rem; }
#comments-list { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; max-height:300px; overflow-y:auto; }
.comment-item { padding:10px 12px; background:var(--bg); border-radius:8px; }
.comment-item-mine { border-left:3px solid var(--primary); }
.comment-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.comment-author { font-size:.8rem; font-weight:700; }
.comment-time { font-size:.75rem; color:var(--text-light); }
.comment-content { font-size:.9rem; line-height:1.6; white-space:pre-wrap; }
.comment-input-area { display:flex; gap:8px; align-items:flex-end; }
.comment-input-area textarea { flex:1; resize:none; padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:.9rem; font-family:inherit; }
.comment-input-area textarea:focus { outline:none; border-color:var(--primary); }
.comment-input-area .btn { white-space:nowrap; }
.comments-empty { font-size:.85rem; color:var(--text-light); text-align:center; padding:8px; }
.comment-action-btn { background:none; border:none; cursor:pointer; font-size:.7rem; padding:2px 4px; opacity:.5; transition:opacity .15s; }
.comment-action-btn:hover { opacity:1; }
.comment-item:hover .comment-action-btn { opacity:.8; }
.comment-edited { font-size:.75rem; color:var(--text-light); font-weight:400; }
.comment-item-deleted { opacity:.5; border-left:3px solid var(--danger); }
.comment-deleted-text { font-size:.8rem; color:var(--danger); font-style:italic; }
.comment-original { font-size:.8rem; color:var(--text-light); margin-top:4px; padding:4px 8px; background:var(--bg); border-radius:4px; }
.comment-history { margin-top:6px; }
.comment-history summary { font-size:.75rem; color:var(--text-light); cursor:pointer; }
.comment-history-item { font-size:.75rem; color:var(--text-light); padding:2px 0; border-bottom:1px solid var(--border); }
.comment-history-time { font-weight:600; margin-right:4px; }
#comment-edit-cancel { margin-left:4px; }

/* Card comment count badge */
.card-comment-count { min-height:0; }
.card-comment-badge { font-size:.8rem; color:var(--text-light); }

/* ── Dashboard ── */
.dashboard-header {
  background:white; border-bottom:1px solid var(--gray-200);
  padding:12px 16px; position:sticky; top:0; z-index:100;
  margin:0 -16px 0; /* extend to edges */
}
.dashboard-header-inner { max-width:1080px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.header-left h1 { font-size:1.2rem; font-weight:800; color:var(--primary); }
.header-right { display:flex; align-items:center; gap:12px; }
.user-name { font-size:.85rem; color:var(--gray-500); }

.dashboard-content { padding-top:24px; }

.dashboard-list-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.dashboard-list-header h2 { font-size:1.5rem; }

.sort-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; padding:10px 16px;
  background:white; border-radius:var(--radius); box-shadow:var(--shadow);
}
.sort-options { display:flex; align-items:center; gap:8px; }
.sort-label { font-size:.85rem; font-weight:600; color:var(--gray-500); }
.sort-select { padding:6px 12px; border:1px solid var(--gray-200); border-radius:6px; font-size:.85rem; background:white; cursor:pointer; }

.sort-toolbar-right { display:flex; align-items:center; gap:8px; }
.search-box { display:flex; align-items:center; }
.search-box input { padding:8px 14px; border:1px solid var(--border); border-radius:8px; font-size:.9rem; width:200px; background:white; transition:border-color var(--transition); }
.search-box input:focus { outline:none; border-color:var(--primary); }

/* Board Cards */
.board-cards { display:flex; flex-direction:column; gap:12px; }
.board-card {
  background:white; border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); cursor:pointer; transition:all var(--transition);
}
.board-card:hover { box-shadow:var(--shadow-lg); }
.board-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.board-card-header h3 { font-size:1.1rem; flex:1; }
.board-card-meta { display:flex; align-items:center; gap:16px; font-size:.85rem; color:var(--gray-500); }
.access-code-display { font-family:monospace; font-size:1.1rem; font-weight:700; background:var(--gray-100); padding:4px 10px; border-radius:6px; letter-spacing:.1em; }
.board-card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.btn-equal { flex:1 1 0; min-width:0; text-align:center; padding:8px 4px; }

/* Status Badges */
.badge { display:inline-block; padding:4px 10px; border-radius:20px; font-size:.8rem; font-weight:600; }
.badge-active { background:#D1FAE5; color:#065F46; }
.badge-expired { background:#FEE2E2; color:#991B1B; }
.badge-private { background:#E5E7EB; color:#374151; }


/* ── Common ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 24px; border:none; border-radius:var(--radius); font-size:1rem; font-weight:600; cursor:pointer; transition:all var(--transition); touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.btn:active { transform:scale(0.97); }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--primary-dark); }
.btn-secondary { background:var(--gray-200); color:var(--gray-700); }
.btn-secondary:hover:not(:disabled) { background:var(--gray-300); }
.btn-success { background:var(--success); color:#fff; }
.btn-danger-light { background:#FEE2E2; color:#B91C1C; border:1px solid #FECACA; }
.btn-danger-light:hover { background:#FECACA; }
.btn-full { width:100%; padding:14px; font-size:1.05rem; }
.btn-sm, .btn-small { min-height:40px; padding:8px 16px; font-size:.9rem; }
.btn-small { background:white; border:1px solid var(--border); color:var(--text); }
.btn-small:hover { background:var(--bg); }
.btn-danger { color:var(--danger); border-color:var(--danger); }
.btn-danger:hover { background:#fef2f2; }
.btn-back { background:none; border:none; color:var(--text-light); cursor:pointer; font-size:.95rem; padding:4px 0; }
.btn-back:hover { color:var(--text); }

.sub-header { margin-bottom:24px; }
.sub-header h2 { font-size:1.5rem; margin-top:8px; }

.form-container { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; color:var(--text); }
.required { color:var(--danger); }
input[type="text"], input[type="url"], input[type="datetime-local"], textarea { width:100%; min-height:48px; padding:12px 16px; border:2px solid var(--gray-200); border-radius:var(--radius); font-size:1rem; font-family:inherit; transition:border-color var(--transition); background:white; }
input:focus, textarea:focus { outline:none; border-color:var(--primary); }

.checkbox-group { display:flex; gap:16px; flex-wrap:wrap; }
.checkbox-label { display:flex !important; align-items:center; gap:6px; font-weight:400 !important; cursor:pointer; }
.checkbox-label input[type="checkbox"] { width:18px; height:18px; accent-color:var(--primary); }

.radio-group { display:flex; gap:12px; flex-wrap:wrap; }
.radio-option { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:.9rem; font-weight:600; padding:8px 12px; border:1px solid var(--border); border-radius:8px; transition:all .15s; }
.radio-option:hover { border-color:var(--primary); background:var(--primary-light); }
.radio-option:has(input:checked) { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.radio-option input[type="radio"] { accent-color:var(--primary); margin:0; }

.result-container { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:40px 24px; text-align:center; box-shadow:var(--shadow); }
.code-display { margin-bottom:30px; }
.code-display p { color:var(--text-light); margin-bottom:8px; }
.big-code { font-size:3rem; font-weight:800; letter-spacing:12px; color:var(--primary); margin-bottom:20px; font-family:'Courier New',monospace; }
.code-display .btn { margin:0 4px; }

.board-code-badge { display:inline-block; background:var(--primary-light); color:var(--primary); padding:4px 12px; border-radius:20px; font-weight:700; font-size:.9rem; letter-spacing:2px; margin-top:4px; }
.board-desc { color:var(--text-light); margin-bottom:16px; white-space:pre-wrap; }
.deadline-notice { background:#fef3c7; border:1px solid #fcd34d; border-radius:8px; padding:10px 16px; margin-bottom:16px; font-size:.9rem; color:#92400e; }
.deadline-notice.expired { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }

.board-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.toolbar-actions { display:flex; gap:6px; flex-wrap:wrap; }
.count-badge { font-weight:700; color:var(--primary); font-size:.95rem; }

.submissions-list { display:flex; flex-direction:column; gap:12px; }
.submission-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; box-shadow:var(--shadow); }
.submission-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.submission-name { font-weight:700; font-size:1rem; }
.submission-time { color:var(--text-light); font-size:.8rem; }
.submission-type { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.75rem; font-weight:600; margin-right:6px; }
.type-url { background:#dbeafe; color:#1e40af; }
.type-text { background:#dcfce7; color:#166534; }
.type-file { background:#fef3c7; color:#92400e; }
.submission-title-text { font-weight:600; font-size:.95rem; margin-bottom:4px; color:var(--text); }
.submission-content { margin-top:8px; padding:10px 14px; background:var(--bg); border-radius:8px; font-size:.9rem; word-break:break-all; }
.submission-content a { color:var(--primary); text-decoration:none; }
.submission-content a:hover { text-decoration:underline; }
.submission-memo { color:var(--text-light); font-size:.85rem; margin-top:6px; font-style:italic; }
.submission-files { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.file-link { display:inline-flex; align-items:center; gap:4px; color:var(--primary); text-decoration:none; font-size:.9rem; }
.file-link:hover { text-decoration:underline; }
.submission-actions { margin-top:10px; display:flex; justify-content:flex-end; }
.btn-edit-submission { background:none; border:none; color:var(--text-light); cursor:pointer; font-size:.8rem; padding:4px 8px; border-radius:4px; margin-right:4px; }
.btn-edit-submission:hover { color:var(--primary); background:var(--primary-light); }
.btn-delete-submission { background:none; border:none; color:var(--text-light); cursor:pointer; font-size:.8rem; padding:4px 8px; border-radius:4px; }
.btn-delete-submission:hover { color:var(--danger); background:#fee2e2; }

.file-drop-zone { border:2px dashed var(--border); border-radius:8px; padding:30px; text-align:center; cursor:pointer; transition:all .15s; position:relative; }
.file-drop-zone:hover, .file-drop-zone.dragover { border-color:var(--primary); background:var(--primary-light); }
.file-drop-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-drop-zone p { color:var(--text-light); font-size:.9rem; }
.file-list { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.file-item { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; background:var(--bg); border-radius:6px; font-size:.85rem; }
.file-item button { background:none; border:none; color:var(--danger); cursor:pointer; font-size:1rem; }
.file-edit-notice { padding:8px 12px; background:#fef3c7; border-radius:6px; font-size:.85rem; color:#92400e; }

.progress-bar { margin-top:12px; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; background:var(--primary); border-radius:3px; width:0%; transition:width .3s; }

.empty-state { text-align:center; padding:60px 20px; color:var(--gray-400); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.empty-state-icon { font-size:3rem; margin-bottom:12px; }
.empty-state p { font-size:1.1rem; line-height:1.8; }

.spinner { width:40px; height:40px; border:4px solid var(--gray-200); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; margin-bottom:12px; }
@keyframes spin { to { transform:rotate(360deg); } }

.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px); background:var(--gray-900); color:white; padding:12px 24px; border-radius:var(--radius); font-weight:500; z-index:9999; transition:transform .3s ease; white-space:nowrap; }
.toast.show { transform:translateX(-50%) translateY(0); }

/* ── Board Type Toggle ── */
.board-type-toggle { display:flex; gap:8px; }
.type-toggle-btn { flex:1; padding:12px; border:2px solid var(--border); border-radius:8px; background:var(--card-bg); cursor:pointer; font-size:.95rem; font-weight:600; text-align:center; transition:all .15s; }
.type-toggle-btn:hover { border-color:var(--primary); background:var(--primary-light); }
.type-toggle-btn.active { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }

.category-preview { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cat-chip { display:inline-block; padding:4px 10px; border-radius:12px; font-size:.8rem; font-weight:600; }
.form-hint { font-size:.8rem; color:var(--text-light); margin-top:8px; }


/* ── Shelf Layout (Inquiry) ── */
/* When inquiry views are active, expand #app to full width */
#app:has(#inquiry-gallery-view.active), #app:has(#inquiry-board-view.active),
#app:has(#gallery-view.active), #app:has(#board-view.active),
#app:has(#classify-gallery-view.active), #app:has(#classify-board-view.active) { max-width:none; }
.shelf-container { display:flex; gap:10px; padding-bottom:16px; min-height:300px; }
.shelf-column { flex:1; min-width:0; display:flex; flex-direction:column; }
.shelf-header { padding:10px 14px; border-radius:8px 8px 0 0; font-weight:700; font-size:.9rem; display:flex; justify-content:space-between; align-items:center; }
.shelf-count { font-size:.75rem; background:rgba(0,0,0,.1); padding:2px 8px; border-radius:10px; }
.shelf-cards { flex:1; display:flex; flex-direction:column; gap:8px; padding:8px; background:var(--bg); border-radius:0 0 8px 8px; border:1px solid var(--border); border-top:none; min-height:60px; }
.shelf-empty { text-align:center; padding:20px 8px; color:var(--text-light); font-size:.8rem; }

/* ── Inquiry Card ── */
.inquiry-card { background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:12px; box-shadow:var(--shadow); transition:all .15s; }
.inquiry-card:hover { box-shadow:var(--shadow-lg); }
.inquiry-card-mine { border-color:var(--primary); border-width:2px; }
.inquiry-card-content { font-size:.9rem; line-height:1.5; margin-bottom:8px; word-break:break-word; }
.inquiry-card-footer { display:flex; justify-content:space-between; font-size:.75rem; color:var(--text-light); margin-bottom:6px; }
.inquiry-card-author { font-weight:600; }
.inquiry-card-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* ── Classify: Overview ── */
.cl-overview-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; padding:28px 24px; }
.cl-overview-card { background:var(--card-bg,#fff); border-radius:8px; padding:20px 14px; border:2px solid var(--border); text-align:center; cursor:pointer; transition:all .2s; }
.cl-overview-card:hover { border-color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.cl-overview-icon { font-size:2.5rem; margin-bottom:8px; }
.cl-overview-name { font-weight:600; font-size:1rem; margin-bottom:4px; }
.cl-overview-sub { font-size:.8rem; color:var(--text-light); }
.cl-overview-members { font-size:.75rem; color:var(--text-light); margin-top:6px; line-height:1.4; word-break:break-word; }

/* ── Classify: Back Button ── */
.cl-back-btn { background:none; border:1px solid var(--border); border-radius:8px; padding:8px 14px; cursor:pointer; font-size:.85rem; font-weight:600; transition:all .15s; color:var(--text); }
.cl-back-btn:hover { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }

/* ── Classify: Tree + Folder View ── */
.cl-container { min-height:300px; padding-bottom:80px; }
.cl-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.cl-view-toggle { display:flex; gap:4px; }
.cl-view-btn { padding:8px 14px; border:1px solid var(--border); border-radius:8px; background:var(--card-bg); cursor:pointer; font-size:.85rem; font-weight:600; transition:all .15s; }
.cl-view-btn:hover { border-color:var(--primary); background:var(--primary-light); }
.cl-view-btn.active { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.cl-search-box { margin-left:auto; }
.cl-search-box input { padding:8px 14px; border:1px solid var(--border); border-radius:8px; font-size:.85rem; width:200px; background:white; }
.cl-search-box input:focus { outline:none; border-color:var(--primary); }

/* Tree View — horizontal mind-map layout (parent left → children right) */
.cl-tree-canvas { padding:32px; min-width:max-content; min-height:100%; overflow:auto; position:relative; }
.cl-tree-root { display:flex; flex-direction:row; align-items:flex-start; position:relative; }
.cl-tree-node { display:flex; flex-direction:row; align-items:center; position:relative; margin:5px 0; z-index:1; }
.cl-tree-children { display:flex; flex-direction:column; margin-left:48px; position:relative; padding:6px 0; }

.cl-node-box {
  background:var(--card-bg); border:2px solid var(--border); border-left:4px solid var(--primary);
  border-radius:10px; padding:10px 14px; box-shadow:var(--shadow);
  cursor:grab; transition:all .15s; min-width:120px; max-width:220px;
  position:relative; user-select:none; flex-shrink:0;
}
.cl-node-box:hover { border-color:var(--primary); box-shadow:var(--shadow-lg); }
.cl-node-mine { border-color:var(--primary); border-width:1px 1px 1px 4px; }
.cl-category-box { font-weight:600; background:linear-gradient(135deg, #f0f4ff 0%, #e8edfa 100%); border-left-width:4px; border-radius:10px; }
.cl-category-box .cl-node-icon { font-size:1.1rem; }
.cl-category-box .cl-node-title { font-size:.95rem; font-weight:700; color:var(--primary); }
.cl-entry-box { border-left-width:3px; background:#fff; }
.cl-dragging { opacity:.4; }
.cl-drag-over { border-color:#10B981 !important; background:#ECFDF5 !important; border-style:dashed !important; }

.cl-node-header { display:flex; align-items:center; gap:6px; }
.cl-node-icon { font-size:1rem; flex-shrink:0; }
.cl-node-title { font-size:.9rem; font-weight:600; word-break:break-word; flex:1; }
.cl-node-title mark { background:#fef08a; padding:0 2px; border-radius:2px; }
.cl-node-menu-btn { background:none; border:none; cursor:pointer; font-size:1.1rem; padding:2px 6px; color:var(--text-light); opacity:.4; transition:opacity .15s; flex-shrink:0; }
.cl-node-menu-btn:hover { opacity:1; }
.cl-node-box:hover .cl-node-menu-btn { opacity:.7; }

/* Root node */
.cl-root-node { background:linear-gradient(135deg,#2C3E50,#34495E); color:#fff; font-weight:600; border:none; min-width:160px; position:relative; }
.cl-root-node:hover { background:linear-gradient(135deg,#34495E,#2C3E50); }
.cl-root-node .cl-node-badge { background:rgba(255,255,255,.2); color:#fff; padding:2px 10px; border-radius:10px; font-size:.75rem; }
.cl-root-edit-btn { background:none; border:none; cursor:pointer; font-size:.75rem; padding:2px 4px; border-radius:4px; opacity:.6; transition:opacity .15s; }
.cl-root-edit-btn:hover { opacity:1; background:rgba(255,255,255,.15); }

/* Add button (hover reveal on nodes) */
.cl-add-btn { position:absolute; right:-14px; top:50%; transform:translateY(-50%); width:28px; height:28px; background:var(--primary,#4A90D9); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700; box-shadow:0 2px 6px rgba(74,144,217,.4); opacity:0; transition:all .2s; z-index:5; cursor:pointer; border:none; }
.cl-node-box:hover > .cl-add-btn { opacity:1; }
.cl-add-btn:hover { transform:translateY(-50%) scale(1.15); }

.cl-node-image { margin-top:8px; border-radius:6px; overflow:hidden; max-height:120px; }
.cl-node-image img { width:100%; height:auto; max-height:120px; object-fit:cover; display:block; }

.cl-node-desc { font-size:.8rem; color:var(--text-light); margin-top:6px; line-height:1.4; word-break:break-word; }

.cl-node-meta { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:.75rem; color:var(--text-light); }
.cl-node-author { font-weight:600; }

/* Stars */
.cl-star-btn { background:none; border:none; cursor:pointer; font-size:.85rem; color:#F59E0B; padding:2px 4px; transition:all .15s; }
.cl-star-btn:hover { transform:scale(1.2); }
.clb-readonly .cl-star-btn { display:none !important; }
.clb-readonly .clb-page-wrapper { cursor:pointer; }
.clb-readonly .clb-pdf-btns { display:none !important; }
.clb-readonly .clb-close { display:none !important; }
.cl-starred { color:#F59E0B; font-weight:700; }

/* Folder View */
.cl-folder-view { padding:8px 0; }
.cl-breadcrumb { display:flex; align-items:center; gap:4px; margin-bottom:16px; flex-wrap:wrap; }
.cl-breadcrumb-item { background:none; border:1px solid var(--border); border-radius:6px; padding:6px 12px; cursor:pointer; font-size:.85rem; font-weight:600; transition:all .15s; }
.cl-breadcrumb-item:hover { border-color:var(--primary); background:var(--primary-light); }
.cl-breadcrumb-sep { color:var(--text-light); font-size:1rem; }

.cl-folder-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }

.cl-folder-card {
  background:var(--card-bg); border:1px solid var(--border); border-top:4px solid var(--primary);
  border-radius:var(--radius); padding:14px; box-shadow:var(--shadow);
  cursor:pointer; transition:all .15s;
}
.cl-folder-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.cl-folder-category { cursor:pointer; background:linear-gradient(135deg, #f0f4ff 0%, #e8edfa 100%); border-top-width:4px; }
.cl-folder-category .cl-folder-title { font-weight:700; color:var(--primary); }
.cl-folder-category .cl-folder-icon { font-size:1.3rem; }
.cl-folder-nav { cursor:pointer; border-top:3px solid #E5E7EB; background:#F9FAFB; display:flex; align-items:center; justify-content:center; min-height:60px; }
.cl-folder-nav:hover { background:var(--primary-light); border-top-color:var(--primary); }
.cl-folder-nav .cl-folder-card-header { justify-content:center; }
.cl-folder-nav .cl-folder-title { font-weight:500; color:var(--text-light); }
.cl-folder-entry { border-top-width:3px; background:#fff; }
.cl-folder-card.cl-node-mine { border-color:var(--primary); }

.cl-folder-card-header { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.cl-folder-icon { font-size:1.2rem; }
.cl-folder-title { font-size:.95rem; font-weight:600; flex:1; word-break:break-word; }
.cl-folder-actions { display:flex; gap:2px; opacity:0; transition:opacity .15s; flex-shrink:0; }
.cl-folder-card:hover .cl-folder-actions { opacity:1; }
.cl-folder-edit-btn, .cl-folder-del-btn { background:none; border:none; cursor:pointer; font-size:.75rem; padding:2px 4px; border-radius:4px; transition:background .12s; }
.cl-folder-edit-btn:hover { background:var(--primary-light); }
.cl-folder-del-btn:hover { background:#FEE2E2; }

.cl-folder-img { border-radius:6px; overflow:hidden; margin-bottom:8px; max-height:100px; }
.cl-folder-img img { width:100%; height:auto; max-height:100px; object-fit:cover; display:block; }

.cl-folder-desc { font-size:.8rem; color:var(--text-light); margin-bottom:8px; line-height:1.4; }

.cl-folder-meta { display:flex; justify-content:space-between; align-items:center; font-size:.75rem; color:var(--text-light); }
.cl-child-count { background:var(--primary-light); color:var(--primary); padding:2px 8px; border-radius:10px; font-weight:600; font-size:.7rem; margin-right:4px; }

/* Context Menu */
.cl-context-menu {
  position:fixed; z-index:1000; background:var(--card-bg); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.15); min-width:160px; padding:4px 0;
}
.cl-ctx-item {
  display:block; width:100%; text-align:left; padding:8px 16px; border:none; background:none;
  font-size:.85rem; cursor:pointer; transition:background .1s;
}
.cl-ctx-item:hover { background:var(--bg); }
.cl-ctx-danger { color:var(--danger); }
.cl-ctx-danger:hover { background:#fee2e2; }

/* Color Picker */
.cl-color-picker {
  position:fixed; z-index:1000; background:var(--card-bg); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.12); padding:8px;
  display:flex; flex-wrap:wrap; gap:6px; max-width:180px;
}
.cl-color-dot { width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:all .15s; }
.cl-color-dot:hover { transform:scale(1.15); border-color:var(--text); }
.cl-color-reset { background:var(--bg); border:1px dashed var(--border); font-size:.7rem; display:flex; align-items:center; justify-content:center; }

/* ── Book View (Fullscreen Dictionary Presentation) ── */
#cl-book-overlay {
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease;
  -webkit-tap-highlight-color:transparent;
}
#cl-book-overlay *, #cl-book-overlay *::before, #cl-book-overlay *::after {
  -webkit-tap-highlight-color:transparent;
}
#cl-book-overlay.clb-open { opacity:1; }

.clb-container { width:100%; height:100%; display:flex; flex-direction:column; position:relative; }
.clb-page-wrapper {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:24px; overflow:hidden;
  transition:transform .3s ease, opacity .3s ease;
}
.clb-page-wrapper.clb-flip-left { transform:translateX(-40px); opacity:0; }
.clb-page-wrapper.clb-flip-right { transform:translateX(40px); opacity:0; }
.clb-page-wrapper.clb-flip-in { transform:translateX(0); opacity:1; }

/* Controls */
.clb-controls {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:center;
  padding:16px 24px;
  background:linear-gradient(transparent, rgba(0,0,0,.4));
}
.clb-close {
  position:absolute; top:16px; right:20px; z-index:10;
  background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2); border-radius:50%;
  width:40px; height:40px; color:#fff; font-size:1.1rem;
  cursor:pointer; transition:all .2s;
}
.clb-close:hover { background:rgba(255,255,255,.3); transform:scale(1.1); }
.clb-nav { display:flex; align-items:center; gap:16px; }
.clb-prev, .clb-next {
  background:rgba(255,255,255,.12); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.15); border-radius:50%;
  width:44px; height:44px; color:#fff; font-size:1.4rem;
  cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.clb-prev:hover:not(:disabled), .clb-next:hover:not(:disabled) { background:rgba(255,255,255,.25); transform:scale(1.08); }
.clb-prev:disabled, .clb-next:disabled { opacity:.3; cursor:not-allowed; }
.clb-page-num { color:rgba(255,255,255,.7); font-size:.85rem; min-width:60px; text-align:center; font-variant-numeric:tabular-nums; }

/* PDF Download Button */
.clb-pdf-btns {
  position:absolute; top:16px; right:68px; z-index:10;
  display:flex; gap:6px;
}
.clb-download-pdf {
  background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2); border-radius:20px;
  padding:6px 16px; color:#fff; font-size:.8rem;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.clb-download-pdf:hover { background:rgba(255,255,255,.3); }
.clb-download-pdf:disabled { opacity:.4; cursor:not-allowed; }

/* PDF Progress Overlay */
/* ── Cover Page ── */
.clb-cover {
  width:min(480px, 90vw); aspect-ratio:148/210;
  background:linear-gradient(170deg, #faf8f5 0%, #f4efe8 40%, #ece5d8 100%);
  border-radius:4px 12px 12px 4px;
  box-shadow:
    -4px 0 8px rgba(0,0,0,.15),
    4px 4px 20px rgba(0,0,0,.25),
    inset -2px 0 4px rgba(0,0,0,.05);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:36px 28px; position:relative; overflow:hidden; text-align:center;
}
.clb-cover-ornament {
  position:absolute; left:40px; right:40px; height:2px;
  background:linear-gradient(90deg, transparent, #8b7355, transparent);
}
.clb-cover-ornament.top { top:40px; }
.clb-cover-ornament.top::before, .clb-cover-ornament.top::after,
.clb-cover-ornament.bottom::before, .clb-cover-ornament.bottom::after {
  content:'◆'; position:absolute; top:-7px; color:#8b7355; font-size:.6rem;
}
.clb-cover-ornament.top::before { left:-8px; }
.clb-cover-ornament.top::after { right:-8px; }
.clb-cover-ornament.bottom { bottom:40px; }
.clb-cover-ornament.bottom::before { left:-8px; top:-7px; }
.clb-cover-ornament.bottom::after { right:-8px; top:-7px; }
.clb-cover-content { display:flex; flex-direction:column; align-items:center; gap:16px; }
.clb-cover-label {
  font-size:.8rem; letter-spacing:6px; text-transform:uppercase;
  color:#8b7355; font-weight:600;
}
.clb-cover-title {
  font-size:2.2rem; font-weight:800; color:#2c1810;
  line-height:1.3; margin:8px 0; word-break:keep-all;
  font-family:'Pretendard', serif;
}
.clb-cover-desc { font-size:.95rem; color:#6b5b4f; line-height:1.6; max-width:360px; }
.clb-cover-author {
  margin-top:20px; font-size:1.05rem; color:#4a3728; font-weight:600;
  padding:8px 24px;
  border-top:1px solid #c4b5a0; border-bottom:1px solid #c4b5a0;
}
.clb-cover-participants {
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 12px;
  margin-top:12px; padding-top:12px; border-top:1px solid #d4c5b0;
}
.clb-cover-name {
  font-size:.9rem; font-weight:600; color:#4a3728;
  padding:2px 10px; background:rgba(212,197,176,.25); border-radius:12px;
}
.clb-cover-stats { font-size:.8rem; color:#9b8b7a; margin-top:8px; }
.clb-cover-qr {
  position:absolute; bottom:48px; right:32px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  opacity:.7;
}
.clb-cover-qr img { border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,.1); }
.clb-cover-qr span { font-size:.55rem; color:#9b8b7a; letter-spacing:.02em; }

/* ── TOC Page ── */
.clb-toc {
  width:min(480px, 90vw); aspect-ratio:148/210;
  background:linear-gradient(170deg, #faf8f5 0%, #f5f1eb 100%);
  border-radius:4px 12px 12px 4px;
  box-shadow:
    -4px 0 8px rgba(0,0,0,.15),
    4px 4px 20px rgba(0,0,0,.25),
    inset -2px 0 4px rgba(0,0,0,.05);
  padding:36px 28px; position:relative; overflow:hidden;
}
.clb-page-header {
  text-align:center; font-size:1.1rem; font-weight:700; color:#4a3728;
  letter-spacing:4px; margin-bottom:32px; padding-bottom:12px;
  border-bottom:1px solid #d4c5b0;
}
.clb-toc-list { display:flex; flex-direction:column; gap:0; }
.clb-toc-item {
  display:flex; align-items:center; gap:10px; padding:14px 8px;
  cursor:pointer; transition:background .15s; border-radius:4px;
}
.clb-toc-item:hover { background:rgba(139,115,85,.08); }
.clb-toc-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.clb-toc-dot-sub { width:7px; height:7px; opacity:.7; }
.clb-toc-sub .clb-toc-label { font-size:.9rem; color:#6b5b4f; font-weight:400; }
.clb-toc-label { font-size:1rem; color:#2c1810; font-weight:500; }
.clb-toc-line { flex:1; border-bottom:1px dotted #c4b5a0; margin:0 4px; min-width:20px; }
.clb-toc-count { font-size:.8rem; color:#8b7355; white-space:nowrap; }

/* ── Content Spread ── */
.clb-spread {
  width:min(960px, 95vw); aspect-ratio:296/210;
  display:flex; border-radius:4px 12px 12px 4px;
  box-shadow:
    -4px 0 8px rgba(0,0,0,.15),
    4px 4px 20px rgba(0,0,0,.25);
  overflow:hidden;
}
/* ── Single Page (mobile) ── */
.clb-single {
  width:min(480px, 92vw); max-height:calc(100vh - 100px); min-height:50vh;
  background:linear-gradient(170deg, #faf8f5 0%, #f5f1eb 100%);
  border-radius:8px; padding:24px 20px;
  box-shadow:
    0 4px 20px rgba(0,0,0,.25);
  display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.clb-single .clb-entry-img,
.clb-single .clb-entry-image-full { max-height:40vh; }
.clb-single .clb-chapter-img { max-height:30vh; }
.clb-single .clb-section-img { max-height:25vh; }
.clb-left, .clb-right {
  flex:1; padding:24px 20px;
  background:linear-gradient(170deg, #faf8f5 0%, #f5f1eb 100%);
  display:flex; flex-direction:column; position:relative;
}
.clb-left {
  border-radius:4px 0 0 4px;
  box-shadow:inset -1px 0 3px rgba(0,0,0,.06);
}
.clb-right { border-radius:0 12px 12px 0; }
.clb-spine {
  width:4px; flex-shrink:0;
  background:linear-gradient(180deg,
    #d4c5b0 0%, #b8a68e 20%, #9b8b7a 50%, #b8a68e 80%, #d4c5b0 100%);
  box-shadow:0 0 6px rgba(0,0,0,.2);
}

/* Side empty */
.clb-side-empty {
  display:flex; align-items:center; justify-content:center; height:100%;
  color:rgba(0,0,0,.06); font-size:4rem;
}
.clb-watermark { opacity:.4; }

/* ── Section (Category) ── */
.clb-section {
  display:flex; flex-direction:column; height:100%; justify-content:center; align-items:center;
  text-align:center; gap:16px; padding:20px 0;
}
.clb-section-bar { width:48px; height:4px; border-radius:2px; margin-bottom:8px; }
.clb-section-body { display:flex; flex-direction:column; align-items:center; gap:12px; }
.clb-section-label { font-size:.75rem; letter-spacing:3px; color:#8b7355; font-weight:600; text-transform:uppercase; }
.clb-section-title { font-size:1.8rem; font-weight:800; color:#2c1810; line-height:1.3; word-break:keep-all; }
.clb-section-desc { font-size:.9rem; color:#6b5b4f; line-height:1.6; max-width:300px; }
.clb-section-img { border-radius:8px; overflow:hidden; max-width:240px; max-height:160px; }
.clb-section-img img { width:100%; height:100%; object-fit:cover; }
.clb-section-stats { font-size:.8rem; color:#9b8b7a; }
.clb-section-star { margin-top:4px; }

/* ── Chapter (최상위 분류 — spread의 한쪽 페이지) ── */
.clb-chapter {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; padding:32px 20px; text-align:center; position:relative; overflow:hidden;
}
.clb-chapter-deco {
  position:absolute; left:60px; right:60px; height:3px; border-radius:2px; opacity:.6;
}
.clb-chapter-deco.top { top:40px; }
.clb-chapter-deco.bottom { bottom:40px; }
.clb-chapter-body { display:flex; flex-direction:column; align-items:center; gap:12px; max-width:100%; }
.clb-chapter-label {
  font-size:.85rem; letter-spacing:5px; text-transform:uppercase;
  color:#8b7355; font-weight:600;
}
.clb-chapter-title {
  font-size:1.8rem; font-weight:800; color:#2c1810; line-height:1.3;
  word-break:keep-all; font-family:'Pretendard', serif;
}
.clb-chapter-desc { font-size:.95rem; color:#6b5b4f; line-height:1.6; max-width:320px; }
.clb-chapter-img { border-radius:10px; overflow:hidden; max-width:240px; max-height:160px; }
.clb-chapter-img img { width:100%; height:100%; object-fit:cover; }
.clb-chapter-stats { font-size:.85rem; color:#9b8b7a; }

/* ── Section depth levels (하위 분류 — progressive) ── */
.clb-section-d2 .clb-section-label { font-size:.68rem; letter-spacing:2px; }
.clb-section-d2 .clb-section-desc { font-size:.85rem; max-width:260px; }
.clb-section-d2 .clb-section-img { max-width:180px; max-height:100px; }
.clb-section-d3 .clb-section-label { font-size:.65rem; letter-spacing:1.5px; }
.clb-section-d3 .clb-section-desc { font-size:.82rem; max-width:240px; }
.clb-section-d3 .clb-section-img { max-width:150px; max-height:80px; }
.clb-section-d4 .clb-section-label { font-size:.62rem; letter-spacing:1px; }
.clb-section-d4 .clb-section-desc { font-size:.8rem; max-width:220px; }
.clb-section-d4 .clb-section-img { max-width:120px; max-height:70px; }

/* ── Book Breadcrumb ── */
.clb-breadcrumb {
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  font-size:.72rem; color:#9b8b7a; margin-bottom:6px;
  padding-bottom:6px; border-bottom:1px dotted #e5ddd0;
}
.clb-crumb {
  color:var(--crumb-color, #8b7355); font-weight:600;
  max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.clb-crumb-sep { color:#c4b5a0; font-size:.65rem; }

/* ── Entry Image Page (이미지 전용 페이지) ── */
.clb-entry-image-page {
  display:flex; flex-direction:column; height:100%; padding:8px 0; gap:8px;
}
.clb-entry-image-full {
  flex:1; display:flex; align-items:center; justify-content:center;
  border-radius:8px; overflow:hidden;
}
.clb-entry-image-full img {
  max-width:100%; max-height:100%; object-fit:contain; border-radius:8px;
}
.clb-entry-image-caption {
  text-align:center; font-size:.9rem; font-weight:600; color:#4a3728;
  padding:4px 0; border-top:1px solid #e5ddd0;
}

/* ── Entry (사전 항목 — dictionary card) ── */
.clb-entry {
  display:flex; flex-direction:column; height:100%;
  padding:8px 0; gap:12px;
}
.clb-entry-word {
  font-size:1.5rem; font-weight:800; color:#2c1810;
  line-height:1.3; word-break:keep-all;
  padding-bottom:8px;
  border-bottom:2px solid var(--entry-color, #6B7280);
}
.clb-entry-img { border-radius:8px; overflow:hidden; flex:2; min-height:0; margin:0 8px; }
.clb-entry-img img { width:100%; height:100%; object-fit:cover; display:block; }
.clb-entry-desc {
  font-size:.95rem; color:#4a3728; line-height:1.8;
  flex:1; word-break:break-word; white-space:pre-wrap;
  padding-left:4px;
  border-left:3px solid #e5ddd0;
  display:flex; align-items:center;
}
.clb-entry-footer {
  display:flex; align-items:center; gap:8px; font-size:.75rem; color:#9b8b7a;
  padding-top:8px; border-top:1px solid #e5ddd0; margin-top:auto;
}
.clb-entry-author { font-weight:600; color:#6b5b4f; }
.clb-entry-time { margin-left:auto; }

/* ── Page Number ── */
.clb-page-number {
  position:absolute; bottom:10px; right:16px;
  font-size:.7rem; color:#b8a68e; font-weight:500;
}

/* FAB */
.cl-fab {
  position:fixed; bottom:30px; right:30px;
  width:56px; height:56px;
  background:var(--primary); color:#fff;
  border:none; border-radius:50%;
  font-size:1.8rem; font-weight:300; line-height:1;
  cursor:pointer; box-shadow:0 4px 14px rgba(74,144,217,.4);
  transition:all .2s; z-index:100;
}
.cl-fab:hover { transform:translateY(-2px) scale(1.05); box-shadow:0 6px 20px rgba(74,144,217,.5); }

/* Add popup — positioned near FAB (folder view) or at cursor (tree view + button) */
.cl-add-popup {
  position:fixed; bottom:96px; right:30px; z-index:200;
  flex-direction:column; gap:2px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:8px;
  padding:3px; box-shadow:var(--shadow-lg);
}
.cl-add-popup-btn { padding:6px 10px; border:none; border-radius:5px; background:transparent; cursor:pointer; font-size:.82rem; font-weight:500; transition:all .12s; text-align:left; white-space:nowrap; width:100%; }
.cl-add-popup-btn:hover { background:var(--primary-light); color:var(--primary); }

/* Card Editor extras */
.cl-dropzone { border:2px dashed var(--border); border-radius:8px; padding:24px; text-align:center; cursor:pointer; transition:all .15s; position:relative; }
.cl-dropzone:hover { border-color:var(--primary); background:var(--primary-light); }
.cl-dropzone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.cl-dropzone p { color:var(--text-light); font-size:.85rem; }
.cl-img-preview { position:relative; margin-bottom:8px; }
.cl-img-preview img { max-width:100%; max-height:200px; border-radius:8px; display:block; }
.cl-img-remove { position:absolute; top:4px; right:4px; background:rgba(0,0,0,.6); color:white; border:none; border-radius:50%; width:24px; height:24px; cursor:pointer; font-size:.8rem; }

/* Move modal */
.cl-move-list { display:flex; flex-direction:column; gap:4px; max-height:400px; overflow-y:auto; }
.cl-move-item { padding:10px 14px; border:1px solid var(--border); border-radius:8px; background:var(--card-bg); cursor:pointer; text-align:left; font-size:.9rem; transition:all .15s; }
.cl-move-item:hover { border-color:var(--primary); background:var(--primary-light); }

/* Members table */
.cl-members-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.cl-members-table th { text-align:left; padding:8px 6px; border-bottom:2px solid var(--border); font-weight:600; font-size:.8rem; color:var(--text-light); }
.cl-members-table td { padding:6px; border-bottom:1px solid var(--border); vertical-align:middle; }

/* SVG tree lines */
.cl-tree-svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:visible; }

/* ── Like Button ── */
.like-btn { background:none; border:1px solid var(--border); border-radius:16px; padding:3px 10px; cursor:pointer; font-size:.8rem; display:inline-flex; align-items:center; gap:4px; transition:all .15s; }
.like-btn:hover { border-color:var(--primary); background:var(--primary-light); }
.like-btn.liked { border-color:#ef4444; background:#fee2e2; }
.like-count { font-weight:600; }

/* ── Drag & Drop (Teacher) ── */
[draggable="true"] { cursor:grab; -webkit-user-select:none; user-select:none; }
[draggable="true"]:active { cursor:grabbing; }
.inquiry-card.dragging, .gallery-card.dragging { opacity:.3; }
.shelf-column.shelf-drop-target .shelf-cards { background:var(--primary-light); border-color:var(--primary); }
.inquiry-card.drag-above, .gallery-card.drag-above { border-top:3px solid var(--primary); margin-top:-1px; }
.drag-ghost { transition:none !important; border-radius:var(--radius); }

/* ── Inquiry Category Select (Student Modal) ── */
.category-select { display:flex; flex-wrap:wrap; gap:6px; }
.cat-select-btn { padding:8px 14px; border:2px solid transparent; border-radius:8px; cursor:pointer; font-size:.85rem; font-weight:600; transition:all .15s; }
.cat-select-btn:hover { opacity:.8; }
.cat-select-btn.active { border-color:var(--text); box-shadow:0 0 0 2px rgba(0,0,0,.1); }

/* ── Confirm Modal ── */
.confirm-modal-content { max-width:360px; text-align:center; }
.confirm-message { font-size:1rem; line-height:1.6; margin-bottom:20px; word-break:break-word; white-space:pre-wrap; }
.confirm-actions { display:flex; gap:10px; justify-content:center; }
.btn-danger-fill { background:var(--danger); color:#fff; padding:10px 24px; border:none; border-radius:8px; font-size:.95rem; font-weight:600; cursor:pointer; }
.btn-danger-fill:hover { background:#dc2626; }

/* Responsive */
@media (max-width:640px) {
  .dashboard-list-header { flex-direction:column; gap:8px; align-items:flex-start; }
  .sort-toolbar { flex-direction:column; gap:8px; align-items:stretch; }
  .search-box input { width:100%; }
  .board-card-actions { flex-direction:column; }
  .big-code { font-size:2.2rem; letter-spacing:8px; }
  .radio-group { flex-direction:column; }
  .board-toolbar { flex-direction:column; align-items:flex-start; }
  .toolbar-actions { width:100%; }
  .toolbar-actions .btn-small { flex:1; }
  .gallery-grid { grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:12px; }
  .gallery-header { flex-direction:column; }
  .fab { bottom:20px; right:20px; padding:12px 20px; font-size:.9rem; }
  .fab.fab-secondary { left:20px; }
  .modal-content { width:95%; }
  .shelf-container { overflow-x:auto; }
  .shelf-column { min-width:200px; flex-shrink:0; }
  .category-select { flex-direction:column; }
  .detail-nav { width:32px; height:32px; font-size:1.2rem; }
  .comment-input-area { flex-direction:column; }
  .comment-input-area .btn { align-self:flex-end; }
  .card-thumbnail img, .card-thumbnail video { height:112px; }
  .cl-search-box { margin-left:0; width:100%; }
  .cl-search-box input { width:100%; }
  .cl-folder-grid { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:8px; }
  .cl-node-box { min-width:100px; max-width:180px; }
  .cl-tree-children { margin-left:24px; }
  .cl-fab { bottom:20px; right:20px; width:50px; height:50px; font-size:1.5rem; }
  .cl-add-popup { bottom:80px; right:20px; }
  .cl-toolbar { flex-direction:row; flex-wrap:wrap; align-items:center; }
  .cl-overview-grid { grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px; padding:16px 12px; }
  .cl-add-btn { opacity:1; }
  .clb-spread { flex-direction:column; width:92vw; aspect-ratio:auto; min-height:auto; }
  .clb-left, .clb-right { min-height:38vh; padding:20px 16px; }
  .clb-left { border-radius:8px 8px 0 0; box-shadow:inset 0 -1px 3px rgba(0,0,0,.06); }
  .clb-right { border-radius:0 0 8px 8px; }
  .clb-spine { width:100%; height:2px; background:linear-gradient(90deg, #d4c5b0, #9b8b7a, #d4c5b0); }
  .clb-cover, .clb-toc { width:92vw; aspect-ratio:auto; min-height:70vh; padding:32px 20px; }
  .clb-cover-title { font-size:1.8rem; }
  .clb-chapter-title { font-size:1.6rem; }
  .clb-chapter { padding:48px 16px; }
  .clb-chapter-deco { left:24px; right:24px; }
  .clb-chapter-deco.top { top:16px; }
  .clb-chapter-deco.bottom { bottom:16px; }
  .clb-section-title { font-size:1.3rem; }
  .clb-entry-word { font-size:1.2rem; }
  .clb-page-wrapper { padding:8px; padding-bottom:60px; }
  .clb-controls { padding:10px 16px; background:linear-gradient(transparent 0%, rgba(0,0,0,.5) 40%); }
  .clb-close { top:8px; right:8px; width:36px; height:36px; }
  .clb-prev, .clb-next { width:42px; height:42px; font-size:1.3rem; }
  .clb-nav { gap:12px; }
  .clb-pdf-btns { top:8px; right:52px; gap:4px; }
  .clb-download-pdf { padding:5px 10px; font-size:.7rem; }
  .clb-cover-qr img { width:56px; height:56px; }
  .clb-cover-qr { bottom:36px; right:20px; }
}