/* wentletrap 공통 스타일 — 그레이 톤(연회색 바탕 + 흰 카드 + 진회색 글자) 위에 채도 낮은 남색 강조 하나 */
:root, :root[data-theme=light] {
  --pico-font-size: 95%;
  --pico-font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Helvetica Neue", Arial, sans-serif;
  --q-blue: #3d5a99;          /* 강조(버튼·링크·선택 상태) — 채도 낮은 남색 */
  --q-blue-dark: #2f4778;
  --q-sky: #6b83b8;           /* 보조 강조 */
  --q-bg: #f3f4f6;            /* 페이지 바탕 */
  --q-ink: #1f2937;           /* 본문 글자 */
  --q-line: #e5e7eb;          /* 선·경계 */
  --pico-primary: var(--q-blue);
  --pico-primary-background: var(--q-blue);
  --pico-primary-hover-background: var(--q-blue-dark);
  --pico-primary-border: var(--q-blue);
  --pico-primary-hover-border: var(--q-blue-dark);
  --pico-primary-underline: var(--q-blue);
  --pico-primary-focus: rgba(61,90,153,.22);
  --pico-background-color: var(--q-bg);
  --pico-color: var(--q-ink);
  --pico-h1-color: var(--q-ink); --pico-h2-color: var(--q-ink); --pico-h3-color: var(--q-ink); --pico-h4-color: var(--q-ink); --pico-h5-color: var(--q-ink);
  --pico-muted-color: #6b7280;
  --pico-muted-border-color: var(--q-line);
  --pico-card-background-color: #fff;
  --pico-card-sectioning-background-color: #f9fafb;
  --pico-border-radius: 0;          /* 브랜드(각진 상자)에 맞춰 직각 */
  --pico-mark-background-color: #e5e7eb; --pico-mark-color: var(--q-ink);
}
body { background: var(--q-bg); color: var(--q-ink); }
.topbar { background: #fff; color: var(--q-ink); padding: .55rem 0; margin-bottom: 1.2rem; border-bottom: 1px solid var(--q-line); }
.topbar .brand { display: flex; align-items: center; text-decoration: none; }
.topbar .brand img { height: 2rem; width: auto; display: block; }
.topbar a:not(.brand), .topbar span { color: var(--q-ink); }
article { box-shadow: 0 1px 2px rgba(17,24,39,.06); border: 1px solid var(--q-line); }
main > nav { background: #fff; border-radius: var(--pico-border-radius); padding: .4rem 1rem; margin-bottom: 1rem; border: 1px solid var(--q-line); }
.muted { color: var(--pico-muted-color); font-size: .85rem; }
.err { color: var(--pico-del-color); min-height: 1.5rem; }
.timer { font-size: .85rem; margin: -.8rem 0 .6rem; min-height: 1.2rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row > * { margin-bottom: 0 !important; }
.row > select, .row > label, .row > input[type=number] { width: auto; }
.row > label { display: flex; align-items: center; gap: .3rem; }
.spacer { flex: 1; }
.actions { white-space: nowrap; }
.actions form { display: inline; }
.actions a, .actions button { margin: 0 .2rem; }
button.tiny { padding: .15rem .5rem; font-size: .8rem; width: auto; }
code.copy { cursor: pointer; }

/* 빌더 */
.builder .block { border: 1px solid var(--pico-muted-border-color); border-radius: 0; padding: 1rem; margin-bottom: 1.2rem; background: var(--pico-card-sectioning-background-color); }
.builder .block > header input { flex: 1; }
.builder .q { padding: .8rem 1rem; margin: .6rem 0; }
.builder .q header code, .builder .block header code { font-weight: bold; }
.builder label { font-size: .85rem; }
.builder textarea, .builder input, .builder select { margin-bottom: .4rem; }
.builder details { margin: .3rem 0; }
.builder details summary { font-size: .85rem; }
.cond { display: flex; gap: .4rem; align-items: center; margin-bottom: .3rem; }
.cond select, .cond input { margin: 0; width: auto; flex: 1; }
.cond button { flex: 0; }

/* 빌더 추가 요소: 잠금 배너·점검 결과·드래그·대화상자·척도 안내표 */
.banner { background: #fef9ec; border: 1px solid #e7d3a3; border-radius: 0; padding: .6rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
.issues { background: #fff; border: 1px solid var(--pico-muted-border-color); border-radius: 0; padding: .6rem 1rem; margin-bottom: 1rem; font-size: .88rem; }
.issues ul { margin: .4rem 0; padding-left: 1.2rem; }
.issues li.error { color: #b42318; }
.issues li.warn { color: #8a5a00; }
.builder .toolbar { margin: .5rem 0 1rem; }
.builder .q .handle { cursor: grab; user-select: none; }
.builder .q.dragging { opacity: .4; }
.builder .q.dragover, .builder .qlist.dragover { outline: 2px dashed var(--q-sky); outline-offset: 2px; }
.builder .dropzone { padding: .8rem; border: 1px dashed var(--pico-muted-border-color); border-radius: 0; text-align: center; }
dialog article { max-width: 760px; width: 92vw; }
dialog textarea { font-size: .9rem; }
table.guide { font-size: .8rem; }
table.guide th, table.guide td { padding: .3rem .4rem; vertical-align: top; }

/* 응답 화면 — 터치 우선: 선택지는 큰 카드, 하단 버튼 고정, 좁은 화면에서 행렬은 세로 쌓임 */
.survey { max-width: 760px; margin: 1rem auto; }
.question { margin: 1.4rem 0; padding: .6rem .8rem; border-radius: 0; }
.question legend { font-weight: 600; margin-bottom: .6rem; line-height: 1.4; }
.question.missing { outline: 2px solid var(--pico-del-color); }
.req { color: var(--pico-del-color); }
.qnum { color: var(--q-blue); font-weight: 700; margin-right: .1rem; }
/* 단일·복수 선택지: 한 줄 전체가 터치 영역 */
.question > label { display: flex; width: 100%; box-sizing: border-box; align-items: center; gap: .6rem; padding: .6rem .8rem; margin: .35rem 0; border: 1px solid var(--pico-muted-border-color); border-radius: 0; cursor: pointer; background: #fff; }
.question > label:has(input:checked) { border-color: var(--q-blue); background: #eef1f7; }
.question > label input { margin: 0; flex: none; }
.question > label.other { flex-wrap: wrap; }
.question > label.other input:not([type]) { flex: 1 1 10rem; margin: 0; padding: .3rem .5rem; height: auto; }
.question select, .question input:not([type=radio]):not([type=checkbox]), .question textarea { font-size: 1rem; }
.scale { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.scale label { display: flex; flex-direction: column; align-items: center; margin: 0; font-size: .8rem; min-width: 2.2rem; }
.scale label input { margin: 0 0 .2rem; width: 1.4rem; height: 1.4rem; }
.scale small { color: var(--pico-muted-color); max-width: 7rem; }
.scale label small { max-width: 5rem; text-align: center; line-height: 1.1; margin-top: .15rem; }
.rating { display: inline-flex; flex-direction: row-reverse; gap: .1rem; }
.rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating label { font-size: 2.4rem; color: #d1d5db; cursor: pointer; margin: 0 !important; padding: 0 .1rem; }
.rating input:checked ~ label, .rating label:hover, .rating label:hover ~ label { color: #d97706; }
.tbl { overflow-x: auto; }
table.matrix th, table.matrix td { text-align: center; padding: .3rem .4rem; font-size: .9rem; }
table.matrix td:first-child { text-align: left; }
table.matrix td label { margin: 0; display: inline-flex; justify-content: center; }
table.matrix input { margin: 0; width: 1.3rem; height: 1.3rem; }
table.matrix .cell-label { display: none; }
/* 안내문·자극물 */
.info-q { border: 0; padding: 0; }
.info-q .info { background: #f9fafb; border-radius: 0; padding: 1rem 1.2rem; line-height: 1.6; }
.info-q .info img { max-width: 100%; height: auto; border-radius: 0; display: block; margin: .6rem auto; }
.info-q .video { position: relative; padding-top: 56.25%; margin: .6rem 0; }
.info-q .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
/* 의미분별: 양 끝 형용사 + 가운데 점 */
table.semdiff td.pole { font-weight: 600; white-space: nowrap; }
table.semdiff td.pole.left { text-align: right; }
table.semdiff td.pole.right { text-align: left; }
/* 슬라이더 */
.slider { display: flex; align-items: center; gap: .6rem; }
.slider small { flex: 0 0 auto; max-width: 9rem; line-height: 1.2; }
.slider input[type=range] { flex: 1 1 auto; min-width: 8rem; width: auto; margin: 0; }
.slider output { min-width: 2.5rem; text-align: center; font-weight: 600; color: var(--q-blue); }
/* 순위 */
ol.ranking { list-style: none; counter-reset: rk; padding: 0; margin: 0; }
ol.ranking li { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; margin: .3rem 0; border: 1px solid var(--pico-muted-border-color); border-radius: 0; background: #fff; counter-increment: rk; }
ol.ranking li .rk::before { content: counter(rk) "위"; font-weight: 700; color: var(--q-blue); min-width: 2.2rem; display: inline-block; }
ol.ranking li .txt { flex: 1; }
ol.ranking li button { margin: 0; width: auto; }
/* 합계 배분 */
.constsum label { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; }
.constsum label span { flex: 1; }
.constsum label input { width: 7rem; margin: 0; }
.constsum .sum { text-align: right; font-weight: 600; margin-top: .3rem; }
.constsum .sum output { color: var(--q-blue); }
/* 하단 이전/다음 버튼 고정 */
.survey .nav { position: sticky; bottom: 0; background: #fff; padding: .6rem 0 .2rem; margin-top: 1rem; border-top: 1px solid var(--q-line); }
.survey .nav button { min-width: 6rem; }
@media (max-width: 640px) {
  :root, :root[data-theme=light] { --pico-font-size: 100%; }
  main.container { padding: 0 .6rem; }
  .survey { margin: .4rem auto; padding: 1rem .9rem; }
  .question { padding: .4rem .2rem; }
  /* 행렬: 행마다 카드로 세로 쌓임, 선택지 이름을 각 셀에 표시 */
  table.matrix, table.matrix tbody, table.matrix tr, table.matrix td { display: block; width: 100%; }
  table.matrix thead { display: none; }
  table.matrix tr { border: 1px solid var(--pico-muted-border-color); border-radius: 0; margin: .5rem 0; padding: .4rem .6rem; background: #fff; }
  table.matrix td { text-align: left; padding: .2rem 0; border: 0; }
  table.matrix td:first-child { font-weight: 600; padding-bottom: .3rem; }
  table.matrix td label { display: flex; align-items: center; gap: .5rem; padding: .35rem .3rem; border-radius: 0; }
  table.matrix td label:has(input:checked) { background: #eef1f7; }
  table.matrix .cell-label { display: inline; font-size: .95rem; }
  table.semdiff td.pole { display: inline-block; width: 49%; padding: .2rem 0; }
  table.semdiff td.pole.left { text-align: left; }
  table.semdiff td.pole.right { text-align: right; }
  table.semdiff td:not(.pole) { display: inline-block; width: auto; }
  table.semdiff td:not(.pole) label { padding: .3rem .4rem; }
  .scale label { min-width: 2.6rem; }
  .rating label { font-size: 2.8rem; }
  /* 슬라이더: 트랙은 한 줄 전체, 라벨은 아래 양끝, 값은 가운데 */
  .slider { flex-wrap: wrap; row-gap: .2rem; }
  .slider input[type=range] { flex: 1 1 100%; order: 0; min-width: 0; }
  .slider small:first-child { order: 1; margin-right: auto; max-width: 45%; }
  .slider small:nth-of-type(2) { order: 2; text-align: right; max-width: 45%; }
  .slider output { order: 3; flex: 1 1 100%; text-align: center; }
}

/* 결과 대시보드 — 태블로식: 왼쪽 필드 패널 + 카드 캔버스 */
.dash { display: flex; gap: 1rem; align-items: flex-start; }
.dash .main { flex: 1; min-width: 0; }
.fields { flex: 0 0 240px; position: sticky; top: .8rem; max-height: calc(100vh - 2rem); overflow: auto; background: #fff; border-radius: var(--pico-border-radius); padding: .8rem; border: 1px solid var(--q-line); font-size: .85rem; }
.fields ul { list-style: none; padding: 0; margin: .5rem 0; }
.fields li { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; border-bottom: 1px solid #f0f2f8; }
.fields li input { margin: 0; flex: none; }
.fields li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fields li .type { flex: none; font-size: .68rem; color: #fff; background: #9ca3af; border-radius: 0; padding: 0 .3rem; }
.cards article.wide { grid-column: span 2; }
.cards article.dragging { opacity: .4; }
.cards article.dragover { outline: 2px dashed var(--q-sky); }
.cards article h5 { display: flex; align-items: center; gap: .3rem; cursor: grab; }
.cards article h5 .title { flex: 1; }
.cards article h5 button { margin: 0; padding: 0 .35rem; font-size: .75rem; line-height: 1.4; }
@media (max-width: 900px) { .dash { flex-direction: column; } .fields { position: static; flex: none; width: 100%; } .cards article.wide { grid-column: auto; } }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.tiles article { padding: .8rem 1rem; margin: 0; }
.tiles h2 { margin: 0; }
.toolbar { margin: 1rem 0 .3rem; }
.toolbar label { display: flex; gap: .4rem; align-items: center; margin: 0; }
.toolbar select { margin: 0; width: auto; }
.chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.chip { background: var(--pico-primary-background); color: var(--pico-primary-inverse); border-radius: 0; padding: .1rem .6rem; font-size: .8rem; cursor: pointer; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1rem; }
.cards article { margin: 0; padding: 1rem; }
.cards article h5 { margin: 0 0 .3rem; font-size: .95rem; }
.cards .stat { font-size: .8rem; color: var(--pico-muted-color); display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.pval { display: inline-block; font-family: "SF Mono", Menlo, monospace; font-size: .74rem; padding: .1rem .55rem; border-radius: 0; background: #eef0f3; color: #4b5563; letter-spacing: -.01em; }
.pval.sig { background: var(--q-blue); color: #fff; }
.cards .textlist { max-height: 300px; overflow-y: auto; font-size: .85rem; }
.cards .textlist li { margin-bottom: .3rem; }
.cards canvas { max-height: 320px; }
#responsesPanel { margin-top: 1rem; }
#responsesBody { overflow-x: auto; }
#responsesBody table { font-size: .85rem; }
#responsesBody .response-row { cursor: pointer; }
#responsesBody .response-detail dl { display: grid; grid-template-columns: minmax(8rem, 1fr) 3fr; gap: .2rem .8rem; font-size: .85rem; }
#responsesBody .response-detail dt { font-weight: 600; }
#responsesBody .response-detail dd { margin: 0; overflow-wrap: anywhere; }