/* ============================================================
   큐리키즈카페 — style.css  (2026.06 v3 · 주황 테마)
   레이아웃/반응형 : 2차(블루형) 유지
   색감/글씨 강조  : 1차(주황형) 적용 — 직원 피드백 반영
   ─ Design Tokens ─
   Color   : Orange #FF6240 · Mint #3CC8C8 · Ink #222233
             Cream #FFF8E8 · BG #FFFDF7
   Spacing : 8 / 16 / 24 / 32 / 48 / 64 / 80 / 120
   Radius  : 16 / 24 / 32 · Container 1400px (pad 80→40→20)
   Type    : H1 clamp(42,6vw,88) · H2 clamp(32,4vw,60) · Body 18
   Motion  : 800ms cubic-bezier(.22,.61,.36,1)
   ============================================================ */

/* ─── 1. 토큰 ─── */
:root {
  --brand:      #FF6240;
  --brand-dk:   #E8481E;
  --brand-lt:   #FFF0EB;
  --brand-soft: #FF8A6B;
  --mint:       #3CC8C8;
  --mint-dk:    #2FB5B5;
  --mint-lt:    #E6F7F7;
  --ink:        #222233;
  --ink2:       #52525E;
  --ink3:       #9494A2;
  --line:       #EDE7DC;
  --bg:         #FFFDF7;
  --cream:      #FFF8E8;
  --peach:      #FFF0E8;
  --tint:       #EAF7F7;
  --dark:       #141428;
  --dark2:      #1E1E38;
  --white:      #FFFFFF;

  --r:          16px;
  --r-lg:       24px;
  --r-xl:       32px;
  --maxw:       1400px;
  --hh:         90px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --dur:        .8s;
  --font:       'Pretendard Variable','Imweb Sans','Pretendard','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}

/* ─── 2. 리셋 & 베이스 ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  font-size:18px;
  line-height:1.8;
  font-weight:500;
  letter-spacing:-0.03em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  word-break:keep-all;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
input,select,textarea,button { font-family:inherit; letter-spacing:-0.02em; }
h1,h2,h3,h4 { letter-spacing:-0.04em; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 80px; }
.text-center { text-align:center; }

/* ─── 3. 스크롤 모션 (AOS 스타일 · 800ms) ─── */
.js-ready .ani {
  opacity:0;
  transform:translateY(36px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change:opacity, transform;
}
.js-ready .ani.ani-l { transform:translateX(-48px); }
.js-ready .ani.ani-r { transform:translateX(48px); }
.js-ready .ani.show { opacity:1; transform:none; }

/* 브랜드 경쟁력 — 이미지/텍스트 좌우 교차 등장 */
.js-ready .ani.alt-item { transform:none; }
.js-ready .alt-item .alt-img-wrap,
.js-ready .alt-item .alt-body {
  opacity:0;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js-ready .alt-item .alt-img-wrap { transform:translateX(-56px); }
.js-ready .alt-item .alt-body { transform:translateX(56px); transition-delay:.08s; }
.js-ready .alt-item.alt-rev .alt-img-wrap { transform:translateX(56px); }
.js-ready .alt-item.alt-rev .alt-body { transform:translateX(-56px); }
.js-ready .alt-item.show .alt-img-wrap,
.js-ready .alt-item.show .alt-body { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .js-ready .ani,
  .js-ready .alt-item .alt-img-wrap,
  .js-ready .alt-item .alt-body { opacity:1 !important; transform:none !important; transition:none !important; }
  .marquee-wrapper, .menu-marquee-wrapper { animation:none !important; }
}

/* ─────────── 4. HEADER (90px · 로고 이미지만) ─────────── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--hh);
  background:transparent;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.scrolled {
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 28px rgba(232,72,30,.08);
}
.header-inner {
  display:flex; align-items:center; gap:28px; height:var(--hh);
}
.logo { display:flex; align-items:center; flex-shrink:0; }
/* 메뉴(브랜드·갤러리…) 글자 크기와 시각적 균형이 맞도록 반응형 확대 */
.logo-img { height:clamp(54px,5.5vw,74px); width:auto; }

.gnb { display:flex; gap:38px; margin-left:auto; }
.gnb a {
  font-weight:600; font-size:16px; color:var(--ink);
  position:relative; padding:6px 0;
  transition:color .25s;
  white-space:nowrap;
}
.gnb a::after {
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:3px; border-radius:3px;
  background:var(--brand);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.gnb a:hover { color:var(--brand-dk); }
.gnb a:hover::after { transform:scaleX(1); }

.header-right { display:flex; align-items:center; gap:12px; }
.tel-btn {
  font-weight:700; font-size:16px; color:var(--brand-dk);
  padding:11px 22px; border-radius:999px;
  border:1.5px solid rgba(255,98,64,.3);
  background:rgba(255,255,255,.65);
  transition:all .25s;
  white-space:nowrap;
}
.tel-btn:hover { border-color:var(--brand); background:#fff; }
.cta-btn {
  font-weight:700; font-size:16px; color:#fff;
  background:var(--brand); padding:13px 28px; border-radius:999px;
  box-shadow:0 8px 20px rgba(255,98,64,.3);
  transition:background .25s, transform .25s;
  white-space:nowrap;
}
.cta-btn:hover { background:var(--brand-dk); transform:scale(1.03); }

.menu-toggle {
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:44px; height:44px; background:none; border:none; cursor:pointer; padding:5px;
}
.menu-toggle span {
  display:block; width:24px; height:2.5px;
  background:var(--ink); border-radius:2px; transition:all .3s var(--ease);
}
.menu-toggle.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.menu-toggle.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

/* ─────────── 5. HERO (좌 텍스트 5 : 우 이미지 5) ─────────── */
.hero {
  position:relative;
  min-height:90vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--hh) + 56px) 0 88px;
  background:
    radial-gradient(720px 540px at 88% 6%, rgba(255,98,64,.14), transparent 64%),
    radial-gradient(560px 460px at -6% 88%, rgba(60,200,200,.08), transparent 60%),
    var(--bg);
  overflow:hidden;
}
.hero-bg, .hero-bg-img { display:none; }
.hero-inner {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,80px);
  align-items:center;
  width:100%;
}
.hero-text { max-width:640px; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:800; letter-spacing:.16em;
  color:var(--brand-dk);
  background:#fff;
  border:1.5px solid rgba(255,98,64,.22);
  border-radius:999px;
  padding:10px 22px;
  margin-bottom:32px;
  box-shadow:0 4px 16px rgba(232,72,30,.07);
}
.hero-eyebrow::before {
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--brand); flex-shrink:0;
}
.hero-title {
  font-size:clamp(42px,6vw,88px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-0.045em;
  color:var(--ink);
  margin-bottom:28px;
}
.hero-title em {
  font-style:normal;
  color:var(--brand);
}
.hero-desc {
  font-size:clamp(17px,1.4vw,20px);
  color:var(--ink2);
  line-height:1.8;
  margin-bottom:40px;
}
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-btns--cta { margin-top:20px; }

.hero-cta-link { display:inline-block; transition:transform .3s var(--ease); }
.hero-cta-link:hover { transform:scale(1.03); }
.hero-cta-img { max-width:380px; border-radius:var(--r-lg); }
.hero-cta-fallback { display:none; }
.hero-cta-link--fallback .hero-cta-fallback {
  display:inline-flex; align-items:center; gap:10px;
  height:52px; padding:0 28px;
  font-size:16px; font-weight:700; color:var(--brand-dk);
  background:var(--brand-lt);
  border:1.5px solid rgba(255,98,64,.4);
  border-radius:999px;
}
.hero-cta-link--fallback .hero-cta-fallback::before { content:'🛠'; }

/* 우측 비주얼 */
.hero-visual { position:relative; z-index:1; }
.hero-visual-img {
  width:100%;
  height:clamp(380px,42vw,580px);
  object-fit:cover;
  border-radius:var(--r-xl);
  box-shadow:0 40px 80px rgba(232,72,30,.16);
}
.hero-blob {
  position:absolute; z-index:-1;
  top:-36px; right:-40px;
  width:62%; height:62%;
  background:#FFD9CB;
  border-radius:53% 47% 62% 38% / 48% 56% 44% 52%;
  animation:qriBlob 9s ease-in-out infinite alternate;
}
@keyframes qriBlob {
  0%   { border-radius:53% 47% 62% 38% / 48% 56% 44% 52%; transform:rotate(0deg); }
  100% { border-radius:42% 58% 46% 54% / 56% 42% 58% 44%; transform:rotate(8deg); }
}
.hero-chip {
  position:absolute;
  display:flex; flex-direction:column; gap:2px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  border-radius:20px;
  padding:16px 26px;
  box-shadow:0 18px 44px rgba(232,72,30,.15);
  animation:qriFloat 5.5s ease-in-out infinite;
}
.hero-chip strong { font-size:24px; font-weight:800; color:var(--brand); line-height:1.2; }
.hero-chip span { font-size:13px; font-weight:600; color:var(--ink3); }
.hero-chip-1 { left:-26px; bottom:42px; }
.hero-chip-2 { right:-18px; top:34px; animation-delay:1.6s; }
@keyframes qriFloat {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-12px); }
}
.hero-scroll { display:none; }

/* ── HERO · 패밀리 브랜드 5블록 (사이트 분산 버튼 강조) ── */
.hero-family { width:100%; margin-top:clamp(56px,7vw,96px); }
.family-label {
  text-align:center; font-size:16px; font-weight:800; letter-spacing:-.01em;
  color:var(--ink); margin-bottom:22px;
}
.family-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  width:100%;
}
.family-card {
  --bc:var(--brand);
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start;
  text-align:left;
  padding:26px 22px 22px;
  min-height:190px;
  border-radius:var(--r-lg);
  background:#fff;
  border:1.5px solid var(--line);
  box-shadow:0 6px 20px rgba(34,34,51,.05);
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  cursor:pointer;
}
.family-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background:var(--bc);
}
.family-card:hover {
  transform:translateY(-10px);
  border-color:var(--bc);
  box-shadow:0 24px 48px rgba(34,34,51,.14);
}
.family-card__badge {
  position:absolute; top:16px; right:16px;
  font-size:10px; font-weight:800; letter-spacing:.08em;
  color:#fff; background:var(--bc);
  padding:4px 10px; border-radius:999px;
}
.family-card__eng {
  font-size:11px; font-weight:800; letter-spacing:.12em;
  color:var(--bc); margin-bottom:8px; text-transform:uppercase;
}
.family-card__title {
  font-size:clamp(16px,1.3vw,19px); font-weight:800; color:var(--ink);
  letter-spacing:-.03em; line-height:1.3; margin-bottom:6px;
}
.family-card__desc {
  font-size:13px; font-weight:600; color:var(--ink2); line-height:1.6;
}
.family-card__go {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:auto;
  margin-bottom:-2px;
  padding:9px 18px; border-radius:999px;
  font-size:13px; font-weight:800;
  color:var(--bc);
  background:#fff;
  border:1.5px solid var(--bc);
  transition:background .25s, color .25s, transform .25s;
}
.family-card:hover .family-card__go {
  background:var(--bc); color:#fff; transform:scale(1.04);
}
.family-card__desc { margin-bottom:16px; }
.brand-qri      { --bc:#FF6240; }
.brand-lycka    { --bc:#3CC8C8; }
.brand-eaqua    { --bc:#38A8E0; }
.brand-silence  { --bc:#7C80E8; }
.brand-kmanager { --bc:#4A78D8; }
.brand-qri { background:linear-gradient(180deg,#FFF7F3,#fff); }

/* ─────────── 6. BUTTONS (radius 999 · h 56) ─────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:56px; padding:0 32px;
  font-weight:700; font-size:17px;
  border-radius:999px; cursor:pointer; border:none;
  transition:transform .3s var(--ease), background .3s, color .3s, box-shadow .3s;
  white-space:nowrap;
}
.btn:hover { transform:scale(1.03); }
.btn-primary {
  background:var(--brand); color:#fff;
  box-shadow:0 12px 28px rgba(255,98,64,.32);
}
.btn-primary:hover { background:var(--brand-dk); }
.btn-ghost {
  background:#fff; color:var(--brand-dk);
  border:2px solid rgba(255,98,64,.28);
}
.btn-ghost:hover { border-color:var(--brand); }
.btn-white {
  background:rgba(255,255,255,.16); color:#fff;
  border:1.5px solid rgba(255,255,255,.45); backdrop-filter:blur(4px);
}
.btn-white:hover { background:rgba(255,255,255,.28); }
.btn-outline {
  background:transparent; color:var(--brand);
  border:2px solid var(--brand);
}
.btn-outline:hover { background:var(--brand); color:#fff; }
.btn-brand {
  background:var(--brand); color:#fff;
  box-shadow:0 12px 28px rgba(255,98,64,.32);
}
.btn-brand:hover { background:var(--brand-dk); }
.btn-block { width:100%; }

/* ─────────── 7. STAT ROW (화이트 밴드 · 주황 카운터 — 1차 색감) ─────────── */
.stat-row {
  background:#fff;
  border-bottom:1px solid var(--line);
  position:relative;
}
.stat-inner { display:flex; align-items:stretch; }
.stat-box { flex:1; text-align:center; padding:52px 16px; }
.stat-box strong {
  display:block;
  font-size:clamp(32px,3.4vw,52px); font-weight:800; color:var(--brand);
  letter-spacing:-.03em; line-height:1.15; margin-bottom:8px;
}
.stat-box strong .cnt { color:var(--brand); }
.stat-box p { font-size:clamp(16px,1.3vw,19px); font-weight:700; color:var(--ink2); }
.stat-sep { width:1px; background:var(--line); margin:44px 0; flex-shrink:0; }

/* ─────────── 8. 공통 섹션 ─────────── */
.section { padding:120px 0; }
.section-white { background:#fff; }
.section-cream { background:var(--cream); }
.section-mint  { background:var(--tint); }
.section-peach { background:var(--peach); }
.section-dark  {
  background:
    radial-gradient(640px 480px at 90% 0%, rgba(255,98,64,.10), transparent 60%),
    linear-gradient(150deg,var(--dark2) 0%,var(--dark) 78%);
}
.sec-head { margin-bottom:64px; max-width:760px; }
.eyebrow {
  display:inline-block;
  font-size:14px; font-weight:800; letter-spacing:.18em;
  color:var(--brand); text-transform:uppercase;
  margin-bottom:16px;
}
.eyebrow-light { color:var(--brand-soft); }
.sec-title {
  font-size:clamp(32px,4vw,60px);
  font-weight:800; line-height:1.22; letter-spacing:-.04em;
  color:var(--ink);
  margin-bottom:20px;
}
.sec-title em {
  font-style:normal;
  color:var(--brand);
}
.sec-title-light { color:#fff; }
.sec-title-light em,
.tech-em {
  font-style:normal; color:var(--brand); background:none;
}
.sec-lead {
  font-size:clamp(16px,1.3vw,19px); color:var(--ink2);
  line-height:1.85; max-width:640px;
}
.sec-lead-light { color:rgba(255,255,255,.66); max-width:560px; }

/* ─────────── 9. 브랜드 소개 (원형 이미지 45 : 텍스트 55) ─────────── */
.intro-grid {
  display:grid; grid-template-columns:45fr 55fr;
  gap:clamp(48px,6vw,96px);
  align-items:center;
  margin-bottom:96px;
}
.intro-visual { position:relative; padding:24px; }
.intro-circle {
  width:100%; aspect-ratio:1/1;
  border-radius:50%; overflow:hidden;
  border:12px solid #fff;
  box-shadow:0 36px 72px rgba(232,72,30,.13);
  position:relative; z-index:1;
}
.intro-circle img { width:100%; height:100%; object-fit:cover; }
.intro-circle-mini {
  position:absolute; z-index:2;
  width:38%; aspect-ratio:1/1;
  right:-2%; bottom:-2%;
  border-radius:50%; overflow:hidden;
  border:8px solid var(--cream);
  box-shadow:0 20px 44px rgba(232,72,30,.15);
  animation:qriFloat 6s ease-in-out infinite;
}
.intro-circle-mini img { width:100%; height:100%; object-fit:cover; }
.intro-deco { position:absolute; border-radius:50%; }
.intro-deco-1 {
  width:64px; height:64px; left:-6px; top:6%;
  background:var(--brand);
  opacity:.85;
  animation:qriFloat 7s ease-in-out infinite;
}
.intro-deco-2 {
  width:26px; height:26px; left:14%; bottom:4%;
  background:var(--mint);
}
.intro-text .sec-lead { margin-bottom:32px; }
.intro-checks { display:flex; flex-direction:column; gap:14px; }
.intro-checks li {
  position:relative;
  padding:16px 22px 16px 58px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--r);
  font-size:16px; font-weight:600; color:var(--ink);
  line-height:1.6;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.intro-checks li:hover {
  transform:translateX(8px);
  border-color:rgba(255,98,64,.55);
  box-shadow:0 10px 26px rgba(232,72,30,.08);
}
.intro-checks li::before {
  content:'✓';
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background:var(--brand); color:#fff;
  font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* ── 브랜드 듀오 카드 ── */
.brand-duo { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.duo-card {
  display:flex; flex-direction:column;
  background:#fff; border-radius:var(--r-xl); overflow:hidden;
  border:1.5px solid var(--line);
  box-shadow:0 10px 32px rgba(34,34,51,.06);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.duo-card:hover {
  transform:translateY(-10px);
  border-color:rgba(255,98,64,.5);
  box-shadow:0 32px 64px rgba(34,34,51,.13);
}
.duo-thumb { position:relative; height:320px; overflow:hidden; }
.duo-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.duo-card:hover .duo-thumb img { transform:scale(1.05); }
.duo-tag {
  position:absolute; top:20px; left:20px;
  font-size:12px; font-weight:800; letter-spacing:.1em;
  padding:9px 18px; border-radius:999px;
  backdrop-filter:blur(6px);
}
.duo-tag-brand { background:rgba(255,98,64,.92); color:#fff; }
.duo-tag-mint  { background:rgba(60,200,200,.92); color:#fff; }
.duo-body { padding:32px 36px 38px; }
.duo-body h3 { font-size:clamp(22px,2vw,28px); font-weight:800; margin-bottom:12px; color:var(--ink); }
.duo-body p { font-size:16px; color:var(--ink2); line-height:1.8; margin-bottom:20px; }
.duo-more { font-size:15px; font-weight:800; color:var(--brand); }
.duo-card:hover .duo-more { color:var(--brand-dk); text-decoration:underline; }

/* ─────────── 10. 영상 ─────────── */
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.video-frame {
  position:relative; padding-top:56.25%;
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--dark);
  box-shadow:0 16px 40px rgba(34,34,51,.12);
}
.video-frame iframe {
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-more { text-align:center; margin-top:48px; }

/* ─────────── 11. 안전 인증 (포토 오버레이 카드 · 구형 디자인 리터치) ───────────
   상단 3개 + 하단 2개 중앙 정렬 · 사진 위 어두운 베일 + 흰 타이틀 + 인증 배지 */
.cert-grid {
  display:grid; grid-template-columns:repeat(6,1fr); gap:22px;
}
.cert-card {
  position:relative;
  grid-column:span 2;
  aspect-ratio:1 / 1.18;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 14px 36px rgba(20,20,40,.16);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* 4번째 카드부터 둘째 줄 — 가운데 정렬 (6컬럼 중 2~3, 4~5) */
.cert-card:nth-child(4) { grid-column:2 / span 2; }
.cert-card:hover {
  transform:translateY(-10px);
  box-shadow:0 28px 56px rgba(20,20,40,.26);
}
.cert-bg {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.cert-card:hover .cert-bg { transform:scale(1.06); }
.cert-veil {
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(18,18,34,.74) 0%,
    rgba(18,18,34,.38) 38%,
    rgba(18,18,34,.10) 62%,
    rgba(18,18,34,.52) 100%);
  transition:background .3s;
}
.cert-card:hover .cert-veil {
  background:linear-gradient(180deg,
    rgba(18,18,34,.80) 0%,
    rgba(18,18,34,.44) 38%,
    rgba(18,18,34,.16) 62%,
    rgba(18,18,34,.60) 100%);
}
.cert-body {
  position:absolute; top:0; left:0; right:0;
  padding:26px 24px 0;
}
.cert-card h3 {
  font-size:clamp(19px,1.8vw,25px); font-weight:800; color:#fff;
  line-height:1.32; letter-spacing:-.03em;
  margin-bottom:12px;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.cert-card h3::after {
  content:''; display:block;
  width:34px; height:3px; border-radius:3px;
  background:var(--brand);
  margin-top:14px;
}
.cert-card p {
  font-size:13.5px; font-weight:600;
  color:rgba(255,255,255,.85); line-height:1.6;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}
/* 인증 로고 배지 — 박스 없이 사진 위에 로고만 (구형 디자인 방식)
   투명 PNG 로고 + 흰 글로우로 어두운 사진 위에서도 또렷하게 */
.cert-badge {
  position:absolute; left:22px; bottom:20px;
  display:inline-flex; align-items:center; flex-wrap:wrap;
  gap:10px 16px;
  max-width:calc(100% - 44px);
}
.cert-badge img {
  height:34px; width:auto; display:block;
  filter:
    drop-shadow(0 0 1.5px rgba(255,255,255,.95))
    drop-shadow(0 0 7px rgba(255,255,255,.85))
    drop-shadow(0 0 14px rgba(255,255,255,.55));
}
.cert-badge span {
  font-size:13px; font-weight:800; color:#fff;
  letter-spacing:.04em; white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* 인증서 벽 */
.cert-wall {
  margin-top:48px; border-radius:var(--r-xl); overflow:hidden;
  border:1.5px solid var(--line); background:#fff;
}
.cert-wall img { width:100%; max-height:440px; object-fit:cover; }
.cert-wall p { padding:20px 24px; font-size:15px; color:var(--ink2); text-align:center; }

/* ─────────── 12. 브랜드 경쟁력 (좌우 교차) ─────────── */
.alt-list { display:flex; flex-direction:column; gap:clamp(72px,8vw,120px); }
.alt-item {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,88px); align-items:center;
}
.alt-item.alt-rev .alt-img-wrap { order:2; }
.alt-item.alt-rev .alt-body { order:1; }

.alt-img-wrap { display:flex; justify-content:center; width:100%; }
.alt-img {
  width:100%; height:clamp(300px,30vw,420px);
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:0 28px 56px rgba(34,34,51,.12);
  position:relative;
}
.alt-img::after {
  content:''; position:absolute; inset:0;
  border-radius:var(--r-xl);
  border:1px solid rgba(34,34,51,.07);
  pointer-events:none;
}
.alt-img img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.alt-item:hover .alt-img img { transform:scale(1.04); }

.alt-tag {
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(50px,4.6vw,68px); height:clamp(50px,4.6vw,68px);
  border-radius:50%;
  font-size:clamp(18px,1.7vw,24px); font-weight:800;
  color:#fff; background:var(--brand);
  box-shadow:0 10px 24px rgba(255,98,64,.3);
  margin-bottom:22px; line-height:1;
}
/* 01·02·03… 숫자: 좌우로 미끄러져 들어와 가운데 정지 */
.js-ready .alt-item.show .alt-tag {
  animation:qriTagInL 1.1s var(--ease) .15s both;
}
.js-ready .alt-item.alt-rev.show .alt-tag {
  animation-name:qriTagInR;
}
@keyframes qriTagInL {
  0%   { opacity:0; transform:translateX(-70px) scale(.7); }
  45%  { opacity:1; transform:translateX(16px) scale(1.06); }
  70%  { transform:translateX(-8px) scale(1); }
  100% { transform:translateX(0) scale(1); }
}
@keyframes qriTagInR {
  0%   { opacity:0; transform:translateX(70px) scale(.7); }
  45%  { opacity:1; transform:translateX(-16px) scale(1.06); }
  70%  { transform:translateX(8px) scale(1); }
  100% { transform:translateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .alt-item.show .alt-tag { animation:none; }
}
.alt-body h3 {
  font-size:clamp(24px,2.6vw,36px); font-weight:800;
  margin-bottom:18px; color:var(--ink); line-height:1.3;
}
.alt-body p { font-size:17px; color:var(--ink2); line-height:1.9; }
.alt-body strong { color:var(--brand-dk); font-weight:800; }

/* ─────────── 13. 무상 제공 기술 ─────────── */
.tech-section {
  background:
    radial-gradient(700px 500px at 8% 10%, rgba(255,98,64,.12), transparent 60%),
    linear-gradient(150deg,var(--dark) 0%,var(--dark2) 100%);
}
/* 「큐리 가맹점은 전부 무료」 강조 라인 */
.tech-free-line { text-align:center; margin:4px auto 0; }
.tech-free-pill {
  display:inline-block;
  font-size:clamp(16px,1.6vw,21px); font-weight:700;
  color:#fff;
  background:rgba(255,98,64,.16);
  border:1.5px solid rgba(255,138,107,.55);
  border-radius:999px;
  padding:13px 30px;
  line-height:1.5;
  box-shadow:0 10px 30px rgba(255,98,64,.18);
}
.tech-free-pill strong { color:#FFC9B5; font-weight:800; }

.tech-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:28px; }
.tech-card {
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-xl); overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.tech-card:hover {
  transform:translateY(-10px);
  border-color:rgba(255,98,64,.55);
  background:rgba(255,255,255,.09);
}
.tech-thumb { height:210px; overflow:hidden; background:var(--dark); }
.tech-thumb img { width:100%; height:100%; object-fit:cover; opacity:.94; transition:transform .6s var(--ease); }
.tech-card:hover .tech-thumb img { transform:scale(1.05); }
.tech-body { padding:28px 30px 34px; }
.tech-badge {
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em;
  color:#FFB59E; background:rgba(255,98,64,.16);
  border:1px solid rgba(255,176,144,.35);
  padding:6px 16px; border-radius:999px; margin-bottom:16px;
}
.tech-body h3 { font-size:21px; font-weight:800; color:#fff; margin-bottom:12px; line-height:1.4; }
.tech-body p { font-size:15px; color:rgba(255,255,255,.6); line-height:1.85; }
.tech-body strong { color:rgba(255,255,255,.92); }

/* ─────────── 14. 구성 소개 ─────────── */
.space-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.space-card {
  border-radius:var(--r-lg); overflow:hidden; background:#fff;
  border:1.5px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.space-card:hover {
  transform:translateY(-10px);
  border-color:rgba(255,98,64,.4);
  box-shadow:0 24px 48px rgba(34,34,51,.12);
}
.space-thumb { position:relative; height:220px; overflow:hidden; }
.space-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.space-card:hover .space-thumb img { transform:scale(1.07); }
.space-overlay {
  position:absolute; bottom:12px; left:14px;
  font-size:13px; font-weight:800; color:#fff;
  background:rgba(255,98,64,.92);
  padding:6px 14px; border-radius:999px;
}
.space-body { padding:22px 24px 26px; }
.space-body h3 { font-size:18px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.space-body p { font-size:14px; color:var(--ink2); line-height:1.75; }

/* ─────────── 15. 메뉴 (CJ · 1줄 마퀴) ─────────── */
.menu-section { overflow:hidden; padding-bottom:100px; }
.eyebrow-cj { color:var(--brand); letter-spacing:.18em; }
.cj-brand { color:#E8420B; font-weight:800; }
.menu-lead-cj { margin-bottom:8px; }
.menu-cj-note {
  display:inline-block;
  font-size:14px; font-weight:700; color:var(--brand-dk);
  background:var(--brand-lt);
  border:1px solid rgba(255,98,64,.25);
  padding:9px 20px; border-radius:999px;
  margin-top:12px;
}
.menu-marquee-zone { margin-top:48px; }
.menu-marquee-wrapper { display:flex; width:max-content; }
.menu-marquee-item {
  width:280px; flex-shrink:0; padding:0 12px; text-align:center;
}
.menu-marquee-img {
  height:210px; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 12px 30px rgba(34,34,51,.10);
  margin-bottom:14px;
}
.menu-marquee-img img { width:100%; height:100%; object-fit:cover; }
.menu-marquee-item p { font-size:16px; font-weight:800; color:var(--ink); }
/* 메뉴 하단 안내 — 주황 강조 */
.menu-real-note {
  text-align:center; margin-top:30px;
  font-size:clamp(15px,1.5vw,19px); font-weight:800;
  color:var(--brand); letter-spacing:-.02em;
}

/* ─────────── 16. 갤러리 (3줄 마퀴) ─────────── */
.gallery-section { padding:120px 0; background:#fff; overflow:hidden; }
.gallery-section .sec-head { margin-bottom:48px; }
.marquee-zone { display:flex; flex-direction:column; gap:20px; }
.marquee-wrapper { display:flex; width:max-content; }
.marquee-left  { animation:qriScrollLeft 42s linear infinite; }
.marquee-right { animation:qriScrollRight 47s linear infinite; }
.marquee-slow  { animation-duration:52s; }
.marquee-zone:hover .marquee-wrapper,
.menu-marquee-zone:hover .menu-marquee-wrapper { animation-play-state:paused; }
.marquee-item { width:340px; height:240px; flex-shrink:0; padding:0 10px; }
.marquee-item img {
  width:100%; height:100%; object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:0 8px 22px rgba(34,34,51,.08);
}
@keyframes qriScrollLeft  { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes qriScrollRight { from { transform:translateX(-50%); } to { transform:translateX(0); } }

/* ─────────── 17. 수익 현황 ─────────── */
.revenue-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:40px; }
.rev-highlight {
  background:linear-gradient(140deg,var(--brand) 0%,var(--brand-dk) 100%);
  color:#fff; border-radius:var(--r-xl);
  padding:48px 44px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.rev-highlight::after {
  content:''; position:absolute; right:-60px; bottom:-80px;
  width:240px; height:240px; border-radius:50%;
  background:rgba(255,255,255,.12);
}
.rev-label { font-size:15px; font-weight:600; opacity:.85; margin-bottom:16px; }
.rev-big {
  font-size:clamp(34px,4vw,58px); font-weight:800; line-height:1.1;
  color:#fff; letter-spacing:-.02em;
}
.rev-big span { font-size:.5em; color:rgba(255,255,255,.85); font-weight:700; margin-left:4px; }
.rev-sub { font-size:14px; opacity:.7; margin-top:12px; }
.rev-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.rev-card {
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:28px 26px;
  display:flex; flex-direction:column; justify-content:center;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.rev-card:hover { transform:translateY(-6px); box-shadow:0 16px 36px rgba(34,34,51,.1); }
.rev-card h4 { font-size:15px; font-weight:700; color:var(--ink3); margin-bottom:8px; }
.rev-num { font-size:clamp(19px,1.7vw,24px); font-weight:800; color:var(--ink); }
.rev-num span { font-size:.7em; font-weight:700; margin-left:2px; }

.rev-profit {
  display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,48px);
  background:#fff; border:1.5px solid #FFD2C2;
  border-radius:var(--r-lg); padding:36px 32px;
}
.rp-item { text-align:center; }
.rp-item span { display:block; font-size:14px; font-weight:600; color:var(--ink3); margin-bottom:6px; }
.rp-item strong { font-size:clamp(18px,1.8vw,26px); font-weight:800; color:var(--ink); }
.rp-item.rp-main strong { color:var(--brand); }
.rp-item.rp-main span { color:var(--brand-dk); font-weight:800; }
.rp-arrow { font-size:26px; color:var(--brand); font-weight:800; }

/* ─────────── 18. 후기 / 언론 ─────────── */
.rp-block-title {
  font-size:clamp(20px,1.8vw,26px); font-weight:800;
  color:var(--ink); margin-bottom:26px;
}
.link-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.link-card {
  display:flex; flex-direction:column;
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  border:1.5px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.link-card:hover {
  transform:translateY(-10px);
  border-color:rgba(255,98,64,.5);
  box-shadow:0 24px 52px rgba(34,34,51,.12);
}
.link-thumb { position:relative; height:200px; overflow:hidden; background:var(--mint-lt); }
.link-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.link-card:hover .link-thumb img { transform:scale(1.06); }
.link-kind {
  position:absolute; top:14px; left:14px;
  font-size:12px; font-weight:800; color:#fff;
  padding:6px 15px; border-radius:999px;
}
.link-kind-review { background:rgba(60,200,200,.95); }
.link-kind-press  { background:rgba(34,34,51,.88); }
.link-body { padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; }
.link-body h4 { font-size:18px; font-weight:800; color:var(--ink); margin-bottom:10px; line-height:1.45; }
.link-body p { font-size:14px; color:var(--ink2); line-height:1.75; flex:1; }
.link-more { margin-top:16px; font-size:14px; font-weight:800; color:var(--brand); }
.link-card:hover .link-more { color:var(--brand-dk); text-decoration:underline; }

/* ─────────── 19. TRUST (시공 비교) ─────────── */
.trust-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.trust-card {
  border-radius:var(--r-xl); overflow:hidden;
  padding:32px;
  display:flex; flex-direction:column; gap:22px;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.trust-card:hover { transform:translateY(-8px); }
.trust-card--bad {
  background:#F6F4F0;
  border:1.5px solid #E5E0D5;
}
.trust-card--good {
  background:#fff;
  border:2px solid var(--brand);
  box-shadow:0 24px 56px rgba(232,72,30,.13);
}
.trust-pill {
  align-self:flex-start;
  font-size:14px; font-weight:800;
  padding:9px 22px; border-radius:999px;
}
.trust-pill--bad { background:#5B5B66; color:#fff; }
.trust-pill--good { background:var(--brand); color:#fff; }
.trust-thumb { border-radius:var(--r-lg); overflow:hidden; height:300px; }
.trust-thumb img { width:100%; height:100%; object-fit:cover; }
.trust-card--bad .trust-thumb img { filter:saturate(.7); }
.trust-text { font-size:16px; color:var(--ink2); line-height:1.8; }
.trust-text--good { color:var(--ink); font-weight:700; }

/* ─────────── 20. 공정위 등록 ─────────── */
.ftc-section {
  background:
    radial-gradient(560px 420px at 12% 100%, rgba(255,98,64,.12), transparent 62%),
    linear-gradient(160deg,var(--dark) 0%,var(--dark2) 90%);
  padding:120px 0;
}
.ftc-inner { text-align:center; max-width:880px; margin:0 auto; }
.ftc-title {
  font-size:clamp(28px,3.4vw,48px); font-weight:800; color:#fff;
  margin-bottom:40px; letter-spacing:-.04em;
}
.ftc-box {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);
  padding:clamp(28px,4vw,52px);
  margin-bottom:40px;
  text-align:left;
}
.ftc-box-title {
  font-size:clamp(19px,2vw,25px); font-weight:800; color:var(--brand-soft);
  margin-bottom:20px; line-height:1.5;
}
.ftc-box p { font-size:16px; color:rgba(255,255,255,.72); line-height:1.9; margin-bottom:16px; }
.ftc-box strong { color:#fff; }
.ftc-quote {
  font-size:clamp(18px,1.8vw,23px) !important;
  font-weight:800; color:#fff !important;
  text-align:center; padding:18px 0 6px;
}
.ftc-note { font-size:14px !important; color:rgba(255,255,255,.5) !important; text-align:center; margin-bottom:0 !important; }
.ftc-btn {
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--brand); color:#fff;
  border-radius:999px; padding:20px 56px;
  box-shadow:0 18px 44px rgba(255,98,64,.36);
  transition:transform .3s var(--ease), background .3s;
}
.ftc-btn:hover { transform:scale(1.04); background:var(--brand-dk); }
.ftc-btn-main { font-size:19px; font-weight:800; }
.ftc-btn-sub { font-size:13px; font-weight:700; opacity:.85; }

/* ─────────── 21. STARTUP PROCESS ─────────── */
.sp-wrap { margin-top:80px; }
.sp-row {
  display:flex; justify-content:space-between; position:relative;
  margin-bottom:64px;
}
.sp-row:last-child { margin-bottom:0; }
.sp-row::before {
  content:''; position:absolute; top:48px; left:5%; width:90%; height:2px;
  background:var(--line); z-index:1;
}
.sp-step { position:relative; z-index:2; text-align:center; flex:1; padding:0 12px; }
.sp-circle {
  width:96px; height:96px; border-radius:50%;
  background:var(--brand-lt); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
  font-size:27px; font-weight:800; margin:0 auto 24px;
  border:8px solid var(--bg);
  box-shadow:0 6px 14px rgba(232,72,30,.07);
  transition:all .4s var(--ease);
}
.section-white .sp-circle { border-color:#fff; }
.sp-step:hover .sp-circle {
  background:var(--brand); color:#fff; transform:scale(1.12);
  box-shadow:0 18px 36px rgba(255,98,64,.32);
}
.sp-step-last .sp-circle {
  background:var(--brand); color:#fff;
  box-shadow:0 12px 30px rgba(255,98,64,.32);
}
.sp-title { font-weight:800; font-size:19px; margin-bottom:8px; color:var(--ink); }
.sp-step:hover .sp-title { color:var(--brand-dk); }
.sp-desc { font-size:14px; color:var(--ink2); line-height:1.7; }

/* ─────────── 22. 전국 지점 현황 ─────────── */
.branch-table-wrap {
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  border:1.5px solid var(--line);
  box-shadow:0 14px 40px rgba(34,34,51,.08);
  max-width:1000px; margin:0 auto;
}
.branch-table { width:100%; border-collapse:collapse; text-align:center; }
.branch-table thead tr { background:var(--brand); color:#fff; }
.branch-table th { padding:20px 16px; font-size:16px; font-weight:800; }
.branch-table td { padding:18px 16px; border-top:1px solid var(--line); font-size:16px; }
.branch-table tbody tr { transition:background .25s; }
.branch-table tbody tr:hover { background:var(--brand-lt); }
.bt-name { font-weight:800; color:var(--ink); }
.bt-addr { color:var(--ink2); }
.bt-link-col { width:160px; }
.bt-btn {
  display:inline-block; font-size:14px; font-weight:800; color:#fff;
  background:var(--mint); padding:11px 22px; border-radius:999px;
  transition:background .25s, transform .25s;
  white-space:nowrap;
}
.bt-btn:hover { background:var(--mint-dk); transform:scale(1.04); }
.bt-btn-dis { background:#EEEAE0; color:var(--ink3); cursor:default; }
.bt-btn-dis:hover { background:#EEEAE0; transform:none; }
.branch-paging { display:flex; justify-content:center; gap:10px; margin-top:36px; }
.bp-num {
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:14px; font-weight:800; font-size:15px;
  background:#fff; color:var(--ink3); border:1.5px solid var(--line);
  transition:all .25s;
}
.bp-num:hover { border-color:var(--brand); color:var(--brand); }
.bp-num.on {
  background:var(--brand); color:#fff; border-color:var(--brand);
  box-shadow:0 10px 22px rgba(255,98,64,.3);
}
/* "···" — 클릭 요소 아님, 지점이 더 많다는 표기 */
.bp-dots {
  background:transparent; border:none; cursor:default;
  color:var(--ink3); font-size:18px; letter-spacing:1px;
}
.bp-dots:hover { border:none; color:var(--ink3); }

/* ─────────── 23. 인스타 ─────────── */
.insta-icon { font-size:44px; margin-bottom:16px; }

/* ─────────── 24. 상담 문의 ─────────── */
.contact-wrap {
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:clamp(40px,5vw,88px); align-items:start;
}
.contact-tel {
  display:inline-block;
  font-size:clamp(30px,3.2vw,44px); font-weight:800; color:var(--brand);
  margin-top:28px; letter-spacing:-.02em;
  transition:transform .3s var(--ease);
}
.contact-tel:hover { transform:scale(1.03); }
.contact-hours { margin-top:10px; font-size:14px; color:rgba(255,255,255,.45); }

.contact-form {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-xl);
  padding:clamp(28px,3vw,44px);
  backdrop-filter:blur(8px);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-col { display:flex; flex-direction:column; gap:8px; }
.form-col.full { margin-bottom:16px; }
.form-col label { font-size:14px; font-weight:700; color:rgba(255,255,255,.65); }
.form-col label em { color:var(--brand-soft); font-style:normal; }
.form-col input, .form-col select, .form-col textarea {
  padding:15px 18px; border:1.5px solid rgba(255,255,255,.14);
  border-radius:var(--r); background:rgba(255,255,255,.07); color:#fff;
  font-size:16px; transition:border-color .25s, background .25s;
}
.form-col input::placeholder, .form-col textarea::placeholder { color:rgba(255,255,255,.32); }
.form-col input:focus, .form-col select:focus, .form-col textarea:focus {
  outline:none; border-color:var(--brand); background:rgba(255,255,255,.1);
}
.form-col select option { background:var(--dark2); color:#fff; }
.form-col textarea { resize:vertical; }

.privacy-label {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:14px; color:rgba(255,255,255,.55); cursor:pointer;
  margin:20px 0;
}
.privacy-label input { width:17px; height:17px; accent-color:var(--brand); flex-shrink:0; }
.privacy-label em { color:var(--brand-soft); font-style:normal; }
.privacy-view {
  background:none; border:none; cursor:pointer;
  font-size:13px; font-weight:700; color:rgba(255,255,255,.7);
  text-decoration:underline; padding:0;
}
.privacy-box {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r); padding:16px 18px; margin-bottom:16px;
  font-size:13px; color:rgba(255,255,255,.58); line-height:1.8;
  max-height:190px; overflow-y:auto;
}
.section-dark .btn-primary {
  background:var(--brand); color:#fff;
  box-shadow:0 14px 32px rgba(255,98,64,.3);
}
.section-dark .btn-primary:hover { background:var(--brand-dk); }
.form-note { font-size:13px; color:rgba(255,255,255,.32); text-align:center; margin-top:14px; }

/* ─────────── 25. FOOTER ─────────── */
.site-footer { background:#0C0C1E; padding:64px 0 0; }
.foot-inner {
  display:grid; grid-template-columns:1fr auto auto; gap:36px 64px;
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08);
  align-items:start;
}
.foot-brand { font-size:21px; font-weight:800; color:#fff; }
.foot-sub { margin-top:8px; font-size:14px; color:rgba(255,255,255,.4); }
.foot-links { display:flex; flex-direction:column; gap:12px; }
.foot-links a {
  font-size:14px; font-weight:700; color:rgba(255,255,255,.48);
  transition:color .25s;
}
.foot-links a:hover { color:var(--brand-soft); }
.foot-info p { font-size:13px; color:rgba(255,255,255,.4); line-height:2; }
.foot-copy { text-align:center; padding:26px; font-size:13px; color:rgba(255,255,255,.22); }

/* ─────────── 26. 플로팅 (전화 1개) ─────────── */
.floats { position:fixed; right:22px; bottom:24px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.fl-btn {
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(232,72,30,.32);
  opacity:0; pointer-events:none; transform:scale(.7);
  transition:opacity .3s, transform .3s var(--ease);
}
.fl-btn.on { opacity:1; pointer-events:auto; transform:scale(1); }
.fl-btn:hover { transform:scale(1.12) !important; }
.fl-tel { background:var(--brand); color:#fff; }
.fl-tel svg { width:26px; height:26px; }

/* ─────────── 27. 팝업 ─────────── */
.popup-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(20,20,40,.72);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.popup-box {
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  max-width:780px; width:100%; max-height:86vh;
  display:flex; flex-direction:column;
  box-shadow:0 36px 90px rgba(0,0,0,.42);
}
.popup-grid { display:grid; gap:8px; padding:10px; overflow-y:auto; }
.popup-grid-1 { grid-template-columns:1fr; }
.popup-grid-2 { grid-template-columns:1fr 1fr; }
.popup-grid-3 { grid-template-columns:repeat(3,1fr); }
.popup-grid-4 { grid-template-columns:1fr 1fr; }
.popup-grid img { width:100%; border-radius:var(--r); display:block; }
.popup-actions { display:flex; border-top:1px solid var(--line); }
.popup-actions button {
  flex:1; padding:17px; background:#fff; border:none; cursor:pointer;
  font-size:15px; font-weight:700; color:var(--ink2); transition:background .2s;
}
.popup-actions button:hover { background:var(--cream); }
.popup-actions #popupClose { border-left:1px solid var(--line); color:var(--brand-dk); }

/* ============================================================
   28. 반응형 (1440 / 1200 / 1024 / 768 / 480)
   ============================================================ */

@media (max-width:1440px) {
  .wrap { padding:0 64px; }
  .hero-chip-1 { left:-12px; }
  .hero-chip-2 { right:-8px; }
}

@media (max-width:1200px) {
  .wrap { padding:0 40px; }

  /* 모바일 헤더: [☰ 왼쪽끝] [로고 정중앙·크게] [창업문의 오른쪽] */
  .header-inner { position:relative; }
  .menu-toggle { display:flex; order:-1; margin-left:-6px; }
  .logo {
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    margin:0;
  }
  .logo-img { height:60px; }
  .header-right { margin-left:auto; }

  .gnb {
    position:fixed; top:var(--hh); left:0; right:0;
    flex-direction:column; gap:0; margin-left:0;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    padding:8px 0 16px;
    transform:translateY(-112%); opacity:0;
    transition:transform .35s var(--ease), opacity .35s var(--ease);
    pointer-events:none;
    box-shadow:0 14px 36px rgba(34,34,51,.12);
  }
  .gnb.open { transform:translateY(0); opacity:1; pointer-events:auto; }
  .gnb a { padding:15px 40px; font-size:16px; border-bottom:1px solid var(--line); }
  .gnb a::after { display:none; }

  .cert-grid { gap:16px; }
  .tech-grid { grid-template-columns:repeat(3,1fr); gap:20px; }
  .space-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:1024px) {
  :root { --hh:76px; }
  .wrap { padding:0 40px; }
  .section { padding:88px 0; }
  .sec-head { margin-bottom:48px; }

  /* 히어로: 모바일에서는 5개 브랜드 카드가 맨 위 → 그 아래 이미지 → 텍스트
     (모바일 접속 시 큐리만 보여 이탈하지 않도록 패밀리 사이트 링크 우선 노출) */
  .hero { min-height:auto; padding:calc(var(--hh) + 28px) 0 72px; }
  .hero-family { order:-1; margin-top:0; margin-bottom:48px; }
  .hero-inner { grid-template-columns:1fr; gap:48px; }
  .hero-visual { order:-1; max-width:640px; margin:0 auto; width:100%; }
  .hero-visual-img { height:clamp(300px,48vw,460px); }
  .hero-text { max-width:640px; margin:0 auto; text-align:center; }
  .hero-btns { justify-content:center; }
  .hero-chip strong { font-size:19px; }
  .hero-chip { padding:12px 20px; }

  .family-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .family-card:nth-child(5) { grid-column:1 / -1; }
  .family-card { min-height:170px; }

  .intro-grid { grid-template-columns:1fr; gap:56px; margin-bottom:72px; }
  .intro-visual { max-width:480px; margin:0 auto; width:100%; }

  .brand-duo { grid-template-columns:1fr; }
  .duo-thumb { height:260px; }

  .video-grid { grid-template-columns:1fr; gap:24px; max-width:680px; margin:0 auto; }

  /* 인증 카드: 2열 (마지막 1장은 가운데 폭 절반) */
  .cert-grid { grid-template-columns:repeat(2,1fr); }
  .cert-card { grid-column:auto; aspect-ratio:4 / 3.4; }
  .cert-card:nth-child(4) { grid-column:auto; }
  .cert-card:nth-child(5) { grid-column:1 / -1; aspect-ratio:16 / 7.5; }

  .alt-item, .alt-item.alt-rev { grid-template-columns:1fr; gap:32px; }
  .alt-item.alt-rev .alt-img-wrap { order:0; }
  .alt-item.alt-rev .alt-body { order:0; }
  .alt-img { height:clamp(260px,44vw,400px); }
  .js-ready .alt-item .alt-img-wrap,
  .js-ready .alt-item.alt-rev .alt-img-wrap { transform:translateY(32px); }
  .js-ready .alt-item .alt-body,
  .js-ready .alt-item.alt-rev .alt-body { transform:translateY(32px); }
  .js-ready .alt-item.show .alt-img-wrap,
  .js-ready .alt-item.show .alt-body { transform:none; }

  .tech-grid { grid-template-columns:1fr; max-width:600px; margin-left:auto; margin-right:auto; }
  .space-grid { grid-template-columns:repeat(2,1fr); }
  .revenue-grid { grid-template-columns:1fr; }
  .link-grid { grid-template-columns:repeat(2,1fr); }
  .trust-grid { grid-template-columns:1fr; max-width:640px; margin:0 auto; }
  .trust-thumb { height:260px; }

  .sp-circle { width:78px; height:78px; font-size:21px; border-width:6px; }

  .contact-wrap { grid-template-columns:1fr; gap:40px; }

  .stat-box { padding:40px 12px; }
}

@media (max-width:768px) {
  .wrap { padding:0 24px; }
  body { font-size:16px; }
  .section { padding:72px 0; }

  .logo-img { height:58px; }
  .tel-btn { display:none; }
  .cta-btn { padding:11px 20px; font-size:14px; }

  .hero-desc br { display:none; }
  .hero-btns { flex-direction:column; align-items:center; }
  .hero-btns .btn { width:100%; max-width:360px; }
  .hero-btns--cta { align-items:center; }
  .hero-chip-1 { left:8px; bottom:18px; }
  .hero-chip-2 { right:8px; top:14px; }
  .hero-cta-img { max-width:300px; }

  .family-grid { gap:12px; }
  .family-card { min-height:150px; padding:20px 18px 18px; }

  .stat-inner { flex-wrap:wrap; }
  .stat-box { flex:1 0 50%; padding:30px 10px; }
  .stat-sep { display:none; }

  .intro-checks li { font-size:14px; padding:13px 16px 13px 50px; }

  .cert-grid { gap:14px; }
  .cert-body { padding:18px 16px 0; }
  .cert-card h3 { font-size:17px; }
  .cert-card h3::after { margin-top:10px; }
  .cert-card p { font-size:12px; }
  .cert-badge { left:16px; bottom:14px; gap:8px 12px; }
  .cert-badge img { height:26px; }
  .cert-badge span { font-size:11px; }

  .space-grid { grid-template-columns:1fr 1fr; gap:14px; }
  .space-thumb { height:150px; }
  .space-body { padding:16px 16px 18px; }
  .space-body p { font-size:13px; }

  .menu-marquee-item { width:210px; }
  .menu-marquee-img { height:160px; }

  .marquee-item { width:240px; height:170px; }

  .rev-cards { grid-template-columns:1fr 1fr; }
  .rev-profit { flex-direction:column; gap:16px; }
  .rp-arrow { transform:rotate(90deg); }

  .link-grid { grid-template-columns:1fr; }

  /* 무료 강조 pill: 좁은 화면에서 여러 줄이 되어도 자연스럽게 */
  .tech-free-pill { border-radius:20px; padding:12px 20px; font-size:15px; }

  /* 프로세스 → 세로 타임라인 (원형 좌측 · 제목/설명 세로 스택) */
  .sp-wrap { margin-top:48px; }
  .sp-row { flex-direction:column; gap:28px; margin-bottom:28px; align-items:stretch; }
  .sp-row::before { left:38px; top:0; width:2px; height:calc(100% - 20px); }
  .sp-step {
    display:grid; grid-template-columns:76px 1fr;
    column-gap:20px; align-items:start;
    text-align:left; padding:0;
  }
  .sp-circle {
    grid-row:1 / span 2;
    width:76px; height:76px; font-size:19px; margin:0; border-width:5px;
  }
  .sp-title { grid-column:2; margin-bottom:4px; font-size:17px; align-self:end; }
  .sp-desc { grid-column:2; }

  .branch-table th, .branch-table td { padding:13px 8px; font-size:13px; }
  .bt-link-col { width:104px; }
  .bt-btn { padding:9px 14px; font-size:12px; }

  .contact-form { padding:24px 20px; }
  .form-row { grid-template-columns:1fr; }

  .foot-inner { grid-template-columns:1fr; gap:24px; }
  .foot-links { flex-direction:row; gap:20px; }

  .ftc-btn { padding:16px 36px; width:100%; max-width:420px; }
  .ftc-btn-main { font-size:16px; }

  .popup-grid-2, .popup-grid-3, .popup-grid-4 { grid-template-columns:1fr 1fr; }
}

@media (max-width:480px) {
  .wrap { padding:0 20px; }

  .logo-img { height:54px; }

  .hero-visual-img { height:clamp(240px,62vw,320px); border-radius:var(--r-lg); }
  .hero-eyebrow { font-size:11px; padding:8px 16px; margin-bottom:22px; }
  .hero-chip { display:none; }
  .hero-blob { top:-16px; right:-12px; }

  .family-grid { grid-template-columns:1fr 1fr; }
  .family-card { min-height:150px; }

  .stat-box { flex:1 0 50%; padding:24px 8px; }
  .stat-box strong { font-size:26px; }
  .stat-box p { font-size:12px; }

  .sec-title br { display:none; }
  .sec-lead br { display:none; }

  .intro-circle { border-width:8px; }
  .intro-deco-1 { width:44px; height:44px; }

  .duo-thumb { height:210px; }
  .duo-body { padding:24px 22px 28px; }

  .cert-grid { grid-template-columns:1fr; }
  .cert-card { aspect-ratio:16 / 10; }
  .cert-card:nth-child(5) { aspect-ratio:16 / 10; }
  .alt-body p br { display:none; }
  .alt-tag { width:48px; height:48px; font-size:17px; margin-bottom:14px; }

  .space-grid { grid-template-columns:1fr; }
  .space-thumb { height:200px; }

  .menu-marquee-item { width:180px; }
  .menu-marquee-img { height:140px; }
  .marquee-item { width:200px; height:145px; }

  .rev-cards { grid-template-columns:1fr; }
  .rev-highlight { padding:32px 26px; }

  .trust-card { padding:22px; }
  .trust-thumb { height:200px; }

  .branch-table .bt-addr { font-size:11px; }

  .btn { height:52px; font-size:15px; padding:0 26px; }
  .fl-btn { width:52px; height:52px; }
  .fl-tel svg { width:23px; height:23px; }
}