/*
 * ARIFE unified product layer v400
 * One visual language for navigation, creation tools, cards, dialogs and jobs.
 */
:root{
  color-scheme:dark;
  --arife-bg:#060a11;
  --arife-bg-soft:#0a101a;
  --arife-surface:#0d1521;
  --arife-surface-2:#111c2b;
  --arife-surface-3:#172338;
  --arife-line:#263a56;
  --arife-line-strong:#3c5a82;
  --arife-text:#f4f7fc;
  --arife-text-soft:#c4cfde;
  --arife-muted:#8190a5;
  --arife-blue:#78a9ff;
  --arife-cyan:#69e0f4;
  --arife-violet:#8d79f6;
  --arife-success:#71e6bd;
  --arife-warning:#ffc36d;
  --arife-danger:#ff91a9;
  --arife-radius-sm:10px;
  --arife-radius-md:14px;
  --arife-radius-lg:20px;
  --arife-radius-xl:26px;
  --arife-control:42px;
  --arife-nav-height:68px;
  --arife-shadow:0 22px 60px rgba(0,0,0,.34);
  --arife-shadow-deep:0 34px 110px rgba(0,0,0,.66);
}

*{box-sizing:border-box}
html{background:var(--arife-bg);scrollbar-color:#365071 #080d15}
body:not(.landing-page){
  min-width:0;
  background:
    radial-gradient(circle at 76% -12%,rgba(97,79,226,.12),transparent 30rem),
    radial-gradient(circle at 8% 18%,rgba(68,185,225,.07),transparent 26rem),
    var(--arife-bg);
  color:var(--arife-text);
}
body:not(.landing-page),
body:not(.landing-page) button,
body:not(.landing-page) input,
body:not(.landing-page) select,
body:not(.landing-page) textarea{font-family:Pretendard,"Noto Sans KR",Inter,Arial,sans-serif}
body:not(.landing-page) button,
body:not(.landing-page) a,
body:not(.landing-page) input,
body:not(.landing-page) select,
body:not(.landing-page) textarea{-webkit-tap-highlight-color:transparent}
body:not(.landing-page) :focus-visible{
  outline:2px solid var(--arife-blue)!important;
  outline-offset:3px!important;
}

/* Shared navigation */
body:not(.landing-page) .site-nav{
  min-height:var(--arife-nav-height)!important;
  height:var(--arife-nav-height)!important;
  padding:0 24px!important;
  border-bottom:1px solid rgba(70,101,145,.56)!important;
  background:
    radial-gradient(circle at 86% -60%,rgba(111,92,238,.18),transparent 34%),
    linear-gradient(180deg,rgba(9,15,25,.985),rgba(6,10,17,.985))!important;
  box-shadow:inset 0 -1px rgba(112,219,255,.04),0 12px 30px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(18px) saturate(1.08);
}
/* 로고는 상자 없이 로고만 보이게 둔다 (홈을 포함한 전 페이지) */
body .site-nav .brand,
body:not(.landing-page) .site-nav .brand{
  min-width:0;
  height:42px;
  padding:0 4px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
body:not(.landing-page) .site-nav .company-logo{max-width:72px!important;max-height:19px!important}
body:not(.landing-page) .nav-links{
  max-width:min(760px,calc(100vw - 410px));
  padding:4px!important;
  gap:3px!important;
  border:1px solid #263951!important;
  border-radius:14px!important;
  background:#090f19!important;
  box-shadow:inset 0 1px rgba(255,255,255,.045)!important;
}
body:not(.landing-page) .nav-links>a{
  min-height:34px!important;
  padding:0 13px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  color:#8090a8!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
  white-space:nowrap;
}
body:not(.landing-page) .nav-links>a:hover{
  border-color:#314866!important;
  background:#111b2a!important;
  color:#dbe6f5!important;
}
body:not(.landing-page) .nav-links>a.active,
body:not(.landing-page) .nav-links>a[aria-current="page"]{
  border-color:#5879be!important;
  background:
    radial-gradient(circle at 70% 0,rgba(105,221,244,.13),transparent 45%),
    linear-gradient(145deg,#213656,#18213d)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 3px 0 #091128,0 0 18px rgba(80,115,224,.14)!important;
  color:#fff!important;
}
body:not(.landing-page) .nav-actions{gap:8px!important}
body:not(.landing-page) .nav-pill{
  min-height:42px!important;
  padding:0 16px!important;
  border:1px solid #344860!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,#172231,#0c121c)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 4px 0 #03060b!important;
  color:#c9d4e2!important;
  font-size:12px!important;
  font-weight:850!important;
}
body:not(.landing-page) .nav-pill.primary{
  border-color:#8db6ff!important;
  background:
    radial-gradient(circle at 24% 4%,rgba(255,255,255,.38),transparent 27%),
    linear-gradient(135deg,#397fce,#5265d8 55%,#755dde)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.32),0 4px 0 #263b82,0 12px 26px rgba(48,82,190,.28)!important;
  color:#fff!important;
}

/* Connected production rail */
.production-grid-v309,
.project-flow-v311{
  top:var(--arife-nav-height)!important;
  min-height:76px!important;
  padding:8px 16px!important;
  gap:8px!important;
  border-bottom:1px solid #314863!important;
  background:
    radial-gradient(circle at 74% -24%,rgba(106,84,239,.18),transparent 36%),
    radial-gradient(circle at 12% 120%,rgba(62,195,231,.09),transparent 28%),
    linear-gradient(180deg,#0f1724,#080d16)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 12px 28px rgba(0,0,0,.32)!important;
}
.production-grid-v309{grid-template-columns:148px minmax(0,1fr) 152px!important}
.project-flow-v311{grid-template-columns:148px minmax(0,1fr) 126px!important}
.production-grid-brand-v309,
.project-flow-brand-v311{padding:0 11px!important}
.production-modules-v309{gap:7px!important}
.production-module-v309{
  min-height:58px!important;
  padding:8px 11px 8px 8px!important;
  grid-template-columns:28px minmax(0,1fr) 7px!important;
  border-radius:13px!important;
}
.production-module-v309>b{width:28px!important;height:28px!important;border-radius:9px!important}
.production-module-v309 small{font-size:10px!important}
.production-module-v309 strong{margin-top:4px!important;font-size:12px!important}
.production-module-v309 em{margin-top:4px!important;font-size:11px!important}
.production-map-open-v309{border-radius:13px!important}
.project-flow-steps-v311{gap:5px!important;padding-bottom:0!important}
.project-flow-step-v311{
  min-height:58px!important;
  padding:7px 8px!important;
  border-radius:11px!important;
}

/* Shared panels, cards and form controls */
body:not(.landing-page) :is(
  .sh-card,.image-composer,.gti-studio,.image-library-section,
  .depth-workspace-main,.depth-settings,.depth-results,.bg-studio,
  .motion-input-card,.motion-model-card,.motion-review-card,.motion-settings section,
  .film-control-section,.film-viewer-shell,
  .planning-card-v312,.assets-card-v313,.shots-card-v314,
  .generation-card-v315,.edit-card-v316,.audio-card-v317,.review-card-v318
){
  border-color:var(--arife-line)!important;
  background:
    radial-gradient(circle at var(--production-x,80%) var(--production-y,0%),rgba(95,190,255,.045),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.035),transparent 38%),
    var(--arife-surface)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.065),0 5px 0 rgba(2,5,10,.72),var(--arife-shadow)!important;
}
/* v452 — range 슬라이더를 이 규칙에서 뺀다.
   background 를 !important 로 덮어써서 채움 게이지(--fill 그라디언트)가
   사이트 전체에서 보이지 않았다. 모션 화면의 "게이지가 안 보인다"가 이것이다.
   슬라이더는 35개 자리에 있고 전부 같은 증상이었다. */
body:not(.landing-page) :is(input:not([type=range]),select,textarea){
  border-color:#2d4260!important;
  background:#09111c!important;
  color:var(--arife-text)!important;
}
body:not(.landing-page) input[type=range]{color:var(--arife-text)}
body:not(.landing-page) :is(input:not([type=range]),select,textarea):focus{
  border-color:#668bd0!important;
  box-shadow:0 0 0 3px rgba(92,132,224,.12)!important;
}
body:not(.landing-page) button:disabled{
  filter:none!important;
  opacity:.5!important;
  cursor:not-allowed!important;
}

/* Shared, opaque feedback surface. */
body:not(.landing-page) .toast{
  left:auto!important;
  right:clamp(12px,2vw,28px)!important;
  bottom:clamp(12px,2vw,28px)!important;
  width:min(460px,calc(100vw - 24px))!important;
  max-width:460px!important;
  padding:13px 16px!important;
  border:1px solid #4b668d!important;
  border-radius:14px!important;
  background:#0b1320!important;
  color:#dbe7f7!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 18px 48px rgba(0,0,0,.5)!important;
  font-size:11px!important;
  line-height:1.55!important;
  z-index:1300!important;
}

/* One dialog system. Opaque surfaces prevent the empty/transparent gaps. */
body:is(
  .image-studio-page,.motion-transfer-page,.depth-extractor-page,.film-page,
  .studio-page,.account-page,.market-page
) :is(
  .image-modal,.motion-modal,.motion-library-modal,.motion-model-modal,
  .stock-video-modal,.film-modal,.film-bridge-modal,.arife-plan-modal,
  .project-manager-v311,.generation-review-layer-v315,.production-flow-modal-v309
){
  padding:clamp(10px,2vw,24px)!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:1100!important;
}
body :is(
  .image-modal-backdrop,.motion-modal-backdrop,.motion-library-backdrop,
  .motion-model-backdrop,.stock-video-backdrop,.film-modal-backdrop,
  .film-bridge-backdrop,.arife-plan-backdrop,.production-flow-backdrop-v309,
  .generation-modal-backdrop-v315
){
  background:rgba(2,6,12,.9)!important;
  backdrop-filter:blur(18px) saturate(.82)!important;
}
body :is(
  .image-model-dialog,.image-library-dialog,.motion-modal-card,
  .motion-library-dialog,.motion-model-dialog,.stock-video-dialog,
  .film-modal-card,.film-bridge-dialog,.arife-plan-dialog,
  .project-manager-dialog-v311,.generation-review-dialog-v315,
  .production-flow-dialog-v309
){
  width:min(940px,calc(100vw - 28px))!important;
  max-width:940px!important;
  max-height:calc(100dvh - 28px)!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  border:1px solid #526f98!important;
  border-radius:var(--arife-radius-xl)!important;
  background:
    radial-gradient(circle at 88% -8%,rgba(105,81,235,.18),transparent 34%),
    linear-gradient(145deg,#152033,#080e18 72%)!important;
  background-color:#0b1320!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 0 #02050a,var(--arife-shadow-deep)!important;
}
body.production-suite-v309 :is(
  .image-model-dialog,.image-library-dialog,.motion-modal-card,
  .motion-library-dialog,.motion-model-dialog,.stock-video-dialog,
  .film-modal-card,.film-bridge-dialog
){
  background-color:#0b1320!important;
}
body :is(
  .image-model-dialog,.image-library-dialog,.motion-modal-card,
  .motion-library-dialog,.motion-model-dialog,.stock-video-dialog,
  .film-modal-card,.film-bridge-dialog,.arife-plan-dialog,
  .project-manager-dialog-v311,.generation-review-dialog-v315,
  .production-flow-dialog-v309
) > header{
  min-height:82px;
  padding:22px 24px!important;
  border-bottom:1px solid #2d4260!important;
  background:rgba(11,18,29,.86)!important;
}
body :is(
  .image-model-dialog,.image-library-dialog,.motion-modal-card,
  .motion-library-dialog,.motion-model-dialog,.stock-video-dialog,
  .film-modal-card,.film-bridge-dialog,.arife-plan-dialog,
  .project-manager-dialog-v311,.generation-review-dialog-v315,
  .production-flow-dialog-v309
) h2{
  color:var(--arife-text)!important;
  font-size:clamp(21px,2.2vw,28px)!important;
  letter-spacing:-.045em!important;
}
body :is(
  .image-model-dialog,.image-library-dialog,.motion-modal-card,
  .motion-library-dialog,.motion-model-dialog,.stock-video-dialog,
  .film-modal-card,.film-bridge-dialog,.arife-plan-dialog,
  .project-manager-dialog-v311,.generation-review-dialog-v315,
  .production-flow-dialog-v309
) p{color:var(--arife-muted)!important;line-height:1.65!important}
body :is(
  .image-model-dialog>header>button,.image-library-dialog>header>button,
  .motion-modal-close,.motion-library-close,.motion-model-close,
  .stock-video-close,.film-modal-close,.film-bridge-close,
  .production-flow-close-v309
){
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border:1px solid #587399!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,#273a55,#111a28)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 4px 0 #03070c!important;
  color:#eef5ff!important;
}
body.modal-open,
body.production-flow-open-v309{overflow:hidden!important}

/* Shared asynchronous job meter */
.arife-job-meter{
  width:100%;
  height:9px;
  margin:20px 0 10px;
  overflow:hidden;
  border:1px solid #294461;
  border-radius:999px;
  background:#060b12;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
}
.arife-job-meter>span{
  display:block;
  width:var(--arife-job-progress,0%);
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--arife-cyan),var(--arife-blue) 52%,var(--arife-violet));
  box-shadow:0 0 16px rgba(104,176,255,.6);
  transition:width .45s ease;
}
.arife-job-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--arife-muted);font-size:11px}
.arife-job-meta strong{color:#dce8f8;font:850 12px/1 ui-monospace,Consolas,monospace}

/* AI Studio: tools first, library stays in the account/library surfaces. */
.studio-hub-page .studio-hub{
  width:min(1180px,calc(100% - 40px));
  max-width:none!important;
  margin:0 auto!important;
  padding:52px 0 72px!important;
}
.studio-hub-page .sh-kicker{
  display:block;
  margin:0 0 12px!important;
  color:var(--arife-cyan)!important;
  font:850 12px/1 ui-monospace,Consolas,monospace!important;
  letter-spacing:.16em!important;
}
.studio-hub-page .studio-hub>h1{
  max-width:780px;
  margin:0!important;
  font-size:clamp(36px,4vw,58px)!important;
  line-height:1.05!important;
  letter-spacing:-.06em!important;
  word-break:keep-all;
}
.studio-hub-page .studio-hub>.sh-lead{
  max-width:720px!important;
  margin:16px 0 34px!important;
  color:#8f9db0!important;
  font-size:14px!important;
  line-height:1.72!important;
  word-break:keep-all;
}
.studio-hub-page .sh-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
.studio-hub-page .sh-card{
  position:relative;
  min-height:318px;
  padding:0 20px 22px!important;
  overflow:hidden;
  border-radius:var(--arife-radius-lg)!important;
  transform:translateZ(0);
}
.studio-hub-page .sh-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:132px;
  background:
    radial-gradient(circle at 72% 24%,rgba(110,224,246,.22),transparent 31%),
    radial-gradient(circle at 35% 68%,rgba(132,105,245,.24),transparent 35%),
    linear-gradient(145deg,#17243a,#0c1320);
  border-bottom:1px solid #2e4565;
}
.studio-hub-page .sh-card:after{
  content:"";
  position:absolute;
  width:74px;
  height:74px;
  left:calc(50% - 37px);
  top:28px;
  border:1px solid rgba(185,219,255,.6);
  border-radius:24px;
  background:
    radial-gradient(circle at 30% 23%,rgba(255,255,255,.72),transparent 9%),
    linear-gradient(145deg,#75d8ef,#6178db 52%,#7a5cd0);
  box-shadow:
    inset 9px 9px 16px rgba(255,255,255,.18),
    inset -12px -15px 20px rgba(20,28,91,.32),
    8px 10px 0 #081023,
    0 20px 38px rgba(34,71,157,.32);
  transform:perspective(300px) rotateX(7deg) rotateY(-12deg) rotateZ(-5deg);
  transition:transform .28s ease,box-shadow .28s ease;
}
.studio-hub-page .sh-card:nth-child(2):after{border-radius:50%;background:radial-gradient(circle at 36% 30%,#dffaff 0 7%,#76c6f1 16%,#4257ad 48%,#111a3b 70%)}
.studio-hub-page .sh-card:nth-child(3):after{border-radius:18px 32px 20px 34px;background:linear-gradient(145deg,#7ae8e5,#5978d9 48%,#8c63dc)}
.studio-hub-page .sh-card:nth-child(4):after{border-radius:50% 18% 50% 18%;background:linear-gradient(145deg,#d2efff,#6ba2f0 42%,#725fd1)}
.studio-hub-page .sh-card:hover:after{
  transform:perspective(300px) translateY(-5px) rotateX(3deg) rotateY(-4deg) rotateZ(1deg);
  box-shadow:inset 9px 9px 16px rgba(255,255,255,.2),inset -12px -15px 20px rgba(20,28,91,.28),5px 7px 0 #081023,0 24px 42px rgba(48,93,192,.42);
}
.studio-hub-page .sh-card .sh-num{
  position:relative;
  z-index:2;
  margin-top:153px;
  color:#83a9e8!important;
}
.studio-hub-page .sh-card strong{position:relative;z-index:2;font-size:20px!important}
.studio-hub-page .sh-card p{position:relative;z-index:2;color:#8f9caf!important;font-size:11.5px!important;line-height:1.65!important}
.studio-hub-page .sh-card>span:last-child{
  position:relative;
  z-index:2;
  color:#9fc4ff!important;
}
.studio-hub-page .sh-flow{
  position:relative;
  margin:24px 0 0!important;
  padding:17px 20px 17px 54px!important;
  border:1px solid #2d4360!important;
  border-radius:15px!important;
  background:#09111b!important;
  color:#8492a6!important;
}
.studio-hub-page .sh-flow:before{
  content:"→";
  position:absolute;
  left:17px;
  top:50%;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border:1px solid #5576b0;
  border-radius:8px;
  color:var(--arife-cyan);
  transform:translateY(-50%);
}
.studio-hub-page .sh-library-v359{display:none!important}

/* Image studio: composer and real results are never obscured by a fixed dock. */
body.image-studio-page .image-studio{
  display:flex!important;
  min-height:calc(100vh - var(--arife-nav-height));
  flex-direction:column;
  gap:0;
  background:
    radial-gradient(circle at 70% 0,rgba(106,81,235,.09),transparent 32rem),
    var(--arife-bg)!important;
}
body.image-studio-page .image-stage{
  order:1;
  min-height:0!important;
  display:block!important;
  padding:34px 0 18px!important;
  overflow:visible!important;
}
body.image-studio-page .image-stage:before{opacity:.035!important}
body.image-studio-page .image-composer{
  position:relative!important;
  inset:auto!important;
  width:min(1040px,calc(100% - 36px))!important;
  margin:0 auto!important;
  padding:12px!important;
  border-radius:19px!important;
  backdrop-filter:none!important;
}
body.image-studio-page .image-prompt-row{grid-template-columns:48px minmax(0,1fr) 132px!important}
body.image-studio-page .image-prompt-field{min-height:66px!important;border-radius:13px!important;background:#08101a!important}
body.image-studio-page .image-generate-button{
  min-height:66px!important;
  border-radius:13px!important;
}
body.image-studio-page .image-compose-controls{
  display:grid!important;
  grid-template-columns:minmax(190px,1.3fr) repeat(3,minmax(105px,.75fr)) auto!important;
  gap:7px!important;
}
body.image-studio-page .image-model-trigger{min-width:0!important}
body.image-studio-page .image-api-status{grid-column:1/-1;width:auto!important;margin:2px 3px 0!important}
body.image-studio-page .image-library-section{
  order:2;
  width:min(1420px,calc(100% - 40px))!important;
  margin:0 auto!important;
  padding:26px 22px 42px!important;
  border:1px solid var(--arife-line)!important;
  border-radius:var(--arife-radius-lg)!important;
}
body.image-studio-page .image-library-section>header{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  margin-bottom:18px!important;
}
body.image-studio-page .image-library-section>header>div:first-child{
  grid-column:2;
  text-align:center;
}
body.image-studio-page .image-library-actions{
  grid-column:3;
  justify-self:end;
}
body.image-studio-page .image-library-section h2{font-size:24px!important}
body.image-studio-page .image-library-section>header span{color:var(--arife-muted)!important;font-size:11px!important}
body.image-studio-page .gti-studio{
  order:3;
  width:min(1160px,calc(100% - 40px))!important;
  margin:42px auto 80px!important;
}
body.image-studio-page .image-result-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:start!important;
}
body.image-studio-page :is(.image-result-card,.image-result-upload,.image-empty-card){
  min-height:320px!important;
  border-color:var(--arife-line)!important;
  border-radius:16px!important;
  background:#09111b!important;
}
body.image-studio-page .image-result-card{
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  overflow:hidden!important;
}
body.image-studio-page .image-result-card:after{display:none!important}
body.image-studio-page .image-result-card>img{
  position:static!important;
  width:100%!important;
  height:250px!important;
  min-height:0!important;
  object-fit:contain!important;
  background:
    radial-gradient(circle at 50% 40%,rgba(92,122,170,.13),transparent 36%),
    #050a10!important;
}
body.image-studio-page .image-result-card--generated{
  grid-column:span 2;
  min-height:390px!important;
}
body.image-studio-page .image-result-card--generated>img{
  height:320px!important;
  object-fit:contain!important;
  object-position:center!important;
}
body.image-studio-page .image-result-card>footer{
  position:static!important;
  min-height:76px;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:5px 8px!important;
  align-items:center;
  padding:12px!important;
  border-top:1px solid #263a55;
  background:#0c1522!important;
}
body.image-studio-page .image-result-card>footer strong{font-size:11px!important}
body.image-studio-page .image-result-card>footer small{grid-column:1!important;color:#75849a!important;font-size:11px!important}
body.image-studio-page .image-result-card>footer>a{
  grid-column:2!important;
  grid-row:1!important;
  padding:7px 9px!important;
  border-color:#3c5578!important;
  background:#111d2c!important;
}
body.image-studio-page .image-result-tovideo{
  grid-column:2!important;
  grid-row:2!important;
  margin:0!important;
  padding:6px 9px!important;
  border:1px solid #4b6aa0!important;
  border-radius:8px!important;
  background:#14213a!important;
  color:#9fc2ff!important;
  font-size:11px!important;
  white-space:nowrap;
}
body.image-studio-page .image-result-delete{
  top:9px!important;
  right:9px!important;
  min-height:30px;
  padding:0 9px!important;
  border-radius:9px!important;
  background:rgba(9,15,25,.94)!important;
}
body.image-studio-page .image-result-card.is-media-missing>img{display:none!important}
body.image-studio-page .image-result-card.is-media-missing:before{
  content:"미리보기를 불러올 수 없습니다";
  min-height:250px;
  display:grid;
  place-items:center;
  padding:24px;
  color:#718099;
  background:radial-gradient(circle,rgba(100,130,180,.11),transparent 34%),#050a10;
  text-align:center;
  font-size:12px;
}
body.image-studio-page .image-result-card--generated.is-media-missing:before{min-height:320px}
body.image-studio-page .image-result-card.is-media-missing .image-result-tovideo{display:none!important}
body.image-studio-page :is(.ir-gallery,.ir-dock,.ir-fabs,.ir-gauge,.ir-hold,.ir-taste){display:none!important}
body.image-studio-page.ir-on{overflow:auto!important}

/* Depth: compact introduction and keep the working area in the first viewport. */
body.depth-extractor-page .depth-app{
  width:min(1420px,calc(100% - 36px))!important;
  margin:0 auto!important;
  padding:26px 0 70px!important;
}
body.depth-extractor-page .depth-hero{
  min-height:230px!important;
  grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr)!important;
  padding:34px 44px!important;
  border-radius:var(--arife-radius-lg)!important;
}
body.depth-extractor-page .depth-hero h1{
  max-width:670px!important;
  font-size:clamp(34px,3.2vw,52px)!important;
  line-height:1.02!important;
}
body.depth-extractor-page .depth-hero h1 br{display:none}
body.depth-extractor-page .depth-hero-copy>p{margin-top:16px!important;font-size:13px!important}
body.depth-extractor-page .depth-hero-tags{margin-top:18px!important}
body.depth-extractor-page .depth-scene{transform:scale(.76)!important;transform-origin:center!important}
body.depth-extractor-page .depth-flow{
  margin:18px 0 16px!important;
  padding:10px 13px!important;
  border-radius:15px!important;
}
body.depth-extractor-page .depth-flow article{min-width:160px!important;padding:6px 9px!important}
body.depth-extractor-page .depth-workspace{gap:14px!important}
body.depth-extractor-page .depth-workspace-main,
body.depth-extractor-page .depth-settings{min-height:590px!important;padding:18px!important;border-radius:var(--arife-radius-lg)!important}
body.depth-extractor-page .depth-upload{min-height:290px!important;margin-top:14px!important}
body.depth-extractor-page .depth-settings{margin:0!important}
body.depth-extractor-page .depth-setting-grid{gap:9px!important}
body.depth-extractor-page .depth-setting-grid label{
  min-height:68px;
  padding:9px;
  border:1px solid #29405d;
  border-radius:11px;
  background:#09121e;
}
body.depth-extractor-page .depth-setting-grid label:last-child{grid-column:1/-1}
body.depth-extractor-page .depth-output-block{
  margin-top:10px;
  padding:12px;
  border:1px solid #29415e;
  border-radius:12px;
  background:#09111b;
}
body.depth-extractor-page .depth-run-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:9px 12px!important;
}
body.depth-extractor-page .depth-credit-estimate{grid-column:1/-1;margin:0!important}
body.depth-extractor-page .depth-progress{grid-column:1/-1;width:100%!important}
body.depth-extractor-page .depth-run{min-height:44px!important;justify-content:space-between!important}
body.depth-extractor-page .depth-run-row>small{margin:0!important;align-self:center;text-align:right}
body.depth-extractor-page .depth-results{padding:20px!important;border-radius:var(--arife-radius-lg)!important}
body.depth-extractor-page .depth-result-card{border-radius:14px!important}
body.depth-extractor-page .depth-result-view{height:230px!important}
body.depth-extractor-page .depth-clear{
  width:auto!important;
  height:27px!important;
  margin:0 0 0 auto!important;
  padding:0 8px!important;
  border:1px solid #314866!important;
  border-radius:8px!important;
  background:#0b1420!important;
  color:#7e8da2!important;
}

/* Motion workspace and job dialog */
body.motion-transfer-page .motion-modal-card{width:min(720px,calc(100vw - 28px))!important;max-width:720px!important}
body.motion-transfer-page .motion-modal-card>[data-motion-modal-step]{padding:28px!important}
body.motion-transfer-page .motion-modal-card>[data-motion-modal-step="progress"]{
  min-height:330px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
body.motion-transfer-page .motion-modal-card>[data-motion-modal-step="progress"][hidden]{display:none!important}
body.motion-transfer-page .motion-modal-progress{
  min-height:78px!important;
  margin-top:18px!important;
  border:1px solid #2b4564!important;
  border-radius:14px!important;
  background:#08111d!important;
}
body.motion-transfer-page .motion-modal-note{
  margin-top:15px!important;
  color:#7f8da1!important;
  text-align:center;
}
body.motion-transfer-page .motion-cost-card{
  border-color:var(--arife-line)!important;
  background:#09121e!important;
}
body.motion-transfer-page .motion-help-box{
  border-color:#345071!important;
  background:#0a1421!important;
  color:#9aa8ba!important;
}

/* Cinema: cleaner stage rail and stable, non-transparent shells. */
body.film-page .project-flow-v311{min-height:76px!important}
body.film-page :is(
  .planning-shell-v312,.assets-shell-v313,.shots-shell-v314,.generation-shell-v315,
  .edit-shell-v316,.audio-shell-v317,.review-shell-v318,.delivery-shell-v319,.release-shell-v320
){
  margin:14px auto 0!important;
  border:1px solid #273c58!important;
  border-radius:var(--arife-radius-lg)!important;
  background:#08101a!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04),var(--arife-shadow)!important;
}
body.film-page :is(
  .planning-head-v312,.assets-head-v313,.shots-head-v314,.generation-head-v315,
  .edit-head-v316,.audio-head-v317,.review-head-v318,.delivery-head-v319,.release-head-v320
){
  padding:22px 28px!important;
  border-bottom:1px solid #283f5c!important;
  background:
    radial-gradient(circle at 85% -30%,rgba(117,88,242,.1),transparent 34%),
    #0c1522!important;
}
body.film-page :is(
  .planning-head-v312,.assets-head-v313,.shots-head-v314,.generation-head-v315,
  .edit-head-v316,.audio-head-v317,.review-head-v318,.delivery-head-v319,.release-head-v320
) h1{font-size:clamp(26px,2.6vw,38px)!important}
body.film-page .film-app{
  background:#060b12!important;
  border-top-color:#263b57!important;
}
body.film-page .film-library,
body.film-page .film-inspector,
body.film-page .film-workspace{
  background:#08101a!important;
}
body.film-page.shots-technique-open-v410 .shots-shell-v314{
  z-index:25000!important;
  overflow:visible!important;
}
body.film-page .film-bridge-modal[hidden]{display:none!important}
body.film-page .project-stage-tip-v311{background:#0d1724!important}
body.film-page .arife-pgrip-horizontal-v359{
  left:14px!important;
  right:14px!important;
  width:auto!important;
  opacity:.82;
}
body.film-page .arife-pgrip-horizontal-v359:before{
  left:18px!important;
  right:18px!important;
  background:linear-gradient(90deg,transparent,rgba(88,128,174,.5) 18%,rgba(88,128,174,.5) 82%,transparent)!important;
}

/* Tactile response shared by desktop, touch and keyboard controls. */
body:not(.landing-page) :is(button,.button,[role="button"]):not(:disabled):not([aria-disabled="true"]):not([class*="backdrop"]):not([class*="-select"]){
  transform-style:preserve-3d;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  translate:0 0;
  scale:1;
  filter:brightness(1) drop-shadow(0 2px 0 rgba(0,0,0,.42));
  transition:
    translate .15s cubic-bezier(.2,.8,.25,1),
    scale .12s ease,
    filter .15s ease,
    border-color .16s ease,
    background-color .16s ease!important;
}
@media(hover:hover){
  body:not(.landing-page) :is(button,.button,[role="button"]):not(:disabled):not([aria-disabled="true"]):not([class*="backdrop"]):not([class*="-select"]):hover{
    translate:0 -2px;
    filter:brightness(1.1) drop-shadow(0 5px 3px rgba(0,0,0,.48));
  }
}
body:not(.landing-page) :is(button,.button,[role="button"]):not(:disabled):not([aria-disabled="true"]):not([class*="backdrop"]):not([class*="-select"]):active{
  translate:0 2px!important;
  scale:.985!important;
  filter:brightness(.94) drop-shadow(0 0 0 transparent)!important;
  transition-duration:.06s!important;
}
body:not(.landing-page) :is(button,.button,[role="button"]):focus-visible{
  outline:2px solid #8bdcf2!important;
  outline-offset:3px!important;
}

/* Shared confirmation dialog generated by v400. */
.arife-confirm-v400{
  position:fixed;
  z-index:1200;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
}
.arife-confirm-v400[hidden]{display:none}
.arife-confirm-backdrop-v400{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(2,6,12,.91);
  backdrop-filter:blur(18px) saturate(.8);
}
.arife-confirm-dialog-v400{
  position:relative;
  width:min(480px,100%);
  overflow:hidden;
  border:1px solid #526f98;
  border-radius:22px;
  background:
    radial-gradient(circle at 90% 0,rgba(113,86,237,.18),transparent 36%),
    linear-gradient(145deg,#152033,#080e18 74%);
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 0 #02050a,var(--arife-shadow-deep);
  animation:arife-confirm-in-v400 .2s ease-out;
}
@keyframes arife-confirm-in-v400{from{opacity:0;transform:translateY(12px) scale(.985)}}
.arife-confirm-copy-v400{padding:26px 26px 22px}
.arife-confirm-copy-v400 small{color:var(--arife-cyan);font:850 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.15em}
.arife-confirm-copy-v400 h2{margin:12px 0 0;color:#fff;font-size:23px;letter-spacing:-.045em}
.arife-confirm-copy-v400 p{margin:10px 0 0;color:#8b9aaf;font-size:12px;line-height:1.7;white-space:pre-line;word-break:keep-all}
.arife-confirm-actions-v400{display:grid;grid-template-columns:1fr 1.25fr;gap:9px;padding:16px 20px 21px;border-top:1px solid #2d4260;background:#09111b}
.arife-confirm-actions-v400 button{
  min-height:46px;
  border:1px solid #38506f;
  border-radius:12px;
  background:#101b2a;
  color:#aebdd0;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.arife-confirm-actions-v400 button.primary{
  border-color:#9fc6ff;
  background:linear-gradient(135deg,#3e8bdb,#5065d8 52%,#7559de);
  box-shadow:inset 0 1px rgba(255,255,255,.32),0 4px 0 #273c88;
  color:#fff;
}
.arife-confirm-actions-v400 button.primary[data-tone="danger"]{
  border-color:rgba(251,113,133,.65);
  background:linear-gradient(135deg,#fb7185,#e11d48);
  box-shadow:inset 0 1px rgba(255,255,255,.28),0 4px 0 #881337;
}

@media(max-width:1180px){
  body:not(.landing-page) .site-nav{padding:0 16px!important}
  body:not(.landing-page) .nav-links{max-width:calc(100vw - 355px)}
  body:not(.landing-page) .nav-links>a{padding:0 10px!important;font-size:12px!important}
  .production-grid-v309,.project-flow-v311{grid-template-columns:minmax(0,1fr) 148px!important}
  .production-grid-brand-v309,.project-flow-brand-v311{display:none!important}
  .studio-hub-page .sh-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .studio-hub-page .sh-card{min-height:300px}
  body.image-studio-page .image-compose-controls{grid-template-columns:1.4fr repeat(2,1fr)!important}
  body.image-studio-page .image-count-control{grid-column:auto}
  body.image-studio-page .image-result-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.depth-extractor-page .depth-hero{grid-template-columns:1fr 350px!important;padding:30px 34px!important}
}

@media(max-width:900px){
  body:not(.landing-page) .site-nav{grid-template-columns:auto 1fr auto!important}
  body:not(.landing-page) .site-nav .menu-button{display:grid!important}
  body:not(.landing-page) .nav-links{max-width:none}
  .studio-hub-page .studio-hub{width:calc(100% - 28px)}
  body.depth-extractor-page .depth-hero{grid-template-columns:1fr!important}
  body.depth-extractor-page .depth-scene{display:none!important}
  body.depth-extractor-page .depth-workspace{grid-template-columns:1fr!important}
  body.depth-extractor-page .depth-workspace-main,
  body.depth-extractor-page .depth-settings{min-height:0!important}
}

@media(max-width:700px){
  :root{--arife-nav-height:64px}
  body:not(.landing-page) .site-nav{height:64px!important;min-height:64px!important;padding:0 12px!important}
  body:not(.landing-page) .site-nav .brand{min-width:0;height:38px;padding:0 2px!important}
  body:not(.landing-page) .nav-actions .nav-pill:not(.primary){display:none!important}
  body:not(.landing-page) .nav-pill.primary{min-height:38px!important;padding:0 12px!important}
  .production-grid-v309,.project-flow-v311{
    top:64px!important;
    min-height:72px!important;
    padding:6px 8px!important;
    grid-template-columns:minmax(0,1fr) 46px!important;
  }
  .production-modules-v309{overflow-x:auto;grid-template-columns:repeat(4,minmax(148px,1fr))!important}
  .production-module-v309{min-height:58px!important}
  .production-map-open-v309{padding:0!important;justify-content:center!important}
  .production-map-open-v309>span{display:none!important}
  .project-flow-steps-v311{grid-template-columns:repeat(10,minmax(82px,1fr))!important}
  .studio-hub-page .studio-hub{padding:36px 0 54px!important}
  .studio-hub-page .studio-hub>h1{font-size:36px!important}
  .studio-hub-page .studio-hub>.sh-lead{font-size:12px!important;margin-bottom:24px!important}
  .studio-hub-page .sh-grid{grid-template-columns:1fr!important}
  .studio-hub-page .sh-card{min-height:286px}
  body.image-studio-page .image-stage{padding-top:20px!important}
  body.image-studio-page .image-stage>h1,
  body.image-studio-page .image-stage>p{padding-inline:14px!important}
  body.image-studio-page .image-composer{width:calc(100% - 20px)!important;padding:9px!important}
  body.image-studio-page .image-prompt-row{grid-template-columns:42px minmax(0,1fr)!important}
  body.image-studio-page .image-generate-button{grid-column:1/-1;min-height:48px!important}
  body.image-studio-page .image-compose-controls{grid-template-columns:1fr 1fr!important}
  body.image-studio-page .image-model-trigger{grid-column:1/-1}
  body.image-studio-page .image-library-section{width:calc(100% - 20px)!important;padding:18px 14px 28px!important}
  body.image-studio-page .image-library-section>header{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  body.image-studio-page .image-library-section>header>div:first-child{
    grid-column:1;
    justify-self:center;
    text-align:center;
  }
  body.image-studio-page .image-library-actions{
    grid-column:1;
    justify-self:center;
  }
  body.image-studio-page .image-result-grid{grid-template-columns:1fr 1fr!important}
  body.image-studio-page .image-result-card>img{height:210px!important}
  body.image-studio-page .image-result-card--generated{min-height:356px!important}
  body.image-studio-page .image-result-card--generated>img{height:280px!important}
  body.image-studio-page .image-result-card.is-media-missing:before{min-height:210px}
  body.image-studio-page .image-result-card--generated.is-media-missing:before{min-height:280px}
  body.image-studio-page .gti-studio{width:calc(100% - 20px)!important;margin:28px auto 54px!important}
  body.depth-extractor-page .depth-app{width:calc(100% - 20px)!important;padding-top:14px!important}
  body.depth-extractor-page .depth-hero{min-height:0!important;padding:26px 22px!important}
  body.depth-extractor-page .depth-hero-copy{padding-top:26px!important}
  body.depth-extractor-page .depth-head-actions{
    left:auto!important;
    right:12px!important;
    top:10px!important;
    width:auto!important;
  }
  body.depth-extractor-page .depth-hero h1{font-size:35px!important}
  body.depth-extractor-page .depth-flow article div{display:none!important}
  body.depth-extractor-page .depth-flow article{min-width:0!important;justify-content:center!important}
  body.depth-extractor-page .depth-flow>span{display:none!important}
  body.depth-extractor-page .depth-setting-grid{grid-template-columns:1fr!important}
  body.depth-extractor-page .depth-setting-grid label:last-child{grid-column:auto}
  body.depth-extractor-page .depth-result-grid{grid-template-columns:1fr!important}
  body.depth-extractor-page .depth-run-row{grid-template-columns:1fr!important}
  body.depth-extractor-page .depth-run-row>small{text-align:left}
  body.motion-transfer-page .motion-modal-card>[data-motion-modal-step]{padding:22px 17px!important}
  body :is(
    .image-model-dialog,.image-library-dialog,.motion-modal-card,
    .motion-library-dialog,.motion-model-dialog,.stock-video-dialog,
    .film-modal-card,.film-bridge-dialog,.arife-plan-dialog,
    .project-manager-dialog-v311,.generation-review-dialog-v315,
    .production-flow-dialog-v309
  ){width:calc(100vw - 18px)!important;max-height:calc(100dvh - 18px)!important;border-radius:19px!important}
  .arife-confirm-actions-v400{grid-template-columns:1fr}
}

@media(max-width:460px){
  body.image-studio-page .image-result-grid{grid-template-columns:1fr!important}
  body.image-studio-page .image-result-card--generated{grid-column:auto;min-height:376px!important}
  body.image-studio-page .image-result-card--generated>img{height:clamp(300px,98vw,430px)!important}
  body.image-studio-page .image-result-card--generated.is-media-missing:before{min-height:clamp(300px,98vw,430px)}
  body.image-studio-page .image-compose-controls{grid-template-columns:1fr!important}
  body.image-studio-page .image-model-trigger{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important}
  .studio-hub-page .sh-card:after,
  .arife-job-meter>span,
  .arife-confirm-dialog-v400{animation:none!important;transition:none!important}
  body:not(.landing-page) :is(button,.button,[role="button"]){translate:0!important;scale:1!important}
}


/* ============================================================
   모션(동작 전이) 화면 : 실행 버튼이 화면 밖으로 밀려 있던 문제
   .motion-app 높이가 100vh - 60px 으로 잡혀 있었는데, 실제로는
   상단 내비(68px) + 제작 도구 레일(76px) = 144px 이 위에 있다.
   그래서 패널 바닥이 화면보다 76px 아래로 내려가, 아래에 고정해 둔
   "전이 영상 만들기" 가 항상 잘려 보이지 않았다.
   ============================================================ */
html body.motion-transfer-page main.motion-app,
html body.depth-extractor-page main.motion-app{
  height:calc(100vh - 144px)!important;
  min-height:520px!important;
  max-height:calc(100vh - 144px)!important;
}
html body.motion-transfer-page .motion-inspector{
  height:auto!important;
  max-height:calc(100vh - 152px)!important;
  scroll-padding-bottom:160px!important;
}
/* 아래 고정 실행 패널 : 스크롤되는 내용이 뒤로 지나가도 글자가 겹치지 않게 */
html body.motion-transfer-page .motion-action-panel-v413{
  position:sticky!important;
  bottom:0!important;
  z-index:9;
  margin:12px -12px 0!important;
  padding:12px!important;
  border-top:1px solid #34393e;
  background:linear-gradient(180deg,rgba(16,18,20,.86),#101214 22%)!important;
  backdrop-filter:blur(10px);
}
@media(max-width:1180px){
  html body.motion-transfer-page main.motion-app{
    height:auto!important;max-height:none!important;
  }
  html body.motion-transfer-page .motion-inspector{max-height:none!important}
  html body.motion-transfer-page .motion-action-panel-v413{position:static!important;backdrop-filter:none}
}

/* ============================================================
   보유 크레딧 칩 v421 — fal 호출 화면에서 잔액을 항상 보이게
   ============================================================ */
body:not(.landing-page) .nav-credit-chip{
  display:inline-flex;align-items:center;gap:6px;
  min-height:42px;padding:0 14px;
  border:1px solid #34486a!important;border-radius:13px!important;
  background:linear-gradient(145deg,#16233a,#0c121c)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 4px 0 #03060b!important;
  color:#dbe6f5!important;text-decoration:none;white-space:nowrap;
  font-size:11px;font-weight:850;transition:.15s;
}
body:not(.landing-page) .nav-credit-chip:hover{border-color:#7597c5!important;color:#fff!important}
body:not(.landing-page) .nav-credit-chip i{color:#78a9ff;font-style:normal;font-size:11px;line-height:1}
body:not(.landing-page) .nav-credit-chip b{color:#fff;font-size:13px;font-weight:900;font-variant-numeric:tabular-nums}
body:not(.landing-page) .nav-credit-chip span{color:#8190a5;font-size:12px;font-weight:800}
body:not(.landing-page) .nav-credit-chip.is-low b{color:#ffc36d}
body:not(.landing-page) .nav-credit-chip.is-low{border-color:#7a5f2c!important}
body:not(.landing-page) .nav-credit-chip.is-empty b{color:#ff91a9}
body:not(.landing-page) .nav-credit-chip.is-empty{border-color:#7d3547!important}
@media(max-width:900px){
  body:not(.landing-page) .nav-credit-chip span{display:none}
  body:not(.landing-page) .nav-credit-chip{padding:0 10px}
}

/* ============================================================
   결제 안내 창 v422 — 402 응답을 구독/충전 안내로
   ============================================================ */
.bg422{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.bg422[hidden]{display:none}
.bg422-back{position:absolute;inset:0;border:0;padding:0;background:rgba(4,7,12,.8);backdrop-filter:blur(8px);cursor:pointer}
.bg422-box{
  position:relative;width:min(440px,100%);padding:30px 28px 22px;
  border:1px solid #2c4363;border-radius:22px;
  background:linear-gradient(180deg,#0d1521,#070c14);
  box-shadow:0 34px 110px rgba(0,0,0,.7);text-align:center;
}
.bg422-mark{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;
  border-radius:16px;border:1px solid #34486a;
  background:linear-gradient(145deg,#16233a,#0c121c);
  color:#78a9ff;font-size:22px;font-style:normal;
}
.bg422-box h2{margin:0 0 10px;font-size:20px;letter-spacing:-.03em;color:#f4f7fc}
.bg422-copy{margin:0;color:#8190a5;font-size:13px;line-height:1.75}
.bg422-meta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:16px 0 0;padding:11px 14px;border:1px solid #263a56;border-radius:13px;background:#0a121e;
}
.bg422-meta span{color:#8190a5;font-size:11px;font-weight:800}
.bg422-meta b{color:#fff;font-size:14px;font-weight:900;font-variant-numeric:tabular-nums}
.bg422-meta i{color:#3c5a82;font-style:normal}
.bg422-box footer{display:flex;gap:9px;margin-top:20px}
.bg422-box footer button,.bg422-box footer a{
  flex:1;min-height:46px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:13px;font:800 13px/1 inherit;font-family:inherit;cursor:pointer;text-decoration:none;transition:.15s;
}
.bg422-close{border:1px solid #33486a;background:rgba(9,17,28,.8);color:#b7c6dc}
.bg422-close:hover{border-color:#7597c5;color:#fff}
.bg422-cta{
  border:1px solid #8db6ff;color:#fff;
  background:linear-gradient(135deg,#397fce,#5265d8 55%,#755dde);
}
.bg422-cta:hover{filter:brightness(1.08)}
body.bg422-open{overflow:hidden}

/* ============================================================
   모션 전이 버튼 v423
   팔레트를 라임에서 파랑으로 바꿀 때 --hf-lime 만 #79abff 로 갈아끼웠다.
   그런데 higgsfield 원본 CSS 는 "밝은 라임 위 검은 글씨" 전제라
   color:#040a16 을 그대로 두고 있었다. 결과적으로 파란 그라디언트 위에
   거의 검정(rgb(5,7,16)) 글자가 얹혀 버튼이 활성화돼도 읽히지 않았다.
   ============================================================ */
html body.motion-transfer-page .motion-generate,
html body.motion-transfer-page .motion-generate strong,
html body.motion-transfer-page .motion-generate small,
html body.motion-transfer-page .motion-generate span,
html body.motion-transfer-page .motion-generate b,
html body.motion-transfer-page .motion-generate i{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
html body.motion-transfer-page .motion-generate small{opacity:.86}
html body.motion-transfer-page .motion-generate{
  text-shadow:0 1px 2px rgba(4,10,22,.35);
  border:1px solid rgba(255,255,255,.28)!important;
}
html body.motion-transfer-page .motion-generate:disabled,
html body.motion-transfer-page .motion-generate[disabled]{
  filter:grayscale(.45) brightness(.72);
}
html body.motion-transfer-page .motion-generate:disabled strong,
html body.motion-transfer-page .motion-generate:disabled small{
  color:rgba(255,255,255,.72)!important;
  -webkit-text-fill-color:rgba(255,255,255,.72)!important;
}

/* 실패 사유 — 예전에는 창이 그냥 닫혀서 원인을 볼 수 없었다 */
html body.motion-transfer-page .motion-modal-error{
  margin:14px 0 0;padding:11px 13px;border-radius:11px;
  border:1px solid rgba(255,120,120,.42);
  background:rgba(255,80,80,.11);
  color:#ffd9d9;font-size:13px;line-height:1.55;
}


/* `작업 흐름` 이 `작업 흐` / `름` 으로 끊기던 것 (클로드코드)
   읽기용 CSS 가 이 글씨를 10px → 14px 로 키우면서 62px 이 필요해졌는데
   칸은 52px 이었다. 한글은 글자 사이 어디서나 끊을 수 있어 두 줄이 됐다.
   칸을 넓히고 낱말 안에서 끊지 않게 한다. (image·ai-studio·nodes·mediaart 공통) */
.production-map-open-v309 strong{white-space:nowrap}


/* ============================================================
   확인 창 · 진행 막대 — 밝은 물방울 v1150

   이 둘은 사이트 전체가 함께 쓴다(뎁스맵 추출, 자동 연출, 미디어아트,
   보관함 지우기…). 아직 어두운 색으로 짜여 있어서 밝아진 화면 위에
   검은 판이 떠 있었고, 글자는 어두운 판 위에 어두운 글자로 얹혀
   거의 읽을 수 없었다(실측).

   `:not(#nope):not(#_):not(#_)` 은 아이디 세 개 값을 만드는 장치이고
   아이디를 실제로 쓰지 않으므로 아무 요소도 놓치지 않는다.
   ============================================================ */
html body:not(#nope):not(#_):not(#_) .arife-confirm-backdrop-v400{
  /* 조금이라도 비치면 뒤에 판이 있는 자리와 없는 자리가 다르게 보여
     세로 경계선이 생긴다(실측). 완전히 덮는다. */
  background:radial-gradient(120% 100% at 50% 34%,#eef3fb,#ccd9ec 68%,#bccbe4)!important;
  backdrop-filter:blur(18px) saturate(1.06)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.06)!important;
}
html body:not(#nope):not(#_):not(#_) .arife-confirm-dialog-v400{
  width:min(480px,100%);
  border:1px solid rgba(255,255,255,.85)!important;
  border-radius:26px!important;
  background:linear-gradient(160deg,#fbfdff,#e9f0fa 62%,#dee8f7)!important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(163,197,240,.45),
    0 30px 62px -26px rgba(18,45,88,.5)!important;
  color:#16324f!important;
}
html body:not(#nope):not(#_):not(#_) .arife-confirm-copy-v400{padding:26px 26px 22px!important}
html body:not(#nope):not(#_):not(#_) .arife-confirm-copy-v400 small{color:#4d76ad!important}
html body:not(#nope):not(#_):not(#_) .arife-confirm-copy-v400 h2{
  margin:12px 0 0!important;color:#16324f!important;font-size:22px!important;font-weight:800;
}
html body:not(#nope):not(#_):not(#_) .arife-confirm-copy-v400 p{
  margin:10px 0 0!important;color:#4a6380!important;font-size:13px!important;line-height:1.7;
}
html body:not(#nope):not(#_):not(#_) .arife-confirm-actions-v400{
  padding:16px 22px 22px!important;
  border-top:1px solid rgba(150,185,230,.4)!important;
  background:transparent!important;
}
html body:not(#nope):not(#_):not(#_) .arife-confirm-actions-v400 button{
  min-height:48px!important;
  border:0!important;border-radius:16px!important;
  background:radial-gradient(96% 60% at 50% 2%,#fff,rgba(255,255,255,.86) 44%,rgba(246,250,255,.78))!important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(160,196,244,.6),
    0 10px 18px -14px rgba(20,45,90,.55)!important;
  color:#1b3e6b!important;font-size:13px!important;font-weight:800;
  filter:none!important;text-shadow:none!important;
}
html body:not(#nope):not(#_):not(#_) .arife-confirm-actions-v400 button.primary{
  background:linear-gradient(180deg,#5b9bec,#2f6ec9)!important;
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.8),0 14px 24px -14px rgba(30,80,160,.85)!important;
  color:#fff!important;
}
html body:not(#nope):not(#_):not(#_) .arife-confirm-actions-v400 button.primary[data-tone="danger"]{
  background:linear-gradient(180deg,#f08098,#d8405f)!important;
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.7),0 14px 24px -14px rgba(160,30,60,.85)!important;
}

/* 진행 막대 — 밝은 홈통에 파란 물이 차오르는 모양 */
html body:not(#nope):not(#_):not(#_) .arife-job-meter{
  height:10px!important;
  border:0!important;border-radius:999px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.6),inset 0 2px 5px rgba(30,60,110,.1)!important;
}
html body:not(#nope):not(#_):not(#_) .arife-job-meter>span{
  background:linear-gradient(90deg,#7fb4f4,#2f6ec9)!important;
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.75),0 0 14px rgba(90,150,230,.45)!important;
}
html body:not(#nope):not(#_):not(#_) .arife-job-meta{color:#6f89a6!important}
html body:not(#nope):not(#_):not(#_) .arife-job-meta strong{color:#1d4b8c!important}

/* ── 크레딧 부족 안내창을 밝은 화면에 맞춘다 (2026-08-22) ──
   스튜디오·이미지 화면은 밝은 유리판인데 이 창만 옛 어두운 색이라,
   생성을 누른 순간 새까만 상자가 튀어나왔다. 밝은 판에서만 다시 칠한다
   (어두운 화면에서 쓰던 곳이 있다면 그쪽은 그대로 둔다). */
body.a-glass-page .bg422-back{background:rgba(120,132,150,.5)!important;backdrop-filter:blur(10px)!important}
body.a-glass-page .bg422-box{
  border:1px solid rgba(22,50,79,.14)!important;
  background:linear-gradient(180deg,#f8fafd,#eef3f9 80%)!important;
  box-shadow:0 30px 90px rgba(20,30,45,.32)!important;
}
body.a-glass-page .bg422-box h2{color:#16324f!important}
body.a-glass-page .bg422-copy{color:#5b7c9e!important}
body.a-glass-page .bg422-mark{
  border:1px solid rgba(47,98,173,.28)!important;
  background:linear-gradient(145deg,#eaf1fb,#dbe6f6)!important;color:#2f62ad!important;
}
body.a-glass-page .bg422-meta{
  border:1px solid rgba(22,50,79,.12)!important;background:rgba(255,255,255,.7)!important;color:#16324f!important;
}
body.a-glass-page .bg422-box footer button,
body.a-glass-page .bg422-box footer a{color:#16324f!important}
