/* ==========================================================
   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;
  --serif-kr:'Noto Serif KR','Fraunces', Georgia, serif;
  --sans:'Apple SD Gothic Neo','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;}

/* ---------- 한국어 줄바꿈: 단어 중간 끊김 방지 ---------- */
.hero h1,.hero-sub,
.case-desc,.metric .k,.track-flow,
.section-head h2,.section-head p,
.final-cta h2,.final-cta p{
  word-break:keep-all;overflow-wrap:break-word;
}
/* 모바일 전용 줄바꿈 (<br class="m-br">) */
.m-br{display:none;}
/* PC(데스크톱) 전용 줄바꿈 (<br class="d-br">) — 태블릿·모바일에서 숨김 */
@media (max-width:1024px){
  .d-br{display:none;}
}
/* 모바일: 데스크톱 기준 <br> 강제 줄바꿈 해제 → 폭에 맞춰 자연 줄바꿈 */
@media (max-width:640px){
  .hero h1 br:not(.m-br),.section-head h2 br:not(.m-br){display:none;}
  /* IN THE FEED 제목은 "고객의 화면에서," 뒤 줄바꿈 유지 */
  .feed .section-head h2 br{display:inline;}
  .m-br{display:inline;}
}
.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{
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:120px 0 150px;text-align:center;position:relative;overflow:hidden;
}
@supports not (min-height:100svh){.hero{min-height:100vh;}}
.hero-chart{
  position:absolute;left:0;right:0;bottom:0;
  width:100%;height:min(70vh,600px);
  pointer-events:none;
}
.hero-chart .line{
  opacity:0.5;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:heroDraw 2.6s cubic-bezier(.45,0,.2,1) .5s forwards;
}
.hero-chart .area{
  opacity:0;
  animation:heroAreaIn 1.4s ease 1.6s forwards;
}
@keyframes heroDraw{to{stroke-dashoffset:0;}}
@keyframes heroAreaIn{to{opacity:1;}}
/* 그래프 곡선 2벌: d = 데스크톱/태블릿, m = 모바일 전용(파도 크고 단순) */
.hero-chart .m{display:none;}
@media (max-width:640px){
  .hero-chart{height:min(52vh,440px);}
  .hero-chart .d{display:none;}
  .hero-chart .m{display:block;}
}
.hero-counter{
  position:absolute;
  top:calc(74px + 5vh);left:clamp(20px,5vw,80px);
  text-align:left;pointer-events:none;
  opacity:0;transition:opacity .7s ease;
}
.hero-counter.show{opacity:1;}
.hero-counter-label{
  display:block;margin-bottom:8px;
  font-size:12.5px;font-weight:700;letter-spacing:0.18em;
  color:var(--muted);
}
.hero-counter-num{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(38px,6.5vw,80px);line-height:1;
  color:var(--bronze);letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
@media (max-width:1024px){
  .hero{flex-direction:column;}
  .hero-counter{
    position:static;text-align:center;margin-bottom:36px;
  }
  .hero-counter-label{margin-bottom:6px;}
  .hero-counter-num{font-size:clamp(32px,8.5vw,54px);}
}
@media (prefers-reduced-motion:reduce){
  .hero-chart .line{animation:none;stroke-dashoffset:0;}
  .hero-chart .area{animation:none;opacity:1;}
  .hero-counter{display:none;}
}
.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(--sans);font-weight:300;
  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;}
.hero-proof{
  margin-top:34px;font-size:13.5px;color:var(--muted);letter-spacing:0.01em;
}
.hero-proof .sep{color:var(--bronze);margin:0 10px;font-weight:700;}

/* ---------- 제품 미리보기 목업 ---------- */
.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;}

/* ---------- 운영 방식 ---------- */
.method .section-head{margin-bottom:40px;}
.method-body{max-width:680px;margin:0 auto;}
.method-body p{
  font-family:var(--sans);font-weight:400;
  font-size:16.5px;color:#4A453D;line-height:2;
  letter-spacing:-0.002em;word-break:keep-all;
  margin-bottom:22px;
}
.method-body p:last-child,
.method-quote p:last-child{margin-bottom:0;}
.method-quote{
  margin-top:36px;padding:28px 32px;
  border-left:2.5px solid var(--bronze);border-radius:0 14px 14px 0;
  background:var(--surface);
  font-family:var(--sans);font-weight:500;
  font-size:clamp(16px,2vw,18px);line-height:1.9;color:var(--ink);
  word-break:keep-all;
}

/* ---------- 섹션 공통 ---------- */
.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(--sans);font-weight:300;
  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;
  text-decoration:none;color:inherit;cursor:pointer;
}
.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(--sans);font-size:clamp(20px,2.4vw,25px);font-weight:500;display:block;line-height:1.2;
}
.metric .v small{font-size:0.55em;font-weight:500;margin-left:1px;}
/* 지표 값 중간 크기 — 기간·텍스트형 값용 (<span class="mid">) */
.metric .v .mid{font-size:0.72em;font-weight:500;line-height:1.65;white-space:nowrap;}
.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;}
.case-quote{
  margin-top:16px;padding:14px 16px;
  border-left:2.5px solid var(--bronze);border-radius:0 10px 10px 0;
  background:var(--bronze-soft);
  font-size:12.5px;line-height:1.7;color:var(--muted);
}
.case-card.featured .case-quote{
  border-left-color:#D8BC93;background:rgba(216,188,147,0.12);
  color:rgba(245,241,232,0.78);
}
.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;}

/* ---------- 실생활 속 브랜드 (피드 목업) ---------- */
.feed-grid{
  display:flex;justify-content:center;align-items:center;gap:clamp(20px,2.5vw,36px);
  margin-top:14px;
}
.phone{
  width:clamp(220px,26vw,330px);flex-shrink:0;margin:0;
}
.phone.featured{width:clamp(240px,29vw,360px);}
.phone-screen{
  aspect-ratio:9/17;border-radius:30px;overflow:hidden;position:relative;
  background:var(--surface);
  border:1.5px solid var(--line);
  box-shadow:0 18px 50px -18px rgba(46,43,39,0.28);
}
.phone.featured .phone-screen{
  border-color:rgba(156,122,78,0.45);
  box-shadow:0 26px 64px -20px rgba(46,43,39,0.38);
}
.phone-screen img{
  width:100%;height:100%;object-fit:cover;object-position:top;display:block;
  position:relative;z-index:1;
}
/* 이미지 없을 때 플레이스홀더 */
.phone-screen::before{
  content:"게시물 캡처 자리";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--muted);letter-spacing:0.06em;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(156,122,78,0.10), transparent 70%),
    var(--surface);
}
.phone-cap{
  margin-top:14px;text-align:center;
  font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0.02em;
}
.phone.featured .phone-cap{color:var(--bronze);}
@media (max-width:860px){
  .feed-grid{
    justify-content:flex-start;align-items:flex-start;
    overflow-x:auto;padding:10px 4px 18px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .feed-grid::-webkit-scrollbar{display:none;}
  .phone{width:min(70vw,260px);scroll-snap-align:center;scroll-snap-stop:always;}
  .phone.featured{width:min(70vw,260px);}
  .feed-grid{cursor:grab;}
  .feed-grid.dragging{cursor:grabbing;scroll-snap-type:none;}
  .phone:first-child{margin-left:auto;}
  .phone:last-child{margin-right:auto;}
}

/* ---------- 왜 쓰레드 ---------- */
.why-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  max-width:860px;margin:0 auto;
}
.why-card{
  border:1px solid var(--line);border-radius:18px;
  padding:36px 32px;background:var(--surface);text-align:center;
}
.why-name{font-size:22px;font-weight:800;letter-spacing:-0.01em;}
.why-card p{
  margin-top:12px;font-size:15px;color:var(--muted);line-height:1.8;
  word-break:keep-all;
}
.why-card strong{color:var(--bronze);font-weight:700;}
@media (max-width:700px){
  .why-grid{grid-template-columns:1fr;max-width:440px;}
  .why-card p br:not(.m-br){display:none;}
}

/* ---------- 전환율 ---------- */
.conv-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:1020px;margin:0 auto;
}
.conv-card{
  border:1px solid var(--line);border-radius:18px;
  padding:44px 32px 40px;background:var(--surface);text-align:center;
}
.conv-num{
  display:block;font-weight:300;
  font-size:clamp(52px,7vw,76px);line-height:1;
  color:var(--bronze);letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.conv-num small{font-size:0.45em;font-weight:400;margin-left:3px;}
.conv-k{display:block;margin-top:16px;font-size:15.5px;font-weight:700;color:var(--ink);word-break:keep-all;}
.conv-who{display:block;margin-top:5px;font-size:13px;color:var(--muted);}
/* 태블릿·모바일: 전환율 카드 세로 1개씩 */
@media (max-width:1024px){
  .conv-grid{grid-template-columns:1fr;max-width:440px;}
}

/* ---------- 최종 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(--sans);font-weight:300;
  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;}

/* ---------- 푸터 ---------- */
/* 헤더 바와 동일 규격: 상하 16px, 콘텐츠 폭 1240px */
.site-footer{border-top:1px solid var(--line);padding:16px 0;}
.footer-inner{
  max-width:1240px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.footer-brand{display:flex;align-items:center;gap:11px;}
.footer-meta{font-size:13px;color:var(--muted);}
.footer-meta a{color:var(--muted);text-decoration:none;}
.footer-meta a:hover{color:var(--bronze);}