:root {
  --green:#148d2b; --green-dark:#0d6d20; --green-soft:#eaf6ec;
  --ink:#172019; --muted:#5d685f; --line:#dbe4dc; --paper:#fff;
  --bg:#f3f7f3; --shadow:0 14px 38px rgba(32,64,38,.09); --radius:18px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:var(--bg); line-height:1.55; }
a { color:#0c63b7; }
a:hover { color:var(--green-dark); }
img { max-width:100%; height:auto; }
.site-header { background:rgba(255,255,255,.93); border-bottom:1px solid var(--line); position:relative; z-index:5; }
.header-inner { width:min(1180px,calc(100% - 32px)); margin:auto; min-height:132px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:block; width:min(500px,48vw); }
.brand img { display:block; width:100%; }
.site-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.nav-pill { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 17px; border:1px solid #08731d; border-radius:999px; background:linear-gradient(#26a741,#118528); color:#fff; text-decoration:none; font-weight:700; box-shadow:0 5px 14px rgba(18,126,38,.16); }
.nav-pill:hover,.nav-pill.is-active { color:#fff; background:linear-gradient(#158d2e,#0b681c); }
.page-shell { width:min(1180px,calc(100% - 32px)); margin:28px auto 48px; }
.hero,.content-card,.test-card,.result-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.hero { padding:38px; text-align:center; }
h1,h2,h3 { line-height:1.2; }
h1 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(2rem,4vw,3.1rem); margin:0 0 16px; }
h2 { font-size:clamp(1.35rem,2.5vw,1.9rem); margin:34px 0 14px; }
.lead { max-width:800px; margin:0 auto 22px; color:#38443a; font-size:1.08rem; }
.feature-list { max-width:720px; margin:22px auto; padding-left:1.25rem; text-align:left; }
.feature-list li { margin:9px 0; }
.cta { display:inline-flex; align-items:center; justify-content:center; min-width:190px; min-height:52px; padding:12px 24px; border-radius:999px; color:#fff; background:linear-gradient(#27aa43,#108127); text-decoration:none; font-weight:800; font-size:1.08rem; box-shadow:0 8px 18px rgba(17,128,39,.2); }
.cta:hover { color:#fff; transform:translateY(-1px); }
.notice { margin:22px auto 0; max-width:820px; padding:14px 16px; border:1px solid #cfe2d2; border-radius:12px; background:var(--green-soft); color:#344237; font-size:.95rem; }
.type-section { margin-top:26px; }
.type-section > h2,.type-section > p { text-align:center; }
.type-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:20px; }
.type-link { display:flex; flex-direction:column; gap:3px; min-height:82px; padding:15px; border:1px solid var(--line); border-radius:14px; background:#fff; text-decoration:none; box-shadow:0 6px 18px rgba(26,55,30,.05); }
.type-link strong { color:#0d7a23; font-size:1.08rem; }
.type-link span { color:#39443b; }
.type-link:hover { border-color:#9cc9a4; background:#fbfffb; }
.site-footer { width:min(1180px,calc(100% - 32px)); margin:0 auto 30px; padding:20px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; text-align:center; }
.footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-bottom:12px; }
.trademark-note { max-width:920px; margin:0 auto; }
.content-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:22px; align-items:start; }
.side-card { position:sticky; top:16px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.side-card h2 { font-size:1rem; margin:0 0 10px; }
.side-types { display:grid; gap:5px; }
.side-types a { padding:6px 8px; border-radius:8px; text-decoration:none; font-size:.92rem; }
.side-types a:hover { background:var(--green-soft); }
.content-card { padding:32px clamp(22px,4vw,48px); }
.content-card h1 { text-align:center; font-size:clamp(1.9rem,3.6vw,2.7rem); }
.article-content { max-width:780px; margin:0 auto; }
.type-code { text-align:center; color:#465148; font-weight:700; margin-bottom:22px; }
.type-badge { display:block; width:159px; margin:18px auto 24px; }
.legacy-profile { white-space:normal; font-size:1rem; }
.keywords { margin-top:18px; padding:14px 16px; border-radius:12px; background:var(--green-soft); }
.disclaimer { margin:24px 0; padding:15px 16px; border-left:4px solid var(--green); background:#f5faf6; color:#3d4840; }
.test-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:18px; align-items:start; }
.progress-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 14px; text-align:center; box-shadow:var(--shadow); position:sticky; top:16px; }
.progress-card .step { font-size:2rem; color:var(--green-dark); font-weight:800; }
.progress-track { height:10px; border-radius:999px; background:#e4ece5; overflow:hidden; margin-top:12px; }
.progress-fill { height:100%; background:linear-gradient(90deg,#25a842,#0e7e25); width:var(--progress,0%); }
.test-card { min-height:400px; padding:clamp(30px,6vw,70px) clamp(20px,5vw,64px); text-align:center; }
.question-number { color:var(--green-dark); font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:.84rem; }
.test-question { max-width:820px; margin:12px auto 34px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.65rem,4vw,2.35rem); }
.answer-row { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.answer-btn { min-width:160px; min-height:58px; padding:13px 25px; border:1px solid #08731d; border-radius:999px; background:linear-gradient(#28aa44,#108126); color:#fff; font-size:1.05rem; font-weight:800; cursor:pointer; box-shadow:0 8px 18px rgba(17,128,39,.16); }
.answer-btn.answer-false { background:linear-gradient(#66736a,#3f4942); border-color:#39413b; }
.answer-btn:hover { transform:translateY(-1px); filter:brightness(.97); }
.test-hint { margin-top:30px; color:var(--muted); font-size:.92rem; }
.result-card { padding:34px; text-align:center; }
.result-type { color:var(--green-dark); font-family:Georgia,'Times New Roman',serif; font-size:clamp(3rem,9vw,5.4rem); font-weight:800; margin:10px 0; }
.result-badge { width:159px; margin:12px auto 18px; }
.result-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:24px; }
.embed-code { width:min(650px,100%); min-height:80px; margin-top:10px; }
.privacy-copy { max-width:820px; margin:auto; }
body.test-page { padding-bottom:0; }
@media (max-width:900px) {
  .header-inner { min-height:auto; padding:18px 0; flex-direction:column; }
  .brand { width:min(470px,90vw); }
  .site-nav { justify-content:center; }
  .content-layout,.test-layout { grid-template-columns:1fr; }
  .side-card,.progress-card { position:static; }
  .side-types { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .progress-card { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:16px; text-align:left; }
  .progress-track { margin-top:0; }
  body.test-page { scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom,0px)); }
  body.test-page .test-card { padding-bottom:calc(165px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width:560px) {
  .page-shell { width:min(100% - 20px,1180px); margin-top:14px; }
  .hero,.content-card,.result-card { padding:24px 18px; border-radius:14px; }
  .site-nav { gap:7px; }
  .nav-pill { min-height:40px; padding:8px 12px; font-size:.9rem; }
  .type-grid,.side-types { grid-template-columns:1fr; }
  .answer-row { flex-direction:column; }
  .answer-btn { width:100%; min-height:62px; }
  .test-card { padding:28px 16px calc(190px + env(safe-area-inset-bottom,0px)); }
  body.test-page { scroll-padding-bottom:calc(180px + env(safe-area-inset-bottom,0px)); }
  .progress-card { grid-template-columns:1fr; text-align:center; }
}

.progress-0 { width:0%; }
.progress-5 { width:5%; }
.progress-10 { width:10%; }
.progress-15 { width:15%; }
.progress-20 { width:20%; }
.progress-25 { width:25%; }
.progress-30 { width:30%; }
.progress-35 { width:35%; }
.progress-40 { width:40%; }
.progress-45 { width:45%; }
.progress-50 { width:50%; }
.progress-55 { width:55%; }
.progress-60 { width:60%; }
.progress-65 { width:65%; }
.progress-70 { width:70%; }
.progress-75 { width:75%; }
.progress-80 { width:80%; }
.progress-85 { width:85%; }
.progress-90 { width:90%; }
.progress-95 { width:95%; }
.progress-100 { width:100%; }