/* 개념 노트 (#/concept) — 고르는 칸은 hub.css 의 up-card · lv-pick · unit-pick · seg 를 그대로 쓰고, 여기엔 이 화면만의 것 */
.cn-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.cn-live { display: none; }
@media (min-width: 1100px) {
  .cn-grid { grid-template-columns: minmax(0, 1fr) minmax(400px, 48%); }
  .cn-live { display: flex; flex-direction: column; position: sticky; top: calc(var(--top-h, 64px) + 12px); height: calc(100vh - var(--top-h, 64px) - 24px); min-height: 540px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #EEF0F5; box-shadow: var(--sh-1); }
  .cn-mob { display: none !important; }
}
.cn-live-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #0B1B45; color: #fff; font-size: 13px; }
.cn-live-h small { color: #B9C3DD; margin-left: auto; }
.cn-live-f { position: relative; flex: 1; min-height: 0; }
.cn-live-f iframe { width: 100%; height: 100%; border: 0; display: block; background: #EEF0F5; }
.cn-wait { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(11,27,69,.85); color: #fff; font-size: 12px; padding: 5px 12px; border-radius: 99px; }

/* 과목: 개념이 있는 책은 진하게 */
.unit-pick button.cn-has:not(.on) { border-color: #0E8C86; color: var(--text); font-weight: 700; }
.unit-pick button.cn-has:not(.on) small { color: #0E8C86; }

.cn-ug-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cn-ug-h .ug-name { margin: 0; }
.cn-ug-h .linkbtn { font-size: 12.5px; }

.cn-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cn-mode { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.cn-mode input { position: absolute; opacity: 0; pointer-events: none; }
.cn-mode b { font-size: 15px; } .cn-mode small { font-size: 12px; color: var(--text-3); line-height: 1.45; }
.cn-mode.on { background: #0B1B45; border-color: #0B1B45; color: #fff; } .cn-mode.on small { color: #B9C3DD; }
:root[data-theme="dark"] .cn-mode.on { background: var(--brand); border-color: var(--brand); }
@media (max-width: 720px) { .cn-modes { grid-template-columns: 1fr; } }

.cn-opts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.cn-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.cn-row .ug-name { margin: 0; }
.cn-make { margin-top: 20px; }

.cn-none { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px dashed var(--line-strong, var(--line)); border-radius: 14px; background: var(--surface-2); margin-top: 18px; }
.cn-none b { display: block; font-size: 15px; margin-bottom: 4px; }