/*
 * ARIFE unified design system v500
 * Loaded after legacy page styles. This layer intentionally keeps existing
 * classes and data attributes intact while normalising the visible UI.
 */

:root{
  color-scheme:dark;

  /* Core colour tokens */
  --a-bg:#060b12;
  --a-bg-soft:#09111c;
  --a-surface-1:#0d1622;
  --a-surface-2:#111c2a;
  --a-surface-3:#172437;
  --a-surface-glass:rgba(13,22,34,.88);
  --a-line:rgba(142,173,212,.18);
  --a-line-strong:rgba(145,183,230,.34);
  --a-text:#f3f7fb;
  --a-text-soft:#c7d1dc;
  --a-muted:#8495a8;
  --a-muted-strong:#a5b3c2;
  --a-accent:#78a9ff;
  --a-accent-strong:#8878f2;
  --a-accent-soft:rgba(120,169,255,.13);
  --a-cyan:#6ed9ef;
  --a-lime:#4fd3ea;
  --a-success:#63d4a5;
  --a-warning:#f2b86e;
  --a-danger:#f07f94;
  --a-danger-soft:rgba(240,127,148,.12);

  /* Typography */
  --a-font-sans:"Pretendard Variable","Pretendard","Noto Sans KR","Apple SD Gothic Neo","Segoe UI",sans-serif;
  --a-font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --a-font-xs:12px;
  --a-font-sm:13px;
  --a-font-md:14px;
  --a-font-lg:16px;
  --a-leading-tight:1.25;
  --a-leading-body:1.6;

  /* Spacing */
  --a-space-1:4px;
  --a-space-2:8px;
  --a-space-3:12px;
  --a-space-4:16px;
  --a-space-5:20px;
  --a-space-6:24px;
  --a-space-8:32px;

  /* Shape */
  --a-radius-xs:8px;
  --a-radius-sm:10px;
  --a-radius-md:14px;
  --a-radius-lg:18px;
  --a-radius-xl:24px;
  --a-radius-pill:999px;
  --a-control-sm:32px;
  --a-control-md:40px;
  --a-control-lg:48px;

  /* Elevation and motion */
  --a-shadow-sm:0 8px 20px rgba(0,0,0,.18);
  --a-shadow-md:0 18px 44px rgba(0,0,0,.28);
  --a-shadow-lg:0 28px 80px rgba(0,0,0,.42);
  --a-focus:0 0 0 3px rgba(110,217,239,.22);
  --a-ease:cubic-bezier(.2,.75,.2,1);

  /* Backwards-compatible aliases */
  --bg:var(--a-bg);
  --panel:var(--a-surface-1);
  --panel2:var(--a-surface-2);
  --line:var(--a-line);
  --text:var(--a-text);
  --muted:var(--a-muted);
  --lime:var(--a-lime);
  --violet:var(--a-accent-strong);
  --blue:var(--a-cyan);
  --radius:var(--a-radius-lg);
  --shadow:var(--a-shadow-lg);
  --arife-accent:var(--a-accent);
  --arife-line:var(--a-line);
  --arife-surface:var(--a-surface-1);
  --arife-bg-soft:var(--a-bg-soft);
  --arife-surface-deep:var(--a-bg);
  --account-lime:var(--a-accent);
  --account-line:var(--a-line);
  --access-blue:var(--a-accent);
  --access-line:var(--a-line);
  --ad-blue:var(--a-accent);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--a-bg);font-family:var(--a-font-sans);scrollbar-color:#344a66 var(--a-bg)}
body{
  min-width:0;
  background:
    radial-gradient(circle at 12% -10%,rgba(68,131,205,.08),transparent 30rem),
    radial-gradient(circle at 92% 8%,rgba(112,83,212,.07),transparent 28rem),
    var(--a-bg);
  color:var(--a-text);
  font-family:var(--a-font-sans);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body:not(.landing-page){font-size:var(--a-font-md);line-height:var(--a-leading-body)}
img,video,canvas{max-width:100%}
button,input,select,textarea{font-family:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
a{color:inherit}
::selection{background:rgba(120,169,255,.3);color:#fff}

/* Navigation */
.site-nav{
  min-height:70px;
  gap:var(--a-space-4);
  padding-inline:clamp(14px,2.2vw,34px);
  border-bottom-color:var(--a-line)!important;
  background:rgba(6,11,18,.88)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
  backdrop-filter:blur(18px) saturate(125%)!important;
}
.site-nav .brand{flex:0 0 auto}
.site-nav .company-logo{width:104px;height:auto}
.site-nav .nav-links{
  min-width:0;
  gap:var(--a-space-1);
  overflow-x:auto;
  scrollbar-width:none;
}
.site-nav .nav-links::-webkit-scrollbar{display:none}
.site-nav .nav-links a{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:var(--a-radius-sm);
  color:var(--a-muted-strong);
  font-size:var(--a-font-xs)!important;
  font-weight:750;
  line-height:1.2;
  text-decoration:none;
  transition:border-color .18s var(--a-ease),background-color .18s var(--a-ease),color .18s var(--a-ease);
}
.site-nav .nav-links a:hover{
  border-color:var(--a-line);
  background:rgba(255,255,255,.035);
  color:var(--a-text);
}
.site-nav .nav-links a.active,
.site-nav .nav-links a[aria-current="page"]{
  border-color:rgba(120,169,255,.28);
  background:var(--a-accent-soft);
  color:#e8f1ff;
}
.site-nav .nav-actions{flex:0 0 auto;gap:var(--a-space-2)}

/* Shared controls — 걷어냄 (2026-07-30)
   input·select·textarea 를 요소 이름으로 전역 통일하려 했으나 실패했다.
   이 사이트의 select 는 '보이지 않는 겹침 요소'다. 화면의 1080p·OFF 박스는
   .arife-output-control 이고 select 는 그 아래 높이 2px 클릭 영역이다.
   전역에서 테두리·배경·여백을 주면 숨은 요소가 드러나 폭이 46px→26px 로
   무너진다. 오늘 슬라이더 게이지가 사라진 것도 같은 원인이었다.

   입력칸은 화면 단위로 맞춘다. 필요하면 .a-field 를 붙여 쓴다. */
body .a-field{
  max-width:100%;
  min-height:var(--a-control-md)!important;
  height:auto!important;
  padding:9px 12px!important;
  border:1px solid var(--a-line)!important;
  border-radius:var(--a-radius-sm)!important;
  background:var(--a-bg-soft)!important;
  color:var(--a-text)!important;
  font-size:var(--a-font-sm)!important;
  line-height:1.45!important;
}
body :is(input,select,textarea):focus-visible{
  outline:2px solid var(--a-cyan);
  outline-offset:1px;
}

/* Button foundation and legacy class bridge */
body :is(
  .a-btn,.button,.btn,.nav-pill,.ad-btn,.auth-submit,.buyer-button-v304,
  .enterprise-button,.enterprise-button-v305,.enterprise-new-brief-v305,
  .film-add-selected,.film-assist-run,.film-generate-submit,.film-layer-add,
  .film-modal-submit,.film-new-project,.film-render-button,.film-render-cancel,
  .film-render-download,.flow-submit,.gti-generate,.gti-secondary,
  .image-add-button,.image-generate-button,.image-model-trigger,.image-result-upload,
  .landing-market-button-v302,.ma-new-canvas,.ma-save,.market-hero-action,
  .motion-generate,.motion-model-option,.motion-model-popup-trigger,
  .motion-new-project,.motion-stock-video-open,.pa-ghost,.pa-primary,
  .pay-back,.pay-btn,.policy-link-v302,.pp-back,.pp-save,.pricing-card-cta,
  .prompt-editor-open,.publish-button-v307,.render-button-v302,
  .studio-button-v306,.studio-cinema-link-v306,.unified-generate-button,
  .unified-generate-v216,.unified-model-trigger,.unified-result-delete
){
  position:relative;
  width:auto;
  max-width:100%;
  min-height:var(--a-control-md)!important;
  height:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  padding:9px 14px!important;
  overflow:visible!important;
  border:1px solid var(--a-line-strong)!important;
  border-radius:var(--a-radius-sm)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),var(--a-surface-2)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.06),var(--a-shadow-sm)!important;
  color:var(--a-text-soft)!important;
  font-size:var(--a-font-xs)!important;
  font-weight:800!important;
  line-height:1.3!important;
  text-align:center;
  text-decoration:none!important;
  white-space:normal!important;
  cursor:pointer;
  transition:transform .16s var(--a-ease),border-color .16s var(--a-ease),background-color .16s var(--a-ease),color .16s var(--a-ease),box-shadow .16s var(--a-ease)!important;
}
body :is(
  .a-btn,.button,.btn,.nav-pill,.ad-btn,.auth-submit,.buyer-button-v304,
  .enterprise-button,.enterprise-button-v305,.enterprise-new-brief-v305,
  .film-add-selected,.film-assist-run,.film-generate-submit,.film-layer-add,
  .film-modal-submit,.film-new-project,.film-render-button,.film-render-cancel,
  .film-render-download,.flow-submit,.gti-generate,.gti-secondary,
  .image-add-button,.image-generate-button,.image-model-trigger,.image-result-upload,
  .landing-market-button-v302,.ma-new-canvas,.ma-save,.market-hero-action,
  .motion-generate,.motion-model-option,.motion-model-popup-trigger,
  .motion-new-project,.motion-stock-video-open,.pa-ghost,.pa-primary,
  .pay-back,.pay-btn,.policy-link-v302,.pp-back,.pp-save,.pricing-card-cta,
  .prompt-editor-open,.publish-button-v307,.render-button-v302,
  .studio-button-v306,.studio-cinema-link-v306,.unified-generate-button,
  .unified-generate-v216,.unified-model-trigger,.unified-result-delete
):hover:not(:disabled):not([aria-disabled="true"]){
  border-color:rgba(142,191,245,.56)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02)),var(--a-surface-3)!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 10px 24px rgba(0,0,0,.25)!important;
}
body :is(
  .a-btn,.button,.btn,.nav-pill,.ad-btn,.auth-submit,.buyer-button-v304,
  .enterprise-button,.enterprise-button-v305,.enterprise-new-brief-v305,
  .film-add-selected,.film-assist-run,.film-generate-submit,.film-layer-add,
  .film-modal-submit,.film-new-project,.film-render-button,.flow-submit,
  .gti-generate,.image-add-button,.image-generate-button,.image-model-trigger,
  .landing-market-button-v302,.ma-new-canvas,.ma-save,.market-hero-action,
  .motion-generate,.motion-model-option,.motion-model-popup-trigger,
  .motion-new-project,.motion-stock-video-open,.pa-primary,.pay-btn,
  .policy-link-v302,.pp-save,.pricing-card-cta,.prompt-editor-open,
  .publish-button-v307,.render-button-v302,.studio-button-v306,
  .studio-cinema-link-v306,.unified-generate-button,.unified-generate-v216,
  .unified-model-trigger
):active:not(:disabled){transform:translateY(0)!important;box-shadow:inset 0 2px 5px rgba(0,0,0,.22)!important}

/* Primary */
body :is(
  .a-btn-primary,.button.primary,.btn.primary,.nav-pill.primary,
  button.primary,a.primary,.is-primary,.ad-btn,.auth-submit,
  .contract-submit,.depth-run,.enterprise-button.is-primary,
  .film-assist-run,.film-generate-submit,.film-modal-submit,.film-render-button,
  .flow-submit,.gti-generate,.image-generate-button,.landing-market-button-v302,
  .market-hero-action.primary,.motion-generate,.pa-primary,.pay-btn.primary,
  .pricing-card-cta,.publish-button-v307,.render-button-v302,
  .studio-button-v306.is-primary,.unified-generate-button,.unified-generate-v216
){
  border-color:rgba(162,190,255,.76)!important;
  background:
    radial-gradient(circle at 20% 0,rgba(255,255,255,.3),transparent 38%),
    linear-gradient(135deg,#3d78e4 0%,#2a63cc 54%,#1c56be 100%)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.28),0 10px 24px rgba(61,83,190,.24)!important;
  color:#fff!important;
}
body :is(
  .a-btn-primary,.button.primary,.btn.primary,.nav-pill.primary,
  button.primary,a.primary,.is-primary,.ad-btn,.auth-submit,
  .contract-submit,.depth-run,.enterprise-button.is-primary,
  .film-assist-run,.film-generate-submit,.film-modal-submit,.film-render-button,
  .flow-submit,.gti-generate,.image-generate-button,.landing-market-button-v302,
  .market-hero-action.primary,.motion-generate,.pa-primary,.pay-btn.primary,
  .pricing-card-cta,.publish-button-v307,.render-button-v302,
  .studio-button-v306.is-primary,.unified-generate-button,.unified-generate-v216
):hover:not(:disabled){
  border-color:#bdd9ff!important;
  background:linear-gradient(135deg,#4e8bec 0%,#3872d8 52%,#2560c7 100%)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 14px 30px rgba(66,91,209,.32)!important;
}

/* Ghost */
body :is(.a-btn-ghost,.ghost,.pa-ghost,.pay-back,.pp-back,.film-render-cancel,.gti-secondary){
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--a-muted-strong)!important;
}
body :is(.a-btn-ghost,.ghost,.pa-ghost,.pay-back,.pp-back,.film-render-cancel,.gti-secondary):hover:not(:disabled){
  border-color:var(--a-line)!important;
  background:rgba(255,255,255,.035)!important;
}

/* Danger */
body :is(
  .a-btn-danger,.danger,button.danger,.button.danger,.btn.danger,
  .account-cancel-btn,.unified-result-delete,.lb-del,.account-library-delete,
  .film-layer-delete,[data-lb-del-picked],[data-lb-del-all]
){
  border-color:rgba(240,127,148,.42)!important;
  background:var(--a-danger-soft)!important;
  box-shadow:none!important;
  color:#ffadbb!important;
}
body :is(
  .a-btn-danger,.danger,button.danger,.button.danger,.btn.danger,
  .account-cancel-btn,.unified-result-delete,.lb-del,.account-library-delete,
  .film-layer-delete,[data-lb-del-picked],[data-lb-del-all]
):hover:not(:disabled){
  border-color:rgba(255,139,158,.72)!important;
  background:rgba(240,127,148,.2)!important;
  color:#ffd3da!important;
}

/* Sizes */
body :is(
  .a-btn-sm,.film-modal-close,.auth-close,.market-preview-close,
  .motion-modal-close,.unified-modal-close-v216,.launch-close-v302,
  .studio-workflow-close-v306,.publish-guide-close-v307,
  .buyer-guide-close-v304,.enterprise-brief-close-v305,
  .lb-del,.lb-use,.account-library-delete
){
  min-height:var(--a-control-sm)!important;
  padding:6px 10px!important;
}
body :is(
  .a-btn-lg,.depth-run,.film-generate-submit,.film-render-button,
  .image-generate-button,.motion-generate,.pricing-card-cta,
  .publish-button-v307,.render-button-v302,.unified-generate-button,
  .unified-generate-v216
){
  min-height:var(--a-control-lg)!important;
  padding:11px 18px!important;
  border-radius:var(--a-radius-md)!important;
  font-size:var(--a-font-sm)!important;
}
body :is(button,a,[role="button"]):focus-visible{
  outline:2px solid var(--a-cyan)!important;
  outline-offset:2px!important;
}
body :is(button,.button,.btn,[role="button"]):disabled,
body :is(button,.button,.btn,[role="button"])[aria-disabled="true"]{
  opacity:.46!important;
  filter:saturate(.45);
  cursor:not-allowed!important;
  transform:none!important;
  box-shadow:none!important;
}
body :is(button,.button,.btn)[aria-busy="true"],
body :is(button,.button,.btn).is-loading{cursor:wait!important}
body :is(button,.button,.btn)[aria-busy="true"]::after,
body :is(button,.button,.btn).is-loading::after{
  width:14px;
  height:14px;
  flex:0 0 14px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  content:"";
  animation:a-spin .7s linear infinite;
}
@keyframes a-spin{to{transform:rotate(1turn)}}

/* Close controls stay square without affecting their click hooks */
body :is(
  .film-modal-close,.auth-close,.market-preview-close,.motion-modal-close,
  .unified-modal-close-v216,.launch-close-v302,.studio-workflow-close-v306,
  .publish-guide-close-v307,.buyer-guide-close-v304,.enterprise-brief-close-v305
){
  width:var(--a-control-md)!important;
  min-width:var(--a-control-md)!important;
  min-height:var(--a-control-md)!important;
  padding:0!important;
  border:1px solid var(--a-line-strong)!important;
  border-radius:var(--a-radius-sm)!important;
  background:var(--a-surface-2)!important;
  color:var(--a-text)!important;
}

/* Readability: retire the 7–9px Korean text used by legacy screens */
/* 7~9px 글자를 키우는 규칙은 화면 단위로 적용한다.
   전역으로 걸면 버튼 안 두 줄 표기처럼 좁은 자리가 터진다. */
body.a-ui :is(small,.kicker,.crumbs){
  font-size:var(--a-font-xs)!important;
  line-height:1.45!important;
}
body:not(.landing-page) :is(label,p,li,td,th){word-break:keep-all}
body.a-ui :is(.status,.badge,[class*="-badge"],[class*="-chip"]){
  height:auto!important;
  min-height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:4px 8px;
  border-radius:var(--a-radius-pill);
  line-height:1.25;
}

/* Common surfaces */
body.a-ui :is(.card,.panel,.price,.account-control-card,.commission-card){
  border-color:var(--a-line)!important;
  border-radius:var(--a-radius-lg)!important;
  background:
    radial-gradient(circle at 100% 0,rgba(94,129,198,.07),transparent 34%),
    linear-gradient(145deg,var(--a-surface-2),var(--a-bg-soft) 76%)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.055),var(--a-shadow-sm)!important;
}
body :is(.modal,.film-modal,.contract-modal,[class*="-modal"]){
  --modal-surface:var(--a-surface-1);
}
body :is(.film-modal-card,.contract-dialog,[class*="-dialog"]){
  border-color:var(--a-line-strong)!important;
  background:
    radial-gradient(circle at 90% 0,rgba(107,92,210,.11),transparent 32%),
    linear-gradient(150deg,var(--a-surface-2),var(--a-bg) 74%)!important;
  box-shadow:var(--a-shadow-lg)!important;
}

/* Toolbars and action rows must wrap instead of escaping their container */
body :is(
  [class*="toolbar"],[class*="-tool-bar"],[class*="-actions"],
  [class*="-buttons"],[class*="-controls"],[class*="-tabs"]
){
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
}
body :is(
  [class*="toolbar"],[class*="-tool-bar"],[class*="-actions"],
  [class*="-buttons"],[class*="-controls"],[class*="-tabs"]
) > *{min-width:0;max-width:100%}
body :is(.account-library-toolbar,.lb-toolbar,[class*="trash"][class*="toolbar"]){
  display:flex;
  align-items:center;
  flex-wrap:wrap!important;
  gap:var(--a-space-2)!important;
}

/* Cards and media previews */
body :is(
  .account-library-card,.library-card,.lb-card,[data-library-item],[data-trash-item]
){
  min-width:0!important;
  overflow:clip;
  border:1px solid var(--a-line)!important;
  border-radius:var(--a-radius-md)!important;
  background:linear-gradient(145deg,var(--a-surface-2),var(--a-bg-soft))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04),var(--a-shadow-sm)!important;
}
body :is(
  .account-library-preview,.library-preview,.lb-preview,
  [data-library-item] [class*="preview"],[data-trash-item] [class*="preview"]
){
  aspect-ratio:16/9!important;
  height:auto!important;
  overflow:hidden;
  border-radius:var(--a-radius-sm)!important;
  background:#03070c!important;
}
body :is(
  .account-library-preview,.library-preview,.lb-preview,
  [data-library-item] [class*="preview"],[data-trash-item] [class*="preview"]
) :is(img,video){
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#03070c;
}
.account-library-frame{
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
.account-library-grid{
  overflow:visible!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))!important;
}

/* Cost badges remain inside their action control */
body :is(button,.button,.btn):has(> .arife-cost-b),
body :is(button,.button,.btn):has(> [class*="cost-badge"]){
  min-height:var(--a-control-md)!important;
  height:auto!important;
  display:inline-flex!important;
  flex-wrap:wrap!important;
  align-content:center;
  gap:7px!important;
  padding-block:8px!important;
}
body :is(.arife-cost-b,[class*="cost-badge"]){
  position:static!important;
  flex:0 0 auto;
  margin:0!important;
  /* 버튼 기본값이 white-space:normal 이라, 이걸 물려받으면
     "160 크레딧" 이 세로로 쪼개진다. 배지만 예외로 둔다. */
  white-space:nowrap!important;
}
body :is(.arife-cost-b,[class*="cost-badge"]) i{white-space:nowrap!important}

/* Cinema / shot board: page grows with the shot count; media never crops */
body.shots-stage-v314,
body.stage-open-v323{overflow-x:hidden!important;overflow-y:auto!important}
.shots-shell-v314{
  width:min(1760px,calc(100% - 24px))!important;
  max-width:1760px!important;
  min-height:0!important;
  height:auto!important;
  overflow:clip!important;
  border-color:var(--a-line-strong)!important;
  border-radius:var(--a-radius-xl)!important;
  background:
    radial-gradient(circle at 88% -8%,rgba(120,90,222,.14),transparent 32%),
    radial-gradient(circle at 10% 0,rgba(78,162,218,.09),transparent 30%),
    var(--a-bg)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.07),var(--a-shadow-lg)!important;
}
.shots-head-v314{
  min-height:92px!important;
  padding:18px clamp(16px,2vw,28px)!important;
  border-bottom-color:var(--a-line)!important;
  background:rgba(11,18,29,.74)!important;
}
.shots-layout-v314{
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  align-items:stretch;
  grid-template-columns:minmax(190px,220px) minmax(0,1fr) minmax(290px,340px)!important;
}
.shots-layout-v314 > *{min-width:0!important;min-height:0!important}
.shots-canvas-v314{
  min-width:0!important;
  height:auto!important;
  overflow:visible!important;
  padding:clamp(12px,1.4vw,20px)!important;
}
.shots-grid-v314{
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))!important;
  gap:var(--a-space-4)!important;
  align-items:stretch;
  padding:2px 2px var(--a-space-6)!important;
}
.shot-card-v314{
  min-width:0!important;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:clip!important;
  border-color:var(--a-line)!important;
  border-radius:var(--a-radius-md)!important;
  background:
    radial-gradient(circle at 100% 0,rgba(95,142,210,.09),transparent 34%),
    linear-gradient(145deg,var(--a-surface-2),var(--a-bg-soft))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),var(--a-shadow-sm)!important;
}
.shot-card-v314:hover{
  border-color:rgba(124,180,235,.5)!important;
  transform:translateY(-2px)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 16px 34px rgba(0,0,0,.3)!important;
}
.shot-card-main-v314{display:flex!important;flex:1 1 auto;flex-direction:column}
.shot-preview-v314{
  width:100%;
  aspect-ratio:16/9!important;
  min-height:0!important;
  overflow:hidden!important;
  background:#03070c!important;
}
.shot-preview-v314 :is(img,video),
.shots-inspector-preview-v314 :is(img,video){
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#03070c;
}
.shot-card-v314:hover .shot-preview-v314 :is(img,video){
  transform:none!important;
  filter:none!important;
}
.shot-card-copy-v314{
  min-width:0!important;
  flex:1 1 auto;
  padding:var(--a-space-4)!important;
}
.shot-card-copy-v314 small,
.shot-card-copy-v314 strong,
.shot-card-copy-v314 em{font-size:var(--a-font-xs)!important}
.shot-card-copy-v314 strong{
  display:-webkit-box!important;
  margin-top:var(--a-space-2)!important;
  overflow:hidden;
  white-space:normal!important;
  line-height:1.4!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.shot-card-copy-v314 em{
  min-height:0!important;
  margin-top:var(--a-space-2)!important;
  line-height:1.5!important;
}
.shot-card-v314>footer{
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:var(--a-space-2)!important;
  margin-top:auto;
  padding:var(--a-space-2) var(--a-space-3)!important;
}
.shot-card-v314>footer nav{display:flex;flex-wrap:wrap;gap:var(--a-space-1)!important}
.shot-card-v314>footer nav button{
  min-height:var(--a-control-sm)!important;
  height:auto!important;
  padding:6px 9px!important;
  border-radius:var(--a-radius-xs)!important;
  font-size:var(--a-font-xs)!important;
}
.shots-inspector-v314,
.shots-side-v314{max-height:none!important;overflow:visible!important}
.shots-toolbar-v314{height:auto!important;min-height:48px;flex-wrap:wrap!important}
.shots-head-actions-v314{flex-wrap:wrap!important}
.shots-head-actions-v314 > button{height:auto!important;min-height:var(--a-control-md)!important}

@media(max-width:1320px){
  .shots-layout-v314{grid-template-columns:minmax(180px,210px) minmax(0,1fr)!important}
  .shots-side-v314{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:minmax(220px,.7fr) minmax(340px,1.4fr) minmax(220px,.8fr);
    gap:var(--a-space-3);
    border-top:1px solid var(--a-line);
    border-left:0!important;
  }
  .shots-inspector-v314{grid-column:2;grid-row:1/4}
  .shots-approval-v314{grid-column:3;grid-row:1/4}
}
@media(max-width:900px){
  .shots-shell-v314{width:calc(100% - 12px)!important;border-radius:var(--a-radius-lg)!important}
  .shots-layout-v314{display:block!important}
  .shots-outline-v314{border-right:0!important;border-bottom:1px solid var(--a-line)}
  .shots-outline-list-v314{display:flex;overflow-x:auto!important;overflow-y:hidden!important}
  .shot-outline-item-v314{flex:0 0 min(240px,78vw)}
  .shots-side-v314{display:block}
  .shots-inspector-v314{max-height:none!important}
}
@media(max-width:620px){
  .shots-head-v314{grid-template-columns:1fr!important}
  .shots-head-actions-v314{display:grid!important;grid-template-columns:1fr 1fr}
  .shots-save-state-v314,
  .shots-head-actions-v314>button.primary{grid-column:1/-1}
  .shots-grid-v314{grid-template-columns:1fr!important}
}

/* Responsive shared rules */
@media(max-width:1000px){
  .site-nav .nav-links{
    overflow:visible;
    border-bottom-color:var(--a-line)!important;
    background:rgba(6,11,18,.98)!important;
  }
  .site-nav .nav-links a{width:100%;justify-content:flex-start}
}
@media(max-width:680px){
  .site-nav{padding-inline:14px}
  body :is(
    .a-btn,.button,.btn,.nav-pill,.ad-btn,.auth-submit,.buyer-button-v304,
    .enterprise-button,.film-add-selected,.film-assist-run,.film-generate-submit,
    .film-modal-submit,.film-new-project,.film-render-button,.flow-submit,
    .image-add-button,.image-generate-button,.motion-generate,.pay-btn,
    .pricing-card-cta,.publish-button-v307,.unified-generate-button
  ){max-width:100%}
  .account-library-card{grid-template-columns:1fr!important}
  .account-library-preview{width:100%!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================================================
   v500 보강 — 2026-07-29 작업분
   v500 을 만든 시점에 없던 화면·클래스를 표준에 잇는다.
   (영상/이미지 보관함, 휴지통, 생성 버튼 크레딧 배지)
   ============================================================ */

/* 보관함·휴지통의 부차 동작 버튼 → secondary sm */
body :is(.lb-use,.account-trash-restore-one,[data-trash-restore],[data-trash-refresh],[data-library-refresh],[data-lb-tab],[data-library-filter]){
  min-height:var(--a-control-sm)!important;
  height:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:6px 11px!important;
  border:1px solid var(--a-line)!important;
  border-radius:var(--a-radius-sm)!important;
  background:var(--a-surface-2)!important;
  color:var(--a-text-soft)!important;
  font-size:var(--a-font-xs)!important;
  font-weight:800!important;
  line-height:1.3!important;
  white-space:nowrap!important;
  cursor:pointer;
}
body :is(.lb-use,.account-trash-restore-one,[data-trash-restore],[data-trash-refresh],[data-library-refresh]):hover:not(:disabled){
  border-color:var(--a-line-strong)!important;
  background:var(--a-surface-3)!important;
  color:#fff!important;
}

/* 분류 탭은 선택 상태가 분명해야 한다 */
body :is([data-lb-tab],[data-library-filter]).is-active,
body :is([data-lb-tab],[data-library-filter]).active{
  border-color:rgba(120,169,255,.42)!important;
  background:var(--a-accent-soft)!important;
  color:#e8f1ff!important;
}
body :is([data-lb-tab],[data-library-filter]) b{
  min-width:20px;
  height:20px;
  display:inline-grid;
  place-items:center;
  padding:0 5px;
  border-radius:var(--a-radius-pill);
  background:rgba(255,255,255,.07);
  color:var(--a-muted-strong);
  font:800 11px/1 var(--a-font-mono);
}
body :is([data-lb-tab],[data-library-filter]).is-active b,
body :is([data-lb-tab],[data-library-filter]).active b{
  background:var(--a-accent);
  color:#0b1220;
}

/* 파괴적 동작 → danger sm */
body :is(.lb-bulk button,[data-trash-purge],[data-trash-empty],[data-library-delete-picked],[data-library-delete-all]){
  min-height:var(--a-control-sm)!important;
  height:auto!important;
  padding:6px 11px!important;
  border:1px solid rgba(240,127,148,.42)!important;
  border-radius:var(--a-radius-sm)!important;
  background:var(--a-danger-soft)!important;
  box-shadow:none!important;
  color:#ffadbb!important;
  font-size:var(--a-font-xs)!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
body :is(.lb-bulk button,[data-trash-purge],[data-trash-empty],[data-library-delete-picked],[data-library-delete-all]):hover:not(:disabled){
  border-color:rgba(255,139,158,.72)!important;
  background:rgba(240,127,148,.2)!important;
  color:#ffd3da!important;
}
body :is(.lb-bulk button,[data-trash-purge],[data-trash-empty],[data-library-delete-picked],[data-library-delete-all]):disabled{
  opacity:.4!important;
  cursor:not-allowed!important;
}

/* 선택 개수·남은 일수 같은 보조 표시 */
body :is([data-lb-picked],[data-trash-picked],.account-library-picked,.account-trash-left){
  color:var(--a-muted-strong)!important;
  font:800 var(--a-font-xs)/1.3 var(--a-font-mono)!important;
}
body .account-trash-left.is-soon{color:#ffadbb!important}

/* 일괄 삭제 바 · 툴바는 줄바꿈 허용 */
body :is(.lb-bulk,.lb-tabs,.account-library-actions){
  min-width:0;
  max-width:100%;
  display:flex;
  align-items:center;
  flex-wrap:wrap!important;
  gap:var(--a-space-2)!important;
}

/* 선택 체크박스는 카드 위에 얹힌 작은 사각형이다 */
body :is(.lb-pick,.account-library-pick){
  position:absolute;
  right:10px;
  top:10px;
  z-index:3;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:1px solid var(--a-line-strong);
  border-radius:var(--a-radius-xs);
  background:rgba(6,11,18,.86);
  cursor:pointer;
}
body :is(.lb-pick,.account-library-pick) input{
  width:15px!important;
  height:15px!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  accent-color:var(--a-accent);
  cursor:pointer;
}

/* 이미지 보관함은 사진을 자르지 않는다 */
body :is(.lb-frame,.lb-card .lb-frame){
  aspect-ratio:16/9!important;
  height:auto!important;
  overflow:hidden;
  border-radius:var(--a-radius-sm)!important;
  background:#03070c!important;
}
body :is(.lb-frame) :is(img,video){
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#03070c;
}

/* 크레딧 배지 — 색은 남기고 규격만 표준에 맞춘다 */
body .arife-cost-b{
  min-height:24px;
  padding:4px 9px!important;
  border-radius:var(--a-radius-pill)!important;
  font:850 var(--a-font-xs)/1.25 var(--a-font-mono)!important;
}
body .arife-cost-line{font:850 var(--a-font-xs)/1.4 var(--a-font-mono)!important}

/* 휴지통 구역은 목록이 길어지면 페이지가 늘어난다 */
body .account-trash-frame{
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow:visible!important;
}

/* ============================================================
   v501 보정 — 2026-07-30
   ① 카드 삭제 버튼이 절대배치로 글자와 겹치거나, 다른 CSS가
      position:relative 로 덮으면 그리드 칸으로 들어가 130px 블록이 됐다.
      절대배치를 버리고 글 아래 자기 자리에 놓는다.
   ② 체크박스 자리를 카드 오른쪽 여백으로 확보한다.
   ============================================================ */
body .account-library-card{
  align-items:start!important;
  gap:var(--a-space-3)!important;
  padding:10px 44px 10px 10px!important;
}
body .account-library-copy{
  min-width:0!important;
  padding:2px 0 0!important;
}
body .account-library-delete{
  position:static!important;
  grid-column:2!important;
  justify-self:start!important;
  width:auto!important;
  margin-top:var(--a-space-1)!important;
}
body .lb-card .lb-act{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:var(--a-space-2)!important;
}
body .lb-card .lb-act > *{flex:0 1 auto!important;width:auto!important}

/* 버튼 안에서 여러 줄로 쌓이는 보조 표기는 가운데로 모은다 */
body .unified-generate-estimate{
  align-items:center!important;
  gap:2px!important;
  white-space:nowrap!important;
}
body .unified-generate-estimate small{font-size:11px!important;line-height:1.2!important}

/* ============================================================
   v502 보정 — 2026-07-30
   ① 크레딧 배지는 <b> 태그다. 화면마다 'b' 를 아이콘용으로 쓰는 규칙이 있어
      (예: .ma-page .ma-go b{width:33px;display:grid}) 배지가 33px 정사각형으로
      눌리고 "5 / 크레딧" 이 세로로 쪼개졌다.
      v500 이 마지막에 실리므로 여기서 못박아 되돌린다.
   ② 영화제작소 샷 카드가 아래쪽(해상도·오디오 줄)에서 잘렸다.
      카드를 내용 높이만큼 늘리고 잘라내기를 푼다.
   ============================================================ */
body .arife-cost-b{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:24px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  gap:5px!important;
  grid-template-columns:none!important;
  padding:4px 9px!important;
  border-radius:var(--a-radius-pill)!important;
  white-space:nowrap!important;
  font:850 var(--a-font-xs)/1.25 var(--a-font-mono)!important;
  letter-spacing:0!important;
}
body .arife-cost-b i{
  width:auto!important;
  height:auto!important;
  display:inline!important;
  font-style:normal!important;
  font-size:11px!important;
  white-space:nowrap!important;
  opacity:.72;
}

/* 샷 카드: 내용만큼 늘어나고 잘리지 않는다 */
body .shots-grid-v314{align-items:start!important}
body .shot-card-v314{
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
body .shot-card-main-v314{overflow:visible!important}
body .shot-card-v314 :is(.shot-card-copy-v314,.shot-card-fields-v314,[class*="-fields"],[class*="-settings"]){
  overflow:visible!important;
  min-height:0!important;
}
body .shot-card-v314 > footer{margin-top:var(--a-space-2)!important}

/* ============================================================
   v503 — 전면 점검 결과 반영 (2026-07-30)
   45개 페이지를 자동 계측해 잘림·작은 글자·낮은 버튼을 뽑아 고친다.
   ============================================================ */

/* ── ① AI 영상 생성 버튼이 내용을 자르던 문제 ──────────────────
   arife-unified-studio-v216.css 가 ID 선택자로 못박아 두어
   (#unified-generate-submit.unified-generate-v216{height:68px!important;
    overflow:hidden!important}) v500 의 body :is(...) 가 특이도에서 밀렸다.
   내용은 122px 가 필요한데 66px 만 주어져 크레딧 표기가 잘렸다.
   같은 특이도로 맞서고, 표기를 한 줄로 눕혀 높이 안에 들어오게 한다. */
body #unified-generate-submit.unified-generate-v216{
  height:auto!important;
  min-height:68px!important;
  max-height:none!important;
  overflow:visible!important;
}
body #unified-generate-submit .unified-generate-estimate{
  flex-direction:row!important;
  align-items:center!important;
  gap:6px!important;
  width:auto!important;
  white-space:nowrap!important;
}
body #unified-generate-submit .unified-generate-estimate small{
  font-size:11px!important;
  line-height:1.2!important;
}

/* ── ② 글자 최소 11px ──────────────────────────────────────
   계측 결과 6 · 7 · 8 · 8.5 · 9 · 10 · 10.5px 이 뒤섞여 있었다.
   한글은 10px 아래에서 읽기 어렵다. 다만 노드 편집기처럼 칸이 빽빽한
   화면은 글자를 키우면 패널이 넘치므로, a-ui 를 붙인 화면에만 적용한다. */
body.a-ui :is(p,li,td,th,label,small,em,b,strong,span,a,button,figcaption,dt,dd,summary,output,legend){
  font-size:max(11px,100%)!important;
}
/* 아이콘·기호는 글자가 아니다 — 크기를 건드리지 않는다 */
body.a-ui :is([class*="icon"],[class*="-mark"],[class*="arrow"],[class*="chev"],
  .lb-pick,.account-library-pick,[aria-hidden="true"]):is(span,b,i,em){font-size:inherit!important}
body.a-ui .arife-cost-b i{font-size:11px!important}

/* ── ③ 글자가 있는 버튼은 최소 32px ─────────────────────────
   22px·27px 버튼이 있어 손가락으로 누르기 어렵고 줄이 눌려 보였다. */
body.a-ui button:not([class*="close"]):not([class*="icon"]):not([aria-hidden="true"]){
  min-height:32px;
}

/* ── ④ 상단 메뉴 글자도 11px 로 ──────────────────────────── */
body .site-nav .nav-links a{font-size:11px!important}

/* ============================================================
   v504 — 재계측 후 남은 것 (2026-07-30)
   ============================================================ */

/* ① 상단 메뉴 글자가 10.5px 로 남아 있었다.
   arife-design-system-v300.css 가 'html body .site-nav .nav-links a' 로
   못박아 두어(특이도 0,3,3) v500 의 'body .site-nav ...'(0,3,2)가 밀렸다.
   같은 형태로 맞선다. */
html body .site-nav .nav-links a{font-size:11px!important}
html body:not(.landing-page) .nav-links > a{font-size:11px!important}

/* ② 카드 미리보기의 '크게 보기' 안내가 7px 이었다 */
html body .account-library-preview > i,
html body .lb-card [class*="hint"],
html body [class*="-preview"] > i{font-size:11px!important;line-height:1.3!important}

/* ③ 마이페이지 설정 카드가 내용을 56px 잘라내고 있었다.
   .card{overflow:hidden} 과 .account-control-card{overflow:hidden} 때문이다.
   장식(둥근 모서리 블롭)을 위한 잘라내기는 남기고, 높이만 내용에 맞춘다. */
body.a-ui .account-tools{align-items:start!important}
body.a-ui :is(.card,.account-control-card,.account-profile-card){
  height:auto!important;
  min-height:0!important;
  padding-bottom:var(--a-space-5)!important;
}
body.a-ui :is(.card,.account-control-card,.account-profile-card) > *:last-child{margin-bottom:0!important}

/* ============================================================
   v505 — 7개 화면 재계측 후 남은 5건 (2026-07-30)
   ============================================================ */

/* ① AI 영상: 생성 버튼 안 보조 글자 7px, 단계 번호 6px */
html body #unified-generate-submit :is(small,strong){font-size:12px!important;line-height:1.25!important}
html body.a-ui :is([class*="-step"],[class*="step-"]) :is(small,b,span){font-size:11px!important}
html body.a-ui :is(.unified-generate-copy,.unified-generate-estimate) *{font-size:11px!important}
html body #unified-generate-submit .unified-generate-copy strong{font-size:13px!important}

/* ② 미디어아트: 본문 감싸개가 내용을 228px 잘라내고 있었다.
   화면 전체를 감싸는 자리라 잘라낼 이유가 없다 — 페이지가 늘어나면 된다. */
html body .ma-wrap{overflow:visible!important;max-height:none!important}
html body.a-ui main{overflow:visible!important}
/* 비율 안내 문구 7px */
html body.a-ui [class*="ma-"] :is(small,em,span){font-size:11px!important}

/* ③ 홈: 첫 화면이 내용을 38px 잘라냈다 */
html body .landing-hero-v302{overflow:visible!important;max-height:none!important}

/* ============================================================
   v506 — 마지막 3건 (2026-07-30)
   ============================================================ */
/* ① 단계 번호가 <i> 6px 이었다. <i> 는 아이콘용으로 많이 쓰여 목록에서 빼뒀는데,
   글자가 들어 있는 <i> 는 읽어야 하는 글이다. 아이콘 표시가 붙은 것만 예외로 둔다. */
html body.a-ui i:not([class*="icon"]):not([aria-hidden="true"]):not(:empty){font-size:max(11px,100%)!important}
html body .studio-command-steps-v306 button > i{font-size:11px!important}

/* ② 생성 버튼 안 보조 글자를 확실히 못박는다 (여러 규칙이 겹쳐 있었다) */
html body #unified-generate-submit .unified-generate-copy small{font-size:12px!important}
html body #unified-generate-submit .unified-generate-copy strong{font-size:13px!important}

/* ③ 미디어아트 비율 안내 */
html body.a-ui :is([class*="ma-"],[class*="-ratio"]) :is(small,em,span,i,b){font-size:11px!important}

/* ============================================================
   v510 — 생성 버튼 정렬 · 샷 콘솔 재구성 · 페이지 전환 (2026-07-30)
   ============================================================ */

/* ── ① 생성 버튼: 크레딧 표시를 하나로 ─────────────────────────
   AI 영상 버튼에는 크레딧이 두 번 적혀 있었다.
   버튼 안 '차감 160 크레딧' 세로 묶음과, 뒤에 붙은 배지가 같은 값이다.
   같은 값을 두 번 보여줄 이유가 없고, 세로로 쌓이니 자리도 모자랐다.
   배지 하나만 남기고 옛 묶음은 감춘다. */
html body #unified-generate-submit:has(.arife-cost-b) .unified-generate-estimate{display:none!important}

/* 버튼 안 순서를 고정한다 — 글 · 크레딧 · 화살표 */
html body :is(.ma-go,.unified-generate-button,.motion-generate,.depth-run,.image-generate-button){
  justify-content:space-between!important;
  gap:10px!important;
}
html body :is(.ma-go,.unified-generate-button,.motion-generate,.depth-run,.image-generate-button) > .arife-cost-b{
  order:8!important;
  margin-left:auto!important;
}
/* 화살표·아이콘은 맨 끝 */
html body :is(.ma-go,.unified-generate-button) > b:not(.arife-cost-b),
html body :is(.ma-go,.unified-generate-button) > i:not(.arife-cost-b),
html body :is(.ma-go,.unified-generate-button) > span:last-child:not(:first-child){order:9!important;margin-left:0!important}
html body :is(.ma-go,.unified-generate-button) > :is(span,strong):first-child{order:1!important;margin-right:auto!important}

/* ── ② 샷 생성 콘솔 재구성 ────────────────────────────────────
   .generation-queue-v315 가 max-height:calc(100vh - 414px) + overflow:auto 라
   카드가 좁은 창 안에 갇혀 마지막 줄이 잘려 보였다. 카드 수에 따라
   페이지가 늘어나게 하고, 폭에 맞춰 열 수가 정해지게 한다. */
html body .generation-queue-v315{
  max-height:none!important;
  overflow:visible!important;
  grid-auto-rows:auto!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr))!important;
  gap:var(--a-space-3)!important;
  padding:var(--a-space-3)!important;
}
html body .generation-job-v315{
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
}
html body .generation-workspace-v315{max-height:none!important;overflow:visible!important}
html body .generation-job-v315 :is([class*="-controls"],[class*="-content"],[class*="-assets"]){
  min-width:0!important;
  overflow:visible!important;
}

/* ── ③ 페이지 진입을 부드럽게 ─────────────────────────────────
   지금은 화면이 한 번에 '팍' 나타난다. 본문 덩어리를 아주 짧게
   차례로 올려 자연스럽게 들어오게 한다. 움직임을 줄이는 설정을
   켠 사용자에게는 적용하지 않는다. */
@media (prefers-reduced-motion:no-preference){
  html.a-enter main > *,
  html.a-enter .arife-glass > *{
    animation:a-rise .46s var(--a-ease) both;
  }
  html.a-enter main > *:nth-child(1){animation-delay:.02s}
  html.a-enter main > *:nth-child(2){animation-delay:.07s}
  html.a-enter main > *:nth-child(3){animation-delay:.12s}
  html.a-enter main > *:nth-child(4){animation-delay:.16s}
  html.a-enter main > *:nth-child(n+5){animation-delay:.2s}
}
@keyframes a-rise{
  from{opacity:0;transform:translate3d(0,12px,0)}
  to{opacity:1;transform:none}
}
/* 전환 덮개가 걷힐 때도 조금 더 여유 있게 */
html body .page-transition{transition-duration:.52s!important;transition-timing-function:var(--a-ease)!important}

/* ============================================================
   v511 — 단위 표기를 태그가 아니라 CSS 로 붙인다 (2026-07-30)
   studio.html 에 <i>크레딧</i> 을 넣었더니 그 페이지가 i 를 아이콘으로
   스타일링해(34x34 원형) 글자가 뭉개졌다. mediaart 의 <b> 배지가 33px
   정사각형으로 눌린 것과 같은 종류의 사고다.
   태그를 새로 넣지 말고 ::after 로 붙이면 어떤 페이지 규칙과도 부딪히지 않는다.
   ============================================================ */
html body #unified-generate-cost::after,
html body #image-generate-cost::after{
  content:" 크레딧";
  font-size:11px;
  font-weight:800;
  opacity:.72;
  letter-spacing:0;
}
/* 표기를 한 줄로 눕힌다 (페이지 기본은 세로 쌓기라 자리가 모자랐다) */
html body #unified-generate-submit span.unified-generate-estimate{
  flex-direction:row!important;
  align-items:center!important;
  gap:6px!important;
  width:auto!important;
  height:auto!important;
  white-space:nowrap!important;
}
html body #unified-generate-submit span.unified-generate-estimate > small{
  font-size:11px!important;
  width:auto!important;
  height:auto!important;
}
html body #unified-generate-submit span.unified-generate-estimate > b{
  font-size:13px!important;
  width:auto!important;
  height:auto!important;
}

/* ============================================================
   v512 — '차감' 글자가 6.5px 로 남아 있었다 (2026-07-30)
   arife-unified-studio-v216.css 가 ID+클래스로 못박아 두어 밀렸다.
   같은 형태보다 한 단계 더 구체적으로 적어 맞선다.
   ============================================================ */
html body #unified-generate-submit.unified-generate-v216 span.unified-generate-estimate{
  flex-direction:row!important;
  align-items:baseline!important;
  gap:5px!important;
  width:auto!important;
}
html body #unified-generate-submit.unified-generate-v216 span.unified-generate-estimate small{
  font-size:11px!important;
  width:auto!important;
  height:auto!important;
  opacity:.7;
  letter-spacing:0!important;
}
html body #unified-generate-submit.unified-generate-v216 span.unified-generate-estimate b{
  font-size:14px!important;
  width:auto!important;
  height:auto!important;
}

/* ─────────────────────────────────────────────────────────────
   v513 · 자동 제작 버튼(#ad-start)의 크레딧 배지

   arife-auto-director-v332.css 의 `.auto-director-page #ad-start>b` 가
   버튼 안의 모든 b 를 44×44 화살표 타일로 만든다. 크레딧 배지도 b 라서
   같은 타일이 되어 숫자가 뭉개졌다. 화살표는 오른쪽 끝에 그대로 두고
   배지는 글자 옆에 알약으로 붙인다.
   ───────────────────────────────────────────────────────────── */
html body .auto-director-page #ad-start{
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:12px!important;
  height:auto!important;
  padding-right:9px!important;
}
html body .auto-director-page #ad-start>span{ flex:0 0 auto!important }
html body .auto-director-page #ad-start>b.ad-start-arrow{ flex:0 0 auto!important }
html body .auto-director-page #ad-start>b.arife-cost-b{
  display:inline-flex!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  flex:0 0 auto!important;
  align-items:center!important;
  gap:5px!important;
  margin-right:auto!important;
  padding:4px 11px!important;
  border:1px solid rgba(238,246,255,.46)!important;
  border-radius:var(--a-radius-pill)!important;
  background:rgba(9,22,54,.34)!important;
  box-shadow:none!important;
  color:#f2f8ff!important;
  font:850 12px/1.5 ui-monospace,Consolas,monospace!important;
  letter-spacing:-.01em!important;
  text-shadow:none!important;
  white-space:nowrap!important;
}
html body .auto-director-page #ad-start>b.arife-cost-b:empty{ display:none!important }
html body .auto-director-page #ad-start>b.arife-cost-b i{
  font-style:normal!important;
  font-size:12px!important;
  opacity:.74!important;
}
html body .auto-director-page #ad-start>b.arife-cost-b.is-short{
  border-color:rgba(255,196,206,.78)!important;
  background:rgba(84,14,28,.52)!important;
  color:#ffdbe2!important;
}
html body .auto-director-page #ad-start>b.arife-cost-b.is-wait{
  border-color:rgba(214,229,255,.34)!important;
  background:rgba(9,22,54,.28)!important;
  color:#dce9ff!important;
}

/* ═════════════════════════════════════════════════════════════
   v514 · AI 영상 생성 버튼을 통째로 다시 잡는다 (2026-07-30)

   이 버튼 하나에 v503·v505·v506·v510·v512 가 겹겹이 쌓이면서
   서로를 밀어냈다. 실측 결과 이렇게 보이고 있었다.

     [차감 160 크레딧]        [영상 생성 / 영상 생성]  [↗]
      ← 값이 왼쪽 끝            ← 같은 말이 두 번

   원인 둘.
   ① arife-unified-studio-v216.css 가 grid-template-columns
      minmax(0,1fr) auto 42px 로 3칸을 잡아 두었는데, 칸 크기가
      내용과 어긋나 값이 왼쪽 칸을 차지했다.
   ② HTML 에 <small>영상 생성</small><strong>영상 생성</strong> 로
      같은 말이 두 번 들어 있었다 (studio.html 에서 걷어냄).

   조각을 더 덧대지 않고, 이 버튼의 배치를 여기서 한 번에 정한다.
   읽는 순서는 사람이 결정하는 순서와 같게 둔다 —
   무엇을 하는지 → 얼마가 빠지는지 → 누르는 곳.

     [영상 생성]                 [차감 160 크레딧]  [↗]
   ═════════════════════════════════════════════════════════════ */
html body #unified-generate-submit.unified-generate-v216{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:12px!important;
  height:auto!important;
  min-height:68px!important;
  max-height:none!important;
  overflow:hidden!important;
  padding:12px 10px 12px 20px!important;
}

/* ① 무엇을 하는지 — 왼쪽 끝 */
html body #unified-generate-submit.unified-generate-v216>.unified-generate-copy{
  order:1!important;
  flex:0 1 auto!important;
  min-width:0!important;
  margin-right:auto!important;
  gap:0!important;
  justify-content:center!important;
}
html body #unified-generate-submit.unified-generate-v216>.unified-generate-copy strong{
  font-size:16px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
/* 중복 라벨이 남아 있는 화면이 있어도 두 번 보이지 않게 한다 */
html body #unified-generate-submit.unified-generate-v216>.unified-generate-copy small{
  display:none!important;
}

/* ② 얼마가 빠지는지 — 알약 하나로 묶어 오른쪽에 */
html body #unified-generate-submit.unified-generate-v216>.unified-generate-estimate{
  order:2!important;
  flex:0 0 auto!important;
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:baseline!important;
  justify-content:center!important;
  gap:5px!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:5px 12px!important;
  border:1px solid rgba(226,236,255,.4)!important;
  border-radius:var(--a-radius-pill)!important;
  background:rgba(12,24,58,.3)!important;
  white-space:nowrap!important;
}
html body #unified-generate-submit.unified-generate-v216>.unified-generate-estimate small{
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  opacity:.78!important;
}
html body #unified-generate-submit.unified-generate-v216>.unified-generate-estimate b{
  font-size:14px!important;
  font-weight:900!important;
  line-height:1.2!important;
  letter-spacing:-.01em!important;
}

/* ③ 누르는 곳 — 오른쪽 끝 42px 타일 그대로 */
html body #unified-generate-submit.unified-generate-v216>i{
  order:3!important;
  flex:0 0 42px!important;
}

/* ─────────────────────────────────────────────────────────────
   v515 · AI 이미지 생성 버튼

   이 버튼이 들어가는 칸은 132px 로 고정돼 있다
   (arife-unified-v400.css 의 .image-prompt-row 세 번째 칸).
   "생성" + 크레딧 알약 + 심볼을 한 줄에 넣으면 166px 이 필요해서
   심볼이 아래로 밀려 버튼이 84px 짜리 두 줄이 됐다.

   그래서 세로로 쌓는다. 심볼은 alt 가 빈 장식이라 이 폭에서는 접는다.
   크레딧이 1,080 처럼 커져도(90px) 칸 안에 들어온다.

        생성
     [ 3 크레딧 ]
   ───────────────────────────────────────────────────────────── */
html body #image-generate-submit.image-generate-button{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:5px!important;
  height:auto!important;
  min-height:66px!important;
  padding:8px 10px!important;
}
html body #image-generate-submit>span{
  font-size:14px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
/* 심볼은 장식이다 — 좁은 칸에서는 자리를 내준다 */
html body #image-generate-submit>i{ display:none!important }
html body #image-generate-submit>b#image-generate-cost{
  display:inline-flex!important;
  align-items:baseline!important;
  gap:4px!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  padding:3px 10px!important;
  border:1px solid rgba(20,32,4,.26)!important;
  border-radius:var(--a-radius-pill)!important;
  background:rgba(24,38,4,.14)!important;
  color:#14200a!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.25!important;
  white-space:nowrap!important;
}

/* ═════════════════════════════════════════════════════════════
   v517 · 영화제작소 제작 흐름 — 여백 회수와 스크롤 정리 (2026-07-30)

   실측으로 나온 것 (2133px 화면).
     · 기획 단계는 좌우 여백으로 373px 를 버리고 있었다
       (margin:14px 186px 0). 샷 구성은 215px.
     · 그래서 오른쪽 검사기가 244px 밖에 안 됐고
       'SHOT INSPECTOR · 01'(181px 필요)이 124px 로 잘렸다.
     · 한 화면에 스크롤이 셋이었다 — 가운데 보드 534px,
       검사기 351px 을 각자 숨겼다. 칸마다 따로 굴러가니 좁아 보인다.

   v516 은 .stage-open-v323 과 .arife-stage-height-v359 를 조건으로 걸었는데,
   기획·프로젝트 단계에는 그 두 표시가 붙지 않아 규칙이 통째로 헛돌았다.
   그래서 표시에 기대지 말고 이름 규칙으로만 건다.

     왼쪽  -templates- · -source(s)- · -outline- · -flow- · -rail-
     가운데 -canvas- · -workspace-
     오른쪽 -inspector- · -side- · -control-

   .film-page 를 세 번 적는 것은 오타가 아니다.
   arife-cinema-alignment-v333.css 가 클래스 4개짜리 !important 로
   못박아 두어서, 그보다 세지 않으면 밀린다.
   ═════════════════════════════════════════════════════════════ */

/* ① 칸 폭 — 검사기 244px → 344px (잘리던 글자가 181px 였다) */
html body.film-page{
  --cinema-rail-width:268px!important;
  --cinema-side-width:344px!important;
}

/* ② 버려지던 좌우 여백을 되찾는다 (기획 373px · 샷 구성 215px) */
html body.film-page.film-page.film-page [class*="-shell-v3"]{
  margin:14px 20px 28px!important;
  margin-left:20px!important;
  margin-right:20px!important;
  max-width:none!important;
  width:auto!important;
}

/* ③ 화면 높이에 억지로 우겨넣던 것을 푼다 */
html body.film-page.film-page.film-page [class*="-layout-v3"]{
  height:auto!important;
  max-height:none!important;
  align-items:start!important;
  gap:16px!important;
}

/* 가운데는 내용만큼 늘어나고 페이지가 스크롤한다 */
html body.film-page.film-page.film-page [class*="-layout-v3"] > [class*="-canvas-v3"],
html body.film-page.film-page.film-page [class*="-layout-v3"] > [class*="-workspace-v3"]{
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  overflow-y:visible!important;
  align-self:start!important;
}

/* 양옆은 따라다닌다 — 가운데를 내려도 목록과 검사기가 보인다.
   넘칠 때만 자기 스크롤을 쓴다. */
html body.film-page.film-page.film-page [class*="-layout-v3"] > [class*="-templates-v3"],
html body.film-page.film-page.film-page [class*="-layout-v3"] > [class*="-source"],
html body.film-page.film-page.film-page [class*="-layout-v3"] > [class*="-outline-v3"],
html body.film-page.film-page.film-page [class*="-layout-v3"] > [class*="-flow-v3"],
html body.film-page.film-page.film-page [class*="-layout-v3"] > [class*="-rail-v3"],
html body.film-page.film-page.film-page [class*="-layout-v3"] > [class*="-inspector-v3"],
html body.film-page.film-page.film-page [class*="-layout-v3"] > [class*="-side-v3"],
html body.film-page.film-page.film-page [class*="-layout-v3"] > [class*="-control-v3"]{
  height:auto!important;
  max-height:calc(100vh - 40px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  position:sticky!important;
  top:20px!important;
  align-self:start!important;
}