/*
Theme Name:   Synergy 36
Theme URI:    https://synergy36.com
Description:  Synergy 36 공식 테마. 36가지 성향 분류 기반 팀 코칭 플랫폼 랜딩 페이지.
Version:      1.0.0
Author:       Synergy 36 Team
License:      GPL v2 or later
Text Domain:  synergy36
*/

/* ── CSS 변수 ─────────────────────────────────────────── */
:root {
  --violet:      #7c3aed;
  --violet-dark: #5b21b6;
  --violet-light:#ede9fe;
  --gray-50:     #f9fafb;
  --gray-100:    #f3f4f6;
  --gray-200:    #e5e7eb;
  --gray-500:    #6b7280;
  --gray-900:    #111827;
  --amber:       #f59e0b;
  --emerald:     #10b981;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;
}

/* ── 리셋 & 기본 ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       color: var(--gray-900); background: #fff; line-height: 1.6; }
img  { max-width: 100%; height: auto; }
a    { text-decoration: none; color: inherit; }

/* ── 레이아웃 ─────────────────────────────────────────── */
.s36-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.s36-section   { padding: 5rem 0; }
.s36-section--gray { background: var(--gray-50); }
.s36-section--dark { background: var(--gray-900); }
.s36-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.s36-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
@media(max-width:768px){ .s36-grid-3,.s36-grid-2{ grid-template-columns:1fr; } }

/* ── 타이포그래피 ─────────────────────────────────────── */
.s36-h1 { font-size: clamp(2.5rem,6vw,4.5rem); font-weight:900; line-height:1.08; letter-spacing:-.02em; }
.s36-h2 { font-size: clamp(1.8rem,4vw,2.5rem); font-weight:900; }
.s36-h3 { font-size: 1.25rem; font-weight:700; }
.s36-lead { font-size:1.125rem; color:var(--gray-500); line-height:1.7; }
.s36-label { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--violet); }

/* ── 버튼 ─────────────────────────────────────────────── */
.s36-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.875rem 2rem; border-radius:var(--radius-full); font-weight:700; font-size:1rem; cursor:pointer; transition:.2s; border:none; }
.s36-btn--primary { background:var(--violet); color:#fff; box-shadow:0 4px 14px rgba(124,58,237,.35); }
.s36-btn--primary:hover { background:var(--violet-dark); transform:translateY(-1px); }
.s36-btn--outline { background:transparent; color:var(--gray-900); border:2px solid var(--gray-200); }
.s36-btn--outline:hover { border-color:var(--violet); color:var(--violet); }
.s36-btn--white { background:#fff; color:var(--violet); box-shadow:0 4px 20px rgba(0,0,0,.15); }
.s36-btn--white:hover { background:var(--violet-light); }

/* ── 카드 ─────────────────────────────────────────────── */
.s36-card { background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-2xl); padding:2rem; transition:.2s; }
.s36-card:hover { box-shadow:0 8px 30px rgba(0,0,0,.08); }
.s36-card--violet { background:var(--violet-light); border-color:#ddd6fe; }
.s36-card--blue   { background:#eff6ff; border-color:#bfdbfe; }
.s36-card--green  { background:#ecfdf5; border-color:#a7f3d0; }

/* ── 법적 고지 배너 ───────────────────────────────────── */
.s36-legal-banner { background:var(--amber); background:rgba(251,191,36,.15); border-top:1px solid rgba(251,191,36,.4); border-bottom:1px solid rgba(251,191,36,.4); padding:.75rem 0; font-size:.8125rem; color:#92400e; }
.s36-legal-banner__inner { display:flex; align-items:flex-start; gap:.75rem; }

/* ── 네비게이션 ───────────────────────────────────────── */
.s36-nav { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--gray-200); }
.s36-nav__inner { height:4rem; display:flex; align-items:center; justify-content:space-between; }
.s36-nav__logo { display:flex; align-items:center; gap:.625rem; font-weight:900; font-size:1.25rem; }
.s36-nav__logo-icon { width:2rem; height:2rem; border-radius:.5rem; background:var(--violet); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.875rem; }
.s36-nav__links { display:flex; align-items:center; gap:.25rem; }
.s36-nav__link { padding:.5rem .75rem; border-radius:.5rem; font-size:.875rem; font-weight:500; color:var(--gray-500); transition:.15s; }
.s36-nav__link:hover { color:var(--violet); background:var(--violet-light); }
@media(max-width:768px){ .s36-nav__links { display:none; } }

/* ── 히어로 ───────────────────────────────────────────── */
.s36-hero { background:linear-gradient(180deg,#f5f3ff 0%,#fff 60%); padding:5rem 0 6rem; text-align:center; overflow:hidden; position:relative; }
.s36-hero::before { content:''; position:absolute; top:-6rem; right:-6rem; width:24rem; height:24rem; background:var(--violet-light); border-radius:50%; filter:blur(64px); opacity:.5; }
.s36-hero__badge { display:inline-flex; align-items:center; gap:.5rem; padding:.375rem 1rem; background:var(--violet-light); color:var(--violet); border-radius:var(--radius-full); font-size:.875rem; font-weight:600; margin-bottom:1.5rem; }
.s36-hero__title { margin-bottom:1.5rem; }
.s36-hero__title span { color:var(--violet); }
.s36-hero__desc { max-width:42rem; margin:0 auto 2.5rem; }
.s36-hero__cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; }
.s36-hero__badges { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.s36-hero__type-badge { display:flex; align-items:center; gap:.375rem; padding:.375rem .875rem; background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-full); font-size:.875rem; color:var(--gray-500); box-shadow:0 1px 3px rgba(0,0,0,.06); }

/* ── 소셜 증명 ────────────────────────────────────────── */
.s36-stats { padding:4rem 0; background:var(--gray-900); }
.s36-stats__label { text-align:center; font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6b7280; margin-bottom:2.5rem; }
.s36-stats__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
@media(max-width:640px){ .s36-stats__grid{ grid-template-columns:repeat(2,1fr); } }
.s36-stat__value { font-size:clamp(2rem,5vw,3rem); font-weight:900; color:var(--violet); display:block; }
.s36-stat__label { font-size:.875rem; color:#9ca3af; margin-top:.25rem; }

/* ── 피처 섹션 ────────────────────────────────────────── */
.s36-feature { display:flex; align-items:center; gap:5rem; }
.s36-feature--reverse { flex-direction:row-reverse; }
.s36-feature__text { flex:1; max-width:32rem; }
.s36-feature__visual { flex:1; }
.s36-feature__bullets { list-style:none; margin:.5rem 0 2rem; display:flex; flex-direction:column; gap:.75rem; }
.s36-feature__bullet { display:flex; align-items:flex-start; gap:.75rem; font-size:.9375rem; color:#374151; }
.s36-feature__bullet::before { content:'✓'; color:var(--violet); font-weight:700; flex-shrink:0; margin-top:.1rem; }
@media(max-width:900px){ .s36-feature,.s36-feature--reverse{ flex-direction:column; gap:3rem; } }

/* ── 목업 카드 ────────────────────────────────────────── */
.s36-mockup { background:#fff; border-radius:var(--radius-2xl); box-shadow:0 20px 60px rgba(0,0,0,.12); border:1px solid var(--gray-100); overflow:hidden; }
.s36-mockup__bar { background:var(--violet); padding:.875rem 1.25rem; display:flex; align-items:center; gap:.75rem; }
.s36-mockup__dots { display:flex; gap:.375rem; }
.s36-mockup__dot { width:.75rem; height:.75rem; border-radius:50%; background:rgba(255,255,255,.3); }
.s36-mockup__title { font-size:.75rem; color:#fff; font-weight:500; }
.s36-mockup__body { padding:1.25rem; }

/* ── 가격표 ───────────────────────────────────────────── */
.s36-pricing-card { border:1px solid var(--gray-200); border-radius:var(--radius-2xl); padding:2rem; background:#fff; position:relative; display:flex; flex-direction:column; }
.s36-pricing-card--featured { border-color:var(--violet); box-shadow:0 8px 30px rgba(124,58,237,.15); }
.s36-pricing-card__badge { position:absolute; top:-1rem; left:50%; transform:translateX(-50%); background:var(--violet); color:#fff; font-size:.75rem; font-weight:700; padding:.375rem 1.25rem; border-radius:var(--radius-full); white-space:nowrap; }
.s36-pricing-card__tier  { font-size:.75rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.25rem; }
.s36-pricing-card__price { font-size:2.5rem; font-weight:900; margin-bottom:.25rem; }
.s36-pricing-card__period{ font-size:.875rem; color:var(--gray-500); margin-bottom:.5rem; }
.s36-pricing-card__desc  { font-size:.875rem; color:var(--gray-500); margin-bottom:1.5rem; }
.s36-pricing-card__features { list-style:none; display:flex; flex-direction:column; gap:.625rem; margin-bottom:2rem; flex:1; }
.s36-pricing-card__feature { display:flex; align-items:flex-start; gap:.625rem; font-size:.875rem; color:#374151; }
.s36-pricing-card__feature::before { content:'✓'; color:var(--violet); font-weight:700; flex-shrink:0; }

/* ── 법적 고지 박스 ───────────────────────────────────── */
.s36-notice { background:var(--gray-100); border:1px solid var(--gray-200); border-radius:var(--radius-xl); padding:1.25rem 1.5rem; display:flex; gap:.75rem; margin-top:2.5rem; }
.s36-notice p { font-size:.8125rem; color:var(--gray-500); line-height:1.6; }
.s36-notice strong { color:var(--gray-900); }

/* ── CTA 섹션 ─────────────────────────────────────────── */
.s36-cta { background:var(--violet); padding:5rem 0; text-align:center; }
.s36-cta h2 { color:#fff; margin-bottom:1rem; }
.s36-cta p  { color:rgba(255,255,255,.75); margin-bottom:2.5rem; }
.s36-cta__btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── 푸터 ─────────────────────────────────────────────── */
.s36-footer { background:var(--gray-900); color:#9ca3af; padding:4rem 0 2rem; }
.s36-footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:3rem; }
@media(max-width:768px){ .s36-footer__grid{ grid-template-columns:1fr; } }
.s36-footer__logo { display:flex; align-items:center; gap:.625rem; color:#fff; font-weight:900; font-size:1.25rem; margin-bottom:1rem; }
.s36-footer__desc { font-size:.875rem; line-height:1.7; margin-bottom:1rem; }
.s36-footer__heading { color:#fff; font-weight:600; font-size:.875rem; margin-bottom:1rem; }
.s36-footer__links { list-style:none; display:flex; flex-direction:column; gap:.625rem; }
.s36-footer__links a { font-size:.875rem; transition:.15s; }
.s36-footer__links a:hover { color:#fff; }
.s36-footer__legal { border-top:1px solid #1f2937; padding-top:1.5rem; margin-bottom:1rem; }
.s36-footer__legal p { font-size:.75rem; line-height:1.8; color:#6b7280; }
.s36-footer__bottom { border-top:1px solid #1f2937; padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.75rem; }
.s36-footer__policy-links { display:flex; gap:1.5rem; }
.s36-footer__policy-links a:hover { color:#fff; }