@charset "utf-8";
/* =========================================================
   뉴욕클린 테마 스타일
   - 기준: 리페이스 홈페이지 테마 디자인 정의서 (레이아웃·여백·모션 체계)
   - 브랜드 컬러: #024483 (뉴욕클린 메인 컬러)
   ========================================================= */

/* ---------- 0. 토큰 ---------- */
:root {
  --point: #024483;
  --point-l: #1d6fd0;
  --point-xl: #5aa2ea;
  --sky: #eaf3fb;
  --sky-2: #f4f8fc;
  --ink: #131c27;
  --text: #3a4552;
  --muted: #76818d;
  --line: #dde4ec;
  --white: #fff;
  --dirt: #6b5230;

  --layout: 1740px;
  --mini: 1540px;
  --narrow: 1080px;

  --r-lg: 48px;
  --r-md: 32px;
  --r-sm: 14px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --hd-h: 96px;
  --sec-pad: 160px;
}

/* ---------- 1. 기본 ---------- */
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body.nyc {
  margin: 0;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--text);
  background: #fff;
  word-break: keep-all;
  overflow-x: clip;
}
:where(body.nyc) * { box-sizing: border-box; }
body.nyc p, body.nyc li, body.nyc td, body.nyc th { word-break: keep-all; overflow-wrap: break-word; }
:where(body.nyc) img { max-width: 100%; vertical-align: top; }
:where(body.nyc) a { color: inherit; text-decoration: none; }
:where(body.nyc) button { font-family: inherit; letter-spacing: inherit; cursor: pointer; }
:where(body.nyc) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(body.nyc) :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; }
:where(body.nyc) :is(h1, h2, h3, h4, p, dl, dd, figure) { margin: 0; }
:where(body.nyc) strong { font-weight: 700; color: var(--ink); }
:where(body.nyc) em { font-style: normal; }
body.nyc .sound_only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.nyc #hd_login_msg { position: absolute; top: -9999px; left: -9999px; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--point); color: #fff !important; border-radius: 8px; }
.skip-link:focus { top: 16px; }
body.nyc :focus-visible { outline: 2px solid var(--point-l); outline-offset: 3px; }
.pc-only { display: inline; }

.container { width: 90%; max-width: var(--layout); margin: 0 auto; }
.container_mini { width: 90%; max-width: var(--mini); margin: 0 auto; }
.container_narrow { width: 90%; max-width: var(--narrow); margin: 0 auto; }
.section { padding: var(--sec-pad) 0; }
.bg-sky { background: var(--sky-2); }
.bg-sky, .pb-why, .m-method, .m-trust, .m-faq { --clip-bg: var(--sky-2); }

/* ---------- 2. 버튼 ---------- */
.nbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 200px; height: 60px; padding: 0 32px;
  border-radius: 60px; border: 1px solid transparent;
  font-size: 17px; font-weight: 600; line-height: 1; overflow: hidden; isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.nbtn::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease); }
.nbtn:hover::before { transform: scaleX(1); }
.nbtn::after { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h11M7.5 2.5 12 7l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center/contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h11M7.5 2.5 12 7l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center/contain; transition: transform .4s var(--ease); }
.nbtn:hover::after { transform: translateX(4px); }
.nbtn--point { background: var(--point); color: #fff; }
.nbtn--point::before { background: var(--point-l); }
.nbtn--white { background: #fff; color: var(--point); }
.nbtn--white::before { background: var(--sky); }
.nbtn--line-white { border-color: rgba(255,255,255,.6); color: #fff; }
.nbtn--line-white::before { background: #fff; }
.nbtn--line-white:hover { color: var(--point); border-color: #fff; }
.nbtn--line { border-color: var(--point); color: var(--point); }
.nbtn--line::before { background: var(--point); }
.nbtn--line:hover { color: #fff; }

.more-link { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--point); position: relative; padding-bottom: 4px; }
.more-link::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(.3); transform-origin: left; transition: transform .45s var(--ease); }
.more-link::after { content: '→'; transition: transform .4s var(--ease); }
.more-link:hover::before { transform: scaleX(1); }
.more-link:hover::after { transform: translateX(5px); }

/* ---------- 3. 섹션 제목 ---------- */
.sec-head { max-width: 900px; margin-bottom: 70px; }
.sec-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head__label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 16px; font-weight: 700; color: var(--point); letter-spacing: -0.01em; }
.sec-head__label::before { content: ''; width: 26px; height: 2px; background: currentColor; }
.sec-head.is-center .sec-head__label::after { content: ''; width: 26px; height: 2px; background: currentColor; }
.sec-head__label.is-white { color: #fff; }
.sec-head__title { font-size: 45px; line-height: 1.28; font-weight: 700; color: var(--ink); letter-spacing: -0.035em; }
.sec-head__title em { color: var(--point); }
.sec-head__desc { margin-top: 26px; font-size: 18px; line-height: 1.7; color: var(--muted); }
.sec-head__desc strong { color: var(--point); }
.sec-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 70px; }
.sec-row .sec-head { margin-bottom: 0; }

/* ---------- 4. 등장 효과 ---------- */
.js [data-ani] { transition-property: opacity, transform, filter; transition-duration: .9s; transition-timing-function: var(--ease); will-change: opacity, transform; }
.js [data-ani="fade-up"] { opacity: 0; transform: translateY(50px); }
.js [data-ani="fade-left"] { opacity: 0; transform: translateX(-50px); }
.js [data-ani="fade-right"] { opacity: 0; transform: translateX(50px); }
.js [data-ani="focus"] { opacity: 0; filter: blur(6px); transform: scale(1.04); transition-duration: 1.1s; }
.js [data-ani="clip"] { position: relative; }
.js [data-ani="clip"]::after { content: ''; position: absolute; inset: -1px; z-index: 2; background: var(--clip-bg, #fff); transform-origin: top center; transition: transform 1.3s var(--ease); }
.js [data-ani="clip"].is-in::after { transform: scaleY(0); }
.js [data-ani="clip"] img { transform: scale(1.12); transition: transform 1.6s var(--ease); }
.js [data-ani].is-in { opacity: 1; transform: none; filter: none; }
.js [data-ani="clip"].is-in img { transform: scale(1); }

/* ---------- 5. 헤더 ---------- */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--hd-h); color: #fff; transition: transform .5s var(--ease), background-color .4s, color .4s, box-shadow .4s; }
.hd__wrap { width: 92%; max-width: 1800px; height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 40px; }
.hd__logo { flex: 0 0 auto; margin: 0; }
.hd__logo a { display: block; }
.hd__logo img { height: 52px; width: auto; }
.ft__logo img { height: 56px; width: auto; }
.fm__logo img { height: 48px; width: auto; }
.hd__logo-dark { display: none; }
.logo-text { display: inline-flex; flex-direction: column; line-height: 1; }
.logo-text b { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; color: inherit; }
.logo-text small { margin-top: 5px; font-size: 10px; font-weight: 600; letter-spacing: .24em; opacity: .75; }
.hd__gnb { flex: 1; display: flex; justify-content: center; }
.hd__gnb > ul { display: flex; gap: 8px; }
.hd__gnb > ul > li { position: relative; }
.hd__gnb > ul > li > a { display: block; padding: 36px 22px; font-size: 17px; font-weight: 600; position: relative; }
.hd__gnb > ul > li > a::after { content: ''; position: absolute; left: 50%; bottom: 28px; width: 0; height: 2px; background: currentColor; transform: translateX(-50%); transition: width .45s var(--ease); }
.hd__gnb > ul > li:hover > a::after, .hd__gnb > ul > li:focus-within > a::after, .hd__gnb > ul > li.is-active > a::after { width: 24px; }
.hd__lnb { position: absolute; top: calc(100% - 12px); left: 50%; min-width: 190px; padding: 14px; background: #fff; border-radius: 18px; box-shadow: 0 20px 50px rgba(2, 40, 90, .14); transform: translate(-50%, 10px); opacity: 0; visibility: hidden; transition: .4s var(--ease); }
.hd__lnb::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; background: var(--point); border-radius: 2px; }
.hd__gnb > ul > li:hover .hd__lnb, .hd__gnb > ul > li:focus-within .hd__lnb { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.hd__lnb a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 16px; font-weight: 500; color: var(--text); white-space: nowrap; transition: .3s; }
.hd__lnb a:hover { background: var(--sky); color: var(--point); font-weight: 700; }
.hd__util { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; }
.hd__tel { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: 0; }
.hd__tel::before { content: ''; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid currentColor; opacity: .9; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3l1.5 4-2 1.3a11 11 0 0 0 7.7 7.7l1.3-2 4 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") no-repeat center/16px, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3l1.5 4-2 1.3a11 11 0 0 0 7.7 7.7l1.3-2 4 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") no-repeat center/16px exclude, linear-gradient(#000 0 0); }
.hd__tel:hover::before { animation: telRing .8s var(--ease); }
.hd.is-scrolled .hd__tel::before, body.no-hero .hd__tel::before { background: var(--point); }
@keyframes telRing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
.hd__cta { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 24px 0 20px; border-radius: 46px; background: #fff; color: var(--point); font-size: 15px; font-weight: 700; transition: .35s; }
.hd__cta::before { content: ''; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H11l-4.5 4v-4A2.5 2.5 0 0 1 4 13.5z' stroke-linecap='round'/%3E%3Cpath d='M8.5 10h.01M12 10h.01M15.5 10h.01' stroke-linecap='round' stroke-width='2.6'/%3E%3C/svg%3E") no-repeat center/contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H11l-4.5 4v-4A2.5 2.5 0 0 1 4 13.5z' stroke-linecap='round'/%3E%3Cpath d='M8.5 10h.01M12 10h.01M15.5 10h.01' stroke-linecap='round' stroke-width='2.6'/%3E%3C/svg%3E") no-repeat center/contain; }
.hd__cta:hover { background: var(--point-l); color: #fff; }
.hd__burger { display: none; width: 46px; height: 46px; padding: 0; border: 0; background: none; color: inherit; position: relative; }
.hd__burger span { position: absolute; left: 10px; width: 26px; height: 2px; background: currentColor; border-radius: 2px; transition: .3s; }
.hd__burger span:nth-child(1) { top: 15px; }
.hd__burger span:nth-child(2) { top: 22px; }
.hd__burger span:nth-child(3) { top: 29px; width: 18px; }

.hd.is-scrolled, body.no-hero .hd { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.hd.is-scrolled .hd__logo-dark, body.no-hero .hd__logo-dark { display: block; }
.hd.is-scrolled .hd__logo-white, body.no-hero .hd__logo-white { display: none; }
.hd.is-scrolled .hd__cta, body.no-hero .hd__cta { background: var(--point); color: #fff; }
.hd.is-scrolled .hd__cta:hover { background: var(--point-l); }
.hd.is-scrolled .logo-text b, body.no-hero .logo-text b { color: var(--point); }
.hd.is-up { transform: translateY(-100%); }
body.no-hero .container-main { padding-top: calc(var(--hd-h) + 60px); }

/* 전체 메뉴 */
.fm { position: fixed; inset: 0; z-index: 200; background: var(--point); color: #fff; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .6s var(--ease), opacity .6s, visibility .6s; overflow-y: auto; }
.fm.is-open { transform: none; opacity: 1; visibility: visible; }
.fm__inner { width: 90%; max-width: var(--mini); margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding: 30px 0 60px; }
.fm__top { display: flex; justify-content: space-between; align-items: center; height: 60px; margin-bottom: 60px; }
.fm__close { width: 46px; height: 46px; border: 0; background: none; position: relative; }
.fm__close span { position: absolute; top: 22px; left: 8px; width: 30px; height: 2px; background: #fff; }
.fm__close span:first-child { transform: rotate(45deg); }
.fm__close span:last-child { transform: rotate(-45deg); }
.fm__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; }
.fm__tit { display: block; width: 100%; padding: 0 0 18px; margin-bottom: 18px; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); background: none; color: #fff; font-size: 24px; font-weight: 700; text-align: left; }
.fm__tit i { display: none; }
.fm__sub a { display: block; padding: 8px 0; font-size: 17px; color: rgba(255,255,255,.8); transition: .3s; }
.fm__sub a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.fm__foot { margin-top: auto; padding-top: 60px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.fm__tel { font-size: 40px; font-weight: 800; letter-spacing: 0; }
.fm__foot p { flex: 1; color: rgba(255,255,255,.75); }
body.is-locked { overflow: hidden; }

/* ---------- 6. 메인 첫 화면 ---------- */
.hero { position: relative; height: 100vh; min-height: 680px; overflow: hidden; background: #0d2a4a; color: #fff; }
.hero__video { position: absolute; inset: 0; z-index: 0; }
.hero__video video { width: 100%; height: 100%; object-fit: cover; }
.hero__video + .hero__swiper .hero__bg { opacity: 0; }
.hero__swiper { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity 2s var(--ease), transform 2s var(--ease); }
.hero__swiper.is-on, .no-js .hero__swiper { opacity: 1; transform: scale(1); }
.hero__swiper .swiper-wrapper { height: 100%; }
.hero__slide { position: relative; height: 100%; overflow: hidden; }
.hero__slide:not(:first-child) { display: none; }
.hero__swiper.swiper-initialized .hero__slide { display: block; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7s linear; }
.hero__slide.swiper-slide-active .hero__bg img { transform: scale(1); }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(2, 38, 78, .82) 0%, rgba(2, 52, 104, .55) 45%, rgba(2, 68, 131, .08) 100%); }
.hero__inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.hero__txt { max-width: 1140px; padding-top: 40px; }
.hero__eyebrow { display: inline-block; margin-bottom: 28px; padding: 9px 18px; border: 1px solid rgba(255,255,255,.45); border-radius: 40px; font-size: 16px; font-weight: 600; }
.hero__title { font-size: 72px; line-height: 1.2; font-weight: 700; letter-spacing: -0.04em; color: #fff; }
.hero__title em { position: relative; z-index: 0; color: #fff; }
.hero__title em::before { content: ''; position: absolute; left: -4px; right: -4px; bottom: 6%; height: 30%; z-index: -1; background: var(--point-l); transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease) .8s; }
.swiper-slide-active .hero__title em::before, .no-js .hero__title em::before { transform: scaleX(1); }
.hero__desc { margin-top: 30px; font-size: 20px; line-height: 1.7; color: rgba(255,255,255,.88); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 46px; }
.hero__txt > * { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.swiper-slide-active .hero__txt > *, .no-js .hero__txt > * { opacity: 1; transform: none; }
.swiper-slide-active .hero__txt > *:nth-child(2) { transition-delay: .15s; }
.swiper-slide-active .hero__txt > *:nth-child(3) { transition-delay: .3s; }
.swiper-slide-active .hero__txt > *:nth-child(4) { transition-delay: .45s; }
.hero__nav { position: absolute; z-index: 5; left: 50%; bottom: 60px; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.hero__num b { color: #fff; }
.hero__num { color: rgba(255,255,255,.6); }
.hero__progress { position: relative; width: 85px; height: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.hero__progress i { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero__prev, .hero__next { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: transparent; position: relative; transition: .3s; }
.hero__prev::after, .hero__next::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 1.5px solid #fff; border-left: 1.5px solid #fff; }
.hero__prev::after { transform: translate(-30%, -50%) rotate(-45deg); }
.hero__next::after { transform: translate(-70%, -50%) rotate(135deg); }
.hero__prev:hover, .hero__next:hover { background: #fff; }
.hero__prev:hover::after, .hero__next:hover::after { border-color: var(--point); }
.hero__dots { display: none; }
.hero__scroll { position: absolute; z-index: 5; left: 4%; bottom: 60px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .2em; color: rgba(255,255,255,.75); }
.hero__scroll::after { content: ''; width: 1px; height: 60px; background: linear-gradient(#fff 50%, rgba(255,255,255,.2) 50%); background-size: 1px 200%; animation: scrollLine 2s infinite var(--ease); }
@keyframes scrollLine { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

/* ---------- 7. 메인 : 오염의 위치 ---------- */
.diff { display: flex; flex-direction: column; gap: 120px; }
.diff__block { display: flex; align-items: center; gap: 7%; }
.diff__block.is-rev { flex-direction: row-reverse; }
.diff__img { flex: 0 0 56%; aspect-ratio: 13 / 10; border-radius: var(--r-lg); overflow: hidden; }
.diff__img img { width: 100%; height: 100%; object-fit: cover; }
.diff__txt { flex: 1; }
.diff__num { display: block; margin-bottom: 20px; font-size: 20px; font-weight: 800; color: var(--point-l); letter-spacing: 0; }
.diff__tit { margin-bottom: 30px; font-size: 38px; line-height: 1.32; font-weight: 700; color: var(--ink); letter-spacing: -0.035em; }
.diff__tit em { color: var(--point); position: relative; }
.diff__txt p { font-size: 18px; line-height: 1.8; color: var(--text); }
.diff__txt p + p { margin-top: 14px; }

/* ---------- 8. 메인 : 평당 20리터 ---------- */
.m-liter { position: relative; background: var(--point); color: #fff; overflow: hidden; }
.m-liter::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(90, 162, 234, .35), transparent 45%), radial-gradient(circle at 10% 90%, rgba(29, 111, 208, .45), transparent 40%); pointer-events: none; }
.m-liter__pin { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 140px 0; }
.m-liter__inner { display: flex; align-items: center; gap: 6%; }
.m-liter__txt { flex: 0 0 48%; }
.m-liter__title { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 12px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.045em; }
.m-liter__pre, .m-liter__unit { font-size: clamp(40px, 3.6vw, 64px); padding-bottom: 34px; }
.m-liter__num { --fill: 100%; position: relative; font-size: clamp(180px, 15vw, 260px); font-weight: 900; line-height: .82; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.55); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%238fc3f5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 400 Q50 370 100 400 T200 400 T300 400 T400 400 V800 H0Z' fill='url(%23g)'/%3E%3C/svg%3E") repeat-x; background-size: 50% 200%; background-position: 0 var(--fill); -webkit-background-clip: text; background-clip: text; animation: ltWave 3.2s linear infinite; filter: drop-shadow(0 18px 40px rgba(0, 20, 60, .35)); }
@keyframes ltWave { to { background-position-x: 100%; } }
.m-liter__desc { margin-top: 44px; max-width: 620px; font-size: 21px; line-height: 1.75; color: rgba(255,255,255,.9); }
.m-liter__count { margin-top: 36px; font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -0.03em; }
.m-liter__count b { display: inline-block; padding: 0 .12em; color: #fff; background: linear-gradient(transparent 62%, rgba(90, 162, 234, .6) 62%); font-variant-numeric: tabular-nums; }
.m-liter__visual { flex: 1; }
.lt-view { --p: 100%; --k: .18; position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 40px 80px rgba(0, 20, 60, .35); }
.lt-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-view__after { clip-path: inset(0 0 calc(100% - (50% + var(--p) * var(--k))) 0); }
.lt-view__line { position: absolute; left: 0; right: 0; top: calc(50% + var(--p) * var(--k)); height: 3px; margin-top: -1px; background: linear-gradient(90deg, transparent, #bfe0ff, #fff, #bfe0ff, transparent); box-shadow: 0 0 18px 4px rgba(150, 205, 255, .7); opacity: 0; transition: opacity .3s; }
.lt-view.is-draining .lt-view__line { opacity: 1; }
.lt-view__bubbles { position: absolute; inset: 0; pointer-events: none; }
.lt-view__bubbles i { position: absolute; bottom: -20px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.75); background: rgba(255,255,255,.15); animation: ltBubble 4s infinite ease-in; }
.lt-view__bubbles i:nth-child(1) { left: 12%; animation-delay: 0s; }
.lt-view__bubbles i:nth-child(2) { left: 26%; width: 6px; height: 6px; animation-delay: 1.2s; }
.lt-view__bubbles i:nth-child(3) { left: 41%; width: 14px; height: 14px; animation-delay: .6s; }
.lt-view__bubbles i:nth-child(4) { left: 55%; animation-delay: 2s; }
.lt-view__bubbles i:nth-child(5) { left: 68%; width: 7px; height: 7px; animation-delay: 1.6s; }
.lt-view__bubbles i:nth-child(6) { left: 80%; width: 12px; height: 12px; animation-delay: .3s; }
.lt-view__bubbles i:nth-child(7) { left: 90%; width: 6px; height: 6px; animation-delay: 2.6s; }
@keyframes ltBubble { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-620px) scale(1.1); opacity: 0; } }

/* ---------- 9. 메인 : 작업 원리 ---------- */
.m-method { background: var(--sky-2); }
.method-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.method-card { position: relative; padding: 44px 36px 50px; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.method-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(2, 68, 131, .1); border-color: transparent; }
.method-card__num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 34px; border-radius: 50%; background: var(--sky); color: var(--point); font-size: 16px; font-weight: 800; letter-spacing: 0; transition: .4s; }
.method-card:hover .method-card__num { background: var(--point); color: #fff; }
.method-card h3 { margin-bottom: 18px; font-size: 22px; line-height: 1.4; font-weight: 700; color: var(--ink); }
.method-card p { font-size: 16px; line-height: 1.75; color: var(--text); }
.method-note { margin-top: 40px; padding: 24px 30px; border-left: 3px solid var(--point); background: #fff; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 17px; }

/* ---------- 10. 작업 공정 (고정 스크롤) ---------- */
.m-proc { padding: var(--sec-pad) 0; }
.proc { position: relative; display: flex; gap: 6%; align-items: flex-start; }
.proc__thumb { position: sticky; top: calc(var(--hd-h) + 40px); flex: 0 0 50%; aspect-ratio: 1 / 1; max-height: calc(100vh - var(--hd-h) - 80px); border-radius: var(--r-lg); overflow: hidden; background: var(--sky); }
.proc__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .8s var(--ease), transform 1.2s var(--ease); }
.proc__thumb img.is-on { opacity: 1; transform: scale(1); }
.proc__list { flex: 1; padding: 8vh 0; }
.proc__item { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; filter: blur(2px); transition: opacity .6s var(--ease), filter .6s var(--ease); }
.proc__item.is-on { opacity: 1; filter: none; }
.proc__mimg { display: none; }
.proc__no { font-size: 16px; font-weight: 800; color: var(--point-l); letter-spacing: .04em; }
.proc__tit { margin: 16px 0 22px; font-size: 40px; font-weight: 700; color: var(--ink); letter-spacing: -0.035em; }
.proc__desc { max-width: 520px; font-size: 18px; line-height: 1.8; }
.proc__bar { position: absolute; right: 0; top: 8vh; bottom: 8vh; width: 1px; background: var(--line); }
.proc__bar i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--point); transform: scaleY(0); transform-origin: top; }
.proc-order { margin-top: 110px; display: flex; align-items: center; gap: 70px; padding-top: 80px; border-top: 1px solid var(--line); }
.proc-order__head { flex: 0 0 38%; }
.proc-order__label { display: inline-block; margin-bottom: 18px; font-size: 15px; font-weight: 700; color: var(--point); }
.proc-order__tit { margin-bottom: 18px; font-size: 32px; line-height: 1.38; font-weight: 700; color: var(--ink); letter-spacing: -0.035em; }
.proc-order__flow { flex: 1; display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.proc-order__flow li { text-align: center; }
.proc-order__flow li:not(.proc-order__gap) { flex: 0 0 150px; }
.proc-order__flow b { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: 0 auto 20px; border-radius: 50%; border: 2px solid var(--point-xl); background: #fff; color: var(--point); font-size: 26px; font-weight: 800; letter-spacing: 0; }
.proc-order__flow li.is-on b { background: var(--point); border-color: var(--point); color: #fff; box-shadow: 0 0 0 10px var(--sky); }
.proc-order__flow strong { display: block; margin-bottom: 6px; font-size: 22px; color: var(--ink); }
.proc-order__flow span { font-size: 15px; color: var(--muted); }
.proc-order__gap { position: relative; flex: 1; height: 96px; }
.proc-order__gap::before { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; border-top: 2px dashed var(--point-xl); }
.proc-order__gap em { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--point); }
.proc-order__txt { font-size: 16px; line-height: 1.8; color: var(--text); }
.proc-order__note { display: none; }
@media (max-width: 1240px) { .proc-order { flex-direction: column; align-items: stretch; gap: 50px; } .proc-order__head { flex: none; } }

/* ---------- 11. 전후 장면 ---------- */
.m-proof { background: var(--ink); color: #fff; }
.m-proof .sec-head__title { color: #fff; }
.m-proof .sec-head__label { color: var(--point-xl); }
.m-proof .sec-head__desc { color: rgba(255,255,255,.65); }
.bna { display: flex; gap: 24px; align-items: stretch; }
.bna__view { position: relative; flex: 0 0 62%; border-radius: var(--r-md); overflow: hidden; background: #000; }
.bna__view img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity .5s; }
.bna__view img.is-fade { opacity: 0; }
.bna__tag { position: absolute; top: 24px; padding: 8px 18px; border-radius: 30px; font-size: 15px; font-weight: 700; }
.bna__tag.is-before { left: 24px; background: rgba(0,0,0,.6); color: #fff; }
.bna__tag.is-after { left: calc(50% + 24px); background: #fff; color: var(--point); }
.bna__view figcaption { position: absolute; right: 24px; bottom: 20px; font-size: 14px; color: rgba(255,255,255,.8); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.bna__list { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.bna__list button { display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; background: none; opacity: .55; transition: .4s; }
.bna__list button img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bna__list button:hover, .bna__list button.is-on { opacity: 1; border-color: var(--point-xl); }

/* ---------- 12. 서비스 카드 ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 340px); gap: 14px; }
.svc-card { position: relative; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg); overflow: hidden; color: #fff; isolation: isolate; text-align: center; background: var(--svc-bg, var(--point)); }
.svc-card.is-main { grid-column: span 2; }
.svc-card--pebble { --svc-bg: #024483; }
.svc-card--regular { --svc-bg: #1c2530; }
.svc-card--carpet { --svc-bg: #1c2530; }
.svc-card--tile { --svc-bg: #1d6fd0; }
.svc-card--etc { --svc-bg: #024483; }
.svc-card__img { position: absolute; inset: 0; z-index: -2; }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; filter: blur(5px); transform: scale(1.06); transition: filter .6s var(--ease), transform .8s var(--ease); }
.svc-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--svc-bg); transition: opacity .9s var(--ease); }
.svc-card:hover .svc-card__img img, .svc-card:focus-visible .svc-card__img img { filter: none; transform: scale(1); }
.svc-card:hover::after, .svc-card:focus-visible::after { opacity: .45; }
.svc-card__txt { position: relative; z-index: 1; padding: 0 40px; text-shadow: 0 2px 16px rgba(0, 20, 50, .35); }
.svc-card__sub { display: block; margin-bottom: 12px; font-size: 17px; font-weight: 500; color: rgba(255,255,255,.75); letter-spacing: -0.01em; }
.svc-card__txt strong { display: block; font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -0.035em; }
.svc-card.is-main .svc-card__txt strong { font-size: 48px; }
.svc-card__txt p { margin-top: 16px; font-size: 17px; color: rgba(255,255,255,.85); }
.svc-card__ico { position: absolute; right: 36px; bottom: 32px; width: 104px; height: 104px; color: rgba(255,255,255,.55); transition: transform 1.2s var(--ease), color .5s; }
.svc-card__ico svg, .svc-card__ico img { width: 100%; height: 100%; display: block; object-fit: contain; }
.svc-card__ico img { opacity: .7; transition: opacity .5s; }
.svc-card:hover .svc-card__ico img { opacity: 1; }
.svc-card:hover .svc-card__ico { transform: rotate(90deg) scale(1.08); color: #fff; }
.svc-card.is-main .svc-card__ico { width: 150px; height: 150px; right: 44px; bottom: 40px; }
.svc-card--etc:hover .svc-card__ico, .svc-card--carpet:hover .svc-card__ico { transform: scale(1.12); }

/* ---------- 13. 신뢰 ---------- */
.m-trust { padding-bottom: 120px; background: var(--sky-2); }
.trust { display: flex; gap: 8%; align-items: flex-start; }
.trust__head { flex: 0 0 38%; }
.trust__list { flex: 1; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.trust__list li { display: flex; align-items: center; gap: 20px; padding: 26px 6px; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 600; color: var(--ink); }
.trust__list li span { font-size: 14px; font-weight: 700; color: var(--point-l); letter-spacing: 0; }
.stat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 90px; }
.stat li { position: relative; padding: 38px 34px 40px; background: #fff; border-radius: var(--r-md); overflow: hidden; isolation: isolate; box-shadow: 0 10px 30px rgba(2, 40, 90, .05); transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .5s var(--ease); }
.stat li::after { content: ''; position: absolute; left: 34px; right: 34px; bottom: 0; height: 3px; background: var(--point); border-radius: 3px 3px 0 0; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.stat li:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(2, 40, 90, .12); }
.stat li:hover::after { transform: scaleX(1); }
.stat li:first-child { background: var(--point); }
.stat li:first-child b, .stat li:first-child .stat__lb, .stat li:first-child p { color: #fff; }
.stat li:first-child p { opacity: .8; }
.stat li:first-child .stat__ico { background: rgba(255,255,255,.15); color: #fff; }
.stat li:first-child .stat__bg { color: rgba(255,255,255,.08); }
.stat li:first-child::after { background: #fff; }
.stat__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 26px; border-radius: 16px; background: var(--sky); color: var(--point); transition: transform .5s var(--ease); }
.stat__ico svg { width: 26px; height: 26px; }
.stat li:hover .stat__ico { transform: rotate(-8deg) scale(1.08); }
.stat__lb { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--point-l); }
.stat__bg { position: absolute; right: -18px; bottom: -22px; z-index: -1; width: 140px; height: 140px; color: rgba(2, 68, 131, .05); transition: transform .8s var(--ease); }
.stat__bg svg { width: 100%; height: 100%; }
.stat li:hover .stat__bg { transform: rotate(-10deg) scale(1.1); }
.stat b { display: block; font-size: 38px; font-weight: 800; color: var(--point); letter-spacing: -0.03em; line-height: 1.2; }
.stat p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.stat p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.stat p a:hover { color: var(--point); }
.marquee { margin-top: 90px; overflow: hidden; }
.marquee__track { display: flex; gap: 16px; width: max-content; animation: marquee 50s linear infinite; }
.marquee__track img { width: 380px; height: 260px; object-fit: cover; border-radius: var(--r-md); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.area-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 60px; }
.area-chips strong { margin-right: 14px; font-size: 17px; }
.area-chips a { padding: 9px 18px; border: 1px solid var(--line); border-radius: 40px; background: #fff; font-size: 15px; color: var(--text); transition: .3s; }
.area-chips a:hover { border-color: var(--point); color: var(--point); }

/* ---------- 14. 사례 카드 ---------- */
.case-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.case-card a { display: block; }
.case-card__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--sky); }
.case-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.case-card a:hover .case-card__img img { transform: scale(1.06); }
.case-card__noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; color: rgba(2,68,131,.25); }
.case-card__body { padding: 24px 4px 0; }
.case-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.case-card__tags span { padding: 4px 12px; border-radius: 20px; background: var(--sky); color: var(--point); font-size: 13px; font-weight: 600; }
.case-card__tit { display: block; font-size: 21px; line-height: 1.45; font-weight: 700; color: var(--ink); transition: color .3s; }
.case-card a:hover .case-card__tit { color: var(--point); }
.case-card__sum { margin-top: 10px; font-size: 15px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.case-empty { padding: 60px 30px; border: 1px dashed var(--line); border-radius: var(--r-md); text-align: center; color: var(--muted); }
.case-empty a { color: var(--point); font-weight: 700; text-decoration: underline; }

/* ---------- 15. FAQ ---------- */
.m-faq { background: var(--sky-2); }
.faq-wrap { display: flex; gap: 8%; align-items: flex-start; }
.faq-wrap__head { flex: 0 0 34%; position: sticky; top: calc(var(--hd-h) + 40px); }
.faq-wrap__head .sec-head { margin-bottom: 40px; }
.faq-wrap .faq-list { flex: 1; }
.faq-list { border-top: 1px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q { margin: 0; }
.faq-item__q button { position: relative; display: flex; align-items: center; gap: 18px; width: 100%; padding: 30px 60px 30px 4px; border: 0; background: none; text-align: left; font-size: 20px; font-weight: 600; color: var(--ink); }
.faq-item__mark { flex: 0 0 auto; font-size: 18px; font-weight: 800; color: var(--point-l); }
.faq-item__icon { position: absolute; right: 8px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: #fff; border: 1px solid var(--line); transition: .4s; }
.faq-item__icon::before, .faq-item__icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--point); transition: .4s; }
.faq-item__icon::after { transform: rotate(90deg); }
.faq-item__q button[aria-expanded="true"] .faq-item__icon { background: var(--point); border-color: var(--point); }
.faq-item__q button[aria-expanded="true"] .faq-item__icon::before, .faq-item__q button[aria-expanded="true"] .faq-item__icon::after { background: #fff; transform: rotate(180deg); }
.faq-item__a { height: 0; overflow: hidden; transition: height .45s var(--ease); }
.no-js .faq-item__a { height: auto; }
.faq-item__a-in { padding: 0 60px 30px 40px; }
.faq-item__a p { font-size: 17px; line-height: 1.8; color: var(--text); }

/* ---------- 16. 견적 절차 ---------- */
.est-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: s; }
.est-steps li { position: relative; }
.est-steps__img { aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; margin-bottom: 28px; }
.est-steps__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.est-steps li:hover .est-steps__img img { transform: scale(1.05); }
.est-steps span { display: block; font-size: 15px; font-weight: 800; color: var(--point-l); letter-spacing: 0; }
.est-steps strong { display: block; margin: 8px 0 12px; font-size: 24px; }
.est-steps p { font-size: 16px; line-height: 1.75; }
.est-factor { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 70px; padding: 30px 40px; border-radius: var(--r-md); border: 1px solid var(--line); }
.est-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 50px; }
.est-factor ul { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.est-factor li { padding: 8px 16px; border-radius: 30px; background: var(--sky); color: var(--point); font-size: 15px; font-weight: 600; }

/* ---------- 17. CTA 띠 ---------- */
.cta-band { position: relative; padding: 130px 0; color: #fff; overflow: hidden; isolation: isolate; }
.cta-band__bg { position: absolute; inset: 0; z-index: -1; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 56, 110, .94), rgba(2, 68, 131, .78)); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-band__title { font-size: 45px; line-height: 1.3; font-weight: 700; color: #fff; letter-spacing: -0.035em; }
.cta-band__desc { margin-top: 20px; font-size: 18px; color: rgba(255,255,255,.85); max-width: 640px; }
.cta-band__btns { display: flex; flex-direction: column; gap: 12px; }
.cta-band__btns .nbtn { min-width: 290px; }

/* ---------- 18. 푸터 ---------- */
.ft { padding: 90px 0 110px; background: #0f1823; color: rgba(255,255,255,.65); font-size: 15px; }
.ft__top { display: flex; flex-wrap: wrap; align-items: center; gap: 30px 50px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ft__logo { color: #fff; }
.ft__links { display: flex; flex-wrap: wrap; gap: 8px 28px; flex: 1; }
.ft__links a:hover { color: #fff; }
.ft__links strong { color: #fff; }
.ft__sns { display: flex; gap: 8px; }
.ft__sns a { display: inline-flex; padding: 8px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 30px; font-size: 14px; transition: .3s; }
.ft__sns a:hover { background: #fff; color: var(--ink); }
.ft__info { padding-top: 40px; }
.ft__tel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; margin-bottom: 20px; }
.ft__tel a { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: 0; }
.ft address { font-style: normal; line-height: 2; }
.ft address span { margin-right: 22px; }
.ft__copy { margin-top: 24px; font-size: 13px; color: rgba(255,255,255,.62); }

/* ---------- 19. 퀵메뉴 ---------- */
.qk { position: fixed; right: 32px; bottom: 40px; z-index: 90; }
.qk ul { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.qk a, .qk button { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 58px; background: #fff; color: var(--ink); box-shadow: 0 8px 24px rgba(2, 40, 90, .16); overflow: hidden; transition: width .45s var(--ease), background-color .3s; }
.qk i { position: absolute; right: 0; top: 0; width: 58px; height: 58px; background: no-repeat center/24px; transition: transform .45s var(--ease); }
.qk span { padding: 0 66px 0 22px; font-size: 15px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.qk a:hover, .qk button:hover, .qk a:focus-visible { width: 210px; }
.qk a:hover span, .qk button:hover span, .qk a:focus-visible span { opacity: 1; }
.qk a:hover, .qk button:hover, .qk a:focus-visible { justify-content: flex-start; }
.qk a:hover span, .qk button:hover span, .qk a:focus-visible span { padding: 0 24px 0 60px; }
.qk a:hover i, .qk button:hover i, .qk a:focus-visible i { transform: translateX(-152px); }
.qk__photo a { background: var(--point); color: #fff; }
.qk__photo i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H11l-4.5 4v-4A2.5 2.5 0 0 1 4 13.5z' stroke-linecap='round'/%3E%3Cpath d='M8.5 10h.01M12 10h.01M15.5 10h.01' stroke-linecap='round' stroke-width='2.6'/%3E%3C/svg%3E"); }
.qk__tel a { background: var(--point-l); color: #fff; }
.qk__tel i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Cpath d='M5 3.5h3l1.5 4-2 1.3a11 11 0 0 0 7.7 7.7l1.3-2 4 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.qk__case i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23024483' stroke-width='1.8'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.qk__yt i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='4' fill='%23ff0000'/%3E%3Cpath d='M10 9v6l5-3z' fill='%23fff'/%3E%3C/svg%3E"); }
.qk__top button { background: var(--ink); color: #fff; }
.qk__top i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); }
.qk__top { opacity: 0; visibility: hidden; transition: .4s; }
.qk.is-show .qk__top { opacity: 1; visibility: visible; }
.mbar { display: none; }

/* ---------- 20. 서브 공통 ---------- */
.sub-top { position: relative; min-height: 560px; height: 62vh; display: flex; align-items: center; overflow: hidden; color: #fff; background: #0d2a4a; text-align: center; }
.sub-top__bg { position: absolute; inset: 0; }
.sub-top__bg img { width: 100%; height: 100%; object-fit: cover; animation: subZoom 2.4s var(--ease) both; }
@keyframes subZoom { from { transform: scale(1.1); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.sub-top__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 38, 78, .55) 0%, rgba(2, 44, 90, .7) 100%); }
.sub-top__inner { position: relative; z-index: 2; padding-top: var(--hd-h); }
.sub-top__crumb { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 24px; font-size: 15px; color: rgba(255,255,255,.75); }
.sub-top__crumb a:hover { color: #fff; }
.sub-top__title { font-size: 56px; line-height: 1.25; font-weight: 700; color: #fff; letter-spacing: -0.04em; }
.sub-top__desc { margin: 20px auto 0; max-width: 760px; font-size: 19px; line-height: 1.7; color: rgba(255,255,255,.88); }

.sub-tabs { position: relative; z-index: 3; border-bottom: 1px solid var(--line); background: #fff; }
.sub-tabs ul { display: flex; justify-content: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.sub-tabs a { display: block; padding: 24px 22px; font-size: 16px; font-weight: 600; color: #5b6672; white-space: nowrap; position: relative; }
.sub-tabs a::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; background: var(--point); transform: scaleX(0); transition: transform .4s var(--ease); }
.sub-tabs a:hover, .sub-tabs .is-on a { color: var(--point); }
.sub-tabs .is-on a::after, .sub-tabs a:hover::after { transform: scaleX(1); }

/* 본문 블록 */
.txt-block { display: flex; gap: 8%; align-items: flex-start; }
.txt-block__head { flex: 0 0 34%; }
.txt-block__head .sec-head { margin-bottom: 0; }
.txt-block__body { flex: 1; }
.txt-block__body p { font-size: 18px; line-height: 1.85; }
.txt-block__body p + p { margin-top: 18px; }
.lead-copy { font-size: 26px !important; line-height: 1.6 !important; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; }
.lead-copy em { color: var(--point); }

.img-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 70px; }
.img-split figure { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.img-split img { width: 100%; height: 100%; object-fit: cover; }

.point-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.point-list li { padding: 40px 34px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); }
.bg-sky .point-list li { border-color: transparent; }
.point-list b { display: block; margin-bottom: 20px; font-size: 15px; font-weight: 800; color: var(--point-l); letter-spacing: 0; }
.point-list strong { display: block; margin-bottom: 14px; font-size: 22px; line-height: 1.4; }
.point-list p { font-size: 16px; line-height: 1.75; }

.info-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: 17px; }
.info-table th, .info-table td { padding: 24px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.7; }
.info-table th { width: 26%; background: var(--sky-2); font-weight: 700; color: var(--ink); }
.info-table td strong { color: var(--point); }
.table-scroll { overflow-x: auto; }

.note-box { margin-top: 30px; padding: 26px 30px; border-radius: var(--r-sm); background: var(--sky-2); font-size: 16px; line-height: 1.75; }

/* 비교 슬라이더 */
.compare { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; --pos: 50%; user-select: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare__after { clip-path: inset(0 0 0 var(--pos)); }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: #fff; pointer-events: none; }
.compare__handle { position: absolute; top: 50%; left: var(--pos); width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--point); box-shadow: 0 6px 20px rgba(0,0,0,.25); pointer-events: none; }
.compare__handle::before, .compare__handle::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid #fff; border-left: 2px solid #fff; }
.compare__handle::before { left: 18px; transform: rotate(-45deg); }
.compare__handle::after { right: 18px; transform: rotate(135deg); }
.compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare__tag { position: absolute; top: 22px; padding: 7px 16px; border-radius: 30px; font-size: 14px; font-weight: 700; pointer-events: none; }
.compare__tag.is-before { left: 22px; background: rgba(0,0,0,.6); color: #fff; }
.compare__tag.is-after { right: 22px; background: #fff; color: var(--point); }
.compare-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare-cap { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* 전후 사진 쌍 */
.pair-list { display: grid; gap: 50px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pair__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; }
.pair__img img { width: 100%; height: 100%; object-fit: cover; }
.pair__tag { position: absolute; top: 20px; left: 20px; padding: 7px 16px; border-radius: 30px; font-size: 14px; font-weight: 700; }
.pair__tag.is-before { background: rgba(0,0,0,.6); color: #fff; }
.pair__tag.is-after { background: #fff; color: var(--point); }
.pair figcaption { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }

/* ---------- 21. 콩자갈청소 페이지 ---------- */
.pb-intro .lead-copy { max-width: 1100px; }
.pb-intro .txt-block { flex-direction: column; align-items: center; gap: 50px; text-align: center; }
.pb-intro .txt-block__head { flex: none; }
.pb-intro .txt-block__head .sec-head { max-width: none; }
.pb-intro .txt-block__body { max-width: 1000px; }
.pb-intro .txt-block__body p { text-wrap: balance; }
.pb-why { background: var(--sky-2); }
.pb-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.pb-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); overflow: hidden; }
.pb-card__img { aspect-ratio: 16 / 10; overflow: hidden; }
.pb-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pb-card:hover .pb-card__img img { transform: scale(1.05); }
.pb-card__txt { padding: 44px 44px 50px; }
.pb-card__txt b { display: block; margin-bottom: 14px; font-size: 15px; font-weight: 800; color: var(--point-l); }
.pb-card__txt h3 { margin-bottom: 18px; font-size: 28px; line-height: 1.4; color: var(--ink); }
.pb-card__txt p { font-size: 17px; line-height: 1.8; }
.pb-card__txt p + p { margin-top: 12px; }
.pb-cost { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: stretch; }
.pb-cost__main { padding: 60px 56px; border-radius: var(--r-lg); background: var(--point); color: #fff; }
.pb-cost__main span { font-size: 17px; color: rgba(255,255,255,.8); }
.pb-cost__main b { display: block; margin: 16px 0 24px; font-size: 64px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.pb-cost__main p { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.85); }
.pb-cost__main .nbtn { margin-top: 36px; }
.pb-cost__side { padding: 50px; border-radius: var(--r-lg); background: var(--sky-2); }
.pb-cost__side h3 { margin-bottom: 24px; font-size: 22px; }
.pb-cost__side ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pb-cost__side li { padding: 16px 20px; border-radius: var(--r-sm); background: #fff; font-size: 16px; font-weight: 600; color: var(--ink); }
.pb-cost__side p { margin-top: 24px; font-size: 15px; color: var(--muted); line-height: 1.7; }

/* 증상 */
.sym-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 40px; }
.sym-nav a { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 30px 28px 28px; border-radius: var(--r-md); background: var(--sky-2); color: var(--ink); transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.sym-nav a:hover { background: var(--point); color: #fff; transform: translateY(-6px); }
.sym-nav__ico { display: block; width: 48px; height: 48px; margin-bottom: 26px; }
.sym-nav__ico svg { width: 100%; height: 100%; fill: none; stroke: var(--point); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.sym-nav a:hover .sym-nav__ico svg { stroke: #fff; }
.sym-nav a b { position: absolute; right: 24px; top: 24px; font-size: 14px; font-weight: 800; color: var(--point-xl); }
.sym-nav a strong { font-size: 21px; font-weight: 700; color: inherit; }
.sym-item { display: flex; gap: 6%; align-items: center; padding: 90px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hd-h) + 20px); }
.sym-item:nth-child(even) { flex-direction: row-reverse; }
.sym-item__img { position: relative; flex: 0 0 46%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; }
.sym-item__no { position: absolute; left: 30px; bottom: 18px; z-index: 1; font-size: 96px; line-height: 1; font-weight: 800; letter-spacing: -0.05em; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.sym-item__img img { width: 100%; height: 100%; object-fit: cover; }
.sym-item__txt { flex: 1; }
.sym-item__txt .q { display: inline-block; margin-bottom: 18px; padding: 6px 16px; border-radius: 30px; background: var(--sky); color: var(--point); font-size: 15px; font-weight: 700; }
.sym-item__txt h2 { margin-bottom: 24px; font-size: 32px; line-height: 1.4; color: var(--ink); letter-spacing: -0.035em; word-break: keep-all; }
.sym-item__txt p { font-size: 17px; line-height: 1.85; }
.sym-item__txt p + p { margin-top: 14px; }
.sym-item__txt .ans { margin-top: 34px; }
.ans__who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ans__who img { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.ans__who strong { font-size: 17px; font-weight: 700; color: var(--point); }
.sym-item__txt .ans__bubble { position: relative; margin: 0 0 0 58px; padding: 24px 28px; border-radius: 4px 24px 24px 24px; background: var(--point); color: #fff; font-size: 17px; line-height: 1.8; box-shadow: 0 14px 30px -18px rgba(2,68,131,.7); }

/* 지역·업종 */
.area-group + .area-group { margin-top: 70px; }
.area-group h2 { margin-bottom: 12px; font-size: 28px; color: var(--ink); }
.area-group > p { margin-bottom: 26px; color: var(--muted); font-size: 16px; }
.area-links { display: flex; flex-wrap: wrap; gap: 10px; }
.area-links a { display: inline-flex; padding: 12px 22px; border-radius: 40px; background: var(--sky-2); border: 1px solid transparent; font-size: 16px; font-weight: 500; color: var(--ink); transition: .3s; }
.area-links a:hover, .area-links a.is-on { border-color: var(--point); background: #fff; color: var(--point); }
.biz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.biz-grid a { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; color: #fff; isolation: isolate; }
.biz-grid img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.biz-grid a::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(2, 36, 72, .85)); }
.biz-grid a:hover img { transform: scale(1.06); }
.biz-grid strong { position: absolute; left: 30px; bottom: 28px; font-size: 24px; color: #fff; }
.loc-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.loc-facts li { padding: 34px 30px; border-radius: var(--r-md); background: var(--sky-2); }
.loc-facts b { display: block; margin-bottom: 8px; font-size: 15px; color: var(--point-l); }
.loc-facts strong { font-size: 22px; }

/* 회사소개 */
.about-msg { display: flex; gap: 7%; align-items: center; }
.about-msg__img { flex: 0 0 44%; aspect-ratio: 13 / 10; border-radius: var(--r-lg); overflow: hidden; }
.about-msg__img img { width: 100%; height: 100%; object-fit: cover; }
.about-msg__txt { flex: 1; }
.about-msg__txt p { font-size: 18px; line-height: 1.85; }
.about-msg__txt p + p { margin-top: 16px; }
.doc-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.doc-list li { padding: 24px 24px 32px; border-radius: var(--r-md); background: var(--sky-2); text-align: center; }
.doc-list__img { display: block; aspect-ratio: 3 / 4; margin-bottom: 24px; border-radius: var(--r-sm); background: #fff; overflow: hidden; }
.doc-list__img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.doc-list__img:hover img { transform: scale(1.04); }
.doc-list strong { display: block; font-size: 19px; line-height: 1.4; }
.doc-list span { display: block; margin-top: 10px; font-size: 15px; color: var(--muted); line-height: 1.5; }
.channel-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.channel-list a { position: relative; display: flex; flex-direction: column; min-height: 240px; padding: 34px 30px 30px; border-radius: var(--r-md); color: #fff; overflow: hidden; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.channel-list a::after { content: ''; position: absolute; right: -40px; bottom: -40px; z-index: -1; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.12); transition: transform .6s var(--ease); }
.channel-list a:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.15); }
.channel-list a:hover::after { transform: scale(1.4); }
.channel-list strong { display: block; margin-top: auto; font-size: 22px; color: #fff; }
.channel-list span { display: block; margin-top: 6px; font-size: 14px; opacity: .85; word-break: break-all; }
.channel-list em { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 14px; font-weight: 700; }
.channel-list em::after { content: '→'; transition: transform .4s var(--ease); }
.channel-list a:hover em::after { transform: translateX(5px); }
.ch__ico { display: block; width: 56px; height: 56px; margin-bottom: 30px; border-radius: 16px; background: #fff no-repeat center/30px; }
.ch--blog { background: #03c75a; }
.ch--blog2 { background: #02a44b; }
.ch--blog .ch__ico, .ch--blog2 .ch__ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='3' width='20' height='15' rx='4' fill='%2303c75a'/%3E%3Cpath d='M9 18l3 3 3-3z' fill='%2303c75a'/%3E%3Cpath d='M8 7v7M8 10.5h3.5a2 2 0 0 1 0 3.5H8' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ch--yt { background: #ff0000; }
.ch--yt .ch__ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1.5' y='5' width='21' height='14' rx='4.5' fill='%23ff0000'/%3E%3Cpath d='M10 8.8v6.4l5.5-3.2z' fill='%23fff'/%3E%3C/svg%3E"); }
.ch--ig { background: linear-gradient(225deg, #feda75 0%, #fa7e1e 22%, #d62976 50%, #962fbf 76%, #4f5bd5 100%); }
.ch--ig .ch__ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d62976' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.3' cy='6.7' r='.6' fill='%23d62976'/%3E%3C/svg%3E"); }

/* ---------- 22. 게시판 ---------- */
.board-wrap { padding: 110px 0 140px; }
.bo-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 40px; padding: 24px 28px; border-radius: var(--r-sm); background: var(--sky-2); }
.bo-filter select { height: 50px; padding: 0 44px 0 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23024483' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center/12px; -webkit-appearance: none; appearance: none; font-size: 16px; font-family: inherit; color: var(--ink); min-width: 150px; }
.bo-filter button, .bo-filter .bo-filter__reset { height: 50px; padding: 0 26px; border: 0; border-radius: 10px; background: var(--point); color: #fff; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; }
.bo-filter .bo-filter__reset { background: #fff; color: var(--muted); border: 1px solid var(--line); }
.bo-cate { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.bo-cate a { padding: 10px 20px; border-radius: 30px; border: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--text); transition: .3s; }
.bo-cate a:hover, .bo-cate a.is-on { background: var(--point); border-color: var(--point); color: #fff; }
.bo-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 30px; font-size: 15px; color: var(--muted); }
.bo-top__btns { display: flex; gap: 8px; }
.bo-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 15px; font-weight: 600; color: var(--ink); transition: .3s; }
.bo-btn:hover { border-color: var(--point); color: var(--point); }
.bo-btn.is-point { background: var(--point); border-color: var(--point); color: #fff; }
.bo-btn.is-point:hover { background: var(--point-l); color: #fff; }
.bo-empty { padding: 100px 20px; text-align: center; color: var(--muted); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.bo-search { display: flex; justify-content: center; gap: 8px; margin-top: 60px; }
.bo-search select, .bo-search input[type=text] { height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; font-family: inherit; }
.bo-search input[type=text] { width: 320px; }
.bo-search button { height: 50px; padding: 0 26px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font-size: 16px; }
.bo-admin-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.bo-admin-bar button { height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 14px; }
.case-cards .chk { position: absolute; z-index: 3; top: 16px; left: 16px; }
.case-card { position: relative; }
body.nyc .pg_wrap { display: flex; justify-content: center; margin-top: 70px; clear: both; float: none; }
body.nyc .pg { display: flex; gap: 6px; }
body.nyc .pg_page, body.nyc .pg_current { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 15px; color: var(--text); }
body.nyc .pg_current { background: var(--point); border-color: var(--point); color: #fff; font-weight: 700; }
body.nyc .pg_page:hover { border-color: var(--point); color: var(--point); }

/* 게시글 보기 */
.bo-view__head { padding-bottom: 40px; border-bottom: 1px solid var(--ink); text-align: center; }
.bo-view__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.bo-view__tags a, .bo-view__tags span { padding: 6px 14px; border-radius: 30px; background: var(--sky); color: var(--point); font-size: 14px; font-weight: 600; }
.bo-view__title { font-size: 40px; line-height: 1.35; color: var(--ink); letter-spacing: -0.035em; }
.bo-view__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 20px; font-size: 15px; color: var(--muted); }
.bo-view__body { padding: 60px 0 80px; font-size: 18px; line-height: 1.9; color: var(--text); border-bottom: 1px solid var(--line); }
.bo-view__body img { height: auto; border-radius: var(--r-sm); }
.bo-view__imgs { display: grid; gap: 20px; margin-bottom: 40px; }
.bo-view__imgs img { width: 100%; height: auto; border-radius: var(--r-sm); }
.bo-view__imgs a { display: block; }
.bo-view__files { margin-top: 30px; }
.bo-view__files a { display: inline-flex; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; }
.bo-view__nav { margin-top: 40px; border-top: 1px solid var(--line); }
.bo-view__nav li { display: flex; gap: 20px; padding: 20px 10px; border-bottom: 1px solid var(--line); font-size: 16px; }
.bo-view__nav li span { flex: 0 0 60px; color: var(--muted); }
.bo-view__nav li a:hover { color: var(--point); }
.bo-view__btns { display: flex; justify-content: space-between; gap: 10px; margin-top: 40px; }
.bo-view__btns div { display: flex; gap: 8px; }
.bo-related { margin-top: 110px; }
.bo-related h2 { margin-bottom: 30px; font-size: 28px; color: var(--ink); }
.bo-view__cta { margin-top: 60px; padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: var(--r-md); background: var(--sky-2); }
.bo-view__cta p { font-size: 19px; font-weight: 600; color: var(--ink); }

/* 글쓰기 */
.bo-write { max-width: 980px; margin: 0 auto; }
.bo-write__row { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.bo-write__row:first-of-type { border-top: 1px solid var(--ink); }
.bo-write__row > label, .bo-write__row > .lb { flex: 0 0 160px; padding-top: 13px; font-size: 16px; font-weight: 700; color: var(--ink); }
.bo-write__row > .lb small { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--muted); }
.bo-write__row > label i, .bo-write__row > .lb i { color: var(--point-l); font-style: normal; }
.bo-write__field { flex: 1; min-width: 0; }
.bo-write input[type=text], .bo-write input[type=password], .bo-write input[type=tel], .bo-write input[type=email], .bo-write select, .bo-write textarea { width: 100%; max-width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 16px; font-family: inherit; color: var(--ink); }
.bo-write select { -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23024483' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center/12px; }
.bo-write textarea { height: 240px; padding: 16px; line-height: 1.7; }
.bo-write input:focus, .bo-write select:focus, .bo-write textarea:focus { border-color: var(--point); outline: 0; box-shadow: 0 0 0 3px rgba(2,68,131,.1); }
.bo-write__half { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bo-write__help { margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.bo-write__warn { margin-top: 10px; padding: 12px 16px; border-radius: 10px; background: #fff4e5; color: #9a5b00; font-size: 14px; display: none; }
.bo-write__warn.is-show { display: block; }
.bo-write__files { display: grid; gap: 10px; }
.bo-write__file { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border: 1px dashed var(--line); border-radius: 10px; }
.bo-write__file input[type=file] { flex: 1; min-width: 0; font-size: 15px; color: var(--muted); }
.bo-write__file input[type=file]::file-selector-button { margin-right: 14px; padding: 10px 18px; border: 0; border-radius: 30px; background: var(--sky); color: var(--point); font-size: 14px; font-weight: 700; cursor: pointer; }
.bo-write__file input[type=text] { height: 44px; }
.bo-write__opt { display: flex; flex-wrap: wrap; gap: 20px; }
.bo-write__opt label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.bo-write__agree { margin-top: 30px; padding: 24px 28px; border-radius: var(--r-sm); background: var(--sky-2); font-size: 15px; line-height: 1.7; }
.bo-write__agree strong { display: block; margin-bottom: 8px; }
.bo-write__agree label { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; color: var(--ink); }
.bo-write__btns { display: flex; justify-content: center; gap: 10px; margin-top: 50px; }
.bo-write__btns .bo-btn { min-width: 160px; height: 56px; font-size: 16px; }
.bo-write__captcha { margin-top: 30px; padding: 24px 28px; border-radius: var(--r-sm); background: var(--sky-2); }
.bo-write__captcha #captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 0; border: 0; }
.bo-write__captcha #captcha #captcha_info { order: -1; display: block; width: 100%; margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.bo-write__captcha #captcha #captcha_img { width: 138px; height: 52px; margin: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.bo-write__captcha #captcha #captcha_key { flex: 0 0 200px; width: auto; height: 52px; margin: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 18px; font-weight: 700; line-height: 50px; letter-spacing: .2em; text-align: center; color: var(--ink); }
.bo-write__captcha #captcha #captcha_reload, .bo-write__captcha #captcha #captcha_mp3 { flex: 0 0 auto; margin: 0; border-radius: 8px; }
.bo-write__captcha #captcha audio { order: 3; width: 100%; height: 40px; margin: 0; }
.bo-write .wr_content { width: 100%; }
.est-intro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 auto 60px; max-width: 980px; }
.est-intro li { padding: 28px 26px; border-radius: var(--r-md); background: var(--sky-2); }
.est-intro b { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 800; color: var(--point-l); }
.est-intro strong { display: block; margin-bottom: 8px; font-size: 19px; }
.est-intro p { font-size: 15px; line-height: 1.65; }
.est-done { max-width: 720px; margin: 0 auto; padding: 70px 40px; text-align: center; border-radius: var(--r-lg); background: var(--sky-2); }
.est-done h2 { margin-bottom: 16px; font-size: 32px; color: var(--ink); }
.est-done p { font-size: 17px; line-height: 1.8; }
.est-done .nbtn { margin-top: 30px; }

/* 문의 목록(관리자) */
.est-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: 15px; }
.est-table th, .est-table td { padding: 16px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.est-table th { background: var(--sky-2); color: var(--ink); }
.est-table td.l { text-align: left; }

/* ---------- 23. 반응형 ---------- */
@media (max-width: 1540px) {
  .hd__gnb > ul > li > a { padding: 36px 16px; }
  .hero__title { font-size: 64px; }
}
@media (max-width: 1420px) {
  :root { --hd-h: 84px; --sec-pad: 140px; }
  .hd__gnb { display: none; }
  .hd__util { margin-left: auto; }
  .hd__burger { display: block; }
  .hero__title { font-size: 58px; }
  .sec-head__title, .cta-band__title { font-size: 40px; }
  .method-list { grid-template-columns: repeat(2, 1fr); }
  .fm__list { grid-template-columns: repeat(3, 1fr); gap: 50px 30px; }
}
@media (max-width: 1240px) {
  :root { --sec-pad: 120px; --r-lg: 36px; --r-md: 26px; }
  .diff__tit { font-size: 32px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: auto; }
  .svc-card { height: 280px; }
  .svc-card.is-main { grid-column: span 2; height: 340px; }
  .stat { grid-template-columns: repeat(2, 1fr); }
  .doc-list, .channel-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 990px) {
  :root { --hd-h: 70px; --sec-pad: 100px; }
  body.nyc { font-size: 16px; }
  .pc-only { display: none; }
  .hd__tel { display: none; }
  .hd__cta { height: 40px; padding: 0 16px; font-size: 14px; }
  .logo-text b { font-size: 22px; }
  .hd__logo img { height: 40px; }
  .hero { height: 95vh; min-height: 600px; }
  .hero__title { font-size: 44px; }
  .hero__desc { font-size: 17px; }
  .hero__nav { display: none; }
  .hero__dots { display: flex; position: absolute; z-index: 5; left: 0; right: 0; bottom: 40px; justify-content: center; gap: 10px; }
  .hero__dots span { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.4); transition: .3s; }
  .hero__dots span.is-on { width: 30px; border-radius: 12px; background: #fff; }
  .hero__scroll { display: none; }
  .sec-head { margin-bottom: 50px; }
  .sec-head__title, .cta-band__title { font-size: 34px; }
  .sec-head__desc { font-size: 17px; }
  .diff { gap: 80px; }
  .diff__block, .diff__block.is-rev { flex-direction: column; align-items: stretch; gap: 40px; }
  .diff__img { flex: none; width: 100%; }
  .m-liter__pin { min-height: 0; padding: 100px 0; }
  .m-liter__inner { flex-direction: column; align-items: stretch; gap: 0; }
  /* 모바일: 제목 → 그림 → 설명 → 배출량 순서로, 그림을 크게 */
  .m-liter__txt { display: contents; }
  .m-liter__title { order: 1; flex-wrap: nowrap; gap: 0 10px; }
  .m-liter__pre, .m-liter__unit { font-size: clamp(26px, 7.4vw, 52px); padding-bottom: .5em; }
  .m-liter__num { font-size: clamp(110px, 33vw, 220px); -webkit-text-stroke-width: 1.5px; }
  .m-liter__visual { order: 2; margin-top: 40px; }
  .m-liter__desc { order: 3; margin-top: 36px; }
  .m-liter__count { order: 4; }
  .lt-view { --k: .3; aspect-ratio: 1 / 1; }
  .proc { display: block; }
  .proc__thumb, .proc__bar { display: none; }
  .proc__list { display: flex; gap: 16px; padding: 0 5.55% 20px; margin: 0 -5.55%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .proc__list::-webkit-scrollbar { display: none; }
  .proc__item { flex: 0 0 78%; min-height: 0; scroll-snap-align: center; opacity: 1; filter: none; justify-content: flex-start; }
  .proc__mimg { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-md); margin-bottom: 26px; }
  .proc__tit { font-size: 28px; margin: 10px 0 14px; }
  .proc__desc { font-size: 16px; }
  .proc-order { flex-direction: column; align-items: stretch; gap: 40px; padding-top: 50px; margin-top: 60px; }
  .proc-order__head { flex: none; }
  .proc-order__tit { font-size: 24px; }
  .proc-order__flow li:not(.proc-order__gap) { flex: 0 0 76px; }
  .proc-order__flow b { width: 58px; height: 58px; font-size: 18px; margin-bottom: 12px; }
  .proc-order__flow li.is-on b { box-shadow: 0 0 0 6px var(--sky); }
  .proc-order__flow strong { font-size: 17px; }
  .proc-order__flow span { display: none; }
  .proc-order__gap { height: 58px; }
  .proc-order__gap em { display: none; }
  .proc-order__note { display: block; margin-top: -10px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--point); text-align: center; }
  .bna { flex-direction: column; }
  .bna__view { flex: none; }
  .bna__list { grid-template-columns: repeat(3, 1fr); }
  .trust, .faq-wrap, .txt-block, .about-msg { flex-direction: column; align-items: stretch; gap: 40px; }
  .trust__head, .faq-wrap__head, .txt-block__head, .about-msg__img { flex: none; position: static; }
  .case-cards, .est-steps, .point-list, .biz-grid, .loc-facts { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding: 100px 0; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band__btns { width: 100%; }
  .fm__list { grid-template-columns: 1fr; gap: 0; }
  .fm__top { margin-bottom: 30px; }
  .fm__item { border-bottom: 1px solid rgba(255,255,255,.2); }
  .fm__tit { position: relative; margin: 0; padding: 22px 0; border: 0; font-size: 22px; }
  .fm__tit i { display: block; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: .3s; }
  .fm__tit[aria-expanded="true"] i { transform: rotate(-135deg); margin-top: -2px; }
  .fm__sub { display: none; padding-bottom: 18px; }
  .fm__item.is-open .fm__sub { display: grid; grid-template-columns: 1fr 1fr; }
  .fm__tel { font-size: 30px; }
  .sub-top { min-height: 440px; height: 56vh; }
  .sub-top__inner { padding-top: var(--hd-h); }
  .sub-top__title { font-size: 38px; }
  .sub-top__desc { font-size: 17px; }
  .sub-tabs ul { justify-content: flex-start; gap: 0; padding: 0 6px; }
  .sub-tabs a { padding: 22px 13px; font-size: 15px; }
  .sub-tabs a::after { left: 13px; right: 13px; }
  .pb-cards, .pb-cost, .compare-wrap { grid-template-columns: 1fr; }
  .sym-item, .sym-item:nth-child(even) { flex-direction: column; align-items: stretch; gap: 36px; padding: 70px 0; }
  .sym-item__img { flex: none; }
  .sym-item__txt h2 { font-size: 25px; }
  .sym-item__txt .ans__bubble { margin-left: 0; padding: 20px 22px; font-size: 16px; }
  .qk { display: none; }
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; height: 62px; background: #fff; box-shadow: 0 -4px 20px rgba(2, 40, 90, .12); }
  .mbar a { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
  .mbar__tel { color: var(--point); }
  .mbar__photo { background: var(--point); color: #fff !important; }
  .ft { padding-bottom: 120px; }
  .board-wrap { padding: 70px 0 100px; }
  .bo-view__title { font-size: 30px; }
  .bo-write__row { flex-direction: column; gap: 10px; }
  .bo-write__row > label, .bo-write__row > .lb { flex: none; padding-top: 0; }
  .est-intro { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  :root { --sec-pad: 80px; --r-lg: 26px; --r-md: 20px; }
  .nbtn { min-width: 0; height: 54px; padding: 0 26px; font-size: 16px; }
  .hero__title { font-size: 36px; }
  .hero__eyebrow { font-size: 14px; margin-bottom: 20px; }
  .hero__btns { flex-direction: column; align-items: stretch; margin-top: 34px; }
  .hero__bg img { object-position: 60% center; }
  .sec-head__title, .cta-band__title { font-size: 28px; }
  .sec-row { flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
  .diff__tit { font-size: 26px; margin-bottom: 20px; }
  .diff__txt p, .txt-block__body p { font-size: 16px; }
  .lead-copy { font-size: 21px !important; }
  .method-list { grid-template-columns: 1fr; }
  .method-card { padding: 34px 28px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card { height: 200px; }
  .svc-card.is-main { grid-column: auto; height: 260px; }
  .svc-card__txt strong { font-size: 26px; }
  .svc-card.is-main .svc-card__txt strong { font-size: 32px; }
  .svc-card__ico { width: 64px; height: 64px; right: 22px; bottom: 20px; }
  .svc-card.is-main .svc-card__ico { width: 64px; height: 64px; right: 22px; bottom: 20px; opacity: .6; }
  .svc-card__txt { padding: 0 24px; }
  .svc-card.is-main .svc-card__txt p { font-size: 15px; }
  .trust__list { grid-template-columns: 1fr; }
  .trust__list li { font-size: 17px; padding: 20px 4px; }
  .stat { margin-top: 60px; }
  .stat li { padding: 28px 22px; }
  .stat b { font-size: 26px; }
  .marquee__track img { width: 260px; height: 180px; }
  .case-cards, .est-steps, .point-list, .biz-grid, .loc-facts, .doc-list, .channel-list, .img-split { grid-template-columns: 1fr; }
  .faq-item__q button { font-size: 17px; padding: 24px 54px 24px 0; gap: 12px; }
  .faq-item__a-in { padding: 0 10px 24px 30px; }
  .faq-item__a p { font-size: 16px; }
  .est-factor { flex-direction: column; align-items: flex-start; padding: 26px 24px; }
  .est-factor ul { flex: none; }
  .cta-band__btns .nbtn { min-width: 0; }
  .ft address span { display: block; margin: 0; }
  .ft__tel a { font-size: 26px; }
  .sub-top__title { font-size: 32px; }
  .info-table th, .info-table td { padding: 18px 14px; font-size: 15px; }
  .info-table th { width: 32%; }
  .pb-cost__main { padding: 44px 30px; }
  .pb-cost__main b { font-size: 44px; }
  .pb-cost__side { padding: 36px 26px; }
  .pb-card__txt { padding: 32px 28px 38px; }
  .pb-card__txt h3 { font-size: 23px; }
  .bo-filter { padding: 20px; }
  .bo-filter select { flex: 1 1 100%; }
  .bo-filter button, .bo-filter .bo-filter__reset { flex: 1; justify-content: center; }
  .bo-search { flex-wrap: wrap; }
  .bo-search input[type=text] { width: 100%; }
  .bo-view__cta { flex-direction: column; align-items: flex-start; padding: 30px 26px; }
  .bo-write__half { grid-template-columns: 1fr; }
  .bo-write__captcha { padding: 20px; }
  .bo-write__captcha #captcha #captcha_img { width: 160px; height: 60px; }
  .bo-write__captcha #captcha #captcha_key { order: 1; flex: 1 1 100%; }
  .compare__handle { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .compare__handle::before { left: 13px; }
  .compare__handle::after { right: 13px; }
  .bna__tag { top: 14px; font-size: 13px; padding: 6px 12px; }
  .bna__tag.is-before { left: 14px; }
  .bna__tag.is-after { left: calc(50% + 14px); }
}

/* 움직임 줄이기 설정 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-ani] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js [data-ani="clip"]::after { display: none; }
  .hero__swiper { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* 질문-답 블록 */
.qa-block { position: relative; padding-left: 92px; }
.qa-block + .qa-block { margin-top: 80px; padding-top: 80px; border-top: 1px solid var(--line); }
.qa-block__q { position: relative; margin-bottom: 28px; font-size: 34px; line-height: 1.4; font-weight: 700; color: var(--ink); letter-spacing: -0.035em; }
.qa-block__q::before { content: 'Q'; position: absolute; left: -92px; top: -4px; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--point); color: #fff; font-size: 24px; font-weight: 800; letter-spacing: 0; }
.qa-block > .qa-block__a { position: relative; padding: 32px 36px; border-radius: 4px 26px 26px 26px; background: var(--sky-2); }
.bg-sky .qa-block > .qa-block__a { background: #fff; }
.bg-sky .care-card .qa-block > .qa-block__a { background: var(--sky-2); }
.qa-block > .qa-block__a::before { content: 'A'; position: absolute; left: -92px; top: 0; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--point-xl); color: var(--point-l); font-size: 24px; font-weight: 800; letter-spacing: 0; box-sizing: border-box; }
.care-card > .gap-compare, .care-card > .qa-block__a { margin-left: 92px; }
.qa-block__a p { font-size: 18px; line-height: 1.85; }
.qa-block__a p + p { margin-top: 16px; }
.qa-block__link { margin-top: 26px !important; }
.check-list { border-top: 1px solid var(--ink); }
.check-list li { display: flex; gap: 24px; padding: 30px 4px; border-bottom: 1px solid var(--line); }
.check-list li > b { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--point); color: #fff; font-size: 15px; font-weight: 800; }
.check-list strong { display: block; margin-bottom: 8px; font-size: 21px; }
.check-list p { font-size: 17px; line-height: 1.8; }
.price-table td, .price-table th { text-align: center; }
.price-table th[scope=row] { text-align: left; }
@media (max-width: 768px) {
  .qa-block__q { font-size: 25px; }
  .qa-block { padding-left: 0; }
  .qa-block__q::before { position: static; width: 44px; height: 44px; margin-bottom: 16px; font-size: 18px; }
  .qa-block > .qa-block__a { padding: 24px 22px; }
  .qa-block > .qa-block__a::before { display: none; }
  .care-card > .gap-compare, .care-card > .qa-block__a { margin-left: 0; }
  .qa-block__a p { font-size: 16px; }
  .qa-block + .qa-block { margin-top: 56px; padding-top: 56px; }
  .check-list li { gap: 16px; padding: 24px 0; }
  .check-list strong { font-size: 18px; }
  .check-list p { font-size: 15px; }
}
.m-cases .case-cards + .area-group, .bg-sky .case-cards + .area-group, .case-empty + .area-group { margin-top: 90px; }
.bo-write__help.is-center { text-align: center; margin-top: 20px; }
/* 게시글 본문 */
.bo-view__con p { margin: 0 0 1.3em; }
.bo-view__con h2, .bo-view__con h3 { margin: 2.2em 0 .8em; font-size: 26px; line-height: 1.4; color: var(--ink); letter-spacing: -0.03em; }
.bo-view__con img { display: inline-block; max-width: min(100%, 860px); margin: .6em 0 .2em; }
.bo-view__con b, .bo-view__con strong { color: var(--point); }
@media (max-width: 768px) { .bo-view__con h2, .bo-view__con h3 { font-size: 21px; } }
.bo-view__con { text-align: center; }
.bo-view__con h3 { margin-top: 1.6em; }
/* 에디터 단축키 안내 버튼 */
.bo-write .cke_sc { margin: 0 0 8px; text-align: right; }
.bo-write .btn_cke_sc { height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 28px; transition: .3s; }
.bo-write .btn_cke_sc:hover { border-color: var(--point); color: var(--point); }
.bo-write .cke_sc_def { margin: 0 0 8px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--sky-2); font-size: 13px; }

/* ---------- 유튜브 ---------- */
.m-yt { background: #fff; }
.yt__stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 40px; }
.yt__player { position: relative; flex: 0 1 1000px; aspect-ratio: 16 / 9; overflow: hidden; background: #000; box-shadow: 0 30px 60px rgba(2, 40, 90, .18); }
.yt__player img, .yt__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt__play { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border: 0; border-radius: 50%; background: rgba(2, 68, 131, .9); opacity: 0; transition: transform .4s var(--ease), background-color .3s, opacity .35s; }
.yt__play::after { content: ''; position: absolute; left: 39px; top: 31px; border-left: 26px solid #fff; border-top: 17px solid transparent; border-bottom: 17px solid transparent; }
.yt__player:hover .yt__play, .yt__play:focus-visible { opacity: 1; transform: scale(1.1); background: #ff0000; }
@media (hover: none) { .yt__play { opacity: 1; } }
.yt__arrow { flex: 0 0 auto; width: 76px; height: 76px; border: 0; border-radius: 50%; background: var(--point); position: relative; transition: background-color .3s, transform .3s; }
.yt__arrow::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-top: 2px solid #fff; border-left: 2px solid #fff; }
.yt__arrow.is-prev::after { transform: translate(-30%, -50%) rotate(-45deg); }
.yt__arrow.is-next::after { transform: translate(-70%, -50%) rotate(135deg); }
.yt__arrow:hover { background: var(--point-l); transform: scale(1.06); }
.yt__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; }
.yt__list li { flex: 0 0 calc((100% - 48px) / 4); }
.yt__list li:nth-child(n+5) { display: none; }
.yt__list button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.yt__list img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; opacity: .7; transition: opacity .3s; }
.yt__list span { display: -webkit-box; margin-top: 14px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s; }
.yt__list button:hover img, .yt__list button.is-on img { opacity: 1; }
.yt__list button:hover span, .yt__list button.is-on span { color: var(--point); }
.yt__list button.is-on img { outline: 3px solid var(--point); outline-offset: -3px; }
.yt__more { margin-top: 50px; text-align: center; }
@media (max-width: 990px) {
  .yt__arrow { display: none; }
  .yt__list li { flex-basis: calc((100% - 16px) / 2); }
}

.vd-embed { position: relative; aspect-ratio: 16 / 9; margin-bottom: 40px; border-radius: var(--r-md); overflow: hidden; background: #000; }
.vd-embed iframe, .vd-embed img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.vd-embed--preview { max-width: 420px; margin: 14px 0 0; border-radius: 12px; }
.case-card__img.vd-thumb { aspect-ratio: 16 / 9; background: #000; }
.vd-thumb img { object-fit: cover; }
.vd-thumb::after { content: ''; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(2, 68, 131, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 55% center/28px; }

/* ---------- 고객 후기 ---------- */
.m-review { background: var(--sky-2); --clip-bg: var(--sky-2); }
.rv-cards { columns: 3; column-gap: 24px; }
.rv-card { break-inside: avoid; margin-bottom: 24px; }
.rv-card__in { display: block; background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 10px 30px rgba(2, 40, 90, .06); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.rv-card__in:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(2, 40, 90, .12); }
.rv-card__img { background: #b2c7d9; }
.rv-card__img img { display: block; width: 100%; height: auto; }
.rv-card__text { padding: 34px 30px 0; font-size: 16px; line-height: 1.8; color: var(--text); }
.rv-card.is-text .rv-card__text::before { content: '★★★★★'; display: block; margin-bottom: 14px; color: #f5b301; letter-spacing: 2px; font-size: 15px; }
.rv-card__body { padding: 22px 30px 28px; }
.rv-card__body strong { display: block; font-size: 18px; line-height: 1.55; color: var(--ink); }
.rv-card__body span { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); }
.rv-view__img { max-width: 520px; margin: 0 auto 40px; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 20px 50px rgba(2, 40, 90, .12); }
.rv-view__img img { display: block; width: 100%; height: auto; }
.rv-view__text { max-width: 720px; margin: 0 auto; padding: 30px 34px; border-radius: var(--r-md); background: var(--sky-2); font-size: 17px; line-height: 1.9; text-align: center; }
@media (max-width: 990px) { .rv-cards { columns: 2; } }
@media (max-width: 600px) { .rv-cards { columns: 1; } }

/* ---------- 콩자갈청소 · 작업 원리 ---------- */
.pb-method { background: var(--ink); color: #fff; --clip-bg: var(--ink); }
.pb-method .sec-head { margin-bottom: 26px; }
.pb-method .sec-head__label { color: var(--point-xl); }
.pb-method .sec-head__title { color: #fff; }
.mt-sub { margin-bottom: 70px; text-align: center; font-size: 18px; color: rgba(255,255,255,.6); }
.mt-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; background: rgba(255,255,255,.08); }
.mt-card { position: relative; display: flex; flex-direction: column; padding: 46px 36px 50px; background: var(--ink); transition: background .5s var(--ease); }
.mt-card:hover { background: #1a2533; }
.mt-card__no { margin-bottom: 30px; font-size: 15px; font-weight: 800; color: rgba(255,255,255,.35); letter-spacing: .04em; }
.mt-card__name { margin-bottom: 34px; font-size: 22px; line-height: 1.45; font-weight: 600; color: rgba(255,255,255,.55); }
.mt-card__res { margin-bottom: 20px; font-size: 27px; line-height: 1.38; font-weight: 700; color: #fff; letter-spacing: -0.03em; }
.mt-card__desc { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.62); }
.mt-ours { display: flex; align-items: center; justify-content: space-between; gap: 60px; margin-top: 2px; padding: 60px 64px; background: var(--point); }
.mt-ours__txt { flex: 1; max-width: 760px; }
.mt-ours__label { display: inline-block; margin-bottom: 20px; font-size: 16px; font-weight: 700; color: var(--point-xl); }
.mt-ours__tit { margin-bottom: 20px; font-size: 36px; line-height: 1.35; font-weight: 700; color: #fff; letter-spacing: -0.035em; }
.mt-ours__desc { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.72); }
.mt-ours__num { flex: none; display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 6px; color: #fff; }
.mt-ours__num small { grid-column: 1 / -1; font-size: 18px; font-weight: 600; color: rgba(255,255,255,.75); }
.mt-ours__num b { font-size: 150px; line-height: .9; font-weight: 800; letter-spacing: -0.05em; }
.mt-ours__num em { font-style: normal; font-size: 48px; font-weight: 700; padding-bottom: 12px; }
.mt-ours__num span { grid-column: 1 / -1; margin-top: 14px; font-size: 16px; color: rgba(255,255,255,.75); }
@media (max-width: 1240px) {
  .mt-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .mt-sub { margin-bottom: 40px; font-size: 16px; }
  .mt-list { grid-template-columns: 1fr; }
  .mt-card { padding: 34px 24px 36px; }
  .mt-card__no { margin-bottom: 18px; }
  .mt-card__name { margin-bottom: 20px; font-size: 18px; }
  .mt-card__res { font-size: 23px; }
  .mt-ours { flex-direction: column; align-items: flex-start; gap: 34px; padding: 40px 24px; }
  .mt-ours__tit { font-size: 26px; }
  .mt-ours__num b { font-size: 100px; }
  .mt-ours__num em { font-size: 34px; padding-bottom: 8px; }
}

/* ---------- 콩자갈 바닥 관리법 ---------- */
.care-intro__row { display: flex; align-items: center; gap: 7%; }
.care-intro__txt { flex: 1; }
.care-intro__img { flex: 0 0 44%; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; }
.care-intro__img img { width: 100%; height: 100%; object-fit: cover; }
.care-two { position: relative; display: flex; align-items: stretch; margin-top: 100px; }
.care-two__item { flex: 1; padding: 54px 56px; background: var(--sky-2); border-radius: var(--r-md); }
.care-two__item.is-point { background: var(--point); color: #fff; }
.care-two__when { display: inline-block; margin-bottom: 22px; font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; color: var(--point); }
.care-two__item.is-point .care-two__when { color: #fff; }
.care-two__item strong { display: block; margin-bottom: 12px; font-size: 22px; color: var(--ink); }
.care-two__item.is-point strong { color: #fff; }
.care-two__item p { font-size: 17px; line-height: 1.8; }
.care-two__item.is-point p { color: rgba(255,255,255,.8); }
.care-two__plus { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #fff; color: var(--point); font-size: 34px; font-weight: 300; box-shadow: 0 10px 30px -10px rgba(19,28,39,.25); }
.care-two__item + .care-two__plus + .care-two__item { margin-left: 16px; }
.care-daily { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.care-daily li { position: relative; overflow: hidden; padding: 44px 34px 46px; background: #fff; border-radius: var(--r-md); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.care-daily li:hover { transform: translateY(-8px); box-shadow: 0 24px 40px -24px rgba(2,68,131,.35); }
.care-daily__no { position: absolute; right: 22px; top: 8px; font-size: 90px; line-height: 1; font-weight: 800; color: var(--sky); letter-spacing: -0.05em; }
.care-daily__ico { position: relative; display: block; width: 58px; height: 58px; margin-bottom: 34px; }
.care-daily__ico svg { width: 100%; height: 100%; fill: none; stroke: var(--point); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.care-daily strong { position: relative; display: block; margin-bottom: 14px; font-size: 21px; color: var(--ink); }
.care-daily p { position: relative; font-size: 16px; line-height: 1.75; }
.care-sign { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 0; padding: 0; list-style: none; }
.care-sign__img { position: relative; aspect-ratio: 1 / 1; margin-bottom: 26px; border-radius: var(--r-md); overflow: hidden; }
.care-sign__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.care-sign li:hover .care-sign__img img { transform: scale(1.06); }
.care-sign__img span { position: absolute; left: 18px; top: 18px; padding: 7px 14px; border-radius: 30px; background: rgba(255,255,255,.92); color: var(--point); font-size: 14px; font-weight: 800; }
.care-sign strong { display: block; margin-bottom: 12px; font-size: 21px; line-height: 1.4; color: var(--ink); }
.care-sign p { font-size: 16px; line-height: 1.75; }
.care-more { margin-top: 60px; text-align: center; font-size: 17px; }
.care-card { padding: 70px 80px; background: #fff; border-radius: var(--r-lg); }
.care-card + .care-card { margin-top: 30px; }
.care-order { display: flex; align-items: flex-start; margin: 70px 0 0; padding: 0; list-style: none; }
.care-order li { text-align: center; }
.care-order li:not(.care-order__gap) { flex: 0 0 170px; }
.care-order b { display: flex; align-items: center; justify-content: center; width: 86px; height: 86px; margin: 0 auto 18px; border-radius: 50%; background: var(--point); color: #fff; font-size: 30px; font-weight: 800; }
.care-order strong { display: block; margin-bottom: 6px; font-size: 22px; color: var(--ink); }
.care-order span { font-size: 15px; color: var(--muted); }
.care-order__gap { position: relative; flex: 1; height: 86px; }
.care-order__gap::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--point-xl); }
.care-order__gap em { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--point); }
@media (max-width: 1240px) {
  .care-daily, .care-sign { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 990px) {
  .care-intro__row { flex-direction: column; align-items: stretch; gap: 40px; }
  .care-intro__img { flex: none; aspect-ratio: 4 / 3; }
  .care-two { flex-direction: column; margin-top: 60px; }
  .care-two__item + .care-two__plus + .care-two__item { margin-left: 0; margin-top: 12px; }
}
@media (max-width: 768px) {
  .care-two__item { padding: 36px 26px; }
  .care-two__when { font-size: 32px; margin-bottom: 14px; }
  .care-two__item strong { font-size: 19px; }
  .care-two__item p { font-size: 15px; }
  .care-two__plus { width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: 26px; }
  .care-daily, .care-sign { grid-template-columns: 1fr; gap: 16px; }
  .care-sign { gap: 40px; }
  .care-daily li { padding: 34px 26px; }
  .care-daily__ico { width: 48px; height: 48px; margin-bottom: 24px; }
  .care-card { padding: 40px 24px; border-radius: var(--r-md); }
  .care-card + .care-card { margin-top: 20px; }
  .care-order { margin: 50px 0 0; }
  .care-order li:not(.care-order__gap) { flex: 0 0 76px; }
  .care-order b { width: 56px; height: 56px; font-size: 20px; }
  .care-order strong { font-size: 17px; }
  .care-order span { display: none; }
  .care-order__gap { height: 56px; }
  .care-order__gap em { bottom: 38px; font-size: 12px; }
  .care-more { font-size: 15px; }
}

/* ---------- 업체 고르는 법 ---------- */
.ask-wrap { display: flex; align-items: flex-start; gap: 6%; }
.ask-wrap__head { flex: 0 0 32%; position: sticky; top: calc(var(--hd-h) + 40px); }
.ask-wrap__head .sec-head { margin-bottom: 40px; }
.ask-wrap__tel { display: inline-flex; flex-direction: column; gap: 6px; padding: 26px 32px; border-radius: var(--r-md); background: var(--point); color: #fff; transition: background .4s; }
.ask-wrap__tel:hover { background: var(--point-l); }
.ask-wrap__tel span { font-size: 15px; color: rgba(255,255,255,.75); }
.ask-wrap__tel b { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.ask-card { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ask-card li { position: relative; padding: 40px 36px 42px; background: #fff; border-radius: var(--r-md); }
.ask-card__no { display: block; margin-bottom: 18px; font-size: 14px; font-weight: 800; color: var(--point-xl); }
.ask-card__q { position: relative; display: inline-block; margin-bottom: 26px; padding: 18px 22px; border-radius: 20px 20px 20px 4px; background: var(--sky); font-size: 20px !important; line-height: 1.45 !important; font-weight: 700; color: var(--point); letter-spacing: -0.02em; }
.ask-card__a { font-size: 16px; line-height: 1.8; }
.care-card.is-line { border: 1px solid var(--line); }
.gap-compare { margin: 40px 0; display: grid; gap: 14px; }
.gap-compare__row { display: flex; align-items: center; gap: 30px; padding: 26px 30px; border-radius: var(--r-sm); background: var(--sky-2); }
.gap-compare__row.is-ours { background: var(--point); }
.gap-compare__who { flex: 0 0 200px; font-size: 18px; font-weight: 700; color: var(--ink); }
.gap-compare__row.is-ours .gap-compare__who { color: #fff; }
.gap-compare ol { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.gap-compare li { padding: 14px 10px; border-radius: 40px; border: 1.5px dashed #b9c6d3; text-align: center; font-size: 16px; font-weight: 600; color: #9aa6b2; }
.gap-compare li.is-on { border: 1.5px solid var(--point); background: #fff; color: var(--point); }
.gap-compare__row.is-ours li.is-on { border-color: #fff; }

/* ---------- 비용 안내 ---------- */
.price-intro { max-width: 1080px; }
.price-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 60px 0 0; padding: 0; list-style: none; }
.price-cards li { display: flex; flex-direction: column; padding: 40px 34px 38px; border-radius: var(--r-md); background: var(--sky-2); }
.price-cards li.is-photo { background: var(--point); color: #fff; }
.price-cards__name { margin-bottom: 26px; font-size: 19px; font-weight: 700; color: var(--ink); }
.price-cards li.is-photo .price-cards__name { color: #fff; }
.price-cards__won { margin-bottom: 18px; font-size: 20px; font-weight: 700; color: var(--point); }
.price-cards__won b { font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -0.05em; margin-right: 4px; }
.price-cards__won.is-text { font-size: 30px; line-height: 1.3; color: #fff; letter-spacing: -0.03em; }
.price-cards__time { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.price-cards__btn { display: inline-flex; align-self: flex-start; margin-top: auto; padding: 12px 24px; border-radius: 40px; background: #fff; color: var(--point); font-size: 15px; font-weight: 700; transition: background .3s; }
.price-cards__btn:hover { background: var(--sky); }
.price-note { margin-top: 24px; font-size: 16px; color: var(--muted); }
.care-daily.is-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1240px) {
  .sym-nav { grid-template-columns: repeat(3, 1fr); }
  .price-cards { grid-template-columns: repeat(2, 1fr); }
  .care-daily.is-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 990px) {
  .ask-wrap { flex-direction: column; align-items: stretch; gap: 40px; }
  .ask-wrap__head { flex: none; position: static; }
}
@media (max-width: 768px) {
  .sym-nav { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sym-nav a { padding: 22px 20px; }
  .sym-nav__ico { width: 38px; height: 38px; margin-bottom: 16px; }
  .sym-nav a strong { font-size: 17px; }
  .sym-item__no { left: 20px; bottom: 12px; font-size: 60px; }
  .ask-card { grid-template-columns: 1fr; gap: 14px; }
  .ask-card li { padding: 30px 24px; }
  .ask-card__q { font-size: 17px !important; }
  .ask-wrap__tel b { font-size: 26px; }
  .gap-compare__row { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px; }
  .gap-compare__who { flex: none; font-size: 16px; }
  .gap-compare li { padding: 10px 4px; font-size: 14px; }
  .price-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
  .price-cards li { padding: 30px 26px; }
  .price-cards__won b { font-size: 56px; }
  .care-daily.is-3 { grid-template-columns: 1fr; }
}

/* ---------- 바닥청소 공통 ---------- */
.img-split figure img { transition: transform 1s var(--ease); }
.img-split figure:hover img { transform: scale(1.05); }
.fl-points { background: var(--ink); color: #fff; --clip-bg: var(--ink); }
.fl-points .sec-head__label { color: var(--point-xl); }
.fl-points .sec-head__title { color: #fff; }
.fl-points__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; background: rgba(255,255,255,.08); }
.fl-points__list li { position: relative; padding: 50px 44px 54px; background: var(--ink); transition: background .5s var(--ease); }
.fl-points__list li:hover { background: #1a2533; }
.fl-points__list li:nth-child(1) { z-index: 3; } .fl-points__list li:nth-child(2) { z-index: 2; } .fl-points__list li:nth-child(3) { z-index: 1; }
.fl-points__no { display: block; margin-bottom: 44px; font-size: 76px; line-height: 1; font-weight: 800; letter-spacing: -0.05em; color: var(--point-xl); }
.fl-points__list strong { display: block; margin-bottom: 16px; font-size: 25px; line-height: 1.4; color: #fff; letter-spacing: -0.03em; }
.fl-points__list p { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.65); }
.fl-points__list li:not(:last-child)::after { content: ''; position: absolute; right: -13px; top: 76px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--point) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 14px; }
.fl-banner { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 380px; padding: 60px 70px; border-radius: var(--r-lg); overflow: hidden; color: #fff; isolation: isolate; }
.fl-banner img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.fl-banner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2,36,72,.92) 0%, rgba(2,36,72,.6) 55%, rgba(2,36,72,.15) 100%); }
.fl-banner:hover img { transform: scale(1.05); }
.fl-banner__label { margin-bottom: 18px; font-size: 16px; font-weight: 700; color: var(--point-xl); }
.fl-banner p { margin-bottom: 34px; font-size: 32px; line-height: 1.45; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.fl-banner__more { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 40px; background: #fff; color: var(--point); font-size: 16px; font-weight: 700; transition: background .3s; }
.fl-banner:hover .fl-banner__more { background: var(--sky); }
@media (max-width: 990px) {
  .fl-points__list { grid-template-columns: 1fr; }
  .fl-points__list li:not(:last-child)::after { right: auto; left: 44px; top: auto; bottom: -13px; transform: rotate(90deg); }
}
@media (max-width: 768px) {
  .fl-points__list li { padding: 38px 26px 42px; }
  .fl-points__list li:not(:last-child)::after { left: 26px; }
  .fl-points__no { margin-bottom: 26px; font-size: 54px; }
  .fl-points__list strong { font-size: 21px; }
  .fl-banner { min-height: 0; padding: 44px 28px; }
  .fl-banner p { font-size: 22px; }
}

/* ===== 작업 사례 : 블로그 원고 ===== */
.case-blog { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.9; color: #3a4350; }
.case-blog p { margin: 0 0 1.5em; }
.case-blog .cb-photo { margin: 2em auto 1.6em; }
.case-blog .cb-photo img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; border-radius: 14px; }
.case-blog .cb-one img { max-width: 680px; margin: 0 auto; }
.case-blog .cb-grid { display: grid; gap: 8px; }
.case-blog .cb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.case-blog .cb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.case-blog .cb-grid img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.case-blog .cb-cap { margin: -.8em 0 2em; font-size: 14px; color: #8a939e; }
.case-blog .cb-hl { background: linear-gradient(transparent 58%, #d6e8fb 58%); color: var(--ink); font-weight: 600; }
.case-blog .cb-quote { position: relative; margin: 3.2em auto 2.4em; padding-top: 38px; font-size: 22px; font-weight: 700; line-height: 1.55; color: var(--point); letter-spacing: -0.03em; }
.case-blog .cb-quote::before { content: "\201C"; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-size: 64px; font-family: Georgia, serif; line-height: 1; color: #bcd3ea; }
.case-blog .cb-list { max-width: 640px; margin: 0 auto 1.8em; padding: 0; list-style: none; counter-reset: cb; text-align: left; }
.case-blog .cb-list li { position: relative; padding: 16px 0 16px 46px; border-top: 1px solid #e3e9f0; counter-increment: cb; }
.case-blog .cb-list li:last-child { border-bottom: 1px solid #e3e9f0; }
.case-blog .cb-list li::before { content: counter(cb, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-weight: 800; color: var(--point); }
.case-blog .cb-list b { display: block; margin-bottom: 2px; color: var(--ink); }
.case-blog .cb-tags { margin-top: 3em; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.case-blog .cb-tags span { padding: 5px 12px; border-radius: 999px; background: #f1f5f9; font-size: 13px; color: #6b7682; }
@media (max-width: 768px) {
  .case-blog { font-size: 15.5px; }
  .case-blog p br { display: none; }
  .case-blog .cb-grid--3 { gap: 4px; }
  .case-blog .cb-grid img { border-radius: 6px; }
  .case-blog .cb-quote { font-size: 19px; }
  .case-blog .cb-quote br { display: inline; }
}
.case-blog .cb-h { margin: 2.6em 0 1em; font-size: 24px; line-height: 1.45; color: var(--ink); letter-spacing: -0.03em; }
@media (max-width: 768px) { .case-blog .cb-h { font-size: 20px; } }

/* ---------- 개인정보처리방침 · 이용약관 ---------- */
.sub-top--sm { min-height: 420px; height: 46vh; }
.policy { padding: 110px 0 var(--sec-pad); }
.policy__title { margin-bottom: 40px; font-size: 40px; font-weight: 700; color: var(--ink); }
.pl-doc { font-size: 17px; line-height: 1.85; color: var(--text); word-break: keep-all; }
.pl-doc p { margin: 0 0 14px; }
.pl-doc b { font-weight: 700; color: var(--ink); }
.pl-lead { font-size: 19px; color: var(--ink); }
.pl-sum { margin: 44px 0 0; padding: 36px 40px; border-radius: var(--r-sm); background: var(--sky-2); border: 1px solid var(--line); }
.pl-sum__tit { display: block; margin-bottom: 16px; font-size: 19px; color: var(--point) !important; }
.pl-sum ul { display: grid; gap: 10px; }
.pl-sum li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; }
.pl-sum li b { color: var(--ink); }
.pl-toc { margin: 24px 0 0; padding: 32px 40px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.pl-toc__tit { display: block; margin-bottom: 12px; font-size: 17px; }
.pl-toc ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 32px; counter-reset: toc; }
.pl-toc li { counter-increment: toc; font-size: 16px; }
.pl-toc li a { color: var(--text); transition: color .3s; }
.pl-toc li a::before { content: '제' counter(toc) '조 '; color: var(--muted); }
.pl-toc li a:hover { color: var(--point); }
.pl-sec { padding-top: 64px; scroll-margin-top: calc(var(--hd-h) + 20px); }
.pl-sec h2 { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-size: 24px; line-height: 1.4; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
.pl-list { margin: 0 0 14px; padding-left: 22px; list-style: decimal; }
.pl-list li { margin-bottom: 8px; padding-left: 4px; }
.pl-dot { margin: 0 0 14px; }
.pl-dot li { position: relative; margin-bottom: 8px; padding-left: 16px; }
.pl-dot li::before { content: ''; position: absolute; left: 2px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: var(--point); }
.pl-table { margin: 6px 0 16px; overflow-x: auto; }
.pl-table table { width: 100%; min-width: 520px; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: 16px; }
.pl-table th, .pl-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.6; }
.pl-table thead th { background: var(--sky-2); font-weight: 700; color: var(--ink); }
.pl-table tbody th { width: 30%; font-weight: 600; color: var(--ink); background: #fafcfe; }
.pl-date { margin-top: 64px !important; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.policy__other { margin-top: 40px; }
@media (max-width: 990px) {
  .sub-top--sm { min-height: 340px; height: 40vh; }
  .policy { padding: 70px 0 100px; }
  .pl-doc { font-size: 16px; }
  .pl-lead { font-size: 17px; }
  .pl-sum, .pl-toc { padding: 26px 22px; }
  .pl-sum li { grid-template-columns: 1fr; gap: 0; }
  .pl-toc ol { grid-template-columns: 1fr; }
  .pl-sec { padding-top: 48px; }
  .pl-sec h2 { font-size: 20px; }
  .pl-table table { font-size: 15px; min-width: 0; }
  .pl-table th, .pl-table td { padding: 12px 12px; }
}
.bo-write__agree-link { text-decoration: underline; text-underline-offset: 3px; color: var(--point); }

/* ---------- 카카오톡 채널 ---------- */
.qk__kakao a { background: #fee500; color: #191919; }
.qk__kakao i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4C7 4 3 7.1 3 11c0 2.5 1.7 4.7 4.2 6l-1 3.6 4.1-2.7c.6.1 1.1.1 1.7.1 5 0 9-3.1 9-7s-4-7-9-7z' fill='%23191919'/%3E%3C/svg%3E"); }
.ch--kakao { background: #fee500; }
.channel-list .ch--kakao, .channel-list .ch--kakao strong { color: #191919; }
.ch--kakao .ch__ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4C7 4 3 7.1 3 11c0 2.5 1.7 4.7 4.2 6l-1 3.6 4.1-2.7c.6.1 1.1.1 1.7.1 5 0 9-3.1 9-7s-4-7-9-7z' fill='%23191919'/%3E%3C/svg%3E"); }
.channel-list .ch--kakao::after { background: rgba(0,0,0,.05); }
@media (max-width: 990px) {
  .mbar__kakao { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fee500; color: #191919 !important; font-size: 16px; font-weight: 700; }
  .mbar__kakao::before { content: ''; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4C7 4 3 7.1 3 11c0 2.5 1.7 4.7 4.2 6l-1 3.6 4.1-2.7c.6.1 1.1.1 1.7.1 5 0 9-3.1 9-7s-4-7-9-7z' fill='%23191919'/%3E%3C/svg%3E") no-repeat center/contain; }
}