/* cardnode 참가자 화면 스타일 — refnode 시제품 디자인을 기준으로 맞춤.
   종이 카드를 책상에 놓고 상자에 담는 행위를 옮긴 것이다(03번).
   1280×800 에서 카드 12장과 상자가 한 화면에 들어와야 한다(B-7·AR-12). */

:root {
  --ink: #1a1a1a;
  --mute: #666666;
  --ink-soft: var(--mute);
  --line: #d8d8d8;
  --bg: #fafaf8;
  --sel: #2b5faa;
  --soft: #eef3fa;
  --ok: #2e7d4f;
  --warn: #a05a2c;

  /* 호환 변수 */
  --accent: var(--sel);
  --accent-soft: var(--soft);
  --desk: #f2eee4;
  --desk-border: #e3ddcd;
  --paper: #ffffff;
  --box: #fdfcf9;
  --box-border: #d6cfbe;
  --box-top: #c4baa2;

  --shadow: 0 1px 1px rgba(60, 50, 30, 0.10), 0 3px 7px rgba(60, 50, 30, 0.055);
  --shadow-lift: 0 10px 20px rgba(40, 60, 100, 0.22);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

#app, .wrap {
  max-width: 1264px;
  margin: 0 auto;
  padding: 16px 20px 50px;
}

h1 { font-size: 20px; margin: 0 0 6px; font-weight: 700; color: var(--ink); }
h2 { font-size: 17px; margin: 0 0 8px; font-weight: 600; color: var(--ink); }
h3 { font-size: 14.5px; margin: 18px 0 6px; font-weight: 600; color: var(--ink); }
p { margin: 0 0 8px; }
.lead { white-space: pre-wrap; line-height: 1.65; }
.sub, .muted { color: var(--mute); font-size: 13px; margin-bottom: 16px; }
.hint { font-size: 12.5px; color: #7a7466; margin-top: 6px; }
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
  font-size: 12.5px;
  background: #f5f4ef;
  padding: 12px 14px;
  border-radius: 6px;
  line-height: 1.5;
  border: 1px solid #e8e3d8;
}

.step { display: none; }
.step.on { display: block; }

/* 진행 막대 — 단계 수 및 화면 표시 */
.bar { display: flex; gap: 6px; margin: 4px 0 16px; }
.bar span {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  transition: background .15s;
}
.bar span.on { background: var(--sel); }

.bar div { flex: 1; font-size: 11.5px; color: #999; text-align: center; }
.bar div i { display: block; height: 5px; background: var(--line); border-radius: 3px; margin-bottom: 5px; }
.bar div.done i { background: var(--sel); }
.bar div.done { color: #6b7f9c; }
.bar div.now i { background: #8fb0dd; }
.bar div.now { color: var(--sel); font-weight: 600; }

/* 패널 */
.card-panel, .panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(60, 50, 30, 0.04);
}

.todo {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--soft);
  border-radius: 7px;
  padding: 12px 14px;
  margin: 0 0 16px;
  font-size: 13.8px;
}
.todo b { white-space: nowrap; color: var(--sel); }
.todo .t { margin-left: auto; white-space: nowrap; color: #6b7f9c; font-size: 12.5px; }

.note {
  background: #fbf7ea;
  border-left: 3px solid #d9b45a;
  padding: 10px 14px;
  border-radius: 0 5px 5px 0;
  font-size: 13.5px;
  margin: 12px 0;
  line-height: 1.55;
  color: #4a3e20;
}

.resume {
  background: #eef7f0;
  border: 1px solid #bfe0c8;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 14px;
}

.highlight {
  background: #fff6d8;
  border-color: #e5c766;
}

/* 책상 — 아직 집지 않은 카드가 흩어져 있는 자리 */
.desk {
  background: var(--desk);
  border: 1px solid var(--desk-border);
  border-radius: 10px;
  padding: 13px 13px 8px;
  margin-bottom: 16px;
  transition: .15s;
  position: relative;
  min-height: 68px;
}
.desk.hot, .desk.over {
  background: #eaf0f8;
  border-color: var(--sel);
}
.desk .lbl, .desk-title {
  font-size: 11.5px;
  color: #8a8474;
  margin: -3px 0 9px;
  letter-spacing: .02em;
}
.desk .tip {
  position: absolute;
  right: 14px;
  top: 9px;
  font-size: 11.5px;
  color: var(--sel);
  background: #fff;
  border: 1px solid #c8d8ee;
  border-radius: 14px;
  padding: 3px 10px;
}
.desk-cards, .pool {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

/* 카드 */
.card {
  background: #fff;
  border: 1px solid #ddd8cc;
  border-radius: 5px;
  padding: 8px 10px;
  width: 196px;
  font-size: 12.5px;
  line-height: 1.45;
  cursor: grab;
  user-select: none;
  box-shadow: var(--shadow);
  transition: transform .13s, box-shadow .13s, border-color .13s;
}
.card:hover { border-color: #b8ae95; }
.desk .card:nth-child(3n) { transform: rotate(-0.8deg); }
.desk .card:nth-child(3n + 1) { transform: rotate(0.9deg); }

.card.sel, .card.picked {
  cursor: grabbing;
  transform: scale(1.045) rotate(0deg) !important;
  border-color: var(--sel);
  box-shadow: var(--shadow-lift);
  position: relative;
  z-index: 9;
}
.card.in-box, .box .card, .bin .card {
  width: 100%;
  font-size: 11.4px;
  padding: 7px 8px;
  margin-bottom: 5px;
  transform: none !important;
  box-shadow: 0 1px 1px rgba(60, 50, 30, .09);
  border-radius: 4px;
}

/* 상자 — 위가 열려 있고 카드가 그 안에 가지런히 놓인다 */
.boxes, .bins {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: stretch;
}
.box, .bin {
  background: var(--box);
  border: 1px solid var(--box-border);
  border-top: 4px solid var(--box-top);
  border-radius: 3px 3px 9px 9px;
  padding: 10px 9px 8px;
  width: 206px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: inset 0 7px 11px -9px rgba(80, 65, 35, .5);
  transition: .15s;
}
.box.over, .box.hot, .bin.hot {
  border-color: var(--sel);
  border-top-color: var(--sel);
  background: #f4f8fd;
}
.box.hold {
  border-top-color: #a89f8c;
}
.box-title, .bin h4 .bt {
  display: block;
  font-size: 13.5px;
  color: #3b372c;
  font-weight: 600;
  margin-bottom: 3px;
  line-height: 1.4;
}
.box-def, .bin h4 .bd {
  display: block;
  font-size: 10.8px;
  color: #8a8373;
  line-height: 1.4;
  margin-bottom: 4px;
}
.box-cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.box-empty, .bin .empty {
  font-size: 11px;
  color: #b3ab98;
  text-align: center;
  padding: 14px 4px;
  white-space: pre-line;
  line-height: 1.4;
}
.box input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: 11.5px;
  padding: 4px 6px;
  border: 1px solid #c9d6ea;
  border-radius: 4px;
  margin-top: 4px;
  background: #fff;
  transition: border-color .15s;
}
.box input[type="text"]:focus {
  outline: none;
  border-color: var(--sel);
  box-shadow: 0 0 0 1px var(--sel);
}
.box-del {
  align-self: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #9a927e;
  padding: 0 2px;
  transition: color .15s;
}
.box-del:hover {
  color: #c0392b;
}

.add-box {
  align-self: flex-start;
  min-width: 130px;
  height: 42px;
  padding: 0 16px;
  border: 1.5px dashed #b9b2a3;
  border-radius: 21px;
  background: #fff;
  color: #666;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px 0;
  transition: all .15s;
}
.add-box:hover {
  border-color: var(--sel);
  color: var(--sel);
  background: #f0f5fd;
  box-shadow: 0 2px 6px rgba(43, 95, 170, 0.12);
}

/* 아래 단추와 안내 */
.actions, .act {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}
button {
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 9px 16px;
  transition: .15s;
}
button.go, button.primary {
  background: var(--sel);
  color: #fff;
  border: 1px solid var(--sel);
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
button.go:hover:not(:disabled), button.primary:hover:not(:disabled) {
  background: #234f90;
  border-color: #234f90;
}
button.go:disabled, button.primary[disabled], button.primary:disabled {
  background: #c5cfdc;
  border-color: #c5cfdc;
  color: #fff;
  cursor: not-allowed;
}
button.ghost {
  color: var(--mute);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
}
button.ghost:hover {
  background: #f8f8f6;
  border-color: #bbb;
  color: var(--ink);
}
.lock, .why {
  font-size: 13px;
  color: var(--warn);
}
.lock.done, .why.ok {
  color: var(--ok);
}

/* 설문 및 문항 */
.q {
  border-top: 1px solid var(--line);
  padding: 13px 0;
  margin-bottom: 0;
}
.q:first-child { border-top: 0; }
.q > label, .q p {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}
.q input[type="text"] {
  width: 100%;
  max-width: 480px;
  font: inherit;
  font-size: 13.5px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.q input[type="text"]:focus {
  outline: none;
  border-color: var(--sel);
  box-shadow: 0 0 0 2px rgba(43, 95, 170, .15);
}
.q textarea, textarea {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  resize: vertical;
  min-height: 76px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.q textarea:focus, textarea:focus {
  outline: none;
  border-color: var(--sel);
  box-shadow: 0 0 0 2px rgba(43, 95, 170, .15);
}

/* 선택지 */
.choices, .opts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0;
}
.choices label, .opts label {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13.5px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  transition: border-color .15s, background .15s, color .15s;
}
.choices label:hover, .opts label:hover {
  border-color: #b8ae95;
}
.choices label:has(input:checked), .opts label:has(input:checked) {
  border-color: var(--sel);
  background: #f6f9ff;
  color: var(--sel);
  font-weight: 600;
}
.choices input, .opts input {
  accent-color: var(--sel);
  margin: 0;
}

/* 시작 화면 */
.consent label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-top: 1px solid #eee;
  font-size: 14px;
  cursor: pointer;
}
.consent label:first-child { border-top: 0; }
.consent input {
  margin-top: 5px;
  flex: none;
  accent-color: var(--sel);
}

.prof { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; margin-top: 6px; }
.prof .f { font-size: 13.5px; }
.prof .f p { margin: 0 0 5px; font-weight: 600; font-size: 13px; }
.prof .f.wide { grid-column: 1/-1; }
.prof input[type=text] {
  width: 100%;
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips label {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
  font-size: 13px;
  background: #fff;
  transition: .15s;
}
.chips input { display: none; }
.chips label:has(input:checked) {
  border-color: var(--sel);
  background: #f0f5fd;
  color: var(--sel);
  font-weight: 600;
}

.plan { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 10px 0 4px; }
.plan div { background: #f5f4ef; border-radius: 6px; padding: 8px 6px; text-align: center; font-size: 12.5px; }
.plan div b { display: block; font-size: 11px; color: #8a8474; font-weight: 500; margin-top: 2px; }

.scale { display: flex; gap: 6px; align-items: center; margin: 5px 0 3px; flex-wrap: wrap; }
.scale b { font-size: 13px; min-width: 190px; font-weight: 600; }
.scale label {
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 9px;
  background: #fff;
}
.scale label:has(input:checked) {
  border-color: var(--sel);
  background: #f6f9ff;
  font-weight: 600;
  color: var(--sel);
}
.scale input { display: none; }
.scale .lo, .scale .hi { font-size: 11px; color: #999; }

.case {
  background: #fbfbf9;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px 14px;
  margin: 10px 0;
}
.opt {
  font-size: 12px;
  color: #7a7466;
  background: #f3f1ea;
  border-radius: 10px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* 확인 화면 상세 (RW-3) */
.confirm-block {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.confirm-block:first-of-type {
  border-top: 0;
}
.confirm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.confirm-title {
  font-size: 15px;
  font-weight: 700;
  color: #3b372c;
  margin: 0;
}
.confirm-note {
  font-size: 12.5px;
  color: #8a8474;
}
.confirm-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fafaf8;
  border: 1px solid #e8e3d8;
  border-radius: 6px;
  padding: 12px 14px;
}
.confirm-item {
  display: flex;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
.confirm-k {
  font-weight: 600;
  color: #555;
  min-width: 140px;
  flex-shrink: 0;
}
.confirm-v {
  color: var(--ink);
  flex: 1;
  word-break: break-word;
}
.confirm-empty {
  color: #999;
  font-style: italic;
}

/* 관리자 화면 테이블 */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
}
th {
  text-align: left;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--mute);
  border-bottom: 2px solid var(--line);
  font-weight: 600;
}
td {
  padding: 6px 8px;
  font-size: 13px;
  border-top: 1px solid #e6e1d8;
}

@media (max-width: 900px) {
  #app, .wrap { padding: 12px 14px 40px; }
  .pool { grid-template-columns: repeat(2, 1fr); }
  .card { width: 100%; }
  .boxes, .bins { grid-template-columns: 1fr 1fr; }
  .box, .bin, .add-box { width: 100%; }
  .prof { grid-template-columns: 1fr; }
  .plan { grid-template-columns: repeat(3, 1fr); }
}