/* 단추: 어두운 종이(장소 표시와 같은 재료)를 찢은 쪽지. 아이콘과 글자를 함께 쓴다 (오너 결정, 후보 C).
   먼저 누를 것 하나만 오른쪽 위 모서리에 테이프를 붙인다. 테이프는 찢는 효과가 걸린 쪽지 밖에 둔다 (js/ui/chip.js) */

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .5em 1em .46em .85em;
  border: 0;
  background: var(--ink-raised) url('../assets/img/paper-dark.webp') 0 0 / 400px 400px;
  color: var(--silver);
  font-family: var(--font-ko-serif);
  font-size: .88rem;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  rotate: var(--tilt, 0deg);
}
.chip:hover { color: #f1eee5; }
.chip:focus-visible { outline: 2px dashed var(--green-ink); outline-offset: 3px; }
.chip:disabled { opacity: .5; cursor: default; }
.chip--small { padding: .34em .8em .3em .65em; font-size: .76rem; }
.chip--main { color: #f1eee5; }

/* 쪽지마다 조금씩 다르게 기운다 */
:nth-child(3n + 1) > .chip, .chip:nth-child(3n + 1) { --tilt: -1.2deg; }
:nth-child(3n + 2) > .chip, .chip:nth-child(3n + 2) { --tilt: .9deg; }
:nth-child(3n) > .chip, .chip:nth-child(3n) { --tilt: -.5deg; }

.chip-wrap { position: relative; display: inline-block; }
.chip__tape {
  z-index: 1;
  pointer-events: none;
  top: -3px;
  right: -13px;   /* 오른쪽 위 모서리에 반쯤 걸쳐 붙인다. 단추는 보통 칸의 왼쪽 끝에 붙어 있어 왼쪽으로 삐져나오면 스크롤 칸에 잘린다 */
  width: 44px;
  height: 17px;
  rotate: 36deg;
  opacity: .82;   /* 그림자 없이, 반투명과 불투명 사이 (오너 결정) */
  filter: brightness(.84) sepia(.25);
}
/* 작은 단추에는 테이프도 작게 붙여 글자를 덜 가린다 */
.chip--small + .chip__tape { top: -5px; right: -14px; width: 33px; height: 13px; }

/* 아이콘: SVG를 가면으로 써서 글자색을 그대로 입는다 */
.ico {
  display: inline-block;
  flex: none;
  width: 1.35em;
  height: 1.35em;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.ico--seal-check { --icon: url('../assets/icons/seal-check.svg'); }
.ico--circle { --icon: url('../assets/icons/circle.svg'); }
.ico--check-circle { --icon: url('../assets/icons/check-circle.svg'); }
.ico--cards { --icon: url('../assets/icons/cards.svg'); }
.ico--pen-nib { --icon: url('../assets/icons/pen-nib.svg'); }
.ico--eraser { --icon: url('../assets/icons/eraser.svg'); }
.ico--retry { --icon: url('../assets/icons/arrow-counter-clockwise.svg'); }
.ico--caret-left { --icon: url('../assets/icons/caret-left.svg'); }
.ico--caret-right { --icon: url('../assets/icons/caret-right.svg'); }
.ico--note-pencil { --icon: url('../assets/icons/note-pencil.svg'); }
.ico--hand-pointing { --icon: url('../assets/icons/hand-pointing.svg'); }

/* 판 넘기기: 쪽지 없이 아이콘만 (종이 위 먹색) */
.flip { display: inline-grid; place-items: center; padding: 2px; border: 0; background: none; color: var(--paper-ink); font-size: 1.1rem; cursor: pointer; }
.flip:focus-visible { outline: 2px dashed var(--green-ink); outline-offset: 2px; }
.ico--hand-coins { --icon: url('../assets/icons/hand-coins.svg'); }

/* 고르는 쪽지 (서류철의 선택지·연결 고르기와 같은 모양): <label class="pick"><input type="checkbox|radio"><span>글</span></label>
   찢긴 가장자리와 고른 것의 그림자는 js/ui/tabs.js의 setupChoiceTabs가 붙인다 */
.picks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 4px; }
.pick input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }   /* 숨긴 칸이 넓게 잡혀 옆으로 밀리지 않게 */
.pick span { display: inline-block; padding: 6px 13px 5px; background: #cfcabd url('../assets/img/paper-light.webp') 0 0 / 300px 300px; background-blend-mode: multiply; font-family: var(--font-ko-serif); font-size: .9rem; color: var(--paper-ink-soft); transform: rotate(var(--tilt, 0deg)); cursor: pointer; }
.pick:nth-child(3n + 1) > span { --tilt: -1.5deg; }
.pick:nth-child(3n + 2) > span { --tilt: 1.2deg; }
.pick:nth-child(3n + 3) > span { --tilt: -.6deg; }
.pick input:checked + span { padding: 8px 15px 6px; background-color: var(--paper); background-blend-mode: normal; color: var(--paper-ink); font-weight: 700; }
.pick input:focus-visible + span { outline: 2px dashed var(--green-ink); outline-offset: 2px; }
.pick input:disabled + span { cursor: default; }
.picks--small .pick span { font-size: .8rem; padding: 5px 11px 4px; }
.picks--small .pick input:checked + span { padding: 6px 12px 5px; }