/* v3 화면 추가 스타일. 토큰은 app.css(v2에서 가져옴)의 :root를 따른다. */
/* display를 준 요소에서도 hidden 속성이 숨김으로 동작하게 한다 */
[hidden] { display: none !important; }
.topbar .brand { min-width: 0; }
@media (min-width: 961px) {
  .topbar .brand { flex-shrink: 0; }
  .topbar .nav { flex: 1; min-width: 0; flex-wrap: wrap; }
  .topbar-inner { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 960px) {
  .topbar .brand { white-space: normal; line-height: 1.35; }
  .topbar .brand-mark { flex-shrink: 0; }
}
.mt-12 { margin-top: 12px; }
.link-item { display: block; text-decoration: none; color: inherit; transition: border-color var(--fast), box-shadow var(--fast); }
.link-item:hover { border-color: var(--primary-line); box-shadow: var(--shadow-md); }
.linklike { border: none; background: none; padding: 0; color: var(--primary-hover); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.warn-text { color: var(--orange); font-weight: 600; }
.field-hint:empty { display: none; }
.field-hint .notice { margin-top: 6px; }

/* 홈: 화면 세 장 흐름. 커리큘럼 위버 홈의 색 입힌 안내 카드처럼 단계마다 연한 색을 준다 */
.flow3 { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.flow3 li { --tone: var(--primary-hover); --tone-bg: var(--blue-bg); --tone-line: var(--primary-line); display: flex; gap: 12px; align-items: center; background: var(--tone-bg); border: 1px solid var(--tone-line); border-radius: var(--radius-xl); padding: 18px 20px; }
.flow3 li:nth-child(2) { --tone: #059669; --tone-bg: #ECFDF5; --tone-line: #A7F3D0; }
.flow3 li:nth-child(3) { --tone: var(--accent); --tone-bg: #F5F3FF; --tone-line: #DDD6FE; }
.flow3 li strong { color: var(--tone); font-size: 15px; }
.flow3-n { width: 30px; height: 30px; border-radius: 50%; background: var(--tone); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }

/* 화면 1: 회차표 */
.sessions { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sess-head, .sess-row { display: grid; grid-template-columns: 28px 140px minmax(90px, 1fr) 110px minmax(160px, 2fr) 64px; gap: 6px; align-items: start; }
.sess-head { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.sess-row .num { padding-top: 8px; text-align: center; font-weight: 700; color: var(--text-2); }
.sess-row input, .sess-row select, .sess-row textarea { width: 100%; }
/* iOS 날짜 칸은 고유 폭이 커서 옆 칸을 덮는다: 칸 폭에 맞춰 줄이고 왼쪽 정렬 */
.sess-row > * { min-width: 0; }
.sess-when { display: grid; gap: 4px; }
/* iOS 사파리의 날짜 칸은 기본 모양이 칸 밖으로 넓어지고 값이 비면 높이가 줄어든다. 모든 날짜 칸을 다른 입력 칸과 같게 맞춘다. */
input[type="date"] { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; display: block; -webkit-appearance: none; appearance: none; text-align: left; min-height: 40px; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* 화면 1: AI 조언 패널 */
.advice-panel { max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
.advice-panel .card-body { overflow-y: auto; }
.adv-group h3 { font-size: 13px; color: var(--text-2); margin: 10px 0 6px; }
.adv-card { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-md); padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.adv-card + .adv-card { margin-top: 8px; }
.adv-shows { border-left-color: var(--green-line); }
.adv-missing { border-left-color: var(--amber-line); }
.adv-outside { border-left-color: var(--border-strong); background: var(--surface-3); }
.adv-linked { border-left-color: var(--blue-line); }
.adv-error { border-left-color: var(--red-line); background: #FFFAFA; }
.adv-warning { border-left-color: var(--amber-line); }
.adv-info { border-left-color: var(--blue-line); }
.adv-card .fix { color: var(--text-body); }
.src-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.src-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); cursor: help; }
.src-school { border-style: dashed; }

/* 학교 프로그램 지도 */
.map-wrap { overflow-x: auto; border-radius: var(--radius-xl); }
.map-grid { display: grid; grid-template-columns: 70px repeat(var(--cols, 5), minmax(170px, 1fr)); min-width: 760px; }
.map-corner, .map-mhead, .map-ghead { font-size: 12.5px; font-weight: 700; color: var(--text-2); padding: 8px; background: var(--surface-3); border-bottom: 1px solid var(--border); }
.map-ghead { border-right: 1px solid var(--border); display: flex; align-items: center; }
.map-cell { padding: 8px; border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 4px; min-height: 64px; }
.map-crowd { background: var(--amber-bg); }
.crowd-flag { color: var(--amber); font-weight: 600; }
.map-chip { display: inline-flex; align-items: center; gap: 4px; text-align: left; font: inherit; font-size: 12.5px; line-height: 1.35; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.map-chip.legend { cursor: default; }
.map-chip.mine { border-color: var(--primary-hover); box-shadow: 0 0 0 1px var(--primary-hover); }
.map-chip .chip-count { margin-left: auto; font-size: 10.5px; background: var(--text); color: #fff; border-radius: 9px; padding: 0 6px; }
.area-career { background: var(--sky-bg); border-color: #BAE6FD; }
.area-self { background: var(--green-bg); border-color: var(--green-line); }
.area-club { background: var(--purple-bg); border-color: var(--purple-line); }
.area-subject { background: var(--orange-bg); border-color: var(--orange-line); }
.area-after { background: var(--gray-bg); border-style: dashed; }
.map-list { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.reply { margin-left: 10px; color: var(--text-body); }

/* 화면 2: 오늘 운영 */
.op-list { display: flex; flex-direction: column; gap: 8px; }
.op-row { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.op-head { width: 100%; display: grid; grid-template-columns: 90px 50px 1fr 16px; gap: 8px; align-items: center; padding: 12px 16px; border: none; background: none; cursor: pointer; font: inherit; text-align: left; }
.op-head:hover { background: var(--surface-3); }
.op-body { padding: 8px 16px 16px; border-top: 1px solid var(--border-subtle); }
.compare { display: grid; gap: 8px; }
.compare.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.obs-line { padding: 4px 0; }

/* 화면 3 */
.stu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.stu-card { padding: 16px 18px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px; }
.stu-card:hover { border-color: var(--primary-line); box-shadow: var(--shadow-md); }
.handoff-one { font-weight: 650; }
.ev-blocked { color: var(--text-2); padding: 4px 0; }
.record-box textarea { font-size: 14px; }
.ref { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 6px; }

@media (max-width: 900px) {
  .flow3 { grid-template-columns: minmax(0, 1fr); }
  .sess-head { display: none; }
  .sess-row { grid-template-columns: 28px minmax(0, 1fr); }
  .sess-row > *:nth-child(n+2) { grid-column: 2; }
  .advice-panel { max-height: none; }
  .compare.two { grid-template-columns: minmax(0, 1fr); }
  .op-head { grid-template-columns: 1fr auto; }
  .op-head .row { grid-column: 1 / -1; }
}

/* 화면 1: 진행 막대, 단계 탭, 핵심 카드, 브리핑. 커리큘럼 위버 절차 배지처럼 완료는 초록, 현재는 파랑, 남은 단계는 회색 */
.stagebar { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.stage { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); }
.stage-done { color: #15803D; background: #F0FDF4; border-color: #BBF7D0; }
.stage-now { color: #fff; background: var(--primary-hover); border-color: var(--primary-hover); font-weight: 600; }
.stepper { display: flex; gap: 8px; flex-wrap: wrap; }
.step-tab { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; padding: 9px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text-2); cursor: pointer; transition: border-color var(--fast), background var(--fast); }
.step-tab:hover { border-color: var(--border-strong); }
.step-tab.on { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary-hover); font-weight: 600; }
.step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.step-tab.on .step-n { background: var(--primary-hover); color: #fff; }
.core-list { display: flex; flex-direction: column; gap: 8px; }
.core-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; transition: border-color var(--fast); }
.core-card.open { border-color: var(--primary-line); box-shadow: var(--shadow-sm); }
.core-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: none; background: none; font: inherit; text-align: left; cursor: pointer; }
.core-head:hover { background: var(--surface-3); }
.core-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.core-head > svg:last-child { margin-left: auto; flex: none; }
.core-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex: none; }
.core-dot.on { background: var(--green-line); border-color: var(--green-line); color: #fff; }
.core-body { padding: 8px 16px 16px; border-top: 1px solid var(--border-subtle); }
.tag-row { flex-wrap: wrap; gap: 6px; }
.tag-row input { width: 170px; }
.tag-chip { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; padding: 2px 4px 2px 12px; border-radius: 999px; background: var(--primary-soft); border: 1px solid var(--primary-line); color: var(--blue); }
.side-panel { max-height: calc(100vh - 112px); overflow-y: auto; }
.brief-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.brief-item { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13.5px; }
.brief-item:last-child { border-bottom: none; }
.brief-item.block { color: #9A3412; font-weight: 600; }
.brief-link { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; white-space: nowrap; color: var(--primary-hover); text-decoration: none; }
.brief-link:hover { text-decoration: underline; }
.src-fold summary { cursor: pointer; }
.src-fold .src-chips { margin-top: 4px; }
.adv-rest { display: flex; flex-direction: column; gap: 4px; }
.adv-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.apps { display: flex; flex-direction: column; }
.app-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13.5px; }
.app-row .row { margin-left: auto; }
@media (max-width: 900px) { .side-panel { max-height: none; } }

/* 모집 자료 편집과 포스터 미리보기 */
.promotion-layout { display:grid; grid-template-columns:minmax(320px,1fr) minmax(300px,1fr); gap:24px; align-items:start; }
.poster-canvas { width:100%; height:auto; border:1px solid var(--line,#e2e8f0); border-radius:12px; box-shadow:0 12px 35px #0f172a12; }
.promotion-url { overflow-wrap:anywhere; }
@media(max-width:800px) { .promotion-layout { grid-template-columns:1fr; } }
.announcement-layout { display:grid; grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr); gap:24px; align-items:start; }
.announcement-preview { padding:32px; display:grid; gap:30px; min-width:0; }
.announcement-preview h2 { font-size:28px; line-height:1.4; letter-spacing:-.035em; }
.announcement-preview h3 { font-size:19px; line-height:1.5; font-weight:750; }
.announcement-preview p { margin:0; line-height:1.8; overflow-wrap:anywhere; }
.announcement-facts { padding:20px; background:#f4f6f9; border-radius:12px; }
.announcement-example { padding:20px; background:#eff6ff; border:1px solid #dbeafe; border-radius:12px; }
@media(max-width:1000px) { .announcement-layout { grid-template-columns:1fr; } .announcement-preview { padding:24px; } }

/* 학급 통합 시트와 학생별 기록 편집 */
.record-workbench{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.wb-sidebar{position:sticky;top:84px;max-height:calc(100vh - 110px);overflow:auto;padding:14px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl)}
.wb-sidebar h2{font-size:15px;margin:0 0 12px}
.wb-list{display:flex;flex-direction:column;gap:6px}
.wb-student{display:flex;flex-direction:column;align-items:flex-start;gap:3px;border:1px solid transparent;border-radius:9px;background:transparent;text-align:left;padding:10px;cursor:pointer;font:inherit;color:inherit}
.wb-student:hover{background:var(--surface-3)}.wb-student.selected{background:var(--primary-soft);border-color:var(--primary-line)}
.wb-body{min-width:0}.wb-body .page-head h2{margin:0}
.wb-prog-group{min-width:0}.wb-prog-group>h3{font-size:13px;color:#475569;margin:4px 0 6px}
.wb-prog-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:6px}
.wb-prog{min-width:0;border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:#fff}.wb-prog.selected{border-color:var(--primary-line);background:var(--primary-soft)}
.wb-prog-top{display:flex;align-items:center;gap:8px;min-width:0}.wb-prog-top .check{flex:1;min-width:0;font-weight:650;align-items:flex-start;overflow-wrap:anywhere}.wb-prog-top .check input{margin-top:2px}
.wb-prog-top select{width:auto;flex:none;padding:4px 8px;font-size:13px}
.wb-prog-text>summary{cursor:pointer;font-size:12px;color:#64748b;padding:2px 0 0 24px}.wb-prog-text .pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 0 24px!important}
.wb-prog-rest{margin-top:6px}.wb-prog-rest>summary{cursor:pointer;font-size:12px;color:#64748b;padding:4px 0}.wb-prog-rest .wb-prog-list{margin-top:6px}
.wb-areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.wb-area{min-width:0}.wb-area textarea{line-height:1.8;min-height:180px}.wb-area input[type=number]{max-width:180px}
@media(max-width:1100px){.wb-areas{grid-template-columns:1fr}.record-workbench{grid-template-columns:190px minmax(0,1fr)}}
@media(max-width:720px){.record-workbench{grid-template-columns:1fr}.wb-sidebar{position:static;max-height:220px}.wb-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.wb-prog-list{grid-template-columns:1fr}.wb-body .page-head{align-items:flex-start}.wb-area .row{flex-wrap:wrap}}
.wb-current{position:sticky;top:76px;z-index:12;background:#f8fafc;padding:10px;border:1px solid #d7dfea;border-radius:14px;box-shadow:0 5px 18px #15274412}
.wb-current-name{font-weight:700;font-size:12px;color:#475569;margin:0 0 6px 2px}.wb-current-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wb-current-area{min-width:0;background:white;border:1px solid #e0e6ef;border-radius:10px;padding:12px}.wb-current-area h2{font-size:15px;margin:0}.wb-current-bytes{font-size:19px;color:#16243a}
.wb-current-text{max-height:114px;min-height:46px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;font-size:12px;margin:8px 0!important}.wb-current-area .field{margin:0;max-width:125px}.wb-current-area .field label{font-size:11px}.wb-current-area input{padding:5px 8px!important;min-height:30px}
.wb-editor>summary{cursor:pointer;font-weight:650;padding:12px 0}.wb-current-area>.row-between{gap:6px;flex-wrap:wrap}
@media(max-width:720px){.wb-current{top:65px;padding:6px}.wb-current-grid{gap:5px}.wb-current-area{padding:8px}.wb-current-area h2{font-size:12px}.wb-current-bytes{font-size:15px}.wb-current-text{max-height:88px;font-size:11px;min-height:32px}.wb-current-area .tiny{font-size:10px}.wb-current-area .badge{font-size:10px}.wb-current-area .btn{font-size:10px;padding:5px}.wb-current-area>.row-between{gap:4px}}
.wb-mobile-student{display:none}
@media(max-width:720px){.wb-mobile-student{display:block}.wb-sidebar{max-height:none;padding:8px}.wb-sidebar>h2,.wb-sidebar .wb-list{display:none}.wb-current-area .row-between>.badge{padding:3px 5px}.wb-current-area .row-between>.tiny{display:none}}
/* hidden creates a non-scrolling ancestor that prevents sticky positioning. */
html:has(.record-workbench),body:has(.record-workbench){overflow-x:clip}

/* 상담과 활동 후 정리: 여러 프로그램·학생을 함께 살피는 목록 */
.counsel-program-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;align-items:start}
.counsel-program-list>.item{height:100%}.counsel-schedule{color:var(--primary,#2563eb);font-weight:650}
.counsel-program-list h3{font-size:17px}.counsel-program-list details summary{cursor:pointer}
.review-roster-scroll{overflow-x:auto}.review-roster{width:100%;border-collapse:collapse;font-size:14px}
.review-roster th,.review-roster td{padding:6px 12px;border-bottom:1px solid #dbe2ea;text-align:left;vertical-align:top}
.review-roster thead{background:#f1f5f9}.review-roster th:nth-child(1){width:50px}.review-roster th:nth-child(2){width:110px}
.review-roster th[scope=row]{white-space:nowrap;font-weight:650}.review-roster td:last-child{white-space:nowrap}
.review-roster summary{cursor:pointer;line-height:1.5}.review-roster details[open] p{margin-top:8px}
.review-roster input[type=checkbox]{accent-color:#0f766e;width:17px;height:17px}
@media(max-width:1000px){.counsel-program-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.counsel-program-list{grid-template-columns:1fr}.review-roster{min-width:760px}}

/* 실제 운영 확인과 결과 보고 */
.result-report-page{max-width:1400px;margin:auto}.result-toolbar{position:sticky;top:76px;z-index:9;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.result-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.result-documents{display:grid;grid-template-columns:1fr 1fr;gap:20px}.result-documents>div{min-width:0}.result-document{font-family:inherit;font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;background:#f8fafc;border:1px solid #d8e1ea;padding:18px;max-height:650px;overflow:auto}
.result-completion-roster,.result-output-table{width:100%;border-collapse:collapse;background:#fff;table-layout:auto}.result-completion-roster{font-size:15px}
.result-completion-roster th,.result-completion-roster td,.result-output-table th,.result-output-table td{border:1px solid #cbd5e1;padding:9px 11px;vertical-align:middle;text-align:left;white-space:normal;overflow-wrap:anywhere}
.result-completion-roster thead th,.result-output-table thead th{background:#edf2f7;font-weight:700;color:#1e293b}
.result-completion-roster td:first-child{width:64px}.result-completion-roster td:nth-child(6){min-width:120px}.result-completion-roster td:last-child{min-width:160px}
.result-completion-roster input:not([type=checkbox]),.result-completion-roster select{width:100%;min-height:32px;padding:5px 8px;font-size:15px}
.result-period{font-weight:600;color:#334155}.result-document h3{font-size:17px;margin:0 0 12px}.result-document h4{font-size:15px;margin:20px 0 8px}.result-document p{margin:6px 0;white-space:pre-wrap}.result-document .result-output-table{font-size:12px;margin:10px 0}.result-document .result-output-table th,.result-document .result-output-table td{padding:7px 8px}
.result-roster-wrap{overflow:auto;max-height:650px;border:1px solid #d8e1ea;border-radius:10px}.result-roster{width:100%;border-collapse:collapse;font-size:13px}.result-roster th,.result-roster td{padding:10px;border-bottom:1px solid #e5eaf0;vertical-align:top;min-width:160px}.result-roster thead th{position:sticky;top:0;background:#edf3f9;z-index:1}.result-roster th:first-child,.result-roster td:first-child{min-width:65px;white-space:nowrap}.result-roster input[type=number]{width:85px;margin-top:8px}.result-roster textarea{min-width:190px}
@media(max-width:900px){.result-documents{grid-template-columns:1fr}.result-toolbar{position:static}.result-facts{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.result-facts{grid-template-columns:1fr}.result-document{padding:12px}.result-toolbar>.row{flex-wrap:wrap}}

.result-completion-roster th,.result-completion-roster td{padding:6px 9px}
.result-roster-wrap:has(.result-completion-roster){max-height:none}
.result-add-participant{max-width:650px}
.result-report-page> .field>select{max-width:650px}

/* Non-course activity input and homeroom selection. */
.activity-table-wrap { overflow-x: auto; max-width: 100%; }
.activity-table { border-collapse: collapse; width: 100%; min-width: 650px; table-layout: fixed; }
.activity-table th,.activity-table td { border: 1px solid #dbe2ec; padding: 12px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.activity-table th { background: #edf3fb; }
.activity-table td textarea,.activity-table td input { width: 100%; max-width: 100%; }
.activity-table td input[type=checkbox] { width: auto; }
.activity-table th:last-child { width: 48%; }

/* Compact activity input for a full class. */
.activity-roster-tools {display:grid;grid-template-columns:minmax(180px,2fr) repeat(3,minmax(120px,1fr));gap:8px;align-items:center}
.activity-roster-actions {display:flex;flex-wrap:wrap;gap:8px;align-items:center;position:sticky;top:58px;z-index:3;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 12px}
.activity-table-compact th:last-child {width:44%}
.activity-table-compact th:first-child {width:22%}
.activity-table-compact td {padding:9px 12px}
.activity-table-compact .activity-fact-summary {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.5}
.activity-row-details summary {cursor:pointer;color:#205eae;font-weight:600;padding:4px 0;font-size:13px}
.activity-row-details[open] {min-width:220px;padding-bottom:6px}
.activity-row-details .field {margin-top:8px}
.result-input-tabs {position:sticky;top:58px;z-index:4;background:white;padding:8px;border:1px solid var(--border);border-radius:var(--radius-lg)}
.result-input-tabs button[aria-pressed=true] {background:var(--primary-soft);color:var(--primary-hover);border-color:var(--primary-line)}
.result-report-page .result-roster-wrap {max-height:480px;overflow:auto;border:1px solid #dbe2ec}
.result-report-page .result-completion-roster thead {position:sticky;top:0;z-index:1;background:#edf3fb}
.activity-main-grid {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;align-items:start}
.activity-main-grid > section {min-width:0;margin:0}
.byte-counter[data-byte-state=gray] {color:#64748b!important}
.byte-counter[data-byte-state=blue] {color:#1d4ed8!important}
.byte-counter[data-byte-state=green] {color:#15803d!important}
.byte-counter[data-byte-state=red] {color:#b91c1c!important}
@media(max-width:900px){.activity-main-grid{grid-template-columns:1fr}}
@media(max-width:720px){.activity-roster-tools{grid-template-columns:1fr 1fr}.activity-roster-actions{top:0}.activity-table-compact{min-width:620px}}

/* 프로그램 목록: 시작 버튼 묶음과 카드 격자 */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.prog-grid > .item { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.prog-grid > .item > .row:last-child { margin-top: auto; padding-top: 10px; }

/* AI 표시: 커리큘럼 위버처럼 AI가 돕는 곳은 보라색으로 구분하고, 결정은 교사가 버튼으로 한다 */
.ic-spark { color: var(--accent); }
.btn-primary .ic-spark, .btn-blue .ic-spark, .badge-blue .ic-spark { color: inherit; }
.btn-secondary:has(.ic-spark) { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }
.btn-secondary:has(.ic-spark):hover:not(:disabled) { background: #EDE9FE; border-color: #C4B5FD; }
.btn-primary:has(.ic-spark) { background: var(--brand-grad); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25); }
.btn-primary:has(.ic-spark):hover:not(:disabled) { background: var(--brand-grad); filter: brightness(0.94); }
.card-head > .ic-spark { color: var(--accent); }
.pill-accept, .pill-dismiss { border-radius: 999px; }
.btn-secondary.pill-accept { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
.btn-secondary.pill-accept:hover:not(:disabled) { background: #DCFCE7; border-color: #86EFAC; }
.pill-dismiss { background: var(--surface-2); color: var(--text-2); }
.adv-card { border-radius: var(--radius-lg); }
@media (max-width: 768px) { .prog-grid { grid-template-columns: minmax(0, 1fr); } .toolbar { align-items: stretch; } }

/* 설계 작업 화면: 자료 바, 한 화면 보드, AI 대화, 결과물 막대 */
.workspace { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); gap: 24px; align-items: start; }
.material-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.material-label { font-weight: 600; font-size: 14px; }
.material-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; }
.material-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-3); cursor: pointer; max-width: 100%; }
.material-chip.ok { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.material-chip.todo { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.material-state { font-size: 11.5px; opacity: 0.85; }
.material-preview { max-height: 55vh; overflow: auto; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; }
.board .board-part > h2, .board details > summary h2 { font-size: 16px; margin-bottom: 10px; }
.board details > summary { cursor: pointer; }
.board details > summary h2 { display: inline; }
.board details[open] > summary { margin-bottom: 10px; }
.results-bar { display: grid; gap: 10px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.next-links { padding-top: 8px; border-top: 1px solid var(--border-subtle); gap: 4px 6px; }
.work-panel { display: flex; flex-direction: column; gap: 12px; padding: 14px; max-height: calc(100vh - 112px); }
.work-tabs { align-self: flex-start; }
.work-tabs button[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }
.work-panel > [hidden] { display: none !important; }
.chat-panel { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.chat-log { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 220px; flex: 1; padding-right: 2px; }
.msg { max-width: 92%; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.msg-teacher { align-self: flex-end; background: var(--primary-soft); color: var(--blue); border-bottom-right-radius: 4px; }
.msg-ai { align-self: flex-start; background: var(--surface-3); border: 1px solid var(--border-subtle); border-bottom-left-radius: 4px; display: grid; gap: 8px; white-space: normal; }
.msg-ai .msg-text { white-space: pre-wrap; }
.msg-wait { color: var(--text-2); font-style: italic; }
.chat-empty { padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-2); font-size: 13.5px; display: grid; gap: 10px; }
.chat-empty .btn { white-space: normal; text-align: left; }
.chat-input { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.chat-input textarea { min-height: 56px; }
.sug-card { background: #fff; border: 1px solid #DDD6FE; border-radius: var(--radius-lg); padding: 10px 12px; display: grid; gap: 6px; }
.sug-card.sug-accepted, .sug-card.sug-edited { border-color: #BBF7D0; background: #F7FEF9; }
.sug-card.sug-rejected { opacity: 0.6; }
.sug-field { color: #6D28D9; font-size: 13px; }
.sug-text { white-space: pre-wrap; font-size: 13.5px; }
.sug-sessions { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 13px; }
@media (max-width: 1100px) { .workspace { grid-template-columns: minmax(0, 1fr); } .work-panel { max-height: none; } .chat-log { max-height: 60vh; } }
.workspace .sess-head { display: none; }
.workspace .sess-row { grid-template-columns: 28px 150px minmax(0, 1fr) 64px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.workspace .sess-row > :nth-child(1) { grid-row: 1 / 3; }
.workspace .sess-row > :nth-child(2) { grid-column: 2; grid-row: 1; }
.workspace .sess-row > :nth-child(3) { grid-column: 3; grid-row: 1; }
.workspace .sess-row > :nth-child(4) { grid-column: 2; grid-row: 2; }
.workspace .sess-row > :nth-child(5) { grid-column: 3 / 5; grid-row: 2; }
.workspace .sess-row > :nth-child(6) { grid-column: 4; grid-row: 1; }
.next-steps { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.next-steps .btn { white-space: normal; text-align: left; border: 1px dashed #DDD6FE; color: #6D28D9; }
.next-list { list-style: none; margin: 0; display: grid; gap: 8px; }
.next-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius-lg); background: var(--surface-3); }
.next-item.now { background: var(--primary-soft); outline: 1px solid var(--primary-line); }
.next-item.done { opacity: 0.7; }
.next-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #fff; border: 1px solid var(--border); }
.next-item.done .next-dot { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
.next-item.now .next-dot { background: var(--primary-hover); color: #fff; border-color: var(--primary-hover); }
/* 접어 둔 선택 항목(예: 자체 평가). 필요할 때만 펼친다. */
details.fold { border: 1px solid var(--line, #E5E7EB); border-radius: 12px; padding: 10px 14px; }
details.fold > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: #374151; }
.topbar-extras { display: flex; gap: 10px; font-size: 12.5px; }
.topbar-extras a { color: var(--text-2, #6B7280); text-decoration: none; }
.topbar-extras a:hover { color: var(--primary, #4F46E5); text-decoration: underline; }
@media (max-width: 860px) { .topbar-extras { display: none; } }
/* 내 프로그램: 활동 유형 세 갈래(플로우차트 01) */
.type-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.type-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 16px 18px; border: 1px solid var(--line, #E5E7EB); border-radius: 16px; background: var(--surface, #fff); cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.type-card:hover { border-color: var(--primary-line, #C7D2FE); box-shadow: 0 4px 14px rgba(79, 70, 229, .08); }
.type-card.primary { border-color: var(--primary-line, #C7D2FE); background: linear-gradient(135deg, rgba(79,70,229,.06), rgba(124,58,237,.06)); }
.type-card strong { font-size: 15px; }
.item-title { color: inherit; text-decoration: none; }
.item-title:hover { text-decoration: underline; }
details.fold-card > summary { cursor: pointer; list-style: none; }
details.fold-card > summary::-webkit-details-marker { display: none; }
.next-stage { list-style: none; padding: 6px 0 0; font-weight: 600; letter-spacing: .02em; }
@media (max-width: 760px) { .type-pick { grid-template-columns: 1fr; } }
.next-item.compact, .next-item.done { padding: 6px 12px; background: transparent; }
.next-item.compact strong, .next-item.done strong { font-weight: 500; font-size: 13.5px; }
.next-item.now { padding: 14px 12px; }
.next-list { gap: 2px; }
/* 보기 선택: 프로그램 담당(프로그램 중심) / 담임(학생 중심) */
.view-switch { font-size: 12.5px; }
.view-switch button { padding: 4px 10px; }
/* 관심 담기: 모집이 시작된 담은 프로그램을 강조 */
.cart-item.cart-start { background: #FFFBEB; outline: 1px solid #FDE68A; }
.interest-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: #FFFBEB; color: #92400E; margin: 0; }

/* ---- 전체 정리(2026-11-03): 안내 문구·여백 없는 카드·보드 옵션 상자 ---- */
/* 안내 문구는 입력 칸 밖에서도 작고 흐리게 */
.hint { font-size: 12px; line-height: 1.55; color: var(--text-2); }
/* 머리·본문 구조 없이 내용을 바로 담은 카드에도 기본 여백 */
.card.stack-sm:not(:has(> .card-head)), .card.stack:not(:has(> .card-head)) { padding: 20px 24px; }
.card.stack-sm > h2, .card.stack > h2 { font-size: 16px; font-weight: 700; }
/* 설계 보드 안의 선택 상자(개설 전 미리 보이기, 학교 스크린 안내) */
.board-option { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface-2, #F9FAFB); display: grid; gap: 8px; }
.board-option > h3 { font-size: 14px; font-weight: 700; margin: 0; }
.board-option > label.row { gap: 8px; font-size: 13.5px; font-weight: 500; align-items: center; cursor: pointer; }
.board-option .field { margin: 0; }
.board-option .interest-line { margin-top: 2px; }
/* 홍보: 미리캔버스 포스터 */
.miri-poster { max-width: 280px; border-radius: 12px; border: 1px solid var(--border); }
.miri-steps { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--text-2); }
/* 상단바: 961~1360px에서는 부가 링크를 숨겨 메뉴가 두 줄로 넘어가거나 전환 버튼 밑에 깔리지 않게 */
.topbar .nav { flex-wrap: nowrap; }
@media (max-width: 1360px) { .topbar-extras { display: none; } .view-switch button { padding: 4px 8px; } }
.cart-notice-text { background: var(--surface-2, #F9FAFB); border-radius: 10px; padding: 10px 12px; margin: 0; }
details.inline-fold > summary { cursor: pointer; }
/* 미리보는 활동 기록: 상담·학생 화면에서 같은 모양 */
.preview-record { border-left: 3px solid var(--accent, #7C3AED); background: #FAF7FF; border-radius: 0 10px 10px 0; padding: 8px 12px; display: grid; gap: 4px; }
.preview-record-label { font-size: 12px; font-weight: 700; color: var(--accent, #7C3AED); cursor: default; }
details.preview-record > summary { cursor: pointer; }
.preview-record p { margin: 0; }

/* 학교 달력: 프로그램 색은 --hue 하나로 칩·점·범례를 맞춘다. 겹침은 빨강, 휴업일·일요일은 회색 */
.cal-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.cal-title { margin: 0; min-width: 9em; text-align: center; font-size: 18px; }
.cal-wrap { padding: 12px; overflow-x: auto; }
.cal-wrap.cal-many { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-month:not(.mini) .cal-grid { min-width: 680px; }
.cal-wd { font-size: 12px; font-weight: 700; color: var(--text-2); text-align: center; padding: 4px 0; }
.cal-wd.sun { color: #DC2626; } .cal-wd.sat { color: #2563EB; }
.cal-day { display: flex; flex-direction: column; gap: 3px; align-items: stretch; text-align: left; min-height: 96px; padding: 5px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface); font: inherit; cursor: pointer; min-width: 0; }
.cal-day:hover { border-color: var(--primary-line); }
.cal-day.empty { background: transparent; border-color: transparent; cursor: default; }
.cal-day.off { background: var(--surface-2); }
.cal-day.exam { background: #FFFBEB; border-color: #FDE68A; }
.cal-legend-exam { font-size: 12px; color: #B45309; }
.cal-day.today .cal-num { color: var(--primary-hover); }
.cal-day.clash { border: 2px solid #DC2626; background: #FEF2F2; }
.cal-num { display: flex; justify-content: space-between; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.cal-clash-flag { color: #fff; background: #DC2626; border-radius: 999px; padding: 0 6px; font-size: 10.5px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.cal-school { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-school.block { color: #B91C1C; font-weight: 600; }
.cal-chip { display: block; font-size: 11.5px; line-height: 1.3; padding: 2px 6px; border-radius: 6px; border-left: 3px solid var(--hue); background: color-mix(in srgb, var(--hue) 12%, white); color: color-mix(in srgb, var(--hue) 80%, black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip.draft { border-left-style: dashed; background: color-mix(in srgb, var(--hue) 6%, white); }
.cal-chip.mine { font-weight: 700; }
.cal-chip.legend { display: inline-block; max-width: 220px; }
.cal-month.mini .cal-mtitle { font-weight: 700; margin-bottom: 4px; }
.cal-month.mini .cal-day { min-height: 34px; padding: 2px 3px; border-radius: 5px; }
.cal-month.mini .cal-num { font-size: 11px; font-weight: 600; }
.cal-dots { display: flex; gap: 2px; flex-wrap: wrap; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cal-legend-clash { font-size: 12px; color: #B91C1C; font-weight: 600; }
.cal-legend-off { font-size: 12px; color: var(--text-3); }
.cal-clash-row { display: flex; gap: 10px; text-align: left; border: 1px solid #FECACA; background: #FEF2F2; color: #991B1B; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.cal-item { border-left: 4px solid var(--hue); }
.sess-clash { font-size: 12.5px; color: #B91C1C; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; padding: 6px 10px; margin: -2px 0 4px 34px; }
.cal-month.compact .cal-grid { min-width: 0; }
.cal-month.compact .cal-day { min-height: 48px; padding: 3px; }
@media (max-width: 640px) {
  .sess-clash { margin-left: 0; }
}

.sched-input { display: flex; gap: 8px; align-items: center; }
.sched-input input { flex: 1; min-width: 0; }
.sched-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.sched-list li.clash { color: #B91C1C; }
.sched-list li span { margin-left: 8px; font-size: 12.5px; }
@media (max-width: 640px) { .sched-input { flex-direction: column; align-items: stretch; } }
.sug-sessions li.clash > strong { color: #B91C1C; }
.sug-clash { color: #B91C1C; }
.sched-list.plain { list-style: none; padding-left: 0; }
.sched-list .badge { margin-left: 6px; }

.op-head-row { display: flex; align-items: center; gap: 8px; }
.op-head-row .op-head { flex: 1; min-width: 0; }
.op-absent { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--text-2); padding: 0 6px; }
mark.op-new { background: #FEF3C7; border-radius: 3px; padding: 0 1px; }
.wb-check-dot { color: #D97706; font-size: 10px; }
.match-review .item { border-left: 3px solid #F59E0B; }
.review-roster td.small { min-width: 280px; }
/* 활동 후 정리: 문안 칸을 넓게(공용 표의 둘째 칸 110px 규칙을 덮음) */
.review-roster.after-roster th:nth-child(1) { width: 90px; }
.review-roster.after-roster th:nth-child(2) { width: auto; }
.review-roster.after-roster th:nth-child(3) { width: 150px; }

/* 휴대폰: 손가락으로 누르기 쉽게 작은 버튼·선택 상자·탭의 누르는 영역을 키운다(모양은 그대로) */
@media (max-width: 640px) {
  .btn, button.btn, a.btn, .seg button, .linklike { min-height: 40px; }
  .seg button { padding-left: 12px; padding-right: 12px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  .tabs a { min-height: 40px; display: inline-flex; align-items: center; }
  .op-absent { min-height: 40px; }
}

/* 휴대폰(3-way 검토 반영) */
dialog.dlg { max-height: calc(100dvh - 24px); }
.dlg-body { max-height: calc(100dvh - 180px); }
.pre, .cart-notice-text, .sug-text, .sched-list li { overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .topbar.open .topbar-extras { display: flex; gap: 14px; padding: 6px 0; }   /* 메뉴를 열면 Google 연결·사용 안내도 보인다 */
}
@media (max-width: 640px) {
  .wb-current { position: static; }
  .wb-body .btn, .record-workbench .btn { font-size: 13px; }
  /* 회차 편집: 번호·날짜 한 줄, 이름 한 줄, 성격·활동 한 줄 */
  .workspace .sess-row, .sess-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px; }
  .workspace .sess-row > :nth-child(1), .sess-row > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .workspace .sess-row > :nth-child(2), .sess-row > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .workspace .sess-row > :nth-child(6), .sess-row > :nth-child(6) { grid-column: 3; grid-row: 1; }
  .workspace .sess-row > :nth-child(3), .sess-row > :nth-child(3) { grid-column: 1 / 4; grid-row: 2; }
  .workspace .sess-row > :nth-child(4), .sess-row > :nth-child(4) { grid-column: 1 / 4; grid-row: 3; }
  .workspace .sess-row > :nth-child(5), .sess-row > :nth-child(5) { grid-column: 1 / 4; grid-row: 4; }
  .sess-clash { margin-left: 0; }
  /* 표는 학생별 카드로 */
  .review-roster { min-width: 0; }
  .review-roster thead { display: none; }
  .review-roster, .review-roster tbody, .review-roster tr, .review-roster td, .review-roster th { display: block; width: auto !important; }
  .review-roster tr { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--surface); }
  .review-roster td, .review-roster th { border: none; padding: 2px 0; white-space: normal; }
}
@media (max-width: 640px) {
  .dlg-head, .dlg-body, .dlg-foot { padding-left: 14px; padding-right: 14px; }
  .op-head { flex-wrap: wrap; row-gap: 4px; }
}
.poster-fold > summary { cursor: pointer; list-style: none; } .poster-fold > summary::-webkit-details-marker { display: none; } .poster-fold > summary h2::after { content: " ▾"; color: var(--text-3); font-weight: 400; } .poster-fold[open] > summary h2::after { content: " ▴"; }

/* 상단바가 좁을 때(app.js fitTopbar): 안내용 표시부터 숨겨 메뉴가 전환 버튼 밑에 깔리지 않게 한다 */
.topbar.tight .brand .badge, .topbar.tight .topbar-right > .badge { display: none; }
.topbar.tighter .user-chip span, .topbar.tighter .topbar-extras { display: none; }

/* 부서 프로그램 기록 수합 */
.stack-xs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.collection-table-wrap { overflow-x: auto; max-width: 100%; }
.collection-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 13px; background: #fff; }
.collection-table th, .collection-table td { border: 1px solid #dbe2ec; padding: 6px 8px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.collection-table th { background: #edf3fb; white-space: nowrap; }
.collection-table td.num { text-align: right; white-space: nowrap; }
.collection-table td.over { color: #b91c1c; font-weight: 700; }
.collection-table tr.row-warn td { background: #fff7ed; }
.collection-table tr.row-note td { background: #fffbeb; }
.collection-table select { max-width: 220px; }