:root{
  --bg:#f3f8fc;
  --bg-2:#e8f1f8;
  --panel:#ffffff;
  --panel-soft:#f7fbfe;
  --text:#102033;
  --muted:#607286;
  --line:#d8e4ef;
  --line-strong:#c3d3e1;
  --brand:#4a90c2;
  --brand-strong:#2d6f9f;
  --brand-soft:#e9f4fd;
  --shadow:0 16px 34px rgba(16,32,51,.06);
  --shadow-soft:0 8px 18px rgba(16,32,51,.04);
  --max:1240px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(74,144,194,.08), transparent 24%),
    radial-gradient(circle at 100% 0, rgba(128,190,226,.08), transparent 22%),
    linear-gradient(180deg,#f8fbfe 0%,#f2f7fc 100%)
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{width:min(calc(100% - 32px),var(--max));margin:0 auto}
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:blur(14px);
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(195,211,225,.9)
}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:18px}
.brand{display:flex;align-items:center;gap:14px;font-weight:700;letter-spacing:.1px}
.brand-mark{
  width:44px;height:44px;
  background:linear-gradient(135deg,#4a90c2,#80bee2);
  display:grid;place-items:center;color:#fff;font-weight:800;
  box-shadow:0 10px 22px rgba(31,106,58,.18)
}
.brand-copy{display:flex;flex-direction:column;gap:3px}
.brand-copy small{display:block;color:var(--muted);font-weight:500;font-size:.8rem}
.nav-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nav-links a{color:var(--muted);padding:10px 14px;transition:.2s ease;border:1px solid transparent}
.nav-links a:hover{background:#fff;color:var(--text);border-color:var(--line);box-shadow:var(--shadow-soft)}
.nav-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:46px;height:46px;padding:0;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--text);transition:transform .2s ease,opacity .2s ease,background .2s ease}
body.nav-open{overflow:hidden}
.hero{padding:74px 0 34px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}
.hero-card,.stats-card,.about-card,.search-panel,.card,.detail-hero,.detail-box,.legal-box{
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  box-shadow:var(--shadow)
}
.hero-card,.detail-box,.about-card,.legal-box{padding:30px}
.hero-card{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 0 0, rgba(74,144,194,.06), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)
}
.hero-card::after{
  content:"";
  position:absolute;right:-64px;top:-64px;width:180px;height:180px;
  background:radial-gradient(circle, rgba(128,190,226,.14), transparent 68%)
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:var(--brand-soft);color:var(--brand-strong);
  border:1px solid #d7e7f4;font-size:.92rem;margin-bottom:18px;font-weight:600
}
.hero h1,.detail-title{
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.03;margin:0 0 18px;letter-spacing:-.04em;
  max-width:12ch
}
.hero p,.detail-lead{font-size:1.05rem;line-height:1.7;color:var(--muted);margin:0 0 28px}
.hero-actions,.detail-actions,.card-action-group{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 18px;font-weight:700;transition:.18s ease
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(74,144,194,.16)}
.btn-primary:hover{background:var(--brand-strong)}
.btn-secondary,.btn-tertiary{background:#fff;border:1px solid var(--line-strong)}
.btn-secondary{color:var(--text)}
.btn-tertiary{color:var(--muted)}
.btn-secondary:hover,.btn-tertiary:hover{border-color:#b4cadc;box-shadow:var(--shadow-soft)}
.stats-card{
  padding:28px;display:grid;grid-template-rows:auto auto 1fr;gap:18px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at bottom right, rgba(74,144,194,.08), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f7fbf7 100%)
}
.stats-number{font-size:4.2rem;font-weight:800;line-height:1;letter-spacing:-.05em;color:var(--brand-strong)}
.stats-label{color:var(--muted);max-width:30ch;line-height:1.65}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat-item{background:var(--panel-soft);border:1px solid var(--line);padding:14px}
.stat-item strong{display:block;font-size:1.15rem;margin-bottom:6px;color:var(--brand-strong)}
.stat-item span{color:var(--muted);font-size:.94rem;line-height:1.45}
.section{padding:22px 0 18px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.section-head h2{font-size:clamp(1.55rem,3vw,2.2rem);margin:0;letter-spacing:-.03em}
.section-head p{margin:8px 0 0;color:var(--muted);max-width:72ch;line-height:1.7}
.search-panel{padding:18px;background:rgba(255,255,255,.8)}
.controls{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.control{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);padding:0 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)
}
.control span{font-size:1rem}
.control input,.control select{width:100%;background:transparent;border:none;outline:none;color:var(--text);min-height:54px;font:inherit}
.control input::placeholder{color:#8899ab}
.control select option{color:var(--text)}
.result-meta{margin-top:12px;color:var(--muted);font-size:.95rem}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{overflow:hidden;display:flex;flex-direction:column;height:100%;transition:.18s ease;background:#fff}
.card:hover{transform:translateY(-4px);border-color:#c9dced;box-shadow:0 18px 36px rgba(16,32,51,.08)}
.card-media{aspect-ratio:16/9;background:linear-gradient(180deg,#f6faff 0%,#edf5fc 100%);border-bottom:1px solid var(--line);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:16px;flex:1}
.card-top{display:flex;justify-content:space-between;gap:12px;align-items:start}
.card h3{margin:0;font-size:1.16rem;letter-spacing:-.02em}
.pill{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;background:#f1f7fc;border:1px solid var(--line);color:#456176;font-size:.82rem;font-weight:600}
.card p{margin:0;color:var(--muted);line-height:1.65}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:7px 10px;background:#f8fbfd;border:1px solid var(--line);color:#556b7d;font-size:.8rem}
.card-actions{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-top:auto}
.card-action-group{justify-content:flex-end}
.domain{color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.link-btn,.ghost-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 14px;font-weight:700;border:1px solid transparent;transition:.18s ease}
.link-btn{background:var(--brand);color:#fff}
.link-btn:hover{background:var(--brand-strong)}
.ghost-btn{background:#fff;border-color:var(--line-strong);color:var(--text)}
.ghost-btn:hover{border-color:#b4cadc;box-shadow:var(--shadow-soft)}
.empty-state{padding:32px;border:1px dashed #c7d8e5;color:var(--muted);text-align:center;background:#fff}
.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.about-card h3{margin:0 0 12px}
.about-card p,.about-card li,.detail-copy li,.detail-copy p,.legal-box p,.legal-box li{color:var(--muted);line-height:1.75}
.about-card ul,.detail-copy ul{margin:0;padding-left:20px}
.site-footer{margin-top:42px;padding:34px 0 42px;border-top:1px solid var(--line);background:rgba(255,255,255,.78)}
.footer-grid{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.footer-copy{color:var(--muted);line-height:1.6}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--text)}
.legal-page main,.detail-page main{padding:56px 0}
.notice{margin-top:20px;padding:16px 18px;background:#eef6fd;border:1px solid #cfe1f0;color:#27597d}
.breadcrumb{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px;color:var(--muted);font-size:.95rem}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--text)}
.detail-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
.detail-hero{overflow:hidden;background:#fff}
.detail-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.detail-box{background:#fff}
.detail-meta{display:grid;gap:16px}
.meta-card{padding:18px;background:var(--panel-soft);border:1px solid var(--line)}
.meta-label{display:block;color:var(--muted);font-size:.88rem;margin-bottom:8px}
.meta-value{font-weight:700;line-height:1.6}
.detail-copy h2{margin:0 0 12px;font-size:1.3rem;letter-spacing:-.02em}
.list-clean{display:grid;gap:10px;list-style:none;padding:0;margin:0}
.list-clean li{padding:14px 16px;background:var(--panel-soft);border:1px solid var(--line)}
.back-link{display:inline-flex;align-items:center;gap:10px;color:var(--muted);margin-bottom:18px}
.back-link:hover{color:var(--text)}
@media (max-width:1080px){
  .hero-grid,.about-wrap,.controls,.detail-layout{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .nav{min-height:68px;position:relative}
  .nav-toggle{display:inline-flex;flex:0 0 auto}
  .nav-links{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:60;flex-direction:column;align-items:stretch;gap:10px;padding:14px;background:rgba(255,255,255,.98);border:1px solid var(--line);box-shadow:0 18px 36px rgba(16,32,51,.12)}
  body.nav-open .nav-links{display:flex}
  body.nav-open .nav-toggle{background:var(--brand-soft);border-color:#bcd6ea}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-links a{display:block;width:100%;padding:14px 16px;border:1px solid var(--line);background:#fff;color:var(--text)}
  .hero{padding-top:42px}
  .hero-grid,.about-wrap,.controls,.grid,.detail-layout{grid-template-columns:1fr}
  .hero-card,.stats-card,.search-panel,.about-card,.detail-box,.legal-box{padding:22px}
  .stats-number{font-size:3.2rem}
  .footer-grid{align-items:flex-start}
  .card-actions{align-items:flex-start;flex-direction:column}
  .card-action-group{justify-content:flex-start}
  .hero h1,.detail-title{max-width:none}
}