body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  color: #1e2a32;
  background-color: #f5f6f8;
  background-image:
    linear-gradient(rgba(245, 246, 248, 0.5), rgba(245, 246, 248, 0.5)),
    url("/static/bg.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
}

@supports (background-image: image-set(url("/static/bg.webp") type("image/webp"))) {
  body {
    background-image:
      linear-gradient(rgba(245, 246, 248, 0.5), rgba(245, 246, 248, 0.5)),
      image-set(
        url("/static/bg.webp") type("image/webp"),
        url("/static/bg.jpg") type("image/jpeg")
      );
  }
}

a {
  color: inherit;
}

.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
              url("/static/dala.jpg") center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}

.hero__overlay {
  max-width: 720px;
  margin: 0 auto;
}

.hero a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.hero a:hover,
.hero a:focus {
  border-bottom-color: #fff;
}

.page-content {
  padding: 0 16px 64px;
  margin-top: -40px;
}

.survey-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 32px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(16, 29, 39, 0.12);
}

button,
input[type="submit"] {
  padding: 12px 20px;
  background: #2f5d8a;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: #25496b;
  transform: translateY(-2px);
}

.code-error {
  color: #d93025;
  font-size: 0.95rem;
  min-height: 20px;
  margin: 4px 0 12px;
}

@media (max-width: 640px) {
  .hero {
    padding: 60px 16px;
  }

  .page-content {
    margin-top: -28px;
    padding: 0 16px 48px;
  }

  .survey-card {
    padding: 28px 20px;
  }
}

.qblock { margin:12px 0; }
.qtext { font-weight:700; margin-bottom:6px; }

/* ?????????<: ???????<?? ????????????' ???? ????????? ???'???????, ????????????????? ???' ??????????????????? */
.option-list { display:flex; flex-direction:column; gap:6px; }
.option-block { display:block; }

/* ???????<: "??????????? ???? ?????? ??????? [???????????????????] 100% ?????? ???????" */
.likert {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ?????????<?? ???'???'?????< ???>?????/???????????? ???' ???????????< ??????????? */
  gap: 12px;                       /* ?+?????????<?? ?????????? ???????? ????>??????????? */
}
.likert span { white-space: nowrap; }  /* ???? ??????????????'?? ???????????? ????????????? */
.likert .ticks {
  display: flex;
  gap: 18px;                         /* ?????????<?? ????'????????>?< ???????? ?'?????????? */
  align-items: center;
  justify-content: center;
}
.likert .tick {
  display: flex;
  justify-content: center;
  width: 28px;                       /* ?????????????????? ?????????? ?<?'??????> */
}


/* ??????"??????< ?? ?'??????????????: ???????????? ?'???+?>??O? 2 ????>??????? */
.fieldset { border:1px solid #ccc; padding:.5rem 1rem; }
.options-grid, .extras-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap:8px 24px;
}
.option-cell { display:flex; align-items:center; gap:.45rem; }

/* ???????>??? / ???'??'?' */
.analysis-box { border:1px solid #ddd; padding:12px; margin-top:16px; border-radius:8px; }
.analysis-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
#code-input { width: 220px; padding:.35rem .5rem; }
.bigcode { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
           font-size: 18px; background:#f6f6f6; padding:2px 8px; border-radius:6px; }
.status-line { color:#555; margin-top:4px; }