/**
 * v1/share/assets/share.css — 파일공유(/v1/share) 전용 스타일
 *
 * 색·간격·radius 는 /assets/tokens.css 의 변수만 사용한다 (하드코딩 금지 규약).
 * 토큰이 없는 값만 이 파일에서 정의한다.
 */

.share-page {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-12);
}

/* ---------- 헤더 ---------- */

.share-hero {
  text-align: center;
  margin-bottom: var(--space-8);
}

.share-kicker {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
}

.share-hero__title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-3);
  color: var(--color-fg);
}

.share-hero__desc {
  color: var(--color-fg-muted);
  line-height: 1.7;
  margin: 0 auto var(--space-4);
  max-width: 46rem;
}

.share-hero__limit {
  font-size: 0.875rem;
  color: var(--color-fg-muted);
  margin: 0;
}

.share-hero__limit strong {
  color: var(--color-fg);
  font-weight: 600;
}

.share-hero__upsell {
  font-size: 0.875rem;
  color: var(--color-fg-muted);
  margin: var(--space-2) 0 0;
}

/* ---------- 카드 ---------- */

.share-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.share-card--center { text-align: center; }
.share-card--narrow { max-width: 26rem; margin-inline: auto; }
.share-card--done   { text-align: center; }

.share-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--color-fg);
  word-break: break-word;
}

.share-subtitle {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 var(--space-4);
  color: var(--color-fg);
}

.share-desc {
  color: var(--color-fg-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-4);
}

.share-desc--muted { font-size: 0.875rem; }

.share-meta {
  color: var(--color-fg-muted);
  font-size: 0.875rem;
  margin: 0 0 var(--space-1);
}

.share-note {
  color: var(--color-fg-muted);
  font-size: 0.75rem;
  margin: 0;
}

.share-head { margin-bottom: var(--space-5); }

.share-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent-soft-fg);
  font-size: 0.75rem;
  font-weight: 600;
}

.share-empty-icon { font-size: 2.5rem; margin-bottom: var(--space-3); }

.share-flash {
  background: var(--color-accent-soft);
  color: var(--color-accent-soft-fg);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  font-size: 0.875rem;
}

.share-error {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0 0;
  font-size: 0.875rem;
}

/* ---------- 드롭존 ---------- */

.share-drop {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  background: var(--color-surface-2);
}

.share-drop:hover,
.share-drop:focus-visible,
.share-drop.is-over {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  outline: none;
}

.share-drop.is-disabled { opacity: 0.55; cursor: default; }

.share-drop__icon  { font-size: 2.5rem; margin-bottom: var(--space-2); }
.share-drop__title { font-weight: 600; margin: 0 0 var(--space-1); color: var(--color-fg); }
.share-drop__hint  { font-size: 0.875rem; color: var(--color-fg-muted); margin: 0; }

/* ---------- 파일 목록 ---------- */

.share-filelist {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}

.share-fileitem {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.share-fileitem:last-child { border-bottom: none; }

.share-fileicon { flex: none; }

.share-filename {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-fg);
}

.share-filesize {
  flex: none;
  font-size: 0.875rem;
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- 입력 ---------- */

.share-options {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.share-field { display: flex; flex-direction: column; gap: var(--space-2); }

.share-field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-fg);
}

.share-optional { font-weight: 400; color: var(--color-fg-muted); }

/* 짧은주소 옵션 (회원 전용) — 그리드 한 줄을 다 쓴다 */
.share-field--wide { grid-column: 1 / -1; }

.share-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-fg);
}

.share-check input { width: 1rem; height: 1rem; accent-color: var(--color-accent); }

/* neis.me/ 접두어 + 입력칸 + 중복확인 버튼 한 줄 */
.share-keyrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.share-keyprefix {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--color-fg-muted);
  white-space: nowrap;
}

.share-keyinput {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--font-mono);
}

.share-keyresult {
  margin: var(--space-2) 0 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.share-keyresult.is-ok { color: var(--color-success); }
.share-keyresult.is-ng { color: var(--color-danger); }

.share-input:disabled {
  background: var(--color-surface-2);
  color: var(--color-fg-subtle);
  cursor: not-allowed;
}

.share-input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
  font-size: 1rem;
  font-family: inherit;
}

.share-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

/* ---------- 버튼 ---------- */

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin: var(--space-5) 0 0;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.share-btn:hover { background: var(--color-surface-2); }

.share-btn:disabled { opacity: 0.55; cursor: default; }

.share-btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-fg);   /* 다크에선 accent 가 밝아지므로 글자는 어두운 잉크가 된다 */
}

.share-btn--primary:hover { background: var(--color-accent-hover); }

.share-btn--small {
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
  flex: none;
}

.share-btn--danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: var(--color-surface);
}

.share-btn--danger:hover { background: var(--color-danger-soft); }

/* ---------- 진행률 ---------- */

.share-progress { margin-top: var(--space-5); text-align: center; }

.share-progress__label {
  font-size: 0.875rem;
  color: var(--color-fg-muted);
  margin: 0 0 var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-progress__bar {
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  overflow: hidden;
}

.share-progress__fill {
  height: 100%;
  width: 0;
  background: var(--color-accent);
  transition: width 0.2s ease;
}

.share-progress__pct {
  font-size: 0.875rem;
  color: var(--color-fg-muted);
  margin: var(--space-2) 0 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- 결과 (주소 복사) ---------- */

.share-copy {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

.share-copy__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.share-copied {
  color: var(--color-accent-soft-fg);
  font-size: 0.875rem;
  margin: var(--space-2) 0 0;
}

/* ---------- 비밀번호 폼 ---------- */

.share-pwd-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.share-pwd-form .share-input { flex: 1 1 auto; }

/* ---------- 내 공유 목록 ---------- */

.share-mylist { list-style: none; margin: 0; padding: 0; }

.share-myitem {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.share-myitem:last-child { border-bottom: none; }

.share-myitem.is-expired { opacity: 0.55; }

.share-myitem__main { flex: 1 1 auto; min-width: 0; }

.share-myitem__title {
  display: block;
  font-weight: 600;
  color: var(--color-fg);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-myitem__title:hover { color: var(--color-accent); }

.share-myitem__url {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-accent);
  margin: var(--space-1) 0 0;
  word-break: break-all;
}

.share-myitem__meta {
  font-size: 0.875rem;
  color: var(--color-fg-muted);
  margin: var(--space-1) 0 0;
}

.share-myitem__action { flex: none; margin: 0; }

.share-danger-form { margin: var(--space-5) 0 0; text-align: center; }

/* ---------- 안내 ---------- */

.share-notice {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-surface-2);
}

.share-notice__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-3);
  color: var(--color-fg);
}

.share-notice__list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-fg-muted);
  font-size: 0.875rem;
  line-height: 1.8;
}

.share-footnote {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-fg-muted);
}

/* ---------- 모바일 ---------- */

@media (max-width: 560px) {
  .share-hero__title { font-size: 1.5rem; }
  .share-card { padding: var(--space-4); }
  .share-drop { padding: var(--space-8) var(--space-3); }
  .share-copy { flex-direction: column; }
  .share-actions { flex-direction: column; }
  .share-actions .share-btn { width: 100%; }
  .share-myitem { flex-wrap: wrap; }
}