/* 도구 페이지 공통 — 장비 서랍, 나이 곡선, 예상 기록 노트, 대회 페이지의 장비 점검.
   색은 토큰만 쓴다. 읽는 글자는 12px 바닥, 눌리는 것은 24px 이상. */

/* ── 대회 페이지의 장비 점검 카드 ─────────────────────────── */
.gv { margin-top: 16px; padding: 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.gv-title { font-size: 16px; font-weight: 800; margin: 0 0 4px; color: var(--ink); }
.gv-d { margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.gv-sub { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 12px; }
.gv-row { padding: 12px 0; border-top: 1px solid var(--line); }
.gv-h { font-size: 15px; font-weight: 800; margin: 0 0 4px; color: var(--ink); }
.gv-row p { font-size: 15px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 4px; }
.gv-row b { color: var(--ink); }
.gv-ul { margin: 0 0 4px; padding-left: 18px; }
.gv-ul li { font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }
.gv-small { font-size: 13px !important; color: var(--ink-faint) !important; }
.gv-link { margin: 6px 0 0 !important; }
.gv-link a, .gv-foot a { color: var(--accent-ink); font-weight: 700; text-decoration: none;
  display: inline-block; padding-block: 4px; min-height: 24px; border-bottom: 1px solid var(--border); }
.gv-link a:hover, .gv-foot a:hover { border-bottom-color: var(--accent); }
.gv-foot { font-size: 13px; line-height: 1.75; color: var(--ink-faint); margin: 12px 0 0; }
.gv-form { display: grid; gap: 8px; margin: 6px 0; }
.gv-form label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-faint); }
.gv-form select, .gv-form input { min-height: 40px; padding: 8px 10px; border-radius: 8px; font-size: 15px;
  background: var(--tint-1); border: 1px solid var(--line); color: var(--ink); }
.gv-out { font-size: 15px !important; color: var(--ink) !important; }

/* ── 도구 페이지 ───────────────────────────────────────────── */
.tp { max-width: 720px; margin: 0 auto; padding: 48px 20px 90px; }
.tp-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 7vw, 38px); line-height: 1.28; margin: 0 0 12px; color: var(--ink); letter-spacing: -0.01em; }
.tp-sub { font-size: 17px; line-height: 1.8; color: var(--ink-soft); margin: 0 0 28px; }
.tp-sec { margin: 44px 0 0; }
.tp-h2 { font-size: 22px; line-height: 1.35; font-weight: 800; color: var(--ink); margin: 0 0 14px; padding-left: 12px; border-left: 4px solid var(--accent); }
.tp-p { font-size: 16px; line-height: 1.85; color: var(--ink-soft); margin: 0 0 14px; }
.tp-p b { color: var(--ink); }
.tp-small { font-size: 13.5px; line-height: 1.75; color: var(--ink-faint); }
.tp-card { padding: 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); margin: 0 0 12px; }
.tp-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tp-field { display: grid; gap: 4px; font-size: 13px; color: var(--ink-faint); }
.tp-field input, .tp-field select { min-height: 44px; padding: 8px 10px; border-radius: 8px; font-size: 16px;
  background: var(--tint-1); border: 1px solid var(--line); color: var(--ink); }
.tp-btn { min-height: 44px; padding: 10px 18px; border-radius: 8px; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 800; background: var(--accent); color: var(--on-accent); }
.tp-btn.ghost { background: var(--tint-1); color: var(--ink); border: 1px solid var(--line); }
.tp-btn:disabled { opacity: .5; cursor: default; }
.tp-note { margin: 12px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }
.tp-alert { padding: 12px 14px; border-radius: 10px; background: var(--tint-2); border: 1px solid var(--accent); margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: var(--ink); }
.tp-alert button { margin-left: 8px; }
.tp-src { font-size: 13.5px; line-height: 1.8; color: var(--ink-faint); }
.tp-src a { color: var(--ink-soft); }
.tp-faq h3 { font-size: 17px; line-height: 1.5; font-weight: 800; margin: 22px 0 6px; color: var(--ink); }
.tp-faq p { font-size: 16px; line-height: 1.85; color: var(--ink-soft); margin: 0; }

/* 판정 줄 */
.kit-item { padding: 14px 0; border-top: 1px solid var(--line); }
.kit-item:first-child { border-top: 0; }
.kit-name { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 2px; }
.kit-q { font-size: 13.5px; color: var(--ink-faint); margin: 0 0 8px; }
.kit-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kit-row input { width: 120px; min-height: 44px; padding: 8px 10px; border-radius: 8px; font-size: 16px;
  background: var(--tint-1); border: 1px solid var(--line); color: var(--ink); }
.kit-unit { font-size: 14.5px; color: var(--ink-soft); }
.kit-v { font-size: 15px; font-weight: 800; }
.kit-v.pass { color: var(--ink); }
.kit-v.fail { color: var(--accent-ink); }
.kit-v.pass::before { content: "통과 · "; }
.kit-v.fail::before { content: "기준 밖 · "; }
.kit-v.unknown { color: var(--ink-faint); font-weight: 600; }
.kit-meta { font-size: 13px; color: var(--ink-faint); margin: 6px 0 0; line-height: 1.7; }
.kit-meta a { color: var(--ink-soft); }

/* 곡선과 표 */
.ac-fig { margin: 0 0 10px; }
.ac-fig svg { width: 100%; height: auto; display: block; }
.ac-fig figcaption { font-size: 13px; color: var(--ink-faint); line-height: 1.7; margin-top: 6px; }
.ac-grid line.g { stroke: var(--line); stroke-width: 1; }
.ac-tier { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 4; }
.ac-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ac-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.ac-lab { font-size: 11px; fill: var(--ink-faint); }
.ac-labs { font-size: 12px; fill: var(--ink-soft); font-weight: 700; }
.ac-tip { position: absolute; pointer-events: none; padding: 6px 9px; border-radius: 8px; font-size: 12px; line-height: 1.5;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.ac-wrap { position: relative; }
.tp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tp-table th, .tp-table td { padding: 8px 6px; text-align: right; border-top: 1px solid var(--line); color: var(--ink-soft); }
.tp-table th:first-child, .tp-table td:first-child { text-align: left; }
.tp-table th { font-size: 13px; font-weight: 700; color: var(--ink-faint); border-top: 0; }
.tp-table tr.cur td { color: var(--ink); font-weight: 800; }
.tp-table-wrap { overflow-x: auto; }

/* 예상 기록 노트 */
.lg-item { padding: 14px 0; border-top: 1px solid var(--line); }
.lg-name { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 2px; }
.lg-line { font-size: 15px; line-height: 1.8; color: var(--ink-soft); margin: 2px 0; }
.lg-line b { color: var(--ink); }
.lg-sum { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); text-align: center; }
.lg-sum b { display: block; font-size: 22px; color: var(--ink); font-family: var(--font-display); }
.lg-sum span { font-size: 13px; color: var(--ink-faint); }

/* 입력 칸 겹침 방지: 그리드 칸이 내용보다 좁아져도 입력이 밖으로 나가지 않게 한다.
   hidden 속성이 display:grid 에 눌리지 않게 한다. */
.tp [hidden], .gv [hidden] { display: none !important; }
.tp-field { min-width: 0; }
.tp-field input, .tp-field select { width: 100%; min-width: 0; box-sizing: border-box; }
.tp-field input[type="date"] { appearance: none; -webkit-appearance: none; }

/* 종목별 기준 페이지 */
.dq-card { padding: 14px 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); margin: 0 0 10px; }
.dq-top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0 0 6px; }
.dq-title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; }
.dq-tag { font-size: 13px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--tint-1); border: 1px solid var(--line); color: var(--ink-soft); }
.dq-tag.dq { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dq-clause { font-size: 13px; color: var(--ink-faint); margin-left: auto; }
.dq-text { font-size: 15px; line-height: 1.85; color: var(--ink-soft); margin: 0; }
.dq-watch { font-size: 13px; color: var(--ink-faint); margin: 8px 0 0; }
.dq-watch.dq-changed { color: var(--accent-ink); font-weight: 700; }
.dq-link { display: block; padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: inherit; margin: 0 0 8px; }
.dq-link:hover { border-color: var(--accent); }
.dq-link b { display: block; font-size: 15px; color: var(--ink); }
.dq-link span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }
.gv-ck { list-style: none; padding-left: 0; }
.gv-ck li { padding: 6px 0; }
.gv-ck label { display: inline-flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); cursor: pointer; }
.gv-ck input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.gv-ck a { font-size: 13px; color: var(--accent-ink); margin-left: 4px; }

.dq-fig { margin: 10px 0 0; }
.dq-fig img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; background: var(--tint-1); }
.dq-fig figcaption { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; line-height: 1.6; }

.cv-big { margin: 4px 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cv-big b { font-size: 34px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.cv-big span { font-size: 15px; color: var(--ink-soft); }
.cv-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cv-table th, .cv-table td { padding: 8px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; }
.cv-table th { color: var(--ink-soft); }
.cv-table td { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
#cvChart svg { display: block; max-width: 100%; height: auto; }
#cvFile { min-height: 44px; font-size: 14.5px; }
.cv-check { display: flex; gap: 8px; align-items: center; font-size: 14.5px; color: var(--ink-soft); }
.cv-check input { width: 20px; height: 20px; min-height: 0; margin: 0; }
.tp-card .kit-row { margin-top: 14px; }
.cp-lv { font-size: 18px; color: var(--ink); margin: 0 0 4px; }
.cp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.cp-list b { color: var(--ink); }
.cp-un { color: var(--ink-faint); }
.cp-v { display: block; font-size: 13px; color: var(--ink-faint); }

/* 경사 색 단면도 (트레일루트) — 색만으로 구분하지 않도록 범례에 글자를 함께 적는다 */
.gp-fig { margin: 12px 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.gp-tag { font-size: 12.5px; letter-spacing: .02em; color: var(--ink-faint); margin: 0 0 6px; }
.gp-svg { width: 100%; max-width: 620px; height: auto; display: block; }
.gp-svg path { stroke: none; }
.gp-svg .gp-grid, .gp-svg .gp-tick { stroke: var(--line); stroke-width: 1; }
.gp-tx { font-size: 11.5px; fill: var(--ink-faint); font-variant-numeric: tabular-nums; }
.gp-tx-b { fill: var(--ink); font-weight: 600; }
.gp-svg .gp-dot { fill: var(--ink); stroke: none; }
.gp-svg .gp-peak { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.gp-svg .gp-line { stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.gp-d { fill: #8fb3c9; } .gp-0 { fill: #b9c7a0; } .gp-1 { fill: #e3c46a; }
.gp-2 { fill: #e08a45; } .gp-3 { fill: #c4433a; }
.gp-leg { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--ink-soft); }
.gp-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.gp-sw.gp-d { background: #8fb3c9; } .gp-sw.gp-0 { background: #b9c7a0; } .gp-sw.gp-1 { background: #e3c46a; }
.gp-sw.gp-2 { background: #e08a45; } .gp-sw.gp-3 { background: #c4433a; }

/* 산 페이지: 경사 비율 막대, 구간 표 */
.gb-bar { display: flex; height: 18px; border-radius: 6px; overflow: hidden; margin: 8px 0; }
.gb-seg { display: block; height: 100%; }
.gb-seg.gp-0 { background: #b9c7a0; } .gb-seg.gp-1 { background: #e3c46a; }
.gb-seg.gp-2 { background: #e08a45; } .gb-seg.gp-3 { background: #c4433a; }
.mt-wrap { overflow-x: auto; }
.mt-table { border-collapse: collapse; font-size: 14.5px; min-width: 100%; }
.mt-table th, .mt-table td { padding: 7px 10px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-table th { color: var(--ink-soft); font-weight: 400; }

/* 경로 지도 */
.rm-box { height: 340px; max-width: 100%; border-radius: 8px; margin-top: 10px; border: 1px solid var(--line); }

/* 목록·본문 속 링크: 기본 파랑 대신 글자색에 포인트 밑줄 */
.tp a:not(.tp-btn), .cp-list a, .mt-table a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tp a:not(.tp-btn):hover, .cp-list a:hover, .mt-table a:hover { color:var(--accent-ink); }
@media (max-width: 480px) { .hide-sm { display: none; } .mt-table th, .mt-table td { padding: 10px 6px; } .mt-table { font-size: 14px; } }
@media (max-width: 600px) { .tp { padding-left: 16px; padding-right: 16px; } }

/* 이모지가 붙은 소제목은 이모지가 표식이므로 왼쪽 굵은 선은 뺀다(목록 묶음 제목은 선만 쓴다). */
.tp-h2:has(> .emo){border-left:0;padding-left:0;}
.tp-h2 .emo{width:1.1em;height:1.1em;vertical-align:-0.2em;margin-right:.45em;}

/* 파일 고르기 버튼: 브라우저 기본 모양(영어) 대신 사이트 버튼 모양으로 */
input[type=file]{font-size:14.5px;color:var(--ink-soft);max-width:100%;}
input[type=file]::file-selector-button{font:700 14.5px var(--font-body);min-height:40px;padding:0 16px;margin-right:12px;border:1.5px solid var(--ink);border-radius:999px;background:var(--bg);color:var(--ink);cursor:pointer;}

/* 누르는 목록: 카드 한 장이 한 항목. 테두리·살짝 뜬 그림자·오른쪽 화살표로 "눌러 보라"는 표시를 준다.
   수치는 항목 단위로만 줄이 바뀌어 한가운데서 끊기지 않는다. */
.cp-list{gap:10px;}
.cp-card{margin:0;}
.tp .cp-list a.cp-row{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;row-gap:0;
  min-height:56px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  color:var(--ink);text-decoration:none;box-shadow:0 1px 0 rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.06);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;-webkit-tap-highlight-color:transparent;}
.tp .cp-list a.cp-row::after{content:"›";grid-column:2;grid-row:1 / span 4;align-self:center;font-size:28px;line-height:1;
  font-weight:400;color:var(--accent-ink);}
.tp .cp-list a.cp-row:hover{border-color:var(--accent);box-shadow:0 1px 0 rgba(0,0,0,.04),0 5px 12px rgba(0,0,0,.09);}
.tp .cp-list a.cp-row:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,.08);}
.cp-name{grid-column:1;font-size:17px;font-weight:800;line-height:1.4;color:var(--ink);}
.cp-meta{grid-column:1;margin-top:3px;display:flex;flex-wrap:wrap;gap:0 14px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);}
/* 긴 설명 한 줄이 칸을 밀어 모바일에서 가로로 넘쳤다. 줄은 바꾸되 단어 가운데서는 끊지 않는다 */
.cp-meta > span{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;}
.cp-near{grid-column:1;margin-top:3px;font-size:13.5px;line-height:1.55;color:var(--ink-faint);}
/* 표 안의 코스 이름 링크도 누르는 곳임을 알리는 화살표를 붙인다. */
.mt-table a::after{content:" ›";color:var(--accent-ink);font-weight:800;}
/* 문장 속 링크는 색으로도 링크임을 알린다. */
.tp .tp-p a:not(.tp-btn),.tp .tp-sub a:not(.tp-btn),.tp .tp-note a:not(.tp-btn){color:var(--accent-ink);}

/* 표의 첫 칸(이름)은 왼쪽 맞춤으로 두고 줄이 바뀌게 한다. 오른쪽 맞춤에 한 줄 고정이면 화면 밖으로 밀렸다. */
.mt-table th:first-child,.mt-table td:first-child{text-align:left;white-space:normal;min-width:0;padding-left:2px;}
.mt-table td:first-child a{font-weight:700;text-decoration:none;line-height:1.45;}
.mt-table td:first-child a::after{content:" ›";color:var(--accent-ink);font-weight:800;}
@media (max-width:480px){.mt-table td:first-child{width:40%;}}

/* 칼랭크 난이도 배지 */
.dg-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 12px}
.dg-lab{font-size:14.5px;font-weight:700;color:var(--ink-soft)}
.dg-name{font-size:28px;font-weight:800;color:var(--ink);line-height:1.2}
.dg-score{font-size:15px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.dg-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;list-style:none;margin:0 0 14px;padding:0}
.dg-scale li{border-radius:8px;background:var(--line,#e6e8ec);color:var(--ink-soft);text-align:center;padding:9px 2px;font-size:13px;font-weight:700;line-height:1.3}
.dg-scale li.on{background:var(--accent);color:var(--on-accent);outline:2px solid var(--accent-ink,var(--accent));outline-offset:2px}

/* 누르는 곳은 높이 40px 이상으로 — 모바일에서 손가락이 닿기 쉽게 */

/* 야디지북 표: 좁은 화면에서도 다섯 칸이 한 화면에 들어오게 줄인다 */
.yd-table { font-size: 13px; }
.yd-table th, .yd-table td { padding: 7px 5px; }
.yd-table thead th { font-size: 12px; white-space: normal; line-height: 1.3; vertical-align: bottom; }
.yd-table tbody th { text-align: left; color: var(--ink); font-weight: 700; }
.yd-table .yd-up td:nth-child(3) { color: var(--ink); font-weight: 700; }

/* 내 목록 (trail-mark.js) */
.mn { padding: 20px 18px 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.mn .tp-h2 { margin-bottom: 8px; }
.mn-lead { margin: 0 0 16px; font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); }
.mn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 20px; }
.mn-stat { padding: 12px 6px; border-radius: 12px; background: var(--tint-1); text-align: center; min-width: 0; }
.mn-stat b { display: block; font-size: 22px; line-height: 1.2; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.mn-stat span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-faint); }
.mn-h { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 16.5px; font-weight: 800; color: var(--ink); }
.mn-n { margin-left: 2px; padding: 1px 9px; border-radius: 999px; background: var(--tint-2); font-size: 13px; font-weight: 800; color: var(--accent-ink); }
.mn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mn-item { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.mn-name { font-size: 16px; font-weight: 800; line-height: 1.45; color: var(--ink); text-decoration: none; }
.mn-name:hover { color: var(--accent-ink); }
.mn-meta { font-size: 13px; color: var(--ink-faint); }
.mn-acts { display: flex; gap: 4px; margin-top: 6px; }
.mn-act { min-height: 44px; padding: 0 12px; margin-left: -12px; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--accent-ink); }
.mn-act + .mn-act { margin-left: 0; }
.mn-del { color: var(--ink-faint); font-weight: 600; }
.mn-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.mn-tools .tp-btn { flex: 1 1 150px; border-radius: 10px; }
.mn-foot { margin: 14px 0 0; font-size: 13px; line-height: 1.75; color: var(--ink-faint); }
.mn-import { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line); }
.mn-import-t { font-size: 14px; color: var(--ink-soft); flex: 1 1 200px; }
.mn-file { position: relative; display: inline-flex; align-items: center; overflow: hidden; border-radius: 10px; }
.mn-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.kit-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tr-prog-n { margin: 0 0 8px; font-size: 15px; color: var(--ink-soft); }
.tr-prog-n b { font-size: 24px; font-weight: 800; color: var(--ink); }
.tr-prog-bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 0 0 10px; }
.tr-prog-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.cv-scroll { overflow-x: auto; }

.gv-mine { display: grid; gap: 4px; margin: 8px 0 4px; }
.gv-mine label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-faint); }
.gv-mine input { min-height: 40px; padding: 8px 10px; border-radius: 8px; font-size: 15px; max-width: 200px;
  background: var(--tint-1); border: 1px solid var(--line); color: var(--ink); }