/* 에일리오 «SNS 프롬프트» · «트렌드» (F, 2026-10-10) — app.css 의 Graphite Atelier 토큰을 그대로 쓴다.
 * 흑백 갤러리 + 샴페인(점·선만). 밝은 바탕에는 늘 어두운 글자를 명시(상속에 기대지 않음).
 * 프롬프트 카드 = 사진이 주인공(4:5), 트렌드 카드 = 사진 또는 글자 카드(4:3), 메가 트렌드 = 날짜가 주인공인 글자 카드.
 */

/* ── 공통 ───────────────────────────────────────────────── */
.feed { color: var(--color-ink); }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--color-ink-3); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; }
.feed-head { align-items: flex-end; }
.feed-head h1 { font-size: clamp(1.75rem, 1.05rem + 2.6vw, 2.9rem); text-wrap: balance; color: var(--color-ink); }
.feed-head p { max-width: 34em; color: var(--color-ink-2); }
.feed-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.btn--sm { min-height: 34px; padding: 0.35rem 0.9rem; font-size: var(--text-sm); }
.btn--sm svg { width: 15px; height: 15px; }
.btn small { font-weight: 500; color: var(--color-ink-3); margin-left: 2px; font-variant-numeric: tabular-nums; }
.btn:not(.btn--soft):not(.btn--ghost) small { color: var(--color-on-ink-2); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--space-5); font-size: var(--text-sm); color: var(--color-ink-3); }
.crumbs a { color: var(--color-ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--color-ink); text-decoration: underline; }
.crumbs span:last-child { color: var(--color-ink-3); max-width: 28em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 필터 줄: 종류(seg) · 검색 · 고르기 */
.feed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.feed-bar .seg { display: inline-grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(64px, auto); margin: 0; }
.feed-bar .seg button { min-height: 36px; padding: 0 14px; }
.fsearch { position: relative; flex: 1 1 240px; min-width: 0; display: flex; align-items: center; }
.fsearch svg { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--color-ink-3); pointer-events: none; }
.fsearch input {
  width: 100%; min-height: 42px; padding: 8px 16px 8px 40px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fsearch input::placeholder { color: var(--color-ink-3); }
.fsearch input:hover { border-color: var(--color-ink-3); }
.fsearch input:focus { outline: none; border-color: var(--color-ink); box-shadow: 0 0 0 3px var(--color-paper-3); }
.fsel { position: relative; display: inline-flex; align-items: center; flex: none; min-width: 0; }
.fsel select {
  appearance: none; -webkit-appearance: none; min-height: 42px; max-width: 100%; padding: 8px 36px 8px 15px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-ink);
  font-size: var(--text-sm); font-weight: 500; cursor: pointer; text-overflow: ellipsis;
}
.fsel select:hover { border-color: var(--color-ink-3); }
.fsel select:focus { outline: none; border-color: var(--color-ink); box-shadow: 0 0 0 3px var(--color-paper-3); }
.fsel option { color: var(--color-ink); background: var(--color-surface); }
.fsel svg { position: absolute; right: 13px; width: 15px; height: 15px; color: var(--color-ink-3); pointer-events: none; }

.feed-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-6); }
.feed-tags:empty { display: none; }
.feed-tags--tight { margin: var(--space-3) 0 0; }
.chip--sm { min-height: 28px; padding: 3px 11px; font-size: var(--text-xs); }
.chip--static { cursor: default; color: var(--color-ink-2); }
.chip--static:hover { color: var(--color-ink-2); box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.feed-count { min-height: 1.3em; margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.feed-more { display: flex; justify-content: center; margin-top: var(--space-8); }
.feed-more:empty { display: none; }
.feed-empty { grid-column: 1 / -1; padding: var(--space-12) var(--space-5); border-radius: var(--radius-hero); background: var(--color-surface); color: var(--color-ink-2); box-shadow: inset 0 0 0 1px var(--color-line); text-align: center; }

.feed-section { margin-top: var(--space-16); }
.feed-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.feed-section__head h2 { color: var(--color-ink); text-wrap: balance; }
.feed-section__head .eyebrow { margin-bottom: 6px; }
.feed-section__head > a { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); text-decoration: none; }
.feed-section__head > a:hover { color: var(--color-ink); text-decoration: underline; }
.feed-section__head > a svg { width: 15px; height: 15px; }

.admin-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8); padding: 12px 16px; border-radius: var(--radius-card); background: var(--color-accent-wash); color: var(--color-ink); font-size: var(--text-sm); }
.admin-strip span { color: var(--color-ink-2); }

/* ── 프롬프트 카드 ──────────────────────────────────────── */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 212px), 1fr)); gap: var(--space-8) var(--space-4); }
.pgrid--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--color-ink); text-decoration: none; }
.pcard__img { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease-out); }
.pcard:hover .pcard__img img { transform: scale(1.025); }
.pcard:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-card); }
.pcard__ph { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--color-ink-3); }
.pcard__badge { position: absolute; left: 10px; top: 10px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--color-glass); color: var(--color-on-ink); font-size: 11px; font-weight: 600; }
.pcard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pcard__body b { font-family: var(--font-display); font-weight: 650; font-size: var(--text-md); letter-spacing: -0.015em; line-height: 1.38; color: var(--color-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__body small { font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__meta { margin-top: 2px; font-size: var(--text-xs); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }

/* ── 프롬프트 상세 + 바로 만들기 ─────────────────────────── */
.pd { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--space-10); align-items: start; }
.pd__media { position: sticky; top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.pd__hero { width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--radius-hero); background: var(--color-paper-2); }
.pd__hero--ph { display: grid; place-items: center; aspect-ratio: 4 / 5; font-family: var(--font-display); font-weight: 700; font-size: 3rem; color: var(--color-ink-3); }
.pd__thumbs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.pd__thumbs::-webkit-scrollbar { display: none; }
.pd__thumbs button { flex: none; width: 60px; height: 74px; padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-line); }
.pd__thumbs button:hover { box-shadow: 0 0 0 2px var(--color-ink); }
.pd__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pd__panel { min-width: 0; color: var(--color-ink); }
.pd__title { font-size: var(--text-2xl); letter-spacing: -0.03em; line-height: 1.25; text-wrap: balance; color: var(--color-ink); }
.pd__lead { margin-top: var(--space-3); color: var(--color-ink-2); white-space: pre-line; }
.pd__stats { margin: var(--space-3) 0 var(--space-5); font-size: var(--text-sm); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }

.prompt-box { position: relative; border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); padding: var(--space-4) var(--space-4) var(--space-3); }
.prompt-box__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.prompt-box__head b { font-size: var(--text-sm); font-weight: 650; color: var(--color-ink); }
.prompt-box__len { font-size: var(--text-xs); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.prompt-box__head .btn { margin-left: auto; }
.prompt-box__text { margin: 0; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere;
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.7; color: var(--color-ink-soft); }
.prompt-box.is-locked .prompt-box__text { max-height: 120px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent); mask-image: linear-gradient(to bottom, #000 35%, transparent); }
.prompt-box__lock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-3); }
.prompt-box__lock p { flex: 1 1 100%; font-size: var(--text-sm); color: var(--color-ink-2); }
.prompt-box__lock .link-btn { color: var(--color-ink); }

.maker { margin-top: var(--space-6); padding: var(--space-6); border-radius: var(--radius-hero); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--color-line); scroll-margin-top: var(--space-6); }
.maker__title { font-size: var(--text-xl); color: var(--color-ink); }
.maker__mode { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--space-5); }
.maker__sub { margin-top: 6px; font-size: var(--text-sm); color: var(--color-ink-2); }
.maker__hint--block { margin-top: var(--space-4); padding: 10px 12px; border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink-2); line-height: 1.55; }
.maker .slot--start { width: 112px; height: 200px; }
.maker .slot--wide { width: 200px; height: 112px; }
.maker__foot .free-note { text-align: left; }
.results__grid--video { grid-template-columns: minmax(0, 340px); }
.results__grid--video.is-wide { grid-template-columns: minmax(0, 1fr); }
.maker__res-head h3 .elapsed { margin-left: 8px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-3); }
.maker__sent { margin-top: var(--space-4); padding: 12px 14px; border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink); }
.maker__sent summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.maker__sent-note { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-ink); }
.maker__sent-text { margin-top: var(--space-2); font-size: 13px; line-height: 1.65; color: var(--color-ink-soft); word-break: normal; overflow-wrap: anywhere; }
.maker__note { margin-top: var(--space-3); padding: 12px 14px; border-radius: var(--radius-input); background: var(--color-accent-wash); color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.55; }
.maker__note b { color: var(--color-ink); }
.maker__block { margin-top: var(--space-5); }
.maker__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 650; color: var(--color-ink); }
.maker__label small { font-weight: 400; color: var(--color-ink-3); }
.maker .slots { flex-direction: row; flex-wrap: wrap; }
.maker .slot { width: 104px; height: 130px; }
.maker .inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.maker__edit { margin-top: var(--space-5); border-top: 1px solid var(--color-line); padding-top: var(--space-4); }
.maker__edit summary { cursor: pointer; width: fit-content; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.maker__edit summary:hover { color: var(--color-ink); }
.maker__edit[open] summary { margin-bottom: var(--space-3); color: var(--color-ink); }
.maker__edit .textarea { min-height: 180px; font-size: 13.5px; }
.maker__hint { margin-top: 6px; font-size: var(--text-xs); color: var(--color-ink-3); }
.maker__foot { margin-top: var(--space-5); }
.maker__results { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-line); animation: rise 320ms var(--ease-out); }
.maker__results[hidden] { display: none; }
.maker__res-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.maker__res-head h3 { color: var(--color-ink); }
.maker__res-head p { margin-top: 4px; font-size: var(--text-sm); color: var(--color-ink-2); }
.maker__res-head a { color: var(--color-ink); font-weight: 600; }

/* ── 트렌드 목록 ────────────────────────────────────────── */
.trend-tabs { margin-bottom: var(--space-5); }
.trend-tabs .industry { text-decoration: none; font-size: var(--text-lg); }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: var(--space-8) var(--space-4); }
.tgrid--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--color-ink); text-decoration: none; }
.tcard:focus-visible, .mcard:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-card); }
.tcard__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); }
.tcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease-out); }
.tcard:hover .tcard__img img { transform: scale(1.025); }
/* 이미지 없는 항목 — 글자 카드(제목이 그림 역할) */
.tcard__ph { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); width: 100%; height: 100%; padding: var(--space-4); background: var(--color-paper-2); color: var(--color-ink); }
.tcard__ph span { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-3); }
.tcard__ph b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem); letter-spacing: -0.025em; line-height: 1.3; color: var(--color-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tcard:hover .tcard__ph { background: var(--color-paper-3); }
.tcard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tcard__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 20px; font-size: var(--text-xs); color: var(--color-ink-3); }
.tcard__body > b { font-family: var(--font-display); font-weight: 650; font-size: var(--text-md); letter-spacing: -0.015em; line-height: 1.38; color: var(--color-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard__body > small { font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard__foot { display: flex; align-items: center; gap: var(--space-3); margin-top: 4px; font-size: var(--text-xs); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.tcard__by { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-3); }
.cnt { display: inline-flex; align-items: center; gap: 4px; color: var(--color-ink-3); }
.cnt svg { width: 14px; height: 14px; stroke-width: 1.7; }
.cnt.is-on { color: var(--color-ink); }
.cnt.is-on svg { fill: currentColor; }

/* 단계 표시: 점 색으로만 구분(글자는 늘 진하게) */
.phase { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 7px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-line-strong); background: var(--color-surface); color: var(--color-ink-2); font-size: 11px; font-weight: 600; line-height: 1.6; }
.phase::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-3); }
.phase--trending::before, .phase--popular::before { background: var(--color-accent); }
.phase--active::before { background: var(--color-ink); }
.phase--evergreen::before { background: var(--color-success); }
.phase--past_trending::before { background: var(--color-line-strong); }
.phase--member { background: var(--color-ink); color: var(--color-on-ink); box-shadow: none; }
.phase--member::before { background: var(--color-accent); }

/* 메가 트렌드: 날짜가 주인공인 글자 카드 */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--space-3); }
.mgrid.tgrid--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mcard { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 200px; padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--color-line); transition: box-shadow var(--dur) var(--ease-out); }
.mcard:hover { box-shadow: inset 0 0 0 1px var(--color-ink-3); }
.mcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.mcard__dday { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 750; font-size: 1.55rem; letter-spacing: -0.035em; line-height: 1; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.mcard.is-now .mcard__dday::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.mcard__date { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mcard > b { font-family: var(--font-display); font-weight: 650; font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1.35; color: var(--color-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard > small { font-size: var(--text-sm); color: var(--color-ink-3); }
.mcard__kw { font-size: var(--text-xs); color: var(--color-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard .tcard__foot { margin-top: auto; padding-top: var(--space-3); }
.mcard .tcard__foot .phase { margin-left: auto; }

/* ── 트렌드 상세 · 반응 · 댓글 ──────────────────────────── */
.td { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-12); align-items: start; }
.td__main { min-width: 0; max-width: 46rem; color: var(--color-ink); }
.td__title { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.4rem); letter-spacing: -0.035em; line-height: 1.2; text-wrap: balance; color: var(--color-ink); }
.td__dday { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.td__dday.is-now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.td__lead { margin-top: var(--space-3); font-size: var(--text-lg); line-height: 1.65; color: var(--color-ink-2); white-space: pre-line; }
.td__img { margin: var(--space-6) 0 0; border-radius: var(--radius-hero); overflow: hidden; background: var(--color-paper-2); }
.td__img img { width: 100%; max-height: 560px; object-fit: contain; }
.tsec { margin-top: var(--space-8); }
.tsec h2 { margin-bottom: var(--space-2); font-size: var(--text-lg); color: var(--color-ink); }
.tsec p { color: var(--color-ink-soft); white-space: pre-line; }
.tsec ul { margin: 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: 6px; }
.tsec li { color: var(--color-ink-soft); }
.tsec li::marker { color: var(--color-accent-ink); }
.tsec--facts dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line); }
.tsec--facts dt { font-size: var(--text-xs); color: var(--color-ink-3); }
.tsec--facts dd { margin: 2px 0 0; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.tsec--facts dd small { font-weight: 500; color: var(--color-ink-3); }
.td__links, .tsec .td__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.td__links a { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--color-line); }
.td__links a:hover { box-shadow: inset 0 0 0 1px var(--color-ink-3); }
.td__links a svg { width: 17px; height: 17px; color: var(--color-ink-3); }
.td__links a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--color-ink); }
.td__links a small { flex: none; font-size: var(--text-xs); color: var(--color-ink-3); }
.td__src { margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-ink-3); }
.td__src a { color: var(--color-ink-2); }

.td__side { position: sticky; top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); border-radius: var(--radius-hero); background: var(--color-surface); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line); }
.td__actions { display: flex; align-items: center; gap: var(--space-2); }
.td__actions .btn { flex: 1 1 auto; }
.td__actions .btn b { font-variant-numeric: tabular-nums; }
#td-like[aria-pressed="true"] svg { fill: currentColor; }
#td-like:hover svg { transform: none; }
.reacts { display: flex; flex-wrap: wrap; gap: 6px; }
.reacts__title { flex-basis: 100%; margin-bottom: 2px; font-size: var(--text-sm); font-weight: 650; color: var(--color-ink); }
.react { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 12px; border: 0; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.react:hover { background: var(--color-paper-3); }
.react[disabled] { opacity: 0.55; cursor: progress; }
.react b { font-weight: 650; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.td__own { display: flex; gap: var(--space-4); font-size: var(--text-sm); }
.td__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.td__cta p { font-size: var(--text-sm); color: var(--color-ink-2); }

.comments { max-width: 46rem; margin-top: var(--space-12); color: var(--color-ink); }
.comments > h2 { display: flex; align-items: baseline; gap: 8px; color: var(--color-ink); }
.comments > h2 small { font-family: var(--font-body); font-size: var(--text-md); font-weight: 500; color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.cform { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); }
.cform__note { font-size: var(--text-xs); color: var(--color-ink-3); }
.cform__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cform--out { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); }
.cform--out p { flex: 1 1 220px; color: var(--color-ink-2); }
.clist { list-style: none; margin: 0; padding: 0; }
.cmt { padding: var(--space-4) 0; border-top: 1px solid var(--color-line); color: var(--color-ink); }
.cmt.is-hidden { opacity: 0.5; }
.cmt__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cmt__head b { font-weight: 650; color: var(--color-ink); }
.cmt__head time { font-size: var(--text-xs); color: var(--color-ink-3); }
.cmt__react { padding: 0 9px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-line-strong); font-size: var(--text-xs); color: var(--color-ink-2); }
.cmt__body { margin-top: 6px; white-space: pre-wrap; color: var(--color-ink-soft); }
.cmt__tools { display: flex; gap: var(--space-3); margin-top: 6px; font-size: var(--text-xs); }
.cmt__tools:empty { display: none; }
.cmt__tools .link-btn { color: var(--color-ink-3); font-weight: 500; }
.cmt__tools .link-btn:hover { color: var(--color-ink); }
.clist__empty { padding: var(--space-6) 0; border-top: 1px solid var(--color-line); color: var(--color-ink-3); font-size: var(--text-sm); }

/* 제보하기 창 */
.sform { display: flex; flex-direction: column; gap: var(--space-4); }
.sform .seg { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.sform input[type="file"] { font-size: var(--text-sm); color: var(--color-ink-2); }
.sform__dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-input); background: var(--color-accent-wash); color: var(--color-ink); }
.sform__dates[hidden] { display: none; }
.sform__dates .input { min-height: 44px; }
.sform__rule { font-size: var(--text-xs); color: var(--color-ink-3); line-height: 1.55; }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .pd { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); max-width: 640px; margin-inline: auto; }
  .pd__media { position: static; }
  .pd__hero { max-height: 70vh; }
  .td { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .td__side { position: static; }
  .pgrid--row, .tgrid--row, .mgrid.tgrid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .feed-head { gap: var(--space-3); }
  .feed-head__actions, .feed-head > .btn { width: 100%; }
  .feed-head__actions .btn, .feed-head > .btn { flex: 1 1 auto; }
  .feed-bar .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .fsearch { flex-basis: 100%; }
  .fsel { flex: 1 1 calc(50% - var(--space-1)); }
  .fsel select { width: 100%; }
  .feed-bar--prompts .fsearch { flex: 1 1 150px; }
  .feed-bar--prompts .fsel { flex: none; }
  .feed-tags { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .feed-tags::-webkit-scrollbar { display: none; }
  .feed-tags--tight { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .pgrid, .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3); }
  .mgrid { grid-template-columns: minmax(0, 1fr); }
  .mcard { min-height: 0; }
  /* 홈·관련 줄: 옆으로 넘기기 */
  .pgrid--row, .tgrid--row, .mgrid.tgrid--row {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .pgrid--row::-webkit-scrollbar, .tgrid--row::-webkit-scrollbar { display: none; }
  .pgrid--row > *, .tgrid--row > * { scroll-snap-align: start; }
  .mgrid.tgrid--row { grid-auto-columns: 78%; }
  .feed-section { margin-top: var(--space-12); }
  .tcard__ph { padding: var(--space-3); }
  .pcard__body small, .tcard__body > small { -webkit-line-clamp: 1; }
  .maker { padding: var(--space-5) var(--space-4); margin-inline: calc(var(--space-1) * -1); }
  .maker .inputs { grid-template-columns: minmax(0, 1fr); }
  .maker .slots { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .maker .slot { width: 96px; height: 120px; }
  .maker .slot--start { width: 96px; height: 170px; }
  .maker .slot--wide { width: 170px; height: 96px; }
  .results__grid--video { grid-template-columns: minmax(0, 1fr); }
  .results__grid--video:not(.is-wide) .result { max-width: 300px; margin-inline: auto; width: 100%; }
  .prompt-box__text { max-height: 220px; }
  .td__side { padding: var(--space-4); }
  .comments { margin-top: var(--space-10); }
  .crumbs span:last-child { max-width: 60vw; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard:hover .pcard__img img, .tcard:hover .tcard__img img { transform: none; }
}