/* =====================================================================
   케이웹미디어 — 메인 페이지 리디자인 (Claude Design 기준)
   Palette: ink #1F2A44 / blue #3A86E8 / navy #202841 / cream #FBF4E0
   Font: Pretendard(한글) + Poppins(숫자·영문 라벨)
   ===================================================================== */
@import "utf-8";
@import url(responsive.css);

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css');
/* 숫자 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');


:root{
  
  /*--ink:#1F2A44; --ink-2:#3c4a63; --body:#4b5a72; --soft:#5b6b7f; --muted:#7b8798; --faint:#aeb8c4;
  --blue-soft:#EAF2FD; --navy:#202841; --navy-hover:#3A86E8;  
  --bg-gray:#F4F6F8; --cream:#FBF4E0; --line:#eef1f5; --line-2:#e6ebf1; --line-input:#e0e6ee;
  --foot:#1B2233; --err:#E8795C; --coral-d:#DC6747;
  --r:20px; --r-sm:14px; --r-lg:24px; --pill:999px;
  --sh-card:0 10px 30px -18px rgba(31,42,68,.38);
  --sh-card-lg:0 14px 34px -22px rgba(31,42,68,.25);
  --sh-float:0 24px 50px -24px rgba(31,42,68,.35);
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --disp:Poppins,var(--sans);*/
	
  


	/*====================================================================
		yun  2026-07-09
		=====================================================================*/
	/* color */	
	--primary-color: #202841;
	--secondary-color: #3e455b;
	--logo-color: #202841;
	--dark-navy: #202841;
	--dark-violet: #3B3663;
	--lt-violet: #696687;
	--green: #10B981;
	--lt-green: #85B3A4;
	--sky: #6EADFC;
	--salgu: #FFBC5D;
	--magenta: #BE185D;
	--blue: #3461FF;
	--white: #fff;	
	--basic-color: #444;
	--gray: #b3b3b3;
	--lt-gray: #f1f0f7;
	--bg-gray: #f9f9f9;
	--desc: #a2a0b6;
	/* 기존있던것 */
	--soft: #696687;
	--muted: #202841;
	--blue-soft: #f2f5ff;
	--line-2: #e5e5e5;
	--ink-2: #696687;
	--navy: #202841;

	--transparent: transparent;
	--linear-01: linear-gradient(0turn, #1080A0 -200%, transparent, #49B8D4 300%);
	--linear-02: linear-gradient(45deg, #964C9A 20%, #8DE4EA 120%);
	--linear-03: linear-gradient(85deg, #FFF9E5 0%, #FCFDFF 55%, #E4F6FE 100%);

	--r20: 20px;
	--r25: 25px;
	--r15: 15px;
	--pill: 999px;
	--sh-lg: 0 12px 34px -20px rgba(31,42,68,.25);
	--sh-sm: 0 0px 26px -20px rgba(31,42,68,.85);
	--sh-float: 0 24px 50px -24px rgba(31,42,68,.35);
	--sh-upper: 0 1px 5px 1px rgba(255,255,255,.25);
	--line: #e9e9e9;
	--formline: #eef1f5;
	--formbg: #f9f9f9;
	--footer: #202841;
	/*--linear-02: linear-gradient(circle at 120% 140%, #964C9A 40%, #8DE4EA 120%);*/
	/* font */
	--pretendard:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	--nanumsquare:'nanumsquare', sans-serif;
	--spoqa:'Spoqa Han Sans Neo', sans-serif;	
	--number:'Noto Serif KR', sans-serif;
	/* size */
	--wrap:1140px;
	--header-height: 100px;
	--header-height-negative: -100px;
	--header-h: 100px;

}

/* ---------- reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
/*body{font-family:var(--sans);background:var(--formbg); color:var(--primary-color);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:auto-phrase}*/
body {right: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow-x: hidden !important; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 100%; min-height: 100vh; margin: 0; padding: 0; font-family: var(--pretendard); font-weight: 400; line-height:1.1; transition: right .3s ease; -webkit-overflow-scrolling: touch;}
body::before{content:""; position:fixed; inset:0; z-index:1; pointer-events:none; /*background: radial-gradient(60vw 50vw at 50% -10%, rgba(77,154,245,.1), transparent 60%), radial-gradient(50vw 40vw at 100% 100%, rgba(255,255,255,.025), transparent 60%);*/}
body::before {content:""; position:absolute; background: url(../img/section.mainbg.png)no-repeat center center / cover;}
ul,li {list-style:none;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em {font-style: normal;}
.clamp {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.blind,#skip {position: absolute!important; clip: rect(0 0 0 0)!important; width: 1px!important; height: 1px!important; overflow: hidden!important; white-space: nowrap!important; border: 0!important;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0;/* outline: 1px dotted red;*/}
/*.eyebrow{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary-color)}*/
section{position:relative}

.green{background:var(--green)}
.sky{background:var(--sky)}
.salgu{background:var(--salgu)}
.magenta{background:var(--magenta)}
.blue{background:var(--blue)}




/* @keyframe */
@keyframes kw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes kw-ring{0%,100%{box-shadow:0 0 0 0 rgba(77,154,245,.45)}50%{box-shadow:0 0 0 7px rgba(77,154,245,0)}}
@keyframes kw-tick{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes kw-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes kw-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* btn */
.btn{display:inline-flex; align-items:center;     justify-content: center; gap:8px; border-radius: var(--pill); border:1.5px solid transparent; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .3s, color .2s; line-height:1;     letter-spacing: -0.05em; font-weight:400; white-space:nowrap;}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--primary-color); color:var(--white);}
.btn--primary:hover{background:var(--primary-color); color:var(--white);}
.btn--sky{background:var(--sky); color:var(--white);}
.btn--sky:hover{background:var(--sky); color:var(--white);}
.btn--outline{background:var(--transparent); border-color:var(--primary-color); color:var(--primary-color);}
.btn--outline:hover{background:var(--primary-color); color:var(--white);}
.btn--outline-white{border-color:var(--white);color:var(--white);background:transparent}
.btn--outline-white:hover{background:var(--white);color:var(--primary-color)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn--kakao{background:var(--kakao);color:#3A2E00}
.btn--kakao:hover{filter:brightness(.97)}
.btn--lg{font-weight:500; padding:16px 30px; font-size:18px; line-height:1;}
.btn--sm{padding:12px 25px; font-size:16px; line-height:1;}
.btn--block{width:100%;justify-content:center}
.ph{color:var(--coral);font-weight:700}

/* NAV */
.nav {z-index: 1000; padding:0 2vw;}
.nav.scrolled{position: fixed; width: 100%; box-shadow:var(--sh-sm); background: rgba(255,255,255,0.95); }
.nav-in{display: flex; margin-inline: auto; position: relative; align-items: center; justify-content: space-between; min-height: var(--header-height);}
/* logo */
.brand {display:flex; flex-direction: row; align-items: baseline; gap: 5px; color: var(--logo-color); font-weight:500; font-size:19px; letter-spacing:-.01em;}
.brand .brand-name {margin-top: auto; margin-bottom:0;}
.brand .manager-name {font-size:12px;}
.brand .logo {width:auto; height:auto; display:block;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a {font-size: 20px; font-weight:400; color:var(--primary-color); transition:color .2s; cursor:pointer}
.nav-links a:hover {color:var(--secondary-color)}
.nav-links a.active{color:var(--primary-color);font-weight:700}
.nav-cta{display:flex; align-items:center; gap:10px;}
.nav-cta .manager {display: flex; align-items: center;}
.nav-cta .manager .name {font-size: clamp(15px,3vw,17px); font-weight:600; color: var(--lt-violet);}
.nav-toggle {display:none;width:42px;height:42px;border:1.5px solid var(--line); border-radius:5px; background:var(--white); cursor:pointer; align-items:center; justify-content:center;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after {display:block;width:18px;height:2px;background:var(--primary-color);position:relative;transition:.25s}
.nav-toggle span::before,.nav-toggle span::after {content:"";position:absolute}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span::before{top:0;transform:rotate(45deg)}
.nav.open .nav-toggle span::after{top:0;transform:rotate(-45deg)}
@media(max-width:520px){
	.brand img.mark{height:30px!important}
}

.main {position: relative; z-index: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; }

/* VIEW SWITCH */
.view{display:none}
.view.active{display:block}
/*
outline: 1px dotted red;
*/
/* HERO */
.hero{height: auto; width: 100%; display: flex; align-items: center; justify-content: center; /*overflow:hidden;*/   margin-top: var(--header-height-negative); color: var(--primary-color); }
.hero::before {content:""; position:absolute; top:0; left:0; width:100vw; height:100vh;  z-index:0;}
/*.hero-visual {position: absolute; top: 0; right: 15vw; width: 60vw; margin-top: calc(var(--header-height) + 2vw);}*/
.visual {position: absolute; top: 0; right: 10%; transform: translate(0%, 0)!important; /*width: 90%; max-width: max(84vw, 30vw);*/ margin-top: 2vw; z-index: 1; }

.hero--grid::before{content:""; position:absolute; top:-5vw; right:-5vw; width:850px; height:600px; background:url(../img/section-mvisual-img.png)no-repeat center center / cover; z-index:0; }
/*.hero::before{content:"";position:absolute;top:-80px;right:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(14,158,107,.22),rgba(14,158,107,0) 70%);filter:blur(8px);z-index:0}
.hero::after{content:"";position:absolute;bottom:40px;left:-100px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(251,84,54,.14),rgba(251,84,54,0) 70%);z-index:0}*/
.hero-grid {width: 100%; position:relative;z-index:1;display:grid; grid-template-columns: repeat(auto-fit, minmax(11.285%, auto)); gap:3%; align-items:start; height: auto;}
.hero-copy {display: flex; flex-direction: column; gap: 10px;     margin-top: calc(var(--header-height) + 5vw); margin-bottom: 0vw;
grid-column: 1 / 4 span; grid-row: 1; padding: 0; order: 1;}
.hero-visual {display: flex; flex-direction: column; margin-top: calc(var(--header-height) + 0vw); margin-bottom: 0; grid-column: 1 / 7 span; grid-row: 1; padding: 0; order: 0;
background: url(../img/section-mvisual-img.png)no-repeat center center / contain;		position: absolute; top: 2%; right: -14%; width: 100%; height: 100vh; }

.hero .eyebrow {color:var(--primary-color);text-shadow:none; display:none;}
.hero h1,.hero .hero-tt{font-size: clamp(34px,10vw,84px); line-height:1.2; font-weight:700; letter-spacing:-.03em; margin:0;}
.hero h1 em,.hero .hero-tt em{font-style:normal; color:var(--sky); font-weight: 800; -webkit-text-fill-color:initial; background:none; position:relative;}
.hero h1 em::after,.hero .hero-tt em::after{content:""; position:absolute; left:0; right:0; bottom:10px; height:18px; z-index:-1; border-radius: 4px; background: var(--sky); filter: opacity(.3); height:2vw; bottom:12px;}
/* 히어로 강조어 밑줄 쓸어오기 */
.hero h1 em::after,.hero .hero-tt em::after{ transform-origin:left; animation:kw-underline 1s ease .3s both;}
.hero .lead{font-size: clamp(18px,3vw,20px); color:var(--lt-violet); line-height:1.38; max-width:100%; padding: 15px 0 10px; }
.hero .svc-line{display:inline-flex;flex-wrap:wrap; gap:10px; margin:0}
.hero .svc-line span{color: var(--primary-color); opacity: .6; font-weight: 300; font-size: 16px; background: none; padding: 0px; border-radius: 999px; line-height: 1;}
.hero .svc-line span::before{content:"#"; display:inline-block;}
.hero .hero-btn{display:flex; width: fit-content; }
.trustline{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:14px;color:var(--muted)}
.avatars{display:flex;flex-shrink:0}
.avatars i{width:30px;height:30px;border-radius:50%;border:2px solid var(--formbg);margin-left:-9px;background:var(--primary-color);display:grid;place-items:center;color:var(--white);font-size:11px;font-weight:700}
.avatars i:first-child{margin-left:0}
.avatars i:nth-child(2){background:var(--coral)}.avatars i:nth-child(3){background:#2B7DE0}.avatars i:nth-child(4){background:#7A4FD6}
.rep{position:relative;background:var(--surface);border:1px solid var(--formline);border-radius:var(--r-xl);padding:38px 34px;box-shadow:var(--sh-lg); display:none;}
.rep .photo{width:120px;height:120px;flex:0 0 120px;border-radius:var(--r25);background:linear-gradient(135deg,var(--brand-tint),var(--surface-2));display:grid;place-items:center;position:relative;overflow:hidden}
.rep-head{display:flex;align-items:center;gap:18px;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--formline)}
.rep-head .role{margin:3px 0 0}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rep .photo .ini{width:84px;height:84px;border-radius:50%;background:var(--primary-color);color:var(--white);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:32px}
.rep .photo small{position:absolute;bottom:10px;font-size:11px;color:var(--muted)}
.rep h3{font-size:24px;font-weight:800;letter-spacing:-.01em}
.rep .role{font-size:14px;color:var(--primary-color);font-weight:700;margin:2px 0 16px}
.rep .contact{display:flex;flex-direction:column;gap:9px}
.rep .contact a{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;padding:12px 14px;border-radius:13px;border:1px solid var(--formline);transition:.2s}
.rep .contact a:hover{border-color:var(--ink);background:var(--surface-2)}
.rep .contact .ico{width:20px;color:var(--primary-color)}
.rep .chip{position:absolute;top:-16px;right:22px;background:var(--ink);color:var(--white);font-size:13px;font-weight:700;padding:9px 15px;border-radius:999px;box-shadow:var(--sh)}
.rep .chip b{color:#5FE0A8}


/* STATS */
.stats{/*background:var(--transparent);*/  /* border:1px solid rgba(255,255,255,.06); border-radius:var(--r-xl); margin-top:8px;padding:38px 20px */}
.stats-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center; align-items: center; width: 100%; justify-content: space-between; padding: 20vw 0 5vw;}
.stat .item{font-weight:800; font-size:clamp(30px,4vw,54px); color: var(--primary-color); line-height:1.2; letter-spacing: -0.0385em; display: flex; flex-direction: row; justify-content: center; align-items: baseline; gap: 5px;}
.stat:nth-child(odd) .item { color: var(--sky); }
.stat:nth-child(even) .item { /*color: var(--salgu);*/ }
.stat .item .txt { font-weight:500; font-size: 20px; letter-spacing: -0.02em;}
.stat .lab {color: var(--lt-violet); font-size: clamp(18px,3vw,16px); margin-top:5px;}
.stat+.stat{border-left:1px solid var(--gray);}
.elementor-element{position: absolute;  /*width: auto; max-width: 100%;   */ top: 0%; left: 60%; z-index: 0; text-align: start;}
.elementor-widget-container {width:35%;}
.movedelement {
    -webkit-animation: movedelement 5s linear infinite;
    animation: movedelement 5s linear infinite;
		pointer-events: none;}
		@keyframes movedelement {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    25% {
        -webkit-transform: translate(10px,10px);
        transform: translate(10px,10px)
    }

    50% {
        -webkit-transform: translate(5px,5px);
        transform: translate(5px,5px)
    }

    75% {
        -webkit-transform: translate(10px,-5px);
        transform: translate(10px,-5px)
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

/* ---------- sections 공통 ---------- */
.sec .wrap{padding-top:96px;padding-bottom:96px}
section[class*="sec"]:nth-child(even) {background: var(--bg-gray);}
section[class*="sec"]:nth-child(odd) {background: url(../img/section.bg.png) no-repeat center center/cover;}
/*.bg-include, .bg-stores {background: url(../img/section.bg.png) no-repeat center center/cover;}
.bg-portfolio {background: url(../img/section.bg2.png) no-repeat center center/cover;}*/
.bg-bluegrad{background:linear-gradient(135deg,#DCEBFB 0%,#F2F8FE 55%,#E4F0FC 100%)}
section[class*="sec"] .sec-head{display:flex; flex-direction:column; gap:10px; max-width:560px;}
.sec-head.center{align-items:center;text-align:center;max-width:none;margin:0 auto}
section[class*="sec"] .sec-tt {font-size: clamp(28px,4vw,38px); font-weight:800; line-height:1.23; letter-spacing:-.02em; color:var(--primary-color);}
section[class*="sec"] .sec-desc {font-size: clamp(16px,3vw,18px); line-height:1.3; color:var(--lt-violet);}
section[class*="sec"] .h3 {font-size: clamp(20px,3.5vw,25px); font-weight: 500; color: var(--primary-color); margin-top: 10px; }
section[class*="sec"] .title {font-size: clamp(20px,3vw,20px); font-weight: 600; color: var(--primary-color); margin-top: 0px; display: flex; flex-direction: row; align-items: center; gap: 3px; }
section[class*="sec"] .desc { font-size: clamp(16px,3vw,20px); line-height: 1.385; color: var(--lt-violet); }
section[class*="sec"] .card-title {font-size: clamp(16px,3vw,20px); font-weight: 500; color: var(--lt-violet); margin-top: 5px;}
section[class*="sec"] .card-desc {font-size: clamp(14px,2vw,14px); font-weight: 400; line-height:1.3; color: var(--desc); }
/*tag*/
section[class*="sec"] .tags{display:flex; flex-wrap: wrap; gap:6px;}
section[class*="sec"] .tags span{font-size: clamp(12px,2vw,12px); color: var(--lt-violet); font-weight: 400; background: var(--lt-gray); border-radius:var(--pill); padding:5px 13px;}
section[class*="sec"] .date{ font-size: clamp(12px,2vw,12px); color:var(--gray);}

/* ---------- SERVICES ---------- */
.service-grid{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:20px; position: relative; z-index: 1;}
.service-grid::before {content:""; position: absolute; background: url(../img/agency_fly.png) no-repeat 0 0 / contain; width: 20%; height: 40%; top: -31%; right: 180px; z-index: -1; }
.service{background:var(--white); border-radius:var(--r20); border: 1px solid var(--line); padding:45px ;display:flex; flex-direction:column; gap:8px; box-shadow:var(--sh-lg);}
.service .ic{width: fit-content; height:auto; display:grid; place-items:center; font-size:26px;margin-bottom: 6px;}
.service .ic img {width: 100%; height:100%; object-fit: cover;}
.service h3 {font-size:25px; font-weight:500; color: var(--primary-color); margin-top: 10px;}
.service h3 i {font-style: normal; display:none;}
.service .desc {font-size:16px; line-height:1.5; color: var(--lt-violet)}
.service ul{display:flex;flex-wrap:wrap;gap:8px}
.service li{font-size: 14px; font-weight: 500; color: var(--lt-violet); /* border: 1px solid var(--lt-violet); */ border-radius: var(--pill); padding: 6px 20px; line-height: 1.4; background: var(--lt-gray);}

/* ---------- ALL INCLUDED ---------- */
.perks{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.perk{background:var(--white); border: 1px solid var(--line); border-radius:var(--r20); padding:22px 24px; display:flex;align-items:center; gap:16px; box-shadow: var(--sh-lg);}
.pk-ic{flex:none;width:72px; height:72px; border-radius:12px; display:grid; place-items:center; color:var(--primary-color);}
.pk-ic.ico-01{background:var(--salgu);}
.pk-ic.ico-02{background:var(--sky);}
.pk-ic.ico-03{background:var(--green);}
.pk-ic.ico-04{background:var(--sky);}
.pk-ic.ico-05{background:var(--green);}
.pk-ic.ico-06{background:var(--salgu);}
.pk-tx{display:flex;flex-direction:column;gap:3px}
.pk-tx b{font-size:15px}
.pk-tx span{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---------- PROCESS ---------- */
.steps{margin:0 auto; padding-top: 94px; display:grid; grid-template-columns:repeat(3,1fr); gap:90px 50px; counter-reset:step;}
.steps li{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; /* border-top:1.5px dashed var(--lt-gray); */position: relative; z-index: 0;}
.steps li::before {content: ""; width: 100%; border: 1.5px dashed var(--gray); border-top:none; position: absolute; top: 25%; left: 50%; transform: translate(-50%, -25%); z-index: -1;}
.st-no {width:60px; height:60px; border-radius:var(--pill);background:var(--white); color:var(--ink-2); font-weight:700; font-size:20px; display:grid;place-items:center; /*margin-top:-46px;*/ border:5px solid var(--white);box-shadow:inset 0 0 0 1.5px var(--lt-gray); margin-bottom: 15px;}
.bg-gray .st-no,.bg-cream .st-no{border-color:transparent}
.st-no.on{background:var(--salgu);color:var(--white);box-shadow:none}
.steps b{font-size:20px; color: var(--primary-color); margin-top: 10px;}
.st-tx {font-size:16px; color:var(--muted); line-height:1.6;     font-weight: 300;}

/* ---------- PORTFOLIO (cases) : 대표 사례 + 소개 2단 ---------- */
.case-wrap {display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:center;}
.case-head{max-width:none;align-items:flex-start}
.case-stage{position:relative; min-height:360px;}
.case.thum {position:relative; width:60%; aspect-ratio:4/3; margin-top: 70px; }
.case.photo {position: absolute; right: 0; top: 0; width: 50%; display: flex; flex-direction: column; object-fit:cover;}
.case.card {position:absolute; right:0; bottom:0; width:43%; background:var(--white);    border: 1px solid var(--line); border-radius:var(--r20);padding:20px;box-shadow:var(--sh-float);display:flex;flex-direction:column; gap:8px;}


/* (구) 사례 카드 그리드 — 다른 화면 호환용 유지 */
.case-grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case-feat{background:var(--white);border-radius:var(--r20);overflow:hidden;box-shadow:var(--sh-float);display:flex;flex-direction:column}
.cf-media{position:relative;aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#e8eef5 0 14px,#dfe7f0 14px 28px);display:grid;place-items:center;overflow:hidden}
.cf-media .ti{width:34px;height:34px;color:#8494a8}
.cf-info{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.cf-tags{font-size:11px;font-weight:700;color:var(--lt-violet);background:var(--lt-gray);border-radius:var(--pill);padding:4px 10px;align-self:flex-start}
.cf-info h3{font-size:15px;font-weight:700;line-height:1.5}
.cf-date{font-family:var(--disp);font-size:11px;color:var(--gray)}

/* ---------- WHY US ---------- */
.why-grid{margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items: start;}
.why{background:var(--white);border:1px solid var(--line); --radius: 40px;  border-radius:var(--radius) 0 var(--radius); padding:45px; display:flex;flex-direction:column;     align-items: center; gap:15px; box-shadow:var(--sh-lg)}
.why.item-02 {margin-top: 50px;}
.why-ic{width:70px;height:70px;border-radius:var(--pill);color:var(--white);display:grid;place-items:center; margin-bottom: 10px;}
.why .title{font-size:20px; font-weight: 500; color:var(--primary-color); margin-top:10px;}
.why .desc{font-size:16px; line-height:1.5; color:var(--lt-violet);}

/* ---------- PARTNER STORES (home) ---------- */
.stores-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; position: relative; z-index: 0}
.stores-grid::before {content: ""; position: absolute; background: url(../img/thanks-img.png) no-repeat 0 0 / contain; width: 80%; height: 30%; top: auto; right: 0; z-index: -1; bottom: 20%; }
.stores-intro{display:flex;flex-direction:column;align-items:flex-start;gap:16px;position:sticky;top:calc(var(--header-h) + 34px)}
.stores-thank{width:150px;margin-top:36px;opacity:.85; display:none;}
.stores-list{display:flex;flex-direction:column;gap:16px}

/* post 카드 (render_card / app.js card 공용) */
.post{background:var(--white);border-radius:var(--r20);overflow:hidden; box-shadow:var(--sh-lg); display:block;transition:transform .2s,box-shadow .2s;color:var(--ink)}
.post:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(31,42,68,.35);color:var(--ink)}
.ph-img{position:relative;aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#f0ead6 0 14px,#e9e1c8 14px 28px);display:grid;place-items:center;overflow:hidden}
.ph-img .ti{width:34px;height:34px;color:#a09675}
.ph-tag{position:absolute; left:10px; top:10px; z-index:2; font-size:11px; font-weight:500; color:var(--lt-violet); background:var(--white); border-radius:var(--pill); padding:5px 8px; display:none;}
.post .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:5px}
.post .tags{display:flex;flex-wrap:wrap;gap:6px}
.post .tags span{font-size:11px;font-weight:700;color:var(--lt-violet);background:var(--lt-gray);border-radius:var(--pill);padding:4px 10px}
.post .tt{font-size:17px; font-weight:500; margin:6px 0 0px; color: var(--lt-violet);}
.post .excerpt{font-size:14px;line-height:1.385;font-weight:400;color: var(--desc);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post .date{font-family:var(--disp);font-size:11px;color:var(--gray)}

/* 홈 스토어 리스트는 가로형 카드 */
.stores-list .post{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center;padding:18px; border: 1px solid var(--line); border-radius:var(--r20);}
.stores-list .post .ph-img{border-radius:var(--r15)}
.stores-list .post .body{padding:0}

/* ---------- CTA BAND ---------- */
.cta-band{position:relative; overflow:hidden;}
.cta-band::before{content:"";position:absolute; inset:0;width:100%; height:100%; background:url(../img/cta-banner.png)fixed no-repeat center center / cover; filter:brightness(.5) blur(1px);/*background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 16px,rgba(255,255,255,.02) 16px 32px)*/}
.cta-grid{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:40px;  min-height: 20rem; padding: 5vw 0;}
.cta-copy{display:flex;flex-direction:column;align-items:flex-start;     justify-content: center; gap:16px; color:var(--white); }
.cta-copy h2{font-size: clamp(30px,5vw,34px); font-weight:800; letter-spacing:-.02em; }
.cta-copy .desc {font-size: clamp(16px,3vw,18px); line-height:1.2; }
.cta-copy .btn {margin-top:8px}


/* ---------- CONTACT ---------- */
.contact-sec{/*background:linear-gradient(135deg,#7FA8E8 0%,#6E9CE3 100%)*/background:none!important;}
.contact-sec:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 45vh; background: var(--primary-color); z-index: -1;}
.contact-head{display:flex;flex-direction:column;gap:12px;color:var(--white);max-width:600px}
.contact-head h2{font-size: clamp(32px,5vw,50px); font-weight:600;letter-spacing:-.02em; word-break: keep-all;}
.contact-head p{font-size: clamp(15px,3vw,18px); line-height:1.3; color: var(--lt-gray); font-weight: 300;}
.contact-grid{margin-top:40px;display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:start}
.form{background:var(--white);border-radius:var(--r25);padding:36px;display:flex;flex-direction:column;gap:18px;box-shadow:0 30px 60px -30px rgba(31,42,68,.45); order: 1;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size: clamp(15px,3vw,18px);font-weight:500;color:var(--primary-color)}
.field input,.field textarea{width: 100%; font-family: inherit; font-size: clamp(14px,3vw,15px); padding: 13px 15px; border: 1.5px solid var(--formline); border-radius: 5px; background: var(--formbg); transition: border-color .2s; color: var(--ink);}
.field input:focus,.field textarea:focus{border-color:var(--blue)}
.field input.err,.field textarea.err{border-color:var(--err)}
.field textarea{min-height:96px;resize:vertical}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;overflow:hidden}
.consent{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--lt-violet); cursor:pointer}
.consent input{width:16px;height:16px;accent-color:var(--blue);flex:none}
.form-actions{display:flex;justify-content:flex-end}
.form-actions .btn {width: 100%; border-radius: 5px;}
.form-msg,.qf-msg{display:none;background:#EAF7F1;color:#1D7A5C;border:1px solid #BFE8D8;border-radius:12px;padding:13px 16px;font-size:13.5px;font-weight:600}
.form-msg.show,.qf-msg.show{display:block}
.form-msg.qf-err,.qf-msg.qf-err{background:#FDEEEA;color:var(--coral-d);border-color:#F6CFC4}
.contact-deco {position:relative;  order: 1;  z-index: -1;/* background:url(../img/contact-deco-img.png) no-repeat center center / contain; */    }
.cd{position:absolute;border-radius:var(--pill);background:repeating-linear-gradient(45deg,#a9c4ef 0 10px,#9cbaeb 10px 20px);border:4px solid rgba(255,255,255,.7); display:none;}
/*.cd1{top:0;right:10%;width:96px;height:96px}
.cd2{top:130px;left:0;width:72px;height:72px}
.cd3{top:180px;right:22%;width:110px;height:110px}
.cd4{top:300px;left:14%;width:80px;height:80px}*/


/* ---------- FOOTER ---------- */
footer{background:var(--footer); color:var(--white);}
footer .wrap{padding-top:64px;padding-bottom:40px;display:flex;flex-direction:column;gap:40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-brand b{font-size:17px}
.foot-brand p{font-size:13px;line-height:1.8;color:rgba(255,255,255,.65)}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:13px}
.foot-col h4{font-size:13px;font-weight:700;color:rgba(255,255,255,.5);margin-bottom:4px}
.foot-col a{color:rgba(255,255,255,.8)}
.foot-col a:hover{color:var(--white)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;font-size:12.5px;color:rgba(255,255,255,.5)}

/* ---------- mobile bar ---------- */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:900; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); /*border-top:1px solid var(--secondary-color);*/ /*padding:10px 14px calc(10px + env(safe-area-inset-bottom));*/ grid-template-columns:1fr 1fr; gap:0px; box-shadow: var(--sh-upper);}
.mbar .btn{}
.btn-mbar {border-radius: 0; width:100%; padding: 20px 30px;}

/* =====================================================================
   BOARD (게시판)
   ===================================================================== */
.0age-head{background:linear-gradient(135deg,#DCEBFB 0%,#F2F8FE 55%,#E4F0FC 100%)}
.page-head .wrap{padding-top:64px;padding-bottom:56px;display:flex;flex-direction:column;gap:12px}
.crumb{font-size:13px;color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--blue)}
.page-tt,h1.page-tt{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:0}
.page-head p{font-size:14.5px;line-height:1.8;color:var(--soft);max-width:640px}

.carousel-sec .wrap{padding-top:48px;padding-bottom:16px}
.car-title{font-size:20px;font-weight:800;margin-bottom:18px}
.carousel{position:relative;border-radius:var(--r20);overflow:hidden;box-shadow:var(--sh-lg)}
.car-track{display:flex;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.car-slide{position:relative;flex:0 0 100%;aspect-ratio:21/8;min-height:240px;background:repeating-linear-gradient(45deg,#e8eef5 0 14px,#dfe7f0 14px 28px);display:block;color:var(--white)}
.car-slide .ov{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(20,28,48,.78) 0%,rgba(20,28,48,.15) 55%,transparent 100%)}
.car-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 30px;display:flex;flex-direction:column;gap:8px}
.car-cap .tg{display:flex;gap:6px}
.car-cap .tg span{font-size:11px;font-weight:700;color:var(--white);background:rgba(58,134,232,.85);border-radius:var(--pill);padding:4px 10px}
.car-cap .ct{font-size:20px;font-weight:800;color:var(--white)}
.car-cap p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.85);max-width:640px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:var(--pill);border:none;background:rgba(255,255,255,.9);color:var(--ink);font-size:22px;cursor:pointer;display:grid;place-items:center;box-shadow:var(--sh-lg);transition:background .2s}
.car-btn:hover{background:var(--white)}
.car-btn.prev{left:16px}.car-btn.next{right:16px}
.car-dots{position:absolute;left:0;right:0;bottom:12px;z-index:4;display:flex;justify-content:center;gap:7px}
.car-dots button{width:8px;height:8px;border-radius:var(--pill);border:none;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:.2s}
.car-dots button.on{background:var(--white);width:22px}

.tools .wrap{padding-top:36px;padding-bottom:8px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.searchbar{flex:1 1 340px;display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line-input);border-radius:var(--pill);padding:12px 18px;color:var(--muted)}
.searchbar:focus-within{border-color:var(--blue)}
.searchbar input{flex:1;border:none;outline:none;font-size:14px;background:transparent;color:var(--ink)}
.searchbar .clear{display:none;border:none;background:var(--bg-gray);color:var(--muted);width:24px;height:24px;border-radius:var(--pill);cursor:pointer;font-size:12px;line-height:1}
.searchbar .clear.show{display:block}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.fchip{border:1px solid var(--line-2);background:var(--white);color:var(--ink-2);font-size:13px;font-weight:600;padding:9px 16px;border-radius:var(--pill);cursor:pointer;transition:.2s}
.fchip:hover{border-color:var(--blue);color:var(--blue)}
.fchip.active{background:var(--navy);border-color:var(--navy);color:var(--white)}
.sort-wrap{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-left:auto}
.sort-wrap select{border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--ink-2);background:var(--white);outline:none;cursor:pointer}

.list .wrap{padding-top:24px;padding-bottom:96px}
.result-count{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.result-count b{color:var(--blue)}
.blog-grid.board-grid,#grid.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.empty{display:none;text-align:center;padding:70px 20px;color:var(--muted);font-size:14px}
.empty.show{display:block}
.empty b{display:block;font-size:17px;color:var(--ink);margin-bottom:8px}
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:36px}
.pg-btn{border:1px solid var(--line-2);background:var(--white);color:var(--ink-2);font-size:13px;font-weight:600;min-width:38px;height:38px;padding:0 12px;border-radius:12px;cursor:pointer;transition:.2s}
.pg-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.pg-btn.active{background:var(--navy);border-color:var(--navy);color:var(--white)}
.pg-btn:disabled{opacity:.4;cursor:default}

/* =====================================================================
   POST DETAIL (글 상세)
   ===================================================================== */
.article-wrap .wrap{padding-top:56px;padding-bottom:80px}
.article{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.article .tags{display:flex;flex-wrap:wrap;gap:6px}
.article .tags span{font-size:11px;font-weight:700;color:var(--blue);background:var(--blue-soft);border-radius:var(--pill);padding:5px 11px}
.article h1{font-size:clamp(24px,3.4vw,34px);font-weight:800;line-height:1.4;letter-spacing:-.02em}
.art-meta{font-size:13px;color:var(--muted)}
.art-hero{position:relative;aspect-ratio:16/8;border-radius:var(--r20);overflow:hidden;background:repeating-linear-gradient(45deg,#e8eef5 0 14px,#dfe7f0 14px 28px);display:grid;place-items:center}
.art-hero .ti{width:44px;height:44px;color:#8494a8}
.art-body{font-size:15.5px;line-height:1.9;color:var(--body);display:flex;flex-direction:column;gap:16px}
.art-body h2{font-size:21px;font-weight:800;color:var(--ink);margin-top:14px}
.art-body img{border-radius:var(--r15);height:auto}
.art-body a{color:var(--blue);text-decoration:underline}
.customer-box{background:var(--blue-soft);border-radius:var(--r15);padding:18px 22px;font-size:14px;font-weight:700;color:var(--ink)}
.customer-box a{color:var(--blue);text-decoration:underline}
.art-cta{background:var(--cream);border-radius:var(--r20);padding:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.art-cta b{font-size:16px}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.post-nav a{border:1px solid var(--line-2);border-radius:var(--r15);padding:16px 18px;font-size:14px;font-weight:600;color:var(--ink);line-height:1.5;transition:.2s;display:block}
.post-nav a:hover{border-color:var(--blue);color:var(--blue)}
.post-nav a.nx{text-align:right}
.post-nav a.off{opacity:.45;pointer-events:none}
.post-nav .nl{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:5px;letter-spacing:.04em}
.related-tt{font-size:19px;font-weight:800;margin-top:22px}
.article .blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.back-link{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--ink-2)}
.back-link:hover{color:var(--blue)}
.article .crumb{margin-bottom:-4px}



/* rv */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
	.rv{opacity:1;transform:none;transition:none}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1440px){
	.hero-visual{right: -6%;}
}
@media (max-width:1240px){
	.hero-visual{right: -5%; width: 90%;}
	.wrap{padding:0 3vw;}
}
@media (max-width:1024px){
	

	.hero-visual {right: -6%; width: 80%;}
	
	/*
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-visual{order:-1;max-width:520px;margin:0 auto}
  .service-grid{grid-template-columns:1fr 1fr}
  .perks{grid-template-columns:1fr 1fr}
  .case-grid,.why-grid{grid-template-columns:1fr 1fr}
  .case-wrap{grid-template-columns:1fr;gap:40px}
  .case-head{align-items:center;text-align:center;margin:0 auto}
  .blog-grid.board-grid,#grid.blog-grid{grid-template-columns:1fr 1fr}
  .stores-grid{grid-template-columns:1fr;gap:36px}
  .stores-intro{position:static}
  .cta-grid{grid-template-columns:1fr}
  .cta-band::before{right:0;opacity:.5}
  .contact-grid{grid-template-columns:1fr}
  .contact-deco{display:none}*/
}
@media (max-width:860px){
  :root{--header-height: 72px;}
	body{padding-bottom: 60px;}
	br.pc {display:none;}	

	/*.nav {box-shadow: var(--sh-sm); background: rgba(255, 255, 255, 0.95);}*/
  .nav-links {position:absolute; top: calc(var(--header-height) + 3vw); right:0; left:0; background:var(--primary-color); color:var(--white); border-bottom:1px solid var(--white); border-radius: var(--r20); flex-direction:column; align-items:stretch; gap:0; padding:0; box-shadow: var(--sh-float); filter: opacity(.95); display:none;}
  .nav.open .nav-links {display:flex}
  .nav-links a {padding:14px 24px; font-size:17px; font-weight: 300; border-bottom: 1px dotted rgba(255,255,255,.2); color: var(--white);}
  .nav-links a:hover, .nav-links a.active {color: inherit; font-weight: inherit;}
  .nav-toggle {display:flex}
  .manager-name {display:none}
  .nav-cta .btn {display:none}	



	.sec .wrap {padding-top: 8vw; padding-bottom: 8vw;}
	.brand .brand-name {display: none;}	
	.stats-grid {display: flex; flex-direction: column; padding: 10vw 0 5vw;}	
	.stats-grid .stat {display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 20px; width: 100%; position: relative;}
	.stats-grid .stat .item { font-size: clamp(32px, 4vw, 54px); gap: 3px;}
	.stat+.stat {border-left: none;}
	.stat .lab {margin-top: 0; }	
	.stat::after {content:""; position: absolute; top: 50%; left: 0; width: 10%; margin-left: 40%; border-top: 1px dashed var(--gray); display: block; z-index: -1; background: var(--white);}
	/*.stat {background: var(--white); border: 1px solid var(--line); border-radius: var(--r20); padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 5px; box-shadow: var(--sh-lg);}	*/	
	.service-grid, .perks, .steps, .case-wrap, .why-grid, .stores-grid, .contact-grid { grid-template-columns: repeat(1, 1fr); margin-top: 5vw; gap: 3vw;		}	
	.cta-grid {display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap:0;}
	.cta-copy {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;}
	.service, .why, .form {padding: 30px;}
	.stores-list .post {grid-template-columns: 1fr;}
	.stores-grid::before {width: 100%; height: 10%; top: -4%; right: -75%; bottom: auto;}
	.hero-grid { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0px;}
	.hero-copy { width: 100%; margin-top: calc(var(--header-height) + 10vw); gap: 5px;}
	.hero .lead {padding: 0px 10px 5px;}
	.hero-visual {position:unset; width: 100%; height:36vw; background: url(../img/mo-mvisual-img.png) no-repeat center center / cover; order:1; margin-top:0;}
	.hero .svc-line {display:none;}	
	.hero .hero-btn {display: flex; justify-content: center; width: auto;}
	.hero .hero-btn .btn {width:70%; font-size: 20px;}
	.steps {width: auto; gap:30px; padding-top: 40px;}
	.service-grid::before {display:none;}
	.service .ic {display: none;}
	.service h3 i {display: flex;}
	.why.item-02 {margin-top: 0px;}
	.case-stage {order:2;}
	.case-wrap {gap:0;}
	.contact-deco {display:none;}
	.case.thum {width: 70%; margin-top: 5vw;}
	.case.card {width: 70%;}
	.case.photo {width: 50%; top:70px;}
  /*.hero-grid{padding-top:50px;padding-bottom:0px}
	.hero .hero-btn {display: flex; width: auto; justify-content: center;}
  .sec .wrap{padding-top:64px;padding-bottom:64px}
  .sec-tt{font-size:26px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:28px 12px;    padding: 0;}
  .stat+.stat{border-left:none}
  .stat:nth-child(even){border-left:1px dashed var(--lt-gray)}
  .service-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;gap:44px 20px}
  .why-grid,.case-grid{grid-template-columns:1fr}
  .case-stage{min-height:0}
  .case-photo{width:100%}
  .case-card{position:relative;right:auto;bottom:auto;width:auto;max-width:86%;margin:-44px 12px 0 auto}
  .perks{grid-template-columns:1fr}
  .stores-list .post{grid-template-columns:130px 1fr;gap:14px;padding:14px}
  .cta-grid{padding-top:80px;padding-bottom:80px}
  .cta-copy h2{font-size:27px}
  .two{grid-template-columns:1fr}
  .form{padding:26px 22px}*/ 
  /*.blog-grid.board-grid,#grid.blog-grid{grid-template-columns:1fr}
  .article .blog-grid{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .post-nav a.nx{text-align:left}
  .car-slide{aspect-ratio:16/10}
  .car-btn{width:38px;height:38px}
  .sort-wrap{margin-left:0}
  .page-tt,h1.page-tt{font-size:27px}*/
	footer .wrap{padding-top:40px; padding-bottom:40px; }
	.foot-grid{grid-template-columns:1fr;gap:28px}
  .mbar{display:grid}	
}
@media (max-width:480px){	
	.stats-grid .stat .item::before {display:none;}
	.ph-img {aspect-ratio: 16 / 9;}
  /*.stores-list .post{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .stat .count{font-size:34px}*/
}



/* =====================================================================
   미세 모션 (문구 가독성 해치지 않는 선)
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* 서비스 아이콘: 살짝 떠다니기 + 호버 반응 */
  .service .ic{transition:transform .25s ease, box-shadow .25s ease}
  .service .ic svg{animation:kw-float 3.4s ease-in-out infinite;will-change:transform}
  .service:nth-child(2) .ic svg{animation-delay:.35s}
  .service:nth-child(3) .ic svg{animation-delay:.7s}
  .service:nth-child(4) .ic svg{animation-delay:1.05s}
  .service:hover .ic{transform:translateY(-4px) scale(1.00) rotate(-4deg);}
  /* 카드 호버 떠오름 */
  .service:hover,.case:hover,.post:hover,.why:hover,.perk:hover {transform:translateY(-4px)}
  .service, .why,.perk {transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}
  .service:hover, .why:hover,.perk:hover {border-color:rgba(77,154,245,.3); box-shadow:0 16px 40px -26px rgba(77,154,245,.5)} /* 오버시라인 */
  /* 진행 단계 번호: 순차 맥동 */
  .steps .st-no{animation:kw-ring 2.6s ease-in-out infinite;will-change:box-shadow}
  .steps li:nth-child(2) .st-no{animation-delay:.3s}
  .steps li:nth-child(3) .st-no{animation-delay:.6s}
  .steps li:nth-child(4) .st-no{animation-delay:.9s}
  .steps li:nth-child(5) .st-no{animation-delay:1.2s}
  .steps li:nth-child(6) .st-no{animation-delay:1.5s}
  /* 포함혜택 체크 살짝 튀기 */
  .perk::before{display:inline-block;animation:kw-tick 3s ease-in-out infinite}
  .perk:nth-child(even)::before{animation-delay:.5s}
  /* 숫자 바: 호버 시 살짝 강조 */
  .stat{transition:transform .2s ease}
  .stat:hover{transform:translateY(-3px)}
  .stat:hover .num{color:var(--primary-color)}
  /* eyebrow 앞 점멸 점 */
	.eyebrow.light {display: flex; flex-direction: row; align-items: center; line-height: 1; color:var(--lt-violet); font-size: 15px; font-weight: 500; filter: opacity(0.5);}
	.eyebrow.big {display: flex; flex-direction: row; align-items: center; line-height: 1; color:var(--lt-violet); font-size: 15px; font-weight: 500;}
	.eyebrow.white {display: flex; flex-direction: row; align-items: center; line-height: 1; color:var(--white);  background:var(--transparent); font-size: 15px; font-weight: 500;}
	.eyebrow.white::before {content:""; display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; margin-bottom: 1px; background:var(--white); vertical-align:middle; animation:kw-blink 1.8s ease-in-out infinite;}
  .eyebrow::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; margin-bottom: 1px; background:var(--lt-violet); vertical-align:middle; animation:kw-blink 1.8s ease-in-out infinite;}
  
}