/* 1pixel — 브루탈리즘 대형 타이포
   원칙: 라운드 없음, 두꺼운 검정 선, 넓은 자간의 대문자 라벨.
   화면에서 채도가 있는 것은 목표색과 유저가 찍은 색뿐이다. */
:root{
  --bg:#fbfbfa;
  --ink:#111110;
  --dim:#55554f;
  --line:#111110;
  --hair:#c9c9c2;
  --rule:3px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Pretendard,sans-serif;
  display:flex;flex-direction:column;align-items:center;min-height:100%;
  padding:18px 18px 30px;
}
.wrap{width:100%;max-width:420px;display:flex;flex-direction:column;flex:1;gap:14px;}
.hide{display:none !important;}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}

/* ---------- 공통 요소 ---------- */
.logo{width:150px;max-width:52%;height:auto;display:block;}

.rule{height:var(--rule);background:var(--ink);flex:none;}
.rule.thin{height:1.5px;}

.label{
  font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  line-height:1.25;
}
.label span{font-variant-numeric:tabular-nums;}

.row{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.row-right{display:flex;align-items:center;gap:10px;}

.huge{
  font-size:76px;font-weight:800;letter-spacing:-.05em;line-height:.88;
  font-variant-numeric:tabular-nums;
}

.dots{display:flex;gap:5px;}
.dot{width:10px;height:10px;border:2px solid var(--ink);flex:none;}
.dot.on{background:var(--ink);}

.swatch{width:100%;aspect-ratio:1;border:var(--rule) solid var(--ink);}

/* ---------- 버튼 ---------- */
button{font-family:inherit;border:none;cursor:pointer;}
.btn{
  background:var(--ink);color:var(--bg);border:var(--rule) solid var(--ink);
  padding:17px 16px;font-size:15.5px;font-weight:800;
  display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;
}
.btn .wide{letter-spacing:.26em;}
.btn:active{opacity:.75;}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.ghost:active{background:var(--ink);color:var(--bg);}
.btn:disabled{opacity:.3;pointer-events:none;}
.btn-row{display:flex;gap:10px;}
.btn-row .btn{flex:1;}
.btn-icon{
  background:transparent;border:var(--rule) solid var(--ink);color:var(--ink);
  width:38px;height:38px;padding:0;font-size:17px;font-weight:800;line-height:1;flex:none;
}
.btn-icon:active{background:var(--ink);color:var(--bg);}

.hint{font-size:12.5px;line-height:1.65;color:var(--dim);}
.hint.align-left{text-align:left;}

.coach{font-size:14px;line-height:1.6;font-weight:600;border-left:5px solid var(--ink);padding-left:12px;}

/* ---------- 카메라 ---------- */
.frame-wrap{
  position:relative;width:100%;aspect-ratio:1;
  border:var(--rule) solid var(--ink);overflow:hidden;background:#111;
}
/* video는 캔버스 미리보기의 소스일 뿐 화면에 보이지 않는다 (줌은 캔버스에서 그린다) */
video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
canvas#camCanvas{width:100%;height:100%;display:block;}
.bracket{position:absolute;width:24px;height:24px;border-color:#fff;}
.bracket.tl{top:9px;left:9px;border-top:4px solid;border-left:4px solid;}
.bracket.tr{top:9px;right:9px;border-top:4px solid;border-right:4px solid;}
.bracket.bl{bottom:9px;left:9px;border-bottom:4px solid;border-left:4px solid;}
.bracket.br{bottom:9px;right:9px;border-bottom:4px solid;border-right:4px solid;}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;}
.flash.fire{animation:flash .28s ease-out;}
@keyframes flash{from{opacity:.9;} to{opacity:0;}}
.shutter{
  width:78px;height:78px;background:var(--bg);border:6px solid var(--ink);
  border-radius:50%;padding:0;margin:2px auto 0;flex:none;
}
.shutter:active{background:var(--ink);}

.zoom-row{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;gap:8px;z-index:2;
}
.zoom-btn{
  width:34px;height:34px;border-radius:50%;padding:0;
  background:rgba(17,17,16,.45);border:1.6px solid rgba(255,255,255,.7);
  color:#fff;font-size:11.5px;font-weight:800;font-family:inherit;
}
.zoom-btn.on{background:#fff;border-color:#fff;color:var(--ink);}
.zoom-btn:active{opacity:.8;}

/* ---------- 분석 애니메이션 ---------- */
#analyzeScreen{justify-content:center;align-items:center;}
#mosaicCanvas{
  width:100%;max-width:300px;height:auto;aspect-ratio:1;
  border:var(--rule) solid var(--ink);image-rendering:pixelated;
}
.step-label{
  font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  display:flex;justify-content:space-between;width:100%;max-width:300px;margin-top:14px;
  color:var(--dim);
}
.step-label b{color:var(--ink);font-variant-numeric:tabular-nums;}

/* ---------- 결과 ---------- */
.compare{display:flex;}
.compare .col{flex:1;display:flex;flex-direction:column;gap:6px;}
.compare .sw{width:100%;aspect-ratio:1;border:var(--rule) solid var(--ink);}
.compare .col:last-child .sw{border-left:none;}

/* ---------- 선택 ---------- */
.attempt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.attempt-card{
  background:transparent;border:2px solid var(--hair);padding:7px;cursor:pointer;
  text-align:left;width:100%;display:flex;flex-direction:column;gap:7px;
}
.attempt-card.sel{border:var(--rule) solid var(--ink);padding:6px;}
.attempt-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.attempt-card .t{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--dim);}
.attempt-card .s{font-size:21px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}

/* ---------- 공유 ---------- */
#shareCanvas{width:100%;height:auto;display:block;border:var(--rule) solid var(--ink);}
.rank{font-size:13px;font-weight:700;line-height:1.5;border-left:5px solid var(--ink);padding-left:12px;}
.rank b{font-weight:800;}

/* ---------- 모달 ---------- */
.veil{position:fixed;inset:0;background:rgba(17,17,16,.82);display:flex;align-items:center;
  justify-content:center;padding:24px;z-index:20;}
.modal{
  background:var(--bg);border:var(--rule) solid var(--ink);padding:20px;max-width:340px;width:100%;
  display:flex;flex-direction:column;gap:12px;
}
.modal p{font-size:13.5px;line-height:1.65;color:var(--dim);}

.screen{display:none;flex-direction:column;gap:14px;flex:1;}
.screen.active{display:flex;}

@media (prefers-reduced-motion: reduce){
  .flash.fire{animation:none;}
}