/* 사진 용량 줄이기 (2026-10-01). /css/common.css 다음에 불러옵니다.
   색은 common.css 토큰만(다크 모드 자동). 🔴 CSP style-src 'self' — style="" 속성 금지. 터치 대상 44px 이상. */

/* "홈" 한 글자 링크도 폭 44px */
.ic-crumbs a {
  min-width: 44px;
  justify-content: center;
}

/* --- 사진 넣는 칸 ----------------------------------------------------------- */
.ic-drop {
  position: relative; /* 숨긴 파일 칸이 이 상자 안에 머물게 */
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  margin-bottom: var(--space-5);
  padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  text-align: center;
}

.ic-drop.is-over {
  border-color: var(--color-primary);
  border-style: solid;
}

.ic-drop__text {
  margin: 0;
  font-weight: var(--weight-bold);
}

/* 파일 칸은 눈에 안 보이게 두고(키보드 포커스는 받음) 라벨을 버튼처럼 씁니다. */
.ic-file {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ic-pick {
  min-width: 200px;
  cursor: pointer;
}

.ic-file:focus + .ic-pick {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* --- 설정 ------------------------------------------------------------------ */
.ic-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ic-size-row {
  max-width: 320px;
  margin-top: var(--space-3);
}

.option-card.is-disabled {
  opacity: 0.5;
}

.ic-qout {
  margin-left: var(--space-2);
  color: var(--color-primary);
}

.ic-range {
  width: 100%;
  min-height: 44px;
  accent-color: var(--color-primary);
}

.ic-actions {
  flex-wrap: wrap;
}

.ic-status {
  min-height: 24px;
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-weight: var(--weight-bold);
}

/* --- 결과 목록 -------------------------------------------------------------- */
.ic-list {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.ic-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.ic-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  background: var(--color-preview);
  object-fit: contain;
}

.ic-thumb--empty {
  display: block;
}

.ic-meta {
  min-width: 0;
}

.ic-name {
  display: block;
  overflow-wrap: anywhere;
}

.ic-line,
.ic-sub,
.ic-warn {
  margin: var(--space-1) 0 0;
}

.ic-line b {
  color: var(--color-success);
}

.ic-sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.ic-warn {
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.ic-item__actions {
  display: flex;
  gap: var(--space-2);
}

@media (max-width: 760px) {
  .ic-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ic-item {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .ic-item__actions {
    grid-column: 1 / -1;
  }

  .ic-item__actions .button {
    flex: 1;
  }
}

/* --- 미리 보기 -------------------------------------------------------------- */
.ic-preview {
  margin: var(--space-5) 0 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-preview);
}

.ic-preview__cap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.ic-preview__canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* --- 체리영어 한 줄·관련 도구 ------------------------------------------------ */
.ic-cherry {
  margin: var(--space-5) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.ic-cherry a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.ic-subhead {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
}

.ic-links {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ic-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-right: var(--space-2);
  font-weight: var(--weight-bold);
}