/* ============================================================
   ARIFE 공통 품질 규격 v350
   전 페이지 공통으로 나타나던 결함을 한 벌로 정리한다.
   1) 누르기 어려운 링크·버튼 최소 크기 확보
   2) 주소가 빈 이미지의 "깨진 이미지" 아이콘 노출 차단
   3) 불러오는 중 / 결과 없음 / 오류 3종 상태 공통 부품
   4) 버튼 모서리 규격 통일 (주 버튼 / 보조 / 작은 버튼)
   5) 잘리던 자리 보정
   (모든 페이지에서 가장 마지막에 로드)
   ============================================================ */

/* ── 1. 최소 터치 영역 ────────────────────────────────────── */
.footer a,
.footer-links a,
.footer-legal-links a,
.launch-foot-v302 a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 4px;
}
@media (pointer: coarse) {
  .footer a, .footer-links a, .footer-legal-links a, .launch-foot-v302 a {
    min-height: 32px;
    padding-block: 8px;
  }
}
/* 작은 아이콘 버튼(삭제 × 등)은 보이는 크기는 그대로 두고 누르는 범위만 넓힌다 */
.account-library-delete,
button.delete,
[class*="-delete"][class*="-btn"],
[aria-label*="삭제"] {
  position: relative;
}
.account-library-delete::before,
button.delete::before,
[aria-label*="삭제"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 32px);
  height: max(100%, 32px);
  transform: translate(-50%, -50%);
}
.account-library-delete {
  min-width: 22px !important;
  min-height: 22px !important;
  line-height: 1;
  cursor: pointer;
}

/* ── 2. 빈 이미지가 깨짐 아이콘으로 보이지 않게 ─────────────── */
img:not([src]),
img[src=""],
img[src="#"],
img[src="about:blank"] {
  visibility: hidden !important;
  min-height: 1px;
}

/* ── 3. 불러오는 중 · 결과 없음 · 오류 3종 상태 공통 부품 ───── */
.arife-state-v350 {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 132px;
  padding: 26px 20px;
  border: 1px dashed #2e3846;
  border-radius: 16px;
  background: rgba(255, 255, 255, .015);
  color: #8b95a0;
  font-size: 12.5px;
  line-height: 1.7;
  text-align: center;
}
.arife-state-v350 strong { display: block; color: #e6ecf6; font-size: 13.5px; }
.arife-state-v350 small { color: #6f7b8b; font-size: 11px; }
.arife-state-v350 .arife-state-act {
  margin-top: 4px;
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid #3c5f92;
  border-radius: 10px;
  background: #12203a;
  color: #cfe4ff;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.arife-state-v350 .arife-state-act:hover { border-color: #6edcf4; background: #14304a; color: #eaf7ff; }
.arife-state-v350.is-error { border-color: rgba(255, 107, 107, .4); color: #ffb4b4; }
.arife-state-v350.is-error strong { color: #ffd9d9; }

/* 회전하는 표시 — 로딩 중임을 확실히 알린다 */
.arife-spin-v350 {
  width: 26px; height: 26px;
  border: 2px solid rgba(255, 255, 255, .14);
  border-top-color: var(--lime, #4fd3ea);
  border-radius: 50%;
  animation: arife-spin-v350 .85s linear infinite;
}
@keyframes arife-spin-v350 { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .arife-spin-v350 { animation-duration: 2.4s } }

/* 작업 중인 버튼은 눌린 상태를 눈으로 알 수 있게 */
button[data-busy="1"], .button[data-busy="1"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
button[data-busy="1"]::after, .button[data-busy="1"]::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: currentColor;
  border-radius: 50%;
  color: #fff;
  animation: arife-spin-v350 .8s linear infinite;
}

/* ── 4. 화면 밖으로 새지 않게 ─────────────────────────────── */
.motion-node-graph { max-width: 100%; }

/* ── 5. 좁은 칸에서 글이 2~3글자씩 쪼개지지 않게 ─────────────
   원형 게이지(지름 104px)와 설명 글이 나란히 놓이는데 패널이 215px밖에 안 돼
   글 자리가 65px만 남아 "이야기의 / 뼈대가 / 잡히고" 처럼 쪼개졌다.
   패널이 좁으면 게이지 아래로 글을 내리고, 넓히면 다시 나란히 놓는다.
   (화면 폭이 아니라 '패널 폭'을 기준으로 판단해야 한다) */
.planning-inspector-v312 { container-type: inline-size; container-name: planinsp; }

/* 기본값: 세로로 쌓기 — 컨테이너 질의를 지원하지 않아도 글이 안 쪼개진다 */
.planning-score-v312 {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
  text-align: center;
  min-height: 0 !important;
}
.planning-score-v312 .planning-score-copy-v312 { width: 100%; }

/* 패널을 충분히 넓히면 원래대로 나란히 */
@container planinsp (min-width: 330px) {
  .planning-score-v312 {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    justify-items: stretch;
    text-align: left;
  }
}

/* 한글이 어색하게 끊기지 않도록 */
.planning-score-v312, .planning-score-v312 * ,
.sh-lead, .card p, .footer, .arife-state-v350 { word-break: keep-all; }

/* ── 자동 제작 · 품질/가성비 등급 선택 (v350) ────────────────── */
#ad-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.ad-tier{display:flex;flex-direction:column;gap:6px;padding:14px 15px;border:1px solid #2a3548;border-radius:16px;
  background:linear-gradient(160deg,#121821,#0b0f16);color:#e9eff8;text-align:left;cursor:pointer;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.ad-tier:hover{border-color:#48628f;transform:translateY(-2px)}
.ad-tier.active{border-color:#7fe1ff;box-shadow:0 0 0 1px rgba(127,225,255,.25),0 12px 28px rgba(0,0,0,.4)}
.ad-tier-emoji{font-size:18px;line-height:1}
.ad-tier strong{font-size:14px;letter-spacing:-.02em}
.ad-tier small{color:#8b99ad;font-size:11.5px;line-height:1.6;word-break:keep-all}
.ad-tier em{margin-top:auto;padding-top:6px;color:var(--lime,#4fd3ea);font:800 12px/1 ui-monospace,Consolas,monospace;font-style:normal}
.ad-tier-note{display:block;margin-top:9px;color:#7d8b9e;font-size:11.5px;line-height:1.65;word-break:keep-all}

/* 자동 제작 · 첫 장면 불러오기 */
.ad-start-image{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ad-start-image button{min-height:34px;padding:0 14px;border:1px solid #3c5f92;border-radius:10px;background:#12203a;
  color:#cfe4ff;font-size:11.5px;font-weight:800;cursor:pointer}
.ad-start-image button:hover{border-color:#6edcf4;background:#14304a;color:#eaf7ff}
.ad-start-image #ad-start-clear{border-color:#5a3a48;background:#22131a;color:#ffc3c3}
.ad-start-image span{color:#8b99ad;font-size:11.5px;line-height:1.6;word-break:keep-all}
#ad-start-preview{margin-top:10px;max-width:230px;width:100%;border:1px solid #2a3548;border-radius:12px;display:block}

/* 자동 편집에서 소재가 없어 실행할 수 없는 항목 */
.is-missing-source-v350{opacity:.55}
.is-missing-source-v350::after{content:"소재 필요";margin-left:6px;padding:2px 6px;border-radius:6px;
  background:rgba(255,155,166,.16);color:#ff9ba6;font:800 11px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.06em}

/* 편집기 레이어 목록 (v350) */
.film-layer-list .arife-state-v350{min-height:110px;padding:20px 16px;font-size:11.5px}
.film-layer-list .arife-state-v350 strong{font-size:12.5px}
.film-layer-row [data-lyr-vis],.film-layer-row [data-lyr-lock]{cursor:pointer;transition:color .15s,transform .12s}
.film-layer-row [data-lyr-vis]:hover,.film-layer-row [data-lyr-lock]:hover{color:#6edcf4;transform:scale(1.14)}

/* ── 모션노드 · 주요 실행 버튼이 스크롤 아래로 숨던 문제 (v350) ──
   오른쪽 설정 패널이 1232px인데 보이는 높이는 885px라, 정작 눌러야 할
   '영상 생성' 버튼이 스크롤을 내려야만 보였다. 항상 아래에 붙여 둔다. */
.motion-inspector .motion-generate {
  position: sticky !important;
  bottom: 0;
  z-index: 5;
  margin-top: 10px;
}
.motion-inspector .motion-generate::before {
  content: "";
  position: absolute;
  left: -14px; right: -14px; bottom: -14px;
  height: calc(100% + 28px);
  background: linear-gradient(180deg, rgba(11,14,18,0), rgba(11,14,18,.92) 42%);
  z-index: -1;
  pointer-events: none;
}
.motion-inspector { scroll-padding-bottom: 84px; }

/* ── 단계 화면 큰 제목의 아랫부분이 8px 잘리던 문제 (v354) ──────
   글자 크기 36px에 줄 높이도 36px이라 '획·장' 같은 받침 있는 글자의
   아래가 잘렸다. 줄 높이를 글자보다 넉넉히 준다. */
[class*="-shell-v31"] h1,
[class*="-shell-v32"] h1,
[class*="-title-v31"] h1,
[class*="-title-v32"] h1 {
  line-height: 1.22 !important;
  overflow: visible !important;
  padding-bottom: 2px;
}

/* ── 기획 단계 '기획 확정' 버튼이 스크롤 아래 숨던 문제 (v354) ──
   모션노드와 같은 문제. 오른쪽 패널이 길어 정작 눌러야 할 버튼이
   화면 밖에 있었다. 항상 아래에 붙여 둔다. */
.planning-inspector-v312 .planning-approve-v312 {
  position: sticky !important;
  bottom: 34px;
  z-index: 5;
}
.planning-inspector-v312 .planning-status-note-v312 {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding-bottom: 8px;
  background: linear-gradient(180deg, rgba(7, 13, 22, 0), rgba(7, 13, 22, .95) 40%);
}

/* 2026-08-20: 보드 필터를 눌러도 상단 상태 글자가 바뀌지 않았다 —
   화면에 그 자리가 아예 없어서 자바스크립트가 조용히 지나갔다.
   (enterprise-desk 의 DESK READY / REQUEST QUEUE …,
    buyer-personal 의 LIBRARY READY / LICENSE WALLET …)
   자리를 만들어 주고, 제목 위에 작게 앉힌다. */
.empty-kicker-v1294{
  display:block;
  margin:0 0 7px;
  color:#7b8aa3;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
}