/* 전자차트 화면 모양. 세 칸: 왼쪽 차트 이력 520px, 가운데 입력, 오른쪽 환자정보 250px.
   규격: 글자 12px(작은 글자 11px), 줄 24px 안팎, 버튼과 입력 24px(작은 것 20px), 묶음 머리 26px, 간격 6px, 모서리와 그림자 없음 */
/* height 0: 이력이 길어도 화면의 자연 높이가 커지지 않게 한다(커지면 틀의 제목 줄과 위 메뉴가 눌린다). 실제 높이는 틀이 늘려 준다 */
.chart { display: grid; grid-template-columns: 520px minmax(0, 1fr) 250px; grid-template-rows: minmax(0, 1fr); gap: 6px; height: 0; }
.chart.side-off { grid-template-columns: 520px minmax(0, 1fr) 22px; }
.chart.no-patient { grid-template-columns: minmax(0, 1fr) 250px; }
.chart.no-patient.side-off { grid-template-columns: minmax(0, 1fr) 22px; }
.chart-left, .chart-mid, .chart-right { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
.chart-empty { background: #fff; border: 1px solid var(--line); }
.chart-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.chart-phrases { display: flex; flex-wrap: wrap; gap: 3px; }

/* ----- 왼쪽: 차트 이력 ----- */
.chart-hist { flex: 1 1 auto; }
.chart-alert { display: flex; gap: 6px; align-items: center; min-height: 26px; padding: 2px 6px; border-bottom: 1px solid var(--line); background: var(--head); overflow: hidden; white-space: nowrap; }
.chart-alert.has { background: #fbe9e7; }
.chart-alert-btn { border: 1px solid var(--btn-line); background: #fff; font-weight: 700; height: 20px; padding: 0 8px; cursor: pointer; }
.chart-alert-item { color: var(--red); font-weight: 700; }
.chart-alert-item + .chart-alert-item::before { content: '/ '; color: var(--muted); font-weight: 400; }
.chart-filter { display: flex; gap: 2px; align-items: center; padding: 2px 4px; border-bottom: 1px solid var(--line-soft); min-height: 24px; }
.chart-f { padding: 1px 5px; color: #8b93a1; }
.chart-f.on { color: var(--text); }
/* 머리줄, 거름 줄은 줄어들지 않게(flex: 0 0 auto). 기록이 많은 환자에서 아래 목록이 길면 머리줄이 24px 로 눌려 둘째 줄의 버튼이 목록 위에 겹쳤다(261014) */
.chart-alert, .chart-filter, .chart-hist-head { flex: 0 0 auto; }
.chart-hist-head { display: grid; grid-template-columns: 78px 96px minmax(0, 1fr); background: #eef1f6; border-bottom: 1px solid var(--line); min-height: 24px; align-items: center; }
.chart-hist-head > div { padding: 1px 5px; text-align: center; color: #3a4352; }
.chart-hist-head > .chart-hist-tools { display: flex; gap: 3px; align-items: center; text-align: left; }
.chart-hist-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.chart-day { display: grid; grid-template-columns: 78px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.chart-c-date { padding: 3px 5px; border-right: 1px solid var(--line-soft); font-size: 11px; line-height: 1.5; }
.chart-c-date b { font-size: 12px; text-decoration: underline; }
.chart-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); border-bottom: 1px solid #edf0f4; min-height: 24px; cursor: default; }
.chart-row:last-child { border-bottom: 0; }
.chart-row:hover { background: var(--hover); }
.chart-row.sel { background: var(--sel); }
.chart-c-teeth { padding: 3px 2px; text-align: center; border-right: 1px solid var(--line-soft); min-width: 0; overflow: hidden; }
.chart-c-body { padding: 3px 5px; min-width: 0; }
.chart-line { display: flex; gap: 5px; align-items: baseline; min-width: 0; }
.chart-title { white-space: nowrap; }
.chart-text { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.chart-kcd { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chart-doc { margin-left: auto; white-space: nowrap; color: var(--muted); font-size: 11px; display: flex; gap: 3px; align-items: center; padding-left: 4px; }
.chart-item { display: flex; justify-content: space-between; gap: 8px; padding-left: 38px; font-size: 11px; color: #3a4352; line-height: 18px; }
.chart-item.nonins { color: var(--green); }
.chart-item.noclaim span:first-child { text-decoration: line-through; color: var(--muted); }
.chart-txplan { border-bottom: 1px solid var(--line); background: #fdf8ee; padding: 3px 5px; position: sticky; top: 0; z-index: 1; max-height: 120px; overflow-y: auto; }
.chart-day.today > .chart-c-date { background: var(--sel); }
.chart-txplan .chart-item { padding-left: 52px; }
.chart-none { padding: 30px; text-align: center; color: var(--muted); }

/* ----- 가운데: 탭 ----- */
.chart-tabs { flex: 1 1 auto; }
.chart-tabs > .tabs-body { display: flex; flex-direction: column; overflow: hidden; }
.chart-tabs > .tabs-body > * { flex: 1 1 auto; min-height: 0; }

/* 진료 입력 */
.chart-treat { display: flex; flex-direction: column; gap: 6px; padding: 6px; overflow-y: auto; }
.chart-teeth .teeth { display: flex; width: 100%; }
.chart-teeth .tooth { width: auto; flex: 1 1 0; min-width: 0; height: 30px; }
.chart-teeth .teeth-row.deci .tooth { height: 26px; }
.chart-teeth .tooth::before { background-size: 34px 100%; } /* 덴트웹 치아의 가로세로 비율(28x26)에 맞춤 */
.chart-teeth .teeth-row.deci .tooth::before { background-size: 30px 100%; }
.chart-teeth .teeth-sbtn { height: 17px; }
.chart-teeth .teeth-text { display: none; } /* 고른 치아는 그림의 빨간색으로 보인다. 세로 자리를 아끼려고 글자 줄은 뺀다 */
.chart-bundles { border: 1px solid var(--line); background: #fff; flex: 0 0 auto; }
.chart-btabs { display: flex; flex-wrap: wrap; gap: 1px; align-items: flex-end; background: var(--head); border-bottom: 1px solid var(--line); padding: 2px 3px 0; }
.chart-btab { border: 1px solid var(--line); border-bottom: 0; background: #eef1f6; font-size: 11px; padding: 0 5px; height: 22px; cursor: pointer; white-space: nowrap; letter-spacing: -0.3px; }
.chart-btab.on { background: #fff; font-weight: 700; color: var(--primary); border-color: #5d6b82; }
.chart-bsearch { width: 70px; min-height: 20px; height: 20px; margin: 0 0 1px auto; font-size: 11px; padding: 0 4px; }
.chart-bgrid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-auto-rows: 24px; gap: 2px; padding: 3px; height: 84px; overflow-y: auto; align-content: start; }
.chart-bundle { height: 24px; border: 1px solid; font-size: 11px; padding: 0 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.3px; }
.chart-bundle.wide { grid-column: span 2; }
.chart-bundle:hover { filter: brightness(0.93); }
.chart-bnone { grid-column: 1 / -1; padding: 8px; }
.chart-tx { flex: 1 1 auto; min-height: 262px; }
.chart-ttabs-head { padding: 2px 4px; }
.chart-ttabs { display: flex; gap: 2px; align-items: center; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.chart-ttab { border: 1px solid var(--line); background: #eef1f6; padding: 0 8px; height: 22px; cursor: pointer; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.chart-ttab.on { background: #fff; font-weight: 700; color: var(--primary); border-color: #5d6b82; }
.chart-save { min-height: 22px; padding: 0 14px; }
.chart-tx-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 6px; padding: 6px; flex: 1 1 auto; min-height: 0; }
.chart-items { display: flex; flex-direction: column; gap: 4px; min-height: 0; min-width: 0; }
.chart-name-row { display: flex; gap: 6px; align-items: center; }
.chart-items-wrap { flex: 1 1 auto; min-height: 60px; }
.chart-items-tbl td { padding: 1px 4px; height: 24px; }
.chart-items-tbl td:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.chart-items-tbl tr.noclaim td:nth-child(2) { text-decoration: line-through; color: var(--muted); }
.chart-items-tbl .tag { padding: 0 3px; }
.chart-qty, .chart-price { min-height: 20px; height: 20px; padding: 0 3px; }
.chart-items-foot { display: flex; gap: 6px; align-items: center; }
.chart-tx-side { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; }
.chart-tform { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 6px; align-items: center; }
.chart-tform .chart-note { grid-column: 1 / -1; font-size: 11px; }
.chart-tform .row { min-width: 0; min-height: 24px; }
.chart-kcd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chart-sub { cursor: pointer; }
.chart-money { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 2px 6px; align-items: center; border: 1px solid var(--line); background: #f6f8fb; padding: 4px 6px; }
.chart-money b { font-size: 13px; }
.chart-money-note, .chart-money-none { grid-column: 1 / -1; font-size: 11px; }
.chart-checks { border-top: 1px solid var(--line-soft); padding: 3px 6px; max-height: 60px; overflow-y: auto; font-size: 11px; }
.chart-memo-panel { flex: 0 0 auto; }
.chart-memo-tools { display: flex; gap: 6px; align-items: center; background: var(--head); border-bottom: 1px solid var(--line); min-height: 26px; padding: 2px 6px; }
.chart-memo { border: 0; border-bottom: 1px solid var(--line-soft); height: 62px; resize: none; display: block; }
.chart-next-row { display: flex; gap: 6px; align-items: center; padding: 3px 6px; }
.chart-memo-btns { display: flex; gap: 3px; padding: 0 6px 6px; }
.chart-memo-btns > .btn { flex: 1 1 0; padding: 3px 4px; }
.chart-timer-box { display: flex; gap: 3px; align-items: center; }
.chart-timer { font-variant-numeric: tabular-nums; font-weight: 700; width: 40px; text-align: center; }

/* 치료계획 입력 */
.chart-plan { display: flex; flex-direction: column; gap: 6px; padding: 6px; overflow-y: auto; }
.chart-phead { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; flex: 0 0 auto; }
.chart-ptable { flex: 0 0 auto; max-height: 224px; min-height: 96px; }
.chart-ptbl td { height: 30px; }
.chart-pcell { cursor: pointer; }
.chart-pcell.sel { background: var(--sel); }
.chart-pteeth { text-align: center; }
.chart-ptotal { display: flex; gap: 14px; align-items: center; flex: 0 0 auto; min-height: 18px; }
.chart-pmemo { display: flex; gap: 6px; align-items: stretch; flex: 0 0 auto; }
.chart-pmemo textarea { resize: none; }
.chart-pick-head { text-align: center; font-weight: 700; color: #1f3f86; font-size: 13px; flex: 0 0 auto; }
.chart-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(120px, 1fr); gap: 6px; flex: 1 1 auto; min-height: 252px; }
.chart-pick-box { display: flex; flex-direction: column; min-height: 0; }
.chart-pick-title { font-weight: 700; padding: 1px 2px; }
.chart-pick-list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1px solid #5d6b82; background: #fff; }
.chart-pick-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) max-content; gap: 3px; align-items: center; padding: 0 4px; height: 24px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.chart-pick-item:nth-child(even) { background: #f3f5f8; }
.chart-pick-item.on { background: var(--sel); color: var(--red); font-weight: 700; }
.chart-pick-item input { margin: 0; }
.chart-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-pick-item .num { font-size: 11px; font-weight: 400; }

/* PI 입력 */
.chart-pi { display: flex; flex-direction: column; gap: 6px; padding: 6px; overflow-y: auto; }
.chart-pi > .panel, .chart-pi > .row { flex: 0 0 auto; }
.chart-pi-list { flex: 1 1 auto; min-height: 96px; }
.chart-pi-preview { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 치주 차트 */
.chart-perio-tab { display: flex; flex-direction: column; gap: 6px; padding: 6px; overflow-y: auto; }
.chart-perio-tools { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.chart-perio-tools .lbl { flex: 0 0 auto; }
.chart-perio-hint { font-size: 11px; }
.chart-perio-sum { flex: 0 0 auto; }
table.chart-perio-sumtbl th, table.chart-perio-sumtbl td { padding: 1px 6px; }
.chart-perio-wrap { flex: 0 0 auto; }
table.chart-perio { border-collapse: collapse; width: 100%; table-layout: fixed; user-select: none; }
table.chart-perio th { width: 62px; font-weight: 400; font-size: 11px; text-align: right; padding: 0 4px; color: #3a4352; white-space: nowrap; background: #f1f4f8; border: 1px solid var(--line-soft); }
table.chart-perio td.pc { border: 1px solid #e3e7ee; height: 17px; padding: 0; text-align: center; font-size: 11px; line-height: 16px; overflow: hidden; }
table.chart-perio td.pc.t2 { border-right: 1px solid #5d6b82; }
table.chart-perio td.pc.mid { border-right: 2px solid #333; }
table.chart-perio td.pc.num { cursor: text; font-variant-numeric: tabular-nums; }
table.chart-perio td.pc.num:focus { outline: 2px solid var(--blue); outline-offset: -2px; background: #fffbe0; color: var(--text); }
table.chart-perio .chart-pr-pd td.pc.num { font-weight: 700; height: 19px; }
table.chart-perio .chart-pr-pd td.pc.hi { color: #fff; background: var(--red); }
table.chart-perio .chart-pr-pd td.pc.hi:focus { color: var(--red); }
table.chart-perio .chart-pr-rec td.pc.num { color: var(--muted); }
table.chart-perio td.pc.dot { cursor: pointer; height: 11px; }
table.chart-perio td.pc.dot.bop.on { background: #d43c2e; }
table.chart-perio td.pc.dot.plaque.on { background: #3f74c5; }
table.chart-perio td.pc.delta { font-size: 10px; height: 13px; line-height: 12px; color: var(--muted); letter-spacing: -0.5px; }
table.chart-perio td.pc.delta.up { color: var(--red); font-weight: 700; }
table.chart-perio td.pc.delta.down { color: var(--green); font-weight: 700; }
table.chart-perio td.pc.tooth-no { background: #dfe5ee; font-weight: 700; cursor: pointer; height: 20px; border: 1px solid #8a94a6; }
table.chart-perio td.pc.tooth-no.miss { background: #c9ced6; color: #6a7280; font-weight: 400; font-size: 10px; }
table.chart-perio td.pc.tooth-no.impl { background: #cfe0f7; color: #1f3f86; }
table.chart-perio td.pc.miss { background: #eceef1; }
table.chart-perio td.pc.grade { cursor: pointer; color: var(--purple); font-weight: 700; }
table.chart-perio .chart-perio-gap td { height: 14px; font-size: 10px; text-align: center; color: var(--muted); border: 0; }

/* 문진표, 동의서 */
.chart-forms { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 6px; padding: 6px; }
.chart-form-list { border: 1px solid var(--line); overflow-y: auto; min-height: 0; background: #fff; }
.chart-form-sec { background: var(--head); padding: 3px 6px; font-weight: 700; border-bottom: 1px solid var(--line); min-height: 26px; display: flex; align-items: center; }
.chart-form-item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line-soft); background: none; padding: 3px 6px; min-height: 24px; cursor: pointer; }
.chart-form-item:hover { background: var(--hover); }
.chart-form-item.on { background: var(--sel); }
.chart-form-list > .muted { padding: 6px; }
.chart-form-main { border: 1px solid var(--line); overflow-y: auto; min-height: 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.chart-form-doc { display: flex; flex-direction: column; gap: 8px; }
.chart-form-title { margin: 0; font-size: 15px; }
.chart-form-info { margin: 0; line-height: 1.7; }
.chart-form-q { display: flex; flex-direction: column; gap: 3px; }
.chart-form-q .row.wrap { gap: 4px 14px; }
.chart-sign { border: 1px solid #5d6b82; background: #fff; touch-action: none; cursor: crosshair; width: 440px; max-width: 100%; height: 130px; }
.chart-sign-img { border: 1px solid var(--line); width: 300px; background: #fff; }

/* 보관함 */
.chart-archive { display: flex; flex-direction: column; gap: 6px; padding: 6px; }
.chart-archive > .tabs { flex: 1 1 auto; }
.chart-archive .tabs-body { overflow: hidden; display: flex; flex-direction: column; }
.chart-archive .tabs-body > .grid-wrap { flex: 1 1 auto; border: 0; }

/* ----- 오른쪽: 환자정보 ----- */
.chart-right > .panel { flex: 0 0 auto; }
.chart-right > .panel.grow { flex: 1 1 0; }
.chart-side-info .tabs-body { height: 232px; }
.chart-side-mid > .panel-body { height: 92px; }
table.chart-info th { width: 62px; text-align: left; }
table.chart-info th, table.chart-info td { padding: 1px 5px; border-left: 0; border-right: 0; }
.chart-info td { overflow-wrap: anywhere; }
.chart-info tr:first-child th, .chart-info tr:first-child td { border-top: 0; }
.chart-side-pad { padding: 5px 6px; }
.chart-side-line { display: flex; justify-content: space-between; gap: 4px; padding: 2px 5px; border-bottom: 1px solid var(--line-soft); min-height: 22px; align-items: center; }
.chart-side-line > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chart-side-line > span:last-child { white-space: nowrap; font-size: 11px; }
.chart-side-line.pick { cursor: pointer; }
.chart-side-line.pick:hover { background: var(--hover); }
.chart-side-line.sel { background: var(--sel); }
.chart-side-show { width: 22px; padding: 0; flex: 1 1 auto; }
table.chart-psum th, table.chart-psum td { padding: 2px 4px; font-size: 11px; }

/* ----- 창: 원외 처방, 기공물 ----- */
.chart-rx-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 8px; }
.chart-rx-drugs td:first-child, .chart-rx-lines td:first-child { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-rx-drugs td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.chart-rx-lines { height: 176px; }
.chart-rx-lines td { padding: 1px 4px; }
.chart-rx-past { max-height: 150px; }
.chart-lab-form { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.chart-lab-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px; align-items: start; }