:root{
  --bg:#F5F1E8;

  --ink-900:#1F2A24;
  --ink-700:#2E3A33;
  --ink-600:#46524B;
  --ink-500:#6B756F;

  --card:#FFFFFF;
  --line: rgba(31,42,36,.10);

  --brand-1:#3A493C;
  --brand-2:#2A3A2E;
  --brand: linear-gradient(90deg, var(--brand-1), var(--brand-2));

  --accent:#D27B2F;

  --radius-xl:22px;
  --radius-lg:18px;

  --shadow: 0 16px 40px rgba(0,0,0,.10);
  --shadow-soft: 0 10px 24px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Pretendard", sans-serif;
  color:var(--ink-900);
  background:var(--bg);
  letter-spacing:-0.2px;
}
body.menu-open{
  overflow:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

.wrap{ width:min(1100px, 92vw); margin:0 auto; }
.site-main.site-main-inner{ padding-top:110px; }
.section{ padding:90px 0; }
.section-title{
  margin:0 0 14px;
  font-size:48px;
  color:#3A493C;
  letter-spacing:-0.6px;
  text-align:center;
}
.section-sub{
  margin:0 0 52px;
  color:rgba(58,73,60,.7);
  font-size:28px;
  text-align:center;
}
.section-cta{
  margin-top:28px;
  display:flex;
  justify-content:center;
}

/* Header */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background-color:rgba(245,241,232,.96);
  backdrop-filter:saturate(1.2) blur(10px);
  box-shadow:0 1px 0 rgba(31,42,36,.06);
  transition-property: background-color, box-shadow, backdrop-filter;
  transition-duration:.2s;
  transition-timing-function:ease;
}
.site-header.is-solid{
  background-color:rgba(245,241,232,.98);
  backdrop-filter:saturate(1.2) blur(10px);
  box-shadow:0 1px 0 rgba(31,42,36,.06);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100px;
  position:relative;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:900;
}
.brand-text{
  font-size:22px;
  font-family:"ChungjuKimSaeng", "Pretendard", sans-serif;
}

.nav-links{
  display:flex; align-items:center;
  gap:18px;
  color:var(--ink-600);
  font-weight:800;
  font-size:15px;
}
.nav-toggle{
  display:none;
  width:40px;
  height:40px;
  border:0;
  border-radius:10px;
  background:transparent;
  padding:0;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-toggle img{
  width:22px;
  height:22px;
  display:block;
}
.nav-toggle:hover{
  background:transparent;
}
.nav-links a{
  padding:10px 10px;
  border-radius:12px;
  transition:.2s ease;
}
.nav-links a:hover{
  background:rgba(42,58,46,.06);
  color:var(--ink-900);
}
.nav-links .nav-logout-link{
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  border-radius:999px;
  border:1px solid rgba(42,58,46,.22);
  background:rgba(42,58,46,.02);
}
.nav-links .nav-logout-link:hover{
  background:rgba(42,58,46,.12);
}
.nav-user-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(58,73,60,.08);
  border:1px solid rgba(58,73,60,.10);
  color:#2e4036;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}
.nav-signup-link{
  color:#2e4036;
  background:rgba(201,106,30,.10);
}
.nav-links .nav-signup-link:hover{
  background:rgba(201,106,30,.16);
  color:#2e4036;
}

/* Hero */
.hero{
  padding:0 0 38px;
  min-height:100vh;
  display:flex;
}
.hero .wrap{
  position:relative;
  width:100%;
  margin:0;
  min-height:100vh;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:64px 24px 58px;
  text-align:center;
}
.hero .wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("../../../img/main-bg.svg") center/cover no-repeat;
  opacity:.08;
  pointer-events:none;
}
.hero .wrap > *{
  position:relative;
  z-index:1;
}
.hero-title{
  margin:22px 0 12px;
  font-size:44px;
  line-height:1.1;
  letter-spacing:-1.2px;
  font-weight:1000;
  color:#3A493C;
}
.hero-title .accent{ color:#E17100; }
.hero-desc{
  margin:0 auto 22px;
  width:min(680px, 92%);
  color:rgba(58,73,60,.9);
  font-size:15px;
  line-height:1.7;
}
.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.btn{
  border:0;
  padding:12px 16px;
  border-radius:14px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
}
.btn-primary{
  background:var(--brand);
  color:#F2F3EF;
  box-shadow:0 14px 26px rgba(42,58,46,.25);
}
.btn-primary:hover{ transform:translateY(-1px); }
.btn-ghost{
  background:rgba(255,255,255,.65);
  border:1px solid rgba(31,42,36,.10);
  color:var(--ink-900);
}
.btn-ghost:hover{ background:rgba(255,255,255,.85); }

/* Grids / Cards */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
#service .grid-3{
  width:100%;
  margin:0;
}
.card{
  background:var(--card);
  border:1px solid rgba(31,42,36,.10);
  border-radius:var(--radius-xl);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  overflow:hidden;
}
.detail-card{
  padding:26px 22px;
}
.detail-title{
  margin:0 0 10px;
  color:#3A493C;
  font-size:24px;
}
.detail-desc{
  margin:0;
  color:var(--ink-600);
  font-size:15px;
  line-height:1.7;
}
.detail-actions{
  margin-top:20px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.spacer{ height:18px; }

.svc{
  padding:16px;
  min-height:210px;
  transition:transform .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
.svc:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 16px 30px rgba(0,0,0,.12);
}
.svc-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:20px;
  text-align:center;
}
.svc-icon{
  width:64px; height:64px;
  border-radius:14px;
  background:rgba(42,58,46,.08);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  position:relative;
  order:-1;
}
.svc:not(.featured) .svc-icon{
  background:linear-gradient(180deg, #3A493C 0%, #2A3A2E 100%);
  clip-path:polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.svc:not(.featured) .svc-icon::before{
  content:"";
  position:absolute;
  inset:4px;
  background:url("../../../img/octagon-inner-cream.svg") center/contain no-repeat;
  pointer-events:none;
  z-index:1;
}
.svc-icon.heart::after{
  content:"";
  position:absolute;
  inset:0;
  background:url("../../../img/heart.svg") center 58%/52% no-repeat;
  pointer-events:none;
  z-index:2;
}
.svc-title{
  margin:0;
  font-size:24px;
  letter-spacing:-0.4px;
}
.svc:not(.featured) .svc-title{ color:#3A493C; }
.svc-desc{
  margin:20px 0 0;
  color:var(--ink-600);
  font-size:14px;
  line-height:1.65;
  min-height:calc(1.65em * 5);
  display:-webkit-box;
  line-clamp:5;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.svc-bottom{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.price{ display:flex; align-items:baseline; gap:6px; }
.price{ margin-top:-4px; }
.price .num{
  font-weight:1000;
  font-size:30px;
  letter-spacing:-0.3px;
  color:#C96A1E;
}
.price .unit{
  font-size:16px;
  color:var(--ink-500);
  font-weight:800;
}
.btn-small{
  padding:12px 16px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  border:1px solid rgba(31,42,36,.12);
  background:rgba(42,58,46,.06);
  color:var(--ink-900);
  cursor:pointer;
  transition:.18s ease;
}
.btn-small:hover{ background:rgba(42,58,46,.10); }

.svc.featured{
  background:linear-gradient(135deg, #1E1A4D 0%, #59168B 100%);
  color:#EEF0EC;
  border:0;
}
.svc.featured .svc-icon{
  background:
    linear-gradient(135deg, #9810FA 0%, #4F39F6 100%);
  clip-path:polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.svc.featured .svc-icon::before{
  content:"";
  position:absolute;
  inset:4px;
  background:url("../../../img/octagon-inner.svg") center/contain no-repeat;
  pointer-events:none;
  z-index:1;
}
.svc.featured .svc-icon::after{
  content:"";
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:0;
  background:url("../../../img/taro.svg") center/60% no-repeat;
  box-shadow:none;
  opacity:1;
  pointer-events:none;
  z-index:2;
}
.svc.featured .svc-desc{ color:rgba(233,212,255,.8); }
.svc.featured .price .num{ color:#DAB2FF; }
.svc.featured .price .unit{ color:rgba(218,178,255,.7); }
.svc.featured .btn-small{
  background:#9810FA;
  border:1px solid rgba(255,255,255,.18);
  color:#FFFFFF;
}
.svc.featured .btn-small:hover{ background:#B24BFF; }

/* Reviews */
#review{ background:#EBE6D9; }
.review-carousel{
  --review-gap:18px;
  --review-visible:3;
  position:relative;
  overflow:hidden;
  width:100%;
}
.review-grid{
  display:flex;
  align-items:stretch;
  gap:var(--review-gap);
  width:max-content;
  transition:transform .58s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.review-carousel.is-static .review-grid{
  width:100%;
  transform:none !important;
}
.review-carousel .review{
  flex:0 0 calc((100% - (var(--review-visible) - 1) * var(--review-gap)) / var(--review-visible));
  min-width:0;
  height:100%;
}
.review{
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
}
.quote{
  width:28px;
  height:28px;
  margin-bottom:8px;
  background:url("../../../img/review.svg") center/contain no-repeat;
}
.stars{
  display:flex;
  gap:4px;
  align-items:center;
}
.star{
  width:14px;
  height:14px;
  background:url("../../../img/star-filled.svg") center/contain no-repeat;
}
.star.empty{
  background-image:url("../../../img/star-outline.svg");
}
.review-text{
  margin:10px 0 12px;
  color:rgba(58,73,60,.8);
  font-size:14px;
  line-height:1.7;
  min-height:74px;
}
.review-meta{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:rgba(58,73,60,.8);
  font-size:16px;
  font-weight:800;
  border-top:1px solid rgba(31,42,36,.08);
  padding-top:12px;
}
.review-meta span:last-child{
  color:rgba(58,73,60,.4);
  font-size:12px;
  font-weight:700;
}

/* Stats */
.stats{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0;
  --stat-line-h: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(58,73,60,.2) 50%, rgba(0,0,0,0) 100%);
  --stat-line-v: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(58,73,60,.2) 50%, rgba(0,0,0,0) 100%);
}
.stat{
  background:transparent;
  border:0;
  border-radius:0;
  padding:16px 14px;
  text-align:center;
  position:relative;
}
.stat::before{
  content:"";
  position:absolute;
  top:16%;
  bottom:16%;
  left:0;
  width:1px;
  background:var(--stat-line-v);
  pointer-events:none;
}
.stat::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:0;
  height:1px;
  background:var(--stat-line-h);
  pointer-events:none;
}
.stat:nth-child(3n+1)::before{ display:none; }
.stat:nth-child(-n+3)::after{ display:none; }
.stat .v{
  font-size:48px;
  letter-spacing:-0.6px;
  color:#3A493C;
  margin:0;
}
.stat-star{
  display:inline-block;
  width:16px;
  height:16px;
  margin-left:6px;
  background:url("../../../img/star-filled.svg") center/contain no-repeat;
  vertical-align:middle;
}
.stat .v::after{
  content:"";
  display:block;
  width:75%;
  height:1px;
  margin:10px auto 8px;
  background:var(--stat-line-h);
}
.stat .k{
  margin-top:0;
  font-size:18px;
  color:#3A493C;
  font-weight:600;
}
.stat-sub{
  margin-top:6px;
  font-size:12px;
  color:rgba(58,73,60,.5);
  font-weight:500;
}

/* Why */
.why{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}
#why{
  position:relative;
}
#why::before{
  content:"";
  position:absolute;
  inset:-40px 0;
  opacity:.45;
  pointer-events:none;
  z-index:0;
}
#why > .wrap{
  position:relative;
  z-index:1;
}
.img-card{
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(31,42,36,.10);
  box-shadow:0 12px 26px rgba(0,0,0,.08);
  background:#fff;
  min-height:280px;
  position:relative;
}
.img-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.02);
}
.why-list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.why-item{
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(58,73,60,.1);
  border-radius:0;
  padding:18px 0;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.why-item:last-child{ border-bottom:0; }
.why-tt{
  margin:0;
  font-size:24px;
  font-weight:1100;
  letter-spacing:-0.3px;
  color:#3A493C;
}
.why-dd{
  margin:6px 0 0;
  font-size:16px;
  line-height:1.65;
  color:rgba(58,73,60,.7);
}

/* Footer */
.site-footer{
  margin-top:40px;
  background:#3A493C;
  color:#FEF3C6;
}
.foot{
  padding:34px 0;
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr .8fr;
  gap:18px;
  align-items:start;
}
.foot h4{
  margin:0 0 10px;
  font-size:14px;
  letter-spacing:-0.2px;
  font-weight:500;
  color:inherit;
}
.footer-brand{
  font-family:"ChungjuKimSaeng", "Pretendard", sans-serif;
}
.foot p, .foot a{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:inherit;
  font-weight:400;
}
.foot a:hover{ text-decoration:underline; }
.foot .small{
  margin-top:10px;
  font-size:12px;
  color:inherit;
  font-weight:400;
}
.copyright{
  border-top:1px solid rgba(254,243,198,.2);
  padding:14px 0 18px;
  text-align:center;
  font-size:12px;
  color:rgba(254,243,198,.5);
  font-weight:400;
}

/* Responsive */
@media (max-width: 980px){
  .review-carousel{
    --review-visible:2;
  }
  .grid-3{ grid-template-columns: 1fr; }
  .foot{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats{ grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3n+1)::before{ display:block; }
  .stat:nth-child(-n+3)::after{ display:block; }
  .stat:nth-child(2n+1)::before{ display:none; }
  .stat:nth-child(-n+2)::after{ display:none; }
  .why{ grid-template-columns: 1fr; }
  .hero-title{ font-size:36px; }
}
@media (max-width: 860px){
  .brand-text{
    font-size:19px;
  }
  .section-title{
    font-size:40px;
  }
  .section-sub{
    font-size:22px;
  }
  .site-main.site-main-inner{
    padding-top:82px;
  }
  .nav{
    height:72px;
  }
  .site-header.menu-open{
    bottom:0;
  }
  .nav-toggle{
    display:inline-flex;
    position:relative;
    z-index:3;
  }
  .nav-links{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100dvh;
    min-height:100vh;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    padding:112px 24px 28px;
    background:#2d4a3e;
    color:rgba(255,255,255,.92);
    backdrop-filter:none;
    z-index:2;
  }
  .site-header.menu-open .nav-links{
    display:flex;
  }
  .nav-links a{
    display:inline-block;
    width:auto;
    padding:10px 14px;
    font-size:24px;
    font-family:"ChungjuKimSaeng", "Pretendard", sans-serif;
    font-weight:400;
    border-radius:12px;
    letter-spacing:.01em;
  }
  .nav-links a:hover{
    background:rgba(255,255,255,.14);
    color:#fff;
  }
  .nav-links .nav-logout-link{
    margin-top:8px;
    padding:8px 14px;
    font-size:18px;
    border-color:rgba(255,255,255,.35);
    background:rgba(255,255,255,.10);
  }
  .nav-links .nav-logout-link:hover{
    background:rgba(255,255,255,.22);
  }
  .nav-links .nav-signup-link{
    margin-top:8px;
    padding:11px 18px;
    border-radius:16px;
    background:#d27b2f;
    color:#fff3e6;
    border:1px solid rgba(210,123,47,.32);
    box-shadow:0 10px 24px rgba(0,0,0,.14);
    font-family:"Pretendard", sans-serif;
    font-size:18px;
    font-weight:800;
  }
  .nav-links .nav-signup-link:hover{
    background:#e08a3f;
    color:#fff;
  }
}
@media (max-width: 640px){
  .review-carousel{
    --review-visible:1;
  }
}
@media (max-width: 700px){
  .section{
    padding:62px 0;
  }

  .section-sub{
    margin:0 0 30px;
  }
}
@media (max-width: 520px){
  .hero .wrap{ padding:54px 16px 46px; }
  .hero-title{ font-size:30px; }
  .section-title{ font-size:30px; }
  .section-sub{ font-size:16px; }
  .foot{ grid-template-columns: 1fr; }
}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background:rgba(31,42,36,.92);
  color:#F5F1E8;
  padding:12px 14px;
  border-radius:14px;
  font-size:13px;
  font-weight:800;
  box-shadow:0 16px 40px rgba(0,0,0,.20);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
}