/* ==========================================================================
   editor-home.css — '학습지 만들기' 시작 화면 (screen-editor-home)
   홈(door-*) 톤과 통일: 크림 배경 위 흰 카드, 부드러운 그림자, 큰 클릭 타겟.
   미니어처(.we-tpl-mini*)는 editor.css의 것을 그대로 재사용한다.
   ========================================================================== */

.ehome-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 32px 120px;
}

.ehome-head { margin-bottom: 24px; }
.ehome-head h1 {
  font-size: 28px;
  font-weight: 800;
  color: #3A332A;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.ehome-head p {
  font-size: 15px;
  color: #8B7B5E;
  margin: 0;
}

/* ── 새 학습지 버튼 (유일한 만들기 진입점) — 홈 액션 카드 톤 ── */
.ehome-actions { display: flex; gap: 12px; margin-bottom: 34px; }
.ehome-actions[hidden] { display: none; }
.ehome-new {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px 16px 18px;
  border: none;
  border-radius: 16px;
  background: #FDFAF3;
  color: #3A332A;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(74, 51, 30, 0.04), 0 6px 18px rgba(74, 51, 30, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ehome-new:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(74, 51, 30, 0.06), 0 12px 28px rgba(74, 51, 30, 0.08);
}
.ehome-new-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 13px;
  background: #1F5F5B; color: #fff; font-size: 24px;
}
.ehome-new[hidden] { display: none; }
.ehome-new--folder .ehome-new-icon { background: #E7C977; color: #57451E; }

/* ── 섹션 공통 ── */
.ehome-sec { margin-bottom: 36px; }
.ehome-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.ehome-sec-title {
  font-size: 17px;
  font-weight: 750;
  color: #3A332A;
  margin: 0;
}
.ehome-path { display: flex; align-items: center; gap: 8px; min-width: 0; }
button.ehome-path-root { padding: 4px 0; border: none; background: none; cursor: pointer; }
button.ehome-path-root:hover { color: #1F5F5B; text-decoration: underline; }
.ehome-path-sep { color: #A89B84; font-size: 20px; }
.ehome-head-tools { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.ehome-search {
  width: min(300px, 28vw); height: 38px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border: 1px solid #DED4C1; border-radius: 10px; background: #fff; color: #8B7B5E;
}
.ehome-search input { width: 100%; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 13px; color: #3A332A; }
.ehome-search:focus-within { border-color: #1F5F5B; box-shadow: 0 0 0 3px rgba(31,95,91,.1); }
.ehome-trash-link, .ehome-empty-trash {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid #DED4C1; border-radius: 9px;
  background: #fff; color: #655C4D; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
}
.ehome-trash-link:hover, .ehome-empty-trash:hover { background: #F3EEE4; }
.ehome-trash-link b { min-width: 16px; padding: 1px 5px; border-radius: 999px; background: #EFE9DC; font-size: 10px; }
.ehome-trash-link b:empty { display: none; }
.ehome-empty-trash { margin-left: 8px; color: #B42318; }
.ehome-mine-count { font-size: 13px; font-weight: 600; color: #8B7B5E; margin-left: 6px; }

/* ── 정렬 토글 (최신순 / 이름순) ── */
.ehome-sort { display: flex; gap: 2px; padding: 3px; background: #EFE9DC; border-radius: 10px; }
.ehome-sort-btn {
  padding: 6px 14px; border: none; border-radius: 8px; background: transparent;
  color: #8B7B5E; font-family: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
}
.ehome-sort-btn.we-on { background: #fff; color: #3A332A; box-shadow: 0 1px 3px rgba(74, 51, 30, 0.12); }

/* ── 폴더 카드 ── */
.ehome-folder-sec[hidden] { display: none; }
.ehome-folder-sec { margin: 4px 0 22px; }
.ehome-folder-sec h3 { margin: 0 0 10px; color: #6C604E; font-size: 13px; font-weight: 700; }
.ehome-folder-sec h3 span { margin-left: 4px; color: #A09178; font-weight: 600; }
.ehome-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 11px; }
.ehome-folder-card {
  position: relative; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 42px 14px 15px;
  border: 1px solid #E2D8C5; border-radius: 12px; background: #fff; cursor: pointer;
  box-shadow: 0 2px 7px rgba(74,51,30,.045); transition: border-color .15s, background .15s, transform .15s;
}
.ehome-folder-card:hover { transform: translateY(-2px); border-color: #C8BA9D; }
.ehome-folder-card.is-drop { border: 2px solid #1F5F5B; background: #EAF4F2; transform: scale(1.015); }
.ehome-folder-icon { flex: none; display: grid; place-items: center; width: 42px; height: 36px; border-radius: 9px; background: #F4E7B8; color: #80651E; font-size: 25px; }
.ehome-folder-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ehome-folder-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3A332A; font-size: 14px; }
.ehome-folder-body small { color: #91846F; font-size: 11px; }
.ehome-folder-more { position: absolute; right: 9px; width: 28px; height: 28px; border: none; border-radius: 7px; background: transparent; color: #8B7B5E; font-size: 18px; cursor: pointer; opacity: 0; }
.ehome-folder-card:hover .ehome-folder-more, .ehome-folder-more:focus-visible { opacity: 1; }
.ehome-folder-more:hover { background: #EFE9DC; }

/* ── 미니어처 래퍼 (내 학습지 카드) ── */
.ehome-mini-wrap {
  position: relative;
  flex: none;
  display: block;
  width: 64px;
}
.ehome-mini-wrap .we-tpl-mini { width: 100%; }
.ehome-badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #1F5F5B;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ── 내 학습지 그리드 (썸네일 작게) ── */
.ehome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 13px;
}
.ehome-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 11px 12px;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(74, 51, 30, 0.05), 0 6px 18px rgba(74, 51, 30, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ehome-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(74, 51, 30, 0.07), 0 12px 28px rgba(74, 51, 30, 0.09);
}
.ehome-card .ehome-mini-wrap { width: 100%; }
.ehome-card .ehome-badge { right: 6px; bottom: 6px; }
/* 이름 줄은 카드 바닥에 고정 — 썸네일 높이(템플릿 크기)가 달라도 같은 줄 카드끼리 이름이 나란히 정렬된다 */
.ehome-card-name-row { margin-top: auto; }

/* ── 제목 줄 (캔바식) — 이름 + 호버 시 점선 밑줄 + 연필 ── */
.ehome-card-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
}
.ehome-card-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 650;
  color: #3A332A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 1.5px dashed transparent; /* 호버·포커스 시 흐리게 나타남 (캔바식) */
  transition: border-color 0.12s ease;
}
.ehome-card:hover .ehome-card-name,
.ehome-card:focus-within .ehome-card-name { border-bottom-color: #CDbfa4; }

.ehome-card-rename {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #8B7B5E;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.ehome-card-rename svg { width: 18px; height: 18px; }
.ehome-card:hover .ehome-card-rename,
.ehome-card-rename:focus-visible { opacity: 1; }
.ehome-card-rename:hover { background: #EFE9DA; color: #3A332A; }

.ehome-card-name-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  color: #3A332A;
  border: none;
  border-bottom: 2px solid #5B5FC7; /* 캔바식 — 상자 대신 밑줄 강조 */
  border-radius: 0;
  padding: 1px 2px 2px;
  outline: none;
  background: transparent;
  box-sizing: border-box;
}
.ehome-card-more {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 1px solid #E5DDCB;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.94);
  color: #8B7B5E;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}
.ehome-card:hover .ehome-card-more,
.ehome-card-more:focus-visible { opacity: 1; }
.ehome-card-more:hover { background: #3A332A; border-color: #3A332A; color: #fff; }

/* ── 선택 체크박스 (좌상단) — 호버·선택 시 표시 ── */
.ehome-card-check {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border: 1.5px solid #C4B89C;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.12s;
}
.ehome-card:hover .ehome-card-check,
.ehome-card.is-sel .ehome-card-check,
.ehome-card-check:focus-visible { opacity: 1; }
.ehome-card.is-sel .ehome-card-check {
  background: #5B5FC7;
  border-color: #5B5FC7;
}
/* 체크 표시 (선택 시) */
.ehome-card.is-sel .ehome-card-check::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 4px;
  width: 7px;
  height: 13px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
/* 선택된 카드 강조 (Primary 테두리) */
.ehome-card.is-sel {
  outline: 2px solid #5B5FC7;
  outline-offset: -1px;
}
.ehome-card.is-dragging { opacity: .45; transform: scale(.97); }
.ehome-card-location, .ehome-trash-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: -6px; color: #8B7B5E; font-size: 11px; }
.ehome-card-location::before { content: '폴더 · '; }
.ehome-trash-meta { color: #A14B42; }

/* ── 러버밴드(드래그 영역 선택) 사각형 ── */
.ehome-marquee {
  position: fixed;
  z-index: 90;
  border: 1.5px solid #5B5FC7;
  background: rgba(91, 95, 199, 0.10);
  border-radius: 4px;
  pointer-events: none;
}
body.ehome-selecting { user-select: none; }

.ehome-toast {
  position: fixed; left: 50%; bottom: 34px; z-index: 1200; transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 32px)); padding: 11px 17px; border-radius: 10px;
  background: #1F5F5B; color: #fff; font-size: 13px; font-weight: 700;
  box-shadow: 0 8px 28px rgba(0,0,0,.2); animation: ehome-toast-in .16s ease-out;
}
.ehome-toast.is-error { background: #B42318; }
@keyframes ehome-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ── 선택 액션 바 (선택 ≥1일 때 헤더 줄 교체) ── */
/* hidden 속성이 author display를 못 이기는 함정 방지 — 속성 셀렉터로 확실히 숨김 */
.ehome-sec-head[hidden],
.ehome-sel-bar[hidden] { display: none; }
.ehome-sel-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ehome-sel-count {
  font-size: 15px;
  font-weight: 750;
  color: #5B5FC7;
}
.ehome-sel-actions { display: flex; gap: 8px; }
.ehome-sel-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1px solid #E5DDCB;
  border-radius: 9px;
  background: #fff;
  color: #3A332A;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ehome-sel-btn:hover { background: #F5F1E8; }
.ehome-sel-btn.is-danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
.ehome-sel-btn.is-ghost { border-color: transparent; color: #8B7B5E; }
.ehome-sel-btn.is-ghost:hover { background: #EFE9DC; }
.ehome-sel-btn[hidden] { display: none; }

.we-menu { max-height: min(430px, calc(100vh - 24px)); overflow-y: auto; }

.ehome-empty {
  grid-column: 1 / -1;
  padding: 36px 20px;
  border: 1.5px dashed #E0D7C3;
  border-radius: 14px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: #8B7B5E;
  word-break: keep-all;
}

@media (max-width: 860px) {
  #screen-editor-home .nav-center { display: none; }
  #screen-editor-home .nav-inner { padding-left: 12px; padding-right: 12px; }
  .ehome-main { padding: 24px 18px 100px; }
  .ehome-sec-head { align-items: flex-start; flex-direction: column; }
  .ehome-head-tools { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .ehome-search { width: 100%; flex-basis: 100%; }
  .ehome-sort { flex: 1; }
  .ehome-sort-btn { flex: 1; }
  .ehome-sel-bar { align-items: stretch; }
  .ehome-sel-actions { flex-wrap: wrap; }
  .ehome-folder-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (max-width: 520px) {
  .ehome-head h1 { font-size: 24px; }
  .ehome-actions { gap: 8px; }
  .ehome-new { flex: 1; padding: 12px; font-size: 15px; gap: 9px; }
  .ehome-new-icon { width: 40px; height: 40px; }
  .ehome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ehome-folder-grid { grid-template-columns: 1fr; }
  .ehome-trash-link span { display: none; }
}

@media (hover: none) {
  .ehome-card-more, .ehome-folder-more { opacity: 1; }
}