/* SCREEN-1 · 결제 방법 선택 — S1 에이전트 전용 CSS (Figma 5543-1932)
 * 공용 토큰/카드/버튼은 checkout.css 참고. 여기엔 .ck-s1* 스타일만. */

.ck-s1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px; /* spacing/lg */
  width: 100%;
  padding: 24px 0 40px;
}

/* ---- 제목 ---- */
.ck-s1-title {
  width: 100%;
  max-width: 520px;
  margin: 0;
  padding-bottom: 8px; /* spacing/xs */
  color: var(--text-default, #27262E);
  font-size: 30px;       /* text/heading/xl */
  line-height: 39px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: left;   /* 카드 왼쪽 끝에 맞춰 좌측 정렬 (Figma 5543-1932) */
}

/* ---- 카드 + 푸터 리스트 ---- */
.ck-s1-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px; /* spacing/sm — 카드 사이 간격 */
  width: 100%;
  max-width: 520px;
}

/* ---- 선택 카드 (버튼) ---- */
.ck-s1-method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px; /* spacing/md */
  width: 100%;
  margin: 0;
  padding: 32px 24px; /* py spacing/xl · px spacing/lg */
  text-align: left;
  background: var(--bg-default, #FFFFFF);
  border: 1px solid var(--border-assistive, #F0F2F6);
  border-radius: 24px; /* rounded/lg */
  box-shadow: var(--ck-shadow);
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  font-family: inherit;
}
.ck-s1-method:hover {
  border-color: var(--border-neutral, #CACBD8);
  box-shadow: 0px 4px 8px 0px rgba(28, 27, 31, 0.10), 0px 0px 6px 0px rgba(28, 27, 31, 0.04);
}
.ck-s1-method:active {
  transform: translateY(1px);
}
.ck-s1-method:focus-visible {
  outline: 2px solid var(--ck-primary, #6758FF);
  outline-offset: 2px;
}

/* 아이콘 */
.ck-s1-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ck-s1-method-icon svg { display: block; }

/* 타이틀 + 뱃지 줄 */
.ck-s1-method-headrow {
  display: flex;
  align-items: center;
  gap: 8px; /* spacing/xs */
  width: 100%;
}
.ck-s1-method-title {
  color: var(--text-default, #27262E);
  font-size: 24px;        /* text/heading/lg */
  line-height: 31.2px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

/* 본문 설명 */
.ck-s1-method-desc {
  color: var(--text-neutral, #5D5E69);
  font-size: 13px;        /* text/body/sm/m */
  line-height: 18.2px;
  font-weight: 500;
}

/* ---- 뱃지(Chip) ---- */
.ck-s1-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;        /* chip/height/sm */
  padding: 0 6px;          /* spacing/2xs */
  border-radius: 6px;      /* chip/radius/sm */
  border: 1px solid transparent;
  background: var(--bg-default, #FFFFFF);
  font-size: 11px;         /* text/caption/md/sb */
  line-height: 15.4px;
  font-weight: 600;
  white-space: nowrap;
}
.ck-s1-chip--brand {
  border-color: var(--border-strong, #A49BFF);
  color: var(--text-strong, #5748F2);
}
.ck-s1-chip--neutral {
  border-color: var(--border-neutral, #CACBD8);
  color: var(--text-neutral, #5D5E69);
}

/* ---- 푸터 안내(Info Card) ---- */
.ck-s1-docs {
  display: flex;
  align-items: center;
  gap: 4px; /* spacing/3xs */
  width: 100%;
  padding: 16px; /* spacing/md */
  background: var(--bg-alternative, #F0F2F6);
  border-radius: 8px; /* rounded/sm */
}
.ck-s1-docs-icon {
  flex: 0 0 auto;
  display: block;
}
.ck-s1-docs-text {
  flex: 1 1 0;
  min-width: 0;
  color: var(--text-neutral, #5D5E69);
  font-size: 12px;        /* text/caption/lg */
  line-height: 16.8px;
  font-weight: 500;
}
.ck-s1-docs-link {
  flex: 0 0 auto;
  color: var(--text-link, #0D94FF);
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 500;
  text-decoration: underline;
  white-space: nowrap;
}
.ck-s1-docs-link:hover { opacity: 0.85; }

/* ---- 반응형 (가벼운 모바일 대응) ---- */
@media (max-width: 560px) {
  .ck-s1-title { font-size: 24px; line-height: 31px; }
  .ck-s1-method { padding: 24px 20px; }
  .ck-s1-method-title { font-size: 22px; }
  .ck-s1-docs { flex-wrap: wrap; }
}