:root{
  --bg:#111413;
  --panel:#1a1f1d;
  --line:#2c3330;
  --fg:#e8ece9;
  --dim:#98a29d;
  --accent:#7fb069;
  --warn:#e0a458;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  display:flex; flex-direction:column;
  -webkit-tap-highlight-color:transparent;
}
.bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--line);
}
.spacer{flex:1}
h2{font-size:16px;margin:0}

select{
  background:var(--panel); color:var(--fg); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; font:inherit; max-width:55vw;
}
button{font:inherit; cursor:pointer}
.ghost-btn{
  background:transparent; color:var(--fg); border:1px solid var(--line);
  border-radius:8px; padding:8px 12px;
}
.chip{
  background:var(--panel); color:var(--fg); border:1px solid var(--line);
  border-radius:999px; padding:8px 14px;
}
.chip.on{border-color:var(--accent); color:var(--accent)}
.primary{
  background:var(--accent); color:#0d1210; border:0;
  border-radius:10px; padding:12px 20px; font-weight:600;
}

main{flex:1; display:flex; flex-direction:column; min-height:0}

/* 촬영 프레임 — 출력과 같은 4:5 비율. 여기 보이는 만큼이 그대로 저장된다. */
/* 높이는 flex가 정하고(남는 만큼), 폭은 aspect-ratio가 높이에서 역산한다.
   예전엔 width:min(100%, 70svh×4/5)로 잡았는데, 샷 리스트 한 줄이 들어오자 폰(375×812)에서
   42px가 넘쳐 셔터가 접혔다(2026-09-17). 이 방식이면 위아래 요소가 늘어도 무대가 알아서 줄고,
   width:100% + max-height 조합처럼 비율이 깨지는 일도 없다(실측 0.800 유지).
   비율 4:5는 app.js의 TARGET_W/TARGET_H와 반드시 같아야 한다. */
#camera .stage{
  position:relative; aspect-ratio:4/5;
  flex:1 1 0; min-height:0; width:auto; max-width:100%;
  margin:0 auto; background:#000; overflow:hidden;
  align-self:center;
}
/* 리뷰 시트의 무대는 flex 안이 아니므로 예전 방식 그대로 */
.sheet .stage{
  position:relative; aspect-ratio:4/5;
  width:min(100%, calc(60svh * 4 / 5));
  margin:0 auto; background:#000; overflow:hidden; flex:none;
}
.stage video,.stage img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
#ghost{pointer-events:none}
#ghost.difference{mix-blend-mode:difference; opacity:1 !important}

.grid{position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right,transparent calc(33.333% - 1px),rgba(255,255,255,.35) 33.333%,transparent calc(33.333% + 1px)),
    linear-gradient(to right,transparent calc(66.666% - 1px),rgba(255,255,255,.35) 66.666%,transparent calc(66.666% + 1px)),
    linear-gradient(to bottom,transparent calc(33.333% - 1px),rgba(255,255,255,.35) 33.333%,transparent calc(33.333% + 1px)),
    linear-gradient(to bottom,transparent calc(66.666% - 1px),rgba(255,255,255,.35) 66.666%,transparent calc(66.666% + 1px));
}
/* 소개가 무대보다 길면 위아래가 잘리지 않고 스크롤되게. safe center = 넘칠 땐 위에서부터. */
.stage-msg{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; justify-content:safe center;
  gap:10px; text-align:center; padding:16px; overflow-y:auto;
}
.stage-msg[hidden]{display:none}

.controls{padding:12px; display:flex; flex-direction:column; gap:12px}
.row{display:flex; align-items:center; gap:10px}
.row span{white-space:nowrap; color:var(--dim); font-size:13px}
.row b{color:var(--fg)}
.btns{flex-wrap:wrap}
input[type=range]{flex:1; accent-color:var(--accent)}
.shutter{
  width:100%; padding:16px; border:0; border-radius:12px;
  background:var(--accent); color:#0d1210; font-weight:700; font-size:17px;
}
.shutter:disabled{background:var(--panel); color:var(--dim)}
.status{margin:0; font-size:13px; color:var(--dim); min-height:1.5em; white-space:pre-line}
.status.warn{color:var(--warn)}
.hint{margin:0; font-size:13px; color:var(--dim)}

.sheet{
  position:fixed; inset:0; background:var(--bg); z-index:10;
  overflow:auto; padding:12px; display:flex; flex-direction:column; gap:12px;
}
.sheet[hidden]{display:none}

.shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px}
.shot{background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.shot img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:#000}
.shot .meta{padding:8px; font-size:12px; color:var(--dim)}
.shot .acts{display:flex; flex-wrap:wrap; gap:4px; padding:0 8px 8px}
.shot .acts button{flex:1 1 30%; font-size:12px; padding:6px 0; background:transparent;
  color:var(--fg); border:1px solid var(--line); border-radius:6px}
.shot.is-ref{border-color:var(--accent)}

@media (min-width:900px){
  #camera .stage{max-width:480px}
  .sheet .stage{width:min(480px, calc(60svh * 4 / 5))}
  .controls{max-width:520px; margin:0 auto; width:100%}
}

/* 갤러리의 체크박스형 chip. 버튼과 같은 높이로 보이게만 맞춘다. */
.chip.check{ display:inline-flex; align-items:center; gap:.4em; cursor:pointer; }
.chip.check input{ margin:0; }

/* 첫 화면 소개. 4:5 무대 안에 폰(375px)에서도 다 들어가야 하므로 글자를 작게 잡는다. */
.intro{max-width:34ch}
.intro h1{margin:0 0 6px; font-size:22px; letter-spacing:.02em}
.intro .lead{margin:0 0 10px; font-size:14px; line-height:1.45; word-break:keep-all}
.intro .steps{margin:0; padding-left:1.4em; text-align:left; font-size:13px; line-height:1.5; color:var(--dim)}
.intro .steps li{margin:2px 0}
.privacy{margin:0; font-size:11px; line-height:1.4; color:var(--dim); opacity:.85}

/* 샷 리스트 chip. 무대 위 한 줄. 오늘 찍은 컷은 .done */
.views{display:flex; gap:6px; padding:8px 12px 0; overflow-x:auto; scrollbar-width:none}
.views::-webkit-scrollbar{display:none}
.chip.view{padding:6px 12px; font-size:13px; white-space:nowrap; flex:none}
.chip.view.done{color:var(--accent)}
.chip.view.done:not(.on){border-color:var(--line)}
.chip.view.add{padding:6px 10px; color:var(--dim)}

/* 탭 층. 테두리 양끝·꼭대기 탭을 받는다. */
.mark{position:absolute; inset:0; cursor:crosshair; touch-action:none}
.mark[hidden]{display:none}
.mark i{position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 2px #000}

/* 키 재기 오버레이. viewBox가 저장 픽셀(1280×1600)이라 좌표를 그대로 쓴다. */
.msvg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.msvg circle{fill:var(--accent); stroke:#000; stroke-width:4}
.msvg line{stroke:var(--accent); stroke-width:8; stroke-linecap:round}
.msvg line.h{stroke:#fff; stroke-dasharray:24 16}
.msvg text{fill:#fff; font:bold 60px system-ui,sans-serif; paint-order:stroke; stroke:#000; stroke-width:10}

/* 성장 그래프. 갤러리 맨 위. 값이 하나면 점만 찍힌다. */
.growth{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.growth[hidden]{display:none}
.growth .sum{margin:0 0 6px; font-size:13px}
.growth .sum b{color:var(--accent)}
.growth svg{display:block; width:100%; height:auto}
.growth polyline{fill:none; stroke:var(--accent); stroke-width:2}
.growth circle{fill:var(--accent)}
.growth text{fill:var(--dim); font-size:11px}

/* 기울기 표시. 무대 오른쪽 위. 기준과 ±3° 안이면 .ok */
.tilt{position:absolute; top:8px; right:8px; padding:4px 10px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; font-size:13px; pointer-events:none}
.tilt.ok{background:var(--accent); color:#0d1210; font-weight:600}
.tilt[hidden]{display:none}

.ver{font-size:12px; color:var(--dim); margin-right:4px; white-space:nowrap}

/* 비교 화면. 지난 사진(then)이 지금 사진 위에 놓이고 clip-path로 갈린다. */
#compareStage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
#compareThen{clip-path:inset(0 50% 0 0)}
#compareThen.fade{clip-path:none}
.wipe-line{position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px;
  background:var(--accent); box-shadow:0 0 0 1px rgba(0,0,0,.5); pointer-events:none}
.wipe-line[hidden]{display:none}
.tag{position:absolute; top:8px; padding:3px 8px; border-radius:6px; font-size:12px;
  background:rgba(0,0,0,.6); color:#fff; pointer-events:none}
.tag.left{left:8px} .tag.right{right:8px}
.shot .meta i{color:var(--warn); font-style:normal}