/* 5ft.mag 연작(Series) — 목록 · 상세 · 만들기 */

/* ── 인트로 (films 와 같은 모양) ── */
.intro {
  padding: 24px calc(40px + var(--wide-inset));
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.intro-inner { max-width: 720px; }
.intro p {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.intro p .accent { background: var(--accent); color: var(--accent-text); padding: 0 6px; }

/* ── 목록 ── */
.se-section { padding: 28px calc(40px + var(--wide-inset)) 80px; }
.se-section-title { font-size: 32px; font-weight: var(--fw-heading); letter-spacing: -0.02em; line-height: var(--lh-title); }
.se-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; border-bottom: 1px solid var(--border); padding: 0 0 18px; margin-top: 28px; }
.se-new {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent); color: var(--accent-text);
  font: inherit; font-weight: var(--fw-heading); font-size: 15px;
  padding: 12px 18px; border: 0; border-radius: var(--btn-radius); cursor: pointer; text-decoration: none;
}
.se-new:hover { filter: brightness(0.96); }
.se-note { font-size: 14px; color: var(--text-muted); }
.se-mine-list { margin-top: 18px; font-size: 14px; line-height: 1.9; }
.se-mine-list strong { margin-right: 8px; }
.se-mine-list a { font-weight: var(--fw-heading); text-decoration: underline; text-underline-offset: 3px; }
.se-mine-list small { color: var(--text-muted); }

.se-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; margin-top: 28px; }
@media (max-width: 1100px) { .se-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.se-card { display: block; color: inherit; text-decoration: none; min-width: 0; }
.se-card-cover { aspect-ratio: 4 / 3; background: var(--bg-sub); overflow: hidden; }
.se-card-cover img, .se-card-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.se-card-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 4px; margin-top: 4px; }
.se-card-strip > span { aspect-ratio: 1; background: var(--bg-sub); overflow: hidden; display: block; }
.se-card-count {
  display: flex; align-items: center; justify-content: center;
  background: #111; color: #fff; font-size: 13px; font-weight: 700; padding: 0 12px; white-space: nowrap; min-width: 52px;
}
.se-card h3 { font-size: 22px; font-weight: var(--fw-heading); margin-top: 14px; letter-spacing: -0.02em; line-height: var(--lh-title); word-break: keep-all; }
.se-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.se-card-meta { font-size: 14px; color: var(--text-muted); margin-top: 6px; }
.se-card-text {
  font-size: 15px; color: var(--text-muted); margin-top: 8px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.se-more { display: flex; justify-content: center; margin-top: 40px; }
.se-btn {
  font: inherit; font-size: 14px; font-weight: var(--fw-heading);
  padding: 10px 16px; border: 1px solid var(--ctrl-border); border-radius: var(--btn-radius);
  background: var(--bg); color: var(--text); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.se-btn:hover { border-color: var(--text); }
.se-btn:disabled { opacity: 0.5; cursor: progress; }
.se-btn-primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.se-btn-danger:hover { color: var(--color-danger-text); border-color: var(--color-danger-border); }

.se-state { padding: 56px 0; text-align: center; color: var(--text-muted); font-size: 16px; line-height: 1.6; }
.se-state strong { display: block; color: var(--text); font-size: 18px; margin-bottom: 6px; }
.se-state .se-btn, .se-state .se-new { margin-top: 16px; }
.se-state-error { color: var(--color-danger-text); }

/* ── 상세 ── */
.se-detail { max-width: 880px; margin: 0 auto; padding: 56px 20px 80px; }
.se-kicker { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.se-detail h1 { font-size: 44px; font-weight: 900; letter-spacing: -0.03em; margin-top: 10px; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.se-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; margin-top: 16px; color: var(--text-muted); }
.se-meta a { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.se-gear { margin: 56px 0 0; padding-top: 24px; border-top: 1px solid var(--border); display: grid; gap: 14px; font-size: 15px; }
.se-gear > div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: baseline; }
.se-gear dt { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.se-gear dd { margin: 0; line-height: 1.7; color: var(--text-muted); }
.se-gear a { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* 좋아요·공유는 글자 없이 아이콘만(운영자 요청). 누를 자리는 44px 로 둔다. */
.se-acts { display: flex; gap: 4px; margin-top: 12px; margin-left: -10px; }
.se-icon-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; border-radius: var(--btn-radius); }
.se-icon-btn:hover { background: var(--bg-sub); }
.se-icon-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.se-like.is-liked { color: var(--color-heart); }
.se-like.is-liked .se-icon { fill: currentColor; }
.se-like-count { color: var(--text); }
.se-like-count:empty { display: none; }
.se-consent-note { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-top: -8px; word-break: keep-all; }
.se-status {
  margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-md); font-size: 15px; line-height: 1.55;
  background: var(--color-warning-bg); color: var(--color-warning-text);
}
.se-status.is-rejected { background: var(--color-danger-bg); color: var(--color-danger-text); }
.se-status.is-approved { background: var(--color-success-bg); color: var(--color-success-text); }
.se-status strong { display: block; }
.se-owner-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.se-text { font-size: 19px; line-height: 1.8; margin-top: 28px; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.se-photo { margin: 48px 0 0; }
.se-photo img { width: 100%; display: block; background: var(--bg-sub); }
.se-photo figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-muted); margin-top: 10px; }
.se-photo figcaption a { color: var(--text); font-weight: 700; text-align: right; }
.se-photo-note { font-size: 17px; line-height: 1.8; color: var(--text-muted); margin-top: 20px; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.se-photo-badge { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: var(--badge-radius); background: var(--color-warning-bg); color: var(--color-warning-text); font-size: 12px; font-weight: 700; }
.se-comments { margin-top: 32px; scroll-margin-top: calc(var(--header-h) + 16px); }
/* 댓글 위젯은 기사 본문 폭(가운데 정렬·좌우 여백)에 맞춰져 있다. 연작 상세 칼럼에 붙인다. */
.se-comments .cm-root { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.se-back { display: inline-block; margin-top: 56px; font-size: 14px; font-weight: 700; color: var(--text-muted); }
.se-back:hover { color: var(--text); }

/* ── 만들기 · 고치기 ── */
.se-editor { max-width: 880px; margin: 0 auto; padding: 48px 20px 80px; }
.se-editor h1 { font-size: 36px; font-weight: var(--fw-heading); letter-spacing: -0.02em; }
.se-editor-lead { font-size: 16px; color: var(--text-muted); margin-top: 10px; line-height: 1.6; }
.se-form { margin-top: 28px; display: grid; gap: 20px; }
.se-field { display: grid; gap: 6px; }
.se-label { font-size: 14px; font-weight: var(--fw-heading); }
.se-label em { color: var(--color-danger-text); font-style: normal; }
.se-label small { font-weight: 400; color: var(--text-muted); }
.se-field input[type="text"], .se-field textarea {
  font: inherit; font-size: 16px; padding: 10px 12px; width: 100%;
  background: var(--bg); color: var(--text); border: 1px solid var(--ctrl-border); border-radius: var(--field-radius);
}
.se-field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.se-hint { font-size: 13px; color: var(--text-muted); word-break: keep-all; }
.se-counter { font-size: 13px; color: var(--text-muted); text-align: right; }
.se-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.se-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; word-break: keep-all; }
.se-check input { margin-top: 3px; }

.se-photos-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 24px; }
.se-photos-head h2 { font-size: 20px; font-weight: var(--fw-heading); }
.se-photos-count { font-size: 14px; color: var(--text-muted); }
.se-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.se-selected { display: flex; flex-direction: column; gap: 8px; }
.se-selected-empty { font-size: 14px; color: var(--text-muted); padding: 18px; border: 1px dashed var(--ctrl-border); border-radius: var(--radius-md); text-align: center; }
/* 고른 사진: 한 줄에 한 장. ≡ 로 끌기, ↑·↓·× 는 키보드·보조기기용 대안 */
.se-sel { position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px; min-width: 0; }
.se-sel-row { display: flex; align-items: center; gap: 10px; min-width: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.se-sel-handle {
  flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 22px; line-height: 1; color: var(--text-muted); background: none; border: 0; border-radius: var(--btn-radius);
  cursor: grab; touch-action: none;
}
.se-sel-handle:hover { color: var(--text); background: var(--bg-sub); }
.se-sel-thumb { flex: none; width: 80px; height: 80px; object-fit: cover; display: block; background: var(--bg-sub); border-radius: 2px; pointer-events: none; }
.se-sel-label { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.se-sel-num { white-space: nowrap; background: #111; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: var(--badge-radius); }
.se-sel-cover { white-space: nowrap; background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: var(--badge-radius); }
.se-sel-tools { flex: none; display: flex; gap: 4px; }
.se-sel-tools button { font: inherit; font-size: 16px; line-height: 1; width: 44px; height: 44px; border: 1px solid var(--ctrl-border); background: var(--bg); color: var(--text); border-radius: var(--btn-radius); cursor: pointer; }
.se-sel-tools button:disabled { opacity: 0.35; cursor: default; }
.se-sel-note { margin-top: 6px; padding-left: 54px; }
.se-sel-note-open { font: inherit; font-size: 13px; color: var(--text-muted); background: none; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.se-sel-note-open:hover { color: var(--text); }
.se-sel-note-text { font: inherit; font-size: 15px; line-height: 1.6; width: 100%; min-height: 72px; padding: 8px 10px; resize: vertical; background: var(--bg); color: var(--text); border: 1px solid var(--ctrl-border); border-radius: var(--field-radius); }
.se-field textarea.is-over, .se-sel-note-text.is-over { border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.se-counter.is-over { color: var(--color-danger-text); font-weight: 700; }
/* 끄는 중: 들어 올린 느낌, 다른 줄은 제자리에서 비켜 준다 */
.se-selected.is-sorting .se-sel { transition: none; }
.se-sel.is-dragging { z-index: 5; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); border-color: var(--text); cursor: grabbing; }
.se-sel.is-dragging .se-sel-row, .se-sel.is-dragging .se-sel-handle { cursor: grabbing; }

/* 상자 안에서 따로 스크롤되면 페이지 스크롤과 엉켜서(특히 휴대폰) 페이지와 함께 내려가게 둔다.
   정사각형은 aspect-ratio 대신 ::before 로 잡는다(iOS Safari 가 aspect-ratio 칸을 눌러 줄무늬가 된 적이 있다). */
.se-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 8px; padding: 2px; }
.se-pick { position: relative; display: block; width: 100%; padding: 0; border: 2px solid transparent; background: var(--bg-sub); cursor: pointer; overflow: hidden; border-radius: 2px; }
.se-pick::before { content: ''; display: block; padding-top: 100%; }
.se-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.se-pick.is-selected { border-color: var(--text); }
.se-pick-num { position: absolute; right: 4px; top: 4px; min-width: 22px; height: 22px; display: none; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 800; border-radius: 11px; padding: 0 6px; }
.se-pick.is-selected .se-pick-num { display: inline-flex; }
.se-pick-status { position: absolute; left: 4px; bottom: 4px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: var(--badge-radius); }

.se-upload { display: grid; gap: 10px; }
.se-upload-list { list-style: none; display: grid; gap: 6px; font-size: 14px; }
.se-upload-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; background: var(--bg-sub); border-radius: var(--radius-md); }
.se-upload-list .is-error { color: var(--color-danger-text); }
.se-upload-list .is-done { color: var(--color-success-text); }
.se-upload-list .se-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.se-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 20px; }
.se-error { color: var(--color-danger-text); font-size: 14px; line-height: 1.5; white-space: pre-line; }
.se-error:empty { display: none; }

.se-login { max-width: 480px; margin: 0 auto; text-align: center; padding: 48px 0; }
.se-login p { color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }

@media (max-width: 640px) {
  .intro { padding: 20px 20px; }
  .intro p { font-size: 17px; }
  .se-section { padding: 24px 20px 60px; }
  .se-section-title { font-size: 28px; }
  .se-grid { grid-template-columns: 1fr; gap: 36px; }
  .se-detail { padding: 32px 20px 60px; }
  .se-detail h1 { font-size: 32px; }
  .se-text { font-size: 17px; }
  .se-photo { margin-top: 32px; }
  .se-editor { padding: 32px 20px 60px; }
  .se-editor h1 { font-size: 28px; }
  .se-row { grid-template-columns: 1fr; }
  .se-sel-thumb { width: 64px; height: 64px; }
  .se-sel-handle { width: 40px; }
  .se-sel-row { gap: 8px; }
  .se-sel-note { padding-left: 0; }
  .se-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}