* {
  box-sizing: border-box;
}

:root {
  --bg: #f8fbfd;
  --card: #ffffff;
  --text: #122033;
  --sub: #5f6f82;
  --border: #dbeaf3;

  --primary: #3f8fe5;
  --primary-soft: #eef6ff;

  --accent: #2f9f73;
  --accent-soft: #eefaf5;

  --shadow: 0 8px 24px rgba(31,68,120,.08);
  --radius: 20px;
}

body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(circle at top right,#eefaf5 0,transparent 260px),
    linear-gradient(180deg,#f8fbfd 0%,#eef7ff 100%);

  color: var(--text);
}

.top-header {
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.top-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 16px;

  display:flex;
  align-items:center;
  gap:14px;
}

.logo-mark {
  width:52px;
  height:52px;

  display:grid;
  place-items:center;

  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #7cb8f2,
      #6fd0b2
    );

  color:#fff;
  font-size:25px;
  font-weight:900;

  box-shadow:
    0 8px 20px
    rgba(63,143,229,.22);
}

.site-title h1{
  margin:0 0 4px;
  font-size:25px;
}

.site-title p{
  margin:0;
  color:var(--sub);
  font-size:14px;
}

.container{
  max-width:760px;
  margin:0 auto;
  padding:18px 16px;
}

.search-area{
  position:relative;
  margin-bottom:14px;
}

.search-icon{
  position:absolute;
  left:17px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
}

#searchInput{
  width:100%;
  height:58px;

  padding:
    0 16px
    0 48px;

  border:
    1.5px solid
    var(--primary);

  border-radius:999px;

  background:#fff;

  color:var(--text);
  font-size:16px;

  outline:none;

  box-shadow:var(--shadow);
}

#searchInput:focus{
  border-color:#2377d7;
}

.filter-area{
  display:flex;
  gap:9px;

  overflow-x:auto;

  padding-bottom:14px;
  margin-bottom:8px;

  -webkit-overflow-scrolling:touch;
}

.filter-area::-webkit-scrollbar{
  display:none;
}

.filter-btn{
  flex:0 0 auto;

  border:
    1px solid
    var(--border);

  border-radius:999px;

  padding:10px 16px;

  background:#fff;

  color:#40546b;
  font-size:14px;

  box-shadow:
    0 4px 12px
    rgba(31,68,120,.06);
}

.filter-btn.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  font-weight:700;
}

.law-list{
  display:grid;
  gap:16px;
}

.law-card{
  background:var(--card);

  border:
    1px solid
    var(--border);

  border-radius:var(--radius);

  padding:20px;

  box-shadow:var(--shadow);
}

.law-meta{
  display:flex;
  justify-content:space-between;

  color:var(--sub);
  font-size:13px;

  margin-bottom:6px;
}

.law-card h2{
  margin:0 0 18px;
  font-size:22px;
  line-height:1.45;
}

.block{
  margin-top:18px;
}

.block-title{
  font-size:16px;
  font-weight:900;
  margin-bottom:8px;
}

.original,
.paraphrase,
.summary{

  border-radius:14px;

  padding:14px;

  font-size:15px;
  line-height:1.9;
}

.original{
  white-space:pre-line;
  background:var(--primary-soft);
  color:#20344d;
}

.paraphrase{
  background:#eefaf7;
  color:#173f34;
}

.summary{
  background:#f0faef;
  color:#17452e;
}

.keyword-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin-top:16px;
}

.keyword{
  font-size:12px;

  background:#f6fbff;

  border:
    1px solid
    var(--border);

  border-radius:999px;

  padding:5px 9px;

  color:#37627a;
}

.no-result{
  text-align:center;
  color:var(--sub);

  padding:34px 10px;

  background:#fff;

  border:
    1px solid
    var(--border);

  border-radius:var(--radius);
}

.app-footer{
  max-width:760px;
  margin:0 auto;

  padding:
    18px 16px 28px;

  color:var(--sub);
}

.footer-card{

  display:flex;
  gap:12px;

  background:
    rgba(255,255,255,.82);

  border:
    1px solid
    var(--border);

  border-radius:16px;

  padding:12px;

  margin-bottom:10px;
}

.footer-icon{

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    var(--primary-soft);
}

.footer-card p{
  margin:0;

  font-size:12px;
  line-height:1.75;
}

.footer-card a{
  color:var(--primary);
  text-decoration:none;
}

.copyright{
  text-align:center;
  margin-top:18px;
  font-size:12px;
}

@media (max-width:520px){

  .logo-mark{
    width:48px;
    height:48px;
    font-size:23px;
  }

  .site-title h1{
    font-size:23px;
  }

  .law-card{
    padding:18px;
  }

  .law-card h2{
    font-size:21px;
  }

}