/* ============================================================
   Dashboard primitives — shared by KV + Strengths dashboards.
   Section-specific styles extend with their own modifier class
   (.kv-dash, .s-dash, …).
   ============================================================ */
.dash {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 40px 70px -25px rgba(13, 30, 60, 0.22), 0 12px 24px -8px rgba(13, 30, 60, 0.08);
  overflow: hidden;
}

/* Chrome (mac-style header) */
.dash__chrome {
  background: #f4f6f9;
  padding: 12px 16px;
  border-bottom: 1px solid #e6eaf0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d0d6df;
}
.dash__dot:nth-of-type(1) { background: #ff6058; }
.dash__dot:nth-of-type(2) { background: #ffbd2e; }
.dash__dot:nth-of-type(3) { background: #29c93d; }

/* Step badge */
.kv-dash__step {
  margin-left: 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 10px;
  background: linear-gradient(135deg, rgba(46, 146, 214, 0.14), rgba(46, 146, 214, 0.06));
  border: 1px solid rgba(46, 146, 214, 0.3);
  border-radius: 9999px;
  font-family: "Nunito", "Noto Sans JP", sans-serif;
}
.kv-dash__step-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--brand-blue);
  text-transform: uppercase;
}
.kv-dash__step-num {
  font-size: 13px;
  font-weight: 900;
  color: var(--brand-blue);
  line-height: 1;
  min-width: 8px;
  display: inline-block;
  transition: color 0.3s ease;
}
.kv-dash__step-sep,
.kv-dash__step-total {
  font-size: 11px;
  font-weight: 700;
  color: #8392a4;
}

.dash__title {
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  color: #8392a4;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.dash__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Nunito", "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #29c93d;
}
.dash__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #29c93d;
  box-shadow: 0 0 0 0 rgba(41, 201, 61, 0.55);
  animation: dashLivePulse 1.8s ease-out infinite;
}
@keyframes dashLivePulse {
  0%   { box-shadow: 0 0 0 0   rgba(41, 201, 61, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(41, 201, 61, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(41, 201, 61, 0);    }
}

/* Stage: chapter + 3 scenes overlap in same space */
.kv-dash__stage {
  position: relative;
  padding: 18px 20px 20px;
  min-height: 360px;
}

.kv-scene,
.kv-chapter {
  position: absolute;
  inset: 18px 20px 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.kv-chapter {
  inset: 0;
  z-index: 5;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f4f9fc 0%, #ffffff 100%);
}

/* Common scene question (input) area */
.kv-scene-q {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 10px;
  margin-bottom: 8px;
  border-bottom: 1.5px dashed #e6ebf2;
  flex-wrap: wrap;
}

.kv-scene-q__label {
  font-size: 10px;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.kv-scene-q__label::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-orange);
}

.kv-scene-q__value {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.kv-scene-q__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(46, 146, 214, 0.08);
  border: 1px solid rgba(46, 146, 214, 0.2);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-blue);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.85);
  animation: kvSceneQChipIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes kvSceneQChipIn {
  to { opacity: 1; transform: scale(1); }
}

/* Hide question area during loading transition */
.kv-scene.is-loading .kv-scene-q__value {
  /* keep chips visible during loading */
}

/* Common scene loading indicator */
.kv-scene__loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 3;
}

.kv-scene.is-loading .kv-scene__loading {
  display: flex;
}

.kv-scene__loading span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-blue);
  animation: kvSceneLoadingDot 1.4s infinite ease-in-out both;
}

.kv-scene__loading span:nth-child(1) { animation-delay: -0.32s; }
.kv-scene__loading span:nth-child(2) { animation-delay: -0.16s; }
.kv-scene__loading span:nth-child(3) { animation-delay: 0; }

@keyframes kvSceneLoadingDot {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Hide main content until revealed */
.kv-scene--gantt:not(.is-revealed) .kv-gantt,
.kv-scene--eval:not(.is-revealed) .kv-eval {
  visibility: hidden;
}

/* Chapter 1: Blue background */
.kv-chapter[data-chapter="1"] {
  background: linear-gradient(135deg, var(--brand-blue) 0%, #1e78c8 100%);
}

.kv-chapter[data-chapter="1"] .kv-chapter__num,
.kv-chapter[data-chapter="1"] .kv-chapter__title,
.kv-chapter[data-chapter="1"] .kv-chapter__sub {
  color: #ffffff;
}

/* Chapter 2: Purple (mid-color between blue and orange) */
.kv-chapter[data-chapter="2"] {
  background: linear-gradient(135deg, #9b59b6 0%, #7d3a80 100%);
}

.kv-chapter[data-chapter="2"] .kv-chapter__num,
.kv-chapter[data-chapter="2"] .kv-chapter__title,
.kv-chapter[data-chapter="2"] .kv-chapter__sub {
  color: #ffffff;
}

/* Chapter 3: Orange background */
.kv-chapter[data-chapter="3"] {
  background: linear-gradient(135deg, var(--brand-orange) 0%, #d35a0f 100%);
}

.kv-chapter[data-chapter="3"] .kv-chapter__num,
.kv-chapter[data-chapter="3"] .kv-chapter__title,
.kv-chapter[data-chapter="3"] .kv-chapter__sub {
  color: #ffffff;
}

.kv-scene.is-active,
.kv-chapter.is-active {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   Chapter splash
   ============================================================ */

.kv-chapter__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 24px;
  text-align: center;
}

.kv-chapter__num,
.kv-chapter__title,
.kv-chapter__sub {
  opacity: 0;
  transform: translateY(10px);
}

.kv-chapter.is-active .kv-chapter__num   { animation: kvChapIn 0.5s  cubic-bezier(0.22, 1, 0.36, 1) 0.10s forwards; }
.kv-chapter.is-active .kv-chapter__title { animation: kvChapIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.20s forwards; }
.kv-chapter.is-active .kv-chapter__sub   { animation: kvChapIn 0.5s  cubic-bezier(0.22, 1, 0.36, 1) 0.32s forwards; }

@keyframes kvChapIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Background number layer */
.kv-chapter__bg-num {
  position: absolute;
  bottom: -80px;
  right: -40px;
  font-family: "Nunito", "Noto Sans JP", sans-serif;
  font-size: 320px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.15);
  letter-spacing: -0.05em;
  z-index: 1;
  line-height: 0.85;
  pointer-events: none;
  user-select: none;
}

.kv-chapter__num {
  display: none;
}
.kv-chapter__title {
  font-family: "Nunito", "Noto Sans JP", sans-serif;
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.kv-chapter__sub {
  font-size: 12px;
  font-weight: 700;
  color: #5b6776;
  margin-top: 4px;
}

.kv-chapter__bar {
  width: 120px;
  height: 3px;
  margin-top: 14px;
  background: rgba(46, 146, 214, 0.1);
  border-radius: 9999px;
  overflow: hidden;
}
.kv-chapter__bar span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-orange));
  border-radius: 9999px;
}
.kv-chapter.is-active .kv-chapter__bar span {
  animation: kvChapBar 1.4s cubic-bezier(0.4, 0, 0.6, 1) 0.4s forwards;
}
@keyframes kvChapBar {
  to { width: 100%; }
}

/* ============================================================
   Scene 1: Goal (job ↁEskills)
   ============================================================ */
.kv-scene--goal {
  display: flex;
  flex-direction: column;
}

.kv-goal {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kv-goal__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kv-goal__label {
  font-size: 10px;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kv-goal__label::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-orange);
}

.kv-goal__input {
  width: 100%;
  border: 2px solid #e6ebf2;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  background: linear-gradient(180deg, #ffffff, #fafbfd);
  letter-spacing: 0.03em;
  box-shadow: inset 0 1px 2px rgba(13, 30, 60, 0.04);
  pointer-events: none;
}
.kv-goal__input::placeholder {
  color: #b3bcc7;
  font-weight: 500;
}

.kv-goal__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
  align-items: flex-start;
}

/* Skill badges: appear via CSS once they're appended (parent has .is-active) */
.kv-goal__skill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 12px;
  background: rgba(46, 146, 214, 0.08);
  border: 1px solid rgba(46, 146, 214, 0.2);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: 0.04em;
  opacity: 0;
  transform: scale(0.85) translateY(-4px);
  animation: kvGoalBadgeIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.kv-goal__skill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
}

@keyframes kvGoalBadgeIn {
  to { opacity: 1; transform: scale(1) translateY(0); }
}


/* ============================================================
   Scene 2: Gantt
   ============================================================ */
.kv-scene--gantt {
  display: flex;
  flex-direction: column;
}

.kv-gantt {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kv-gantt__head {
  display: flex;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px dashed #e6ebf2;
}

.kv-gantt__head-skill {
  width: 96px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kv-gantt__head-skill::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-orange);
}

.kv-gantt__weeks {
  display: flex;
  flex: 1;
}
.kv-gantt__weeks span {
  flex: 1;
  font-size: 10px;
  font-weight: 800;
  color: #8392a4;
  text-align: center;
  padding: 4px 0;
  letter-spacing: 0.08em;
  position: relative;
}
.kv-gantt__weeks span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 8px;
  background: #d0d8e3;
}

.kv-gantt__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Vertical week grid */
.kv-gantt__body::before {
  content: "";
  position: absolute;
  left: 108px;
  top: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(to right, transparent calc(25% - 1px), #eef2f7 calc(25% - 1px), #eef2f7 25%, transparent 25%),
    linear-gradient(to right, transparent calc(50% - 1px), #eef2f7 calc(50% - 1px), #eef2f7 50%, transparent 50%),
    linear-gradient(to right, transparent calc(75% - 1px), #eef2f7 calc(75% - 1px), #eef2f7 75%, transparent 75%);
  pointer-events: none;
}

.kv-gantt__row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 24px;
  position: relative;
  z-index: 1;
}

.kv-gantt__label {
  width: 96px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateX(-8px);
}
.kv-gantt__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
  flex-shrink: 0;
}
.kv-gantt__row:nth-child(1) .kv-gantt__label::before { background: #2e92d6; }
.kv-gantt__row:nth-child(2) .kv-gantt__label::before { background: #5b6dde; }
.kv-gantt__row:nth-child(3) .kv-gantt__label::before { background: #ed6f25; }
.kv-gantt__row:nth-child(4) .kv-gantt__label::before { background: #14b8a6; }
.kv-gantt__row:nth-child(5) .kv-gantt__label::before { background: #f59e0b; }

.kv-gantt__track {
  position: relative;
  flex: 1;
  height: 10px;
}

.kv-gantt__bar {
  position: absolute;
  top: 0;
  left: calc(var(--s, 0) * 100%);
  width: calc(var(--d, 0) * 100%);
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--brand-blue), #54b3ee);
  box-shadow: 0 3px 8px rgba(46, 146, 214, 0.25);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.kv-gantt__row:nth-child(1) .kv-gantt__bar { background: linear-gradient(90deg, #2e92d6, #54b3ee); box-shadow: 0 3px 8px rgba(46, 146, 214, 0.3); }
.kv-gantt__row:nth-child(2) .kv-gantt__bar { background: linear-gradient(90deg, #5b6dde, #8090f0); box-shadow: 0 3px 8px rgba(91, 109, 222, 0.3); }
.kv-gantt__row:nth-child(3) .kv-gantt__bar { background: linear-gradient(90deg, #ed6f25, #f59161); box-shadow: 0 3px 8px rgba(237, 111, 37, 0.3); }
.kv-gantt__row:nth-child(4) .kv-gantt__bar { background: linear-gradient(90deg, #14b8a6, #5bd3c2); box-shadow: 0 3px 8px rgba(20, 184, 166, 0.3); }
.kv-gantt__row:nth-child(5) .kv-gantt__bar { background: linear-gradient(90deg, #f59e0b, #fbbf45); box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3); }

/* Animations triggered by .is-active on scene */
.kv-scene--gantt.is-revealed .kv-gantt__row .kv-gantt__label {
  animation: kvGanttLabelIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.kv-scene--gantt.is-revealed .kv-gantt__row:nth-child(1) .kv-gantt__label { animation-delay: 0.10s; }
.kv-scene--gantt.is-revealed .kv-gantt__row:nth-child(2) .kv-gantt__label { animation-delay: 0.25s; }
.kv-scene--gantt.is-revealed .kv-gantt__row:nth-child(3) .kv-gantt__label { animation-delay: 0.40s; }
.kv-scene--gantt.is-revealed .kv-gantt__row:nth-child(4) .kv-gantt__label { animation-delay: 0.55s; }
.kv-scene--gantt.is-revealed .kv-gantt__row:nth-child(5) .kv-gantt__label { animation-delay: 0.70s; }

.kv-scene--gantt.is-revealed .kv-gantt__bar {
  animation: kvGanttBarDraw 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Sequential draw: each bar starts after the previous finishes */
.kv-scene--gantt.is-revealed .kv-gantt__row:nth-child(1) .kv-gantt__bar { animation-delay: 1.00s; }
.kv-scene--gantt.is-revealed .kv-gantt__row:nth-child(2) .kv-gantt__bar { animation-delay: 1.55s; }
.kv-scene--gantt.is-revealed .kv-gantt__row:nth-child(3) .kv-gantt__bar { animation-delay: 2.10s; }
.kv-scene--gantt.is-revealed .kv-gantt__row:nth-child(4) .kv-gantt__bar { animation-delay: 2.65s; }
.kv-scene--gantt.is-revealed .kv-gantt__row:nth-child(5) .kv-gantt__bar { animation-delay: 3.20s; }

@keyframes kvGanttLabelIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes kvGanttBarDraw {
  to { opacity: 1; transform: scaleX(1); }
}

/* ============================================================
   Scene 3: Evaluation (Skill check list)
   ============================================================ */
.kv-scene--eval {
  display: flex;
  flex-direction: column;
}

.kv-eval {
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.kv-scene--eval.is-active .kv-eval {
  animation: kvEvalIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes kvEvalIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Skill evaluation list */
.kv-eval__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.kv-eval__row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 2fr auto;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(6px);
  animation: kvEvalElIn 0.4s ease-out forwards;
}

.kv-eval__skill {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kv-eval__progress {
  position: relative;
  height: 8px;
  background: #eef2f7;
  border-radius: 9999px;
  overflow: hidden;
}

.kv-eval__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand-blue), #54b3ee);
  border-radius: 9999px;
  box-shadow: 0 0 8px rgba(46, 146, 214, 0.4);
  animation: kvEvalBarFill 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes kvEvalBarFill {
  to { width: var(--bar-width, 100%); }
}

.kv-eval__status {
  font-family: "Nunito", "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #29c93d;
  padding: 4px 10px;
  background: rgba(41, 201, 61, 0.12);
  border: 1px solid rgba(41, 201, 61, 0.3);
  border-radius: 9999px;
  opacity: 0;
  transform: scale(0.7);
  animation: kvEvalStatusIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  white-space: nowrap;
}

@keyframes kvEvalStatusIn {
  to { opacity: 1; transform: scale(1); }
}

@keyframes kvEvalElIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Overall score card */
.kv-eval__overall {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--brand-orange);
  border: 1px solid rgba(180, 75, 20, 0.4);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(8px);
  position: relative;
  overflow: hidden;
}
.kv-scene--eval.is-active .kv-eval__overall {
  animation: kvEvalElIn 0.5s ease-out 2.4s forwards;
}

.kv-eval__overall-rank {
  font-family: "Nunito", "Noto Sans JP", sans-serif;
  font-size: clamp(36px, 8vw, 46px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  text-shadow: 0 2px 6px rgba(120, 50, 10, 0.4);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.kv-eval__overall-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.kv-eval__overall-label {
  font-family: "Nunito", "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #fff;
  text-transform: uppercase;
}

.kv-eval__overall-score {
  font-family: "Nunito", "Noto Sans JP", sans-serif;
  font-size: clamp(14px, 2.5vw, 16px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.01em;
}

/* ============================================================
   Reduced-motion overrides
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .dash__live-dot,
  .kv-eval__check-dot {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   KV Dashboard responsive
   ============================================================ */
@media (max-width: 900px) {
  .kv-dash__stage { padding: 16px; min-height: 340px; }
  .kv-scene { inset: 16px; }
  .kv-chapter { inset: 0; }
}

@media (max-width: 600px) {
  .kv-dash__stage { min-height: 360px; }

  .kv-eval__list { gap: 8px; }
  .kv-eval__overall { padding: 10px 12px; gap: 10px; }
  .kv-eval__overall-rank { font-size: clamp(28px, 7vw, 38px); }

  .kv-goal__input {
    font-size: 14px;
    padding: 12px 14px;
  }
  .kv-goal__skill {
    font-size: 11px;
    padding: 6px 12px 6px 10px;
  }

  .kv-gantt__head-skill,
  .kv-gantt__label { width: 76px; }
  .kv-gantt__head-skill { font-size: 9px; letter-spacing: 0.1em; }
  .kv-gantt__label { font-size: 11px; gap: 6px; }
  .kv-gantt__weeks span { font-size: 9px; letter-spacing: 0.04em; }
  .kv-gantt__body::before { left: 88px; }

  .kv-eval__body {
    grid-template-columns: 1fr;
    gap: 12px;
    justify-items: center;
  }
  .kv-eval__gauge { width: 100px; height: 100px; }
  .kv-eval__gauge-num { font-size: 26px; }
  .kv-eval__summary { width: 100%; gap: 10px; }
  .kv-eval__rank { justify-content: center; }
  .kv-eval__rank-letter { font-size: 36px; }
  .kv-eval__minis { gap: 6px; }
  .kv-eval__mini { padding: 6px 8px; }
  .kv-eval__mini-val { font-size: 16px; }
  .kv-eval__mini-label { font-size: 9px; }
}

@media (max-width: 480px) {
  .kv-chapter__title { font-size: clamp(22px, 7vw, 32px); }
  .kv-chapter__sub { font-size: 11px; }
  .dash__title { display: none; }
}