/* 담았습니다 창 — 자사몰 공통
 * ═══════════════════════════════════════════════════════════════════════
 * 담은 뒤에 무엇을 할지(계속 고를지 · 장바구니로 갈지)를 그 자리에서 묻는다.
 * 지나가는 알림(토스트)은 눌러 볼 새도 없이 사라져, 담고 나서 어디로 가야
 * 하는지를 손님이 스스로 찾아야 했다.
 *
 * 색은 자사몰 것을 쓴다 — 초록이 우리 기본 단추 색이다.
 * 값은 index.html 의 것을 그대로 쓰되, 그 변수를 안 들고 있는 화면
 * (상품 상세·목록은 tw.css 를 쓴다)에서도 같은 색이 나오게 기본값을 적는다.
 * ═══════════════════════════════════════════════════════════════════════ */
.cmwrap{
  --m-green:#17A548; --m-green-h:#128a3b; --m-ink:#1A1A1A; --m-body:#333;
  --m-gray:#666; --m-line:#E4E8F1; --m-line2:#D8DEE9;
  position:fixed;inset:0;z-index:80;display:none;
  align-items:center;justify-content:center;padding:20px}
.cmwrap.on{display:flex}
/* 뒤를 덮는다 — 뒤가 그대로 보이면 창이 화면 위에 떠 있다는 것이 안 읽힌다 */
.cmwrap .veil{position:absolute;inset:0;background:rgba(17,20,24,.42)}

.cmbox{position:relative;width:min(420px,100%);background:#fff;border-radius:16px;
  box-shadow:0 24px 64px rgba(0,0,0,.28);padding:34px 28px 26px;text-align:center}
/* 닫기 — 오른쪽 위. 손가락 과녁은 44px 로 두고 보이는 ×는 작게 둔다. */
.cmbox .x{position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;
  place-items:center;border:0;background:none;color:var(--m-gray);cursor:pointer;
  border-radius:50%;font-size:0}
.cmbox .x:hover{background:#F2F4F7;color:var(--m-ink)}
.cmbox .x svg{display:block}

.cmbox .ic{display:block;margin:0 auto 14px;color:var(--m-ink)}
.cmbox h2{margin:0;font-size:18px;font-weight:700;color:var(--m-ink);
  letter-spacing:-.01em;word-break:keep-all;line-height:1.5}
/* 무엇을 담았는지 — 한 줄. 이름이 길면 끊는다(창이 이름 때문에 늘어나지
   않아야 단추 자리가 늘 같은 곳에 있다). */
.cmbox p{margin:8px 0 0;font-size:13.5px;color:var(--m-gray);line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cmbox .btns{display:flex;gap:8px;margin-top:22px}
.cmbox .btns a,.cmbox .btns button{flex:1 1 0;min-height:46px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:8px;font-size:15px;
  font-weight:700;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s}
/* 계속 고르기가 왼쪽이다 — 대부분은 더 담는다. 오른쪽(눈이 마지막에 닿는
   자리)에는 다음 걸음인 장바구니를 둔다. */
.cmbox .btns .ghost{background:#fff;border:1px solid var(--m-line2);color:var(--m-body)}
.cmbox .btns .ghost:hover{border-color:var(--m-gray);color:var(--m-ink)}
.cmbox .btns .go{background:var(--m-green);border:1px solid var(--m-green);color:#fff}
.cmbox .btns .go:hover{background:var(--m-green-h);border-color:var(--m-green-h)}
.cmbox .btns a:focus-visible,.cmbox .btns button:focus-visible,
.cmbox .x:focus-visible{outline:2px solid var(--m-green);outline-offset:2px}

@media (max-width:420px){
  .cmbox{padding:30px 20px 22px}
  .cmbox h2{font-size:17px}
  /* 좁으면 단추를 위아래로 — 나란히 두면 글자가 두 줄로 접힌다 */
  .cmbox .btns{flex-direction:column-reverse}
}
@media (prefers-reduced-motion:no-preference){
  .cmwrap.on .cmbox{animation:cmin .16s ease-out}
  @keyframes cmin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}