/* data page: visitor section (scoped to .page-data) */

/* .data-wrapper が align-items:center のため幅を明示 */
.page-data .result-section.visitor { width: 100%; box-sizing: border-box; }
.page-data .result-section.visitor .result-content { width: 100%; }

/* セクションの殻（背景・余白・タイトル）は data/style.css が持つ */

/* Figma 座標をそのまま写す。--x --y --w --h は design px、--c は中心 x、--fs 文字サイズ、--ls 字間 */
.page-data .visitor .abs {
  position: absolute;
  left: calc(var(--x, 0) * var(--px));
  top: calc(var(--y, 0) * var(--px));
  width: calc(var(--w, auto) * var(--px));
  height: calc(var(--h, auto) * var(--px));
  margin: 0;
}

.page-data .visitor .abs:not([style*="--w"]) { width: auto; }
.page-data .visitor .abs:not([style*="--h"]) { height: auto; }

.page-data .visitor .abs[style*="--c"] {
  left: calc(var(--c) * var(--px));
  transform: translateX(-50%);
  white-space: nowrap;
}

:where(.page-data .visitor) p.abs {
  font-size: calc(var(--fs, 13) * var(--px));
  letter-spacing: calc(var(--ls, 0) * var(--px));
  white-space: nowrap;
}

/* 行ごとに順番表示するための入れ物（中の .abs の座標は親カード基準のまま） */
.page-data .visitor .vs-row {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ===== visitor1 ===== */
.page-data .visitor .vs-rank {
  font-family: var(--data-mincho);
  font-weight: 800;
  line-height: 1.6;
  color: var(--data-text);
}

.page-data .visitor .vs-rank--1 { color: var(--data-coral); }

.page-data .visitor .vs-voice {
  background: #caf2ec;
  border-radius: calc(10 * var(--px));
}

.page-data .visitor p.vs-voice-text {
  font-family: var(--data-sans);
  font-weight: 500;
  line-height: 1.2;
  color: var(--data-text);
}

/* 注釈（Figma: Noto Sans JP Regular。親の 300 を打ち消す） */
.page-data .visitor .data-card__note { font-weight: 400; }

/* ===== visitor2 ===== */
.page-data .visitor .vs-bubble-text {
  font-family: var(--data-mincho);
  font-weight: 700;
  line-height: 1;
  color: var(--data-text);
}

.page-data .visitor .vs-bubble-text b {
  font-weight: 700;
  color: var(--data-blue);
}

.page-data .visitor .vs-bubble-text .vs-big {
  font-style: normal;
  font-size: calc(27.259 * var(--px));
}

.page-data .visitor .vs-donut { overflow: visible; }

.page-data .visitor .vs-gender {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--data-mincho);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.page-data .visitor .vs-gender--m { color: var(--data-blue); }
.page-data .visitor .vs-gender--f { color: var(--data-red); }

.page-data .visitor .vs-gender__label,
.page-data .visitor .vs-gender__num { display: block; line-height: 1; }

/* ===== visitor3 ===== */
.page-data .visitor .vs-lead {
  font-family: var(--data-mincho);
  font-weight: 800;
  line-height: 1;
  color: var(--data-text);
  text-align: center;
}

.page-data .visitor .vs-lead__em { color: var(--data-coral); }

.page-data .visitor .vs-grid__line {
  display: block;
  height: 0;
  border-top: 1px solid #dcdcdc;
}

.page-data .visitor .vs-grid__label {
  font-family: var(--data-sans);
  font-size: calc(10 * var(--px));
  line-height: calc(12 * var(--px));
  text-align: right;
  color: var(--data-text);
}

.page-data .visitor .vs-bar {
  background: var(--bg);
  border-radius: calc(6 * var(--px)) calc(6 * var(--px)) 0 0;
}

.page-data .visitor .vs-pct,
.page-data .visitor .vs-share {
  font-family: var(--data-sans);
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(0.6815 * var(--px));
  font-size: calc(17.037 * var(--px));
}

.page-data .visitor .vs-pct__u { font-size: calc(11.926 * var(--px)); }

.page-data .visitor .vs-age {
  font-family: var(--data-sans);
  font-weight: 500;
  line-height: 1;
  letter-spacing: calc(0.6815 * var(--px));
  font-size: calc(13.63 * var(--px));
  color: var(--data-text);
}

/* ===== visitor4 ===== */
.page-data .visitor .vs-lead--4 {
  display: block;
  line-height: calc(24.704 / 18.741);
}

.page-data .visitor .vs-lead--4 .vs-lead__big { font-size: calc(27.259 * var(--px)); letter-spacing: calc(0.937 * var(--px)); }
.page-data .visitor .vs-lead--4 .vs-lead__pct { font-size: calc(18.741 * var(--px)); letter-spacing: calc(2.8111 * var(--px)); }
.page-data .visitor .vs-lead--4 .vs-lead__s { font-size: calc(18.741 * var(--px)); font-weight: 700; letter-spacing: calc(0.937 * var(--px)); color: var(--data-text); }
.page-data .visitor .vs-lead--4 .vs-lead__m { font-size: calc(20.444 * var(--px)); font-weight: 700; letter-spacing: calc(0.937 * var(--px)); color: var(--data-text); }

.page-data .visitor .vs-dot { display: block; border-radius: 50%; }

.page-data .visitor .vs-pref {
  font-family: var(--data-sans);
  font-weight: 500;
  line-height: 1.6;
  font-size: calc(17.037 * var(--px));
  letter-spacing: calc(0.8519 * var(--px));
  color: var(--data-text);
}

.page-data .visitor .vs-pref--lg { font-size: calc(18.741 * var(--px)); letter-spacing: calc(0.937 * var(--px)); }

.page-data .visitor .vs-share {
  line-height: 1.6;
  font-size: calc(23.852 * var(--px));
  letter-spacing: calc(0.8519 * var(--px));
}

.page-data .visitor .vs-share__u { font-size: calc(13.63 * var(--px)); }


/* ===== SP: PC と位置・大きさが違う要素だけ --s* で上書き（値は PC カード座標系。Figma SP 値 ÷ 0.7846）
   2610 版の Figma は悩みランキング・性別割合とも SP が PC の縮小なので、上書きは残りのカードだけ ===== */

@media (max-width: 767px) {
  .page-data .visitor .abs[style*="--sx"] { left: calc(var(--sx) * var(--px)); }
  .page-data .visitor .abs[style*="--sy"] { top: calc(var(--sy) * var(--px)); }
  .page-data .visitor .abs[style*="--sw"] { width: calc(var(--sw) * var(--px)); }
  .page-data .visitor .abs[style*="--sh"] { height: calc(var(--sh) * var(--px)); }
  .page-data .visitor .abs[style*="--sc"] { left: calc(var(--sc) * var(--px)); }
  .page-data .visitor p.abs[style*="--sfs"] { font-size: calc(var(--sfs) * var(--px)); }
  .page-data .visitor p.abs[style*="--sls"] { letter-spacing: calc(var(--sls) * var(--px)); }

}