/* ==========================================================
   ESSELIX — 브랜드 스타일
   팔레트: 웜 아이보리 / 다크 차콜 / 브론즈 (esselix_master_spec.txt 2번 항목)
   ========================================================== */

:root{
  --bg:        #F5F1E8;   /* 웜 아이보리 배경 */
  --surface:   #FFFCF5;   /* 카드/목업 표면 */
  --ink:       #2E2B27;   /* 다크 차콜 텍스트 */
  --muted:     #8A8377;   /* 뮤트 그레이베이지 서브 텍스트 */
  --bronze:    #9C7A4E;   /* 브론즈/카퍼 액센트 */
  --bronze-deep:#7E5F38;  /* 액센트 hover */
  --bronze-soft:rgba(156,122,78,0.10);
  --line:      rgba(46,43,39,0.12);
  --serif:'Fraunces', Georgia, serif;
  --sans:'Pretendard Variable','Pretendard',-apple-system,'Malgun Gothic',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(156,122,78,0.25);}
img,svg{max-width:100%;display:block;}
a{color:inherit;}

.container{max-width:1160px;margin:0 auto;padding:0 28px;}
.serif{font-family:var(--serif);}

/* ---------- 스크롤 리빌 ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.on{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- 헤더 ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(245,241,232,0.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.site-header.scrolled{border-bottom-color:var(--line);}
.site-header nav{
  max-width:1240px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.monogram-img{width:30px;height:auto;}
.wordmark{
  font-family:var(--serif);font-weight:500;font-size:17px;
  letter-spacing:0.22em;color:var(--ink);
}
.nav-links{display:flex;gap:34px;list-style:none;}
.nav-links a{
  text-decoration:none;font-size:14.5px;font-weight:500;color:var(--muted);
  transition:color .2s ease;
}
.nav-links a:hover{color:var(--ink);}
.header-cta{display:flex;align-items:center;gap:10px;}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-block;text-decoration:none;border-radius:999px;
  font-weight:700;font-size:15px;line-height:1;
  padding:15px 28px;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--bronze);color:#FFFCF5;}
.btn-primary:hover{
  background:var(--bronze-deep);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(156,122,78,0.35);
}
.btn-ghost{border:1px solid var(--line);color:var(--ink);font-weight:600;}
.btn-ghost:hover{border-color:var(--ink);background:rgba(46,43,39,0.04);}
.btn-sm{padding:11px 20px;font-size:14px;}

.menu-toggle{
  display:none;background:none;border:none;color:var(--ink);
  font-size:24px;cursor:pointer;line-height:1;
}
@media (max-width:860px){
  .nav-links{display:none;}
  .header-cta .btn{display:none;}
  .menu-toggle{display:block;}
}
.mobile-menu{
  display:none;flex-direction:column;gap:4px;
  padding:10px 28px 20px;border-top:1px solid var(--line);
}
.mobile-menu.open{display:flex;}
.mobile-menu a{
  text-decoration:none;padding:11px 0;font-size:16px;font-weight:600;color:var(--ink);
}

/* ---------- 히어로 ---------- */
.hero{
  padding:170px 0 90px;text-align:center;position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 50% -5%, rgba(156,122,78,0.13), transparent 65%),
    radial-gradient(ellipse 40% 35% at 88% 80%, rgba(156,122,78,0.07), transparent 60%);
}
.hero .container{position:relative;}
.eyebrow{
  display:inline-block;margin-bottom:26px;
  font-size:12.5px;font-weight:700;letter-spacing:0.2em;
  color:var(--bronze);
  border:1px solid rgba(156,122,78,0.35);background:var(--bronze-soft);
  padding:8px 16px;border-radius:999px;
}
.hero h1{
  font-family:var(--serif);font-weight:560;
  font-size:clamp(36px,5.6vw,66px);
  line-height:1.22;letter-spacing:-0.01em;
  max-width:820px;margin:0 auto;
}
.hero h1 em{font-style:italic;color:var(--bronze);}
.hero-sub{
  margin:26px auto 0;max-width:560px;
  font-size:clamp(16px,1.9vw,18.5px);color:var(--muted);line-height:1.7;
}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:42px;flex-wrap:wrap;}

/* ---------- 제품 미리보기 목업 ---------- */
.preview{padding:30px 0 110px;}
.preview-stage{
  position:relative;border-radius:22px;padding:clamp(22px,4vw,52px);
  background:
    radial-gradient(ellipse 70% 90% at 20% 10%, rgba(156,122,78,0.34), transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 90%, rgba(122,94,58,0.30), transparent 60%),
    linear-gradient(135deg,#E8DFCE 0%, #D9CBB2 45%, #C4AE8B 100%);
  box-shadow:0 30px 70px -30px rgba(46,43,39,0.35);
}
.browser-frame{
  background:var(--surface);border-radius:14px;overflow:hidden;
  box-shadow:0 18px 50px -18px rgba(46,43,39,0.4);
  max-width:860px;margin:0 auto;
}
.browser-bar{
  display:flex;align-items:center;gap:8px;
  padding:11px 16px;border-bottom:1px solid var(--line);
  background:rgba(245,241,232,0.6);
}
.browser-bar .dot{width:10px;height:10px;border-radius:50%;background:#D8CFC0;}
.browser-bar .dot:first-child{background:#D9A69A;}
.browser-bar .dot:nth-child(2){background:#D8C79A;}
.browser-bar .addr{
  flex:1;text-align:center;font-size:12px;color:var(--muted);letter-spacing:0.02em;
}
.mock-body{padding:clamp(18px,3vw,32px);}
.mock-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:20px;
}
.mock-title{font-size:15.5px;font-weight:700;}
.mock-period{font-size:12.5px;color:var(--muted);}
.mock-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px;
}
.mock-stat{
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  background:var(--bg);
}
.mock-stat .k{font-size:12px;color:var(--muted);display:block;}
.mock-stat .v{
  font-family:var(--serif);font-size:clamp(19px,2.6vw,26px);font-weight:600;
  display:block;margin-top:3px;
}
.mock-stat .v small{font-size:0.55em;font-weight:500;color:var(--muted);margin-left:2px;}
.mock-chart-label{font-size:12.5px;color:var(--muted);margin-bottom:8px;}
.mock-chart{width:100%;height:auto;}
.mock-foot{
  margin-top:14px;font-size:11.5px;color:var(--muted);line-height:1.5;
}
@media (max-width:640px){.mock-stats{grid-template-columns:1fr 1fr;} }
.preview-caption{
  text-align:center;margin-top:34px;font-size:clamp(16px,2vw,19px);
  color:var(--ink);font-weight:600;
}
.preview-caption span{color:var(--muted);font-weight:400;display:block;margin-top:6px;font-size:0.85em;}

/* ---------- 섹션 공통 ---------- */
.section{padding:96px 0;}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-tag{
  font-size:12.5px;font-weight:700;letter-spacing:0.2em;color:var(--bronze);
  display:block;margin-bottom:14px;
}
.section-head h2{
  font-family:var(--serif);font-weight:560;
  font-size:clamp(28px,3.8vw,44px);line-height:1.28;letter-spacing:-0.01em;
}
.section-head p{margin-top:16px;color:var(--muted);font-size:16.5px;}

/* ---------- 트랙레코드 ---------- */
.track{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:980px){.track-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto;}}
.case-card{
  border:1px solid var(--line);border-radius:18px;padding:28px;
  background:var(--bg);display:flex;flex-direction:column;gap:0;
  transition:transform .25s ease,box-shadow .25s ease;
}
.case-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(46,43,39,0.3);}
.case-card.featured{
  background:var(--ink);color:var(--bg);border-color:var(--ink);
}
.case-card.featured .case-desc,.case-card.featured .metric .k,.case-card.featured .case-note{color:rgba(245,241,232,0.62);}
.case-badge{
  align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:0.08em;
  padding:6px 12px;border-radius:999px;margin-bottom:18px;
  background:var(--bronze-soft);color:var(--bronze);border:1px solid rgba(156,122,78,0.3);
}
.case-card.featured .case-badge{background:rgba(156,122,78,0.28);color:#D8BC93;border-color:rgba(216,188,147,0.35);}
.case-name{font-size:19px;font-weight:800;letter-spacing:-0.01em;}
.case-handle{font-size:13px;color:var(--bronze);margin-top:2px;}
.case-card.featured .case-handle{color:#D8BC93;}
.case-desc{margin-top:12px;font-size:14px;color:var(--muted);line-height:1.65;flex-grow:1;}
.case-metrics{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;
}
.case-card.featured .case-metrics{border-top-color:rgba(245,241,232,0.16);}
.metric .v{
  font-family:var(--serif);font-size:clamp(20px,2.4vw,25px);font-weight:600;display:block;line-height:1.2;
}
.metric .v small{font-size:0.55em;font-weight:500;margin-left:1px;}
.metric .k{font-size:12px;color:var(--muted);display:block;margin-top:3px;}
.case-note{margin-top:16px;font-size:11.5px;color:var(--muted);line-height:1.55;}
.track-flow{
  margin-top:52px;text-align:center;font-size:14.5px;color:var(--muted);line-height:1.8;
  max-width:660px;margin-left:auto;margin-right:auto;
}
.track-flow strong{color:var(--ink);font-weight:700;}
.track-flow .arrow{color:var(--bronze);margin:0 8px;font-weight:700;}

/* ---------- 운영 프로세스 ---------- */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;}
@media (max-width:980px){.process-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.process-grid{grid-template-columns:1fr;}}
.step-card{
  border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--surface);
}
.step-num{
  font-family:var(--serif);font-size:13px;font-weight:600;letter-spacing:0.14em;
  color:var(--bronze);display:block;
}
.step-card h3{margin-top:12px;font-size:18px;font-weight:800;}
.step-card p{margin-top:9px;font-size:13.5px;color:var(--muted);line-height:1.65;}
.process-loop{
  margin-top:26px;display:flex;align-items:center;gap:10px;justify-content:center;
  font-size:13.5px;color:var(--muted);
}
.process-loop .loop-icon{
  width:26px;height:26px;border-radius:50%;border:1.5px solid var(--bronze);
  color:var(--bronze);display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}

/* ---------- 소통/신뢰 ---------- */
.trust{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.trust-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;
}
@media (max-width:860px){.trust-grid{grid-template-columns:1fr;gap:36px;}}
.checklist{list-style:none;display:flex;flex-direction:column;gap:18px;}
.checklist li{display:flex;gap:14px;align-items:flex-start;}
.check-icon{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;margin-top:2px;
  background:var(--bronze);color:#FFFCF5;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
.checklist .t{font-size:16px;font-weight:700;display:block;}
.checklist .d{font-size:14px;color:var(--muted);margin-top:4px;line-height:1.65;}
.trust-why{
  border-left:2.5px solid var(--bronze);padding:4px 0 4px 22px;
}
.trust-why h3{font-size:17px;font-weight:800;}
.trust-why p{margin-top:10px;font-size:14.5px;color:var(--muted);line-height:1.75;}

/* ---------- 최종 CTA ---------- */
.final-cta{padding:130px 0;text-align:center;position:relative;overflow:hidden;}
.final-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 55% at 50% 100%, rgba(156,122,78,0.14), transparent 65%);
}
.final-cta .container{position:relative;}
.final-cta h2{
  font-family:var(--serif);font-weight:560;
  font-size:clamp(30px,4.4vw,50px);line-height:1.25;letter-spacing:-0.01em;
}
.final-cta p{margin:20px auto 0;max-width:480px;color:var(--muted);font-size:17px;}
.final-cta .btn{margin-top:40px;font-size:16.5px;padding:18px 38px;}
.cta-micro{margin-top:18px;font-size:13px;color:var(--muted);font-style:italic;}

/* ---------- 푸터 ---------- */
.site-footer{border-top:1px solid var(--line);padding:44px 0;}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.footer-brand{display:flex;align-items:center;gap:10px;}
.footer-brand .wordmark{font-size:14px;}
.footer-meta{font-size:13px;color:var(--muted);}
.footer-meta a{color:var(--muted);text-decoration:none;}
.footer-meta a:hover{color:var(--bronze);}