.level-form-card{
  max-width:420px;margin:24px auto 0;
  background:var(--surface);border:1px solid var(--border);border-radius:2px;
  padding:24px 22px;
}
.level-form{display:flex;flex-direction:column;gap:10px;}
.level-form label{font-size:13.5px;color:var(--ink-faint);margin-top:4px;}
.level-form input,.level-form select{
  padding:11px 12px;border:1px solid var(--border);border-radius:2px;
  background:var(--bg);color:var(--ink);font-size:15px;font-family:var(--font-body);
}

.level-result{
  max-width:420px;margin:24px auto 0;
  background:var(--surface);border:1px solid var(--border);border-radius:2px;
  padding:28px 22px;text-align:center;
}
.level-tier-badge{
  display:inline-block;font-family:var(--font-display);font-size:24px;
  color:var(--accent-ink);border:2px solid var(--accent);border-radius:2px;
  padding:8px 20px;margin-bottom:12px;
}
.level-tier-desc{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 20px;}

.level-stats{display:flex;justify-content:space-around;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:20px;}
.level-stat{display:flex;flex-direction:column;gap:4px;}
.level-stat-label{font-size:13.5px;color:var(--ink-faint);}
.level-stat-value{font-size:16px;font-weight:900;color:var(--ink);}

.level-tier-table-title{font-size:13.5px;color:var(--ink-faint);margin:0 0 8px;text-align:left;}
.level-tier-table{display:flex;flex-direction:column;gap:1px;background:var(--line);text-align:left;}
.level-tier-row{background:var(--bg);padding:9px 12px;font-size:13.5px;color:var(--ink-faint);}
.level-tier-step{display:inline-block;min-width:18px;margin-right:9px;font-weight:900;color:var(--ink-faint);text-align:center;}
.level-tier-row.current .level-tier-step{color:var(--accent-ink);}
.level-tier-row.current{background:var(--surface);color:var(--accent-ink);font-weight:900;border-left:3px solid var(--accent);padding-left:9px;}

.level-disclaimer{
  max-width:420px;margin:16px auto 0;font-size:13.5px;color:var(--ink-faint);
  line-height:1.6;text-align:center;
  /* 가운데 정렬은 줄 끝이 양쪽 다 보여서 길이가 다르면 바로 티가 난다.
     pretty 는 마지막 줄에 한 단어만 남을 때만 손대서, 두 단어(12자)로
     떨어진 이 문단을 그냥 지나쳤다. 39/43/43/12 → 34/32/35/36. */
  text-wrap:balance;
}

@media (max-width:600px){
  .level-stats{flex-direction:column;gap:12px;}
}

/* 기록증 입구와 직접 입력 사이의 구분선 */
.lv-or{
  position:relative;text-align:center;font-size:13.5px;color:var(--ink-faint,var(--ink-faint));
  margin:16px 0 12px;
}
.lv-or::before,.lv-or::after{
  content:"";position:absolute;top:50%;width:calc(50% - 56px);
  height:1px;background:var(--border,var(--border));
}
.lv-or::before{left:0;}
.lv-or::after{right:0;}

/* ── 연령등급 숫자와 다음 등급 ───────────────────────────── */
.lv-grade{
  display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;
  margin:16px 0 20px;
}
.lv-grade-num{
  flex:1 1 150px;display:flex;flex-direction:column;justify-content:center;
  padding:16px 18px;border-radius:10px;
  background:linear-gradient(135deg,rgba(255,61,26,.14),rgba(255,61,26,.04));
  border:1px solid rgba(255,61,26,.32);
}
.lv-grade-pct{font-size:38px;font-weight:900;color:var(--ink);line-height:1;letter-spacing:-1px;}
.lv-grade-pct i{font-size:20px;font-style:normal;margin-left:2px;color:var(--accent-ink);}
.lv-grade-cap{font-size:13.5px;color:var(--ink-soft,var(--ink-faint));margin-top:7px;line-height:1.5;}
.lv-grade-next{
  flex:1 1 170px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:16px 18px;border-radius:10px;
  background:var(--surface,var(--surface));border:1px solid var(--border,var(--border));
}
.lv-next-l{font-size:13.5px;color:var(--ink-soft,var(--ink-faint));}
.lv-next-l b{color:var(--ink);}
.lv-next-v{font-size:22px;font-weight:900;color:var(--accent-ink);line-height:1.2;}
.lv-next-t{font-size:13.5px;color:var(--ink-faint,var(--ink-faint));}

.lv-nextrace{margin:-6px 0 20px;padding:14px 16px;border-radius:10px;border:1px solid var(--border,var(--border));background:var(--surface,var(--surface));}
.lv-nextrace-h{margin:0 0 8px;font-size:14px;color:var(--ink-soft,var(--ink-faint));}
.lv-nextrace-h b{color:var(--ink);}
.lv-nextrace-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.lv-nextrace-l a{display:grid;grid-template-columns:3.4rem 1fr auto;gap:10px;align-items:baseline;padding:8px 0;color:var(--ink);text-decoration:none;border-top:1px solid var(--border,var(--border));}
.lv-nextrace-l li:first-child a{border-top:0;}
.lv-nr-d{font-size:13px;color:var(--accent-ink);font-weight:800;}
.lv-nr-n{min-width:0;font-size:14.5px;overflow-wrap:anywhere;}
.lv-nr-r{font-size:12.5px;color:var(--ink-faint);white-space:nowrap;}
.lv-nextrace-n{margin:8px 0 0;font-size:12.5px;color:var(--ink-faint);line-height:1.55;}

/* ── 줄이면 어떻게 바뀌나 ────────────────────────────────── */
.lv-what{border:1px solid var(--border,var(--border));border-radius:10px;overflow:hidden;margin-bottom:20px;}
.lv-what-row{
  display:grid;grid-template-columns:1fr 1.3fr 1fr 1.6fr;gap:6px;
  padding:11px 14px;font-size:14.5px;color:var(--ink);
  border-bottom:1px solid var(--border,var(--border));
}
.lv-what-row:last-child{border-bottom:none;}
.lv-what-head{background:var(--surface,var(--surface));font-size:13.5px;font-weight:700;color:var(--ink-faint,var(--ink-faint));}
.lv-what-row.up{background:rgba(255,61,26,.07);}
.lv-what-row.up span:last-child{color:var(--accent-ink);font-weight:700;}

/* ── 거리 환산 ───────────────────────────────────────────── */
.lv-equiv{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;margin-bottom:8px;}
.lv-equiv-c{
  display:flex;flex-direction:column;gap:4px;align-items:center;
  padding:13px 8px;border-radius:9px;
  background:var(--surface,var(--surface));border:1px solid var(--border,var(--border));
}
.lv-equiv-d{font-size:13.5px;color:var(--ink-faint,var(--ink-faint));}
.lv-equiv-t{font-size:16px;font-weight:700;color:var(--ink);}
.lv-equiv-note{font-size:13.5px;line-height:1.75;color:var(--ink-faint,var(--ink-faint));margin:0 0 20px;}

@media (max-width:520px){
  .lv-grade-pct{font-size:32px;}
  .lv-what-row{grid-template-columns:.8fr 1.2fr .9fr 1.4fr;font-size:13.5px;padding:10px;}
}

/* ── 거리별 강점 ─────────────────────────────────────────── */
.lv-dna{
  border:1px solid var(--border,var(--border));border-radius:10px;
  background:var(--surface,var(--surface));margin:0 0 20px;
}
.lv-dna summary{
  padding:14px 16px;font-size:15px;font-weight:700;color:var(--ink);
  cursor:pointer;list-style:none;
}
.lv-dna summary::-webkit-details-marker{display:none;}
.lv-dna summary::before{content:"▸ ";color:var(--accent-ink);}
.lv-dna[open] summary::before{content:"▾ ";}
.lv-dna-in{padding:0 16px 16px;}
.lv-dna-help{font-size:13.5px;line-height:1.7;color:var(--ink-faint,var(--ink-faint));margin:0 0 12px;}
.lv-dna-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.lv-dna-row label{flex:0 0 86px;font-size:13.5px;color:var(--ink-soft,var(--ink-faint));}
.lv-dna-row input{
  flex:1 1 auto;min-width:0;padding:9px 11px;border-radius:7px;
  background:var(--bg,var(--bg));border:1px solid var(--border,var(--border));
  color:var(--ink);font-family:inherit;font-size:15px;
}
.lv-dna-row input.err{border-color:var(--accent,#FF3D1A);}
.lv-dna-go{
  width:100%;margin-top:6px;font-family:inherit;font-size:15px;font-weight:700;
  padding:11px;border-radius:8px;border:1px solid var(--border,var(--border));
  background:transparent;color:var(--ink);cursor:pointer;
}
.lv-dna-go:hover{border-color:var(--accent,#FF3D1A);color:var(--accent-ink);}
.lv-dna-msg{font-size:13.5px;color:var(--accent-ink);margin:12px 0 0;line-height:1.7;}
.lv-dna-verdict{margin:16px 0 12px;padding:14px 16px;border-radius:9px;
  background:linear-gradient(135deg,rgba(255,61,26,.12),rgba(255,61,26,.03));
  border:1px solid rgba(255,61,26,.3);}
.lv-dna-v{font-size:15px;font-weight:900;color:var(--ink);margin:0 0 6px;}
.lv-dna-d{font-size:13.5px;line-height:1.8;color:var(--ink-soft);margin:0;}
.lv-dna-note{font-size:13.5px;line-height:1.75;color:var(--ink-faint,var(--ink-faint));margin:12px 0 0;}

@media (max-width:520px){
  .lv-dna-row label{flex:0 0 70px;}
}

/* ── 거리별 연령등급 점 그래프 ──────────────────────────────
   막대가 아니라 점으로 그린다. 막대는 0 에서 시작해야 길이가
   뜻을 갖는데, 0~80% 자에서는 53%와 58%가 구분되지 않는다.
   자를 30~80% 로 고정하고 등급 경계를 세로선으로 깔면
   점의 위치 자체가 등급을 뜻하게 된다.
   ─────────────────────────────────────────────────────────── */
.lv-dp{
  --lbl:48px;            /* 거리 이름 칸 */
  --time:58px;           /* 기록 칸 */
  --val:50px;            /* 연령등급 칸 */
  --gap:10px;
  margin:4px 0 0;
}
.lv-dp-cap{
  font-size:13.5px;color:var(--ink-faint,var(--ink-faint));margin:0 0 10px;letter-spacing:.2px;
  display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;
}
.lv-dp-cap span{opacity:.75;}
.lv-dp-cap span::before{content:"·";margin-right:6px;}
.lv-dp-plot{position:relative;}

/* 등급 경계 — 실선 헤어라인, 눈에 띄지 않게 */
.lv-dp-gridwrap{
  position:absolute;
  left:calc(var(--lbl) + var(--time) + var(--gap) * 2);
  right:calc(var(--val) + var(--gap));
  top:0;bottom:24px;pointer-events:none;
}
.lv-dp-g{
  position:absolute;top:0;bottom:0;width:1px;
  background:var(--border,var(--border));transform:translateX(-.5px);
}

.lv-dp-row{
  display:grid;
  grid-template-columns:var(--lbl) var(--time) 1fr var(--val);
  gap:var(--gap);align-items:center;
  height:30px;
}
.lv-dp-lbl{font-size:13.5px;color:var(--ink-soft,var(--ink-faint));white-space:nowrap;}
.lv-dp-time{font-size:13.5px;white-space:nowrap;color:var(--ink-faint,var(--ink-faint));font-variant-numeric:tabular-nums;}
.lv-dp-track{position:relative;height:100%;}
.lv-dp-dot{
  position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--ink-soft,var(--ink-faint));
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px var(--surface,var(--surface));   /* 격자선 위를 지날 때 끊어 보이게 */
}
.lv-dp-dot.top{
  background:var(--accent,#FF3D1A);
  width:11px;height:11px;
}
.lv-dp-val{
  font-size:13.5px;font-weight:700;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;
}

/* 축 — 경계가 무엇을 뜻하는지 */
.lv-dp-axis{
  position:relative;height:24px;
  margin-left:calc(var(--lbl) + var(--time) + var(--gap) * 2);
  margin-right:calc(var(--val) + var(--gap));
  border-top:1px solid var(--border,var(--border));
}
.lv-dp-t{
  position:absolute;top:6px;transform:translateX(-50%);white-space:nowrap;
  font-size:12.5px;font-weight:700;color:var(--ink-faint,var(--ink-faint));
  font-variant-numeric:tabular-nums;
}

@media (max-width:520px){
  .lv-dp{--lbl:42px;--time:52px;--val:46px;--gap:7px;}
  .lv-dp-lbl,.lv-dp-time{font-size:13.5px;}
}

/* ── 이 기록 하나가 말해 주는 폭 ───────────────────────────
   점 그래프와 같은 30~80% 자를 씁니다. 등급 경계 위에 띠를 얹어
   내 등급이 구간 한가운데인지 가장자리인지가 바로 보이게 했습니다.
   ─────────────────────────────────────────────────────────── */
.lv-band{
  border:1px solid var(--border,var(--border));border-radius:10px;
  margin:14px 0 0;background:var(--surface,var(--surface));
}
.lv-band>summary{
  list-style:none;cursor:pointer;padding:13px 15px;
  font-size:14.5px;color:var(--ink-soft,var(--ink-faint));
}
.lv-band>summary::-webkit-details-marker{display:none;}
.lv-band>summary::after{content:"＋";float:right;color:var(--ink-faint,var(--ink-faint));}
.lv-band[open]>summary::after{content:"－";}
.lv-band>summary:hover{color:var(--ink);}
.lv-band-in{padding:0 15px 16px;text-align:left;}
.lv-band-lead{font-size:13.5px;line-height:1.85;color:var(--ink-soft);margin:0 0 18px;text-align:left;}
.lv-band-lead b{color:var(--ink);}

.lv-band-plot{position:relative;height:34px;}
.lv-band-grid{position:absolute;inset:0;pointer-events:none;}
.lv-band-g{position:absolute;top:0;bottom:0;width:1px;background:var(--border,var(--border));transform:translateX(-.5px);}
.lv-band-g.cross{background:var(--accent,#FF3D1A);width:1px;opacity:.9;}
/* 폭 자체가 메시지입니다. 띠를 또렷하게 그리고, 지금 기록은 띠 안의
   가는 선으로 표시합니다. 점을 크게 찍었더니 띠를 덮어 버렸습니다. */
.lv-band-bar{
  position:absolute;top:50%;height:16px;transform:translateY(-50%);
  border-radius:3px;background:rgba(255,61,26,.30);
  border:1px solid rgba(255,61,26,.75);
  min-width:3px;box-sizing:border-box;
}
.lv-band-bar::before,.lv-band-bar::after{
  content:"";position:absolute;top:-4px;bottom:-4px;width:1px;
  background:var(--accent,#FF3D1A);
}
.lv-band-bar::before{left:-1px;}
.lv-band-bar::after{right:-1px;}
.lv-band-dot{
  position:absolute;top:50%;width:2px;height:22px;
  background:var(--surface);transform:translate(-50%,-50%);border-radius:1px;
}
.lv-band-axis{position:relative;height:22px;border-top:1px solid var(--border,var(--border));margin-top:2px;}
.lv-band-t{
  position:absolute;top:5px;transform:translateX(-50%);white-space:nowrap;
  font-size:12.5px;font-weight:700;color:var(--ink-faint,var(--ink-faint));
  font-variant-numeric:tabular-nums;
}

.lv-band-rows{margin:14px 0 0;}
.lv-band-row{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--border,var(--border));
}
.lv-band-row span{font-size:13.5px;color:var(--ink-soft,var(--ink-faint));}
.lv-band-row b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;}
.lv-band-row em{font-size:13.5px;font-style:normal;color:var(--ink-faint,var(--ink-faint));min-width:104px;text-align:right;}

.lv-band-verdict{
  font-size:13.5px;line-height:1.85;margin:14px 0 0;
  padding:11px 13px;border-radius:8px;text-align:left;
}
.lv-band-verdict b{color:var(--ink);}
.lv-band-verdict.edge{background:rgba(255,61,26,.08);border:1px solid rgba(255,61,26,.3);color:var(--ink-soft);}
.lv-band-verdict.solid{background:var(--tint-1);border:1px solid var(--border,var(--border));color:var(--ink-soft);}
.lv-band-src{font-size:13.5px;line-height:1.75;color:var(--ink-faint,var(--ink-faint));margin:12px 0 0;text-align:left;}
.lv-band-src a{color:var(--ink-soft,var(--ink-faint));text-decoration:underline;text-underline-offset:2px;}

@media (max-width:520px){
  .lv-band-row{grid-template-columns:1fr auto;row-gap:3px;}
  .lv-band-row em{grid-column:2;text-align:right;}
}

/* ── 통계에 보태기 ─────────────────────────────────────────
   무엇을 보내고 무엇을 안 보내는지, 지워 줄 수 없다는 것까지
   체크 위에 적어 둔다. 읽지 않고 누르게 만들면 동의가 아니다.
   ─────────────────────────────────────────────────────────── */
.lv-give{
  margin:18px 0 0;padding:15px;text-align:left;
  border:1px solid var(--border,var(--border));border-radius:10px;
  background:var(--tint-1);
}
.lv-give-head{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 8px;}
.lv-give-body{font-size:13.5px;line-height:1.85;color:var(--ink-soft);margin:0 0 12px;}
.lv-give-what{
  font-size:13.5px;line-height:1.9;color:var(--ink-soft,var(--ink-faint));margin:0 0 14px;
  padding:11px 12px;border-radius:8px;background:var(--tint-1);
}
.lv-give-what b{color:var(--ink);}
.lv-give-ck{display:flex;gap:9px;align-items:flex-start;cursor:pointer;margin:0 0 12px;}
.lv-give-ck input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--accent,#FF3D1A);}
.lv-give-ck span{font-size:13.5px;line-height:1.7;color:var(--ink-soft);}
.lv-give-go{
  width:100%;padding:11px;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:700;
  color:var(--ink);background:var(--bg,var(--bg));
  border:1px solid var(--border,var(--border));
}
.lv-give-go:enabled:hover{border-color:var(--accent,#FF3D1A);color:var(--accent-ink);}
.lv-give-go:disabled{opacity:.45;cursor:default;}
.lv-give-msg{font-size:13.5px;line-height:1.75;color:var(--ink-faint,var(--ink-faint));margin:10px 0 0;}
.lv-give-thanks{font-size:13.5px;line-height:1.75;color:var(--ink-soft,var(--ink-faint));margin:0;}

/* ── 등급 사다리 ───────────────────────────────────────────
   구간 이름만 1~7로 늘어놓고 시간을 안 적어 놨었다.
   등급표를 보러 온 사람에게 등급표를 안 보여 준 셈이다.
   ─────────────────────────────────────────────────────────── */
.lv-ladder{border:1px solid var(--border,var(--border));border-radius:10px;overflow:hidden;}
.lv-ladder-row{
  display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;
  padding:11px 13px;border-bottom:1px solid var(--border,var(--border));
}
.lv-ladder-row:last-child{border-bottom:0;}
.lv-ladder-step{
  font-size:13.5px;color:var(--ink-faint,var(--ink-faint));text-align:center;
  font-variant-numeric:tabular-nums;
}
.lv-ladder-label{font-size:14.5px;color:var(--ink-soft);}
.lv-ladder-cut{
  font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.lv-ladder-row.current{background:rgba(255,61,26,.10);}
.lv-ladder-row.current .lv-ladder-label{color:var(--accent-ink);font-weight:700;}
.lv-ladder-row.current .lv-ladder-step{color:var(--accent-ink);}
.lv-ladder-note{font-size:13.5px;color:var(--ink-faint,var(--ink-faint));margin:9px 0 0;}

/* ── 폼 옆 미리보기 ────────────────────────────────────────
   넓은 화면에서 폼 오른쪽이 텅 비어 있었다. 검색해서 들어온 사람이
   아무것도 안 눌러도 표가 보이게, 그 자리에 사다리를 둔다.
   ─────────────────────────────────────────────────────────── */
.lv-twocol{display:block;}
.lv-preview{
  margin:18px auto 0;max-width:420px;text-align:left;
  padding:15px;border:1px solid var(--border,var(--border));border-radius:12px;
  background:var(--surface,var(--surface));
}
.lv-pv-title{font-size:13.5px;color:var(--ink-soft,var(--ink-faint));margin:0 0 11px;}
.lv-pv-note{font-size:13.5px;line-height:1.7;color:var(--ink-faint,var(--ink-faint));margin:9px 0 0;}

@media (min-width:860px){
  .lv-twocol{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:20px;align-items:start;max-width:900px;margin:0 auto;
  }
  .lv-twocol .level-form-card{margin:0;max-width:none;}
  .lv-preview{margin:0;max-width:none;}
}

/* 등급 바로 아래 한 줄 — 다른 계산기에 없는 말.
   접어 두면 아무도 못 본다. */
.lv-verdict{
  font-size:14.5px;line-height:1.75;margin:12px 0 0;
  padding:11px 14px;border-radius:9px;text-align:left;
}
.lv-verdict b{color:var(--ink);font-weight:700;}
.lv-verdict.edge{
  background:rgba(255,61,26,.09);border:1px solid rgba(255,61,26,.32);color:var(--ink-soft);
}
.lv-verdict.solid{
  background:var(--tint-1);border:1px solid var(--border,var(--border));color:var(--ink-soft);
}

/* 결과로 옮겨 갈 때 고정 헤더가 등급 뱃지를 가리고 있었다.
   헤더는 데스크톱 69px, 모바일은 메뉴가 두 줄로 접혀 113px 이다. */
#levelResult{scroll-margin-top:85px;}
@media (max-width:760px){ #levelResult{scroll-margin-top:128px;} }

/* ── 머리 사진 ─────────────────────────────────────────────
   검색 결과 썸네일은 og:image 만으로 안 잡힐 때가 있다. 네이버는
   본문 이미지도 보고 고르기 때문에 실제로 한 장 박아 둔다.
   다만 오늘 첫 화면 높이를 줄여 놓은 참이라 넓고 낮게 자른다.
   파일은 1200x630 그대로 쓰고 보이는 높이만 줄인다 (요청은 한 번).
   ─────────────────────────────────────────────────────────── */
.lv-photo{
  margin:14px auto 0;max-width:760px;
  border-radius:12px;overflow:hidden;
  border:1px solid var(--border,var(--border));
  line-height:0;
}
.lv-photo img{
  width:100%;height:170px;object-fit:cover;object-position:50% 22%;
  display:block;
}
@media (min-width:720px){ .lv-photo img{height:230px;} }

/* 등급 바로 아래의 짧은 부탁. 결과를 막 받은 자리라 조용해야 한다 —
   배너처럼 보이면 광고로 읽혀서 오히려 안 누른다. */
.lv-gm{
  margin:14px 0 4px;padding:13px 15px;
  background:var(--tint-1);
  border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:8px;text-align:left;
}
.lv-gm-ask{font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 8px;line-height:1.6;}
.lv-gm-ck{display:flex;gap:9px;align-items:flex-start;cursor:pointer;margin:0 0 10px;}
.lv-gm-ck input{margin:2px 0 0;width:16px;height:16px;flex:none;accent-color:var(--accent);}
.lv-gm-ck span{font-size:13.5px;line-height:1.7;color:var(--ink-soft);}
.lv-gm-ck b{color:var(--ink);font-weight:700;}
.lv-gm-more{color:var(--accent-ink);text-decoration:underline;white-space:nowrap;}
.lv-gm-go{
  padding:8px 16px;border-radius:999px;
  background:transparent;border:1px solid var(--border);
  color:var(--ink-soft);font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
}
.lv-gm-go:enabled{border-color:var(--accent);color:var(--accent-ink);}
.lv-gm-go:enabled:hover{background:var(--accent-fill);color:var(--on-accent);}
.lv-gm-go:disabled{opacity:.55;cursor:default;}
.lv-gm-msg{font-size:13.5px;line-height:1.65;color:var(--ink-soft);margin:9px 0 0;}
.lv-gm-done{
  margin:14px 0 4px;padding:11px 15px;font-size:13.5px;color:var(--ink-soft);
  background:var(--tint-1);border:1px solid var(--border);border-radius:8px;text-align:left;
}

/* 등급 바로 아래의 공유 자리. 결과를 막 본 그 순간이 제일 공유하고 싶을 때다. */
.lv-share-now{margin:16px 0 4px;}
.lv-share-now .lv-share-btn{margin:0;}
.lv-share-now .lv-share-hint{margin:8px 0 0;}

/* 등급 아래에서 오늘 날씨로 보내는 한 줄. 기온이 기록에 끼치는 영향은
   El Helou 외(2012, PLoS ONE 7(5):e37407)에서 가져온 수치다. */
.lv-wx-link{
  margin:14px 0 0;padding:11px 13px;border-radius:8px;
  background:var(--tint-1);border:1px solid var(--border);
  font-size:13.5px;line-height:1.75;color:var(--ink-soft);text-align:left;
}
.lv-wx-link b{color:var(--ink);}
.lv-wx-link a{color:var(--accent-ink);font-weight:700;white-space:nowrap;}

/* 아래 링크 묶음은 문장 안이 아니라 홀로 서 있어서 WCAG 2.2 AA(SC 2.5.8)의
   24×24px 가 그대로 적용된다. 높이가 16px 이었어서 눌리는 영역만 넓힌다. */
.lv-links a{display:inline-block;padding-block:4px;min-height:24px;}

/* 거리별 강점 판정의 근거. 주장에는 출처를 붙인다는 원칙을 여기에도 건다.
   읽는 글이라 12px 바닥을 지킨다. */
.lv-dna-src{margin:12px 0 0;font-size:13.5px;line-height:1.8;
  color:var(--ink-soft,var(--ink-faint));text-align:left;
  padding-top:11px;border-top:1px solid var(--border);}
.lv-dna-src b{color:var(--ink);}
.lv-dna-cite{display:block;margin-top:7px;font-size:13.5px;line-height:1.7;
  color:var(--ink-faint);}

/* 모은 정도를 보여 주는 줄. 부탁만 하고 끝나지 않게. */
.lv-prog{font-size:13.5px;line-height:1.65;color:var(--ink-soft);
  margin:0 0 10px;min-height:1px;}
.lv-prog:empty{display:none;}
.lv-prog.lv-prog-open{color:var(--ink);font-weight:700;}

/* ── 조건 보정 ────────────────────────────────────────────────
   대회 당일 실측 기온으로 기록을 15℃ 기준으로 환산해 보여 준다.
   근거와 한계를 같은 카드 안에 두는 게 요점이다. 아래로 떼어 놓으면
   읽지 않고, 그러면 추정값을 측정값처럼 받아들인다.
   색은 토큰만 쓴다(다크모드가 style.css 의 :root 재정의로 따라온다).
   합성 후 명도대비 — 라이트 4.80~15.66:1 / 다크 5.29~18.73:1, 전부 AA. */
.lv-adj{
  margin:18px 0 20px;padding:16px 18px 14px;border-radius:10px;
  background:var(--tint-1);border:1px solid var(--border);
  /* 결과 영역이 가운데 정렬이라 그대로 두면 근거 문단이 가운데로 흩어진다.
     여러 줄짜리 설명은 왼쪽으로 붙여야 읽힌다. */
  text-align:left;
}
.lv-adj-head{margin:0 0 8px;font-size:15px;font-weight:800;color:var(--ink);line-height:1.5;}
.lv-adj-body{margin:0;font-size:15px;line-height:1.8;color:var(--ink-soft);}
.lv-adj-body strong{font-size:16px;font-weight:900;color:var(--accent-ink);}
.lv-adj-tier{margin:8px 0 0;font-size:15px;line-height:1.7;color:var(--ink-soft);}
.lv-adj-tier strong{color:var(--ink);font-weight:900;}
.lv-adj-note{margin:10px 0 0;font-size:13.5px;line-height:1.7;color:var(--ink-faint);}
.lv-adj-src{
  margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.75;color:var(--ink-faint);
}
.lv-adj-none{background:transparent;}
@media (max-width:520px){
  .lv-adj{padding:14px 14px 12px;}
  .lv-adj-head{font-size:15.5px;}
  .lv-adj-body{font-size:15px;}
  .lv-adj-body strong{font-size:15.5px;}
  .lv-adj-tier{font-size:15px;}
}
/* <strong> 은 환산 기록 한 곳에만 쓴다. 문장 안의 작은 강조는 <b>. */
.lv-adj-body b{font-weight:900;color:var(--ink);}

/* ── 장비로는 얼마나 줄일 수 있나 ──────────────────────────────
 * 등급을 보고 나면 바로 "그래서 어떻게 올리지"가 나온다. 그 자리에
 * 답을 두되, 파는 말투가 되지 않게 한다. 근거 등급을 숫자에서 떼지
 * 않고, 느린 분에게는 "장비로는 안 바뀝니다"가 그대로 보이게 한다.
 * 색은 전부 토큰이다 — 하드코딩 hex 는 sync_theme 가 바꿔 버린다. */
.lv-gear {
  margin: 22px 0 0; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.lv-gear-h {
  font-size: 14.5px; font-weight: 700; color: var(--ink-faint);
  margin: 0 0 8px; letter-spacing: .01em;
}
.lv-gear-head {
  font-size: 16px; line-height: 1.65; color: var(--ink-soft);
  margin: 0 0 12px; text-wrap: balance;
}
.lv-gear-head b { color: var(--ink); }
.lv-gear-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 11px 13px; border-radius: 8px; background: var(--tint-1);
}
.lv-gear-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.lv-gear-grade {
  font-size: 12.5px; font-weight: 900; padding: 2px 7px; border-radius: 999px;
  color: var(--on-accent); background: var(--ink-faint);
}
.lv-g-A { background: var(--trail); }
.lv-g-B { background: var(--forecast); }
.lv-g-C { background: var(--warn-ink); color: var(--bg); }
.lv-g-D { background: var(--ink-faint); }
.lv-gear-cut { font-size: 15px; color: var(--ink-soft); margin-left: auto; }
.lv-gear-why {
  font-size: 15px; line-height: 1.8; color: var(--ink-soft); margin: 11px 0 0;
}
.lv-gear-why b { color: var(--ink); }
.lv-gear-note {
  font-size: 13.5px; line-height: 1.75; color: var(--ink-faint); margin: 9px 0 0;
}
.lv-gear-links { font-size: 14.5px; line-height: 1.9; margin: 12px 0 0; }
.lv-gear-links a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px dashed var(--ink-faint);
}
.lv-gear-links a:hover { color: var(--accent-ink); border-color: var(--accent); }

@media (max-width: 680px) {
  .lv-gear { padding: 14px 15px; }
  .lv-gear-head { font-size: 15px; }
  .lv-gear-cut { margin-left: 0; width: 100%; }
}

.lv-why{font-size:13.5px;line-height:1.75;color:var(--ink-soft);margin:10px 0 0;}
.lv-why a{color:var(--accent-ink);}