/* ============================================================
   BLNK Design System v3
   토스 DNA 기반 — 접근성, 모션, 타이포, 인터랙션 완전 정비
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ── RESET ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 16px;
  background: #fff;
  color: #191F28;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
input, textarea, select { font-family: inherit; }

/* 텍스트 선택 색상 */
::selection {
  background: rgba(49, 130, 246, 0.18);
  color: #0D1117;
}

/* 스크롤바 (데스크탑) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D6DB; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #B0B8C1; }

/* ── TOKENS ───────────────────────────────────────────────────── */
:root {
  /* Brand */
  --blue:          #3182F6;
  --blue-dark:     #1B64DA;
  --blue-deeper:   #0040C8;
  --blue-dim:      #EBF3FF;
  --blue-dim2:     #D0E4FF;

  /* Grays — Toss Scale */
  --gray-50:  #FAFBFC;
  --gray-100: #F2F4F6;
  --gray-150: #ECEEF0;
  --gray-200: #E5E8EB;
  --gray-300: #D1D6DB;
  --gray-400: #B0B8C1;
  --gray-500: #8B95A1;
  --gray-600: #6B7684;
  --gray-700: #4E5968;
  --gray-800: #333D4B;
  --gray-900: #191F28;
  --navy:     #0D1117;

  /* Semantic Colors */
  --red:    #F04452;
  --green:  #03B26C;
  --amber:  #D97700;
  --purple: #5856D6;

  /* Status — 노출 상태 */
  --strong-color:  #E62E5C;   --strong-bg:  rgba(230,46,92,0.08);
  --good-color:    #0062CC;   --good-bg:    rgba(0,98,204,0.08);
  --weak-color:    #D97700;   --weak-bg:    rgba(217,119,0,0.08);
  --missing-color: #6B7684;   --missing-bg: rgba(107,118,132,0.08);
  --pending-color: #5856D6;   --pending-bg: rgba(88,86,214,0.08);
  --expired-color: #8B95A1;   --expired-bg: rgba(139,149,161,0.08);

  /* Text */
  --text-primary:   #191F28;
  --text-secondary: #4E5968;
  --text-tertiary:  #8B95A1;
  --text-disabled:  #B0B8C1;
  --text-inverse:   #FFFFFF;

  /* Surface */
  --surface:        #FFFFFF;
  --surface-subtle: #FAFBFC;
  --surface-dim:    #F2F4F6;
  --border:         #E5E8EB;
  --border-strong:  #D1D6DB;
  --border-focus:   rgba(49,130,246,0.5);

  /* Radius */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-3xl:  28px;
  --r-pill: 9999px;

  /* Shadow */
  --shadow-xs: 0 1px 4px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl: 0 16px 52px rgba(0,0,0,0.13);
  --shadow-blue-sm: 0 2px 8px rgba(49,130,246,0.28);
  --shadow-blue-md: 0 4px 18px rgba(49,130,246,0.36);
  --shadow-blue-lg: 0 8px 32px rgba(49,130,246,0.42);

  /* Spacing */
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px;  --sp-8:32px; --sp-10:40px;
  --sp-12:48px;--sp-16:64px; --sp-20:80px;

  /* Easing — Toss Spring */
  --ease:        cubic-bezier(0.4,0,0.2,1);
  --ease-out:    cubic-bezier(0,0,0.2,1);
  --ease-spring: cubic-bezier(0.16,1,0.3,1);
  --ease-back:   cubic-bezier(0.34,1.56,0.64,1);

  /* Duration */
  --t-fast:  120ms;
  --t-base:  200ms;
  --t-slow:  320ms;
  --t-modal: 380ms;

  /* Z-index */
  --z-base:    1;
  --z-sticky: 100;
  --z-nav:    200;
  --z-modal:  500;
  --z-toast:  900;
  --z-splash: 9999;
}

/* ── NAV ──────────────────────────────────────────────────────── */
.nav, .top-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: 62px;
  display: flex;
  align-items: center;
  padding: 0 32px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(28px) saturate(220%);
  -webkit-backdrop-filter: blur(28px) saturate(220%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background var(--t-slow) var(--ease);
}
.nav-inner, .blnk-nav-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav.scrolled, .top-nav.scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 4px 20px rgba(49,130,246,0.06);
}

/* ── LOGO ─────────────────────────────────────────────────────── */
.nav-logo, .blnk-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: var(--text-primary);
  text-decoration: none;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-logo-mark, .blnk-logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(145deg,#5BA8FF 0%,#2B6FD4 45%,#003CAD 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 2px 8px rgba(49,130,246,0.32);
  flex-shrink: 0;
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.nav-logo:hover .nav-logo-mark,
.blnk-logo:hover .blnk-logo-mark {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 4px 16px rgba(49,130,246,0.42);
  transform: scale(1.05);
}
.nav-logo-text, .blnk-logo-text { letter-spacing: -0.055em; }
.dot, .nav-logo-text .dot, .blnk-logo-text .dot {
  background: linear-gradient(135deg, #3182F6, #0040C8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── NAV PILLS ────────────────────────────────────────────────── */
.nav-pill, .nav-community {
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
}
.nav-pill:active, .nav-community:active { transform: scale(0.95); }
.nav-pill-ghost, .nav-community {
  background: rgba(49,130,246,0.06);
  color: var(--text-secondary);
}
.nav-pill-ghost:hover, .nav-community:hover {
  background: rgba(49,130,246,0.10);
  color: var(--text-primary);
}
.nav-pill-primary {
  background: linear-gradient(145deg,#5BA8FF 0%,#2B6FD4 45%,#003CAD 100%);
  color: #fff;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 2px 8px rgba(49,130,246,0.32);
}
.nav-pill-primary:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 4px 16px rgba(49,130,246,0.42);
  transform: translateY(-1px);
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.nav-user-pill {
  height: 34px;
  padding: 0 14px 0 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg,#EBF3FF,#DBEAFE);
  border: 1px solid rgba(49,130,246,0.15);
  color: #1B64DA;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.nav-user-pill:hover {
  background: linear-gradient(135deg,#DBEAFE,#C7DFFF);
  color: #1B64DA;
}
.nav-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(145deg,#5BA8FF 0%,#2B6FD4 45%,#003CAD 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), 0 1px 4px rgba(49,130,246,0.28);
}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -0.02em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    transform var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.btn-shimmer::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: shimmer 2.8s ease-in-out infinite;
}
@keyframes shimmer { 0% { left: -100%; } 60%, 100% { left: 120%; } }

.btn-primary {
  background: linear-gradient(145deg,#5BA8FF 0%,#2B6FD4 45%,#003CAD 100%);
  color: #fff;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 2px 8px rgba(49,130,246,0.32);
}
.btn-primary:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 4px 18px rgba(49,130,246,0.42);
  transform: translateY(-1px);
}
.btn-primary:active { transform: scale(0.97) translateY(0); box-shadow: none; }

.btn-primary-gradient {
  background: linear-gradient(145deg,#5BA8FF 0%,#2B6FD4 45%,#003CAD 100%);
  color: #fff;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 2px 8px rgba(49,130,246,0.32);
}
.btn-primary-gradient:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 4px 18px rgba(49,130,246,0.42);
  transform: translateY(-2px);
}

.btn-secondary {
  background: rgba(49,130,246,0.07);
  color: #1B64DA;
  border: 1px solid rgba(49,130,246,0.12);
}
.btn-secondary:hover {
  background: rgba(49,130,246,0.11);
  border-color: rgba(49,130,246,0.20);
}

.btn-ghost {
  background: rgba(0,0,0,0.04);
  color: var(--text-secondary);
}
.btn-ghost:hover { background: rgba(0,0,0,0.07); color: var(--text-primary); }

.btn-outline {
  background: var(--surface);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

.btn-danger {
  background: transparent;
  color: var(--red);
  border: 1.5px solid rgba(240,68,82,0.2);
}
.btn-danger:hover { background: rgba(240,68,82,0.05); border-color: rgba(240,68,82,0.4); }

/* 소셜 로그인 버튼 */
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.02em;
  cursor: pointer;
  border: none;
  transition: all var(--t-base) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.social-btn:active { transform: scale(0.98); }
.btn-kakao { background: #FEE500; color: #191919; }
.btn-kakao:hover { background: #F5DC00; }
.btn-google { background: #fff; color: #191F28; border: 1.5px solid var(--border); }
.btn-google:hover { background: var(--gray-50); border-color: var(--border-strong); }
.btn-pay {
  background: linear-gradient(145deg,#5BA8FF 0%,#2B6FD4 45%,#003CAD 100%);
  color: #fff;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.28), 0 2px 8px rgba(49,130,246,0.32);
}
.btn-pay:hover {
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.28), 0 4px 16px rgba(49,130,246,0.42);
}

/* Sizes */
.btn-sm   { height: 34px; padding: 0 14px; font-size: 13px; border-radius: var(--r-pill); }
.btn-md   { height: 42px; padding: 0 20px; font-size: 14px; }
.btn-lg   { height: 56px; padding: 0 36px; font-size: 17px; border-radius: var(--r-pill); }
.btn-pill { border-radius: var(--r-pill) !important; }
.btn-full { width: 100%; }

/* ── FORM INPUT ───────────────────────────────────────────────── */
.blnk-input {
  width: 100%;
  height: 52px;
  padding: 0 var(--sp-4);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 16px;
  font-family: inherit;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  outline: none;
  transition:
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
  -webkit-appearance: none;
}
.blnk-input::placeholder { color: var(--text-disabled); }
.blnk-input:hover:not(:focus) { border-color: var(--border-strong); }
.blnk-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(49,130,246,0.12);
}

/* ── 검색바 ───────────────────────────────────────────────────── */
.search-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  padding: 6px 6px 6px 20px;
  gap: 10px;
  transition:
    border-color var(--t-slow) var(--ease),
    box-shadow var(--t-slow) var(--ease);
}
.search-card:focus-within {
  border-color: rgba(49,130,246,0.45);
  box-shadow: 0 0 0 4px rgba(49,130,246,0.10), var(--shadow-md);
}
.search-icon {
  color: var(--blue);
  flex-shrink: 0;
  opacity: 0.7;
  display: flex;
  align-items: center;
  line-height: 1;
}
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  padding: 0;
  height: 48px;
  line-height: 48px;
  min-width: 0;
  -webkit-appearance: none;
}
.search-input::placeholder { color: #C4CAD2; }
.search-btn {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  height: 44px;
  padding: 0 28px;
  align-self: center;
  background: linear-gradient(145deg,#5BA8FF 0%,#2B6FD4 45%,#003CAD 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 2px 8px rgba(49,130,246,0.32);
  -webkit-tap-highlight-color: transparent;
  transition: all var(--t-slow) var(--ease-spring);
}
.search-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: shimmer 2.5s ease-in-out infinite;
}
.search-btn:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 4px 18px rgba(49,130,246,0.42);
  transform: translateY(-2px);
}
.search-btn:active { transform: scale(0.97) translateY(0); }

/* ── CARD ─────────────────────────────────────────────────────── */
.blnk-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}
.blnk-card-border {
  background: var(--surface);
  border-radius: var(--r-xl);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-6);
}
.blnk-card-accent {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
  position: relative;
  overflow: hidden;
  transition:
    box-shadow var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease-spring);
}
.blnk-card-accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,#5BA8FF,#1B64DA,#003CAD);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-spring);
}
.blnk-card-accent:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.blnk-card-accent:hover::before { transform: scaleX(1); }

/* ── BADGE ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
  transition: transform var(--t-fast) var(--ease);
}
.badge-strong  { color: var(--strong-color);  background: var(--strong-bg); }
.badge-good    { color: var(--good-color);    background: var(--good-bg); }
.badge-weak    { color: var(--weak-color);    background: var(--weak-bg); }
.badge-missing { color: var(--missing-color); background: var(--missing-bg); }
.badge-pending { color: var(--pending-color); background: var(--pending-bg); }
.badge-expired { color: var(--expired-color); background: var(--expired-bg); }

/* ── MODAL ────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-overlay.show {
  display: flex;
  animation: fadeIn var(--t-base) var(--ease) both;
}
.modal {
  background: var(--surface);
  border-radius: var(--r-3xl);
  box-shadow: 0 24px 80px rgba(0,0,0,0.20);
  padding: 36px 28px 28px;
  width: 100%;
  max-width: 380px;
  position: relative;
  animation: modalIn var(--t-modal) var(--ease-spring) both;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.modal-x, .modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-dim);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.modal-x:hover, .modal-close:hover {
  background: var(--border);
  color: var(--text-primary);
}
.modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.3;
  margin-bottom: 6px;
}
.modal-desc {
  font-size: 14px;
  color: var(--text-tertiary);
  letter-spacing: -0.01em;
  line-height: 1.6;
}

/* ── TOAST ────────────────────────────────────────────────────── */
.blnk-toast, #toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--gray-900);
  color: #fff;
  padding: 13px 22px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  z-index: var(--z-toast);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-xl);
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
}
.blnk-toast.show, #toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── SPINNER ──────────────────────────────────────────────────── */
.blnk-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  flex-shrink: 0;
}
.blnk-spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* ── SKELETON ─────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #F2F4F6 25%, #E5E8EB 50%, #F2F4F6 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── DIVIDER ──────────────────────────────────────────────────── */
.blnk-divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: var(--sp-4) 0;
}
.blnk-divider-text {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 13px;
  color: var(--text-disabled);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.blnk-divider-text::before,
.blnk-divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── FOOTER ───────────────────────────────────────────────────── */
.footer, .blnk-footer {
  background: #fff;
  border-top: 1.5px solid #E5E8EB;
  padding: 48px 24px 40px;
  margin-top: 0;
}
.footer-inner, .blnk-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-logo, .blnk-footer-logo {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.055em;
  color: var(--text-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.footer-links, .blnk-footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a, .blnk-footer-links a {
  font-size: 13px;
  color: var(--text-tertiary);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.footer-links a:hover, .blnk-footer-links a:hover { color: var(--text-secondary); }
.footer-copy, .blnk-footer-copy {
  font-size: 12px;
  color: var(--text-disabled);
  letter-spacing: -0.01em;
}

/* ── 인라인 툴팁 (.th-i) ─────────────────────────────────────── */
.th-i:not(.bst-tip-btn) {
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(49,130,246,0.10); color: #93AACF;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
  font-style: normal; line-height: 1;
  -webkit-tap-highlight-color: transparent; border: none;
}
.th-i:not(.bst-tip-btn):hover,
.th-i:not(.bst-tip-btn).active { background: #3182F6; color: #fff; }

/* ── UTILITY ──────────────────────────────────────────────────── */
.text-blue    { color: var(--blue); }
.text-muted   { color: var(--text-tertiary); }
.text-primary { color: var(--text-primary); }
.text-strong  { color: var(--strong-color); }
.text-good    { color: var(--good-color); }
.text-weak    { color: var(--weak-color); }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── ANIMATIONS ───────────────────────────────────────────────── */
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroIn   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes pulse    { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes modalIn  { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes tipIn    { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@keyframes scrollBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes orbFloat { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-20px); } }
@keyframes confettiFall { 0% { transform: translateY(0) rotateZ(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotateZ(720deg); opacity: 0; } }

/* 스크롤 reveal */
.toss-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.75s var(--ease-spring),
    transform 0.75s var(--ease-spring);
}
.toss-reveal.on { opacity: 1; transform: translateY(0); }

.reveal, .anim {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.reveal.visible, .reveal.on, .anim.on { opacity: 1; transform: translateY(0); }

/* delay helpers */
.reveal-d1, .anim-d1 { transition-delay: 0.08s; }
.reveal-d2, .anim-d2 { transition-delay: 0.16s; }
.reveal-d3, .anim-d3 { transition-delay: 0.24s; }
.reveal-d4, .anim-d4 { transition-delay: 0.32s; }
.reveal-d5, .anim-d5 { transition-delay: 0.40s; }

/* ── FOCUS VISIBLE (접근성) ───────────────────────────────────── */
:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* ── TOUCH OPTIMIZATION ───────────────────────────────────────── */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── RIPPLE ───────────────────────────────────────────────────── */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: rippleAnim 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ── REDUCE MOTION ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .toss-reveal, .reveal, .anim {
    opacity: 1;
    transform: none;
  }
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav, .top-nav { padding: 0 20px; height: 58px; }
  .nav-inner, .blnk-nav-inner { gap: 12px; }
  .footer, .blnk-footer {
    padding: 36px 20px 32px;
    margin-bottom: max(60px, calc(60px + env(safe-area-inset-bottom)));
  }
  .footer-inner, .blnk-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .footer-links, .blnk-footer-links { gap: 16px; }
  .footer-links a, .blnk-footer-links a { font-size: 12px; }
  .blnk-card, .blnk-card-border, .blnk-card-accent { padding: var(--sp-4); }
  .modal { padding: 28px 20px 20px; border-radius: var(--r-2xl); }
  .search-card { border-radius: 16px; padding: 5px 5px 5px 16px; }
  .search-input { font-size: 16px; }
  .search-btn { height: 42px; padding: 0 18px; font-size: 14px; border-radius: 10px; }
  .btn { min-height: 44px; }
  .nav-pill, .nav-community { min-height: 36px; }
}

@media (max-width: 480px) {
  .nav, .top-nav { padding: 0 16px; height: 54px; }
  .footer, .blnk-footer { padding: 32px 16px; }
  .footer-links, .blnk-footer-links { flex-wrap: wrap; gap: 12px; }
  .modal { padding: 24px 16px 16px; }
  .search-card { padding: 4px 4px 4px 14px; border-radius: 14px; }
  .search-btn { height: 40px; padding: 0 16px; font-size: 13px; border-radius: 9px; }
}

/* Safe area */
@supports (padding: max(0px)) {
  .nav, .top-nav {
    padding-left:  max(32px, env(safe-area-inset-left));
    padding-right: max(32px, env(safe-area-inset-right));
  }
  .modal-overlay {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .blnk-toast, #toast {
    bottom: max(80px, calc(70px + env(safe-area-inset-bottom)));
  }
}

@media (max-width: 480px) {
  @supports (padding: max(0px)) {
    .nav, .top-nav {
      padding-left:  max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
  }
}

/* 터치 디바이스 hover 비활성화 */
@media (pointer: coarse) {
  .blnk-card-accent:hover { transform: none; box-shadow: var(--shadow-sm); }
  .blnk-card-accent:hover::before { transform: scaleX(0); }
  .btn-primary:hover, .btn-primary-gradient:hover { transform: none; }
  .search-btn:hover { transform: none; }
  .toss-reveal { opacity: 1; transform: none; }
  .toss-reveal.on { opacity: 1; transform: none; }
}