/* 앱 동작에 필요한 추가 규칙만. 디자인 파일(styles.css / salon.css)은 건드리지 않는다. */

/* 역방향 카드는 뒤집어 보여준다. 타로에서 방향은 의미의 일부라 그림도 같이 돌아야 한다. */
.deck-image.reversed{transform:rotate(180deg)}

/* .composer 바깥에서 쓰는 입력줄(기억 추가 등)도 가로로 차게 */
.composer-row>input{flex:1;min-width:0;background:#fffbf2;border:1px solid #d3bfa4;border-radius:7px;padding:12px 14px;color:inherit}

/* 상담 답변 안의 카드 썸네일 */
.message .card-selection{margin:0 0 14px;justify-content:flex-start;gap:10px}
.message .card-selection .tarot-card{width:74px}

@media(prefers-reduced-motion:no-preference){
  .message{animation:dm-in .25s ease-out}
  @keyframes dm-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* 뒷면 카드 고르기 */
.card-selection button.tarot-card{border:0;padding:0;background:transparent;cursor:pointer;
  transition:transform .18s,filter .18s}
.card-selection button.tarot-card:hover:not(:disabled){transform:translateY(-6px)}
.card-selection button.tarot-card:disabled{cursor:default}
.card-selection button.tarot-card:disabled:not(.picked){opacity:.4;filter:saturate(.6)}
#pick-count{display:block;margin-top:10px;text-align:center}

/* 카드 뒤집기 — 누른 자리에서 앞면이 드러난다 */
.tarot-card.flip{perspective:900px;background:transparent}
.flip-inner{position:relative;display:block;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.tarot-card.flip .flip-back,
.tarot-card.flip .flip-front{position:absolute;inset:0;width:100%;height:100%;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit}
.tarot-card.flip .flip-front{transform:rotateY(180deg)}
.tarot-card.flip .flip-front.reversed{transform:rotateY(180deg) rotate(180deg)}
.tarot-card.flip.opened .flip-inner{transform:rotateY(180deg)}
.tarot-card.flip.opened{outline:3px solid var(--gold);outline-offset:4px}
/* 뒤집힌 카드는 흐려지지 않게 — 고른 카드가 제일 잘 보여야 한다 */
.card-selection button.tarot-card:disabled.opened{opacity:1;filter:none}

@media(prefers-reduced-motion:reduce){
  .flip-inner{transition:none}
}