/* 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; /* 정렬은 호스트에서 상속한다. 중앙 카드면 중앙, 좌측 흐름이면 좌측. :has() 없이 정렬을 따라가는 유일한 방법이라 block + inline-flex 조합을 쓴다. */ display: block; text-align: inherit; 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). 다이얼로그는 직속으로 마운트되므로 .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); } @media (max-width: 360px) { .sk-anim { width: 200px; height: 150px; } }