/* 클래스룸 페이지 공용 스타일 */
.cl { max-width: 720px; margin: 0 auto; }
.cl-loading { text-align: center; padding: 2rem; color: var(--md-default-fg-color--light); font-size: .875rem; }
.cl-noauth { text-align: center; padding: 2rem; }
.cl-noauth h2 { font-size: 1.1rem; margin-bottom: .5rem; }

.cl-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 999; }
.cl-modal { background: var(--md-default-bg-color); border-radius: 8px; padding: 1.25rem; max-width: 480px; width: 90%; box-shadow: 0 4px 24px rgba(0,0,0,.2); }
.cl-modal-title { font-size: .9rem; font-weight: 600; margin-bottom: .75rem; }
.cl-modal-actions { display: flex; gap: .5rem; justify-content: space-between; margin-top: .75rem; }
.cl-login { display: inline-block; padding: .5rem 1.25rem; background: var(--md-primary-fg-color); color: #fff; border-radius: 6px; text-decoration: none; font-size: .875rem; margin-top: .5rem; }

.cl-tabs { display: flex; border-bottom: 2px solid var(--md-default-fg-color--lightest); margin-bottom: .75rem; }
.cl-tab { flex: 1; text-align: center; padding: .5rem 0; font-size: .85rem; font-weight: 500; cursor: pointer; color: var(--md-default-fg-color--light); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .2s, border-color .2s; }
.cl-tab:hover { color: var(--md-default-fg-color); }
.cl-tab.active { color: var(--md-primary-fg-color); border-bottom-color: var(--md-primary-fg-color); }
.cl-panel { display: none; }
.cl-panel.active { display: block; }

.cl-sec { margin-top: .75rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 8px; padding: .75rem 1rem; }
.cl-sec-title { font-size: .8rem; font-weight: 600; color: var(--md-default-fg-color--light); text-transform: uppercase; margin-bottom: .5rem; }

.cl-field { display: flex; justify-content: space-between; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--md-default-fg-color--lightest); font-size: .85rem; }
.cl-field:last-child { border-bottom: none; }
.cl-label { font-size: .7rem; color: var(--md-default-fg-color--light); text-transform: uppercase; margin-bottom: .05rem; }
.cl-left { flex: 1; min-width: 0; }
.cl-right { margin-left: .75rem; flex-shrink: 0; }

.cl-btn { padding: .25rem .6rem; border-radius: 4px; font-size: .75rem; cursor: pointer; text-decoration: none; border: 1px solid var(--md-default-fg-color--lightest); background: transparent; color: var(--md-default-fg-color); }
.cl-btn:hover { background: var(--md-default-fg-color--lightest); }
.cl-btn.danger { border-color: #f44336; color: #f44336; }
.cl-btn.danger:hover { background: rgba(244,67,54,.1); }
.cl-btn.primary { border-color: var(--md-primary-fg-color); color: var(--md-primary-fg-color); }

.cl-empty { text-align: center; padding: 1rem; color: var(--md-default-fg-color--light); font-size: .8rem; }

.cl-form { display: flex; gap: .4rem; align-items: center; margin-top: .4rem; }
.cl-input { flex: 1; padding: .3rem .5rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; font-size: .8rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color); outline: none; }
.cl-input:focus { border-color: var(--md-primary-fg-color); }

.cl-sm { padding: .25rem .5rem; font-size: .7rem; border-radius: 4px; cursor: pointer; border: none; }
.cl-save { background: var(--md-primary-fg-color); color: #fff; }
.cl-cancel { background: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color); }
.cl-sm:disabled { opacity: .4; cursor: not-allowed; }

.cl-msg { padding: .35rem .6rem; border-radius: 4px; font-size: .8rem; margin-top: .35rem; }
.cl-msg.ok { background: rgba(76,175,80,.1); color: #4caf50; }
.cl-msg.err { background: rgba(244,67,54,.1); color: #f44336; }

.cl-expand { display: none; margin-top: .5rem; padding: .75rem; background: var(--md-code-bg-color); border-radius: 6px; }
.cl-expand.active { display: block; }
.cl-fg { margin-bottom: .5rem; }
.cl-fg label { display: block; font-size: .7rem; color: var(--md-default-fg-color--light); margin-bottom: .15rem; }
.cl-fg input:not([type="checkbox"]) { width: 100%; padding: .35rem .5rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; font-size: .8rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color); box-sizing: border-box; }
.member-cb, .cl-tbl th input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.cl-fa { display: flex; gap: .4rem; margin-top: .5rem; }

.cl-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
.cl-tbl th { text-align: left; font-size: .7rem; color: var(--md-default-fg-color--light); text-transform: uppercase; padding: .3rem .4rem; border-bottom: 1px solid var(--md-default-fg-color--lightest); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; }
.cl-tbl td { padding: .35rem .4rem; border-bottom: 1px solid var(--md-default-fg-color--lightest); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
.cl-tbl tr:last-child td { border-bottom: none; }
.cl-tbl-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 4px; cursor: col-resize; }
.cl-tbl-resize:hover, .cl-tbl-resize.active { background: var(--md-primary-fg-color); }

.cl-code { font-family: monospace; font-size: .85rem; background: var(--md-code-bg-color); padding: .15rem .4rem; border-radius: 3px; user-select: all; }
.cl-copy-icon { display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; cursor: pointer; color: var(--md-default-fg-color--light); vertical-align: middle; padding: .2rem .4rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; font-size: .7rem; position: relative; }
.cl-copy-icon:hover { color: var(--md-primary-fg-color); background: var(--md-default-fg-color--lightest); }
.cl-copy-icon.copied { color: #4caf50; border-color: #4caf50; }

.cl-card { padding: .5rem .75rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 6px; margin-bottom: .5rem; cursor: pointer; }
.cl-card:hover { background: var(--md-default-fg-color--lightest); }
.cl-card-name { font-size: .85rem; font-weight: 600; }
.cl-card-sub { font-size: .7rem; color: var(--md-default-fg-color--light); }
.cl-select { width: 100%; padding: .4rem .5rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 6px; font-size: .8rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color); outline: none; cursor: pointer; }
.cl-select:focus { border-color: var(--md-primary-fg-color); }
.cl-select option[value=""] { color: var(--md-default-fg-color--light); }
.cl-confirm { padding: .5rem .6rem; background: var(--md-code-bg-color); border: 1px solid var(--md-default-fg-color--lightest); border-radius: 6px; font-size: .8rem; line-height: 1.5; margin-top: .35rem; }
.cl-tbl-wrap { max-height: 400px; overflow: auto; }
.cl-tbl-wrap .cl-tbl thead th { position: sticky; top: 0; background: var(--md-default-bg-color); z-index: 1; }
.cl-tbl th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.cl-tbl th.sortable:hover { color: var(--md-default-fg-color); }