/* 자소서 작업실 · 경험 보관함 · 이야기 덮개 — 클래스 머리 .es- (styles.css 의 토큰·부품을 재사용한다. 등장 애니메이션 없음) */
.es-toggle { margin-top: 10px; }
.es-slot { padding: 14px 0; border-bottom: 1px solid var(--gray-1); }
.es-prompt { font-size: 0.93rem; line-height: 1.5; overflow-wrap: anywhere; }
/* 긴 글 칸: 높이는 내용에 맞추고 손으로 늘릴 수 있게 */
.es-area { height: auto; min-height: 180px; padding: 10px 12px; resize: vertical; line-height: 1.6; }
.es-area.es-short { min-height: 76px; }
.es-area:focus-visible, .es-num:focus-visible, .es-date:focus-visible { outline: 2px solid var(--pink-8); outline-offset: 1px; }
.es-num { max-width: 140px; }
.es-date { max-width: 200px; }
.es-count { margin-top: 4px; font-size: 0.8125rem; color: var(--gray-7); overflow-wrap: anywhere; }
.es-count.es-over { color: var(--red-9); font-weight: 700; }
.es-issues { font-size: 0.8125rem; font-weight: 600; color: #7a4a00; overflow-wrap: anywhere; }
.es-issues:empty { display: none; }
.es-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.es-box { margin-top: 10px; padding: 12px; border-radius: var(--radius-md); background: var(--gray-0); border: 1px solid var(--gray-2); font-size: 0.92rem; }
.es-list { margin: 6px 0 8px; padding-left: 18px; font-size: 0.86rem; line-height: 1.55; color: var(--gray-8); }
.es-chip { padding: 6px 12px; min-height: 32px; font-size: 0.84rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-ver { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--gray-2); }
.es-ver > div { min-width: 0; }
.es-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-wide { display: block; width: 100%; min-height: 36px; overflow-wrap: anywhere; }
/* 표는 폭 360px 에서 가로로 민다 */
.es-scroll { overflow-x: auto; margin-top: 8px; }
.es-table { width: 100%; min-width: 320px; border-collapse: collapse; font-size: 0.86rem; }
.es-table th, .es-table td { padding: 7px 8px; border-bottom: 1px solid var(--gray-1); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.es-table thead th { color: var(--gray-7); font-weight: 600; white-space: nowrap; }
/* 줄 머리는 사용자가 쓴 긴 제목일 수 있다 → 줄바꿈을 허용하되 너무 좁아지지 않게 */
.es-table tbody th { font-weight: 600; min-width: 6.5em; }