/**
 * image-host.css — 이미지 호스팅 「내 파일함」
 *
 * 설계 근거: docs/prd-image-hosting.md
 *
 * 🔴 **매직브러시 목록창 문법을 따른다.** 같은 사람이 매직브러시를 쓰다 넘어오는데
 * 화면 어법이 다르면 안 된다 — 행 높이·체크박스 자리·썸네일 토글이 같은 모양이다.
 * 다만 클래스는 `ih-` 로 갈라 둔다(매직브러시 CSS 를 고쳐 이 화면이 깨지면 안 된다).
 *
 * 🔴 색·간격은 전부 `common.css` 의 CSS 변수를 쓴다. 하드코딩 금지(전역 원칙).
 */

/* 🔴 `hidden` 속성이 이기게 만든다 — **이 파일에서 제일 먼저 지킬 규칙**이다.
아래 블록들이 display:flex/grid 를 직접 주는 순간 브라우저 기본값인
`[hidden]{display:none}` 을 **이겨 버려서**, JS 가 `.hidden = true` 로 감춰도
화면에 그대로 남는다. 실제로 모달·실패줄이 페이지를 열자마자 떠 있었다.
(매직브러시·소스메이커에서도 똑같이 밟은 함정이다 — 세 번째다) */
[hidden] {
  display: none !important;
}

/* 🔴 tool-main 의 가운데 정렬·최대폭·패딩을 되돌린다 — 파일함은 화면을 끝까지 쓴다
(매직브러시 `mb-app` 과 같은 이유). */
/* 🔴 높이를 **고정하지 않는다.** 예전엔 `height: calc(100vh - 92px)` 였는데,
그 92px 는 앱셸이 화면을 꽉 채운다는 가정이었다. 실제로는 위에 페이지 제목
(`page-head`)이 얹혀서 그만큼 아래로 밀리고, 그 결과 **빈 목록인데도 세로로
한참 길어져** 스크롤을 만들었다.
→ 내용에 맞춰 늘어나되(`auto`) 화면을 넘지 않게 `max-height` 로만 막는다.
🔴 매직브러시와 다른 점: 저긴 캔버스가 높이에 갇혀야 해서 고정이 맞지만,
파일함은 **목록이 짧으면 짧은 게 맞다.** */
.ih-app {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  max-width: none;
  height: auto;
  /* 🔴 목록이 적어도 화면을 어느 정도 채운다 — 너무 낮으면 목록창이 아니라
  '알림 상자'처럼 보인다. 반대로 고정하면 1장일 때 빈 공간이 길어진다.
  그래서 min 을 넉넉히 주고 max 로만 화면을 넘지 않게 막는다. */
  min-height: min(620px, calc(100vh - 150px));
  max-height: calc(100vh - 130px);
  padding: 12px;
  margin: 0;
}

/* ══════════ 좌: 폴더 ══════════ */
.ih-folders {
  flex: 0 0 180px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 🔴 없으면 안쪽 스크롤이 안 생기고 목록이 화면을 밀어낸다 */
  background: var(--bg-surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
}

.ih-folders-head {
  padding: 10px 12px;
  font-size: var(--font-xs, 0.75rem);
  font-weight: 600;
  color: var(--ink-500);
  border-bottom: 1px solid var(--ink-200);
}

.ih-folder-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px;
}

.ih-folder {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-size: var(--font-sm, 0.875rem);
  color: var(--ink-700);
  text-align: left;
  cursor: pointer;
}

.ih-folder:hover { background: var(--ink-50); }

.ih-folder.is-active {
  background: var(--ink-100);
  font-weight: 600;
  color: var(--ink-900);
}

/* 이름이 길어도 개수는 안 밀린다 */
.ih-folder-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ih-folder-count {
  flex: 0 0 auto;
  font-size: var(--font-2xs, 0.6875rem);
  color: var(--ink-400);
}

/* 이름변경·삭제 — 평소엔 숨고 hover 에만 나온다(행이 시끄러워지지 않게) */
.ih-folder-edit {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 0 2px;
  font-size: var(--font-2xs, 0.6875rem);
  color: var(--ink-400);
  cursor: pointer;
  opacity: 0;
}

.ih-folder:hover .ih-folder-edit,
.ih-folder-edit:focus-visible { opacity: 1; }
.ih-folder-edit:hover { color: var(--ink-700); }

.ih-folder-add {
  flex: 0 0 auto;
  margin: 4px;
  padding: 8px;
  border: 1px dashed var(--ink-300);
  background: transparent;
  border-radius: 6px;
  font-size: var(--font-xs, 0.75rem);
  color: var(--ink-500);
  cursor: pointer;
}

.ih-folder-add:hover {
  border-color: var(--brand-400);
  color: var(--brand-600);
}

/* ══════════ 우: 파일 ══════════ */
.ih-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
}

/* ── 상단: 용량 게이지 + 보기 전환 ── */
.ih-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ink-200);
}

.ih-gauge {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 340px;
}

.ih-gauge-track {
  flex: 1 1 auto;
  height: 6px;
  background: var(--ink-100);
  border-radius: 3px;
  overflow: hidden;
}

.ih-gauge-fill {
  height: 100%;
  width: 0;
  background: var(--brand-500);
  border-radius: 3px;
  transition: width var(--transition-fast, .15s);
}

/* 🔴 가득 차 가면 색으로 알린다 — 숫자만으로는 30장 올리기 직전에 못 알아챈다 */
.ih-gauge.is-full .ih-gauge-fill { background: var(--error-color); }

.ih-gauge-text {
  flex: 0 0 auto;
  font-size: var(--font-xs, 0.75rem);
  color: var(--ink-500);
  white-space: nowrap;
}

.ih-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* 검색 — 넓지 않게. 오른쪽에 보기전환·업로드가 같이 서 있다 */
.ih-search {
  width: 160px;
  padding: 6px 10px;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  font-size: var(--font-sm, 0.875rem);
  color: var(--ink-700);
  background: var(--paper, #fff);
}

.ih-search:focus {
  outline: none;
  border-color: var(--brand, #f60);
}

/* ── [더 보기] ── */
.ih-more {
  display: flex;
  justify-content: center;
  padding: 12px 0 20px;
  flex: 0 0 auto;
}

.ih-more-btn {
  min-width: 180px;
  font-size: var(--font-sm, 0.875rem);
}

.ih-more-btn[disabled] { opacity: 0.5; cursor: default; }

.ih-view-toggle {
  display: flex;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  overflow: hidden;
}

.ih-view {
  border: 0;
  background: var(--bg-surface);
  padding: 4px 9px;
  font-size: var(--font-2xs, 0.6875rem);
  color: var(--ink-500);
  cursor: pointer;
}

.ih-view + .ih-view { border-left: 1px solid var(--ink-200); }
.ih-view.is-active { background: var(--ink-800); color: var(--text-inverse); }

.ih-upload-btn { padding: 6px 14px; font-size: var(--font-sm, 0.875rem); }
.ih-upload-btn:disabled { opacity: .5; cursor: default; }

/* ── 드롭존 — 🔴 얇은 띠로 상주한다. 큰 드롭존은 목록을 밀어낸다 ── */
.ih-drop {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  margin: 10px 12px 0;
  padding: 0 14px;
  border: 1px dashed var(--ink-300);
  border-radius: 8px;
  font-size: var(--font-xs, 0.75rem);
  color: var(--ink-500);
}

.ih-drop.is-over {
  border-color: var(--brand-500);
  background: var(--brand-50);
}

.ih-drop-text { color: var(--ink-600); }

/* 🔴 "「상품A」 에 담김" — 지금 선택된 폴더를 반드시 보여준다 */
.ih-drop-where {
  font-weight: 600;
  color: var(--brand-600);
}

.ih-drop-note {
  margin-left: auto;
  font-size: var(--font-2xs, 0.6875rem);
  color: var(--ink-400);
}

/* ── 업로드 큐 (매직브러시 `mb-queue` 와 같은 어법) ── */
.ih-queue {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--ink-50);
}

.ih-queue-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ih-queue-count {
  font-size: var(--font-sm, 0.875rem);
  font-weight: 700;
  color: var(--ink-800);
  font-variant-numeric: tabular-nums; /* 숫자가 바뀔 때 글자가 안 흔들린다 */
}

/* 🔴 [중단] 은 처음부터 보인다. 위험한 버튼이 아니다 — 올라간 것은 남는다.
그래서 빨갛게 겁주지 않는다(매직브러시와 같은 판단). */
.ih-queue-stop {
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-surface);
  padding: 4px 10px;
  font-size: var(--font-xs, 0.75rem);
  color: var(--ink-600);
  cursor: pointer;
}

.ih-queue-stop:hover:not(:disabled) {
  border-color: var(--error-color);
  color: var(--error-color);
}

.ih-queue-stop:disabled { opacity: .5; cursor: default; }

.ih-queue-track {
  height: 6px;
  border-radius: 3px;
  background: var(--ink-200);
  overflow: hidden;
}

.ih-queue-fill {
  height: 100%;
  width: 0;
  background: var(--brand-500);
  transition: width .2s ease;
}

.ih-queue-note {
  font-size: var(--font-2xs, 0.6875rem);
  color: var(--ink-500);
  /* 🔴 긴 파일명이 폭을 밀어내지 않게 한 줄로 자른다 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 실패 줄 ── */
.ih-failbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 12px 0;
  padding: 8px 12px;
  border: 1px solid #f3c9c5;
  border-radius: 8px;
  background: #fdf3f2;
  font-size: var(--font-xs, 0.75rem);
}

.ih-fail-count {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--error-color);
}

/* ── 선택 줄 ── */
.ih-sel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ink-200);
  font-size: var(--font-xs, 0.75rem);
  color: var(--ink-600);
}

.ih-check-all {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}

.ih-sel-count { color: var(--ink-500); }

/* 🔴 [URL 전체복사] 부터 오른쪽 끝으로 민다 */
.ih-sel .ih-linkbtn:first-of-type { margin-left: auto; }

.ih-linkbtn {
  border: 0;
  background: transparent;
  padding: 2px 4px;
  font-size: var(--font-xs, 0.75rem);
  color: var(--ink-500);
  cursor: pointer;
  text-decoration: underline;
}

.ih-linkbtn:hover { color: var(--ink-800); }
.ih-linkbtn.is-danger:hover { color: var(--error-color); }
.ih-linkbtn:disabled { opacity: .4; cursor: default; text-decoration: none; }

/* ── 목록 ── */
.ih-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px;
}

/* 🔴 행을 촘촘하게 — 파일함은 **한 화면에 많이 보이는 것**이 값어치다.
40px 썸네일 + 4px 패딩이면 행 높이 48px 로, 예전(56px)보다 화면당 2~3줄 더 들어간다. */
.ih-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: default;
}

.ih-row:hover { background: var(--ink-50); }
.ih-row.is-sel { background: var(--brand-50); }

.ih-row-check { flex: 0 0 auto; cursor: pointer; }

.ih-row-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: cover;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  border-radius: 4px;
}

/* 🔴 이름과 부가정보(용량·D-day)를 **한 줄에** 둔다. 세로로 쌓으면 행 높이가
두 배가 되는데, 파일함에서 용량은 훑어보는 값이지 읽는 값이 아니다. */
.ih-row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ih-row-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-sm, 0.875rem);
  color: var(--ink-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ih-row-sub {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-2xs, 0.6875rem);
  color: var(--ink-400);
}

/* 🔴 D-day 배지 — 무료의 남은 일수.
없으면 이미지가 조용히 사라져 신뢰를 깎는다. */
.ih-dday {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--ink-100);
  color: var(--ink-500);
  font-weight: 600;
}

/* 임박분만 눈에 띄게 — 전부 빨가면 정작 내일 지워질 것이 안 보인다 */
.ih-dday.is-soon {
  background: #fdecea;
  color: var(--error-color);
}

.ih-row-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
}

.ih-row:hover .ih-row-actions,
.ih-row-actions:focus-within { opacity: 1; }

/* 🔴 [URL] 이 주 행동이다 — 한 번 클릭 = 복사 완료. 그래서 유일하게 테두리가 있다 */
.ih-url-btn {
  border: 1px solid var(--ink-300);
  background: var(--bg-surface);
  padding: 3px 9px;
  border-radius: 5px;
  font-size: var(--font-2xs, 0.6875rem);
  color: var(--ink-700);
  cursor: pointer;
}

.ih-url-btn:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
}

.ih-url-btn.is-copied {
  border-color: var(--success-color);
  color: var(--success-color);
}

/* 내려받기 — [URL] 옆. 🔴 아이콘 하나로 두는 이유: 주 행동은 어디까지나 [URL] 이고,
내려받기는 가끔 쓰는 보조 동작이다. 글자로 두면 [URL] 과 무게가 같아 보인다. */
.ih-dl-btn {
  border: 1px solid var(--ink-300);
  background: var(--bg-surface);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: var(--font-xs, 0.75rem);
  line-height: 1;
  color: var(--ink-600);
  cursor: pointer;
  text-decoration: none;
}

.ih-dl-btn:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
}

.ih-row-del {
  border: 0;
  background: transparent;
  padding: 3px 5px;
  font-size: var(--font-xs, 0.75rem);
  color: var(--ink-400);
  cursor: pointer;
}

.ih-row-del:hover { color: var(--error-color); }

/* ── 썸네일 보기 (매직브러시 `.mb-rows.is-thumbs` 와 같은 어법) ── */
.ih-rows.is-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  padding: 10px;
  /* 🔴 **`start` 가 없으면 카드가 세로로 늘어난다.** grid 는 기본이
     `stretch` 라 마지막 줄이 덜 찼거나 한 장뿐일 때 카드가 컨테이너
     높이까지 늘어나고, 그 빈 공간을 `.ih-row-body`(flex:1) 가 먹어
     **버튼이 카드 바닥까지 밀려난다.** 에러가 아니라 조용히 이상해 보인다. */
  align-content: start;
}

.ih-rows.is-thumbs .ih-row {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--ink-200);
}

.ih-rows.is-thumbs .ih-row-thumb {
  width: 100%;
  height: 96px;
}

/* 🔴 세로 카드에서는 늘어나면 안 된다 — 위 `align-content` 와 한 묶음이다 */
.ih-rows.is-thumbs .ih-row-body { flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 2px; }
.ih-rows.is-thumbs .ih-row-sub { display: none; }
.ih-rows.is-thumbs .ih-row-name { font-size: var(--font-2xs, 0.6875rem); }

.ih-rows.is-thumbs .ih-row-check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}

/**
 * 🔴 **썸네일에서는 [URL] 하나만 남긴다.**
 *
 * 카드마다 버튼 3개가 상시로 떠 있으면 20장만 깔려도 화면이 시끄러워
 * **정작 봐야 할 그림이 안 보인다** — 썸네일 보기를 켜는 이유가 그림인데.
 *
 * 없앤 둘은 갈 곳이 있다: 내려받기·삭제는 **체크 후 상단 일괄 버튼**이
 * 같은 일을 한다. 특히 삭제는 되돌릴 수 없어서, 격자에 촘촘히 놓인
 * ✕ 를 잘못 누르는 쪽이 더 위험하다.
 *
 * [URL] 만 남긴 것은 **한 번 클릭 = 복사 완료**가 이 도구의 주 행동이라서다.
 * 여기서 없애면 그림을 보고 고르는 사람이 목록 보기로 되돌아가야 한다.
 */
.ih-rows.is-thumbs .ih-row-actions {
  justify-content: center;
  margin-top: 2px;
}

.ih-rows.is-thumbs .ih-dl-btn,
.ih-rows.is-thumbs .ih-row-del { display: none; }

/* 🔴 **손가락엔 hover 가 없다.** 위에서 버튼을 hover 로만 띄우면
   태블릿에서는 [URL] 을 **영영 못 누른다** — 눌러도 아무 일이 안 나서
   고장으로 보인다. 마우스가 없는 기기에서는 그냥 보이게 둔다. */
@media (hover: none) {
  .ih-rows.is-thumbs .ih-row-actions { opacity: 1; }
}

/* ── 비었을 때 ── */
.ih-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
}

.ih-empty-title {
  font-size: var(--font-sm, 0.875rem);
  font-weight: 600;
  color: var(--ink-600);
}

/* 🔴 검색 0건과 "아직 안 올림" 은 다른 상황이다 — 같은 문구를
   띄우면 올린 것을 못 찾는 사람이 다 지워졌다고 믿는다.
   문구 자체는 마크업(`ihEmptyNohit`)에 있다. */
.ih-empty.is-nohit .ih-empty-title,
.ih-empty.is-nohit .ih-empty-sub { display: none; }

.ih-empty:not(.is-nohit) .ih-empty-nohit { display: none; }

.ih-empty-nohit {
  font-size: var(--font-sm, 0.875rem);
  font-weight: 600;
  color: var(--ink-600);
}

.ih-empty-sub { visibility: hidden; }

.ih-empty.is-nohit::before {
  content: '\CC3E\B294 \C774\BBF8\C9C0\AC00 \C5C6\C2B5\B2C8\B2E4.';
  font-size: var(--font-sm, 0.875rem);
  font-weight: 600;
  color: var(--ink-600);
}

.ih-empty-sub {
  font-size: var(--font-xs, 0.75rem);
  color: var(--ink-400);
  max-width: 380px;
}

/* ══════════ 모달 ══════════
🔴 `common.css` 의 사이트 모달과 다른 것이다 — 이건 도구 안에서만 뜨는 작은
대화상자라 헤더·닫기X 같은 장치가 없다. 대신 스크림 클릭·ESC 로 닫힌다. */
.ih-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ih-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
}

.ih-modal-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 20px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.ih-modal-title {
  margin: 0 0 6px;
  font-size: var(--font-base, 1rem);
  font-weight: 700;
  color: var(--ink-900);
}

.ih-modal-desc {
  margin: 0 0 14px;
  font-size: var(--font-xs, 0.75rem);
  color: var(--ink-500);
  line-height: 1.5;
  white-space: pre-line; /* 경고 문구를 두 줄로 나눠 쓴다 */
}

.ih-modal-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ink-300);
  border-radius: 6px;
  font-size: var(--font-sm, 0.875rem);
  color: var(--ink-800);
}

.ih-modal-input:focus {
  outline: none;
  border-color: var(--brand-500);
}

/* 폴더 고르기 — 있는 폴더를 눈으로 보고 고른다 */
.ih-modal-picker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  padding: 4px;
}

.ih-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 5px;
  font-size: var(--font-sm, 0.875rem);
  color: var(--ink-700);
  text-align: left;
  cursor: pointer;
}

.ih-pick:hover { background: var(--ink-50); }

.ih-pick.is-active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}

/* 🔴 **[확인]이 왼쪽, [취소]가 오른쪽**이다 (사용자 결정 2026-09-06).
마크업 순서는 [취소][확인] 이지만 `row-reverse` 로 자리를 바꾼다 —
순서를 마크업에서 바꾸면 **Tab 키가 [확인]에 먼저 닿아** 실수로 누르기 쉽다.
보이는 순서만 바꾸고 키보드 순서는 [취소]가 앞에 오게 둔다.
묶음 자체는 오른쪽 아래에 그대로 둔다 — 눈이 가는 자리다. */
.ih-modal-foot {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 16px;
}

.ih-modal-foot .btn { padding: 7px 16px; font-size: var(--font-sm, 0.875rem); }

/* 위험한 확인(삭제)일 때만 확인 버튼이 붉어진다 */
.ih-modal.is-danger #ihModalOk {
background: var(--error-color);
border-color: var(--error-color);
}

/* ── 좁은 화면 ──
🔴 폴더를 숨기지 않고 가로 줄로 눕힌다 — 폴더가 사라지면 지금 어디에
담기는지가 안 보이고, 그게 이 화면에서 가장 자주 하는 실수다. */
@media (max-width: 720px) {
  .ih-app {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .ih-folders { flex: 0 0 auto; }

  .ih-folder-list {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .ih-folder { width: auto; white-space: nowrap; }
  .ih-folder-count { display: none; }
  .ih-main { min-height: 60vh; }
  .ih-drop-note { display: none; }
}