/*
  약수부부 링크 허브 컴포넌트 v4
  값은 전부 tokens.css 변수에서 옵니다. 여기에는 hex를 쓰지 않습니다.
*/
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--c-outside); }
body {
  background: var(--c-outside);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-weight: var(--w-text);
  letter-spacing: var(--ls-text);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
img { display: block; max-width: 100%; }

/* 페이지 틀: 데스크톱에서는 가운데 모바일 폭 한 장 */
.ds-page {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  padding-bottom: calc(var(--h-float) + var(--sp-8) + var(--safe-bottom));
}
.ds-stack { display: grid; gap: var(--gap-block); padding: 0 var(--gutter); }
main > * + * { margin-top: var(--gap-section); }
main > .ds-profile + .ds-stack { margin-top: var(--sp-6); }

/* 상단: 공유 버튼만 */
.ds-top {
  display: flex; justify-content: flex-end;
  padding: calc(var(--sp-3) + var(--safe-top)) var(--sp-3) 0;
}
.ds-icon-btn {
  display: grid; place-items: center;
  width: var(--touch-min); height: var(--touch-min);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-press) var(--ease-out);
}

/* 프로필 */
.ds-profile { display: grid; justify-items: center; padding: 0 var(--gutter); text-align: center; }
.ds-avatar--empty { display: grid; place-items: center; font-size: var(--fs-head); font-weight: var(--w-head); color: var(--c-ink-muted); }
.ds-avatar {
  width: var(--avatar); height: var(--avatar);
  border-radius: 50%;
  object-fit: cover;
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  background: var(--c-sunk);
}
.ds-name { margin-top: var(--sp-5); font-size: var(--fs-name); font-weight: var(--w-head); letter-spacing: var(--ls-head); }
.ds-headline {
  margin-top: var(--sp-2);
  font-size: var(--fs-body);
  font-weight: var(--w-text);
  line-height: var(--lh-text);
  color: var(--c-ink-muted);
  word-break: keep-all;
}
.ds-social { display: flex; gap: var(--sp-1); margin-top: var(--sp-3); }
.ds-social a { display: grid; place-items: center; width: var(--touch-min); height: var(--touch-min); border-radius: var(--r-pill); }

/* 버튼: 흰 카드(기본), 먹색(주) */
.ds-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--h-btn);
  padding: var(--sp-3) 48px;
  border-radius: var(--r-btn);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--shadow-card);
  font-size: var(--fs-body);
  font-weight: var(--w-strong);
  line-height: var(--lh-tight);
  text-align: center;
  word-break: keep-all;
  transition: transform var(--t-press) var(--ease-out), opacity var(--t-fast) ease;
  touch-action: manipulation;
  user-select: none;
  width: 100%;
}
.ds-btn--primary { background: var(--c-ink); color: var(--c-on-ink); }
.ds-btn--primary::before {
  content: ""; position: absolute; left: 20px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent);
}
/* 등장 애니메이션(fill-mode both)이 opacity 를 1 로 덮으므로 흐림은 filter 로 겁니다 */
.ds-btn[data-pending], .ds-product[data-pending], .ds-tile[data-pending] { filter: opacity(0.5); }

/* 구역 */
.ds-section { padding: 0 var(--gutter); }
.ds-section-title {
  margin: 0 var(--sp-1) var(--sp-3);
  font-size: var(--fs-title);
  font-weight: var(--w-head);
  letter-spacing: var(--ls-head);
}
.ds-section-body { display: grid; gap: var(--gap-block); }

/* 상품 행 */
.ds-product {
  display: grid;
  grid-template-columns: var(--thumb) 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--h-product);
  padding: var(--sp-3);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-press) var(--ease-out);
  touch-action: manipulation;
}
.ds-product-thumb { width: var(--thumb); height: var(--thumb); border-radius: var(--r-thumb); background: var(--c-sunk); object-fit: cover; }
.ds-product-name { font-size: var(--fs-small); font-weight: var(--w-strong); line-height: var(--lh-text); word-break: keep-all; }
.ds-product-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: 2px; }
.ds-tag { font-size: var(--fs-meta); color: var(--c-ink-muted); }
.ds-tag + .ds-tag::before { content: "\00a0\00a0"; }
.ds-product-price { font-size: var(--fs-small); font-weight: var(--w-strong); white-space: nowrap; padding-right: var(--sp-1); }

/* 2열 타일 */
.ds-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-block); }
.ds-tile {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-press) var(--ease-out);
}
.ds-tile img, .ds-tile-empty { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-thumb); object-fit: cover; background: var(--c-sunk); }
.ds-tile span { font-size: var(--fs-small); font-weight: var(--w-strong); text-align: center; }

/* 제휴 고지, 구분선 */
.ds-disclosure { padding: 0 var(--sp-1); font-size: var(--fs-meta); line-height: var(--lh-text); color: var(--c-ink-muted); word-break: keep-all; }
.ds-divider { height: 0; margin-left: var(--gutter); margin-right: var(--gutter); border: 0; border-top: 1px solid var(--c-line); }

/* 광고 지면: 자리만 잡고 꺼 둡니다 */
.ds-ad { min-height: 96px; border-radius: var(--r-card); border: 1px dashed var(--c-line-strong); display: grid; place-items: center; font-size: var(--fs-meta); color: var(--c-ink-muted); }
.ds-ad[hidden] { display: none; }

/* 바닥 */
.ds-foot { margin-top: auto; padding: var(--sp-12) var(--gutter) 0; text-align: center; font-size: var(--fs-meta); color: var(--c-ink-muted); }

/* 오른쪽 아래 오픈카톡 */
.ds-float {
  position: fixed;
  right: max(var(--sp-4), calc((100vw - var(--max)) / 2 + var(--sp-4)));
  bottom: calc(var(--sp-4) + var(--safe-bottom));
  z-index: 10;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--h-float);
  padding: 0 var(--sp-5) 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-on-ink);
  font-size: var(--fs-small); font-weight: var(--w-strong);
  box-shadow: var(--shadow-float);
  transition: transform var(--t-press) var(--ease-out);
  touch-action: manipulation;
}
.ds-float svg { color: var(--c-accent); }
.ds-float[hidden] { display: none; }

/* 스크립트 전에는 공유 버튼 자리만 잡아 둡니다 */
.no-js [data-share] { visibility: hidden; }

/* 바텀 시트: 닫히면 hidden 이라 Tab 으로 들어가지 않습니다 */
.ds-sheet-wrap[hidden] { display: none; }
.is-sheet-open, .is-sheet-open body { overflow: hidden; }
.ds-scrim { position: fixed; inset: 0; z-index: 30; background: var(--c-scrim); opacity: 0; pointer-events: none; transition: opacity var(--t-sheet) var(--ease-out); }
.ds-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
  max-width: var(--max); margin: 0 auto;
  padding: var(--sp-3) var(--gutter) calc(var(--sp-6) + var(--safe-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--c-surface);
  box-shadow: var(--shadow-sheet);
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform var(--t-sheet) var(--ease-drawer);
}
.ds-sheet-grip { width: 40px; height: 5px; margin: 0 auto var(--sp-5); border-radius: var(--r-pill); background: var(--c-line-strong); }
.ds-sheet h2 { margin-bottom: var(--sp-5); font-size: var(--fs-head); font-weight: var(--w-head); letter-spacing: var(--ls-head); text-align: center; }
.is-sheet-open .ds-scrim { opacity: 1; pointer-events: auto; }
.is-sheet-open .ds-sheet { transform: none; }

/* 입력 */
.ds-field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ds-field label { font-size: var(--fs-small); font-weight: var(--w-strong); padding-left: var(--sp-1); }
.ds-input { height: 52px; padding: 0 var(--sp-4); border: 1px solid var(--c-line-strong); border-radius: var(--r-thumb); background: var(--c-bg); font: inherit; font-size: 16px; color: var(--c-ink); }
.ds-input:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 1px; }
.ds-check { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch-min); font-size: var(--fs-small); }
.ds-check input { width: 22px; height: 22px; accent-color: var(--c-ink); }
.ds-check a { text-decoration: underline; text-underline-offset: 3px; }
.ds-sheet .ds-btn { margin-top: var(--sp-3); box-shadow: none; }
.ds-sheet .ds-btn--primary::before { display: none; }

/* 토스트 */
.ds-toast {
  position: fixed; left: 50%;
  bottom: calc(var(--h-float) + var(--sp-8) + var(--safe-bottom));
  z-index: 40;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-on-ink);
  font-size: var(--fs-small);
  transform: translate(-50%, 8px); opacity: 0;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
  pointer-events: none;
}
.ds-toast.on { transform: translate(-50%, 0); opacity: 1; }

/* 누름 반응과 포커스 */
.ds-btn:active, .ds-float:active, .ds-product:active, .ds-tile:active, .ds-icon-btn:active { transform: scale(0.97); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .ds-btn:hover, .ds-product:hover, .ds-tile:hover { opacity: 0.88; }
}

/* 첫 방문 등장 */
.ds-reveal { animation: ds-rise var(--t-enter) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes ds-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ds-reveal { animation: ds-fade 200ms ease both; animation-delay: 0ms; }
  .ds-btn, .ds-float, .ds-product, .ds-tile, .ds-icon-btn { transition: opacity var(--t-fast) ease; }
  .ds-btn:active, .ds-float:active, .ds-product:active, .ds-tile:active, .ds-icon-btn:active { transform: none; opacity: 0.8; }
  .ds-sheet, .ds-scrim { transition: opacity var(--t-fast) ease; }
}

/* 바닥 개인정보 처리방침 링크, 신청 동의 안내 */
.ds-foot { display: grid; gap: var(--sp-2); justify-items: center; }
.ds-foot-link { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--sp-3); color: var(--c-ink-muted); font-size: var(--fs-meta); text-decoration: underline; text-underline-offset: 3px; }
.ds-consent-note { margin: var(--sp-1) var(--sp-1) var(--sp-2); font-size: var(--fs-meta); line-height: var(--lh-text); color: var(--c-ink-muted); word-break: keep-all; }

/* 주제 카드 2열 (리포트) */
.ds-tile--label {
  display: flex; align-items: flex-end;
  aspect-ratio: 16 / 10;
  padding: var(--sp-4);
}
.ds-tile--label span { font-size: var(--fs-body); font-weight: var(--w-head); letter-spacing: var(--ls-head); text-align: left; word-break: keep-all; }
.ds-tile--label::before {
  content: ""; position: absolute; top: var(--sp-4); left: var(--sp-4);
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent);
}
.ds-tile--label { position: relative; }
.ds-tile--label[data-soon]::before { background: var(--c-line-strong); }
.ds-tile--label[data-soon] span { color: var(--c-ink-faint); }
.ds-tiles--label { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-tile--label { min-width: 0; box-sizing: border-box; }
.ds-tile--label[data-pending] { filter: none; }
.ds-tile--label[data-soon] span { color: var(--c-ink-muted); }