/* 더블 시스템 — 모바일 우선.
 *
 * 지향점은 "친근한 습관 트래커"가 아니라 **전적표·훈련 로그·계기판**이다.
 * 그래서 세 가지를 규칙으로 못 박는다.
 *
 *   1. 각지게.  반경은 3px가 최대. 알약(999px)은 쓰지 않는다.
 *   2. 그림자 없이.  띄우는 건 선과 배경 명도로 한다.
 *   3. 색은 하나.  주황은 '행동'에만. 상태는 색이 아니라 명도로 구분한다.
 *
 * 주의: 자간(letter-spacing)·대문자(uppercase)·모노스페이스는 **라틴 문자와 숫자 전용**이다.
 * 한글에 걸면 글자가 벌어져 오히려 안 읽힌다. 한글 라벨은 산세리프에 자간 0으로 두고,
 * 영문 마이크로 라벨에만 .en 클래스를 붙인다.
 *
 * 카드를 쌓지 않는다. 구획은 위쪽 1px 선과 작은 모노스페이스 라벨로 만든다.
 */

:root{
  /* 바탕 — 흑연이 아니라 철판. 예전의 푸른 기운(#0d0f13)을 뺐다. */
  --bg:#0b0c0d;
  --panel:#141618;
  --panel-2:#1b1e21;
  --line:#262a2f;
  --line-hi:#383e46;

  --fg:#e9ebee;
  --dim:#878d95;
  --dim-2:#767d87;   /* 대비 4.7:1 — 10~11px 마이크로 라벨도 AA를 넘긴다 */

  /* 행동색. 버튼·링크·내 차례에만 쓴다. */
  --accent:#ff6a1f;
  --accent-dim:#b4491420;
  --accent-ink:#0b0c0d;          /* 주황 위 글자는 검정 — 대비 8:1 이상 */
  --danger:#ff4436;
  --ok:#8fbf4a;                  /* 준비 완료 표시 하나에만 */

  --r:3px;
  --tabbar-h:58px;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  overscroll-behavior:none;
  font-variant-numeric:tabular-nums;   /* 목록에서 숫자가 흔들리지 않게 */
}

.screen{
  display:none;
  padding:14px 16px calc(24px + var(--tabbar-h) + env(safe-area-inset-bottom));
  max-width:560px;margin:0 auto;min-height:100%
}
.screen.active{display:block}

/* ── 머리 ────────────────────────────────────────────────────────────── */
.hero{padding:22px 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px}
/* 워드마크. 부제가 헤드라인이고 이름은 그 위 눈썹이다 — 처음 들어온 사람에게는
   "DOUBLE"보다 "함께, 또는 겨루어"가 이 앱이 뭔지 더 잘 알려 준다.
   다만 색은 --dim-2(10~11px 메타 텍스트용)가 아니라 --dim이어야 한다.
   **제품 이름이 페이지에서 가장 흐린 글자면 안 된다.** */
.hero h1{
  margin:0;font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:3.5px;color:var(--dim);text-transform:uppercase
}
.hero .sub{margin:8px 0 0;color:var(--fg);font-size:20px;font-weight:700;letter-spacing:-.4px}

.bar{display:flex;align-items:center;gap:10px;padding:4px 0 14px}
.bar h2{flex:1;min-width:0;margin:0;font-size:18px;font-weight:700;letter-spacing:-.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back{background:none;border:none;color:var(--dim);font-size:14px;padding:6px 8px 6px 0;cursor:pointer}
.back:active{color:var(--fg)}

/* ── 구획 ─────────────────────────────────────────────────────────────
   .card는 더 이상 상자가 아니다. 위쪽 1px 선으로 나뉘는 '구간'이다.
   카드를 쌓으면 경계가 많아져 위계가 사라진다. */
.card{
  background:none;border:0;border-top:1px solid var(--line);border-radius:0;
  padding:14px 0 4px;margin:0
}
.screen > .card:first-of-type{border-top:0;padding-top:2px}
.card.center{text-align:center}

/* 배경이 필요한 곳에만 판을 쓴다 */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px}

/* 한글 라벨 — 자간·대문자 없음 */
.lbl{display:block;font-size:12px;color:var(--dim);margin:14px 0 8px;font-weight:500}

/* 영문 마이크로 라벨 — 계기판 눈금. 라틴 문자에만 붙인다. */
.en{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--dim-2)
}
.lbl:first-child{margin-top:0}
.hint{font-size:12px;color:var(--dim);margin:7px 0 0;line-height:1.55}
.err{font-size:13px;color:var(--danger);margin:8px 0 0;min-height:1em}
.stack{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:8px}
.row>*{flex:1}
.fld{display:flex;flex-direction:column}
.mono{font-family:var(--mono)}

/* ── 버튼 ────────────────────────────────────────────────────────────── */
button{
  font:inherit;cursor:pointer;border-radius:var(--r);border:1px solid transparent;
  padding:13px 16px;transition:background .1s,border-color .1s
}
button:active{transform:none;filter:brightness(1.15)}

.primary{background:var(--accent);color:var(--accent-ink);font-weight:700;border:none;width:100%}
.primary.big{padding:17px;font-size:16px;letter-spacing:-.2px}
.secondary{
  background:var(--panel);color:var(--fg);border:1px solid var(--line);width:100%;
  text-align:left;display:flex;align-items:center;gap:8px
}
.secondary:active{border-color:var(--line-hi)}
.ghost{background:transparent;color:var(--dim);border:1px solid var(--line)}
.ghost.small{padding:8px 11px;font-size:12px}
.link{background:none;border:none;color:var(--accent);font-size:13px;padding:11px 0;width:100%}
.sticky{position:sticky;bottom:calc(10px + var(--tabbar-h) + env(safe-area-inset-bottom));margin-top:14px}

/* ── 입력 ────────────────────────────────────────────────────────────── */
input,select,textarea{
  width:100%;background:var(--panel);color:var(--fg);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 13px;font:inherit;outline:none
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical}
input[type=number]{font-family:var(--mono)}

/* ── 칩 · 세그먼트 ────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{
  background:var(--panel);border:1px solid var(--line);color:var(--dim);
  padding:9px 13px;font-size:14px
}
.chips button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}

.seg{display:flex;gap:0;background:none;padding:0;border:0;border-bottom:1px solid var(--line)}
.seg button{
  flex:1;background:none;color:var(--dim);padding:11px 6px;font-size:14px;
  border:0;border-bottom:2px solid transparent;border-radius:0
}
.seg button.on{color:var(--fg);border-bottom-color:var(--accent);font-weight:700}
/* 선택지가 많으면 한 줄에 안 들어간다 (AMRAP 시간 7개). 줄바꿈을 허용하되
   밑줄 표시 방식은 그대로 둔다 — 여기만 칩으로 바꾸면 톤이 갈린다. */
.seg.wrap{flex-wrap:wrap;border-bottom:0;gap:0 2px}
.seg.wrap button{flex:0 0 auto;min-width:56px;border-bottom:2px solid var(--line)}

/* ── 미리보기 · 수치 ─────────────────────────────────────────────────── */
.preview{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.pv{display:flex;flex-direction:column;gap:2px}
.pv.wide{grid-column:1/-1}
.pv span{font-size:11px;color:var(--dim-2)}
.pv b{font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:-.5px}
.preview .hint,.preview .err{grid-column:1/-1;margin:0}

.code{font-family:var(--mono);font-size:42px;font-weight:700;letter-spacing:10px;
  margin:10px 0 6px;color:var(--accent)}
.code-input{font-family:var(--mono);font-size:26px;text-align:center;letter-spacing:8px;text-transform:uppercase}
.big-num{font-family:var(--mono);font-size:56px;font-weight:700;letter-spacing:-2px}
/* 단위는 산세리프로 뺀다 — 한글이 모노에 들어가면 폭이 어색하다 */
.bu{font-family:var(--sans);font-size:.4em;font-weight:600;color:var(--dim);margin-left:3px;letter-spacing:0}

/* ── 목록 행 ─────────────────────────────────────────────────────────── */
.member{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.member:last-child{border-bottom:none}
.member .role{font-size:11px;color:var(--dim-2);margin-top:2px}
.member .st{font-size:12px;color:var(--dim-2)}
.member .st.ready{color:var(--ok)}
.handle{font-family:var(--mono);font-size:12px;color:var(--dim-2);font-weight:400}
.nowrap{white-space:nowrap;flex:0 0 auto}
.row>.nowrap{flex:0 0 auto}

/* ── 경기장: 지난 매치 ───────────────────────────────────────────────── */
.lastmatch{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:13px 0;margin-bottom:16px}
.lastmatch[hidden]{display:none}
.lm-line{margin-top:7px;font-size:16px}
.lm-line b{font-weight:700}
.lm-dim{color:var(--dim-2);font-size:13px;font-weight:400}
.lm-meta{display:flex;align-items:center;gap:10px;margin-top:6px}
.lm-st{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;padding:2px 6px;border:1px solid}
.lm-st.clear{color:var(--accent);border-color:#4a2410}
.lm-st.forfeit{color:var(--dim-2);border-color:var(--line)}

/* ── 결과 화면 ───────────────────────────────────────────────────────── */
.result{padding:22px 0 16px;border-bottom:1px solid var(--line);margin-bottom:14px}
.result .en{font-size:30px;letter-spacing:5px;font-weight:700}
.result .en.clear{color:var(--accent)}
.result .en.forfeit{color:var(--dim-2)}   /* 적색을 쓰지 않는다 — 모욕하지 않는다 */
.result h2{margin:8px 0 0;font-size:20px;font-weight:700}
.result .hint:empty{display:none}

/* ══ 운동 진행 — 화면 전체가 계기판 ═══════════════════════════════════ */
.screen.run{display:none;padding:0;max-width:none;height:100%}
.screen.run.active{display:flex;flex-direction:column}

/* 예전엔 한 줄에 5개가 몰려 종목명이 잘렸다. 두 덩이로 나눈다. */
.run-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:calc(9px + env(safe-area-inset-top)) 14px 9px;
  border-bottom:1px solid var(--line)
}
.rt-main{min-width:0;flex:1}
.rt-main .en{font-size:10px}
.rt-main>div:last-child{margin-top:3px;font-size:13px;color:var(--fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-side{display:flex;align-items:center;gap:6px;flex:0 0 auto}

/* 지금 어디쯤인가 — 상단 고정. 시선은 중앙 큰 숫자로 먼저 가고 여기서 위치를 잡는다. */
.round{display:flex;align-items:baseline;justify-content:space-between;padding:11px 14px 7px}
.round b{font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:-.5px}

.tap{
  position:relative;flex:1 1 0;min-height:0;overflow:hidden;
  width:100%;background:var(--panel);border:none;border-radius:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--fg)
}
/* 상태 띠 — 색맹·야외 대비. 색 수를 줄일수록 오히려 더 필요하다. */
.tap::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:transparent}

.who{
  font-size:clamp(20px,5.5vw,28px);font-weight:700;color:var(--dim);
  margin-bottom:14px;letter-spacing:-.4px;line-height:1.15
}
.reps{
  font-family:var(--mono);font-size:clamp(64px,26vw,150px);font-weight:700;
  line-height:.92;letter-spacing:-4px
}
.unit{font-size:13px;color:var(--dim-2);margin-top:6px}
.unit.en{font-family:var(--mono);font-size:12px;letter-spacing:2.5px;text-transform:uppercase}
.badge{font-size:12px;font-weight:700;min-height:20px;margin-top:10px}
.badge.corr{color:var(--accent)}
.badge.peak{color:var(--fg)}
.badge.fire{color:var(--accent)}
.next{font-size:13px;color:var(--dim-2);margin-top:12px;min-height:18px}
.timer{font-family:var(--mono);font-size:14px;color:var(--dim);margin-top:10px;min-height:20px}

/* 화면에서 두 번째로 커야 한다. 예전엔 작은 알약이라 제일 작았다.
   진짜 히트 영역은 .tap 전체다 — 이건 어디를 눌러야 하는지 알려 주는 표지다. */
.cta{
  margin-top:26px;font-size:17px;font-weight:700;
  width:min(78%,320px);padding:16px 20px;border-radius:var(--r);
  background:var(--accent);color:var(--accent-ink)
}

/* 상태 — 배경은 명도로, 강조는 주황으로 */
.tap.ready{background:#241206}
.tap.ready::before{background:var(--accent)}
.tap.ready .who{color:var(--accent)}
.tap.ready .cta{background:var(--accent);color:var(--accent-ink)}

.tap.working{background:#16181a}
.tap.working::before{background:var(--fg)}
.tap.working .who{color:var(--fg)}
.tap.working .cta{background:var(--fg);color:var(--bg)}

.tap.waiting{background:#0e0f11;color:var(--dim)}
.tap.waiting::before{background:var(--line-hi)}
.tap.waiting .cta{background:var(--panel-2);color:var(--dim-2);letter-spacing:.5px}

.tap.rest{background:#1d1710}
.tap.rest::before{background:#c8892e}
.tap.rest .cta{background:#c8892e;color:var(--accent-ink)}

.tap.fire{background:#2e0f04}
.tap.fire::before{background:var(--accent)}
.tap.fire .who{color:var(--accent)}

.run-bottom{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line)
}
.act{background:none;border:1px solid var(--line);color:var(--dim);font-size:13px;padding:11px 8px}
.act.fire{color:var(--accent);border-color:#4a2410}
.act.fire.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.act.on{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:700}
.act.danger{color:var(--danger);border-color:#4a1e1a}
.danger-text{color:var(--danger)}

.progressbar{height:8px;background:var(--panel-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#run-bar{height:100%;width:0;background:var(--accent);transition:width .15s linear}
#go-bar{height:100%;width:0;background:var(--accent);transition:width .15s linear}

.chatbtn{
  position:relative;background:none;border:1px solid var(--line);color:var(--dim);
  padding:6px 10px;font-size:12px;flex:0 0 auto
}
.chatbtn .dot{position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.peer{
  flex:0 0 auto;font-size:11px;padding:3px 7px;border:1px solid var(--line);
  color:var(--dim-2);white-space:nowrap
}
.peer.gone{border-color:#4a1e1a;color:var(--danger)}
.peer[hidden]{display:none}

/* ── 기록 목록 ───────────────────────────────────────────────────────── */
.rec{
  background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:13px 0;margin:0;cursor:pointer
}
.rec:active{background:var(--panel)}
.rec .t{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.rec .t b{font-size:15px;font-weight:700}
.rec .t span{font-family:var(--mono);font-size:11px;color:var(--dim-2);white-space:nowrap}
.rec-st{margin-top:7px}
.rec .d{font-size:13px;color:var(--dim);margin-top:5px;line-height:1.5}
.rec.aborted{opacity:.55}
.empty{text-align:center;color:var(--dim-2);padding:52px 16px;font-size:13px;line-height:1.8}

/* ── 통계 ────────────────────────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-bottom:14px;
  background:var(--line);border:1px solid var(--line)}
.tile{background:var(--bg);padding:13px}
.tile span{font-size:11px;color:var(--dim-2);display:block;margin-bottom:5px}
.tile b{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.5px}
.barrow{display:flex;align-items:center;gap:9px;margin:8px 0;font-size:13px}
.barrow .nm{width:auto;min-width:0;flex:1 1 auto;max-width:44%;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barrow .bg{flex:2 1 auto;height:6px;background:var(--panel-2);overflow:hidden}
.barrow .fg{height:100%;background:var(--accent)}
.barrow .vv{width:60px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--dim)}
.chart{width:100%;height:132px;display:block}
.chart .bar{fill:var(--accent)}
.chart .bar.zero{fill:var(--panel-2)}
.chart text{fill:var(--dim-2);font-size:9px;font-family:var(--mono)}

.pacerow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.pacerow:last-child{border-bottom:none}
.pacerow .nm{flex:1;font-size:14px}
.pacerow .vv{font-family:var(--mono);font-size:12px;color:var(--dim)}
.pacerow .src{font-size:11px;padding:2px 6px;border:1px solid var(--line);color:var(--dim-2)}
.pacerow .src.manual{color:var(--accent);border-color:#4a2410}
.pacerow .src.learned{color:var(--ok);border-color:#3a4a24}

/* ── 종목 선택 ───────────────────────────────────────────────────────── */
.picker{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:var(--panel);border:1px solid var(--line);color:var(--fg);
  padding:13px;font-size:15px;text-align:left
}
.picker>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 캐럿은 글리프가 아니라 선 두 개로 그린다 — 폰트에 좌우되지 않는다 */
.picker .caret{
  width:7px;height:7px;flex:0 0 auto;margin:-3px 2px 0 8px;
  border-right:1.5px solid var(--dim-2);border-bottom:1.5px solid var(--dim-2);
  transform:rotate(45deg)
}
.exsearch{margin-top:6px}
.exsearch[hidden]{display:none}
/* 종목 선택 시트 — 모달(200)보다 위에 둔다. 루틴처럼 모달 위에서 열릴 수 있다. */
#expick{z-index:210}
/* 목록만 vh로 묶으면 제목·검색칸 높이는 안 줄어서, 화면이 낮으면(가로 모드 등)
   시트가 위로 삐져나가 제목과 검색칸이 잘린다. 시트를 먼저 묶고 목록이 남는
   자리를 먹게 한다. min-height:0이 없으면 flex 항목이 내용 크기 밑으로 안 줄어든다. */
#expick .sheet{display:flex;flex-direction:column;max-height:88vh}
#expick-list{flex:1 1 auto;min-height:0;max-height:none;margin-top:8px}
#expick .row{flex:0 0 auto}
#expick .hint:empty{display:none}
.exlist{margin-top:6px;border:1px solid var(--line);overflow:hidden;max-height:46vh;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.exlist[hidden]{display:none}
.excat{
  padding:8px 12px;font-size:11px;color:var(--dim-2);
  background:var(--panel-2);border-bottom:1px solid var(--line);position:sticky;top:0
}
.exitem{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  width:100%;background:var(--bg);border:none;border-bottom:1px solid var(--line);
  color:var(--fg);padding:13px 12px;font-size:14px;text-align:left;border-radius:0
}
.exitem>span:first-child{overflow:hidden;text-overflow:ellipsis}
.exitem:last-child{border-bottom:none}
.exitem.on{background:var(--accent);color:var(--accent-ink);font-weight:700}
.exitem .sub{font-family:var(--mono);font-size:10px;color:var(--dim-2)}
.exitem.on .sub{color:#4a2410}

/* ── 혼자 운동: 방식 고르기 ──────────────────────────────────────────── */
.kindbtn{
  display:block;width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  color:var(--fg);padding:15px 2px
}
.kindbtn:active{background:var(--panel)}
.kindbtn .en{margin-bottom:5px}
.kindbtn b{display:block;font-size:16px;margin-bottom:4px;font-weight:700}
.kindbtn span{font-size:12px;color:var(--dim);line-height:1.5}

.ritem{display:flex;align-items:center;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.ritem:last-of-type{border-bottom:none}
.ritem .nm{flex:1}
.ritem .dt{font-family:var(--mono);font-size:11px;color:var(--dim-2)}
.ritem .x{background:none;border:none;color:var(--danger);padding:6px 8px;font-size:13px}

/* ── 토스트 ──────────────────────────────────────────────────────────── */
#toast{
  position:fixed;left:50%;bottom:calc(22px + var(--tabbar-h));
  transform:translateX(-50%) translateY(14px);
  background:var(--fg);border:none;color:var(--bg);padding:11px 16px;border-radius:var(--r);
  font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:.15s;
  z-index:300;max-width:88vw;text-align:center
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.bad{background:var(--danger);color:#fff}

/* ── 모달 ────────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.modal .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.modal .sheet{
  position:relative;width:100%;max-width:520px;background:var(--panel);
  border:1px solid var(--line);border-bottom:0;border-radius:var(--r) var(--r) 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  animation:rise .12s ease-out
}
@media(min-width:560px){
  .modal{align-items:center}
  .modal .sheet{border-radius:var(--r);border-bottom:1px solid var(--line)}
}
@keyframes rise{from{transform:translateY(12px)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .modal .sheet{animation:none}
  *{transition-duration:.01ms !important}
}
.modal h3{margin:0 0 6px;font-size:17px;font-weight:700}
.modal .row{margin-top:16px}
.modal .err:empty{display:none}
.mfield{margin-top:12px}
.mfield>label{display:block;font-size:12px;color:var(--dim);margin-bottom:7px}
.mchips{display:flex;flex-wrap:wrap;gap:6px}
.mchips button{background:var(--panel-2);border:1px solid var(--line);color:var(--dim);
  padding:10px 14px;font-size:14px;border-radius:var(--r)}
.mchips button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}

/* ── 제안 카드 ───────────────────────────────────────────────────────── */
.ask{margin:0 12px 10px;padding:13px;border-radius:var(--r);
  background:#1d1710;border:1px solid #4a3a18}
.ask.waiting-ask{background:var(--panel);border-color:var(--line)}
.ask-t{font-size:14px;font-weight:700;margin-bottom:5px}
.ask-m{font-size:13px;color:var(--dim);margin-bottom:10px;white-space:pre-wrap}
.ask-m:empty{display:none}
.ask input{margin-bottom:10px}
.ask .row{gap:6px}

/* ── 채팅 ────────────────────────────────────────────────────────────── */
.chat{
  position:fixed;inset:auto 0 0 0;max-height:72vh;z-index:150;
  background:var(--panel);border-top:1px solid var(--line);border-radius:0;
  display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)
}
.chat[hidden]{display:none}
.chat-head{display:flex;justify-content:space-between;align-items:center;
  padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--dim)}
.chat-log{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;
  gap:7px;min-height:34vh}
.msg{max-width:80%;padding:8px 11px;border-radius:var(--r);font-size:13px;
  line-height:1.45;word-break:break-word}
.msg.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink)}
.msg.you{align-self:flex-start;background:var(--panel-2)}
.msg .nm{display:block;font-family:var(--mono);font-size:10px;color:var(--dim-2);margin-bottom:2px}
.msg.me .nm{color:#5a2c10}
.msg.sys{align-self:center;background:none;color:var(--dim-2);font-size:12px;
  text-align:center;max-width:96%}
.chat-in{display:flex;gap:6px;padding:10px 14px 14px;border-top:1px solid var(--line)}
.chat-in input{flex:1}
.chat-in button{flex:0 0 auto;width:auto;padding:12px 16px}

/* ── 기록 상세 타임라인 ──────────────────────────────────────────────── */
.tl{position:relative;padding-left:16px}
.tl::before{content:"";position:absolute;left:3px;top:4px;bottom:4px;width:1px;background:var(--line)}
.tlrow{position:relative;padding:8px 0;font-size:13px;line-height:1.55}
.tlrow::before{content:"";position:absolute;left:-16px;top:14px;width:7px;height:7px;
  background:var(--dim-2);border:2px solid var(--bg)}
.tlrow.t-turn_complete::before{background:var(--fg)}
.tlrow.t-finisher_on::before,.tlrow.t-propose::before{background:var(--accent)}
.tlrow.t-respond::before{background:var(--ok)}
.tlrow.t-pause::before,.tlrow.t-undo::before{background:#c8892e}
.tlrow.t-finish::before{background:var(--ok)}
.tlrow .tm{font-family:var(--mono);font-size:11px;color:var(--dim-2);margin-right:8px}
.tlrow .dur{font-family:var(--mono);color:var(--accent);font-weight:700}
.tlrow.dim{color:var(--dim-2)}

/* ══ 하단 탭 ══════════════════════════════════════════════════════════
   값만 변수로 바꾼다. `body.notabs .screen`으로 쓰면 특정도 0-2-1이 되어
   `.screen.run{padding:0}`(0-2-0)을 이겨 운동 화면 바닥이 밀린다.

   z-index: 300 토스트 > 200 모달 > 150 채팅 > 110 도전장 > 100 탭 > 90 배너.
   탭이 200 미만이어야 하는 건 기능적 이유다 — openModal에 중첩 가드가 없어서
   z-index:200 백드롭이 두 번째 모달을 막는 유일한 장치다. */
body.notabs{--tabbar-h:0px}

#tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  display:flex;background:var(--bg);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)
}
body.notabs #tabbar{display:none}
#tabbar button{
  position:relative;flex:1;background:none;border:none;border-radius:0;
  color:var(--dim-2);font-size:11px;padding:9px 4px 8px;
  display:flex;flex-direction:column;align-items:center;gap:4px
}
#tabbar button .ic{display:flex;align-items:center;justify-content:center;height:20px}
#tabbar button .ic svg{width:20px;height:20px;display:block}
#tabbar button .tlab{line-height:1}
#tabbar button.on{color:var(--accent)}
#tabbar button.on::before{
  content:"";position:absolute;top:0;left:22%;right:22%;height:2px;background:var(--accent)
}
#tabbar button .badge-dot{
  position:absolute;top:6px;right:calc(50% - 16px);
  width:6px;height:6px;border-radius:50%;background:var(--accent)
}
#tabbar button .badge-dot[hidden]{display:none}

/* 탭으로 나가도 방이 살아 있다. 돌아올 길을 항상 띄워 준다. */
#room-banner{
  position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h) + 8px);z-index:90;
  max-width:536px;margin:0 auto;
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--r);
  font-weight:700;font-size:13px;padding:12px 16px;text-align:center
}
#room-banner[hidden]{display:none}

#invite-card{
  position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h) + 8px);z-index:110;
  max-width:536px;margin:0 auto
}
#invite-card[hidden]{display:none}

/* ── 화면별 자잘한 것 ────────────────────────────────────────────────── */
#rec-seg{margin-bottom:14px}
#rec-history[hidden],#rec-stats[hidden]{display:none}
#auth-seg{margin-bottom:18px}
#auth-form{display:block}
#auth-name-fld[hidden],#auth-invite-fld[hidden]{display:none}
#auth-submit{margin-top:20px}
#screen-mates .member{gap:10px}
#screen-mates .member .row{flex:0 0 auto;width:auto;gap:6px}
#screen-mates .member .row button{width:auto;padding:8px 12px;font-size:12px}

/* 제안 카드가 뜨면 tap이 좁아진다. 작은 화면에서 숫자가 잘리지 않게. */
.screen.run:has(.ask:not([hidden])) .next,
.screen.run:has(.ask:not([hidden])) .timer{display:none}

/* 버전 — 폰에서 무엇이 도는지 확인할 수 있어야 캐시 문제와 진짜 버그를 구분한다 */
.ver{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--dim-2);margin:14px 0 0}
.ver:empty{display:none}

/* 포커스가 보이게 */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px
}