:root{
  --brand:#0D9488;
  --brand-2:#14b8a6;
  --ink:#0b1220;
  --bg:#ffffff;
  --bg-alt:#F6FAF9;
  --muted:#6b7280;
  --ring: 0 10px 26px rgba(13,148,136,.08);
}

/* ===== Reset & Base ===== */
*{box-sizing:border-box; margin:0; padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans KR",sans-serif; color:var(--ink); background:var(--bg)}
a{text-decoration:none; color:inherit}

/* ===== Header ===== */
.navwrap{
  background:#fff;
  border-bottom:1px solid #eee;
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(140%) blur(8px);
}
.navcontainer{ width:100%; padding:20px; display:flex; align-items:center; }
.brand{line-height:0}
.logo{height:42px; width:auto; display:block}
.right{margin-left:auto; margin-right:20px; display:flex; align-items:center; gap:40px}
.menu{list-style:none; display:flex; gap:48px}
.menu>li{position:relative}
.menu a{
  font-size:18px; font-weight:700; padding:6px 0; border-bottom:2px solid transparent;
  transition:border-color .18s ease, color .18s ease;
}
.menu > li > a:hover{border-bottom-color:var(--brand)}
.menu > li > a.is-active,
.menu > li > a[aria-current="page"]{border-bottom-color:var(--brand)}
.has-sub::after{content:""; position:absolute; left:0; right:0; top:100%; height:10px}
.submenu{
  position:absolute; left:0; top:calc(100% + 10px); min-width:240px;
  background:rgba(255,255,255,.9); border:1px solid #e8efee; border-radius:14px; padding:8px;
  box-shadow:0 12px 32px rgba(2,20,31,.1); visibility:hidden; opacity:0;
  transform:translateY(-6px); transition:.2s ease; backdrop-filter: blur(8px);
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu{visibility:visible; opacity:1; transform:translateY(0)}
.submenu li{list-style:none}
.submenu a{ display:block; padding:12px 14px; font-weight:800; font-size:18px; border-radius:10px; color:#0b1a2a; }
.submenu a:hover{background:#f3fbfa}

/* CTA */
.cta{
  display:inline-block; background:var(--brand); color:#fff;
  padding:10px 18px; border-radius:999px; font-weight:800; font-size:16px;
  text-decoration:none; transition:opacity .15s ease, transform .15s ease;
  box-shadow:none;
}
.cta:hover{ opacity:.92; transform:translateY(-1px) }

/* ===== Hero ===== */
.hero{position:relative; width:100%; min-height:86vh; display:grid; place-items:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; background:
  linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.45)),
  url("images/services.jpg") center/cover no-repeat}
.hero-inner{position:relative; text-align:center; color:#fff; padding:64px 20px; will-change: transform;}
.hero h1{font-size:clamp(30px,4.6vw,56px); font-weight:900; letter-spacing:.2px}
.hero-desc{margin-top:12px; opacity:.95; line-height:1.9; font-size:clamp(14px,1.5vw,18px)}
.seg{margin-top:26px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.seg-btn{
  display:inline-block; padding:10px 16px; border:1.6px solid rgba(255,255,255,.85); border-radius:999px; color:#fff;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.seg-btn:hover{background:var(--brand); border-color:var(--brand); transform:translateY(-1px)}

/* ===== Section titles ===== */
.container{max-width:min(1200px,92vw); margin:0 auto; padding:64px 20px}
.section-title{font-size:clamp(22px,3vw,36px); font-weight:900; margin-bottom:8px}
.section-sub{color:#4b5b67; line-height:1.8; margin-bottom:26px}

/* ===== Stats ===== */
.stats{background:#fff}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.stat{
  background:#ffffff; border:1px solid #edf2f7; border-radius:16px; padding:26px; text-align:center;
  box-shadow:var(--ring);
}
.num{display:block; font-size:clamp(28px,4vw,44px); font-weight:900; color:#0f2749}
.label{display:block; margin-top:6px; color:#334155; font-weight:800}
@media (max-width:900px){ .stats-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .stats-grid{grid-template-columns:1fr} }

/* ===== What We Do : 세로형 카드 + 가로 스크롤 ===== */
.wwd{background:var(--bg-alt)}
.wwd-rail.portrait{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:visible;
  padding-block:8px 4px;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  cursor:grab;
}
.wwd-rail.portrait > *{ flex:0 0 auto; }
.wwd-rail.portrait.is-dragging{ cursor:grabbing; user-select:none; }
.wwd-rail.portrait::-webkit-scrollbar{ height:8px }
.wwd-rail.portrait::-webkit-scrollbar-thumb{ background:#dbe7e4; border-radius:999px }

/* 카드(포트레이트) 크기 */
.svc-card.svc--portrait{
  scroll-snap-align:start;
  min-width: clamp(300px, 28vw, 360px);
  max-width: 420px;
  display:flex;
  flex-direction:column;
  background:#fff; border:1px solid #e9f3f1; border-radius:18px;
  box-shadow:var(--ring); overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: clamp(420px, 54vh, 560px);
}
.svc-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(13,148,136,.14); border-color:#d7efe9 }
.card-topline{ height:6px; background:linear-gradient(90deg, var(--brand), var(--brand-2)); opacity:.9 }
.card-body{display:flex; flex-direction:column; gap:12px; padding:22px}
.svc-icon{font-size:28px}
.svc-title{font-size:20px; font-weight:900}
.svc-desc{color:#374151; line-height:1.8}
.svc-list{margin:2px 0 10px 18px; color:#475569}
.svc-list li{margin:4px 0}
.svc-card .btn{
  margin: auto 22px 20px; align-self:flex-start;
  display:inline-block; background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff;
  padding:12px 16px; border-radius:12px; font-weight:900; text-align:center;
  box-shadow:0 12px 28px rgba(20,184,166,.20);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.svc-card .btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(20,184,166,.28); }

/* 드래그 힌트 */
.drag-hint{ margin-top:10px; font-size:13px; color:#6b7280; text-align:right; }

/* 좁은 화면: 카드 폭 넓혀 스와이프 중심 */
@media (max-width:640px){
  .svc-card.svc--portrait{ min-width: 86vw; }
}

/* ===== Reviews ===== */
.reviews{background:#fff}
.rv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
@media (max-width:1000px){ .rv-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .rv-grid{grid-template-columns:1fr} }

.rv-item{
  border:1px solid #e9eef3; border-radius:16px; padding:24px; background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:10px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.rv-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; color:#0f2749}
.rv-icon{display:inline-flex; align-items:center; justify-content:center; opacity:.92}
.rv-stars{font-weight:900; letter-spacing:1px; color:#0f2749}
.rv-item blockquote{font-size:16px; line-height:1.9; color:#1f2937}
.rv-item figcaption{margin-top:4px; color:#64748b; font-weight:700}
.rv-meter{height:8px; background:#eff5f7; border-radius:999px; overflow:hidden}
.rv-meter span{display:block; height:100%; width:var(--v,85%); background:linear-gradient(90deg,#22d3ee,#14b8a6)}
.rv-item:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.06) }

/* ===== Reveal (통일: [data-reveal]) ===== */
[data-reveal]{
  transition: opacity .5s ease, transform .5s ease;
}
[data-reveal]:not(.is-revealed){
  opacity:0; transform: translateY(14px);
}
[data-reveal].is-revealed{
  opacity:1; transform:none;
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ transition:none }
  .svc-card, .rv-item{ transition:none }
}

/* ===== Footer (어두운 배경 + 회색 톤, 모션 없음) ===== */
.site-footer{
  background:#111;
  color:#ccc;
  padding:48px 20px 28px;
  font-size:15px;
  line-height:1.8;
}
.footer-inner{ max-width:1200px; margin:0 auto; }
.footer-top{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.footer-logo{ height:32px; width:auto; display:block; }
.footer-info{ color:#aaa; margin-bottom:22px; }
.footer-info a{ color:#aaa; text-decoration:none; }
.footer-info a:hover{ text-decoration:underline; }
.site-footer hr{ border:none; border-top:1px solid #333; margin:22px 0; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#777; }
.footer-links a{ color:#aaa; text-decoration:none; margin:0 4px; }
.footer-links a:hover{ text-decoration:underline; }
.footer-copy{ font-size:14px; }
.site-footer, .site-footer * { transition: none !important; }