@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --dark:#0B1A1F;
  --ink:#14262B;
  --ink-2:#5A6E74;
  --ink-3:#8A9A9E;
  --line:#E4E9E8;
  --line-d:#26383E;
  --paper:#FFFFFF;
  --paper-2:#F5F7F6;
  --teal:#0E6E6C;
  --teal-dark:#0A5250;
  --teal-lite:#4FD1C5;
  --sun:#E8A33D;
  --danger:#B4342A;

  --sans:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'IBM Plex Mono',var(--sans),monospace;

  --w:1000px;
  --gap:clamp(68px,8.5vw,120px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.8;
  word-break:keep-all;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
a{color:var(--teal);text-underline-offset:4px}

.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 28px}

/* ================= 헤더 ================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.logo{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:20px;letter-spacing:-.03em;
  text-decoration:none;white-space:nowrap;color:#fff;transition:color .3s;
}
.logo-mark{
  width:27px;height:27px;flex:none;display:block;
  --logo-accent:var(--teal-lite);
}
.site-header nav{display:flex;gap:26px}
.site-header nav a{color:rgba(255,255,255,.72);text-decoration:none;font-size:16px;font-weight:500;transition:color .3s}
.site-header nav a:hover{color:#fff}

.site-header.solid{background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);border-bottom-color:var(--line)}
.site-header.solid .logo{color:var(--ink)}
.site-header.solid .logo-mark{--logo-accent:var(--teal)}
.site-header.solid nav a{color:var(--ink-2)}
.site-header.solid nav a:hover{color:var(--ink)}

/* ================= 히어로 ================= */
.hero{
  background:var(--dark);color:#fff;
  min-height:100svh;display:flex;align-items:center;
  padding:120px 0 80px;position:relative;overflow:hidden;
}
.hero .wrap{text-align:center;position:relative;z-index:1}

/* ── 회전하는 튜브 구체 ── */
.hero-orb{
  position:absolute;left:50%;top:50%;
  width:min(720px,104vw);aspect-ratio:1;
  transform:translate(-50%,-52%);
  pointer-events:none;z-index:0;
  opacity:.5;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 78%);
          mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 78%);
}
.hero-orb svg{width:100%;height:100%;display:block}

.orb-edge{stroke:var(--teal-lite);stroke-width:1;opacity:.34}
.orb-lat{stroke:var(--teal-lite);stroke-width:1;opacity:.2}
.orb-mer{stroke:var(--teal-lite);stroke-width:1.4;opacity:.3}
.hero-brand{
  display:inline-flex;align-items:center;gap:11px;
  margin:0 0 72px;color:#fff;
  font-family:var(--mono);font-size:15px;letter-spacing:.1em;
}
.hero-brand .logo-mark{width:30px;height:30px}
.hero h1{
  margin:0 auto;font-weight:700;letter-spacing:-.045em;
  font-size:clamp(18px,4.9vw,52px);line-height:1.4;
  white-space:nowrap;               /* 한 문장이 한 줄로 */
}
.hero p{
  margin:40px auto 0;max-width:44ch;
  font-size:clamp(17px,1.9vw,21px);line-height:1.8;color:rgba(255,255,255,.66);
}
.hero-cta{
  display:inline-block;margin-top:clamp(40px,5vw,56px);
  padding:19px 44px;border-radius:999px;
  background:#fff;color:var(--dark);text-decoration:none;
  font-size:clamp(16px,1.7vw,19px);font-weight:700;letter-spacing:-.02em;
  transition:transform .2s ease,box-shadow .2s ease;
}
.hero-cta:hover{
  color:var(--dark);transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* 강점 키워드 */
.hero-tags{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;margin:clamp(50px,7vw,78px) auto 0;padding:34px 0 0;
  max-width:760px;border-top:1px solid var(--line-d);
}
.hero-tags li{
  padding:9px 20px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  font-size:15px;font-weight:500;color:rgba(255,255,255,.7);
  white-space:nowrap;
}

.scroll-cue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:rgba(255,255,255,.38);
}

/* ================= 섹션 ================= */
.section{padding:var(--gap) 0;scroll-margin-top:72px}
.section--tint{background:var(--paper-2)}

/* ── 어두운 섹션 ── */
.section--dark{background:var(--dark);color:#fff}
.section--dark .eyebrow{color:var(--teal-lite)}
.section--dark .statement{color:#fff}
.section--dark .statement em{color:var(--teal-lite)}
.section--dark .say{color:rgba(255,255,255,.68)}
.section--dark .acc{border-top-color:rgba(255,255,255,.14)}
.section--dark .acc details{border-bottom-color:rgba(255,255,255,.14)}
.section--dark .acc summary{color:#fff}
.section--dark .acc summary:hover{color:var(--teal-lite)}
.section--dark .acc summary::after{border-color:rgba(255,255,255,.5)}
.section--dark .acc .body p,
.section--dark .acc .body li{color:rgba(255,255,255,.66)}
.section--dark .acc .body li::before{background:rgba(255,255,255,.4)}
.section--dark .btn--ghost{color:var(--teal-lite);border-color:rgba(255,255,255,.24)}
.section--dark .btn--ghost:hover{background:rgba(255,255,255,.07);color:#fff}

.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:0 0 30px;
}

/* 한 화면에 한 문장 — 크게 */
.statement{
  margin:0;font-weight:700;letter-spacing:-.045em;
  font-size:clamp(30px,5.6vw,60px);line-height:1.34;
}
.statement em{font-style:normal;color:var(--teal)}
/* 문장이 긴 경우 */
.statement--sm{font-size:clamp(23px,3.6vw,38px);line-height:1.45}

.say{
  margin:44px 0 0;max-width:none;
  font-size:clamp(17px,1.8vw,20px);line-height:1.85;color:var(--ink-2);
}

h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0}

/* ================= 흐름 ================= */
.flow{margin-top:clamp(56px,8vw,86px)}
.flow-row{display:flex;align-items:stretch;flex-wrap:wrap}
.flow-step{
  flex:1 1 200px;padding:26px 22px;border-radius:6px;
  border:1px solid rgba(14,110,108,.16);
  background:linear-gradient(160deg,#EFF6F5 0%,#DFEDEB 100%);
}
.flow-num{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--teal);opacity:.75;display:block;margin-bottom:10px;
}
.flow-step strong{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.flow-step span{display:block;margin-top:8px;font-size:15px;color:var(--ink-2);line-height:1.7}

/* 핵심 단계 — 같은 색 계열에서 한 단계만 진하게 */
.flow-step--key{
  border-color:rgba(14,110,108,.42);
  background:linear-gradient(160deg,#DCEDEA 0%,#C4DFDB 100%);
}
.flow-arrow{flex:0 0 46px;display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:20px;opacity:.55}
.flow-branch{margin-top:20px;padding-left:24px;border-left:3px solid var(--teal);display:grid;gap:12px}
.flow-branch div{font-size:16px;color:var(--ink-2)}
.flow-branch b{color:var(--teal-dark);font-weight:700}

/* ================= 아코디언 ================= */
.acc{margin-top:clamp(48px,7vw,76px);border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none;cursor:pointer;padding:26px 40px 26px 0;position:relative;
  font-size:clamp(18px,2.2vw,22px);font-weight:700;letter-spacing:-.025em;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:'';position:absolute;right:6px;top:50%;
  width:12px;height:12px;margin-top:-8px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .25s ease;
}
.acc details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.acc summary:hover{color:var(--teal)}
.acc .body{padding:0 0 30px}
.acc .body p{margin:0 0 14px;color:var(--ink-2);font-size:17px}
.acc .body ul{margin:0;padding:0;list-style:none}
.acc .body li{color:var(--ink-2);font-size:17px;padding-left:20px;position:relative}
.acc .body li::before{content:'';position:absolute;left:0;top:.9em;width:8px;height:1px;background:var(--ink-3)}

/* ================= 버튼 ================= */
.btn{
  display:inline-block;padding:17px 34px;border-radius:4px;
  background:var(--teal);color:#fff;text-decoration:none;
  font-weight:600;font-size:17px;font-family:var(--sans);
  border:1px solid var(--teal);cursor:pointer;
}
.btn:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff}
.btn--ghost{background:transparent;color:var(--teal);border-color:var(--line)}
.btn--ghost:hover{background:var(--paper);color:var(--teal-dark)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px}

/* ================= 폼 ================= */
.form{max-width:620px;margin-top:clamp(48px,7vw,72px)}
.field{margin-bottom:32px}
.field > label{display:block;font-weight:700;font-size:16px;margin-bottom:12px}
.field .req{color:var(--danger);margin-left:3px}
.field .hint{display:block;font-weight:400;font-size:14px;color:var(--ink-3);margin-top:8px}
.field input[type=text],.field input[type=tel],.field input[type=email],.field textarea{
  width:100%;padding:15px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;
  font-family:var(--sans);font-size:18px;color:var(--ink);background:transparent;line-height:1.6;
}
.field textarea{min-height:170px;resize:vertical}
.field input:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--teal);border-bottom-width:2px;padding-bottom:14px;
}
.types{display:flex;gap:10px;flex-wrap:wrap}
.types input{position:absolute;opacity:0;width:0;height:0}
.types label{
  display:block;margin:0;padding:12px 24px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);cursor:pointer;
  font-size:16px;font-weight:500;color:var(--ink-2);
}
.types input:checked + label{border-color:var(--teal);color:var(--teal);font-weight:700;box-shadow:inset 0 0 0 1px var(--teal)}
.types input:focus-visible + label{outline:3px solid var(--sun);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alert{padding:22px 0;border-top:2px solid var(--teal);margin-top:40px;font-size:17px}
.alert--err{border-top-color:var(--danger);color:var(--danger)}
.alert ul{margin:10px 0 0;padding-left:20px}

/* ================= 푸터 ================= */
.site-footer{background:var(--dark);color:rgba(255,255,255,.5);padding:72px 0 84px;font-size:15px}
.site-footer .biz{margin:0;line-height:1.9}
.site-footer .biz strong{font-size:18px;color:#fff;font-weight:700}
.site-footer .copy{margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.32)}

/* ================= 스크롤 등장 ================= */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}

/* ================= 반응형 ================= */
@media (max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 22px}
  .site-header .wrap{min-height:60px;gap:12px}
  .site-header nav{gap:15px}
  .site-header nav a{font-size:15px}
  .logo{font-size:18px;gap:8px}
  .logo-mark{width:24px;height:24px}
  .hero{min-height:auto;padding:130px 0 70px}
  .hero h1{white-space:normal;font-size:clamp(27px,7.6vw,34px);line-height:1.35}
  .hero-brand{margin-bottom:44px}
  .hero-orb{width:min(380px,96vw);opacity:.34}
  .hero-tags{gap:8px;padding-top:28px}
  .hero-tags li{padding:8px 15px;font-size:13.5px}
  .scroll-cue{display:none}
  .flow-row{flex-direction:column}
  .flow-arrow{flex:0 0 36px;transform:rotate(90deg)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .hero-orb animate,
  .logo-mark animateTransform{display:none}
  *{transition:none!important;animation:none!important}
}