:root{
  --bg:#0d0f14; --panel:#16181f; --panel2:#1c1f28; --field:#111319;
  --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06);
  --gold:#e9b949; --gold-ink:#20180a;
  --ink:#f2f3f6; --mut:#9a9fac; --mut-dim:#6b7080;
  --rad:14px; --rad-sm:10px;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --font:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}

/* 2026-09-03 3라운드 — 대표가 mobbin.com(실제 출시 앱 UI 레퍼런스)을 보고 다시
   만들라고 지시. 파티클/마퀴/워터마크/그라디언트 글로우 같은 "장식 이펙트"를
   더하는 방향이 문제였다는 지적이라, 이번 라운드는 정반대 방향으로 간다 —
   장식을 걷어내고 실제 프로덕트들(Figma, Behance, Cosmos, Procreate 등,
   Mobbin에서 직접 확인)의 공통점인 "단색에 가까운 중립 배경 + 타이포 위계 +
   여백 + 절제된 카드/버튼"에 맞춘다. 배경은 거의 단일 톤, 강조색(gold)은
   기본 버튼 한 곳에만, 그라디언트 텍스트·글로우·애니메이션 배경 전부 제거. */
html,body{margin:0; min-height:100%; background:var(--bg); color:var(--ink);
  font-family:var(--font); -webkit-font-smoothing:antialiased}

/* ── 4라운드(2026-09-03) — 대표가 넷플릭스 히어로(대각선 포스터 벽지 + 어두운
   그라디언트)를 직접 레퍼런스로 제시, "로딩 걸릴 때부터 바로 저 배경이 떴으면"
   이라고 명시. 처음엔 자체 제작 SVG(poster-wall.svg, 9개 타일)로 만들었으나
   대표가 "실제 포스터 느낌이 약하다"고 재지적해, 완전히 창작된 가상 영화/드라마
   포스터(실제 로고·배우·프랜차이즈 없음, ChatGPT/Gemini로 생성)로 교체했다 —
   poster-wall.webp. 이 이미지는 완성된 한 장의 모자이크라 그 안에 이미
   대각선 기울기가 그려져 있다 — SVG 타일 때와 달리 CSS에서 반복(repeat)하거나
   추가로 회전(rotate)시키지 않고, cover로 한 장 그대로 화면 전체에 채운다. */
body::before{
  content:""; position:fixed; inset:0; z-index:0;
  background-image:url("poster-wall.webp");
  background-repeat:no-repeat; background-size:cover; background-position:center;
  filter:blur(1.5px) saturate(.9); opacity:1;
}
/* 대표 재지적(2026-09-03, 5라운드) — "뒤가 너무 돋보이고 앞은 지저분해보인다":
   벽지가 선명한 사진이다 보니 UI 패널과 채도·선명도를 두고 경쟁하고 있었다.
   살짝 블러(1.5px)+채도를 낮추고, 오버레이를 전체적으로 더 어둡게 눌러서
   벽지는 "분위기"로만 남고 패널/헤더가 명확히 앞으로 나오게 한다. */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(65% 55% at 50% 15%, rgba(13,15,20,.6), transparent 60%),
    linear-gradient(180deg, rgba(13,15,20,.5) 0%, rgba(13,15,20,.72) 55%, var(--bg) 90%);
}
.topbar, .app{position:relative; z-index:1}
/* 헤더 글씨가 안 읽힌다는 지적 — 배경 이미지가 바로 밑을 지나가는 자리라
   전용 스크림(반투명 카드 + blur)을 깔아 어떤 배경이 와도 항상 읽히게 한다. */
.topbar{
  background:rgba(13,15,20,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.topbar{display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 28px; border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:14px}
.reel{display:grid; place-items:center; width:40px; height:40px; font-size:22px; border-radius:10px;
  background:var(--panel2); border:1px solid var(--line)}
.eyebrow{margin:0; color:var(--mut); font-weight:600; letter-spacing:.02em; font-size:12.5px}
.topbar h1{margin:2px 0 0; font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--ink)}
.tagWrap{display:flex; flex-direction:column; align-items:flex-end; gap:3px}
.tagline{margin:0; color:var(--mut); font-size:13.5px; text-align:right}
.privacyLink{color:var(--mut-dim); font-size:12px; text-decoration:none; border-bottom:1px solid transparent}
.privacyLink:hover{color:var(--mut); border-color:var(--mut-dim)}

.app{display:grid; grid-template-columns:minmax(360px,1.1fr) minmax(420px,1.05fr);
  gap:18px; max-width:1320px; margin:18px auto; padding:0 24px 40px}
/* align-self:start — 왼쪽이 그리드 기본 stretch로 오른쪽 크기에 맞춰 같이
   늘어나면, JS(layout-match.js)가 왼쪽 높이를 재서 오른쪽에 꽂아줄 때
   "오른쪽이 커지면 그리드가 왼쪽도 늘리고 → 그 늘어난 왼쪽을 다시 재서
   오른쪽에 꽂고 → 또 늘어나고"가 무한 반복되는 피드백 루프가 생긴다(직접
   겪음 — 몇 프레임 만에 화면이 1000px 넘게 걷잡을 수 없이 커졌다). 왼쪽을
   stretch 대상에서 빼서 항상 자기 콘텐츠 크기만으로 고정시켜야 이 루프가
   원천적으로 안 생긴다. */
.left{display:flex; flex-direction:column; gap:18px; align-self:start}

/* ── 패널: 단색 카드, 얕은 그림자, 1px 보더 — 화려한 효과 없음 ── */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--rad);
  padding:18px; box-shadow:var(--shadow)}
.panel-head{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.panel-head h2{margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em}
.num{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; flex:none;
  background:var(--gold); color:var(--gold-ink); font-weight:800; font-size:13px}

.cameraBox{position:relative; aspect-ratio:16/9; border-radius:var(--rad-sm); overflow:hidden;
  background:var(--field); border:1px solid var(--line);
  max-height:min(40vh, calc(100vh - 470px))}
.cameraBox video, .cameraBox img{width:100%; height:100%; object-fit:cover; display:block}
.camHint{position:absolute; inset:0; display:grid; place-items:center; color:var(--mut-dim); font-size:14px}
.countdown{position:absolute; inset:0; display:grid; place-items:center; z-index:3;
  font-family:"Anton"; font-size:140px; color:#fff; background:rgba(0,0,0,.4)}

label{display:block; margin:12px 0; font-size:13px; color:var(--mut); font-weight:600}
.hint{color:var(--mut-dim); font-weight:500; font-size:12px}
input, select{width:100%; margin-top:6px; padding:11px 13px; border-radius:var(--rad-sm);
  border:1px solid var(--line); background:var(--field); color:var(--ink); font-size:15px;
  font-family:var(--font); transition:border-color .15s ease}
input:hover, select:hover{border-color:rgba(255,255,255,.2)}
input:focus, select:focus{outline:none; border-color:var(--gold)}
input::placeholder{color:var(--mut-dim)}

.genreRow{display:flex; gap:10px; align-items:flex-end; margin:12px 0}
.genreRow .genreField{flex:1; margin:0; min-width:0}
.genreRowBtn{flex:1; margin:0; min-width:0}

.seg{display:flex; gap:4px; background:var(--field); padding:4px; border-radius:var(--rad-sm); border:1px solid var(--line)}
.seg-btn{flex:1; padding:9px; border:0; border-radius:8px; background:transparent;
  color:var(--mut); font-weight:700; font-size:14px; cursor:pointer; font-family:var(--font)}
.seg-btn:hover{color:var(--ink)}
.seg-btn.active{background:var(--gold); color:var(--gold-ink)}

.buttons{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.buttons.out{margin-top:14px}
.btn{flex:1; min-width:120px; padding:12px 14px; border-radius:var(--rad-sm); border:1px solid var(--line);
  background:var(--field); color:var(--ink); font-weight:700; font-size:14.5px; cursor:pointer;
  font-family:var(--font); transition:background .15s ease, border-color .15s ease, transform .05s ease}
.btn:hover{background:var(--panel2); border-color:rgba(255,255,255,.2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none}
.btn.primary{background:var(--gold); color:var(--gold-ink); border-color:var(--gold)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--panel2)}
.btn.big{font-size:15.5px; padding:14px}

.status{margin:10px 0 0; padding:10px 13px; border-radius:var(--rad-sm); background:var(--field);
  border:1px solid var(--line); color:var(--mut); font-size:13.5px; min-height:18px; line-height:1.5}

/* ── 좌우 컬럼 높이 맞춤 — 몇 라운드째 vh/calc 매직넘버로 시도했지만 실패했다.
   오른쪽(완성·출력)의 실제 콘텐츠 높이는 갤러리가 비었을 때(~420px)와 4장
   채워졌을 때(~780px+) 350px 이상 차이나는데 왼쪽(촬영+정보)은 거의 고정이라,
   어느 한쪽 상태에 CSS 값을 맞추면 반드시 다른 상태에서 다시 어긋났다(대표가
   "왼쪽이 짧다"→"오른쪽이 짧다"를 번갈아 지적한 이유). CSS 그리드 stretch로도
   풀어보려 했으나 캔버스의 height:100%가 아직 크기가 안 정해진 조상을 기준으로
   계산되며 순환 참조로 오히려 더 커지는 버그가 났다 — `layout-match.js`가
   왼쪽의 실제 렌더링 높이를 재서 `.right`에 `min-height` 인라인 스타일로
   그대로 꽂아준다(ResizeObserver로 왼쪽 높이가 바뀔 때마다 자동 재계산 —
   화면 크기·갤러리 상태 어떤 조합이든 따로 튜닝할 필요 없음). 아래 `.stage`는
   그렇게 정해진 오른쪽 높이의 남은 공간을 그냥 flex:1로 채우기만 하면 된다. */
.right{position:sticky; top:20px}
.right .panel{display:flex; flex-direction:column}
.stage{position:relative; border-radius:var(--rad-sm); overflow:hidden; background:var(--field);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  flex:1; min-height:0}
#posterCanvas{width:auto; height:auto; max-width:100%; max-height:100%; display:block}
.spinner{position:absolute; inset:0; display:grid; place-items:center; gap:14px;
  background:rgba(13,15,20,.9); color:var(--mut); font-weight:600; font-size:14px}
.ring{width:44px; height:44px; border-radius:50%; border:3px solid var(--line);
  border-top-color:var(--gold); animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px}
.gallery .thumb{aspect-ratio:2/3; border-radius:8px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:var(--field); transition:border-color .15s ease}
.gallery .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.gallery .thumb.active{border-color:var(--gold)}
.gallery .label{text-align:center; font-size:11px; color:var(--mut); margin-top:4px}

.hidden{display:none !important}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .topbar{padding:14px 20px}
  .tagline{display:none}
  .tagWrap{align-items:flex-end}
  .right{position:static}
  .panel{padding:16px}
}
@media (max-width:480px){
  .genreRow{flex-direction:column; align-items:stretch}
}

/* ── 낮은 화면(4:3 모니터, 작은 노트북 등)에서 스크롤 없이도 안 잘리게 여백을
   추가로 압축한다 — 16:9/16:10/4:3 어떤 비율이든 세로 공간이 부족할 수 있다. ── */
@media (max-height:820px){
  .topbar{padding:8px 28px}
  .app{gap:10px; margin:8px auto; padding:0 24px 14px}
  .left{gap:8px}
  .panel{padding:10px}
  .panel-head{margin-bottom:5px}
  .cameraBox{aspect-ratio:16/9; max-height:min(34vh, calc(100vh - 540px))}
  label{margin:5px 0}
  input, select{padding:9px 11px}
  .genreRow{margin:6px 0}
  .buttons{margin-top:7px; gap:8px}
  .status{margin-top:6px; padding:8px 12px; min-height:16px}
  .seg-btn{padding:8px}
  .gallery{margin-top:8px}
  .buttons.out{margin-top:10px}
}
@media (max-height:680px){
  .reel{width:32px; height:32px; font-size:18px}
  .topbar h1{font-size:17px}
  .eyebrow{font-size:11px}
  .topbar{padding:7px 22px}
  .panel{padding:9px}
  .cameraBox{aspect-ratio:16/7; max-height:20vh}
  .gallery{margin-top:6px}
}

/* ── 인쇄: 4x6 인화지(SELPHY 등) 여백 없이 포스터만 ── */
@media print{
  body *{visibility:hidden !important}
  body::before, body::after{display:none !important}
  #printArea, #printArea *{visibility:visible !important}
  #printArea{position:fixed; inset:0; margin:0; display:grid; place-items:center; background:#fff}
  #printArea img{width:100%; height:100%; object-fit:contain}
  @page{ size:4in 6in; margin:0 }
}