@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --ink: #0f1e36;
  --ink2: #34405a;
  --ink3: #657189;
  --mute: #97a0b2;
  --line: #e1e8f0;
  --white: #ffffff;
  --ivory: #f4f7fa;
  --cream: #e3ecf3;
  --gold: #41a7e1;
  --gold-d: #2074bd;
  --gold-l: #87ddf5;
  --en: 'Montserrat', 'Pretendard Variable', Pretendard, sans-serif;
  --sign: 'Pinyon Script', cursive;
  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hd: 84px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 70px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: var(--sans);
  color: var(--ink2);
  background: var(--white);
  letter-spacing: -.01em;
  word-break: keep-all;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
b, strong { font-weight: 700; }
::selection { background: rgba(65, 167, 225, .25); }

.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
.sec { position: relative; padding: clamp(90px, 9.5vw, 150px) 0; }

/* ---------- 타이포 ---------- */
.kicker {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--en); font-weight: 700; text-transform: uppercase;
  font-size: clamp(12px, 1vw, 13.5px); color: var(--gold-d);
  letter-spacing: .2em; margin-bottom: 18px;
}
.kicker::before { content: ''; width: 34px; height: 1px; background: currentColor; }
.center .kicker { justify-content: center; }
.center .kicker::after { content: ''; width: 34px; height: 1px; background: currentColor; }

.tt {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(28px, 3.2vw, 46px); line-height: 1.38;
  letter-spacing: -.035em; color: var(--ink);
}
.tt em { font-style: normal; }
.hl {
  color: var(--gold-d);
  background: linear-gradient(transparent 64%, rgba(135, 221, 245, .42) 64%, rgba(135, 221, 245, .42) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
  transition: background-size 1.3s cubic-bezier(.7, 0, .2, 1) .25s;
}
.js .hl { background-size: 0% 100%; }
.js .hl.on { background-size: 100% 100%; }

.desc { margin-top: 22px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.85; color: var(--ink3); }
.desc b { color: var(--ink); }
.tt, .st-l, .pt-tt, .ck-tt, .types-t, .hero-tt, .ck-card h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.script { font-family: var(--en); font-weight: 700; font-style: italic; letter-spacing: -.01em; color: var(--gold); line-height: 1.1; font-size: clamp(20px, 1.9vw, 26px); }
.note { font-size: 12.5px; color: var(--mute); line-height: 1.6; }

.gold-text {
  background: linear-gradient(100deg, #1764b1 0%, #3eb2ef 20%, #8fe1f6 32%, #2189d6 46%, #1255a1 58%, #4dbdf1 76%, #1764b1 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -250% 0; } }

/* ---------- 버튼 ---------- */
.btn-gold, .btn-line {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 30px; border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s, background-position .6s, color .3s, border-color .3s, background-color .3s;
}
.btn-gold {
  color: #fff; overflow: hidden;
  background: linear-gradient(120deg, #338ac9 0%, #59c4f2 45%, #338ac9 100%);
  background-size: 200% 100%;
  box-shadow: 0 16px 34px -14px rgba(29, 115, 192, .75);
}
.btn-gold::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); animation: sweep 3.8s ease-in-out infinite;
}
.btn-gold:hover { background-position: 100% 0; box-shadow: 0 22px 40px -16px rgba(29, 115, 192, .85); }
.btn-gold span, .btn-gold svg { position: relative; z-index: 1; }
.btn-gold svg, .btn-line svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .35s var(--ease); }
.btn-gold:hover svg, .btn-line:hover svg { transform: translateX(4px); }
.btn-gold.sm { height: 42px; padding: 0 20px; font-size: 14px; }
.btn-gold.block { width: 100%; }
.btn-line { color: var(--ink); border: 1px solid rgba(15, 30, 54, .22); background: rgba(255, 255, 255, .55); backdrop-filter: blur(8px); }
.btn-line:hover { border-color: var(--gold); color: var(--gold-d); }
.btn-line.dark { margin-top: 40px; align-self: flex-start; }
@keyframes sweep { 0%, 58% { left: -60%; } 100% { left: 130%; } }

/* ---------- 인트로 ---------- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; pointer-events: none;
  animation: loaderFail 0s 6s forwards;
}
@keyframes loaderFail { to { visibility: hidden; } }
.loader-curtain { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--ivory); }
.loader-curtain.top { top: 0; }
.loader-curtain.bot { bottom: 0; }
.loader-in { position: relative; text-align: center; }
.loader-mark { position: relative; display: inline-block; font-family: var(--en); font-weight: 800; font-size: clamp(80px, 10vw, 118px); line-height: .9; letter-spacing: -.06em; padding: 0 .14em 0 .08em; }
.loader-mark span {
  display: inline-block;
  background: linear-gradient(100deg, #227cc6, #9ae5f7 40%, #31a2e6 60%, #227cc6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.loader-star { position: absolute; width: 22px; height: 22px; right: -6px; top: 10px; fill: var(--gold); }
.loader-line { display: block; width: 180px; height: 1px; margin: 22px auto 18px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.loader-en { font-weight: 600; letter-spacing: .16em; font-size: 14px; color: var(--ink2); }

/* ---------- 진행바 · 커서 ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #318fd1, #baf1f9, #318fd1); transform-origin: left; transform: scaleX(0); }
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; position: fixed; inset: 0; z-index: 450; pointer-events: none; }
  .c-dot, .c-ring { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform; opacity: 0; transition: opacity .3s; }
  .cursor.on .c-dot, .cursor.on .c-ring { opacity: 1; }
  .c-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold); }
  .c-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid rgba(65, 167, 225, .55); transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s, opacity .3s; }
  .cursor.hov .c-ring { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: rgba(65, 167, 225, .1); border-color: rgba(65, 167, 225, .2); }
}

/* ---------- 헤더 ---------- */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .45s, box-shadow .45s, transform .55s var(--ease); }
.hd-in { width: min(1440px, 100% - 64px); height: var(--hd); margin: 0 auto; display: flex; align-items: center; gap: 30px; transition: height .45s var(--ease); }
.hd.scrolled { background: rgba(255, 255, 255, .84); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 rgba(15, 30, 54, .06); }
.hd.scrolled .hd-in { height: 70px; }
.hd.hide { transform: translateY(-100%); }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand-mark {
  position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 3px 3px 0 0; border-radius: 14px;
  background: linear-gradient(140deg, #2a7fd6 0%, #3aaeea 58%, #6dd2f5 100%);
  box-shadow: 0 10px 22px -10px rgba(32, 116, 189, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
  font-family: var(--en); font-weight: 800; font-size: 20px; line-height: 1; letter-spacing: -.05em; color: #fff;
}
.brand-mark svg { position: absolute; width: 8px; height: 8px; right: 6px; top: 6px; fill: #fff; animation: twinkle 2.8s ease-in-out infinite; }
.brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name b { font-family: var(--sans); font-weight: 800; font-size: 18px; letter-spacing: -.035em; color: var(--ink); }
.brand-name em { margin-top: 3px; font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: .07em; color: var(--gold-d); }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.55) rotate(45deg); opacity: .6; } }
.gnb { display: flex; gap: 30px; }
.gnb a { position: relative; padding: 6px 0; font-size: 14.5px; font-weight: 500; color: var(--ink2); transition: color .3s; }
.gnb a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.gnb a:hover, .gnb a.on { color: var(--gold-d); }
.gnb a:hover::after, .gnb a.on::after { transform: scaleX(1); transform-origin: left; }
.hd-tel { display: flex; align-items: center; gap: 7px; font-family: var(--en); font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: 0; }
.hd-tel svg { width: 15px; height: 15px; fill: var(--gold); }
.burger { display: none; position: relative; width: 44px; height: 44px; z-index: 102; }
.burger i { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--ink); transition: transform .45s var(--ease), top .45s var(--ease); }
.burger i:first-child { top: 17px; }
.burger i:last-child { top: 26px; right: 16px; }
.burger[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { top: 21px; right: 10px; transform: rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 99; background: var(--ivory);
  display: flex; flex-direction: column; justify-content: center; padding: 100px 32px 120px;
  clip-path: circle(0 at calc(100% - 44px) 42px); visibility: hidden;
  transition: clip-path .8s cubic-bezier(.7, 0, .2, 1), visibility 0s .8s;
}
.mnav.open { clip-path: circle(150% at calc(100% - 44px) 42px); visibility: visible; transition: clip-path .8s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.mnav a { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: 21px; font-weight: 700; color: var(--ink); opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .6s var(--ease); }
.mnav em { font-family: var(--en); font-weight: 700; font-size: 13px; color: var(--gold); }
.mnav.open a { opacity: 1; transform: none; }
.mnav.open a:nth-child(2) { transition-delay: .05s; } .mnav.open a:nth-child(3) { transition-delay: .1s; }
.mnav.open a:nth-child(4) { transition-delay: .15s; } .mnav.open a:nth-child(5) { transition-delay: .2s; }
.mnav.open a:nth-child(6) { transition-delay: .25s; } .mnav.open a:nth-child(7) { transition-delay: .3s; }
.mnav-tel { margin-top: 30px; font-family: var(--en); font-size: 28px; font-weight: 700; color: var(--gold-d); }

/* ---------- 히어로 ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 680px; overflow: hidden; background: var(--ivory); }
.hero-media { position: absolute; inset: 0; }
.hero-vid { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(244, 247, 250, .92) 0, rgba(244, 247, 250, .55) 90px, rgba(244, 247, 250, 0) 170px),
    linear-gradient(90deg, rgba(244, 247, 250, .97) 0%, rgba(244, 247, 250, .9) 28%, rgba(244, 247, 250, .4) 48%, rgba(244, 247, 250, 0) 62%),
    linear-gradient(0deg, rgba(244, 247, 250, .85) 0%, rgba(244, 247, 250, 0) 24%);
}
.dust { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.hero-in { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 10px; padding-bottom: 90px; }
.eyebrow { display: flex; align-items: center; gap: 14px; font-weight: 700; letter-spacing: .08em; font-size: 14px; color: var(--gold-d); }
.eyebrow i { width: 44px; height: 1px; background: currentColor; transform-origin: left; }
.hero-tt { font-family: var(--sans); font-weight: 800; font-size: clamp(44px, 6vw, 88px); line-height: 1.2; letter-spacing: -.05em; color: var(--ink); }
.hero-tt .row { display: block; overflow: hidden; padding: 0 .04em .06em 0; }
.hero-tt .row > span { display: inline-block; }
.hero-tt.typing .tc { visibility: hidden; }
.hero-tt.typing .tc.on { visibility: visible; }
.caret { display: inline-block; width: 3px; height: .86em; margin: 0 2px 0 3px; vertical-align: -.06em; border-radius: 2px; background: var(--gold); animation: caretBlink .9s steps(1) infinite; }
.caret.done { animation: caretOut .6s forwards; }
@keyframes caretBlink { 50% { opacity: 0; } }
@keyframes caretOut { to { opacity: 0; width: 0; margin: 0; } }
.hero-sub { margin-top: 28px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.85; color: var(--ink2); }
.hero-sub b { color: var(--ink); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.hero-facts {
  position: absolute; z-index: 4; left: 50%; bottom: 34px; transform: translateX(-50%);
  width: min(1240px, 100% - 48px); display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, .62); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 18px; box-shadow: 0 24px 50px -30px rgba(7, 45, 88, .35);
}
.hero-facts li { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; padding: 20px 28px; }
.hero-facts li + li::before { content: ''; position: absolute; left: 0; top: 26%; height: 48%; width: 1px; background: rgba(15, 30, 54, .1); }
.hero-facts svg { grid-row: span 2; width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.3; }
.hero-facts small { font-size: 12.5px; color: var(--ink3); }
.hero-facts b { font-family: var(--sans); font-weight: 700; font-size: 16.5px; color: var(--ink); }
.scroll-cue { position: absolute; z-index: 4; right: 36px; bottom: 150px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-family: var(--en); font-weight: 600; letter-spacing: .3em; font-size: 10.5px; color: var(--ink3); writing-mode: vertical-rl; }
.scroll-cue i { position: relative; width: 1px; height: 64px; background: rgba(15, 30, 54, .14); overflow: hidden; }
.scroll-cue i::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--gold); animation: drip 2.2s cubic-bezier(.7, 0, .3, 1) infinite; }
@keyframes drip { to { top: 100%; } }

/* ---------- 마키 ---------- */
.marquee { overflow: hidden; padding: 24px 0; background: #fff; border-block: 1px solid var(--line); }
.mq-track { display: flex; align-items: center; width: max-content; animation: mq 42s linear infinite; font-family: var(--en); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(24px, 2.8vw, 44px); line-height: 1.1; color: var(--ink); white-space: nowrap; }
.mq-track > * { margin-right: 42px; flex: none; }
.mq-track span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1px var(--gold); }
.mq-track svg { width: 22px; height: 22px; fill: var(--gold); animation: spin 9s linear infinite; }
@keyframes mq { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 공통 섹션 헤드 ---------- */
.sec-head { position: relative; isolation: isolate; max-width: 780px; margin-bottom: clamp(48px, 6vw, 84px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.split { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.sec-head.split .desc { margin-top: 0; text-align: right; }
.sec-no { position: absolute; z-index: -1; top: -.58em; left: -.04em; font-family: var(--en); font-weight: 700; font-size: clamp(90px, 11vw, 170px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(65, 167, 225, .38); pointer-events: none; }
.center .sec-no { left: 50%; transform: translateX(-50%); }
.reveal-img { overflow: hidden; }

/* ---------- 이미지 빛 효과 ---------- */
.fx-shine, .fx-scan, .fx-gloss { position: relative; overflow: hidden; }
.fx-shine::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 49%, rgba(220, 245, 255, .32) 53%, rgba(255, 255, 255, 0) 60%, transparent 64%);
  transform: translateX(-130%); animation: shineSweep 7s cubic-bezier(.6, 0, .3, 1) var(--sd, 0s) infinite;
}
.fx-shine-slow::before { animation-duration: 10s; }
@keyframes shineSweep { 0% { transform: translateX(-130%); } 26%, 100% { transform: translateX(130%); } }

.fx-scan::after {
  content: ''; position: absolute; left: 0; right: 0; top: -34%; z-index: 2; height: 34%; pointer-events: none;
  background: linear-gradient(180deg, rgba(95, 208, 245, 0) 0%, rgba(95, 208, 245, .16) 70%, rgba(150, 230, 255, .55) 97%, rgba(255, 255, 255, .95) 100%);
  box-shadow: 0 2px 14px rgba(95, 208, 245, .7); mix-blend-mode: screen;
  animation: scanY 4.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes scanY { 0% { top: -34%; } 62%, 100% { top: 100%; } }

.fx-gloss::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(118deg, transparent 0%, transparent 36%, rgba(190, 238, 255, .5) 45%, rgba(255, 255, 255, .95) 50%, rgba(190, 238, 255, .5) 55%, transparent 64%, transparent 100%);
  background-size: 280% 100%; animation: glossMove 5.5s ease-in-out infinite;
}
@keyframes glossMove { 0% { background-position: 110% 0; } 60%, 100% { background-position: -10% 0; } }

.fx-kb img { animation: kenBurns 16s ease-in-out infinite alternate; }
@keyframes kenBurns { from { scale: 1; } to { scale: 1.07; } }

.fx-sparkles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fx-sparkles span { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); filter: drop-shadow(0 0 4px rgba(150, 225, 255, .95)) drop-shadow(0 0 10px rgba(95, 200, 245, .6)); opacity: 0; animation: sparkle var(--d) ease-in-out var(--dl) infinite; }
.fx-sparkles span::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #fff 0 34%, #d6f4ff 62%, #9fe0ff 100%); clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); }
@keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 40% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; transform: scale(.35) rotate(90deg); } }

.hero-media::before {
  content: ''; position: absolute; inset: -10% -30%; z-index: 1; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .28) 46%, rgba(200, 240, 255, .2) 50%, transparent 58%);
  animation: heroRay 9s ease-in-out infinite;
}
@keyframes heroRay { 0% { transform: translateX(-45%); } 55%, 100% { transform: translateX(45%); } }

/* ---------- 전후 사례 ---------- */
.ba {
  overflow: hidden; color: rgba(255, 255, 255, .72);
  background: radial-gradient(1000px 600px at 12% -4%, rgba(65, 167, 225, .3), transparent 62%), radial-gradient(900px 600px at 100% 100%, rgba(47, 198, 217, .18), transparent 60%), linear-gradient(180deg, #0a1730 0%, #0d2342 100%);
}
.ba .wrap { position: relative; z-index: 3; }
.ba .dust { z-index: 1; opacity: .8; }
.ba .tt { color: #fff; }
.ba .tt .gold-text { background-image: linear-gradient(100deg, #5fc8ff 0%, #bff0ff 22%, #4fb2f0 46%, #8fe6ff 70%, #5fc8ff 100%); }
.ba .desc { color: rgba(255, 255, 255, .66); }
.ba .note { color: rgba(255, 255, 255, .4); }
.ba-badge span { display: inline-block; margin-bottom: 20px; padding: 9px 24px; border-radius: 999px; background: linear-gradient(120deg, #2a7fd6, #6dd2f5 50%, #2a7fd6); background-size: 200% 100%; animation: shimmer 4s linear infinite; font-size: 14px; font-weight: 700; letter-spacing: .12em; color: #fff; box-shadow: 0 0 0 6px rgba(65, 167, 225, .14), 0 14px 30px -12px rgba(42, 127, 214, .8); }

.ba-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.ba-main { position: relative; }
.ba-main::before { content: ''; position: absolute; inset: -2px; z-index: 0; border-radius: 30px; padding: 2px; background: conic-gradient(from var(--ang), rgba(127, 220, 255, 0) 0 55%, #7fdcff 72%, #fff 78%, #3ea9f0 86%, rgba(127, 220, 255, 0) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinAng 6s linear infinite; pointer-events: none; }
.ba-stage {
  position: relative; z-index: 1; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  background: #0b1a33; box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .7), 0 0 80px -20px rgba(65, 167, 225, .35); outline: none;
}
.ba-stage:focus-visible { box-shadow: 0 0 0 3px #7fdcff; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba-gloss { position: absolute; inset: 0; mix-blend-mode: overlay; pointer-events: none; background: linear-gradient(118deg, transparent 0%, transparent 34%, rgba(190, 238, 255, .55) 44%, rgba(255, 255, 255, 1) 50%, rgba(190, 238, 255, .55) 56%, transparent 66%, transparent 100%); background-size: 280% 100%; animation: glossMove 4.6s ease-in-out infinite; }
.ba-sparkles span { --s: 16px; }
.ba-tag { position: absolute; z-index: 3; top: 18px; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; }
.ba-tag.before { left: 18px; background: rgba(15, 30, 54, .62); color: #fff; }
.ba-tag.after { right: 18px; background: linear-gradient(120deg, #2a7fd6, #45bdf0); color: #fff; box-shadow: 0 8px 20px -8px rgba(42, 127, 214, .9); }
.ba-handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: linear-gradient(180deg, rgba(255, 255, 255, .2), #fff 30%, #fff 70%, rgba(255, 255, 255, .2)); box-shadow: 0 0 18px rgba(127, 220, 255, .9), 0 0 4px rgba(255, 255, 255, .9); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .25), 0 12px 30px -8px rgba(0, 0, 0, .5); }
.ba-knob::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(127, 220, 255, .8); animation: knobPulse 2s ease-out infinite; }
.ba-knob svg { width: 28px; height: 28px; fill: none; stroke: #2074bd; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes knobPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.ba-hint { position: absolute; z-index: 4; left: 50%; bottom: 20px; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; transform: translateX(-50%); background: rgba(15, 30, 54, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; pointer-events: none; transition: opacity .5s; }
.ba-hint svg { width: 18px; height: 18px; fill: none; stroke: #7fdcff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: hintSlide 1.4s ease-in-out infinite; }
@keyframes hintSlide { 50% { transform: translateX(4px); } }
.ba-stage.used .ba-hint { opacity: 0; }
.ba-nav { position: absolute; z-index: 5; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; cursor: pointer; transition: background .3s, transform .3s; }
.ba-nav:hover { background: rgba(255, 255, 255, .3); }
.ba-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.ba-nav.prev { left: 14px; }
.ba-nav.prev svg { transform: scaleX(-1); }
.ba-nav.next { right: 14px; }
.ba-stage.swap .ba-img { animation: baSwap .7s var(--ease); }
@keyframes baSwap { from { opacity: 0; transform: scale(1.04); } }

.ba-no { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .55); }
.ba-no b { font-family: var(--en); font-size: 40px; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(180deg, #fff 20%, #8fdcff); -webkit-background-clip: text; background-clip: text; color: transparent; vertical-align: -4px; margin-left: 4px; }
.ba-no span { font-family: var(--en); font-weight: 700; }
.ba-title { margin-top: 10px; font-size: clamp(24px, 2.2vw, 31px); font-weight: 800; letter-spacing: -.035em; line-height: 1.3; color: #fff; }
.ba-desc { margin-top: 14px; font-size: 15.5px; line-height: 1.8; color: rgba(255, 255, 255, .7); min-height: 3.6em; }
.ba-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ba-tags li { padding: 6px 13px; border-radius: 999px; background: rgba(127, 220, 255, .1); border: 1px solid rgba(127, 220, 255, .3); font-size: 13px; font-weight: 600; color: #9fe3ff; }
.ba-side.swap .ba-title, .ba-side.swap .ba-desc, .ba-side.swap .ba-tags, .ba-side.swap .ba-no { animation: baText .6s var(--ease); }
@keyframes baText { from { opacity: 0; transform: translateY(12px); } }
.ba-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.ba-thumb { position: relative; overflow: hidden; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .1); background: #0b1a33; text-align: left; transition: border-color .35s, transform .35s var(--ease), box-shadow .35s; }
.ba-thumb img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; opacity: .55; transition: opacity .35s, transform .6s var(--ease); }
.ba-thumb span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 18px 9px 7px; background: linear-gradient(0deg, rgba(8, 18, 36, .9), transparent); font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-thumb em { font-family: var(--en); font-style: normal; font-weight: 800; color: #7fdcff; }
.ba-thumb:hover img { opacity: .85; transform: scale(1.06); }
.ba-thumb.on { border-color: #4fb8f0; box-shadow: 0 0 0 3px rgba(79, 184, 240, .25), 0 14px 30px -14px rgba(42, 127, 214, .9); }
.ba-thumb.on img { opacity: 1; }
.ba-cta { width: 100%; margin-top: 26px; }
.ba-note { margin-top: 26px; text-align: center; }

/* ---------- 고민 ---------- */
.concern { background: #fff; }
.concern-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.concern-visual { position: relative; }
.concern-visual figure { border-radius: 260px 260px 26px 26px; aspect-ratio: 4 / 4.7; box-shadow: 0 50px 90px -50px rgba(6, 38, 74, .4); }
.concern-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.badge-rotate { position: absolute; right: -44px; bottom: 70px; width: 176px; height: 176px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); box-shadow: 0 24px 50px -20px rgba(7, 45, 88, .35); }
.badge-rotate svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 20s linear infinite; }
.badge-rotate text { font-family: var(--sans); font-size: 12.5px; font-weight: 600; fill: var(--gold-d); }
.badge-c { position: relative; text-align: center; font-family: var(--sans); font-size: 13px; line-height: 1.45; color: var(--ink3); }
.badge-c b { display: block; font-size: 17px; color: var(--ink); }
.badge-c::before { content: ''; position: absolute; inset: -22px; border-radius: 50%; border: 1px solid var(--gold-l); }
.concern-q { font-family: var(--sans); font-weight: 500; font-size: clamp(16px, 1.4vw, 19px); color: var(--ink3); margin-bottom: 14px; }
.concern-q b { color: var(--gold-d); }
.concern-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px; }
.concern-list li { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #fff, var(--ivory)); transition: transform .45s var(--ease), border-color .45s, box-shadow .45s; }
.concern-list li::after { content: '✕'; position: absolute; top: 10px; right: 14px; font-size: 10px; color: #b5524a; opacity: .75; }
.concern-list li:hover { transform: translateY(-4px); border-color: var(--gold-l); box-shadow: 0 20px 40px -26px rgba(9, 57, 111, .35); }
.concern-list i { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); }
.concern-list svg { width: 28px; height: 28px; fill: none; stroke: var(--gold-l); stroke-width: 1.4; }
.concern-list span { font-size: 14.5px; line-height: 1.5; color: var(--ink3); }
.concern-list span b { color: var(--ink); }

/* ---------- 시장 · 선언 ---------- */
.market { background: var(--ivory); overflow: hidden; }
.watermark { position: absolute; top: 3%; right: -3%; font-family: var(--en); font-weight: 800; letter-spacing: -.05em; font-size: clamp(150px, 22vw, 360px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(65, 167, 225, .22); pointer-events: none; user-select: none; }
.market-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.bubbles { position: relative; height: 470px; }
.bubble-photo { position: absolute; right: 0; top: 46px; width: 74%; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(6, 38, 74, .4); }
.bubble-photo img { width: 100%; height: 100%; object-fit: cover; }
.bubble { position: absolute; z-index: 2; padding: 18px 24px; border-radius: 22px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid #fff; box-shadow: 0 26px 50px -24px rgba(5, 33, 65, .38); font-family: var(--sans); font-weight: 500; font-size: 15.5px; line-height: 1.6; color: var(--ink); animation: bob 5.2s ease-in-out infinite; }
.bubble::after { content: ''; position: absolute; left: 30px; bottom: -7px; width: 14px; height: 14px; background: inherit; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg); }
.bubble.b1 { left: 0; top: 0; }
.bubble.b2 { right: -14px; top: 270px; animation-delay: -1.7s; }
.bubble.b3 { left: 5%; bottom: 0; animation-delay: -3.4s; }
@keyframes bob { 50% { translate: 0 -12px; } }

.statement { position: relative; text-align: center; margin-top: clamp(110px, 13vw, 190px); }
.st-s { font-family: var(--sans); font-weight: 500; font-size: clamp(17px, 1.6vw, 21px); color: var(--ink3); }
.st-l { margin-top: 12px; font-family: var(--sans); font-weight: 800; font-size: clamp(32px, 5vw, 72px); line-height: 1.3; letter-spacing: -.05em; color: var(--ink); }
.st-l .gold { color: var(--gold-d); }
.st-l .wd { display: inline-block; white-space: nowrap; }
.st-l .ch { display: inline-block; }
.st-d { margin-top: 28px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.85; color: var(--ink3); }
.st-d b { color: var(--gold-d); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 70px; text-align: left; }
.pillar { position: relative; display: flex; flex-direction: column; padding: 36px 32px 34px; border-radius: 22px; background: #fff; border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: transform .55s var(--ease), box-shadow .55s, border-color .55s; }
.pillar::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, #fff 30%, #e0ebf5); opacity: 0; transition: opacity .55s; }
.pillar:hover { transform: translateY(-8px); border-color: var(--gold-l); box-shadow: 0 34px 60px -34px rgba(14, 80, 156, .4); }
.pillar:hover::before { opacity: 1; }
.p-no { font-family: var(--en); font-weight: 700; font-size: 54px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gold); }
.p-en { margin-top: 14px; font-family: var(--en); font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); }
.pillar b { margin-top: 8px; font-family: var(--sans); font-size: 21px; color: var(--ink); }
.pillar small { margin-top: 8px; font-size: 14px; color: var(--ink3); }
.pillar svg { position: absolute; right: 30px; bottom: 34px; width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.5; transition: transform .45s var(--ease); }
.pillar:hover svg { transform: translateX(6px); }

/* ---------- 01 디자인 ---------- */
.design { background: #fff; }
.design-stage { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.design-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 30px; box-shadow: 0 50px 90px -50px rgba(6, 38, 74, .45); }
.design-photo > img { width: 100%; height: 100%; object-fit: cover; }
.hl-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.guides line { stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 6 8; opacity: .85; }
.guide-txt text { font-family: var(--en); font-size: 21px; font-weight: 700; letter-spacing: 4px; fill: #1764b1; text-anchor: end; paint-order: stroke; stroke: rgba(255, 255, 255, .92); stroke-width: 5px; stroke-linejoin: round; }
.bracket path { fill: none; stroke: var(--gold); stroke-width: 1.8; }
.hl-path { fill: none; stroke: url(#gGold); stroke-width: 5; stroke-linecap: round; }
.hl-pts circle { fill: #fff; stroke: var(--gold); stroke-width: 3.5; }
.hl-rings circle { fill: none; stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: ringOut 2.2s ease-out infinite; }
.hl-rings circle:nth-child(2) { animation-delay: .5s; }
.hl-rings circle:nth-child(3) { animation-delay: 1s; }
@keyframes ringOut { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(4.6); opacity: 0; } }
.tag-chip { position: absolute; display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .25); }
.tag-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: dotPulse 1.8s infinite; }
.tag-chip.c1 { left: 4%; top: 6%; }
.tag-chip.c2 { left: 5%; bottom: 7%; }
.tag-chip.c3 { right: 4%; top: 6%; }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(65, 167, 225, .55); } 100% { box-shadow: 0 0 0 10px rgba(65, 167, 225, 0); } }
.design-feats li { display: flex; gap: 22px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.design-feats li:first-child { border-top: 1px solid var(--line); }
.df-ic { flex: none; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold-l); background: radial-gradient(circle at 30% 30%, #fff, #dde9f4); }
.df-ic svg { width: 32px; height: 32px; fill: none; stroke: var(--gold-d); stroke-width: 1.3; }
.design-feats em { font-family: var(--en); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--gold); }
.design-feats h3 { margin: 4px 0 8px; font-family: var(--sans); font-size: 20px; font-weight: 700; color: var(--ink); }
.design-feats p { font-size: 15px; line-height: 1.7; color: var(--ink3); }

.types { margin-top: clamp(84px, 10vw, 140px); }
.types-t { margin-bottom: 38px; text-align: center; font-family: var(--sans); font-size: clamp(21px, 2vw, 26px); font-weight: 700; color: var(--ink); }
.types-t span { display: block; margin-bottom: 10px; font-family: var(--en); font-weight: 700; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-d); }
.types-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.type { padding: 34px 20px 30px; border-radius: 24px; text-align: center; background: var(--ivory); border: 1px solid transparent; transition: transform .5s var(--ease), background .5s, border-color .5s, box-shadow .5s; }
.type:hover { transform: translateY(-6px); background: #fff; border-color: var(--gold-l); box-shadow: 0 30px 50px -34px rgba(14, 80, 156, .45); }
.type .head { width: 112px; height: 130px; margin: 0 auto 20px; overflow: visible; }
.type .bald { fill: #f4f8fb; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 4 3; animation: march 1.4s linear infinite; }
@keyframes march { to { stroke-dashoffset: -14; } }
.type h3 { font-family: var(--sans); font-size: 19px; font-weight: 700; color: var(--ink); }
.type p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink3); }

/* ---------- 02 신뢰 ---------- */
.trust { overflow: hidden; background: linear-gradient(180deg, var(--ivory), #fff); }
.trust-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(30px, 5vw, 84px); align-items: center; }
.cert-wrap { position: relative; perspective: 1400px; }
.cert {
  position: relative; padding: 46px 44px 40px; border-radius: 6px; background: #fbfcfe;
  background-image: radial-gradient(circle at 20% 10%, rgba(135, 221, 245, .12), transparent 40%), radial-gradient(circle at 90% 90%, rgba(135, 221, 245, .12), transparent 40%);
  box-shadow: 0 60px 100px -50px rgba(7, 45, 88, .5), 0 0 0 1px rgba(65, 167, 225, .22);
  transform: rotate(-1.6deg);
}
.cert::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, #318fd1, #aeedf8, #318fd1); }
.cert-hd { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cert-hd .brand-mark { width: 38px; height: 38px; border-radius: 12px; font-size: 17px; }
.cert-hd b { display: block; font-family: var(--sans); font-weight: 800; font-size: 15px; letter-spacing: -.03em; color: var(--ink); }
.cert h3 { margin: 26px 0 22px; text-align: center; font-family: var(--sans); font-size: 22px; font-weight: 700; letter-spacing: .06em; color: var(--ink); }
.cert-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; font-size: 14px; }
.cert-info div { display: flex; gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed #c9d6e4; }
.cert-info dt { flex: none; width: 62px; color: var(--ink3); }
.cert-info dd { color: var(--ink); font-weight: 500; }
.cert-tb { width: 100%; margin-top: 24px; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.cert-tb th { padding: 10px; background: #e8eff6; font-size: 13px; font-weight: 500; color: var(--ink3); }
.cert-tb td { padding: 12px 10px; text-align: center; border-bottom: 1px solid #e3eaf2; color: var(--ink); }
.cert-tb td:first-child { text-align: left; }
.cert-total { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding: 16px 22px; border-radius: 4px; background: var(--ink); }
.cert-total > span { font-size: 14px; color: rgba(255, 255, 255, .75); }
.cert-total b { font-family: var(--en); font-weight: 700; font-size: 36px; line-height: 1; color: var(--gold-l); font-variant-numeric: tabular-nums; }
.cert-total small { margin-left: 4px; font-family: var(--sans); font-size: 15px; color: #fff; }
.cert-sign { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 22px; padding-right: 30px; font-size: 13px; color: var(--ink3); }
.sig { font-family: var(--sign); font-style: normal; font-size: 36px; color: var(--ink); }
.stamp { position: absolute; right: 30px; bottom: 16px; width: 98px; height: 98px; border-radius: 50%; display: grid; place-content: center; text-align: center; border: 3px double #b8433a; color: #b8433a; transform: rotate(-14deg); opacity: .85; mix-blend-mode: multiply; }
.stamp span { font-family: var(--sans); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: .12em; }
.stamp small { margin-top: 5px; font-family: var(--en); font-weight: 700; font-size: 8.5px; letter-spacing: .12em; }
.cert-wrap .note { margin-top: 22px; }
.trust-photo { position: relative; aspect-ratio: 16 / 11; border-radius: 28px; }
.trust-photo img { width: 100%; height: 100%; object-fit: cover; }
.trust-photo figcaption { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(12, 26, 48, .62); backdrop-filter: blur(10px); color: #fff; font-size: 12.5px; letter-spacing: .04em; }
.live { width: 8px; height: 8px; border-radius: 50%; background: #6fe3a1; animation: live 1.6s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(111, 227, 161, .6); } 100% { box-shadow: 0 0 0 10px rgba(111, 227, 161, 0); } }
.trust-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.tcard { position: relative; overflow: hidden; padding: 30px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s, border-color .5s; }
.tcard::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(135, 221, 245, .35), transparent); transform: skewX(-20deg); transition: left .9s var(--ease); }
.tcard:hover { transform: translateY(-6px); border-color: var(--gold-l); box-shadow: 0 30px 50px -32px rgba(14, 80, 156, .45); }
.tcard:hover::after { left: 140%; }
.tc-ic { width: 58px; height: 58px; margin-bottom: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); }
.tc-ic svg { width: 30px; height: 30px; fill: none; stroke: var(--gold-l); stroke-width: 1.5; }
.tcard h3 { font-family: var(--sans); font-size: 24px; font-weight: 800; color: var(--gold-d); }
.tcard h3 small { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 500; color: var(--ink); }
.tcard p { margin-top: 12px; font-size: 14.5px; line-height: 1.7; color: var(--ink3); }
.tcard p b { color: var(--ink); }

/* ---------- 체크 포인트 (다크) ---------- */
.check {
  overflow: hidden; color: rgba(255, 255, 255, .72);
  background: radial-gradient(1100px 620px at 88% -6%, rgba(65, 167, 225, .32), transparent 62%), radial-gradient(900px 560px at -6% 104%, rgba(47, 198, 217, .2), transparent 60%), linear-gradient(180deg, #0a1730 0%, #0e2546 100%);
}
.check .wrap { position: relative; z-index: 3; }
.check .dust { z-index: 1; opacity: .7; }
.ck-orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); pointer-events: none; animation: orb 14s ease-in-out infinite alternate; }
.ck-orb.o1 { width: 520px; height: 520px; top: 24%; left: -160px; background: rgba(65, 167, 225, .22); }
.ck-orb.o2 { width: 440px; height: 440px; bottom: 6%; right: -120px; background: rgba(47, 208, 214, .16); animation-delay: -7s; }
@keyframes orb { to { transform: translate(120px, -80px) scale(1.15); } }
.check .kicker { color: #7fd6ff; }
.check .tt { color: #fff; }
.check .tt .gold-text { background-image: linear-gradient(100deg, #5fc8ff 0%, #bff0ff 22%, #4fb2f0 46%, #8fe6ff 70%, #5fc8ff 100%); }
.check .desc { color: rgba(255, 255, 255, .66); }
.check .desc b { color: #fff; }
.check .note { color: rgba(255, 255, 255, .4); }

.ck-viz { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }
.ck-card { position: relative; overflow: hidden; padding: 40px 40px 34px; border-radius: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ck-label { font-family: var(--en); font-weight: 700; font-size: 12px; letter-spacing: .2em; color: #7fd6ff; }
.ck-card h3 { margin: 10px 0 34px; font-size: clamp(21px, 1.8vw, 25px); font-weight: 700; letter-spacing: -.03em; color: #fff; }
.ck-bar + .ck-bar { margin-top: 28px; }
.ck-bar-t { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 15px; color: rgba(255, 255, 255, .7); }
.ck-bar-t b { font-family: var(--en); font-weight: 800; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.ck-bar-t small { margin-left: 3px; font-family: var(--sans); font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.ck-track { height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ck-track i { position: relative; display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f6f99, #8fb0d6); transform-origin: left; overflow: hidden; }
.hair .ck-track i { background: linear-gradient(90deg, #2f8fe0, #5fd0f5 70%, #c4f3ff); box-shadow: 0 0 26px rgba(95, 208, 245, .55); }
.hair .ck-track i::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: barSweep 2.8s ease-in-out infinite; }
.hair .ck-bar-t b { background: linear-gradient(90deg, #8fe6ff, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes barSweep { 0%, 30% { left: -40%; } 100% { left: 120%; } }
.ck-x { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding: 16px 20px; border-radius: 14px; background: rgba(95, 208, 245, .1); border: 1px solid rgba(95, 208, 245, .26); font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.ck-x b { flex: none; font-size: 20px; font-weight: 800; color: #7fdcff; }
.ck-card .note { margin-top: 16px; }

.donut-wrap { position: relative; width: min(240px, 72%); margin: 0 auto; }
.donut { width: 100%; height: auto; transform: rotate(-90deg); overflow: visible; }
.d-bg { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 24; }
.d-seg { fill: none; stroke-width: 24; }
.d-seg.s1, .d-legend .s1 { stroke: #c4efff; background: #c4efff; }
.d-seg.s2, .d-legend .s2 { stroke: #3ea9f0; background: #3ea9f0; }
.d-seg.s3, .d-legend .s3 { stroke: #22cfd4; background: #22cfd4; }
.d-seg.s2 { filter: drop-shadow(0 0 10px rgba(62, 169, 240, .6)); }
.donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-c b { font-family: var(--en); font-weight: 800; font-size: clamp(36px, 3.2vw, 46px); line-height: 1; letter-spacing: -.03em; color: #fff; }
.donut-c small { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.d-legend { display: grid; gap: 8px; margin-top: 30px; }
.d-legend li { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .05); font-size: 14px; color: rgba(255, 255, 255, .7); }
.d-legend i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.d-legend b { margin-left: auto; font-family: var(--en); font-weight: 700; color: #fff; }
.d-legend em { width: 46px; text-align: right; font-family: var(--en); font-style: normal; font-weight: 700; color: #7fd6ff; }

.ck-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); overflow: hidden; }
.ck-stats li { position: relative; padding: 34px 20px 32px; text-align: center; }
.ck-stats li + li::before { content: ''; position: absolute; left: 0; top: 24%; height: 52%; width: 1px; background: rgba(255, 255, 255, .12); }
.ck-stats b { display: block; font-family: var(--en); font-weight: 800; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.1; letter-spacing: -.03em; background: linear-gradient(180deg, #fff 20%, #8fdcff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ck-stats b small { font-size: .46em; font-weight: 700; letter-spacing: 0; }
.ck-stats li > span { display: block; margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .62); }

.ck-table { margin-top: clamp(76px, 8vw, 112px); }
.ck-tt { margin-bottom: 34px; text-align: center; font-size: clamp(23px, 2.3vw, 32px); font-weight: 800; letter-spacing: -.035em; color: #fff; }
.ck-tt em { font-style: normal; color: #7fdcff; }
.ck-tb { border-radius: 26px; overflow: hidden; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.ck-row { display: grid; grid-template-columns: 210px 1fr 1.05fr; }
.ck-row > span { display: flex; align-items: center; gap: 12px; padding: 20px 26px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .7); transition: background-color .35s; }
.ck-row > span:first-child { font-weight: 700; color: #fff; }
.ck-row em { font-family: var(--en); font-style: normal; font-weight: 700; font-size: 12px; letter-spacing: .1em; color: #7fd6ff; }
.ck-row .ok { color: #fff; font-weight: 600; background: linear-gradient(90deg, rgba(65, 167, 225, .24), rgba(65, 167, 225, .1)); box-shadow: inset 1px 0 rgba(127, 220, 255, .3); }
.ck-row .ok svg { flex: none; width: 24px; height: 24px; fill: none; stroke: #7fdcff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) .25s; }
.ck-hd > span { padding-top: 17px; padding-bottom: 17px; border-top: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .5); }
.ck-hd > span:first-child { color: rgba(255, 255, 255, .5); }
.ck-hd .ok { justify-content: center; background: linear-gradient(90deg, #2f8fe0, #3cc0ee); color: #fff; font-size: 14px; letter-spacing: .02em; }
.ck-row:not(.ck-hd):hover > span { background-color: rgba(255, 255, 255, .04); }
.ck-row:not(.ck-hd):hover > .ok { background-color: rgba(65, 167, 225, .12); }
.js .ck-row:not(.ck-hd) { opacity: 0; transform: translateY(18px); transition: opacity .7s, transform .8s var(--ease); }
.js .ck-row:not(.ck-hd) .ok svg { transform: scale(0) rotate(-90deg); }
.js .ck-row.on { opacity: 1; transform: none; }
.js .ck-row.on .ok svg { transform: none; }
.ck-note { margin-top: 18px; text-align: center; }

/* ---------- 채취 방식 ---------- */
.method { background: #fff; }
.method-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mcard { position: relative; overflow: hidden; border-radius: 26px; background: var(--ivory); transform-style: preserve-3d; will-change: transform; transition: box-shadow .5s; }
.mcard::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .45), transparent 45%); opacity: 0; transition: opacity .4s; }
.mcard:hover { box-shadow: 0 40px 70px -40px rgba(9, 57, 111, .45); }
.mcard:hover::after { opacity: 1; }
.mcard figure { aspect-ratio: 1 / .82; overflow: hidden; }
.mcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.mcard:hover img { transform: scale(1.08); }
.mc-body { padding: 28px 30px 34px; }
.case { font-family: var(--en); font-weight: 700; font-size: 13px; letter-spacing: .22em; color: var(--gold-d); }
.mcard h3 { margin: 8px 0 14px; font-family: var(--sans); font-size: 23px; font-weight: 700; color: var(--ink); }
.mcard h3 small { margin-left: 6px; font-family: var(--en); font-size: 15px; font-weight: 700; color: var(--gold); }
.mcard p { font-size: 14.5px; line-height: 1.78; color: var(--ink3); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tags li { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--gold-l); font-size: 12.5px; color: var(--gold-d); }

/* 모바일 가로 카드 탐색 UI */
.sw-wrap { position: relative; }
.sw-tabs, .sw-nav, .sw-hint { display: none; }
@media (max-width: 900px) {
  .sw-tabs { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(100%, 440px); margin: 0 auto 20px; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px -20px rgba(15, 30, 54, .35); }
  .sw-ind { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / var(--n)); border-radius: 999px; background: linear-gradient(120deg, #2a7fd6, #45bdf0); box-shadow: 0 8px 18px -8px rgba(42, 127, 214, .7); transition: transform .5s var(--ease); }
  .sw-tab { position: relative; z-index: 1; height: 42px; padding: 0 4px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: -.02em; color: var(--ink3); white-space: nowrap; transition: color .35s; }
  .sw-tab.on { color: #fff; }
  .sw-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; }
  .sw-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 22px -14px rgba(15, 30, 54, .4); color: var(--gold-d); transition: opacity .3s, background .3s, color .3s; }
  .sw-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
  .sw-btn.prev svg { transform: scaleX(-1); }
  .sw-btn:disabled { opacity: .35; }
  .sw-btn.next:not(:disabled) { background: linear-gradient(120deg, #2a7fd6, #45bdf0); border-color: transparent; color: #fff; }
  .sw-btn.next:not(:disabled) svg { animation: nudgeR 1.5s ease-in-out infinite; }
  .sw-btn.prev:not(:disabled) svg { animation: nudgeL 1.5s ease-in-out infinite; }
  .sw-dots { display: flex; gap: 7px; }
  .sw-dots i { width: 8px; height: 8px; border-radius: 999px; background: #cfd8e2; transition: width .45s var(--ease), background .45s; }
  .sw-dots i.on { width: 26px; background: var(--gold); }
  .sw-hint { position: absolute; z-index: 6; right: 18px; top: 32%; display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px; background: rgba(15, 30, 54, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .4); font-size: 13px; font-weight: 600; color: #fff; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ease); }
  .sw-hint svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: swipeHand 1.4s ease-in-out infinite; }
  .sw-hint.show { display: flex; opacity: 1; transform: none; }
  .sw-hint.show.off { opacity: 0; transform: translateY(8px); }
  .system .sw-tabs { margin-bottom: 4px; }
}
@keyframes nudgeR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes nudgeL { 0%, 100% { transform: scaleX(-1) translateX(0); } 50% { transform: scaleX(-1) translateX(4px); } }
@keyframes swipeHand { 0%, 100% { transform: translateX(6px) rotate(-6deg); } 50% { transform: translateX(-8px) rotate(4deg); } }

.points { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 7vw, 110px); align-items: center; margin-top: clamp(96px, 11vw, 160px); }
.points-photo { aspect-ratio: 4 / 4.5; border-radius: 320px 320px 28px 28px; box-shadow: 0 50px 90px -50px rgba(6, 38, 74, .45); }
.points-photo img { width: 100%; height: 116%; margin-top: -8%; object-fit: cover; object-position: 40% center; }
.pt-tt { font-family: var(--sans); font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; line-height: 1.45; letter-spacing: -.035em; color: var(--ink); }
.points-list ol { margin-top: 34px; }
.points-list li { display: grid; grid-template-columns: 104px 1fr; gap: 6px 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.points-list li:last-child { border-bottom: 1px solid var(--line); }
.points-list em { grid-row: span 2; padding-top: 6px; font-family: var(--en); font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: .16em; color: var(--gold-d); }
.points-list b { font-family: var(--sans); font-size: 19px; color: var(--ink); }
.points-list p { font-size: 14.5px; line-height: 1.72; color: var(--ink3); }

/* ---------- 생착 시스템 ---------- */
.system { position: relative; overflow: hidden; background: var(--ivory); }
.sys-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(96px, 10vw, 140px) 0 clamp(70px, 8vw, 110px); }
.sys-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 56px; }
.sys-side { text-align: right; }
.sys-side .desc { margin-top: 0; }
.sys-bar { position: relative; width: 240px; height: 2px; margin: 22px 0 0 auto; overflow: hidden; background: rgba(65, 167, 225, .2); }
.sys-bar i { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(.25); }
.sys-viewport { overflow: hidden; }
.sys-track { display: flex; gap: 28px; width: max-content; padding: 10px max(24px, calc((100vw - 1240px) / 2)) 40px; }
.sys-card { position: relative; flex: none; width: clamp(300px, 29vw, 410px); padding: 18px 18px 34px; border-radius: 28px; background: #fff; box-shadow: 0 34px 60px -40px rgba(7, 45, 88, .35); transition: transform .5s var(--ease); }
.sys-card:hover { transform: translateY(-8px); }
.sys-card figure { aspect-ratio: 1 / .86; border-radius: 20px; overflow: hidden; }
.sys-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.sys-card:hover img { transform: scale(1.06); }
.sys-card .no { position: absolute; z-index: 2; top: 32px; right: 32px; padding: 4px 13px; border-radius: 999px; background: rgba(12, 26, 48, .5); backdrop-filter: blur(6px); font-family: var(--en); font-weight: 700; font-size: 13px; letter-spacing: .12em; color: #fff; }
.sys-card h3 { margin: 26px 14px 12px; font-family: var(--sans); font-size: 22px; font-weight: 700; color: var(--ink); }
.sys-card p { margin: 0 14px; font-size: 14.5px; line-height: 1.78; color: var(--ink3); }
.thermo { position: relative; aspect-ratio: 1 / .86; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #e7f0f7 0%, #f8fbfd 46%, #dde8f1 100%); }
.frost { position: absolute; inset: 0; background: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 20%, #fff, transparent), radial-gradient(3px 3px at 40% 70%, #fff, transparent), radial-gradient(2px 2px at 85% 60%, #fff, transparent), radial-gradient(2px 2px at 12% 82%, #fff, transparent), radial-gradient(260px circle at 80% 10%, rgba(255, 255, 255, .9), transparent 60%); animation: frost 4s ease-in-out infinite; }
@keyframes frost { 50% { opacity: .55; } }
.th-scale { position: absolute; left: calc(26% - 40px); top: 14%; bottom: 20%; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--en); font-weight: 600; font-size: 13px; color: #7b93a8; }
.th-tube { position: absolute; left: 26%; top: 13%; bottom: 20%; width: 16px; border-radius: 999px; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(120, 150, 180, .35); }
.th-fill { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 38%; border-radius: 999px; background: linear-gradient(0deg, #5f93bf, #a9cbe6); transform-origin: bottom; }
.th-bulb { position: absolute; left: 50%; bottom: -18px; width: 32px; height: 32px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #bcd8ee, #5d8fba); box-shadow: 0 0 0 4px rgba(255, 255, 255, .85); }
.thermo .th-val { position: absolute; right: 11%; top: 34%; margin: 0; font-family: var(--en); font-weight: 700; font-size: clamp(52px, 4.8vw, 74px); line-height: 1; letter-spacing: -.03em; color: #3d6587; font-variant-numeric: lining-nums; }
.thermo .th-val small { margin-left: 4px; font-size: .42em; }
.thermo .th-label { position: absolute; right: 11%; top: calc(34% + 88px); margin: 0; font-family: var(--en); font-weight: 700; font-size: 10.5px; line-height: 1; letter-spacing: .24em; color: #7b93a8; }

/* ---------- 03 관리 ---------- */
.care { background: #fff; }
.care-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: end; margin-bottom: 76px; }
.care-top .sec-head { margin-bottom: 0; }
.care-quote { padding: 34px 0 10px 40px; border-left: 1px solid var(--gold-l); }
.care-quote .script { display: block; margin-bottom: 14px; font-size: 22px; }
.care-quote p { font-family: var(--sans); font-weight: 600; font-size: clamp(20px, 2vw, 27px); line-height: 1.6; color: var(--ink); }
.care-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.care-line { position: absolute; left: 0; right: 0; top: -38px; height: 1px; background: rgba(65, 167, 225, .22); }
.care-line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-l), var(--gold)); transform-origin: left; }
.js .care-line i { transform: scaleX(0); }
.cstep figure { position: relative; aspect-ratio: 4 / 3.2; border-radius: 24px; }
.cstep figure img { width: 100%; height: 100%; object-fit: cover; }
.glow-red::after, .glow-blue::after { content: ''; position: absolute; inset: 0; mix-blend-mode: screen; animation: glowPulse 3.2s ease-in-out infinite; pointer-events: none; }
.glow-red::after { background: radial-gradient(circle at 35% 25%, rgba(255, 110, 70, .32), transparent 55%); }
.glow-blue::after { background: radial-gradient(circle at 40% 25%, rgba(110, 150, 255, .32), transparent 55%); }
@keyframes glowPulse { 50% { opacity: .25; } }
.step { display: inline-block; margin-top: 26px; padding: 6px 14px; border-radius: 999px; background: var(--ink); font-family: var(--en); font-weight: 700; font-size: 12.5px; letter-spacing: .18em; color: var(--gold-l); }
.cstep h3 { margin: 16px 0 12px; font-family: var(--sans); font-size: 22px; font-weight: 700; color: var(--ink); }
.cstep h3 small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--gold-d); }
.cstep p { font-size: 14.5px; line-height: 1.78; color: var(--ink3); }

/* ---------- 자신감 ---------- */
.confidence { display: grid; grid-template-columns: 1fr 1fr; min-height: 92vh; background: #e6edf3; overflow: hidden; }
.conf-media { position: relative; overflow: hidden; min-height: 520px; }
.conf-media img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: center 0%; }
.conf-copy { display: flex; flex-direction: column; justify-content: center; padding: 90px clamp(30px, 7vw, 120px); }
.conf-copy .script { margin-bottom: 18px; font-size: clamp(22px, 2.1vw, 30px); }
.conf-copy .note { margin-top: 26px; }

/* ---------- 프로세스 ---------- */
.process { background: var(--ivory); }
.flow { position: relative; }
.flow-line { position: absolute; left: 8.33%; right: 8.33%; top: 39px; height: 1px; background: rgba(65, 167, 225, .25); }
.flow-line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-l), var(--gold)); transform-origin: left; }
.js .flow-line i { transform: scaleX(0); }
.flow ol { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.flow li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.flow .dot { position: relative; z-index: 1; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--gold-l); transition: background .6s, border-color .6s, box-shadow .6s, transform .6s var(--ease); }
.flow .dot em { font-family: var(--en); font-style: normal; font-weight: 700; font-size: 20px; color: var(--gold-d); transition: color .6s; }
.flow li.on .dot { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 9px rgba(65, 167, 225, .16); transform: scale(1.04); }
.flow li.on .dot em { color: var(--gold-l); }
.flow b { margin-top: 22px; font-family: var(--sans); font-size: 17px; color: var(--ink); }
.flow small { margin-top: 8px; font-size: 13.5px; color: var(--ink3); }

/* ---------- 이벤트 ---------- */
.event { overflow: hidden; background: radial-gradient(ellipse at 50% 0%, #e9f1f8 0%, #fff 62%); }
.event .wrap { position: relative; z-index: 3; }
.ev-badge span { display: inline-block; margin-bottom: 22px; padding: 9px 28px; border-radius: 999px; background: linear-gradient(120deg, #318fd1, #a8ebf8 50%, #318fd1); background-size: 200% 100%; animation: shimmer 4s linear infinite; font-weight: 700; font-size: 15px; letter-spacing: .14em; color: #fff; box-shadow: 0 14px 30px -14px rgba(29, 115, 192, .7); }
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: center; }
.price { position: relative; overflow: hidden; padding: 46px 22px 32px; border-radius: 26px; text-align: center; background: #fff; border: 1px solid #dce6f1; box-shadow: 0 34px 60px -42px rgba(12, 75, 148, .4); transition: transform .55s var(--ease), box-shadow .55s; }
.price::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ang), transparent 0 68%, #74d3f4 78%, #e0ebf5 84%, #31a2e6 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinAng 5s linear infinite; pointer-events: none; }
.price:nth-child(2)::before { animation-delay: -1.2s; } .price:nth-child(3)::before { animation-delay: -2.4s; } .price:nth-child(4)::before { animation-delay: -3.6s; }
@keyframes spinAng { to { --ang: 360deg; } }
.price:hover { transform: translateY(-10px); box-shadow: 0 44px 70px -40px rgba(12, 75, 148, .5); }
.pill { display: inline-block; padding: 8px 24px; border-radius: 999px; background: linear-gradient(120deg, #dfeaf4, #93e2f6); font-family: var(--sans); font-weight: 700; font-size: 17px; color: #0e3e74; }
.amt { display: flex; justify-content: center; align-items: baseline; gap: 4px; margin-top: 22px; }
.amt b { font-family: var(--en); font-weight: 800; font-size: clamp(50px, 4.6vw, 72px); line-height: .9; letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; background: linear-gradient(100deg, #227cc6 0%, #6dd0f3 22%, #bbf1f9 34%, #31a2e6 48%, #1a6bb7 60%, #8cdff6 78%, #227cc6 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
.amt span { font-family: var(--sans); font-size: 21px; font-weight: 700; color: var(--ink); }
.vat { margin-top: 10px; font-size: 13px; color: var(--mute); }
.price-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 26px; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); transition: background .35s, color .35s, border-color .35s; }
.price-cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.price-cta:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.price.best { padding-top: 58px; padding-bottom: 42px; background: linear-gradient(170deg, #16305a 0%, #0b1a33 100%); border-color: transparent; box-shadow: 0 50px 80px -40px rgba(8, 15, 24, .6); }
.price.best .pill { background: linear-gradient(120deg, #31a2e6, #abecf8, #31a2e6); color: #0a1e35; }
.price.best .amt span { color: #fff; }
.price.best .vat { color: rgba(255, 255, 255, .45); }
.price.best .price-cta { border-color: transparent; background: linear-gradient(120deg, #338ac9, #59c4f2); color: #fff; }
.ribbon { position: absolute; top: 20px; right: -36px; padding: 5px 44px; transform: rotate(45deg); background: linear-gradient(90deg, #318fd1, #a8ebf8, #318fd1); font-family: var(--en); font-weight: 700; font-size: 12px; letter-spacing: .22em; color: #0f1e36; }
.ev-notes { margin-top: 40px; text-align: center; font-size: 13px; line-height: 1.9; color: var(--mute); }

/* ---------- 오시는 길 ---------- */
.location.sec { padding-top: 0; background: #fff; }
.loc-hero { position: relative; height: clamp(380px, 64vh, 660px); }
.loc-hero img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.loc-hero figcaption { position: absolute; left: max(24px, calc((100vw - 1240px) / 2)); bottom: 36px; padding: 22px 30px; border-radius: 20px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .3); }
.loc-hero .script { display: block; margin-bottom: 6px; font-size: 18px; }
.loc-hero b { font-family: var(--sans); font-size: 19px; color: var(--ink); }
.loc-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 84px); margin-top: clamp(64px, 7vw, 104px); }
.loc-dl { margin-top: 34px; }
.loc-dl div { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.loc-dl dt { display: flex; align-items: center; gap: 8px; color: var(--ink3); }
.loc-dl svg { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.loc-dl div:last-child svg { fill: var(--gold); stroke: none; }
.loc-dl dd { color: var(--ink); font-weight: 500; }
.hours { margin-top: 28px; padding: 26px 28px; border-radius: 20px; background: var(--ivory); }
.h-t { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--sans); font-weight: 700; color: var(--ink); }
.h-t svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.hours li { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: 15px; color: var(--ink2); }
.hours b { font-family: var(--en); font-weight: 700; font-size: 17px; color: var(--ink); }
.hours .off b { font-family: var(--sans); font-size: 15px; color: #b5524a; }
.map-btns { display: flex; gap: 10px; margin-top: 22px; }
.map-btns a { flex: 1; padding: 15px; border-radius: 14px; border: 1px solid var(--line); text-align: center; font-size: 14.5px; font-weight: 600; color: var(--ink); transition: background .3s, color .3s, border-color .3s; }
.map-btns a:first-child:hover { background: #03c75a; border-color: #03c75a; color: #fff; }
.map-btns a:last-child:hover { background: #fee500; border-color: #fee500; }
.loc-map { position: relative; min-height: 480px; border-radius: 26px; overflow: hidden; background: var(--cream); }
.loc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.9) contrast(1.02) brightness(1.04); }

/* ---------- 상담 신청 ---------- */
.reserve { overflow: hidden; background: linear-gradient(180deg, var(--ivory), #dfe9f2); }
.rs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.rs-contact { display: grid; gap: 12px; max-width: 420px; margin-top: 40px; }
.call-card, .talk-card { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.call-card:hover, .talk-card:hover { border-color: var(--gold-l); box-shadow: 0 24px 40px -26px rgba(9, 57, 111, .4); }
.call-card i, .talk-card i { position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); }
.call-card i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; animation: callRing 2s infinite; }
@keyframes callRing { 0% { box-shadow: 0 0 0 0 rgba(65, 167, 225, .55); } 100% { box-shadow: 0 0 0 16px rgba(65, 167, 225, 0); } }
.call-card svg, .talk-card svg { width: 22px; height: 22px; fill: var(--gold-l); }
.call-card svg { animation: shake 2.4s ease-in-out infinite; }
@keyframes shake { 0%, 60%, 100% { transform: rotate(0); } 65%, 75%, 85% { transform: rotate(-14deg); } 70%, 80%, 90% { transform: rotate(14deg); } }
.talk-card i { background: #fee500; }
.talk-card svg { fill: #3c1e1e; }
.call-card small, .talk-card small { display: block; font-size: 13px; color: var(--ink3); }
.call-card b { font-family: var(--en); font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.talk-card b { font-family: var(--sans); font-size: 19px; color: var(--ink); }

.rs-form { position: relative; padding: clamp(28px, 4vw, 50px); border-radius: 30px; background: #fff; border: 1px solid rgba(65, 167, 225, .22); box-shadow: 0 60px 100px -60px rgba(9, 57, 111, .45); }
.rs-form-t { margin-bottom: 28px; font-family: var(--sans); font-size: 25px; font-weight: 800; color: var(--ink); }
.rs-form-t .script { display: block; margin-bottom: 6px; font-size: 17px; }
.field { margin-bottom: 18px; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.rs-form input[type="text"], .rs-form input[type="tel"], .rs-form select {
  width: 100%; height: 54px; padding: 0 18px; border-radius: 14px; border: 1px solid #d9e3ee; background: #f9fbfc;
  font: inherit; font-size: 15.5px; color: var(--ink); appearance: none; -webkit-appearance: none;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.rs-form select { padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%232074bd' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.rs-form input:focus, .rs-form select:focus { outline: none; border-color: var(--gold); background-color: #fff; box-shadow: 0 0 0 4px rgba(65, 167, 225, .15); }
.rs-form input.bad { border-color: #c96a60; box-shadow: 0 0 0 4px rgba(201, 106, 96, .12); }
.chips legend { float: left; width: 100%; }
.chips label { display: inline-block; margin: 0 4px 8px 0; font-weight: 500; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 10px 17px; border-radius: 999px; border: 1px solid #d9e3ee; font-size: 14px; color: var(--ink2); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.chips span:hover { border-color: var(--gold-l); }
.chips input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--gold-l); }
.chips input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.agree-row { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 24px; }
.agree { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink2); cursor: pointer; }
.agree input { width: 18px; height: 18px; accent-color: var(--gold-d); }
.agree-view { font-size: 13px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rs-form .btn-gold { height: 60px; font-size: 17px; }
.rs-form .btn-gold[disabled] { opacity: .7; pointer-events: none; }
.rs-msg { min-height: 1.5em; margin-top: 14px; text-align: center; font-size: 14px; color: var(--gold-d); }
.rs-msg.err { color: #b5524a; }

/* ---------- 푸터 ---------- */
.ft { padding: 64px 0 56px; background: #0b1930; color: rgba(255, 255, 255, .6); }
.ft-in { display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
.ft-brand { display: flex; align-items: center; gap: 14px; align-self: start; }
.ft-brand b { display: block; font-family: var(--sans); font-weight: 800; font-size: 17px; letter-spacing: -.03em; color: #fff; }
.ft-brand small { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; letter-spacing: .07em; color: #7fd6ff; }
.ft-info p { font-size: 13px; line-height: 1.95; }
.ft-info span { display: inline-block; }
.ft-info span + span::before { content: ''; display: inline-block; width: 1px; height: 10px; margin: 0 12px; background: rgba(255, 255, 255, .2); }
.ft-disc { margin-top: 18px; font-size: 12px !important; color: rgba(255, 255, 255, .4); }
.copy { margin-top: 14px; font-family: var(--en); font-size: 12px !important; letter-spacing: .1em; color: rgba(255, 255, 255, .35); }

/* ---------- 퀵메뉴 · 모바일바 ---------- */
.quick { position: fixed; right: 22px; top: 50%; z-index: 90; display: flex; flex-direction: column; gap: 8px; transform: translate(140%, -50%); transition: transform .7s var(--ease); }
.quick.show { transform: translate(0, -50%); }
.quick a { width: 76px; height: 76px; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border: 1px solid rgba(65, 167, 225, .2); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .28); transition: transform .35s var(--ease); }
.quick a:hover { transform: translateX(-4px); }
.quick svg { width: 23px; height: 23px; }
.q-call { background: var(--ink) !important; color: #fff !important; }
.q-call svg { fill: var(--gold-l); animation: shake 2.4s ease-in-out infinite; }
.q-talk { background: #fee500 !important; border-color: #fee500 !important; }
.q-talk svg { fill: #3c1e1e; }
.q-rsv { background: linear-gradient(140deg, #338ac9, #59c4f2) !important; color: #fff !important; }
.q-rsv svg { fill: none; stroke: #fff; stroke-width: 1.6; }
.quick .q-top { height: 46px; font-family: var(--en); font-weight: 700; font-size: 12px; letter-spacing: .16em; }
.mbar { display: none; }

.terms { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; padding: 20px; background: rgba(8, 18, 36, .55); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.terms.on { opacity: 1; visibility: visible; }
.terms-in { width: 100%; max-width: 470px; max-height: 86vh; overflow: auto; padding: 34px 30px 26px; border-radius: 24px; background: #fff; transform: translateY(20px); transition: transform .45s var(--ease); }
.terms.on .terms-in { transform: none; }
.terms h4 { margin-bottom: 14px; font-family: var(--sans); font-weight: 700; font-size: 20px; color: var(--ink); }
.terms dt { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.terms dd { margin-top: 4px; font-size: 14px; line-height: 1.7; color: var(--ink3); }
.terms .note { margin: 18px 0; }

/* ---------- 반응형 ---------- */
@media (max-width: 1240px) {
  .gnb { display: none; }
  .burger { display: block; }
}
@media (max-width: 1100px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .price.best { padding-top: 46px; padding-bottom: 32px; }
  .flow ol { grid-template-columns: repeat(3, 1fr); row-gap: 44px; }
  .flow-line { display: none; }
}
@media (max-width: 1023px) {
  .quick { display: none; }
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: 1fr 1fr 1.45fr; background: rgba(255, 255, 255, .95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); transition: transform .6s var(--ease); }
  .mbar.show { transform: none; }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 60px; font-size: 14px; font-weight: 600; color: var(--ink); }
  .mbar svg { width: 18px; height: 18px; fill: var(--gold-d); }
  .mbar a:nth-child(2) svg { fill: #3c1e1e; }
  .mbar a.on { background: linear-gradient(120deg, #338ac9, #59c4f2); color: #fff; }
  .mbar a.on svg { fill: none; stroke: #fff; stroke-width: 1.6; }
  .ft { padding-bottom: 110px; }
}
@media (max-width: 900px) {
  :root { --hd: 68px; }
  .hd-in { width: calc(100% - 32px); gap: 14px; }
  .hd.scrolled .hd-in { height: 62px; }
  .hd-tel { display: none; }
  .brand-mark { width: 40px; height: 40px; border-radius: 13px; font-size: 18px; }
  .brand-name b { font-size: 16.5px; }
  .brand-name em { font-size: 12px; }
  .concern-grid, .market-grid, .design-stage, .trust-grid, .points, .care-top, .loc-grid, .rs-grid { grid-template-columns: 1fr; }
  .concern-visual { max-width: 520px; width: 100%; margin: 0 auto; }
  .badge-rotate { right: -6px; bottom: 40px; width: 140px; height: 140px; }
  .badge-rotate text { font-size: 12px; }
  .badge-c { font-size: 11.5px; } .badge-c b { font-size: 14.5px; } .badge-c::before { inset: -16px; }
  .bubbles { height: 430px; max-width: 520px; width: 100%; margin: 0 auto; }
  .pillars { grid-template-columns: 1fr; gap: 12px; margin-top: 48px; }
  .pillar { padding: 26px 26px 26px; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; }
  .p-no { grid-row: span 3; font-size: 44px; }
  .p-en { margin-top: 0; font-size: 11.5px; }
  .pillar b { font-size: 19px; }
  .pillar small { margin-top: 4px; }
  .types-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .type { padding: 26px 14px 24px; }
  .type .head { width: 92px; height: 108px; }
  .sec-head.split { display: block; }
  .sec-head.split .desc { margin-top: 22px; text-align: left; }
  .concern-grid > *, .market-grid > *, .design-stage > *, .trust-grid > *, .points > *, .care-top > *, .loc-grid > *, .rs-grid > * { min-width: 0; }
  .method-cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc((100% - 100vw) / 2); padding: 0 calc((100vw - 100%) / 2) 16px; scrollbar-width: none; }
  .method-cards::-webkit-scrollbar { display: none; }
  .mcard { flex: none; width: 82%; max-width: 380px; scroll-snap-align: center; }
  .points-photo { max-width: 520px; width: 100%; margin: 0 auto; }
  .sys-pin { min-height: 0; }
  .sys-head { display: block; margin-bottom: 36px; }
  .sys-side { text-align: left; margin-top: 18px; }
  .sys-bar { margin-left: 0; }
  .sys-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sys-viewport::-webkit-scrollbar { display: none; }
  .sys-track { padding: 6px 24px 30px; gap: 14px; }
  .sys-card { width: 80vw; max-width: 380px; scroll-snap-align: center; }
  .care-top { gap: 30px; margin-bottom: 54px; }
  .care-quote { padding: 6px 0 6px 24px; }
  .care-steps { grid-template-columns: 1fr; gap: 44px; }
  .care-line { display: none; }
  .confidence { grid-template-columns: 1fr; min-height: 0; }
  .conf-media { min-height: 0; aspect-ratio: 4 / 4.4; }
  .conf-copy { padding: 60px 24px 80px; }
  .loc-map { min-height: 340px; }
  .ft-in { grid-template-columns: 1fr; gap: 26px; }
  .ba-grid { grid-template-columns: 1fr; gap: 26px; }
  .ba-side { text-align: center; }
  .ba-tags { justify-content: center; }
  .ba-thumbs { text-align: left; }
  .ck-viz { grid-template-columns: 1fr; gap: 16px; }
  .ck-stats { grid-template-columns: repeat(2, 1fr); }
  .ck-stats li:nth-child(3)::before { display: none; }
  .ck-stats li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .1); }
  .ck-row { grid-template-columns: 150px 1fr 1fr; }
}
@media (max-width: 767px) {
  .wrap { width: calc(100% - 40px); }
  .hd { background: rgba(244, 247, 250, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .hd-in > .btn-gold { display: none; }
  .hero { height: auto; min-height: 0; padding-top: var(--hd); display: flex; flex-direction: column; }
  .hero-in { order: 1; height: auto; justify-content: flex-start; align-items: center; text-align: center; padding: 34px 0 6px; }
  .hero-media { order: 2; position: relative; inset: auto; height: min(62svh, 560px); min-height: 400px; overflow: hidden; }
  .hero-media::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 64px; background: linear-gradient(180deg, var(--ivory) 0%, rgba(244, 247, 250, 0) 100%); }
  .hero-vid { object-position: center 4%; }
  .hero-veil { display: none; }
  .eyebrow { justify-content: center; }
  .eyebrow::after { content: ''; width: 28px; height: 1px; background: currentColor; }
  .eyebrow { font-size: 12.5px; letter-spacing: .06em; }
  .eyebrow i { width: 28px; }
  .hero-tt { font-size: clamp(40px, 12vw, 56px); }
  .hero-sub { margin-top: 16px; font-size: 14.5px; line-height: 1.75; }
  .hero-cta { justify-content: center; margin-top: 24px; }
  .hero-cta .btn-line { display: none; }
  .btn-gold, .btn-line { height: 54px; padding: 0 26px; font-size: 15.5px; }
  .hero-facts { order: 3; position: relative; left: auto; bottom: auto; transform: none; width: calc(100% - 40px); margin: -58px auto 34px; border-radius: 16px; background: rgba(255, 255, 255, .9); }
  .hero-facts li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 13px 2px; text-align: center; }
  .hero-facts svg { width: 21px; height: 21px; margin-bottom: 3px; }
  .hero-facts small { font-size: 11px; }
  .hero-facts b { font-size: 13px; letter-spacing: -.04em; }
  .scroll-cue { display: none; }
  .marquee { padding: 16px 0; }
  .mq-track > * { margin-right: 26px; }
  .mq-track svg { width: 15px; height: 15px; }
  .concern-list { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
  .concern-list li { padding: 16px; }
  .concern-list i { width: 46px; height: 46px; }
  .concern-list svg { width: 24px; height: 24px; }
  .concern-list span br { display: none; }
  .bubbles { height: 390px; }
  .bubble { padding: 14px 18px; font-size: 14px; }
  .bubble.b2 { right: 0; top: 230px; }
  .bubble-photo { width: 82%; top: 64px; }
  .desc br, .st-d br { display: none; }
  .tag-chip { padding: 7px 12px; font-size: 11.5px; }
  .tag-chip.c3 { display: none; }
  .guide-txt text { font-size: 26px; }
  .design-feats li { gap: 16px; padding: 22px 0; }
  .df-ic { width: 54px; height: 54px; }
  .df-ic svg { width: 26px; height: 26px; }
  .design-feats h3 { font-size: 18.5px; }
  .cert { padding: 34px 22px 30px; }
  .cert h3 { font-size: 18px; }
  .cert-info { grid-template-columns: 1fr; gap: 8px; font-size: 13.5px; }
  .cert-tb { font-size: 13.5px; }
  .cert-total { padding: 14px 16px; }
  .cert-total b { font-size: 30px; }
  .stamp { width: 80px; height: 80px; right: 16px; bottom: 12px; }
  .stamp span { font-size: 21px; }
  .stamp small { font-size: 7px; }
  .cert-sign { padding-right: 60px; }
  .trust-cards { grid-template-columns: 1fr; gap: 12px; }
  .tcard { padding: 24px 22px; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; }
  .tc-ic { grid-row: span 2; margin-bottom: 0; width: 52px; height: 52px; }
  .tcard h3 { font-size: 21px; }
  .tcard p { margin-top: 6px; }
  .tcard p br { display: none; }
  .points-list li { grid-template-columns: 1fr; gap: 6px; }
  .points-list em { grid-row: auto; padding-top: 0; }
  .price-grid { gap: 10px; }
  .price { padding: 34px 10px 22px; border-radius: 20px; }
  .price.best { padding-top: 34px; padding-bottom: 22px; }
  .pill { padding: 6px 14px; font-size: 15px; }
  .amt { margin-top: 16px; }
  .amt b { font-size: 40px; }
  .amt span { font-size: 16px; }
  .vat { font-size: 11.5px; }
  .price-cta { margin-top: 16px; padding: 9px 14px; font-size: 13px; }
  .ribbon { top: 13px; right: -40px; font-size: 10px; padding: 4px 40px; }
  .flow ol { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .flow .dot { width: 66px; height: 66px; }
  .flow b { margin-top: 16px; font-size: 15.5px; }
  .flow small { font-size: 12.5px; }
  .loc-hero { height: 340px; }
  .loc-hero figcaption { left: 16px; right: 16px; bottom: 16px; padding: 16px 20px; }
  .loc-hero .script { font-size: 16px; }
  .loc-dl div { grid-template-columns: 92px 1fr; gap: 10px; font-size: 14.5px; }
  .field.two { grid-template-columns: 1fr; gap: 0; }
  .field.two > div + div { margin-top: 18px; }
  .rs-form { border-radius: 24px; }
  .ft-info span { display: block; }
  .ft-info span + span::before { display: none; }
  .ck-card { padding: 28px 22px 24px; border-radius: 22px; }
  .ck-card h3 { margin-bottom: 26px; }
  .ck-x { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ck-stats { border-radius: 22px; }
  .ck-stats li { padding: 24px 10px 22px; }
  .ck-stats li > span { font-size: 12.5px; }
  .ck-tt { margin-bottom: 22px; }
  .ck-tb { display: grid; gap: 10px; background: none; border: 0; border-radius: 0; overflow: visible; }
  .ck-hd { display: none; }
  .ck-row { grid-template-columns: 1fr; padding: 18px 18px 16px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
  .ck-row > span { padding: 0; border: 0; }
  .ck-row > span:first-child { font-size: 13px; color: #7fd6ff; }
  .ck-row > span:nth-child(2) { margin-top: 6px; font-size: 15.5px; font-weight: 600; color: #fff; }
  .ck-row .ok { margin-top: 12px; padding: 12px 14px; border-radius: 12px; box-shadow: none; font-size: 14.5px; }
  .ck-row .ok svg { width: 20px; height: 20px; }
  .ck-note { text-align: left; }

  .ba-main::before, .ba-stage { border-radius: 20px; }
  .ba-tag { top: 12px; padding: 6px 12px; font-size: 12px; }
  .ba-tag.before { left: 12px; }
  .ba-tag.after { right: 12px; }
  .ba-knob { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .ba-knob svg { width: 22px; height: 22px; }
  .ba-nav { width: 38px; height: 38px; margin-top: -19px; }
  .ba-nav.prev { left: 8px; }
  .ba-nav.next { right: 8px; }
  .ba-hint { bottom: 12px; padding: 8px 14px; font-size: 12.5px; }
  .ba-no b { font-size: 34px; }
  .ba-desc { font-size: 15px; min-height: 0; }
  .ba-thumbs { gap: 8px; margin-top: 22px; }
  .ba-thumb { border-radius: 12px; }
  .ba-thumb span { padding: 14px 7px 6px; font-size: 11px; gap: 4px; }

  /* 모바일 중앙 정렬 */
  .sec-head, .concern-copy, .market-copy, .points-list, .sys-head, .care-top, .conf-copy, .loc-info, .rs-copy, .rs-form-t, .cstep { text-align: center; }
  .sec-head { margin-inline: auto; }
  .sec-head.split .desc, .sys-side { text-align: center; }
  .sec-no { left: 50%; transform: translateX(-50%); }
  .kicker { justify-content: center; }
  .kicker::after { content: ''; width: 34px; height: 1px; background: currentColor; }
  .concern-list li, .points-list li, .loc-dl, .hours, .ck-card, .ck-row, .design-feats, .field, .agree-row { text-align: left; }
  .sys-bar { margin: 18px auto 0; }
  .care-quote { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--gold-l); }
  .conf-copy .btn-line.dark { align-self: center; }
  .rs-contact { margin-inline: auto; text-align: left; }
  .loc-hero figcaption { text-align: center; }
  .ft-in { text-align: center; }
  .ft-brand { justify-self: center; text-align: left; }

  /* 모바일 가독성 */
  .tt { font-size: clamp(23px, 6.2vw, 27px); line-height: 1.45; }
  .desc, .st-d { font-size: 15px; line-height: 1.8; }
  .concern-q { font-size: 15.5px; }
  .pt-tt { font-size: 22px; }
  .st-l { font-size: clamp(30px, 8.6vw, 38px); }
  .care-quote p { font-size: 19px; }
  .hero-tt { font-size: clamp(38px, 11vw, 50px); }
  .hero-sub br { display: none; }
  .hero-sub { max-width: 330px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}