/* v1.52 선물 상자 — /gift/(static/gift.js)와 /my/ 상자(static/gift-box.js). 색은 style.css 변수만 쓴다(style.css는 고치지 않는다). */
#my-content > #gift-box { grid-column: 1 / -1; }

.gift-wrap { max-width: 760px; margin: 28px auto 0; }
.gift-wrap > .box, .gift-wrap #gift-view > .box { margin-bottom: 16px; }

/* 강아지 카드 — 원화를 그릴 수 없으면 이름 카드만 */
.gift-card { display: flex; align-items: center; gap: 20px; }
.gift-card canvas { flex: none; }
.gift-card > div { min-width: 0; }
.gift-pet-name { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.04em; line-height: 1.4; overflow-wrap: anywhere; }
.gift-pet-meta { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.gift-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.gift-tags li { background: var(--chip); border-radius: 999px; padding: 2px 10px; font-size: 12px; }

/* 상자 속 글 — 보낸 분이 직접 적은 글(몽글몬이 확인한 글이 아니다) */
.gift-h { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.gift-h + .gift-letter { margin-top: 0; }
.gift-block + .gift-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.gift-block > p { margin: 0; overflow-wrap: anywhere; }
.gift-block > .gift-h { margin-bottom: 6px; }
.gift-block > .gift-letter { margin-top: 0; }
.gift-block > .gift-note, .gift-block > .muted-line { margin-top: 8px; }
.gift-block > .btn { margin-top: 10px; }
#gift-keep-form button { white-space: nowrap; }
.gift-letter { margin: 8px 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--chip); border-radius: 0 6px 6px 0; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; word-break: keep-all; }
.gift-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; word-break: keep-all; }
.gift-warn { color: var(--warn); }
.gift-adopted-text { margin: 0; font-size: 15px; line-height: 1.8; word-break: keep-all; }

/* 받은 뒤 이렇게 열어요 */
.gift-steps { margin: 0 0 12px; padding-left: 22px; font-size: 14px; line-height: 1.8; word-break: keep-all; }
.gift-steps li + li { margin-top: 6px; }
.gift-steps .linklike { padding: 0; font-size: inherit; color: inherit; }

/* 상자에 담기 */
.gift-form label { display: block; margin: 14px 0 6px; font-size: 12px; font-weight: 600; }
.gift-form label:first-child { margin-top: 0; }
.gift-opt { color: var(--muted); font-weight: 400; }
.gift-form input, .gift-form textarea { width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); }
.gift-form textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
.gift-form input:focus, .gift-form textarea:focus { border-color: var(--accent); }
.gift-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.gift-primary, .gift-ghost { min-height: 44px; padding: 10px 16px; border-radius: 4px; font-size: 13px; }
.gift-primary { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.gift-ghost { border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.gift-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--chip); }

@media (max-width: 720px) {
  .gift-wrap { margin-top: 20px; }
  .gift-card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .gift-actions > button { flex: 1 1 140px; }
}