/* 감마Q 홈페이지 — 삼성 홈페이지 짜임새(큰 사진·큰 글씨·넓은 여백·알약 단추)
   뼈대는 테니스코치 홈페이지 틀을 가져와 색과 글꼴만 브랜드에 맞췄습니다. */
:root{
  --bg:#FFFFFF; --bg-2:#F4F5FA; --bg-3:#0F1438;
  --ink:#12163A; --body:#4A4F68; --muted:#80849A;
  --line:#E3E5EF;
  --brand:#1E2A96; --brand-deep:#101860; --brand-soft:#ECEEFA;
  --pink:#F09EBA; --yellow:#FFD04A;
  --hero-bg:#AED4DF;
  --sans:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  --round:"Jua","Noto Sans KR",sans-serif;
}
*{box-sizing:border-box}
html{overflow-y:scroll;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--sans);font-size:17px;line-height:1.8;font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* 한국어는 낱말 중간에서 끊기면 안 됩니다 */
  word-break:keep-all;overflow-wrap:break-word;
}
img{max-width:100%;display:block}
a{color:var(--brand)}
section[id]{scroll-margin-top:70px}

/* ── 상단 막대 ── */
header.site{
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;
}
.hd{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:8px 32px;min-height:62px;flex-wrap:wrap;
}
.brand{text-decoration:none;display:flex;align-items:center;gap:10px;padding:8px 0}
.brand img{height:38px;width:auto}
.brand-name{font-family:var(--round);font-size:23px;color:var(--brand);letter-spacing:-.01em;line-height:1}
.hd nav{display:flex;flex-wrap:wrap;gap:2px 26px;margin-left:auto}
.hd nav a{
  color:var(--body);text-decoration:none;font-size:15px;font-weight:500;
  padding:8px 0;position:relative;
}
.hd nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--brand);transform:scaleX(0);transition:transform .2s;
}
.hd nav a:hover{color:var(--ink)}
.hd nav a:hover::after{transform:scaleX(1)}
.hd .call{
  background:var(--ink);color:#FFF;text-decoration:none;font-weight:600;font-size:14.5px;
  padding:9px 18px;border-radius:999px;white-space:nowrap;
}
.hd .call:hover{background:var(--brand)}

/* ── 히어로 ── 정사각 제품 사진이라 반반으로 놓고, 바탕색을 사진 배경색에 맞춰 이어 붙입니다 */
.hero{background:var(--hero-bg);overflow:hidden}
.hero-in{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:24px;
  min-height:clamp(460px,72vh,640px);
}
.hero-txt{padding:48px 0}
.hero h1{
  font-weight:900;color:var(--ink);
  font-size:clamp(34px,5.6vw,60px);line-height:1.18;letter-spacing:-.035em;
  margin:0 0 18px;
}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p{
  color:#27305A;font-size:clamp(16px,1.9vw,19px);line-height:1.7;
  margin:0 0 28px;max-width:36ch;
}
.hero-img{align-self:end}
.hero-img img{width:100%;height:auto;max-width:600px;margin-left:auto;
  /* 사진 배경과 칸 배경이 한 끗 달라 경계선이 보입니다. 가장자리를 녹여 이어 붙입니다 */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%)}
.hero-btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;
  padding:14px 28px;border-radius:999px;font-size:16.5px;line-height:1.3;
  transition:transform .15s, background .15s, color .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn-1{background:var(--ink);color:#FFF}
.btn-1:hover{background:var(--brand)}
.btn-2{background:rgba(255,255,255,.55);color:var(--ink);border:1px solid rgba(18,22,58,.18)}
.btn-2:hover{background:#FFF}
.btn-w{background:#FFF;color:var(--ink)}
.btn-w:hover{background:var(--yellow)}
.btn-g{background:rgba(255,255,255,.12);color:#FFF;border:1px solid rgba(255,255,255,.5)}
.btn-g:hover{background:rgba(255,255,255,.24)}

/* ── 띠 ── */
.strip{background:var(--brand);color:#E2E6FF}
.strip-in{
  max-width:1180px;margin:0 auto;padding:16px 24px;
  display:flex;flex-wrap:wrap;gap:6px 34px;justify-content:center;
  font-size:15.5px;font-weight:500;text-align:center;
}
.strip b{color:var(--yellow);font-weight:700}

/* ── 넓은 칸 ── */
.band{padding:84px 0}
.band.gray{background:var(--bg-2)}
.band.dark{background:var(--bg-3);color:#C8CCE4}
.band-in{max-width:1180px;margin:0 auto;padding:0 24px}
.band h2{
  font-weight:800;color:var(--ink);
  font-size:clamp(27px,4.4vw,44px);line-height:1.28;letter-spacing:-.03em;
  margin:0 0 16px;
}
.band.dark h2{color:#FFF}
.band .sub{font-size:clamp(16px,1.8vw,18.5px);line-height:1.75;margin:0 0 42px;max-width:46ch}
.band.dark .sub{color:rgba(200,204,228,.9)}
.kicker{
  display:inline-block;font-family:var(--round);font-size:15px;letter-spacing:.08em;
  color:var(--brand);background:var(--brand-soft);padding:4px 13px;border-radius:999px;margin:0 0 14px;
}
.band.dark .kicker{color:var(--yellow);background:rgba(255,208,74,.12)}

/* ── 제품 카드 ── */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tile{
  background:var(--bg);border-radius:16px;overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:transform .18s, box-shadow .18s;
}
.tile:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(18,22,58,.10)}
.tile img{width:100%;aspect-ratio:3/4;object-fit:cover}
.tile.wide img{aspect-ratio:4/3}
.tile-b{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.tag{
  align-self:flex-start;font-family:var(--round);font-size:13.5px;letter-spacing:.06em;
  color:#FFF;background:var(--brand);padding:2px 11px;border-radius:999px;margin-bottom:10px;
}
.tag.pink{background:#D9678F}
.tag.yellow{background:#E0A800}
.tile h3{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 8px;line-height:1.4;letter-spacing:-.02em}
.tile p{margin:0 0 14px;font-size:15.5px;line-height:1.75;color:var(--body)}
.tile ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.tile li{font-size:13.5px;background:var(--brand-soft);color:var(--brand-deep);padding:3px 10px;border-radius:999px}
.tile .spec{margin-top:auto;font-size:14px;color:var(--muted)}
.tile .more{margin-top:10px;font-size:14.5px;font-weight:600;color:var(--brand)}

/* ── 반반 ── */
.split{display:grid;gap:48px;grid-template-columns:1fr 1fr;align-items:center}
.split.flip .split-txt{order:2}
.split img{width:100%;height:100%;max-height:520px;object-fit:cover;border-radius:18px}
.split p{margin:0 0 16px;font-size:17px;line-height:1.85}
.split p:last-child{margin-bottom:0}
.band.dark .split p{color:#C8CCE4}

/* ── 사용법 3단 ── */
.steps{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.step{background:var(--bg);border-radius:16px;overflow:hidden;border:1px solid var(--line)}
/* 홍보영상(세로)에서 뜬 장면이라 세로로 둡니다 — 가로로 자르면 주인공이 잘립니다 */
.step img{width:100%;aspect-ratio:4/5;object-fit:cover}
.step-b{padding:22px 24px 26px}
.step .num{font-family:var(--round);color:var(--brand);font-size:15px;letter-spacing:.06em}
.step h3{font-size:20px;font-weight:700;color:var(--ink);margin:4px 0 8px;letter-spacing:-.02em}
.step p{margin:0;font-size:15.5px;line-height:1.75}

/* ── 근거 목록 ── */
.facts{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin-top:44px}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.facts{grid-template-columns:1fr}}
.fact{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:20px 22px}
.fact b{display:block;color:var(--pink);font-size:14px;font-weight:600;margin-bottom:6px}
.fact span{display:block;color:#FFF;font-size:16px;line-height:1.6}
.fact small{display:block;color:rgba(200,204,228,.72);font-size:13.5px;margin-top:4px;line-height:1.55}

/* ── 문의 ── */
.cta{
  position:relative;background:var(--brand);color:#E2E6FF;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;inset:0;opacity:.14;
  background:url("img/pattern.jpg") center/420px auto repeat;
}
.cta-in{position:relative;max-width:1180px;margin:0 auto;padding:84px 24px;text-align:center}
.cta img.logo{height:120px;width:auto;margin:0 auto 22px}
.cta h2{
  font-size:clamp(27px,4.4vw,42px);font-weight:800;
  color:#FFF;margin:0 0 12px;line-height:1.3;letter-spacing:-.03em;
}
.cta p{font-size:17px;color:rgba(226,230,255,.9);margin:0 0 30px;line-height:1.75}
.cta .hero-btns{justify-content:center}
.cta .btn{font-size:17.5px;padding:16px 34px}

/* ── 바닥 ── */
footer.site{background:var(--bg-2);border-top:1px solid var(--line);padding:46px 24px}
.ft{max-width:1180px;margin:0 auto;font-size:14.5px;color:var(--muted);line-height:1.9;display:flex;gap:28px;flex-wrap:wrap}
.ft img{height:52px;width:auto}
.ft strong{color:var(--ink);font-size:16px;display:block;margin-bottom:4px}
.ft p{margin:0}
.ft .thin{margin-top:12px;font-size:13px}
.ft a{color:var(--body)}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:26px}
  .split.flip .split-txt{order:0}
  .split img{max-height:360px}
}
@media (max-width:760px){
  .hero-in{grid-template-columns:1fr;min-height:0;gap:0;padding:0 18px}
  .hero-txt{padding:40px 0 8px;order:1}
  .hero-img{order:2}
  .hero-img img{margin:0 auto;max-width:440px}
  .hero p{max-width:none}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .hd{padding:0 16px;min-height:56px;gap:4px 18px}
  .brand img{height:32px}
  .hd nav{width:100%;margin-left:0;gap:2px 18px;padding-bottom:8px}
  .hd nav a{font-size:14.5px}
  .hd .call{display:none}
  .btn{width:100%;text-align:center}
  .hero-btns{width:100%}
  .band{padding:58px 0}
  .band-in{padding:0 18px}
  .cta-in{padding:60px 18px}
  .cta img.logo{height:92px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}