/* 11th URL to Video — 모달 스타일.
   힉스필드식 2단 모달: 좌측 비주얼 / 우측 폼. 섹션은 좌우 슬라이드로 전환한다.
   빌드 단계 없음 — 이 파일이 전부다. */

:root {
	--bg: #08080a;
	--panel: #121216;
	--panel-2: #17171c;
	--line: #26262e;
	--line-soft: #1e1e25;
	--text: #ececf1;
	--dim: #8f8f9c;
	--dimmer: #5d5d6b;
	--accent: #4ade80;
	--accent-dim: #1c3a2a;
	--warn: #fbbf24;
	--bad: #f87171;
	--radius: 14px;
	--font: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}

/* ── 트리거 (실제 제품에서는 챗의 UGC 버튼 자리) ──────────────────── */
.stage {
	min-height: 100vh;
	display: grid;
	place-items: center;
	background: radial-gradient(1200px 600px at 50% -10%, #16161d 0%, var(--bg) 60%);
}
.trigger {
	display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
}
.trigger h1 { font-size: 26px; margin: 0; letter-spacing: -0.4px; }
.trigger p { color: var(--dim); margin: 0; max-width: 460px; line-height: 1.6; }
.btn-launch {
	margin-top: 8px; padding: 13px 26px; border-radius: 999px; border: 0;
	background: var(--accent); color: #06210f; font-weight: 700; font-size: 15px;
	cursor: pointer; font-family: var(--font);
}
.btn-launch:hover { filter: brightness(1.08); }

/* ── 모달 껍데기 ──────────────────────────────────────────────────── */
.overlay {
	position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(6px); display: none; place-items: center; z-index: 50; padding: 24px;
}
.overlay.open { display: grid; }

.modal {
	width: min(1120px, 100%); height: min(760px, 92vh);
	background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
	display: grid; grid-template-columns: 43% 1fr; overflow: hidden;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}


/* ── 좌: 비주얼 ───────────────────────────────────────────────────── */
.visual {
	position: relative; min-height: 0; background: #0d0d11; border-right: 1px solid var(--line);
	display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
.visual-img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
	padding: 34px 34px 130px; opacity: 0; transition: opacity 0.45s ease;
}
.visual-img.show { opacity: 1; }
/* 🩸 실측 2026-09-02: 포스터는 `.visual-img`(contain + 큰 여백), 영상은 `.visual-vid`(cover)로
   **규칙이 서로 달랐다.** 그래서 재생이 시작되는 순간 여백 있는 작은 그림 → 꽉 찬 그림으로
   튀었다("재생 직전에는 짧게 나와"). 영상의 포스터로 쓸 때는 영상과 똑같은 기하로 그린다. */
.visual-img.as-poster { object-fit: cover; padding: 0; }
/* 모델 턴어라운드 영상 — 고른 사람이 실제로 어떻게 보이는지가 정지컷보다 훨씬 잘 전달된다.
   제품컷은 contain(잘리면 안 됨), 인물 영상은 cover(화면을 꽉 채워야 함)로 다르게 간다. */
.visual-vid {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity 0.45s ease;
}
.visual-vid.show { opacity: 1; }
/* 소리 버튼 — 영상이 있을 때만 뜬다. 그라디언트 위(z-index 2)에 얹어야 눌린다. */
.sound-btn {
	position: absolute; right: 14px; top: 14px; z-index: 3;
	display: inline-flex; align-items: center; gap: 6px;
	font: inherit; font-size: 12px; font-weight: 600; color: #fff;
	background: rgba(12, 12, 16, 0.62); border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(8px); padding: 7px 12px; border-radius: 999px; cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.sound-btn:hover { background: rgba(12, 12, 16, 0.85); border-color: rgba(255, 255, 255, 0.35); }
.sound-btn.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.visual::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(8,8,10,0.95) 0%, rgba(8,8,10,0.35) 45%, rgba(8,8,10,0.1) 100%);
	pointer-events: none;
}
.visual-body { position: relative; z-index: 2; padding: 26px 26px 18px; }
.visual-kicker {
	display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
	background: var(--accent-dim); padding: 5px 10px; border-radius: 999px; margin-bottom: 12px;
}
.visual-title { font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.5px; margin: 0 0 8px; }
.visual-sub { color: #b6b6c2; line-height: 1.55; margin: 0; font-size: 13px; }
.visual-empty {
	position: absolute; inset: 0; display: grid; place-items: center; color: var(--dimmer);
	font-size: 40px; z-index: 1;
}

/* 하단 스텝 인디케이터 (힉스필드의 4분할 바) */
/* 🩸 클릭 영역이 바(2px)와 라벨에만 걸려 "이상한 데를 눌러야" 했다. 칸 전체를 히트박스로
   만들고(패딩 포함), 갈 수 있는 칸에만 손가락 커서를 준다. */
.steps { position: relative; z-index: 2; display: flex; gap: 8px; padding: 0 26px 18px; }
.step { flex: 1; padding: 8px 0 4px; border-radius: 6px; }
.step.go { cursor: pointer; }
.step.go:hover { background: rgba(255, 255, 255, 0.05); }
.step.go:hover .step-label { color: var(--text); }
.step:not(.go) { cursor: default; }
.step-bar { height: 2px; background: #2c2c35; border-radius: 2px; overflow: hidden; }
.step-bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.4s ease; }
.step.done .step-bar > i, .step.active .step-bar > i { width: 100%; }
.step.active .step-bar > i { background: var(--accent); }
.step.done .step-bar > i { background: #2f6b46; }
.step-label { font-size: 10.5px; color: var(--dimmer); margin-top: 7px; letter-spacing: 0.01em; }
.step.active .step-label { color: var(--text); font-weight: 600; }
.step.done .step-label { color: var(--dim); }

/* ── 우: 폼 ───────────────────────────────────────────────────────── */
.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* 🩸 min-height:0 이 없으면 grid 자식이 내용 높이만큼 늘어나고, .modal 의 overflow:hidden 이
   아래를 통째로 잘라낸다 — 효용감·요구사항·이미지·푸터가 화면에서 사라진다(실측 2026-09-01). */
.pane-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 24px 0; flex: 0 0 auto;
}
.pane-step { font-size: 12px; color: var(--dim); }
.btn-x {
	background: transparent; border: 1px solid var(--line); color: var(--dim);
	width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1;
}
.btn-x:hover { color: var(--text); border-color: #3a3a45; }

.pane-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 24px 8px; }
.pane-scroll::-webkit-scrollbar { width: 8px; }
.pane-scroll::-webkit-scrollbar-thumb { background: #2a2a33; border-radius: 4px; }

/* 섹션 슬라이드 */
.section { display: none; }
.section.active { display: block; animation: slide-in 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.section.active.back { animation-name: slide-in-back; }
@keyframes slide-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

h2.sec-title { font-size: 21px; font-weight: 700; letter-spacing: -0.3px; margin: 4px 0 6px; }
p.sec-desc { color: var(--dim); margin: 0 0 20px; line-height: 1.6; }

/* label 과 div 둘 다 쓴다 — 버튼이 든 필드는 label 이면 안 된다(위 index.html 주석). */
.fld { display: block; margin-bottom: 14px; }
.fld > span { display: block; font-size: 12px; color: var(--dim); margin-bottom: 6px; font-weight: 600; }
input[type="text"], input[type="url"], textarea, select {
	width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
	border-radius: 10px; padding: 11px 13px; font-family: var(--font); font-size: 14px; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: #3f7f5a; }
textarea { resize: vertical; min-height: 72px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--dimmer); }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
	padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2);
	color: var(--dim); font-size: 12.5px; cursor: pointer; font-family: var(--font);
}
.chip:hover { border-color: #3a3a45; color: var(--text); }
.chip.on { background: var(--accent-dim); border-color: #2f6b46; color: var(--accent); font-weight: 600; }

.hint { font-size: 12px; color: var(--dimmer); line-height: 1.55; margin-top: 8px; }
.notice {
	border: 1px solid var(--line); border-left: 3px solid var(--warn); background: #1a1710;
	padding: 11px 13px; border-radius: 8px; color: #e6d5a8; font-size: 12.5px; line-height: 1.6; margin: 12px 0;
}
.notice.bad { border-left-color: var(--bad); background: #1c1213; color: #f0c3c3; }
.notice.ok { border-left-color: var(--accent); background: #101a14; color: #bfe8cd; }
.notice b { color: #fff; }

/* 스켈레톤 */
.skel { background: linear-gradient(90deg, #1a1a20 25%, #23232b 50%, #1a1a20 75%); background-size: 200% 100%;
	animation: shimmer 1.3s infinite linear; border-radius: 8px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel-line { height: 13px; margin-bottom: 10px; }
.skel-block { height: 74px; margin-bottom: 12px; }
.skel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.skel-grid > i { aspect-ratio: 1; display: block; }
.analysing { display: flex; align-items: center; gap: 9px; color: var(--dim); font-size: 13px; margin-bottom: 16px; }
.spinner {
	width: 15px; height: 15px; border: 2px solid #2f2f3a; border-top-color: var(--accent);
	border-radius: 50%; animation: spin 0.75s linear infinite; flex: 0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 이미지 그리드 */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.img-cell {
	position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden;
	border: 2px solid transparent; background: #0f0f13; cursor: pointer;
}
.img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-cell.on { border-color: var(--accent); }
.img-cell:not(.on) img { opacity: 0.34; filter: grayscale(0.5); }
.img-cell .tick {
	position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--accent); color: #06210f; font-size: 12px; font-weight: 800;
	display: grid; place-items: center; opacity: 0;
}
.img-cell.on .tick { opacity: 1; }
.img-cell .role {
	position: absolute; left: 0; right: 0; bottom: 0; font-size: 9.5px; padding: 3px 5px;
	background: rgba(0,0,0,0.6); color: #c9c9d4; text-align: center;
}
.img-add {
	aspect-ratio: 1; border-radius: 9px; border: 1px dashed #3a3a46; background: transparent;
	color: var(--dim); font-size: 22px; cursor: pointer; display: grid; place-items: center;
}
.img-add:hover { border-color: var(--accent); color: var(--accent); }

.menu {
	/* 🩸 `absolute` + body 부착 + 뷰포트 좌표는 서로 안 맞는다 — 스크롤한 만큼 어긋나
	   메뉴가 화면 밖(top 1139 / 뷰포트 739)으로 나갔다. 좌표가 뷰포트 기준이면 `fixed` 다. */
	position: fixed; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
	padding: 5px; z-index: 60; box-shadow: 0 12px 30px rgba(0,0,0,0.5); min-width: 190px;
}
.menu button {
	display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text);
	padding: 9px 11px; border-radius: 7px; cursor: pointer; font-size: 13px; font-family: var(--font);
}
.menu button:hover { background: #23232c; }
.menu small { display: block; color: var(--dimmer); font-size: 11px; margin-top: 2px; }

/* 모델 그리드 */
/* 6명이라 3열이면 2행에 딱 맞는다 — auto-fill 로 두면 5+1 로 떨어져 한 명만 외따로 남았다. */
.model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.model-cell {
	cursor: pointer; border-radius: 12px; overflow: hidden; border: 2px solid transparent;
	background: #0f0f13; transition: border-color 0.15s ease, transform 0.15s ease;
}
.model-cell:hover { border-color: #3a3a45; transform: translateY(-2px); }
.model-cell.on { border-color: var(--accent); }
.model-cell img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
/* 이름이 두 줄로 흐르면 카드 높이가 제각각이 된다 — 한 줄로 자른다(전체는 title 로). */
.model-cell .m-name {
	font-size: 12px; padding: 8px 9px 3px; font-weight: 600;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.model-cell .m-meta { font-size: 11px; padding: 0 9px 9px; color: var(--dimmer); line-height: 1.45; }

/* 연출 카드 */
.dir-card {
	display: flex; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 12px;
	background: var(--panel-2); cursor: pointer; margin-bottom: 10px; align-items: flex-start;
}
.dir-card.on { border-color: var(--accent); background: #101a14; }
.dir-card .radio {
	width: 19px; height: 19px; border-radius: 50%; border: 2px solid #3a3a46; flex: 0 0 auto; margin-top: 2px;
	display: grid; place-items: center;
}
.dir-card.on .radio { border-color: var(--accent); background: var(--accent); color: #06210f; font-size: 11px; font-weight: 800; }
.dir-card h3 { margin: 0 0 5px; font-size: 15px; font-weight: 700; }
/* 🩸 길이는 여기서 흡수한다 — 모델에 되돌려 보내지 않는다(director.py 주석 참조).
   2줄에서 자르고 전문은 title 속성으로 남긴다. 카드 높이가 내용에 흔들리지 않는다. */
.dir-card .one, .dir-card .why {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
	overflow: hidden; line-height: 1.55;
}
.dir-card .one { color: var(--dim); font-size: 12.5px; margin: 0 0 8px; }
.dir-card .why { color: #a8c9b6; font-size: 12px; margin: 0; }
.dir-card h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-card .ids { color: var(--dimmer); font-size: 10.5px; margin-top: 8px; font-family: ui-monospace, monospace; }
.badge-rec {
	display: inline-block; background: var(--accent); color: #06210f; font-size: 10px; font-weight: 800;
	padding: 3px 8px; border-radius: 999px; margin-bottom: 7px;
}

/* 대본 진행 */
.log { background: #0d0d11; border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px; max-height: 230px; overflow-y: auto; }
.log-row { font-size: 12px; line-height: 1.6; color: var(--dim); font-family: ui-monospace, monospace; }
.log-row b { color: var(--text); font-weight: 600; }
.log-row.ok { color: #9ad9b3; }
.log-row.bad { color: #eda8a8; }
.log-row.soft { color: #d9c48f; }
.log-row.head { color: var(--text); margin-top: 6px; }

.lines { counter-reset: ln; margin: 14px 0; }
.line-row {
	display: flex; gap: 11px; padding: 11px 13px; background: var(--panel-2);
	border: 1px solid var(--line-soft); border-radius: 10px; margin-bottom: 7px; line-height: 1.55;
}
.line-row .n { color: var(--accent); font-weight: 700; flex: 0 0 auto; font-size: 12px; padding-top: 2px; }
.line-row .t { flex: 1; }
.line-row .c { color: var(--dimmer); font-size: 11px; flex: 0 0 auto; padding-top: 3px; }

.judge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 12px 0; }
.judge-item { display: flex; gap: 7px; align-items: center; font-size: 12px; color: var(--dim); }
.judge-item .mark { width: 15px; text-align: center; }
.judge-item.pass .mark { color: var(--accent); }
.judge-item.fail { color: #eda8a8; }
.judge-item.fail .mark { color: var(--bad); }

/* ── 푸터 ─────────────────────────────────────────────────────────── */
.pane-foot {
	flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
	gap: 10px; padding: 14px 24px 18px; border-top: 1px solid var(--line-soft);
}
.btn {
	padding: 11px 20px; border-radius: 10px; border: 1px solid var(--line); background: transparent;
	color: var(--text); font-size: 14px; cursor: pointer; font-family: var(--font); font-weight: 600;
}
.btn:hover:not(:disabled) { border-color: #3a3a45; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #06210f; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-ghost { border: 0; color: var(--dim); }
.btn-sm { padding: 8px 14px; font-size: 12.5px; }
.foot-note { font-size: 11.5px; color: var(--dimmer); }
.hidden { display: none !important; }

/* 기술 경고 묶음 — 사용자가 할 일이 없는 진단은 접어 둔다.
   실측 2026-09-01: 경고 4줄이 폼 위를 다 차지해 제품명이 스크롤 아래로 밀렸다. */
details.diag { border: 1px solid var(--line-soft); border-radius: 8px; margin: 10px 0 16px; background: #101015; }
details.diag > summary {
	cursor: pointer; padding: 9px 12px; font-size: 12px; color: var(--dimmer); list-style: none;
}
details.diag > summary::-webkit-details-marker { display: none; }
details.diag > summary::before { content: "▸ "; }
details.diag[open] > summary::before { content: "▾ "; }
details.diag > summary:hover { color: var(--dim); }
details.diag .diag-body { padding: 0 12px 11px; }
details.diag .diag-body div { font-size: 12px; color: var(--dim); line-height: 1.65; }


/* ── AI 편집 (#7 #16) ──────────────────────────────────────────────── */
.fld-head { display: flex; align-items: center; justify-content: space-between; }
.btn-ai {
	background: var(--accent-dim); border: 1px solid #2f6b46; color: var(--accent);
	font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
	cursor: pointer; font-family: var(--font); margin-left: 8px;
}
.btn-ai:hover { filter: brightness(1.25); }
.pop {
	position: fixed; z-index: 70; width: 330px; background: var(--panel-2);
	border: 1px solid var(--line); border-radius: 12px; padding: 12px;
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6);
}
.pop-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.pop-ta { width: 100%; font-size: 13px; }
.pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.pop-note { font-size: 11.5px; color: var(--dimmer); }

/* ── 이미지 그리드 6열 · 더보기 (#10) ──────────────────────────────── */
.img-grid { grid-template-columns: repeat(6, 1fr); }
.img-more { font-size: 12px; font-weight: 700; }

/* ── 대사 인라인 편집 (#20) ────────────────────────────────────────── */
.line-edit {
	flex: 1; background: transparent; border: 0; color: var(--text);
	font-family: var(--font); font-size: 14px; line-height: 1.55; resize: none;
	padding: 0; outline: none; overflow: hidden; min-height: 0;
}
.line-row:focus-within { border-color: #3f7f5a; }

/* popover 딤드(#8) · 취소(#9) · 스켈레톤 오버레이(#4) */
.pop-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 65; }
.pop-btns { display: flex; gap: 7px; }
/* 🩸 스켈레톤을 필드 "아래에" 작게 그렸더니 어디가 바뀌는지 안 보였다.
   바뀔 자리 **위에 같은 크기로** 덮는다. */
.skel-wrap { position: relative; }
.skel-over {
	position: absolute; inset: 0; border-radius: 10px; padding: 11px 13px;
	background: var(--panel-2); border: 1px solid var(--line);
	display: flex; flex-direction: column; gap: 9px; justify-content: flex-start;
}
.skel-over .skel-line { height: 13px; margin: 0; }

/* 앵글 근거 입력 — 근거를 요구하는 앵글을 골랐을 때만 카드 밑에 열린다.
   안 받으면 모델이 그 사실을 지어낸다(2026-09-03 실측). */
.angle-fact { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.angle-fact label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; line-height: 1.5; }
.angle-fact textarea { width: 100%; min-height: 56px; }

/* 비트 타임라인 — 대사만으로는 무엇이 보일지 알 수 없다(여정 ⑤ 승인 요건). */
.beats { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.beats h4 { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: var(--dim); }
.beats .beat { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; line-height: 1.55; }
.beats .beat .t { flex: 0 0 52px; color: var(--dimmer); font-variant-numeric: tabular-nums; }
.beats .beat .d { flex: 1; min-width: 0; }

/* 내 모델 사진 쓰기 — 프리셋 그리드 아래 창구(여정 ③ 의 (b) 경로). */
.custom-model { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.custom-model .hint { margin-top: 6px; }

/* ── W1 · 1단계 — URL 필드가 주인공 ─────────────────────────────────────
   종전엔 라벨 달린 보통 필드였다. 이 화면에서 사용자가 할 일은 하나뿐이라
   필드가 시선의 중심이어야 한다. 라벨을 없애고 placeholder 가 그 역할을 한다. */
/* ⚠️ 셀렉터를 낮추지 마라. `.url-hero` (0,1,0) 는 위의 `input[type="url"]` (0,1,1) 에
   **순서와 무관하게** 진다. 실측 2026-09-03: 16px 로 적어 뒀는데 화면엔 14px 로 나왔고,
   그 옆 보조 버튼이 15px·600·초록이라 주인공이 뒤집혀 있었다. 특정도로 이겨야 한다. */
input[type="url"].url-hero {
  width: 100%; margin-top: 20px; padding: 20px 20px;
  font-size: 18px; font-weight: 500; line-height: 1.5; border-radius: 12px;
  background: var(--panel-2); border: 1px solid #3a3a44;
}
input[type="url"].url-hero::placeholder { font-size: 17px; font-weight: 400; }
input[type="url"].url-hero:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.16);
}

/* 보조 경로 — 로그인 화면의 "다른 방법으로 로그인" 위계.
   주인공을 이기지 않게 구분선 아래, 가운데, 작은 글씨. */
.alt-path { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; }
.alt-path .alt-or { display: block; font-size: 12px; color: var(--dimmer); margin-bottom: 12px; }
.alt-path .hint { margin-top: 8px; }
/* 보조는 보조로 보여야 한다. 액센트 초록 + 600 굵기 + 15px 였을 때
   형이 "화면에 들어오면 이거밖에 안 보인다"고 하셨다(2026-09-03 실사용).
   초록을 빼고 흐린 회색 13px 로 내린다 — 밑줄만 남겨 눌리는 것임을 알린다. */
.alt-link {
  background: none; border: none; padding: 4px 8px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--dim);
  text-decoration: underline; text-underline-offset: 3px;
}
.alt-link:hover { opacity: .8; }

/* W2 · 실패 안내 — 필드 바로 아래 인라인. 별도 화면을 만들지 않는다. */
/* 🩸 형 지적(2026-09-04): "모양이 너무 별로야. 왼쪽에만 뭔가 하이라이팅된 저거 필요 없고."
   왼쪽 3px 빨간 띠 + 붉은 배경 + 분홍 글씨였다 — **사고가 난 것처럼 보였다.** 못 읽은 건
   사고가 아니라 그냥 안 되는 것이다. 띠를 빼고, 붉은 톤을 빼고, 갈 곳을 안에 넣는다. */
.fail-inline { margin-top: 12px; padding: 14px 16px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line); }
.fail-inline .fail-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.fail-inline .fail-detail { margin: 5px 0 0; font-size: 13px; line-height: 1.6; color: var(--dim); }
/* 실패한 자리에서는 보조 경로가 **유일한 길**이다. 그때만 눈에 띄게 올린다 —
   평소엔 보조로, 그때만 주인공으로. 버튼을 하나 더 만들지 않고 **있던 것을 켠다.** */
.alt-path.urgent { border-top-color: var(--accent-dim); }
.alt-path.urgent .alt-or { color: var(--dim); }
.alt-link.urgent {
  color: #06210f; background: var(--accent); font-weight: 700;
  padding: 10px 18px; border-radius: 999px; text-decoration: none;
}
.alt-link.urgent:hover { opacity: .9; }

/* W3 · 요구사항 — 제안서처럼 보여야 한다. 이미 답이 들어차 있고 바꾸기만 하면 되는 모양. */
.need { padding: 18px 0; border-bottom: 1px solid var(--line); }
.need:last-child { border-bottom: none; }
.need-head h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; line-height: 1.5; }
.need-head .hint { margin: 0 0 12px; }
.need-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 14px; border-radius: 999px; cursor: pointer; font-size: 13.5px; line-height: 1.4;
  border: 1px solid var(--line); background: var(--soft); color: var(--dim); }
.chip:hover { border-color: var(--dimmer); }
.chip.on { border-color: var(--accent); background: rgba(74,222,128,.12); color: var(--accent); font-weight: 600; }
.need-text, .need-other { width: 100%; margin-top: 4px; }
.need-other { margin-top: 10px; }

/* 실제로 영상에 넘어가는 제품 사진 표시 — 켠 것과 쓰이는 것이 다르다(상한 3장). */
.img-cell .badge-sent {
  position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; background: var(--accent); color: #08130c;
}
/* 상한에 걸려 더는 못 켜는 칸 — 눌러도 되는 것처럼 보이면 안 된다. */
.img-cell.blocked { cursor: not-allowed; }
.img-cell.blocked img { opacity: 0.16; }
.img-cell.shake { animation: cell-shake .34s; }
@keyframes cell-shake {
  0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
/* 🩸 형이 "이걸 어디서 골라?" 라고 하신 자리. 캡션이 제목처럼만 있었고 **누르면 된다는
   말이 없었다.** 조작 방법을 캡션 안에 한 줄로 붙인다. */
#imgCaption { display: block; }
#imgCaption b { color: var(--accent); font-variant-numeric: tabular-nums; }
#imgCaption .cap-hint { display: block; margin-top: 3px; font-size: 11.5px; color: var(--dim); font-weight: 400; }
#imgCaption.cap-warn { color: var(--bad); }
#imgCaption.cap-warn b { color: var(--bad); }

/* ── 모바일(900px 미만) ────────────────────────────────────────────────
   실측 2026-09-03 (390px): 세로 스택 한 줄만 있었고 그 안에서 셋이 깨졌다.

   ① 190px 비주얼 안에 제목·부제·스텝 4개가 다 들어가 **배경 사진과 겹쳐** 안 읽혔다.
      → 부제를 접고 제목을 줄인다. 그 정보는 **우측에 그대로 있다** — 좌측은 분위기다.
   ② 푸터 버튼이 두 줄로 깨졌다("제품 읽어 / 오기"). → 줄바꿈 금지.
   ③ 푸터 안내가 버튼을 밀어 같이 두 줄이 됐다. → 푸터를 **세로로 쌓고** 안내를 위에.
      숨기지 않는다 — "주소를 넣거나 사진으로 시작해 주세요"는 다음 행동을 말하는 문구다. */
@media (max-width: 900px) {
	.modal { grid-template-columns: 1fr; grid-template-rows: 190px 1fr; height: 94vh; }

	/* ① 좁은 비주얼에서 글이 사진 위에 겹친다 */
	.visual-sub { display: none; }
	.visual-title { font-size: 19px; line-height: 1.3; }
	.visual-body { padding-bottom: 6px; }
	/* 스텝 라벨이 배경 사진 위라 대비가 모자란다 — 바닥을 깔아 준다 */
	.steps { background: rgba(8, 8, 10, 0.72); backdrop-filter: blur(4px); border-radius: 8px; padding: 6px 8px; }

	/* ②③ 푸터 — 안내를 위에 쌓고 버튼은 줄바꿈 없이 */
	.pane-foot { flex-wrap: wrap; row-gap: 8px; }
	.pane-foot #footNote { order: -1; flex: 1 0 100%; text-align: left; }
	.pane-foot .btn { white-space: nowrap; }
	.pane-foot #btnNext { margin-left: auto; }

	/* ④ 모델 3열이 390px 에서 칸당 99px 이라 이름이 잘렸다("M1 · 클래식 …").
	   실측 2026-09-03: 6명 중 5명의 이름이 넘쳤다(131px > 99px). 2열이면 들어간다. */
	.model-grid { grid-template-columns: repeat(2, 1fr); }
}