/* 1pixel — 브루탈리즘 대형 타이포
   원칙: 라운드 없음, 두꺼운 검정 선, 넓은 자간의 대문자 라벨.
   화면에서 채도가 있는 것은 목표색과 유저가 찍은 색뿐이다. */
:root{
  --alert:#d92626;
  --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;
}
/* "100점 만점"인 걸 모르는 사람이 많아서 점수 뒤에 절반 크기로 붙인다 */
.huge-max{font-size:50%;letter-spacing:-.02em;}

.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);}

/* ---------- 버튼 ---------- */
/* iOS Safari는 button에 시스템 기본 렌더링(appearance)을 입혀서 그 위에
   그려지는 ::before/::after 배경이 가려지거나 안 보일 수 있다 — 리셋해야 한다. */
button{font-family:inherit;border:none;cursor:pointer;-webkit-appearance:none;appearance:none;}
.btn{
  background:var(--ink);color:var(--bg);border:var(--rule) solid var(--ink);
  padding:17px 16px;font-size:15.5px;font-weight:800;
  /* button 기본 text-align은 center다. 브루탈리즘은 전부 좌정렬이므로 되돌린다 */
  text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;
}
.btn .wide{letter-spacing:.26em;white-space:nowrap;}
/* pulse 띠(::after·::before, z-index:1)가 글자를 가리지 않고 뒤로 지나가도록
   글자 쪽을 그 위에 올린다. position:relative만 줘도 z-index:auto인 형제보다
   위에 쌓이므로 flex 레이아웃에는 영향이 없다. */
.btn.pulse > span{position:relative;z-index:2;}
/* 2단 버튼은 폭이 절반뿐이라 줄바꿈이 나기 쉽다. 화면 폭에 따라 글자를 줄여
   어떤 언어에서도 한 줄로 들어가게 한다 (좁은 폰까지 고려한 clamp). */
.btn-row .btn{padding-left:12px;padding-right:12px;font-size:clamp(10.5px,3.2vw,13px);}
.btn-row .btn .wide{letter-spacing:.08em;}
/* 한글/한자/데바나가리는 대문자 개념이 없어 자간을 넓히면 어색하다 —
   해당 언어에서만 브루탈리즘 자간을 끈다. */
html[lang="ko"] .label, html[lang="ko"] .btn .wide,
html[lang="ja"] .label, html[lang="ja"] .btn .wide,
html[lang="zh"] .label, html[lang="zh"] .btn .wide,
html[lang="hi"] .label, html[lang="hi"] .btn .wide{
  letter-spacing:0;
}
.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;}

/* 주요 행동 유도 버튼(색깔찾기·다시찍기·공유).
   시행착오: 테두리 퍼짐(모바일에서 안 보임) → rotateX 회전(정신없음) →
   순간 색반전(고장난 느낌) → 채웠다 지우는 2단계 사선(너무 강하고 안 부드러움)
   → 지금: 좁은 사선 띠 하나가 등속(linear)으로 가로지르는 단일 동작.
   이번엔 세 가지를 더 다듬었다.
   (1) 주기 2.5초 — 속도(1.1초 통과)는 그대로 두고 쉬는 구간만 늘렸다.
   (2) 뒤따르는 보조 띠 하나 — 주 띠보다 폭이 좁고, 0.28초 늦게 출발하도록
       animation-delay만 줘서 "뒤따라오는" 효과를 냈다. infinite 애니메이션의
       delay는 첫 1회만이 아니라 매 주기 영구히 위상을 밀어주므로 이렇게 쓸 수 있다.
   (3) 색 — 흰 띠/검정 띠는 "자기주장이 강하다"고 하셔서, 이미 있는 톤다운
       색상(--dim 어두운 회색, --hair 밝은 회색)으로 바꿨다. 새 변수를 안 만들고
       기존 팔레트에서 가져왔다. */
.btn.pulse{ position:relative; overflow:hidden; isolation:isolate; }
.btn.pulse::after,
.btn.pulse::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
}
/* 색을 더 은근하게 — 검정 배경엔 ink에 가깝게, 흰 배경엔 bg에 가깝게 살짝만
   섞는다. 기존 --dim/--hair 그대로 쓰면 배경과 대비가 또렷해 "자기주장이
   강하다"고 하셨다. color-mix로 기존 토큰만 섞어 새 색을 안 만든다. */
.btn.pulse::after,
.btn.pulse::before{ background:color-mix(in srgb, var(--ink) 72%, var(--dim) 28%); }
.btn.ghost.pulse::after,
.btn.ghost.pulse::before{ background:color-mix(in srgb, var(--bg) 72%, var(--hair) 28%); }
/* 주 띠 (::after) — 폭 16, 2.5초 중 1.1초에 걸쳐 통과 (44%) */
.btn.pulse::after{
  clip-path:polygon(-32% 0%, -16% 0%, -30% 100%, -46% 100%);
  animation:btnWipe 2.5s linear infinite;
}
@keyframes btnWipe{
  0%      { clip-path:polygon(-32% 0%, -16% 0%, -30% 100%, -46% 100%); }
  44%,100%{ clip-path:polygon(124% 0%, 140% 0%, 126% 100%, 110% 100%); }
}
/* 보조 띠 (::before) — 폭 9로 더 마이너하게. 간격을 보조 띠 두께(9)만큼만
   벌리려고 delay를 다시 계산했다: 속도 141.8%/s(156% 이동 ÷ 1.1s) 기준
   0.176s 지연이면 주 띠 뒤 실제 간격이 약 9%가 된다
   ( 25(=폭16+간격9)/141.8 ≈ 0.176 ). 예전 0.28s는 간격이 40%나 되어 너무 멀었다. */
.btn.pulse::before{
  clip-path:polygon(-25% 0%, -16% 0%, -30% 100%, -39% 100%);
  animation:btnWipe2 2.5s linear infinite;
  animation-delay:.176s;
}
@keyframes btnWipe2{
  0%      { clip-path:polygon(-25% 0%, -16% 0%, -30% 100%, -39% 100%); }
  44%,100%{ clip-path:polygon(131% 0%, 140% 0%, 126% 100%, 117% 100%); }
}
/* 못 누르는 상태에서 유혹하면 안 된다 */
.btn.pulse:disabled{animation:none;}
.btn.pulse:disabled::after,
.btn.pulse:disabled::before{display: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);}
.btn-icon svg{width:21px;height:21px;display:block;margin:auto;}
/* 언어 버튼만 테두리 없이 아이콘만 둔다. 박스(38px)는 그대로 둬서 터치 영역은 유지하고,
   테두리가 없으니 눌림 표시도 배경 반전 대신 투명도로 준다. */
#langBtn{border:none;}
#langBtn svg{width:29.4px;height:29.4px;}
#langBtn:active{background:transparent;color:var(--ink);opacity:.55;}

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

.text-btn{
  background:none;border:none;padding:0;
  /* .hint 한 줄이 약 20.6px(12.5px × 1.65)라 3줄치 위쪽 여백을 준다.
     .wrap의 flex gap(14px)이 이미 더해지므로 그만큼 뺀다. */
  margin:48px auto 0;
  font-family:inherit;font-size:11.5px;color:var(--hair);
  text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;align-self:center;
}
.text-btn:active{opacity:.6;}
.hint.align-left{text-align:left;}
.hint.alert{color:var(--alert);font-weight:800;}

.coach{font-size:16px;line-height:1.55;font-weight:700;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:0;flex:none;
}
.shutter:active{background:var(--ink);}

/* 테두리 없는 아이콘 버튼 (갤러리·부스트) */
.icon-plain{
  width:76px;height:76px;padding:0;flex:none;
  background:transparent;border:none;color:var(--ink);
}
.icon-plain svg{width:45px;height:45px;display:block;margin:auto;}
.icon-plain:active{opacity:.55;}
.icon-plain:disabled{opacity:.25;filter:grayscale(1);}
#boostBtn.on{animation:boostWiggle .9s ease-in-out infinite;}
@keyframes boostWiggle{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%    { transform:translate(2px,-2px) rotate(-8deg); }
}

/* 현재 값 배지 — 줌은 오른쪽, 밝기는 왼쪽 */
.slider-label{
  position:absolute;top:46px;z-index:3;
  background:rgba(17,17,16,.5);color:#fff;font-size:11px;font-weight:800;
  padding:3px 7px;letter-spacing:.02em;pointer-events:none;
  font-variant-numeric:tabular-nums;
}
.slider-label.right{right:6px;}
.slider-label.left{left:6px;}

/* 카메라 화면 좌상단 — 오늘의 목표색을 색으로도, 글자로도 보여준다 */
.target-indicator{
  position:absolute;top:12px;left:12px;z-index:3;
  display:flex;align-items:center;gap:6px;
  background:rgba(17,17,16,.55);padding:5px 9px;pointer-events:none;
}
.target-indicator-sw{width:16px;height:16px;flex:none;border:1.5px solid #fff;}
.target-indicator-label{font-size:11px;font-weight:800;letter-spacing:.1em;}

/* 세로 드래그 바 — 줌과 밝기가 같은 구조를 공유한다 */
.vslider{
  position:absolute;top:78px;bottom:46px;width:32px;
  z-index:3;touch-action:none;
}
.vslider.right{right:12px;}
.vslider.left{left:12px;}
.vtrack{
  position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);
  background:rgba(255,255,255,.5);
}
.vtick{
  position:absolute;left:50%;width:11px;height:2px;background:rgba(255,255,255,.85);
  transform:translate(-50%,50%);
}
.vthumb{
  position:absolute;left:50%;bottom:0;width:26px;height:26px;border-radius:50%;
  background:#fff;border:2px solid var(--ink);transform:translate(-50%,50%);
  box-shadow:0 1px 5px rgba(0,0,0,.4);
}

/* 셔터 줄 — 왼쪽 갤러리, 가운데 셔터, 오른쪽 부스트. 아이콘은 양 끝으로 붙인다. */
.shot-row{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;margin:2px auto 0;
}

/* ---------- 분석 애니메이션 ---------- */
#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;}
  #boostBtn.on{animation:none;}
  /* 애니메이션이 ::after·::before에 걸려있어 부모(.btn.pulse)만 꺼선 안 먹는다 */
  .btn.pulse::after, .btn.pulse::before{animation:none;display:none;}
}

/* 홈 화면 스탯 줄 — 연속 일수와 개인 최고 기록.
   언어에 따라 문구 길이가 달라도 두 줄로 접히지 않게 한 줄로 고정한다. */
.stat-row .label:empty{display:none;}
.stat-row .label{white-space:nowrap;font-size:11.5px;letter-spacing:.1em;}

/* 홈 상단 — 로고와 언어 버튼 */
.top-row{align-items:center;}

/* 언어 선택 모달 */
.lang-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.lang-item{
  background:transparent;border:2px solid var(--hair);color:var(--ink);
  padding:13px 10px;font-size:14px;font-weight:800;text-align:center;
}
.lang-item.sel{border:var(--rule) solid var(--ink);background:var(--ink);color:var(--bg);}
.lang-item:active{opacity:.7;}