/* ============================================================
   usuge-checker.css
   UsugeAI チェッカー — 新UI スタイルシート
   usuge-ai-checker.html の <style> ブロックをそのまま抜き出し
   ============================================================ */

/* ===================================================
   RESET & BASE
=================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background: #F3F6FB;
  color: #111827;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ===================================================
   CSS VARIABLES
=================================================== */
:root {
  --ug-blue:        #3B5FDB;
  --ug-blue-dark:   #2C4DC7;
  --ug-blue-light:  #EEF2FD;
  --ug-blue-mid:    #C7D5F8;
  --ug-green:       #16A34A;
  --ug-amber:       #D97706;
  --ug-red:         #DC2626;
  --ug-text:        #111827;
  --ug-text-2:      #374151;
  --ug-text-muted:  #6B7280;
  --ug-border:      #E5E7EB;
  --ug-white:       #FFFFFF;
  --ug-bg:          #F3F6FB;
  --ug-card:        rgba(255,255,255,0.95);
  --ug-r-sm:        10px;
  --ug-r-md:        16px;
  --ug-r-lg:        24px;
  --ug-r-xl:        32px;
  --ug-shadow-sm:   0 1px 4px rgba(59,95,219,.07);
  --ug-shadow-md:   0 4px 20px rgba(59,95,219,.10);
  --ug-shadow-lg:   0 10px 40px rgba(59,95,219,.14);
  --ug-shadow-xl:   0 20px 60px rgba(59,95,219,.17);
}

/* ===================================================
   LAYOUT
=================================================== */
.ug-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* ヘッダー・フッターはWordPressテンプレート側で出力するため削除 */

/* ===================================================
   HERO
=================================================== */
.ug-hero {
  text-align: center;
  padding: 40px 16px 28px;
}
.ug-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ug-white);
  border: 1px solid var(--ug-border);
  box-shadow: var(--ug-shadow-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--ug-blue);
  margin-bottom: 16px;
}
.ug-hero__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ug-blue);
}
.ug-hero__title {
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 900;
  line-height: 1.25;
  color: var(--ug-text);
  margin-bottom: 14px;
  letter-spacing: -0.025em;
}
.ug-hero__title em {
  font-style: normal;
  color: var(--ug-blue);
  background: linear-gradient(135deg, var(--ug-blue), #1B4F8A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ug-hero__desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ug-text-muted);
  max-width: 580px;
  margin: 0 auto 20px;
}
.ug-hero__badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ug-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--ug-white);
  border: 1px solid var(--ug-border);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ug-text-2);
  box-shadow: var(--ug-shadow-sm);
}
.ug-badge--blue { background: var(--ug-blue-light); border-color: var(--ug-blue-mid); color: var(--ug-blue); }

/* ===================================================
   GRID
=================================================== */
.ug-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  margin-top: 20px;
  align-items: start;
}
@media (max-width: 760px) {
  .ug-grid { grid-template-columns: 1fr; }
}

/* ===================================================
   CARD BASE
=================================================== */
.ug-card {
  background: var(--ug-card);
  border: 1px solid var(--ug-border);
  border-radius: var(--ug-r-xl);
  overflow: visible;   /* hidden→visible: スマホ縦並び時にテキストが切れないよう修正 */
  box-shadow: var(--ug-shadow-md);
}
.ug-card-head {
  padding: 18px 18px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--ug-border);
}
.ug-card-head__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ug-blue);
  background: var(--ug-blue-light);
  border: 1px solid var(--ug-blue-mid);
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 5px;
}
.ug-card-head__title { font-size: 15px; font-weight: 800; color: var(--ug-text); line-height: 1.4; }
.ug-card-head__sub { font-size: 12px; color: var(--ug-text-muted); margin-top: 3px; line-height: 1.5; }

/* ===================================================
   MODE SEGMENTED CONTROL
=================================================== */
.ug-seg {
  display: inline-flex;
  background: var(--ug-bg);
  border: 1px solid var(--ug-border);
  border-radius: 999px;
  padding: 3px;
  gap: 3px;
  flex-shrink: 0;
}
.ug-seg-btn {
  padding: 7px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: var(--ug-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.ug-seg-btn.is-active {
  background: var(--ug-blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(59,95,219,.28);
}

/* ===================================================
   CAMERA
=================================================== */
.ug-cam { padding: 14px; }
.ug-video-wrap {
  position: relative;
  border-radius: var(--ug-r-lg);
  overflow: hidden;
  background: #0F172A;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  /* スマホ：縦長で顔全体が映りやすい */
  aspect-ratio: 3/4;
  min-height: 280px;
  max-height: 420px;
  width: 100%;
}
/* PC：横長グリッド内ではアスペクト比を固定せず高さで制御 */
@media (min-width: 761px) {
  .ug-video-wrap {
    aspect-ratio: unset;
    height: 340px;
    max-height: 340px;
  }
}
#ug-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ug-mirror { transform: scaleX(-1); }

/* Flash */
.ug-flash {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.9);
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
}
.ug-flash.is-flash { animation: ugFlash 130ms ease-out forwards; }
@keyframes ugFlash {
  0% { opacity: 0; }
  40% { opacity: .6; }
  100% { opacity: 0; }
}

/* Guide overlays */
.ug-guide {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.ug-guide-front {
  top: 14%;
  width: 64%;
  height: 46%;
  border-top: 3px solid rgba(255,255,255,.85);
  border-left: 3px solid rgba(255,255,255,.45);
  border-right: 3px solid rgba(255,255,255,.45);
  border-radius: 120px 120px 0 0;
  box-shadow: 0 0 0 1px rgba(59,95,219,.15) inset;
}
.ug-guide-crown {
  top: 28%;
  width: 36%;
  height: 36%;
  border-radius: 50%;
  border: 3px dashed rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(59,95,219,.15) inset;
}

/* Hint pill */
.ug-hint {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.07);
  backdrop-filter: blur(8px);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ug-text-2);
}
.ug-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34,197,94,.22);
  flex-shrink: 0;
}
.ug-dot.is-loading { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.22); }

/* Mode badge on video */
.ug-mode-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(59,95,219,.85);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}

/* Shutter */
.ug-shutter-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 0 12px;
}
.ug-shutter {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 6px solid var(--ug-text);
  background: var(--ug-white);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--ug-shadow-lg);
  transition: transform .12s, box-shadow .12s;
}
.ug-shutter:hover { transform: translateY(-2px); box-shadow: var(--ug-shadow-xl); }
.ug-shutter:active { transform: scale(.96); }
.ug-shutter.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ug-shutter-inner {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 33%, rgba(255,255,255,.9), rgba(230,235,245,.8));
  border: 1px solid rgba(0,0,0,.08);
}
.ug-shutter.is-buzz { animation: ugBuzz 200ms ease; }
@keyframes ugBuzz {
  0%,100% { transform: rotate(0); }
  20% { transform: rotate(-2deg); }
  40% { transform: rotate(2deg); }
  60% { transform: rotate(-1.5deg); }
  80% { transform: rotate(1.5deg); }
}
.ug-shutter-label {
  font-size: 12px;
  color: var(--ug-text-muted);
  font-weight: 600;
}

/* Preview */
.ug-preview { margin-top: 4px; }
.ug-preview-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ug-text-muted);
  margin-bottom: 6px;
}
.ug-preview-img {
  width: 100%;
  border-radius: var(--ug-r-md);
  border: 1px solid var(--ug-border);
  box-shadow: var(--ug-shadow-sm);
  display: block;
}

/* ===================================================
   RESULT CARD
=================================================== */
/* Initial state */
.ug-result-init {
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.ug-result-init__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ug-blue-light);
  border: 2px dashed var(--ug-blue-mid);
  display: grid;
  place-items: center;
}
.ug-result-init__title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ug-text);
}
.ug-result-init__sub {
  font-size: 12.5px;
  color: var(--ug-text-muted);
  line-height: 1.7;
}
.ug-result-init__steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.ug-step-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--ug-r-md);
  background: var(--ug-bg);
  border: 1px solid var(--ug-border);
}
.ug-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ug-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ug-step-text {
  font-size: 12.5px;
  color: var(--ug-text-2);
  font-weight: 600;
  text-align: left;
}

/* Score donut */
.ug-score-wrap {
  padding: 20px 18px 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--ug-border);
  flex-wrap: wrap;
  overflow: visible;   /* コメントが切れないよう */
  height: auto;        /* 高さを自動伸びに */
}
/* タブレット・スマホ（760px以下）は全バンドで縦並び */
@media (max-width: 760px) {
  .ug-score-wrap {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 16px 16px 14px !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .ug-score-info {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    flex: none !important;
  }
  .ug-result-headline {
    font-size: 15px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }
  .ug-result-short,
  #ug-short {
    font-size: 12px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }
  .ug-band-pill {
    display: inline-flex !important;
  }
}
.ug-donut {
  --p: 0;
  --accent: 59 95 219;
  position: relative;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(
    rgb(var(--accent)) calc(var(--p) * 1%),
    rgba(0,0,0,.06) 0
  );
}
.ug-donut::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--ug-white);
  border: 1px solid var(--ug-border);
}
.ug-donut__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.ug-donut__num {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  color: var(--ug-text);
}
.ug-donut__lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--ug-text-muted);
  margin-top: 2px;
}
.ug-score-info {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: visible;   /* テキストが縦方向にクリップされないよう明示 */
  max-height: none;
}
.ug-band-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
  border: 1px solid;
}
.ug-band-pill--good { background: rgba(22,163,74,.1);  color: #166534; border-color: rgba(22,163,74,.25); }
.ug-band-pill--mid  { background: rgba(217,119,6,.1);  color: #92400E; border-color: rgba(217,119,6,.25); }
.ug-band-pill--low  { background: rgba(220,38,38,.1);  color: #991B1B; border-color: rgba(220,38,38,.25); }
.ug-result-headline {
  font-size: 14px;
  font-weight: 800;
  color: var(--ug-text);
  line-height: 1.5;
  margin-bottom: 6px;
  word-break: break-word;
}
.ug-result-short {
  font-size: 12px;
  color: var(--ug-text-muted);
  line-height: 1.75;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  overflow: visible;
  max-height: none;
  height: auto;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

/* Report blocks */
.ug-report { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.ug-report-block {
  padding: 12px 14px;
  border-radius: var(--ug-r-md);
  background: var(--ug-bg);
  border: 1px solid var(--ug-border);
}
.ug-report-block__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ug-blue);
  margin-bottom: 6px;
}
.ug-report-block__title::before {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--ug-blue);
  flex-shrink: 0;
}
.ug-report-block__body {
  font-size: 12.5px;
  color: var(--ug-text-2);
  line-height: 1.75;
}

/* ===================================================
   RESULT PAGE — SCORE CARD
=================================================== */
.ug-result-score-card {
  background: var(--ug-white);
  border-radius: var(--ug-r-lg);
  border: 1px solid var(--ug-border);
  box-shadow: var(--ug-shadow-md);
  padding: 20px 18px 16px;
  position: relative;
  overflow: hidden;
}
.ug-result-score-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: rgb(var(--accent, 59 95 219));
  border-radius: 3px 0 0 3px;
}
.ug-score-card-top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ug-score-card-info { flex: 1; min-width: 0; }
.ug-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.ug-rank-label {
  font-size: 16px;
  font-weight: 800;
  color: var(--ug-text);
  line-height: 1.35;
  margin-bottom: 4px;
}
.ug-rank-desc {
  font-size: 12px;
  color: var(--ug-text-2);
  line-height: 1.7;
  /* 全文表示を保証 */
  overflow: visible;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  display: block;
  max-height: none;
}

/* ランクバー */
.ug-rank-bar-wrap { margin-top: 14px; }
.ug-rank-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 600;
  color: var(--ug-text-muted);
  margin-bottom: 4px;
}
.ug-rank-bar-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(to right,
    #16A34A 0% 30%,
    #D97706 30% 50%,
    #EA580C 50% 70%,
    #DC2626 70% 100%
  );
  position: relative;
}
.ug-rank-bar-pointer {
  position: absolute; top: -4px;
  width: 3px; height: 16px;
  border-radius: 2px;
  background: #0F172A;
  left: 50%;
  transform: translateX(-50%);
  transition: left .9s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 0 2px #fff;
}
.ug-rank-bar-segs {
  display: flex;
  margin-top: 3px;
}
.ug-rank-seg {
  flex: 1;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--ug-text-muted);
}

/* ===================================================
   RESULT PAGE — AVG COMPARISON
=================================================== */
.ug-avg-card {
  background: var(--ug-white);
  border-radius: var(--ug-r-md);
  border: 1px solid var(--ug-border);
  padding: 16px;
}
.ug-card-section-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ug-text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ug-avg-row { margin-bottom: 10px; }
.ug-avg-row:last-of-type { margin-bottom: 0; }
.ug-avg-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.ug-avg-bar-name  { font-size: 11px; font-weight: 600; color: var(--ug-text-2); }
.ug-avg-bar-score {
  font-size: 13px;
  font-weight: 800;
  color: var(--ug-text);
  font-feature-settings: "tnum";
}
.ug-avg-bar-track {
  height: 26px;
  border-radius: 7px;
  background: var(--ug-bg);
  overflow: hidden;
}
.ug-avg-bar-fill {
  height: 100%;
  border-radius: 7px;
  transition: width .9s cubic-bezier(.4,0,.2,1);
  min-width: 24px;
}
.ug-avg-bar-fill--you  { background: rgb(var(--accent, 59 95 219)); }
.ug-avg-bar-fill--age  { background: #94A3B8; }
.ug-avg-bar-fill--all  { background: #CBD5E1; }
.ug-avg-verdict {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--ug-r-sm);
  font-size: 12px;
  color: var(--ug-text-2);
  line-height: 1.65;
  margin-top: 12px;
  border: 1px solid transparent;
}
.ug-avg-verdict__icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* 平均値の参考注記 */
.ug-avg-ref-note {
  font-size: 10px;
  color: var(--ug-text-muted);
  line-height: 1.55;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--ug-bg);
  border-radius: 6px;
  border: 1px solid var(--ug-border);
}
.ug-percentile-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 12px;
  background: var(--ug-bg);
  border-radius: var(--ug-r-sm);
  font-size: 11.5px;
  color: var(--ug-text-muted);
}
.ug-percentile-chip strong {
  font-size: 16px;
  font-weight: 800;
  font-feature-settings: "tnum";
}

/* ===================================================
   RESULT PAGE — RISK BANNER（危機感セクション）
=================================================== */
.ug-risk-banner {
  border-radius: var(--ug-r-md);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 2px solid rgba(220,38,38,.35);
  background: rgba(254,242,242,.85);
  box-shadow: 0 4px 16px rgba(220,38,38,.10);
}
.ug-risk-banner__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 900;
  color: #991B1B;
  letter-spacing: -.01em;
}
.ug-risk-banner__head svg {
  flex-shrink: 0;
  color: #DC2626;
}
.ug-risk-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1C0000;
  line-height: 1.7;
  background: rgba(255,255,255,.65);
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(220,38,38,.15);
}
.ug-risk-item__bullet {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  background: #DC2626 !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(220,38,38,.30);
}

/* ===================================================
   RESULT PAGE — SHARE CARD
=================================================== */
.ug-share-card {
  background: var(--ug-white);
  border-radius: var(--ug-r-md);
  border: 1px solid var(--ug-border);
  padding: 16px;
}
.ug-share-card__text {
  font-size: 12px;
  color: var(--ug-text-2);
  line-height: 1.7;
  margin-bottom: 12px;
}
.ug-share-btns {
  display: flex;
  gap: 8px;
}
.ug-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 0;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
  flex: 1;
}
.ug-share-btn:hover { opacity: .88; transform: translateY(-1px); text-decoration: none; }
.ug-share-btn--x    { background: #0F172A; color: #fff; }
.ug-share-btn--line { background: #06C755; color: #fff; }
.ug-share-card__note {
  font-size: 10px;
  color: var(--ug-text-muted);
  margin-top: 8px;
  text-align: center;
  line-height: 1.6;
}

/* Clinic / CTA */
.ug-clinic { padding: 0 18px 18px; }
.ug-clinic-box {
  border-radius: var(--ug-r-lg);
  border: 1px solid rgba(59,95,219,.22);
  background: rgba(59,95,219,.04);
  padding: 18px 16px;
}
.ug-clinic-box--warn {
  border-color: rgba(220,38,38,.25);
  background: rgba(254,242,242,.8);
}
.ug-clinic-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ug-clinic-title-text {
  font-size: 14px;
  font-weight: 800;
  color: var(--ug-text);
  line-height: 1.4;
  flex: 1;
}
.ug-clinic-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ug-text);
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  line-height: 1.4;
}
.ug-clinic-desc {
  font-size: 12px;
  color: var(--ug-text-muted);
  line-height: 1.7;
  margin-bottom: 10px;
}

/* Prefecture */
.ug-pref-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ug-pref-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ug-text-2);
  white-space: nowrap;
}
.ug-pref-select {
  flex: 1;
  min-width: 160px;
  padding: 9px 12px;
  border-radius: var(--ug-r-sm);
  border: 1px solid var(--ug-border);
  background: var(--ug-white);
  font-size: 13px;
  font-weight: 700;
  color: var(--ug-text);
  box-shadow: var(--ug-shadow-sm);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
.ug-pref-select:focus { outline: 2px solid var(--ug-blue); outline-offset: 2px; }

/* ボタン種別ラベル */
.ug-btn-type-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ug-text-muted);
  margin-bottom: 2px;
  margin-top: 8px;
}
.ug-cta-btns > .ug-btn-type-label:first-child { margin-top: 0; }

/* CTA Buttons */
.ug-cta-btns { display: flex; flex-direction: column; gap: 7px; }
.ug-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s, opacity .12s;
  border: none;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  width: 100%;
}
.ug-cta-btn:hover { transform: translateY(-1px); opacity: .93; text-decoration: none; }
.ug-cta-btn:active { transform: translateY(0); }
.ug-cta-btn--primary {
  background: var(--ug-blue);
  color: #fff;
  box-shadow: 0 4px 14px rgba(59,95,219,.32);
}
.ug-cta-btn--primary:hover { background: var(--ug-blue-dark); color: #fff; }
.ug-cta-btn--ghost {
  background: var(--ug-white);
  color: var(--ug-text);
  border: 1px solid var(--ug-border);
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.ug-cta-btn--ghost:hover { background: var(--ug-bg); color: var(--ug-text); }
.ug-cta-btn--warn {
  background: var(--ug-red);
  color: #fff;
  box-shadow: 0 4px 14px rgba(220,38,38,.30);
}
.ug-cta-btn--warn:hover { background: #B91C1C; color: #fff; }
.ug-cta-btn.is-disabled {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}

/* セパレーター「または」 */
.ug-cta-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 0;
  color: var(--ug-text-muted);
  font-size: 10.5px;
  font-weight: 600;
}
.ug-cta-separator::before,
.ug-cta-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ug-border);
}

/* urgency共通 */
.ug-urgency, .ug-urgency--strong {
  font-size: 12px;
  line-height: 1.65;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 6px 0 12px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  border: 1px solid;
}
.ug-urgency {
  color: var(--ug-amber);
  background: rgba(217,119,6,.08);
  border-color: rgba(217,119,6,.2);
}
.ug-urgency--strong {
  color: var(--ug-red);
  background: rgba(220,38,38,.07);
  border-color: rgba(220,38,38,.2);
}
.ug-urgency svg, .ug-urgency--strong svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* エリア外注釈 */
.ug-area-note {
  font-size: 11px;
  color: var(--ug-text-muted);
  text-align: center;
  margin-top: 6px;
  display: none;
  line-height: 1.6;
}
.ug-area-note.is-visible { display: block; }

/* クリック前注意書き */
.ug-click-note {
  font-size: 11px;
  color: var(--ug-text-muted);
  line-height: 1.6;
  margin-top: 6px;
  text-align: center;
}

/* クリニック信頼性バッジ（緑） */
.ug-clinic-trust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(22,163,74,.07);
  border: 1px solid rgba(22,163,74,.18);
}
.ug-clinic-trust__icon {
  flex-shrink: 0;
  line-height: 1;
}
.ug-clinic-trust__text {
  font-size: 11.5px;
  font-weight: 600;
  color: #15803D;
  line-height: 1.5;
}

/* 提携表記（景品表示法ステマ規制対応 2023-10施行） */
.ug-ad-note {
  font-size: 11px;
  color: var(--ug-text-muted);
  margin-top: 10px;
  text-align: center;
  line-height: 1.6;
}

/* 広告ラベル帯（ボックス上部） */
.ug-ad-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ug-text-muted);
  background: rgba(107,114,128,.08);
  border: 1px solid rgba(107,114,128,.2);
  border-radius: 6px;
  padding: 5px 10px;
  margin-bottom: 12px;
  line-height: 1.4;
}
.ug-ad-label__tag {
  display: inline-flex;
  align-items: center;
  background: var(--ug-text-muted);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* PR バッジ */
.ug-pr-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  background: #94A3B8;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ===================================================
   LOADING OVERLAY
=================================================== */
.ug-loading {
  position: fixed;
  inset: 0;
  background: rgba(243,246,251,.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 99999;
}
.ug-loading.is-hidden { display: none; }
.ug-loading-card {
  width: min(480px, 100%);
  background: var(--ug-white);
  border: 1px solid var(--ug-border);
  border-radius: var(--ug-r-xl);
  box-shadow: var(--ug-shadow-xl);
  overflow: hidden;
}
.ug-loading-head {
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, var(--ug-blue) 0%, #1B4F8A 100%);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ug-loading-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ug-loading-icon svg { animation: ugSpin 1.2s linear infinite; }
@keyframes ugSpin { to { transform: rotate(360deg); } }
.ug-loading-head__title { font-size: 16px; font-weight: 800; color: #fff; }
.ug-loading-head__sub { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 2px; }
.ug-loading-body { padding: 16px 20px 20px; }
.ug-loading-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ug-loading-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--ug-r-md);
  border: 1px solid var(--ug-border);
  background: var(--ug-bg);
  font-size: 13px;
  color: var(--ug-text-muted);
  transition: all .25s;
}
.ug-loading-step.is-done {
  background: rgba(22,163,74,.06);
  border-color: rgba(22,163,74,.2);
  color: #166534;
}
.ug-loading-step.is-active {
  background: var(--ug-blue-light);
  border-color: var(--ug-blue-mid);
  color: var(--ug-blue-dark);
  font-weight: 700;
}
.ug-loading-step__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ug-border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--ug-text-muted);
}
.ug-loading-step.is-done .ug-loading-step__icon {
  background: #16A34A;
  color: #fff;
}
.ug-loading-step.is-active .ug-loading-step__icon {
  background: var(--ug-blue);
  color: #fff;
}
.ug-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--ug-bg);
  border: 1px solid var(--ug-border);
  overflow: hidden;
  margin-bottom: 12px;
}
.ug-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ug-blue) 0%, #1B4F8A 100%);
  transition: width .22s ease;
}
.ug-loading-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--ug-r-md);
  background: var(--ug-bg);
  border: 1px solid var(--ug-border);
}
.ug-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid rgba(59,95,219,.2);
  border-top-color: var(--ug-blue);
  animation: ugSpin 0.9s linear infinite;
  flex-shrink: 0;
}
.ug-loading-foot-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--ug-text-muted);
}

/* ===================================================
   DISCLAIMER
=================================================== */
.ug-disclaimer {
  margin-top: 28px;
  padding: 16px 18px;
  border-radius: var(--ug-r-md);
  background: var(--ug-white);
  border: 1px solid var(--ug-border);
  box-shadow: var(--ug-shadow-sm);
}
.ug-disclaimer__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ug-text-muted);
  margin-bottom: 8px;
}
.ug-disclaimer p {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ug-text-muted);
}
.ug-disclaimer p + p { margin-top: 5px; }

/* フッターはWordPressテンプレート側で出力するため削除 */

/* ===================================================
   UTILITY
=================================================== */
.is-hidden { display: none !important; }
canvas { display: none; }

/* Fade in animation */
@keyframes ugFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.ug-fadein { animation: ugFadeUp .4s ease both; }

/* ===================================================
   RESPONSIVE
=================================================== */
@media (max-width: 480px) {
  .ug-hero__title { font-size: 1.5rem; }
  .ug-hero { padding: 28px 8px 18px; }
  .ug-card-head { padding: 14px 14px 10px; }
  .ug-cam { padding: 8px; }
  .ug-video-wrap { aspect-ratio: 3/4; height: auto; max-height: none; min-height: 260px; }
  .ug-shutter { width: 72px; height: 72px; }
  .ug-shutter-inner { width: 54px; height: 54px; }
  .ug-grid { gap: 12px; }

  /* スコアドーナツをさらに小さく（縦並びは760pxルールを継承） */
  .ug-donut { width: 90px !important; height: 90px !important; }
  .ug-donut__num { font-size: 24px !important; }
  .ug-score-wrap { gap: 10px !important; padding: 14px 14px 12px !important; }
  .ug-result-headline { font-size: 14px !important; }

  /* レポートブロック */
  .ug-report { padding: 12px 14px 14px; }

  /* CTAボックス */
  .ug-clinic { padding: 0 14px 14px; }
}