/* U-GATE ITパスポート用語クイズ
   配色は ugate.co.jp のブランドトークンをそのまま使用 */

:root{
  /* --- corporate brand tokens (from ugate.co.jp) --- */
  --brand-50:  #eef4ff;
  --brand-500: #1e4fd6;
  --brand-700: #16308f;
  --brand-900: #0c1c4d;
  --brand-950: #08122f;

  --accent-100: #cffafe;
  --accent-300: #67e8f9;
  --accent-400: #22d3ee;
  --accent-500: #06b6d4;
  --accent-700: #0e7490;

  /* --- semantic --- */
  --ground:      var(--brand-950);
  --surface:     #101c42;
  --surface-2:   #16255180;
  --line:        #ffffff1f;
  --line-strong: #ffffff33;

  --ink:       #eef2fb;
  --ink-soft:  #a9b8dd;
  --ink-faint: #7286b5;

  --ok:        #34d399;
  --ok-bg:     #34d3991f;
  --ok-line:   #34d39980;
  --ng:        #fb7185;
  --ng-bg:     #fb71851f;
  --ng-line:   #fb718580;
  --warn:      #fbbf24;

  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;

  --radius:    14px;
  --radius-lg: 20px;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }

body{
  background:
    radial-gradient(760px 420px at 50% -8%, #1e4fd633, transparent 65%),
    radial-gradient(520px 380px at 110% 8%, #22d3ee1f, transparent 60%),
    var(--ground);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  font-size: 16px;
  line-height: 1.7;
}

.mono{ font-family: var(--font-mono); }
.tnum{ font-variant-numeric: tabular-nums; }

.wrap{
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100dvh;
}

/* ---------- header (権威性) ---------- */
.site-header{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 2px 0;
}
.site-header img{
  display: block;
  height: 34px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  padding: 4px 7px;
  flex-shrink: 0;
}
.site-header .org{ min-width: 0; }
.site-header .org-name{
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.35;
}
.site-header .org-sub{
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.4;
}

/* ---------- title ---------- */
.title-block{ padding: 0 2px; }
.kicker{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-400);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.kicker::before{
  content:""; width: 18px; height: 1px;
  background: var(--accent-400); flex-shrink: 0;
}
h1{
  font-size: clamp(21px, 5.6vw, 25px);
  font-weight: 900;
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.01em;
}
h1 .hl{ color: var(--accent-300); }
.title-block .meta{
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* ---------- progress segments ---------- */
.segments{ display: flex; gap: 4px; }
.seg{
  flex: 1; height: 3px; border-radius: 999px;
  background: #ffffff1f;
  transition: background .25s ease;
}
.seg.done{ background: var(--accent-500); }
.seg.current{ background: var(--accent-300); }

.status-row{
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-faint);
  margin-top: -6px;
}
.status-row .score{
  color: var(--ok);
  background: var(--ok-bg);
  border-radius: 999px;
  padding: 3px 11px;
}

/* ---------- card ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 18px 22px;
  box-shadow: 0 18px 44px #0006;
}

/* ---------- timer ---------- */
.timer{
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.timer-dial{
  position: relative;
  width: 56px; height: 56px;
  flex-shrink: 0;
}
.timer-dial svg{
  width: 56px; height: 56px;
  display: block;
  transform: rotate(-90deg);
}
.timer-dial circle{ fill: none; stroke-width: 5; }
.timer-track{ stroke: #ffffff21; }
.timer-bar{
  stroke: var(--accent-400);
  stroke-linecap: round;
  transition: stroke-dashoffset .95s linear, stroke .3s ease;
}
.timer-num{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-300);
  transition: color .3s ease;
}
.timer-label{ min-width: 0; }
.timer-label .l1{
  font-size: 12px; color: var(--ink-faint);
  font-family: var(--font-mono); letter-spacing: .06em;
}
.timer-label .l2{
  font-size: 13.5px; color: var(--ink-soft); font-weight: 500;
}

/* 残り5秒 */
.timer.urgent .timer-bar{ stroke: var(--warn); }
.timer.urgent .timer-num{ color: var(--warn); }
.timer.critical .timer-bar{ stroke: var(--ng); }
.timer.critical .timer-num{ color: var(--ng); }
@media (prefers-reduced-motion: no-preference){
  .timer.critical .timer-dial{ animation: pulse 1s ease-in-out infinite; }
}
@keyframes pulse{
  0%, 100%{ transform: scale(1); }
  50%     { transform: scale(1.07); }
}
/* 回答後はタイマーを止めて静かにする */
.timer.done .timer-bar{ stroke: var(--ink-faint); }
.timer.done .timer-num{ color: var(--ink-faint); }
.timer.done .timer-dial{ animation: none; }

/* ---------- question ---------- */
.q-text{
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.75;
  margin: 0 0 18px;
  text-wrap: pretty;
}

.choices{ display: flex; flex-direction: column; gap: 9px; }
.choice{
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .1s ease;
}
.choice:hover:not(:disabled){ border-color: var(--accent-500); }
.choice:active:not(:disabled){ transform: scale(.99); }
.choice:focus-visible{ outline: 2px solid var(--accent-300); outline-offset: 2px; }
.choice:disabled{ cursor: default; }
.choice:disabled:not(.is-ok):not(.is-ng){ opacity: .45; }

.choice .kana{
  flex-shrink: 0;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #22d3ee26;
  color: var(--accent-300);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.choice.is-ok{ border-color: var(--ok-line); background: var(--ok-bg); }
.choice.is-ok .kana{ background: var(--ok); color: #04231a; }
.choice.is-ng{ border-color: var(--ng-line); background: var(--ng-bg); }
.choice.is-ng .kana{ background: var(--ng); color: #2b0a10; }

/* ---------- verdict ---------- */
.verdict{
  display: none;
  align-items: center; gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
}
.verdict.show{ display: flex; }
.verdict.ok{ color: var(--ok); }
.verdict.ng{ color: var(--ng); }
.verdict.timeout{ color: var(--warn); }

/* ---------- explanations ---------- */
.explain{ display: none; margin-top: 18px; }
.explain.show{ display: block; }
.explain-head{
  font-size: 12.5px; font-weight: 700; color: var(--ink-faint);
  letter-spacing: .04em;
  padding-bottom: 10px; margin-bottom: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.ex-row{
  display: flex; gap: 11px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #ffffff0a;
  border: 1px solid transparent;
  margin-bottom: 7px;
}
.ex-row.is-ok{ background: var(--ok-bg); border-color: var(--ok-line); }
.ex-row .kana{
  flex-shrink: 0;
  width: 23px; height: 23px; border-radius: 50%;
  background: #ffffff14; color: var(--ink-faint);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ex-row.is-ok .kana{ background: var(--ok); color: #04231a; }
.ex-row .term{ font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.ex-row.is-ok .term{ color: var(--ok); }
.ex-row .desc{ font-size: 12.5px; line-height: 1.65; color: var(--ink-soft); }

/* ---------- buttons ---------- */
.btn{
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: filter .18s ease, transform .1s ease;
}
.btn:active{ transform: scale(.99); }
.btn:focus-visible{ outline: 2px solid var(--accent-300); outline-offset: 2px; }
.btn-primary{
  background: linear-gradient(135deg, var(--accent-400), var(--accent-500));
  color: #052b31;
}
.btn-primary:hover{ filter: brightness(1.08); }
.btn-line{
  background: #06C755;
  color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.btn-line:hover{ filter: brightness(1.06); }
.btn-ghost{
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid var(--line-strong);
  font-size: 13.5px;
  padding: 11px;
}
.btn-ghost:hover{ color: var(--ink); border-color: var(--accent-500); }

.next-btn{ display: none; margin-top: 18px; }
.next-btn.show{ display: block; }

/* ---------- result ---------- */
.result{ display: none; text-align: center; }
.result.show{ display: block; }
.result-tier{
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .08em;
  color: var(--accent-300);
  margin-bottom: 4px;
}
.result-score{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 54px; font-weight: 700; line-height: 1.1;
  color: var(--ink);
}
.result-score .of{ font-size: 20px; color: var(--ink-faint); }
.result-msg{
  font-size: 13.5px; color: var(--ink-soft);
  max-width: 34ch; margin: 10px auto 0;
}

.weak{
  margin-top: 20px;
  padding: 15px 16px;
  border-radius: var(--radius);
  background: #fbbf240f;
  border: 1px solid #fbbf2440;
  text-align: left;
}
.weak-label{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--warn); margin-bottom: 6px;
}
.weak-name{ font-size: 17px; font-weight: 900; margin-bottom: 4px; }
.weak-note{ font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; }

.cta{
  margin-top: 20px;
  padding: 20px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #16255199, #0c1c4d99);
  border: 1px solid #22d3ee4d;
  text-align: left;
}
.cta-title{ font-size: 16px; font-weight: 900; line-height: 1.55; margin-bottom: 8px; }
.cta-body{ font-size: 13px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 16px; }
.cta-note{ font-size: 11px; color: var(--ink-faint); margin-top: 10px; text-align: center; }

.result-actions{ margin-top: 14px; }

/* ---------- footer ---------- */
.site-footer{
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.8;
}
.site-footer .links{
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-bottom: 12px;
}
.site-footer a{ color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover{ color: var(--accent-300); text-decoration: underline; }
.site-footer .disclaimer{
  padding: 11px 12px;
  border-radius: 10px;
  background: #ffffff08;
  margin-bottom: 12px;
}
.site-footer .copyright{ font-family: var(--font-mono); }

.hidden{ display: none !important; }