/* ============================================================
   seline.css — Seline 컴포넌트 라이브러리 (seline.com 스타일 레퍼런스)
   ------------------------------------------------------------
   소스: docs/design/new system/DESIGN.md
   전제: ibank-tokens.css 가 먼저 로드된다(토큰 참조).
   원칙: 웜 스톤 캔버스 · 시안 단일 채색 · 헤어라인이 곧 구조 ·
        볼드 디스플레이 · 필 컨트롤 · 플랫 페이퍼 질감 ·
        딥 섀도는 페이지당 플로팅 프리뷰 1개 · 그라데이션 금지
   ============================================================ */

/* ── 베이스 ── */
.sl-body{margin:0;background:var(--color-stone-canvas);color:var(--color-ink-black);font-family:var(--font-body);font-size:14px;line-height:1.64;letter-spacing:.004em;-webkit-font-smoothing:antialiased;word-break:keep-all}
.sl-container{max-width:1200px;margin:0 auto;padding:0 24px}
.sl-section{padding:clamp(64px,9vw,96px) 24px}
.sl-section--hero{padding:clamp(80px,11vh,128px) 24px clamp(48px,6vw,72px)}
.sl-hairline{border:0;border-top:1px solid var(--color-stone-border);margin:0}
.sl-center{text-align:center}

/* ── 타이포 — 헤드라인은 bold. 위계는 크기·웨이트·하이라이트 스팬이 만든다 ── */
.sl-display{font-family:var(--font-display);font-size:clamp(32px,4.4vw,52px);font-weight:700;line-height:1.12;letter-spacing:-0.021em;color:var(--color-ink-black)}
.sl-h{font-family:var(--font-display);font-size:clamp(28px,3.4vw,38px);font-weight:700;line-height:1.25;letter-spacing:-0.025em;color:var(--color-ink-black)}
.sl-sub{font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-0.005em;color:var(--color-ink-black)}
.sl-lead{font-size:16px;font-weight:400;line-height:1.69;letter-spacing:.003em;color:var(--color-warm-gray)}
.sl-body-text{font-size:14px;line-height:1.64;letter-spacing:.004em;color:var(--color-warm-gray)}
.sl-meta{font-size:14px;font-weight:500;line-height:1.43;color:var(--color-ink-black)}
.sl-caption{font-size:12px;line-height:1.5;color:var(--color-ash-gray)}
.sl-eyebrow{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.025em;text-transform:uppercase;color:var(--color-warm-gray)}

/* 시그니처: 헤드라인당 정확히 1개의 하이라이트 스팬 — 밸류 키워드에 */
.sl-hl{color:var(--color-cyan-edge);background:var(--color-sky-wash);padding:2px 8px;border-radius:4px;font-style:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ── 버튼: 필(9999px) — 시안 채움은 뷰포트당 1개 원칙 ── */
.sl-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 16px;border-radius:9999px;font-family:var(--font-body);font-size:14px;font-weight:500;line-height:1.43;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.sl-btn--primary{background:var(--color-cyan-signal);border:1px solid var(--color-cyan-edge);color:#ffffff}
.sl-btn--primary:hover{background:var(--color-cyan-edge)}
.sl-btn--ghost{background:transparent;border:1px solid var(--color-stone-border);color:var(--color-ink-black);font-weight:400}
.sl-btn--ghost:hover{border-color:var(--color-stone-muted);background:#ffffff}
.sl-btn--lg{padding:11px 22px;font-size:15px}
.sl-btn-pair{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sl-link{color:var(--color-cyan-edge);font-weight:500;text-decoration:none}
.sl-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ── 상단 내비: 미니멀 바 — 로고 좌 / 링크 중앙 / CTA 우 ── */
.sl-nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;gap:20px;height:60px;padding:0 clamp(16px,2.5vw,32px);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-stone-border)}
.sl-nav-logo{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:19px;letter-spacing:-0.02em;color:var(--color-ink-black);text-decoration:none}
.sl-nav-links{display:flex;align-items:center;gap:2px;position:absolute;left:50%;transform:translateX(-50%)}
.sl-nav-link{height:32px;display:inline-flex;align-items:center;padding:0 12px;font-size:14px;font-weight:400;color:var(--color-warm-gray);text-decoration:none;transition:color .15s}
.sl-nav-link:hover,.sl-nav-link:focus-visible{color:var(--color-ink-black);outline:none}
.sl-nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.sl-nav-spacer{height:60px}
@media (max-width:880px){.sl-nav-links,.sl-nav-right{display:none}}

/* ── 카드: 보더가 곧 구조 ── */
.sl-card{background:#ffffff;border:1px solid var(--color-stone-border);border-radius:10px;padding:var(--card-padding,24px);box-shadow:var(--shadow-md)}
.sl-card--flat{box-shadow:none}
.sl-feature{background:#ffffff;border:1px solid var(--color-stone-border);border-radius:16px;padding:24px;box-shadow:var(--shadow-md)}
.sl-card-grid{display:grid;gap:clamp(12px,1.6vw,20px)}
.sl-card-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sl-card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sl-card-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.sl-card-grid--3,.sl-card-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sl-card-grid--2,.sl-card-grid--3,.sl-card-grid--4{grid-template-columns:1fr}}

/* ── 플로팅 프리뷰: 딥 섀도가 허용된 유일한 서피스 (페이지당 1개) ── */
.sl-preview{background:#ffffff;border-radius:16px;padding:8px;box-shadow:var(--shadow-xl);border:1px solid var(--color-stone-border)}
.sl-preview>*{border-radius:10px;overflow:hidden}
.sl-preview--mono{filter:grayscale(1) contrast(.94)}
.sl-window-bar{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;background:#ffffff;border-bottom:1px solid var(--color-stone-border);font-family:ui-monospace,monospace;font-size:12px;color:var(--color-ash-gray)}
.sl-window-bar i{width:8px;height:8px;border-radius:50%;background:var(--color-stone-border)}

/* ── 탭 필 그룹: 액티브만 soot 채움 ── */
.sl-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sl-tab{padding:7px 16px;border-radius:9999px;background:transparent;border:1px solid var(--color-stone-border);font-family:inherit;font-size:14px;font-weight:400;color:var(--color-ink-black);cursor:pointer;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.sl-tab:hover{background:#ffffff}
.sl-tab.is-active,.sl-tab[aria-selected="true"]{background:var(--color-soot);border-color:var(--color-soot);color:#ffffff}

/* ── 인버트 섹션: soot — 아껴서 (메인 등 의도된 다크 서피스만) ── */
.sl-invert{background:var(--color-soot);color:#fafaf9}
.sl-invert .sl-display,.sl-invert .sl-h,.sl-invert .sl-sub{color:#fafaf9}
.sl-invert .sl-lead,.sl-invert .sl-body-text{color:#a8a29e}
.sl-invert .sl-hairline{border-color:rgba(250,250,249,.14)}

/* ── 마감 CTA: 라이트 밴드 — 제품 소개 페이지 하단 (화이트 + 헤어라인) ── */
.sl-close{background:#ffffff;border-top:1px solid var(--color-stone-border);color:var(--color-ink-black)}
.sl-close .sl-display,.sl-close .sl-h,.sl-close .sl-sub{color:var(--color-ink-black)}
.sl-close .sl-lead,.sl-close .sl-body-text{color:var(--color-warm-gray)}
.sl-close .sl-eyebrow,.sl-close .sl-caption{color:var(--color-ash-gray)}

/* ── 증언·트러스트 ── */
.sl-stars{font-size:13px;letter-spacing:2px;color:var(--color-ink-black)}
.sl-quote{font-size:16px;line-height:1.69;color:var(--color-ink-black)}
.sl-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block}
.sl-logo-row{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3.5vw,44px);flex-wrap:wrap;filter:grayscale(1);opacity:.72}

/* ── 뱃지·태그·체크 ── */
.sl-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:9999px;background:#ffffff;border:1px solid var(--color-stone-border);font-size:12.5px;font-weight:500;color:var(--color-warm-gray)}
.sl-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:9999px;background:var(--color-bg-deep);font-size:12px;font-weight:500;color:var(--color-warm-gray)}
.sl-check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sl-check-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.64;color:var(--color-ink-black)}
.sl-check-list li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;background:var(--color-cyan-signal);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/14px no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/14px no-repeat}

/* ── 히어로: 좌측 정렬 텍스트 블록 → 듀얼 CTA → 트러스트 → 풀폭 플로팅 프리뷰 ── */
.sl-hero-copy{max-width:720px}
.sl-hero-copy .sl-lead{margin-top:16px;max-width:600px}
.sl-hero-ctas{margin-top:28px}
.sl-hero-preview{width:100%;max-width:1100px;margin:clamp(40px,6vw,64px) auto -clamp(24px,4vw,48px)}
.sl-hero-preview--overlap{margin-bottom:calc(-1 * clamp(24px,4vw,48px))}

/* ── 폼 ── */
.sl-field{width:100%;background:#ffffff;border:1px solid var(--color-stone-muted);border-radius:6px;padding:6px 12px;font-family:inherit;font-size:14px;line-height:1.64;color:var(--color-ink-black);outline:none;transition:border-color .15s,box-shadow .15s}
.sl-field:focus{border-color:var(--color-cyan-signal);box-shadow:0 0 0 2px rgba(59,166,241,.35)}
.sl-field::placeholder{color:var(--color-warm-gray)}

/* ── 푸터: 화이트 + 헤어라인 + 링크 그리드 ── */
.sl-footer{background:#ffffff;border-top:1px solid var(--color-stone-border);padding:clamp(48px,6vw,72px) 24px clamp(24px,3.5vw,36px)}
.sl-footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(28px,4vw,56px)}
.sl-footer-head{font-size:12px;font-weight:500;letter-spacing:.025em;text-transform:uppercase;color:var(--color-ash-gray)}
.sl-footer-col{display:flex;flex-direction:column;gap:9px}
.sl-footer-col a{font-size:14px;color:var(--color-warm-gray);text-decoration:none;width:fit-content;transition:color .15s}
.sl-footer-col a:hover{color:var(--color-ink-black)}
.sl-footer-legal{max-width:1200px;margin:clamp(32px,4.5vw,44px) auto 0;padding-top:20px;border-top:1px solid var(--color-stone-border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--color-ash-gray)}
.sl-footer-legal a{color:var(--color-warm-gray);text-decoration:none}

/* ── 유틸 ── */
.sl-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.sl-reveal[data-shown="1"]{opacity:1;transform:none}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){
  .sl-btn,.sl-tab,.sl-reveal,.sl-nav-link{transition:none !important}
}