/* ============================================================
   ARIFE 자동 제작 옷 v5300 — 밝게

   왜 덮어쓰지 않고 갈아입히나
     옛 옷(arife-auto-director-v332.css)은 이 화면에만 규칙이 90개고,
     어두운 색이 변수뿐 아니라 그림자·그러데이션 안에 통째로 박혀 있다.
     그 위에 밝은 규칙을 얹으면 반드시 **반쯤 밝고 반쯤 어두운** 구간이
     생긴다 — 옛 영화제작소(cinema.html)에서 이미 겪은 그것이다.
     그래서 이 파일이 v332 를 **대신한다.** auto.html 이 v332 대신 이걸 싣는다.
     화면 구조와 자바스크립트는 하나도 안 건드린다. 옷만 갈아입는다.

   색은 「이야기 짜기」·「수동 제작」과 같은 것을 쓴다
     흰 판 · 테두리 #d3ddec · 글자 #101d2e · 강조 파랑 #2f62ad 하나로만.
     세 화면을 나란히 놓았을 때 한 제품으로 보여야 한다.

   가짜 아이디를 왜 쓰나
     arife-glass-pages-v600.css 가 이렇게 걸어 둔다.
       html body[data-glass-page].a-glass-page:not(#nope) button { …!important }
     가짜 아이디 하나 + 클래스 셋이라 클래스만 쓰는 규칙은 진다. 이기려면
     ① 가짜 아이디 **둘** ② 우리도 !important ③ ::before 광택은 content:none.
     셋이 다 필요하다.

   ★ 그리고 하나 더 — type 선택자를 빼먹지 말 것.
     `.a .b button` (클래스2+type1) 이 `.a .c` (클래스2) 를 이긴다. v5000 에서
     파란 단추가 **흰 바탕에 흰 글씨**로 나온 것이 이것 때문이었다.
   ============================================================ */

/* ★ 글자색은 body 를 직접, 가짜 아이디 둘로 잡는다.
   `.auto-director-page` (클래스 하나) 는 `body:not(.landing-page)`
   (arife-unified-v400) 에게 진다 — 그래서 판은 하얗게 됐는데 글씨가
   흰색으로 남아 **흰 바탕에 흰 글씨**가 됐다(실측). */
body.auto-director-page:not(#_):not(#_){
  color:var(--ad-ink) !important;
}

.auto-director-page{
  --ad-card:#fff;
  --ad-edge:#d3ddec;
  --ad-edge-strong:#b3c4dc;
  --ad-ink:#101d2e;
  --ad-dim:#56637a;
  --ad-faint:#8592a8;
  --ad-key:#2f62ad;
  --ad-key-soft:#eaf1fc;
  --ad-well:#f7fafd;

  min-height:100vh;
  color:var(--ad-ink);
  background:
    radial-gradient(circle at 12% 4%,rgba(120,170,240,.10),transparent 30rem),
    radial-gradient(circle at 88% 14%,rgba(150,140,230,.08),transparent 32rem),
    linear-gradient(180deg,#eef4fc 0%,#e7eefa 46%,#eaf0f9 100%) !important;
}

/* 옛 옷이 깔던 격자·번짐은 걷어낸다 — 밝은 바닥에서는 때처럼 보인다 */
.auto-director-page::before,
.auto-director-page .auto-director::before,
.auto-director-page .auto-director::after{ content:none !important; }

.auto-director-page .auto-director{
  position:relative;
  width:min(1180px,calc(100% - 40px));
  max-width:none;
  margin:0 auto;
  padding:30px 0 84px;
}

/* ── 광택 걷어내기 (없으면 아래가 전부 무시된다) ───────────── */
.auto-director-page :is(button,select,textarea,input):not(#nope):not(#_){
  background:none !important;
  background-color:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid var(--ad-edge) !important;
  box-shadow:none !important;
  color:var(--ad-ink) !important;
  text-shadow:none !important;
  font-family:inherit;
}
.auto-director-page :is(button,select,textarea,input):not(#nope):not(#_)::before{ content:none !important; }

/* ══════════ 머리 ══════════ */
/* ★ 다른 시트가 미디어쿼리 안에서 이 판들에 어두운 그러데이션을 덧칠한다.
   background 하나만으로는 background-image 가 안 지워져서 어두운 결이 남았다
   (실측: .ad-card 에 linear-gradient(145deg,rgba(2…)) 가 그대로 살아 있었다).
   배경을 못 박고 background-image 를 따로 지운다. */
.auto-director-page .ad-hero,
.auto-director-page .ad-card,
.auto-director-page .maker-auto-policy-v2100,
.auto-director-page #ad-log,
.auto-director-page .ad-start-image{
  background-image:none !important;
}
.auto-director-page .ad-card:not(#_):not(#_){
  background:var(--ad-card) !important;
}
.auto-director-page .ad-hero:not(#_):not(#_){
  background:linear-gradient(180deg,#fff,#f4f8fe) !important;
}
.auto-director-page #ad-log:not(#_):not(#_),
.auto-director-page .maker-auto-policy-v2100:not(#_):not(#_),
.auto-director-page .ad-start-image:not(#_):not(#_){
  background:var(--ad-well) !important;
}

.auto-director-page .ad-hero{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:22px;
  padding:26px 28px;
  margin:0 0 16px;
  border:1px solid var(--ad-edge);
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#f4f8fe);
  box-shadow:0 20px 44px -34px rgba(16,45,95,.5);
}
.auto-director-page .ad-kicker-row{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.auto-director-page .ad-system-state{
  display:inline-flex;align-items:center;gap:6px;
  min-height:26px;padding:0 11px;border-radius:999px;
  background:var(--ad-key-soft);color:var(--ad-key);
  font:800 10.5px/1 inherit;
}
.auto-director-page .ad-system-state::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#2f9e5f;
}
.auto-director-page #ad-title{
  margin:0;color:var(--ad-ink);
  font:900 clamp(26px,3.4vw,40px)/1.18 inherit;letter-spacing:-.02em;
}
.auto-director-page #ad-title span{color:var(--ad-key)}
.auto-director-page .ad-hero-copy p{
  margin:12px 0 0;max-width:62ch;color:var(--ad-dim);
  font:700 12.5px/1.85 inherit;
}

/* 흐름 네 토막 */
.auto-director-page .ad-hero-copy{grid-column:1;grid-row:1;min-width:0}
.auto-director-page .maker-orb-v2100{grid-column:2;grid-row:1}
.auto-director-page .ad-flow{
  grid-column:1 / -1;grid-row:2;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;
  margin:20px 0 0;
}
.auto-director-page .ad-flow > span{
  display:flex;align-items:center;gap:9px;
  min-height:46px;padding:0 14px;
  border:1px solid var(--ad-edge);border-radius:13px;background:#fff;
}
.auto-director-page .ad-flow i{
  font-style:normal;display:grid;place-items:center;
  width:24px;height:24px;border-radius:8px;
  background:var(--ad-key-soft);color:var(--ad-key);
  font:900 10px/1 inherit;
}
.auto-director-page .ad-flow small{color:var(--ad-ink);font:800 11.5px/1 inherit}

/* 오른쪽 구슬 — 밝은 바닥에 맞춰 조용하게 */
.auto-director-page .maker-orb-v2100{
  width:150px;height:150px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--ad-edge);
  background:radial-gradient(circle at 34% 28%,#fff,#e6eefa 62%,#d8e4f5);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.9),0 18px 34px -22px rgba(16,45,95,.45);
}
.auto-director-page .maker-orb-v2100 span{
  color:var(--ad-key);font:900 15px/1 inherit;letter-spacing:.14em;
}

/* ══════════ 판 ══════════ */
.auto-director-page .ad-card{
  padding:20px 22px 22px;
  margin:0 0 14px;
  border:1px solid var(--ad-edge);
  border-radius:20px;
  background:var(--ad-card);
  box-shadow:0 18px 40px -32px rgba(16,45,95,.5);
}
.auto-director-page .ad-card-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid var(--ad-edge);
}
.auto-director-page .ad-card-head strong{color:var(--ad-ink);font:900 14.5px/1.3 inherit}
.auto-director-page .ad-card-head small{margin-left:auto;color:var(--ad-dim);font:700 11.5px/1.5 inherit}

.auto-director-page .ad-field{margin:0 0 18px;min-width:0}
.auto-director-page .ad-field > span{
  display:block;margin:0 0 8px;color:var(--ad-dim);font:800 11.5px/1.4 inherit;
}

.auto-director-page #ad-concept:not(#nope):not(#_){
  width:100%;min-height:96px;padding:13px 15px;
  border-radius:13px;resize:vertical;
  background:var(--ad-well) !important;
  font:800 14px/1.7 inherit;
}
.auto-director-page #ad-concept:not(#nope):not(#_)::placeholder{
  color:var(--ad-faint) !important;font-weight:700;
}
.auto-director-page #ad-concept:not(#nope):not(#_):focus{
  outline:none;border-color:var(--ad-key) !important;
  box-shadow:0 0 0 3px rgba(47,98,173,.14) !important;
}

/* ══════════ 스타일 고르기 ══════════ */
.auto-director-page #ad-presets{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:9px;
}
/* ★ display:grid 가 [hidden] 의 display:none 을 이긴다. 이것 때문에 스타일
   14장이 「바꾸기」를 안 눌러도 늘 펼쳐져 있었다(실측). 따로 못 박는다. */
.auto-director-page #ad-presets[hidden]{display:none}
/* ★ 칸을 minmax(0,1fr) 로 잡고 글의 자리를 못 박는다.
   `auto 1fr` 만 쓰면 아이콘·제목·설명 셋이 2칸 격자에 순서대로 흘러들어가
   제목이 좁은 칸에 끼어 **글자가 세로로 한 자씩** 섰다(실측). */
.auto-director-page .ad-preset:not(#nope):not(#_){
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:11px;row-gap:4px;align-items:start;
  padding:13px 14px;border-radius:14px;
  background:#fff !important;text-align:left;cursor:pointer;min-width:0;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.auto-director-page .ad-preset .ad-preset-emoji{grid-column:1;grid-row:1 / span 2}
.auto-director-page .ad-preset strong{grid-column:2;grid-row:1}
.auto-director-page .ad-preset small{grid-column:2;grid-row:2}
.auto-director-page .ad-preset:hover:not(#nope):not(#_){
  border-color:var(--ad-edge-strong) !important;
  box-shadow:0 10px 22px -18px rgba(16,45,95,.6) !important;
}
.auto-director-page .ad-preset.active:not(#nope):not(#_){
  border-color:transparent !important;
  box-shadow:0 0 0 2px var(--ad-key) !important;
  background:var(--ad-key-soft) !important;
}
.auto-director-page .ad-preset-emoji{
  display:grid;place-items:center;
  width:32px;height:32px;border-radius:10px;
  background:var(--ad-key-soft);font-size:15px;line-height:1;
}
.auto-director-page .ad-preset.active .ad-preset-emoji{background:#fff}
.auto-director-page .ad-preset strong{
  display:block;color:var(--ad-ink);font:900 12.5px/1.4 inherit;
}
.auto-director-page .ad-preset small{
  display:block;color:var(--ad-dim);font:700 11px/1.6 inherit;
}

/* ══════════ 첫 장면 이미지 ══════════ */
.auto-director-page .ad-start-image{
  position:relative;
  display:flex;align-items:center;gap:14px;
  padding:14px;border:1px dashed var(--ad-edge-strong);border-radius:14px;
  background:var(--ad-well);
}
.auto-director-page .ad-start-image.is-on,
.auto-director-page .ad-start-image.ws-drop.is-over{
  border-style:solid;border-color:var(--ad-key);background:var(--ad-key-soft);
}
.auto-director-page #ad-start-preview{
  width:84px;height:48px;object-fit:cover;border-radius:9px;
  border:1px solid var(--ad-edge);background:#e9eff8;
}
.auto-director-page .maker-auto-drop-copy-v2100{min-width:0;flex:1 1 auto}
.auto-director-page .maker-auto-drop-copy-v2100 strong{
  display:block;color:var(--ad-ink);font:800 12.5px/1.4 inherit;
}
.auto-director-page .maker-auto-drop-copy-v2100 small,
.auto-director-page #ad-start-name{
  display:block;margin:3px 0 0;color:var(--ad-dim);font:700 11px/1.6 inherit;
}
.auto-director-page .ad-start-arrow{color:var(--ad-faint)}

/* ══════════ 품질 등급 ══════════ */
.auto-director-page #ad-tiers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px;
}
/* 첫 화면에 두려고 납작하게 줄였다. 큰 카드 넉 장이 한 줄 칸 바로 밑에
   버티고 있으면 「한 줄만 쓰면 된다」는 말이 무색해진다. */
.auto-director-page #ad-tiers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:8px;
}
.auto-director-page .ad-tier:not(#nope):not(#_){
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:9px;row-gap:2px;align-items:center;
  padding:11px 13px;border-radius:12px;background:#fff !important;
  text-align:left;cursor:pointer;min-width:0;
}
.auto-director-page .ad-tier .ad-tier-emoji{grid-column:1;grid-row:1 / span 2}
.auto-director-page .ad-tier strong{grid-column:2;grid-row:1}
.auto-director-page .ad-tier em{grid-column:2;grid-row:2;font-style:normal}
/* 설명은 고른 것만 아래에 펴서 보여 준다 — 넉 장이 다 떠들면 시끄럽다 */
.auto-director-page .ad-tier small{display:none}
.auto-director-page .ad-tier:hover:not(#nope):not(#_){border-color:var(--ad-edge-strong) !important}
.auto-director-page .ad-tier.active:not(#nope):not(#_){
  border-color:transparent !important;
  box-shadow:0 0 0 2px var(--ad-key) !important;
  background:var(--ad-key-soft) !important;
}
.auto-director-page .ad-tier-emoji{color:var(--ad-key);font:900 14px/1 inherit}
.auto-director-page .ad-tier strong{color:var(--ad-ink);font:900 12.5px/1.3 inherit}
.auto-director-page .ad-tier em{color:var(--ad-key);font:900 11.5px/1.3 inherit}
.auto-director-page .ad-tier.active em{color:var(--ad-key)}
.auto-director-page #ad-tier-note{
  margin:10px 0 0;color:var(--ad-faint);font:700 11px/1.7 inherit;
}

/* ══════════ 잔손잡이 ══════════ */
.auto-director-page .ad-opts{
  display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;
}
.auto-director-page .ad-opts label{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  color:var(--ad-dim);font:800 11.5px/1 inherit;
}
.auto-director-page .ad-opts :is(select,input[type="number"]):not(#nope):not(#_){
  min-height:40px;padding:0 12px;border-radius:11px;
  background:#fff !important;font:800 12.5px/1 inherit;cursor:pointer;
  text-overflow:ellipsis;
}
.auto-director-page .ad-check{
  flex-direction:row !important;align-items:center;gap:8px;
  min-height:40px;padding:0 13px;border:1px solid var(--ad-edge);border-radius:11px;
  background:#fff;color:var(--ad-ink);font:800 12px/1 inherit;cursor:pointer;
}
/* ★ 체크상자는 우리 규칙 **안에** 둬야 한다.
   한 번 빼 봤더니 다른 시트가 까맣게 칠해 버렸다(실측: 배경 rgb(9,17,28)).
   빼는 게 아니라, 배경을 흰색으로 못 박고 accent-color 로 표시색을 준다. */
.auto-director-page .ad-check input[type="checkbox"]:not(#nope):not(#_){
  width:16px;height:16px;cursor:pointer;
  appearance:auto;-webkit-appearance:checkbox;
  background:#fff !important;background-color:#fff !important;
  border:1px solid var(--ad-edge-strong) !important;
  accent-color:var(--ad-key);
}

/* ══════════ 단추 ══════════ */
.auto-director-page .ad-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--ad-edge);
}
.auto-director-page .ad-total{
  margin-right:auto;color:var(--ad-dim);font:800 12px/1.5 inherit;
}
.auto-director-page .ad-total b{color:var(--ad-key)}
.auto-director-page button.ad-btn:not(#nope):not(#_){
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:46px;padding:0 22px;border-radius:13px;
  background:#fff !important;color:var(--ad-ink) !important;
  font:800 13px/1 inherit;cursor:pointer;
}
.auto-director-page button.ad-btn:hover:not(#nope):not(#_){
  border-color:var(--ad-edge-strong) !important;
}
/* ★ type 선택자(button)를 꼭 붙인다 — 위 규칙과 같은 무게로 이겨야 한다 */
.auto-director-page button.ad-btn.primary:not(#nope):not(#_){
  background:var(--ad-key) !important;border-color:transparent !important;color:#fff !important;
}
.auto-director-page button.ad-btn.primary:hover:not(#nope):not(#_){background:#27538f !important}
.auto-director-page button.ad-btn[disabled]:not(#nope):not(#_){opacity:.55;cursor:default}

/* ★ 「자동 제작 시작」에는 클래스가 없다(`<button id="ad-start">`).
   그래서 .ad-btn.primary 규칙이 한 번도 안 걸렸고, 제일 중요한 단추가
   투명하게 남아 있었다(실측). 아이디로 직접 잡는다. */
.auto-director-page button#ad-start:not(#_):not(#_){
  display:inline-flex;align-items:center;gap:12px;
  min-height:54px;padding:0 24px;border-radius:14px;
  background:var(--ad-key) !important;border-color:transparent !important;
  color:#fff !important;cursor:pointer;margin:16px 0 0;
}
.auto-director-page button#ad-start:hover:not(#_):not(#_){background:#27538f !important}
.auto-director-page button#ad-start[disabled]:not(#_):not(#_){opacity:.55;cursor:default}
.auto-director-page #ad-start strong{color:#fff;font:900 14px/1.2 inherit}
.auto-director-page #ad-start small{color:rgba(255,255,255,.86);font:800 11px/1.2 inherit}
.auto-director-page #ad-start small b,
.auto-director-page #ad-start .arife-cost-b{color:#fff;font-weight:900}
.auto-director-page #ad-start .ad-start-arrow{margin-left:auto;color:#fff;font:900 15px/1 inherit}

/* 보관함에서 불러오기 · 선택 해제 — 이것도 클래스가 없다 */
.auto-director-page button#ad-pick-start:not(#_):not(#_),
.auto-director-page button#ad-start-clear:not(#_):not(#_){
  min-height:36px;padding:0 14px;border-radius:11px;
  background:#fff !important;font:800 11.5px/1 inherit;cursor:pointer;
}

/* 결과 줄의 링크형 단추(a.ad-btn)도 같이 */
.auto-director-page a.ad-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 22px;border-radius:13px;
  border:1px solid var(--ad-edge);background:#fff;color:var(--ad-ink);
  font:800 13px/1 inherit;text-decoration:none;
}
.auto-director-page a.ad-btn.primary{
  border-color:transparent;background:var(--ad-key);color:#fff;
}
.auto-director-page a.ad-btn.primary:hover{background:#27538f}

/* 예상 비용 줄 */
.auto-director-page #ad-estimate{
  margin:14px 0 0;padding:12px 14px;border-radius:12px;
  background:var(--ad-key-soft);color:var(--ad-key);font:800 12px/1.6 inherit;
}

/* ══════════ 진행 판 ══════════ */
.auto-director-page .ad-card-head--run{border-bottom-color:var(--ad-edge)}
.auto-director-page #ad-step{
  margin:0 0 10px;padding:11px 14px;border-radius:12px;
  background:var(--ad-key-soft);color:var(--ad-key);
  font:800 12px/1.5 inherit;
}
.auto-director-page .ad-barwrap{
  height:8px;border-radius:999px;overflow:hidden;
  background:#e3eaf5;border:1px solid var(--ad-edge);
}
.auto-director-page #ad-bar{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,#4f86d6,var(--ad-key));
  transition:width .3s ease;
}

/* 씬 알약 */
.auto-director-page #ad-chips{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 0}
.auto-director-page .ad-chip{
  display:inline-flex;align-items:center;gap:6px;
  max-width:100%;min-height:30px;padding:0 12px;border-radius:999px;
  border:1px solid var(--ad-edge);background:#fff;
  color:var(--ad-dim);font:800 11px/1.4 inherit;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.auto-director-page .ad-chip--still{border-color:#b9cfe9;background:#eef5fd;color:var(--ad-key)}
.auto-director-page .ad-chip--video{border-color:#a9d9bd;background:#ecf8f1;color:#1f7a4d}
.auto-director-page .ad-chip--done{border-color:transparent;background:#1f7a4d;color:#fff}
.auto-director-page .ad-chip--fail{border-color:#e6bcb1;background:#fdf1ee;color:#8f2f1c}

/* 기록 */
.auto-director-page #ad-log{
  margin:14px 0 0;padding:12px 14px;max-height:230px;overflow:auto;
  border:1px solid var(--ad-edge);border-radius:12px;background:var(--ad-well);
}
.auto-director-page .ad-log-line{
  color:var(--ad-dim);font:700 11.5px/1.85 inherit;
  word-break:break-word;
}
.auto-director-page .ad-log-line.is-ok{color:#1f7a4d;font-weight:800}
.auto-director-page .ad-log-line.is-warn{color:#8a6100;font-weight:800}
.auto-director-page .ad-log-line.is-err{color:#8f2f1c;font-weight:800}

/* ══════════ 결과 ══════════ */
.auto-director-page #ad-result{margin:18px 0 0}
.auto-director-page #ad-result > strong{
  display:block;margin:0 0 10px;color:var(--ad-ink);font:900 13.5px/1.3 inherit;
}
.auto-director-page #ad-video{
  width:100%;border-radius:14px;border:1px solid var(--ad-edge);
  background:#0b1220;display:block;
}
.auto-director-page #ad-meta{
  margin:11px 0 0;color:var(--ad-dim);font:700 11.5px/1.7 inherit;
}
.auto-director-page #ad-result .ad-actions{border-top:0;padding-top:0;margin-top:14px}

/* 안내 · 오류 */
.auto-director-page .maker-error-v2100{
  margin:9px 0 0;color:#8f2f1c;font:800 11.5px/1.6 inherit;
}
.auto-director-page .maker-auto-policy-v2100{
  margin:16px 0 0;padding:14px 16px;
  border:1px solid var(--ad-edge);border-radius:14px;background:var(--ad-well);
}
.auto-director-page .maker-auto-policy-v2100 strong{
  display:block;margin:0 0 7px;color:var(--ad-ink);font:900 12.5px/1.4 inherit;
}
.auto-director-page .maker-auto-policy-v2100 small,
.auto-director-page .maker-auto-policy-v2100 p,
.auto-director-page .maker-auto-policy-v2100 li{
  color:var(--ad-dim);font:700 11px/1.75 inherit;
}

/* ══════════ 좁은 화면 ══════════ */
@media (max-width:760px){
  .auto-director-page .auto-director{width:calc(100% - 28px);padding:20px 0 64px}
  .auto-director-page .ad-hero{grid-template-columns:1fr;padding:20px}
  .auto-director-page .maker-orb-v2100{display:none}
  .auto-director-page .ad-card{padding:16px 15px 18px;border-radius:16px}
  .auto-director-page #ad-presets,
  .auto-director-page #ad-tiers{grid-template-columns:1fr}
  .auto-director-page .ad-actions{align-items:stretch}
  .auto-director-page .ad-total{margin:0 0 6px}
  .auto-director-page button.ad-btn:not(#nope):not(#_){width:100%}
}

/* ============================================================
   v5400 — 한 줄 → 미리보기 → 만들기

   왜 바꿨나
     예전엔 아무것도 안 정해도 스크롤을 네 번 내려야 시작 단추가 나왔다.
     그런데 꼭 정해야 하는 건 **한 줄** 하나뿐이었고, 더 나쁜 건
     **돈을 다 쓰고 나서야 무엇이 만들어졌는지 알았다는 것**이다.
     이제 짜기(공짜) → 확인 → 만들기(유료) 로 나눈다.
   ============================================================ */

/* ── 예시 칩 ─────────────────────────────────────────── */
.auto-director-page .ad-egs{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 0}
.auto-director-page button.ad-eg:not(#_):not(#_){
  min-height:28px;padding:0 11px;border-radius:999px;
  background:var(--ad-key-soft) !important;border-color:transparent !important;
  color:var(--ad-key) !important;font:700 11px/1 inherit;cursor:pointer;
}

/* ── 접히는 세부 설정 ────────────────────────────────── */
.auto-director-page .ad-more{
  margin:16px 0 0;border:1px solid var(--ad-edge);border-radius:14px;
  background:var(--ad-well);overflow:hidden;
}
/* ★ 접히는 판이라는 걸 **단추처럼** 보여 준다.
   글자만 있으면 누를 수 있는 줄 모른다 — 실제로 못 알아보셨다.
   테두리·바탕·손 모양 커서·＋ 표시를 다 준다. */
.auto-director-page .ad-more > summary{
  display:flex;align-items:center;gap:9px;
  padding:13px 15px;cursor:pointer;list-style:none;
  background:#fff;border-bottom:1px solid transparent;
  color:var(--ad-ink);font:800 12.5px/1 inherit;
  transition:background .14s ease;
}
.auto-director-page .ad-more > summary:hover{background:var(--ad-key-soft)}
.auto-director-page .ad-more[open] > summary{border-bottom-color:var(--ad-edge)}
.auto-director-page .ad-more > summary::-webkit-details-marker{display:none}
.auto-director-page .ad-more > summary i{
  font-style:normal;display:grid;place-items:center;
  width:22px;height:22px;border-radius:7px;
  background:var(--ad-key-soft);color:var(--ad-key);
  font:900 13px/1 inherit;transition:transform .15s ease;
}
.auto-director-page .ad-more[open] > summary i{transform:rotate(45deg)}
.auto-director-page .ad-more > summary b{color:var(--ad-ink);font:900 12.5px/1 inherit}
.auto-director-page .ad-more > summary small{margin-left:auto;color:var(--ad-faint);font:700 11px/1 inherit}
.auto-director-page .ad-more > :not(summary){margin:0 15px 15px}
.auto-director-page .ad-opt{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  color:var(--ad-dim);font:800 11.5px/1 inherit;
}

/* ── ② 스토리보드 ───────────────────────────────────── */
.auto-director-page .ad-card-head .ad-re{margin-left:auto}
.auto-director-page button.ad-re:not(#_):not(#_){
  min-height:32px;padding:0 12px;border-radius:10px;
  background:#fff !important;font:800 11.5px/1 inherit;cursor:pointer;
}

.auto-director-page .ad-boardhead{margin:0 0 14px}
.auto-director-page .ad-boardhead strong{
  display:block;color:var(--ad-ink);font:900 17px/1.3 inherit;
}
.auto-director-page .ad-boardhead p{
  margin:6px 0 0;color:var(--ad-dim);font:700 12.5px/1.7 inherit;
}
.auto-director-page .ad-boardhead em{
  display:block;margin:8px 0 0;padding:9px 12px;border-radius:10px;
  background:var(--ad-key-soft);color:var(--ad-key);
  font-style:normal;font:800 11.5px/1.6 inherit;
}

/* 화면 결 한 줄 — 여기서 AI 가 고른 스타일을 알려 주고 바꾸게 한다 */
.auto-director-page .ad-styleline{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0 0 12px;padding:11px 14px;
  border:1px solid var(--ad-edge);border-radius:12px;background:var(--ad-well);
}
.auto-director-page .ad-styleline > span{color:var(--ad-dim);font:800 11.5px/1 inherit}
.auto-director-page .ad-styleline > b{color:var(--ad-ink);font:900 12.5px/1 inherit}
.auto-director-page .ad-styleline > small{
  flex:1 1 200px;min-width:0;color:var(--ad-faint);font:700 11px/1.5 inherit;
}

/* 씬 목록 */
.auto-director-page .ad-shots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.auto-director-page .ad-shot{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  padding:12px 13px;border:1px solid var(--ad-edge);border-radius:14px;background:var(--ad-well);
}
.auto-director-page .ad-shot-no{
  display:grid;place-items:center;
  width:30px;height:26px;border-radius:8px;
  background:var(--ad-key-soft);color:var(--ad-key);font:900 12px/1 inherit;
}
.auto-director-page .ad-shot-body{min-width:0}
.auto-director-page .ad-shot-ko{
  margin:0 0 7px;color:var(--ad-ink);font:800 12.5px/1.5 inherit;
}
.auto-director-page .ad-shot textarea:not(#_):not(#_){
  width:100%;padding:9px 11px;border-radius:10px;resize:vertical;
  background:#fff !important;font:700 11.5px/1.65 inherit;
}
.auto-director-page .ad-shot-craft{
  display:block;margin:6px 0 0;color:var(--ad-faint);font:800 10.5px/1.5 inherit;
}

/* ③ 만들기 · 낡은 판 알림 */
.auto-director-page .ad-stale{
  margin:12px 0 0;padding:11px 14px;border-radius:12px;
  background:var(--ad-key-soft);color:var(--ad-key);font:800 11.5px/1.6 inherit;
}
.auto-director-page .ad-stale.is-bad{background:#fdf1ee;color:#8f2f1c}
.auto-director-page .ad-stale[hidden]{display:none}

/* 「이야기 짜기」 단추 — 공짜라는 걸 색으로도 알려 준다 */
.auto-director-page button#ad-write:not(#_):not(#_){
  display:inline-flex;align-items:center;gap:12px;
  min-height:54px;padding:0 24px;border-radius:14px;
  background:var(--ad-key) !important;border-color:transparent !important;
  color:#fff !important;cursor:pointer;
}
.auto-director-page button#ad-write:hover:not(#_):not(#_){background:#27538f !important}
.auto-director-page button#ad-write[disabled]:not(#_):not(#_){opacity:.55;cursor:default}
.auto-director-page #ad-write strong{color:#fff;font:900 14px/1.2 inherit}
.auto-director-page #ad-write small{color:rgba(255,255,255,.86);font:800 11px/1.2 inherit}
.auto-director-page #ad-write .ad-start-arrow{margin-left:auto;color:#fff;font:900 15px/1 inherit}

@media (max-width:760px){
  .auto-director-page .ad-shot{grid-template-columns:1fr}
  .auto-director-page button#ad-write:not(#_):not(#_){width:100%}
}

/* ══════════════════════════════════════════════════════════
   어둠 한 벌 v5120 — 2026-08-31

   이 시트에도 다크 규칙이 한 줄도 없었다(실측 0개). 그래서 강조 파랑
   --ad-key:#2f62ad 가 어두운 판 위에 그대로 남아 2.16 이었다 —
   「325 크레딧」 같은 값이 안 읽혔다. 큰 제목 「이야기부터 영상까지.」도
   같은 파랑이라 2.41 로, 큰 글씨 기준(3.0)마저 못 넘었다.

   ★ 왜 theme.js 가 못 살렸나. 그 단추에 어두운 결이 깔려 있었고,
     결이 보이면 무조건 비켜 가도록 내가 오늘 만들어 둔 탓이다.
     그 가드는 방금 「제일 밝은 마디로 재고, 진짜 밝을 때만 비킨다」로
     고쳤다. 다만 theme.js 가 살리면 글씨가 흰색이 되어 **파랑이라는
     뜻**이 사라진다. 값을 알리는 색이니 여기서 파랑인 채로 밝힌다.
     #6ea8ff 는 밝기 .387 이라 theme.js 의 잉크 규칙(.35 미만만 손댐)에
     아예 안 걸린다 — 서로 안 부딪친다.
   ══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .auto-director-page{
  --ad-card:#34383d;
  --ad-edge:rgba(255,255,255,.10);
  --ad-edge-strong:rgba(255,255,255,.24);
  --ad-ink:#f1f2f4;
  --ad-dim:#c3c9d2;
  --ad-faint:#a8b0ba;
  --ad-key:#6ea8ff;          /* 카드(#34383d) 위에서 4.90 */
  --ad-key-soft:rgba(110,168,255,.16);
  --ad-well:#2a2d31;

  background:
    radial-gradient(circle at 12% 4%,rgba(110,168,255,.07),transparent 30rem),
    radial-gradient(circle at 88% 14%,rgba(150,140,230,.06),transparent 32rem),
    #26282b !important;
}

/* ============================================================
   v5310 (2026-09-05) — 단추 입체감 (사장님: "영화 제작소 단추 입체감이 없다")
   등급 카드·단추·세부 설정 줄에 테두리 + 위 하이라이트 + 아래 그림자.
   ============================================================ */
.auto-director-page :is(.ad-tier,button.ad-btn,.ad-more > summary,.ad-re,.ad-eg,.ad-check):not(#nope):not(#_):not(#__){
  background:#fff !important;
  background-image:linear-gradient(180deg,#ffffff,#f3f7fc) !important;
  border:1px solid #c9d7ea !important;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(16,40,90,.14), 0 4px 10px -6px rgba(16,40,90,.35) !important;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease !important;
}
.auto-director-page :is(.ad-tier,button.ad-btn,.ad-re,.ad-eg):hover:not([disabled]):not(#nope):not(#_):not(#__){
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 #fff, 0 2px 4px rgba(16,40,90,.16), 0 8px 16px -8px rgba(16,40,90,.4) !important;
}
.auto-director-page :is(.ad-tier,button.ad-btn,.ad-re,.ad-eg):active:not([disabled]):not(#nope):not(#_):not(#__){
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(16,40,90,.18) !important;
}
.auto-director-page .ad-more:not(#nope):not(#_):not(#__){box-shadow:0 4px 10px -6px rgba(16,40,90,.3)}
.auto-director-page .ad-more > summary:not(#nope):not(#_):not(#__){border:0 !important;border-radius:0 !important;box-shadow:inset 0 1px 0 #fff !important}
.auto-director-page .ad-tier.active:not(#nope):not(#_):not(#__){
  background:var(--ad-key-soft) !important;background-image:linear-gradient(180deg,#f2f7ff,#e4eefb) !important;
  border-color:var(--ad-key) !important;
  box-shadow:0 0 0 2px var(--ad-key), 0 6px 14px -6px rgba(31,80,170,.5) !important;
}
.auto-director-page :is(button.ad-btn.primary,button#ad-start):not(#nope):not(#_):not(#__){
  background:var(--ad-key) !important;
  background-image:linear-gradient(180deg,#4a7fd0,#2f62ad) !important;
  border:1px solid #24509a !important;color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(16,40,90,.25), 0 6px 14px -6px rgba(31,80,170,.6) !important;
}
.auto-director-page :is(button.ad-btn.primary,button#ad-start):hover:not([disabled]):not(#nope):not(#_):not(#__){background-image:linear-gradient(180deg,#5289da,#27538f) !important}
.auto-director-page :is(button.ad-btn.primary,button#ad-start):active:not([disabled]):not(#nope):not(#_):not(#__){box-shadow:inset 0 2px 5px rgba(10,30,70,.35) !important}
.auto-director-page :is(.ad-tier,button.ad-btn,button#ad-start)[disabled]:not(#nope):not(#_):not(#__){transform:none;box-shadow:none !important;opacity:.55}
html[data-theme="dark"] .auto-director-page :is(.ad-tier,button.ad-btn,.ad-more > summary,.ad-re,.ad-eg,.ad-check):not(#nope):not(#_):not(#__){
  background:#3e4348 !important;background-image:linear-gradient(180deg,#464b51,#363a3f) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.35), 0 4px 10px -6px rgba(0,0,0,.6) !important;
}
html[data-theme="dark"] .auto-director-page .ad-tier.active:not(#nope):not(#_):not(#__){background-image:linear-gradient(180deg,#334158,#2b3a50) !important;border-color:#9dc2ff !important;box-shadow:0 0 0 2px #9dc2ff !important}