/* Quantify 웹사이트 공통 스타일 — 전 페이지(회사 소개·BYOP·약관) 공용 */
:root{
  --ink:#1A2333; --body:#434C5C; --muted:#727C8C; --muted-2:#98A1B0;
  --bg:#FFFFFF; --panel:#F7F8FA; --line:#E7EAEF; --line-2:#DBDFE7;
  --accent:#2F548C;
  --dark:#182234;
  --on-dark:#DDE3EE; --on-dark-mut:#9AA5B8;
  --s1:#E9188E; --s2:#8A2BE8; --s3:#2E7DF6; --s4:#22B24C; --s5:#F5C518; --s6:#FF7A18; --s7:#F0342E;
  --spectrum:linear-gradient(90deg,var(--s1),var(--s2),var(--s3),var(--s4),var(--s5),var(--s6),var(--s7));
  --maxw:1040px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--body);
  font-family:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;
  font-size:16px; line-height:1.78; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; letter-spacing:-.005em}
h1,h2,h3,h4{font-family:"Noto Serif KR","Noto Sans KR",serif; color:var(--ink);
  font-weight:600; letter-spacing:-.01em}
a{color:var(--accent); text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 30px}
.spectrum-top{height:3px; width:100%; background:var(--spectrum); opacity:.9}
.eyebrow{font-size:12.5px; letter-spacing:.16em; color:var(--accent); font-weight:700;
  text-transform:uppercase}

/* ---------- 헤더 ---------- */
header.site{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line)}
header.site .bar{display:flex; align-items:center; justify-content:space-between; height:72px}
header.site img.logo{height:40px; width:auto; max-width:46vw; display:block}
.brand{display:inline-flex; align-items:center; gap:11px; color:var(--ink)}
.brand img{width:30px; height:30px; border-radius:8px; display:block}
.brand .name{font-family:"Noto Serif KR",serif; font-size:21px; font-weight:600;
  letter-spacing:.01em; color:var(--ink)}
nav.top{display:flex; gap:30px; align-items:center}
nav.top a{font-size:14.5px; color:var(--muted); font-weight:500}
nav.top a:hover{color:var(--ink)}
nav.top a.cta{color:#fff; background:var(--ink); padding:9px 17px; border-radius:8px; font-weight:500}
nav.top a.cta:hover{background:#0f1723}
@media (max-width:760px){nav.top{gap:18px} nav.top a:not(.cta){display:none}}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:9px;
  font-weight:500; font-size:15px; font-family:"Noto Sans KR",sans-serif;
  transition:background .14s, border-color .14s}
.btn-primary{color:#fff; background:var(--ink)}
.btn-primary:hover{background:#0f1723}
.btn-ghost{color:var(--ink); border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--muted)}

/* ---------- 히어로 ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:#fff}
.hero svg.grid{position:absolute; right:-40px; top:0; height:100%; width:520px; max-width:52%;
  opacity:.5; pointer-events:none}
.hero .inner{position:relative; z-index:2; padding:92px 0 100px; max-width:720px}
.hero .eyebrow{display:block; margin:0 0 24px}
.hero .mark{height:clamp(96px,13vw,150px); width:auto; display:block; margin:0 0 34px}
.hero h1{font-size:clamp(32px,5vw,50px); line-height:1.32; font-weight:600; margin:0 0 26px}
.hero h1.tight{margin-bottom:38px}
.hero p.sub{font-size:18px; color:var(--body); max-width:620px; margin:0 0 38px; line-height:1.8}
.btns{display:flex; gap:13px; flex-wrap:wrap}

/* ---------- 섹션 골격 ---------- */
section.block{padding:88px 0; border-top:1px solid var(--line)}
.sec-head{max-width:680px; margin:0 0 52px}
.sec-head .eyebrow{display:block; margin:0 0 16px}
.sec-head h2{font-size:clamp(25px,3.4vw,34px); line-height:1.35; margin:0}
.sec-head p{color:var(--body); font-size:16.5px; margin:16px 0 0}

/* ---------- 항목 그리드(사업영역·주요 기능) ---------- */
.services{display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line)}
.services.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.services.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.services,.services.cols-3{grid-template-columns:1fr}}
.svc{padding:34px 34px 38px; border-right:1px solid var(--line);
  border-bottom:1px solid var(--line); position:relative}
.svc .num{font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--muted-2);
  letter-spacing:.06em}
.svc .tick{width:26px; height:3px; background:var(--accent); border-radius:2px;
  margin:16px 0 0; opacity:.85}
.svc h3{font-size:19.5px; line-height:1.4; margin:16px 0 0; font-weight:600}
.services.cols-3 .svc h3{font-size:18px}
.svc p{font-size:14.8px; color:var(--body); margin:12px 0 0; line-height:1.75}

/* ---------- 제품 패널 ---------- */
.product{display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:start;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:40px 44px}
@media (max-width:640px){.product{grid-template-columns:1fr; padding:32px 28px; gap:22px}}
.product .icon{width:88px; height:88px; border-radius:20px; box-shadow:0 8px 24px rgba(24,34,52,.14)}
.product .tag{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.product h3{font-size:25px; margin:9px 0 0; font-weight:600}
.product p{font-size:16px; color:var(--body); margin:16px 0 0; max-width:660px; line-height:1.85}
.product p strong{color:var(--ink); font-weight:700}
.meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin:22px 0 24px; padding-top:20px;
  border-top:1px solid var(--line-2)}
.meta span{font-size:14px; color:var(--ink); display:flex; align-items:center; gap:9px}
.meta span::before{content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); flex:none}

/* ---------- 리드 문장 + 3분할 ---------- */
.lead{font-family:"Noto Serif KR",serif; color:var(--ink); font-weight:500;
  font-size:clamp(20px,2.7vw,26px); line-height:1.6; max-width:780px; margin:0 0 46px}
.tri{display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
@media (max-width:720px){.tri{grid-template-columns:1fr; gap:28px}}
.tri .t{padding-top:22px; border-top:2px solid var(--ink)}
.tri .t h4{font-size:17.5px; margin:0; font-weight:600}
.tri .t p{font-size:14.5px; color:var(--body); margin:11px 0 0; line-height:1.75}

/* ---------- 가격 ---------- */
.price{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:40px 44px; max-width:560px}
@media (max-width:640px){.price{padding:32px 28px}}
.price .plan{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.price .amount{font-family:"Noto Serif KR",serif; color:var(--ink); font-weight:600;
  font-size:clamp(28px,4vw,36px); line-height:1.35; margin:8px 0 0}
.price .amount small{font-family:"Noto Sans KR",sans-serif; font-size:15px;
  font-weight:400; color:var(--muted)}
.price ul{list-style:none; margin:24px 0 26px; padding:20px 0 0;
  border-top:1px solid var(--line-2)}
.price li{font-size:15px; color:var(--body); padding:6px 0 6px 26px; position:relative}
.price li::before{content:""; position:absolute; left:2px; top:15px; width:8px; height:8px;
  border-radius:50%; background:var(--accent)}
.price li b{color:var(--ink); font-weight:700}
.note{font-size:13.5px; color:var(--muted); line-height:1.8; margin:22px 0 0;
  padding-top:18px; border-top:1px solid var(--line-2)}
.note b{color:var(--ink); font-weight:700}

/* ---------- 절차 ---------- */
.steps{list-style:none; margin:0; padding:0; counter-reset:step;
  display:grid; gap:0; border-top:1px solid var(--line)}
.steps li{counter-increment:step; display:grid; grid-template-columns:auto 1fr; gap:22px;
  padding:22px 4px; border-bottom:1px solid var(--line); font-size:15.5px; color:var(--body)}
.steps li::before{content:counter(step,decimal-leading-zero);
  font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--muted-2);
  letter-spacing:.06em; padding-top:5px}

/* ---------- 문의 ---------- */
.contact-block{background:var(--dark); color:var(--on-dark); border-radius:18px; padding:60px 52px}
@media (max-width:640px){.contact-block{padding:44px 30px}}
.contact-block h2{color:#fff; font-size:clamp(30px,4.4vw,42px); margin:0 0 16px}
.contact-block p{color:var(--on-dark-mut); font-size:16px; max-width:540px; margin:0; line-height:1.8}
.mailbtn{display:inline-flex; align-items:center; gap:10px; margin-top:30px; background:#fff;
  color:var(--dark); font-weight:500; font-size:15.5px; padding:14px 26px; border-radius:10px;
  font-family:"JetBrains Mono",monospace}
.mailbtn:hover{background:#eef1f6}

/* ---------- 약관·정책 문서 ---------- */
.doc{padding:64px 0 80px; max-width:760px}
.doc h1{font-size:clamp(26px,3.6vw,34px); margin:0}
.doc .updated{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--muted-2);
  margin:10px 0 0; padding-bottom:26px; border-bottom:1px solid var(--line)}
.doc h2{font-size:18.5px; margin:38px 0 12px}
.doc p{font-size:15.5px; color:var(--body); margin:12px 0}
.doc ol,.doc ul{padding-left:22px; margin:12px 0}
.doc li{font-size:15.5px; color:var(--body); margin:6px 0}
.doc b{color:var(--ink); font-weight:700}
.doc table{border-collapse:collapse; font-size:14.5px; margin:16px 0; width:100%}
.doc th,.doc td{border:1px solid var(--line); padding:10px 14px; text-align:left;
  color:var(--body); vertical-align:top}
.doc th{background:var(--panel); color:var(--ink); font-weight:700}
.doc .table-scroll{overflow-x:auto}

/* ---------- 푸터 ---------- */
footer.site{border-top:1px solid var(--line)}
footer.site .grid{display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap;
  padding:44px 0 18px}
footer.site img{height:34px; width:auto; opacity:.9; margin-bottom:14px; display:block}
footer.site .co{font-size:13.5px; color:var(--muted); line-height:1.75}
footer.site .co b{color:var(--body); font-weight:700}
footer.site .links{display:flex; gap:24px; font-size:13.5px; padding-top:4px; flex-wrap:wrap;
  align-content:flex-start}
footer.site .links a{color:var(--muted)}
footer.site .links a:hover{color:var(--ink)}
footer.site .fine{font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--muted-2);
  padding:16px 0 46px; border-top:1px solid var(--line); margin-top:22px}

:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}