/* ---------- 스테퍼 ---------- */
.stepper { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.stepper__step { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; color: var(--muted); white-space: nowrap; font-size: 13px; border: 1px solid transparent; }
.stepper__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border-strong); font-size: 12px; }
.stepper__step.is-current { color: var(--ink); background: var(--accent-soft); border-color: var(--accent); }
.stepper__step.is-current .stepper__num { background: var(--accent); border-color: var(--accent); color: #fff; }
.stepper__step.is-done { color: var(--success); }
.stepper__step.is-done .stepper__num { border-color: var(--success); color: var(--success); }

/* ---------- 선택 컨트롤 ---------- */
.seg { display: inline-flex; padding: 3px; border-radius: var(--radius-s); background: var(--bg); border: 1px solid var(--border); }
.seg__item { position: relative; }
.seg__item input { position: absolute; opacity: 0; inset: 0; }
.seg__item span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-4); border-radius: 6px; color: var(--muted); cursor: pointer; font-weight: 500; }
.seg__item input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.mode-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.mode-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mode-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mode-card { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-s); cursor: pointer; background: var(--surface); }
.mode-card input { position: absolute; opacity: 0; inset: 0; }
.mode-card__icon { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-s); background: var(--bg); color: var(--muted); }
.mode-card__title { font-weight: 500; }
.mode-card__desc { font-size: 12.5px; color: var(--muted); }
.mode-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.mode-card:has(input:checked) .mode-card__icon { background: var(--accent); color: #fff; }
.mode-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.chip__box { display: inline-block; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 2px; }

.field--inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.field__input--num { width: 90px; }
.field__textarea { padding: var(--space-2) var(--space-3); min-height: 96px; resize: vertical; }

/* ---------- 업로더 ---------- */
.uploader__drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-5); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-s); color: var(--muted); cursor: pointer; text-align: center; }
.uploader__drop.is-over, .uploader__drop:hover { border-color: var(--accent); color: var(--accent-ink); }
.uploader__icon { font-size: 20px; }
.uploader__list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.uploader__item { position: relative; width: 72px; height: 72px; border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--border); background: var(--bg); }
.uploader__item img { width: 100%; height: 100%; object-fit: cover; }
.uploader__item.is-uploading { opacity: .5; }
.uploader__item.is-error { border-color: var(--critical); }
.uploader__list--docs { flex-direction: column; }
.uploader__item--doc { width: auto; height: auto; display: flex; align-items: center; gap: var(--space-2); padding: 6px 10px; font-size: 13px; }
.uploader__item--doc .uploader__remove { position: static; }
.uploader__docname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.chip__font { height: 18px; width: auto; display: block; opacity: .85; }
.sizes { display: flex; flex-direction: column; gap: var(--space-2); }
.sizes__row { display: flex; align-items: center; gap: var(--space-2); }
.sizes__no { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.sizes__x, .sizes__unit { color: var(--muted); font-size: 13px; }
.sizes__clear { width: 32px; height: 32px; color: var(--muted); }
.chip__swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.color-picker { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); background: var(--surface); cursor: pointer; }
.field__input--hex { width: 120px; font-family: var(--font-mono); }
.uploader__remove { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 11px; line-height: 1; }

/* ---------- 견적 ---------- */
.estimate { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); margin: 0 calc(-1 * var(--space-3)); background: var(--surface); border-top: 1px solid var(--border); }
.estimate__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.estimate__label { color: var(--muted); font-size: 13px; }
.estimate__total { font-size: 22px; font-weight: 700; }
.estimate__total::after { content: " cr"; font-size: 13px; font-weight: 400; color: var(--muted); }
.estimate__avail { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.estimate__avail.is-short { color: var(--critical); }
.estimate__detail summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.estimate__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.estimate__actions .btn--primary { flex: 1; }
.estimate__note { font-size: 12px; color: var(--muted); margin: 0; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table td { padding: 6px 0; border-bottom: 1px solid var(--border); }
.table td:last-child { text-align: right; font-family: var(--font-mono); }
.table tr.is-discount td { color: var(--success); }
.table tr.is-total td { font-weight: 700; border-bottom: 0; }

/* ---------- 진행 ---------- */
.page-head__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.badge--completed { background: var(--success-soft); color: var(--success); }
.badge--failed, .badge--cancelled { background: var(--critical-soft); color: var(--critical); }
.badge--awaiting_approval { background: var(--warning-soft); color: var(--warning); }
.badge--draft { background: var(--bg); color: var(--muted); }
.progress { display: flex; flex-direction: column; gap: var(--space-4); }
.progress__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.stage-list { display: flex; flex-direction: column; }
.stage-item { display: grid; grid-template-columns: 20px 1fr; column-gap: var(--space-3); }
.stage-item__rail { display: flex; flex-direction: column; align-items: center; }
.stage-item__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); flex: 0 0 auto; margin-top: 4px; }
.stage-item__line { flex: 1; width: 2px; background: var(--border); min-height: 20px; }
.stage-item:last-child .stage-item__line { display: none; }
.stage-item__body { padding-bottom: var(--space-3); }
.stage-item__title { font-weight: 500; color: var(--muted); }
.stage-item__sub { font-size: 12px; color: var(--muted); }
.stage-item.is-done .stage-item__dot { background: var(--success); border-color: var(--success); }
.stage-item.is-done .stage-item__title { color: var(--ink); }
.stage-item.is-running .stage-item__dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: pulse 1.2s infinite; }
.stage-item.is-running .stage-item__title { color: var(--ink); }
.stage-item.is-waiting .stage-item__dot { background: var(--warning); border-color: var(--warning); }
.stage-item.is-waiting .stage-item__title { color: var(--warning); }
.stage-item.is-failed .stage-item__dot { background: var(--critical); border-color: var(--critical); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 100% { box-shadow: 0 0 0 8px transparent; } }

.stage-detail { display: flex; flex-direction: column; gap: var(--space-3); }
.stage-detail__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.stage-detail__title { margin: 0; }
.stage-detail__meta { font-size: 12.5px; color: var(--muted); }
.stage-detail__desc { color: var(--muted); margin: 0; }
.stage-detail__prompt { font-weight: 500; margin: 12px 0; }
.stage-detail__foot { display: flex; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-2); }
.progress-bar { height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.progress-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s; }
.progress-bar.is-indeterminate > i { width: 40% !important; animation: slide 1.4s infinite linear; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

.options { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.option { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-s); cursor: pointer; background: var(--surface); }
.option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.option__title { font-weight: 500; }
.option__scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.option__scenes img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--bg); }
.cuts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.cut { display: grid; grid-template-columns: 120px 1fr; grid-template-rows: auto auto; gap: var(--space-2) var(--space-3); align-items: start; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.cut__media { grid-row: 1 / 3; display: block; width: 120px; border-radius: var(--radius-s); overflow: hidden; background: #000; }
.cut__media video, .cut__media img { display: block; width: 100%; height: auto; }
.cut__title { font-weight: 700; }
.cut__caption { color: var(--ink); font-size: 13px; }
.cut__meta { font-size: 12px; color: var(--muted); }
.cut__download { grid-column: 2; justify-self: start; }
.sidecars { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 13px; }
.sidecars a { color: var(--accent-ink); }
.final { display: flex; flex-direction: column; gap: var(--space-2); }
.final__media { width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--radius-s); background: #000; }
.final__meta { font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); }
.log { list-style: none; margin: var(--space-2) 0 0; padding: 0; font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; }
.log time { font-family: var(--font-mono); margin-right: 8px; }

/* ---------- 목록 ---------- */
.project-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.project-row__link { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.project-row__thumb { width: 56px; height: 56px; border-radius: var(--radius-s); overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.project-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-row__body { display: flex; flex-direction: column; min-width: 0; }
.project-row__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-row__meta { font-size: 12.5px; color: var(--muted); }
.project-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.project-row__link:hover .project-row__title { color: var(--accent-ink); }

@media (min-width: 768px) {
  .mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mode-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mode-grid--4 .mode-card { grid-template-columns: 1fr; row-gap: 4px; padding: var(--space-3); }
  .mode-grid--4 .mode-card__icon { grid-row: auto; margin-bottom: 4px; }
  .mode-grid--4 .mode-card__desc { font-size: 12px; }
  .estimate { position: static; margin: 0; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-m); }
  .estimate__actions .btn--primary { flex: 0 0 auto; }
  .progress__grid { grid-template-columns: 240px 1fr; }
  .stage-list, .stage-detail { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
  .options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cut { grid-template-columns: 160px 1fr; }
  .cut__media { width: 160px; }
}

/* ---------- 프로젝트 관리: 카드 그리드 ---------- */
.page-head__row--between { justify-content: space-between; }
.empty-action { text-align: center; margin: 0 0 var(--space-3); }
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.pcard { position: relative; }
.pcard__delete { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 32px; height: 32px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.pcard__delete:hover { color: var(--critical); border-color: var(--critical); }
.pcard.is-removing { opacity: 0; transition: opacity .2s; }
.pcard__link { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--border); border-radius: var(--radius-m); overflow: hidden; background: var(--surface); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.pcard__link:hover { border-color: var(--accent); transform: translateY(-1px); }
.pcard__thumb { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--bg); overflow: hidden; }
.pcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--border-strong); }
.pcard__type { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(4px); }
.pcard__status { position: absolute; right: 8px; top: 8px; }
.pcard__body { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); flex: 1; }
.pcard__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pcard__meta { font-size: 12.5px; color: var(--muted); }
.pcard__foot { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); padding-right: 36px; font-size: 12px; color: var(--muted); }
/* 프로젝트 카드: 작게 — 기본(데스크톱) 6열 */
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); } }
.pcard__body { padding: var(--space-2) 10px; }
.pcard__title { font-size: 13px; line-height: 1.35; }
.pcard__meta { font-size: 11.5px; }
.pcard__foot { font-size: 11px; padding-right: 30px; }
.pcard__delete { width: 26px; height: 26px; right: 6px; bottom: 6px; }
.pcard__delete .icon { width: 14px; height: 14px; }
.pcard__type, .pcard__status { font-size: 11px; }
.pcard__placeholder { font-size: 22px; }

/* 제작 유형 탭: 영상 / 이미지 — 크게, 아이콘 포함 */
.seg--lg .seg__item span { min-height: 44px; padding: 0 var(--space-5); gap: 8px; font-size: 16px; font-weight: 600; }
.seg--lg .seg__item .icon { width: 20px; height: 20px; }
.seg--lg .seg__item input:checked + span .icon { color: var(--accent); }

/* 카드뉴스 스크립트 검수 (승인 단계) */
.script { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.script__card { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); }
.script__head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); }
.script__head strong { color: var(--ink); }
.script__card label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.script__card .field__input { font-size: 14px; }
.script__card textarea.field__input { min-height: 96px; resize: vertical; line-height: 1.5; }
.script__title { font-weight: 600; }
.script__hint { font-size: 12px; color: var(--muted); margin: 0 0 var(--space-2); }
@media (min-width: 1024px) {
  .script { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 카드뉴스 라이트/다크 모드 칩 */
.chip__mode { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-strong); margin-right: 6px; }
.chip__mode--light { background: linear-gradient(135deg, #fff 0 50%, #e9e9e9 50%); }
.chip__mode--dark { background: linear-gradient(135deg, #1a1a1a 0 50%, #444 50%); }

/* 결과물 뷰어 (라이트박스) */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: 56px 1fr 56px; grid-template-rows: 1fr auto; background: rgba(8, 8, 10, .92); }
.lightbox__stage { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-4) 0; min-height: 0; }
.lightbox__stage img, .lightbox__stage video { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.lightbox__nav { grid-row: 1; align-self: center; width: 44px; height: 64px; margin: 0 6px; border: 0; border-radius: var(--radius-s); background: rgba(255,255,255,.08); color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
.lightbox__nav:hover { background: rgba(255,255,255,.18); }
.lightbox__nav--prev { grid-column: 1; } .lightbox__nav--next { grid-column: 3; }
.lightbox__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.lightbox__close .icon { width: 20px; height: 20px; }
.lightbox__foot { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4) 16px; color: #ddd; font-size: 13px; }
.lightbox__counter { font-weight: 600; color: #fff; }
.lightbox__caption { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox__dl { color: #fff; border-color: rgba(255,255,255,.3); }
body.is-lightbox { overflow: hidden; }
@media (max-width: 640px) { .lightbox { grid-template-columns: 40px 1fr 40px; } .lightbox__nav { width: 32px; font-size: 30px; } }

/* 영상 구분(장르) 카드: 5열 */
.mode-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mode-card--sm { grid-template-columns: 1fr; row-gap: 3px; padding: var(--space-3); }
.mode-card--sm .mode-card__icon { grid-row: auto; width: 30px; height: 30px; margin-bottom: 4px; }
.mode-card--sm .mode-card__icon .icon { width: 16px; height: 16px; }
.mode-card--sm .mode-card__title { font-size: 14px; }
.mode-card--sm .mode-card__desc { font-size: 11.5px; }
@media (min-width: 768px) { .mode-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* 영상 스타일 칩: 색 점으로 계열 표시 */
.chip__dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; background: #999; }
.chip__dot--live_action { background: linear-gradient(135deg, #8bc34a, #2e7d32); }
.chip__dot--cinematic { background: linear-gradient(135deg, #607d8b, #1c2833); }
.chip__dot--anim_2d { background: linear-gradient(135deg, #ffca28, #ff7043); }
.chip__dot--anim_3d { background: linear-gradient(135deg, #64b5f6, #1e88e5); }
.chip__dot--disney { background: linear-gradient(135deg, #f8bbd0, #7e57c2); }
.chip__dot--anime { background: linear-gradient(135deg, #80deea, #ec407a); }
.chip__dot--cyberpunk { background: linear-gradient(135deg, #00e5ff, #d500f9); }
.chip__dot--watercolor { background: linear-gradient(135deg, #b3e5fc, #ffe0b2); }
.chip__dot--pixel { background: repeating-linear-gradient(45deg, #43a047 0 3px, #e53935 3px 6px); }
.chip__dot--claymation { background: linear-gradient(135deg, #ffab91, #8d6e63); }
.chip__dot--flat { background: linear-gradient(135deg, #ff5252, #448aff); }
.chip__dot--paper_collage { background: linear-gradient(135deg, #f1e9d6 0 45%, #e4432b 45% 75%, #1a1a1a 75%); }

/* 영상 스타일 카드: 샘플 이미지(300×120) + 이름 */
.style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.style-card { position: relative; display: block; border: 2px solid var(--border-strong); border-radius: var(--radius-s); overflow: hidden; background: var(--surface); cursor: pointer; transition: border-color .15s, transform .15s; }
.style-card input { position: absolute; opacity: 0; inset: 0; }
.style-card:hover { border-color: var(--muted); }
.style-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.style-card__img { display: block; width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
.style-card__name { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 13px; font-weight: 600; }
.style-card:has(input:checked) .style-card__name { color: var(--accent); }
@media (min-width: 640px) { .style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .style-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .style-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* UX v2: 게스트 히어로 밴드 · 라이브러리 요약 */
.hero-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-m); background: linear-gradient(120deg, var(--accent-soft), var(--surface)); border: 1px solid var(--border); }
.hero-band__text { display: grid; gap: 4px; }
.hero-band__text strong { font-size: 17px; letter-spacing: -0.02em; }
.hero-band__text span { font-size: 13.5px; color: var(--muted); }
.hero-band__actions { display: flex; gap: var(--space-2); }
.page-head__actions { display: flex; gap: var(--space-2); }
.stat--link { text-decoration: none; color: inherit; }
.stat--link:hover { border-color: var(--accent); }
@media (min-width: 768px) { .stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 공유 토글 (완료 패널) */
.share-box { display: grid; gap: 6px; margin: var(--space-3) 0; padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-s); }
.share-box__hint { font-size: 12px; color: var(--muted); }
.share-box__link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13px; }
.share-box__link a { word-break: break-all; }