/* shelf-keep-kit v3 — 완료창 보관 블록 + 꽂힘 팝업.
   호스트 격리: --sk-* 리터럴 토큰만 사용, 서비스 토큰은 마운트 시 주입.

   260820 v2: 팀 코드만으로 쓰는 사람에게는 [팀에 저장]이 위, [서재에 보관하기]가
   아래로 쌓인다(각 버튼 아래 설명 한 줄). 로그인 사용자는 한 버튼 그대로.

   260820 v3 (Marcus "UI는 PVH 버전으로"): 킷은 구조·터치타깃·접근성만 소유하고
   버튼의 시각 문법(채움색·radius·글자크기·굵기·테두리·그림자)은 호스트가 토큰으로
   주입한다. FAMILY.md §3에서 팔레트는 자유 슬롯이고, 세 소비자의 버튼 문법이 실제로
   다르기 때문이다(PVH radius 10px·13px·600 / habit-loop pill 999px·14px·650 /
   고객여정 velvet #8a2846). 킷이 한 가지 모양을 박으면 최소 한 서비스는 반드시 깨진다.

   v2까지의 결함: 주 CTA를 --sk-ink(글자색 토큰)로 칠해 어느 서비스에서든 "어두운
   잉크 덩어리"가 나왔다. PVH 실측 면대비 13.13:1 — 형제 버튼(4.75:1)의 2.8배.
   고객여정에서는 보관 버튼과 허브 백링크가 같은 #111527이라 "머무는 행동"과
   "떠나는 링크"가 같은 색이었다. v3에서 --sk-ink는 글자색 본래 역할로 돌아간다. */

.sk-block {
  /* 색 — 서비스 자유 슬롯. 기본값은 미배선을 드러내기 위한 중립값이며,
     소비자는 반드시 자기 주 액션색을 주입한다(verify-family-shelf-keep이 검사). */
  --sk-ink: #1e2a44;
  --sk-accent: #e8a33d;
  --sk-paper: #ffffff;
  --sk-line: rgba(30, 42, 68, 0.14);
  --sk-sub: #3f4a5c;               /* 보조 텍스트. 흰 종이·연한 틴트 위 모두 7.6:1 이상 */
  --sk-action: #2563eb;            /* 주 행동 채움 */
  --sk-action-on: #ffffff;         /* 그 위 글자. 코어가 실제 WCAG 대비로 계산해 주입 */
  --sk-action-hover: #1d4ed8;      /* 진한 단계. 아웃라인 버튼의 글자색도 겸한다 */
  /* 형태 — 호스트 버튼 문법 */
  --sk-radius: 10px;
  --sk-font-size: 0.875rem;
  --sk-font-weight: 650;
  --sk-border-width: 1px;
  --sk-shadow: none;

  /* 3.8.0 수평 rail 계약. 폭·수평 중앙정렬만 정본이 소유하고, 위아래 여백·카드 표면은
     호스트가 계속 소유한다. margin shorthand를 쓰면 서비스별 수직 리듬을 덮으므로 금지. */
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.sk-keep-btn,
.sk-team-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;               /* 가족 터치타깃 계약. 호스트 버튼이 더 낮아도 내리지 않는다 */
  padding: 10px 20px;
  border: var(--sk-border-width) solid transparent;
  border-radius: var(--sk-radius);
  background: var(--sk-action);
  color: var(--sk-action-on);
  box-shadow: var(--sk-shadow);
  font: inherit;
  font-size: var(--sk-font-size);
  font-weight: var(--sk-font-weight);
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.sk-keep-btn { border-color: var(--sk-action); }
.sk-team-btn { border-color: var(--sk-action); }

.sk-keep-btn:hover:not([disabled]),
.sk-team-btn:hover:not([disabled]) {
  background: var(--sk-action-hover);
  border-color: var(--sk-action-hover);
}
.sk-keep-btn:active:not([disabled]),
.sk-team-btn:active:not([disabled]) { transform: scale(0.97); }
.sk-keep-btn:focus-visible,
.sk-team-btn:focus-visible {
  outline: 2px solid var(--sk-action);
  outline-offset: 2px;
}
.sk-keep-btn[disabled],
.sk-team-btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

/* 자동 저장 안내: 버튼 아래 바탕 사실 한 줄. block 흐름이라 DOM 순서가 곧 자리다
   (v3 레이아웃 개편에 맞춰 order/flex 잔재를 걷어냈다). */
.sk-block .sk-autosave { margin-top: 10px; opacity: 0.85; }

.sk-desc {
  display: block;
  margin: 8px 0 0;
  color: var(--sk-sub);
  font-size: 0.875em;
  line-height: 1.55;
}

/* 게스트 두 갈래: [팀에 저장]+설명, [서재에 보관하기]+설명이 DOM 순서 그대로 쌓인다.
   v2의 order 재배치는 폐기했다 — block 흐름에서 DOM 순서가 이미 정답이다.
   :has() 같은 신형 선택자에 기대지 않는다(구형 웹뷰까지 그대로 실린다). */
.sk-desc + .sk-keep-btn { margin-top: 18px; }

/* 아웃라인 2차: 게스트의 [서재에 보관하기]. 같은 색상 계열, 채움 대신 테두리로 낮춘다.
   글자는 진한 단계(--sk-action-hover)를 써 연한 배경에서도 6:1 이상을 확보한다. */
.sk-keep-btn-secondary {
  background: transparent;
  border-color: var(--sk-action);
  color: var(--sk-action-hover);
  box-shadow: none;
}
.sk-keep-btn-secondary:hover:not([disabled]) {
  background: transparent;
  border-color: var(--sk-action-hover);
  box-shadow: inset 0 0 0 1px var(--sk-action-hover);
}

@media (prefers-reduced-motion: reduce) {
  .sk-keep-btn,
  .sk-team-btn { transition: none; }
  .sk-keep-btn:active:not([disabled]),
  .sk-team-btn:active:not([disabled]) { transform: none; }
}

/* 팝업: 가족 다이얼로그 중앙정렬 계약 (fixed; inset:0; margin:auto).
   다이얼로그는 <body> 직속으로 마운트되므로 .sk-block의 토큰이 닿지 않는다.
   토큰 기본값을 여기서 다시 선언하고, 코어가 서비스 색을 이 요소에 직접
   주입한다(--sk-accent/--sk-ink). */
.sk-dialog {
  --sk-ink: #1e2a44;
  --sk-accent: #e8a33d;
  --sk-accent-on: #23180a;
  --sk-paper: #ffffff;
  --sk-line: rgba(30, 42, 68, 0.14);
  --sk-sub: #3f4a5c;
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92vw, 380px);
  border: 0;
  border-radius: 16px;
  padding: 0;
  background: var(--sk-paper);
  color: var(--sk-ink);
  box-shadow: 0 24px 64px rgba(16, 24, 48, 0.28);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.sk-dialog::backdrop { background: rgba(16, 24, 48, 0.45); }

.sk-dialog-body { padding: 22px 22px 20px; text-align: center; }

.sk-anim {
  width: 240px;
  height: 180px;
  margin: 0 auto 4px;
}

.sk-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
}
.sk-sub {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: var(--sk-sub);
  line-height: 1.5;
}

.sk-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.sk-actions a,
.sk-actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
/* 강조 버튼: 밝은 앰버 계열이면 잉크 글자, 어두운 브랜드색이면 흰 글자.
   코어가 accent 밝기를 계산해 --sk-accent-on을 주입한다(대비 보장). */
.sk-go-my {
  background: var(--sk-accent);
  color: var(--sk-accent-on, #23180a);
  border: 0;
}
.sk-go-my:hover { filter: brightness(1.06); }
.sk-close {
  background: transparent;
  color: var(--sk-sub);
  border: 1px solid var(--sk-line);
}
.sk-close:hover { color: var(--sk-ink); }

/* 이름 확인 단계 (3.4.0). 보관 버튼을 누르면 같은 창이 먼저 이름을 들고 선다. */
.sk-name {
  margin: 2px 0 16px;
  text-align: left;
}
.sk-name-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sk-sub);
}
.sk-name-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--sk-line);
  border-radius: 10px;
  background: var(--sk-paper);
  color: var(--sk-ink);
  font: inherit;
  font-weight: 700;
}
.sk-name-input:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 1px;
}
.sk-name-hint {
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--sk-sub);
}
/* 확인 버튼은 사용자가 방금 누른 블록 버튼의 연장이다 — 말도 색도 그것을 되풀이한다.
   그래서 팝업의 액센트(--sk-accent)가 아니라 서비스 주 액션색(--sk-action)을 쓴다.
   팀 하우스처럼 액센트가 골드(큰 면적 금지)인 서비스에서 갈라지는 자리다. */
.sk-confirm {
  background: var(--sk-action, #2563eb);
  color: var(--sk-action-on, #ffffff);
  border: 0;
}
.sk-confirm:hover { background: var(--sk-action-hover, #1d4ed8); }

/* 단계 전환은 [hidden]으로 한다. 위의 .sk-actions 규칙이 display를 켜 두므로
   이 한 줄이 없으면 결과 화면에 확인 버튼이 그대로 남는다. */
.sk-dialog [hidden] { display: none; }

@media (max-width: 360px) {
  .sk-anim { width: 200px; height: 150px; }
}

/* ---- 보낸 뒤의 이름칸 (3.6.0) ----
   창은 하나다. 이름칸은 결과 화면에도 남아 무엇을 보냈는지 계속 보여 주되, 더 고칠
   수 없다는 것이 눈에 보여야 한다 — 채움을 낮추고 글자를 보조색으로 내린다. */
.sk-name-input[readonly] {
  background: rgba(16, 24, 48, 0.04);
  color: var(--sk-sub);
  cursor: default;
}
.sk-name-input[readonly]:focus-visible { outline-color: var(--sk-line); }

/* ---- 기다리는 동안 (3.7.0) ----
   보관 레인은 왕복이 여러 번이라 몇 초가 걸릴 수 있다. 진행률은 알 수 없으므로
   꾸며내지 않고 "움직이고 있다"만 말한다. 멈춘 화면은 고장으로 읽힌다. */
.sk-progress {
  height: 4px; margin: 0 0 14px; border-radius: 999px;
  background: var(--sk-line); overflow: hidden;
}
.sk-progress span {
  display: block; width: 40%; height: 100%; border-radius: 999px;
  background: var(--sk-action, #2563eb);
  animation: sk-progress-slide 1.4s ease-in-out infinite;
}
@keyframes sk-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
/* 움직임을 줄여 달라고 한 사람에게는 흐르지 않고 자리만 지킨다. */
@media (prefers-reduced-motion: reduce) {
  .sk-progress span { animation: none; width: 100%; opacity: 0.45; }
}

/* 보내는 중의 확인 버튼: 눌리지 않는다는 것이 눈에 보여야 한다. */
.sk-confirm:disabled { opacity: 0.5; cursor: default; }
.sk-confirm:disabled:hover { background: var(--sk-action, #2563eb); }