/* 12 돌직구 사장 — 대화 · 삼각 배색(보라 · 청록 · 노랑) */
:root{
  --c:#6D28D9; --c-d:#5B21B6; --c2:#F4A26B; --c2-d:#B4531A; --pt:#FDE68A; --bg:#F7F3FF;
  --ink:#1E1433; --mute:#5E5474; --line:#E2D9F5; --paper:#FFFFFF; --tint:#EEE7FC; --tint2:#FFF1E6;
  --drop:drop-shadow(0 18px 30px rgba(60,30,120,.14));
  --pad:48px; --sec:56px; --top:68px;
  --ease:cubic-bezier(.2,.7,.2,1); --snap:cubic-bezier(.3,1.6,.5,1);
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:'Noto Sans KR',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-weight:400;color:var(--ink);font-size:18px;line-height:1.6;word-break:keep-all;
  background-color:var(--bg);background-image:radial-gradient(1100px 600px at 92% -8%,rgba(244,162,107,.10),transparent 70%),radial-gradient(900px 700px at -10% 40%,rgba(109,40,217,.07),transparent 70%)}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
b,strong{font-weight:800}
.sr{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sr:focus{width:auto;height:auto;clip-path:none;left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.em{color:var(--c)}
.hl{background:linear-gradient(transparent 58%,var(--pt) 58%,var(--pt) 92%,transparent 92%);padding:0 .06em}
.kick{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;color:var(--c2-d);letter-spacing:.01em;margin-bottom:14px}
.kick::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--c2)}
h2{font-size:52px;line-height:1.14;letter-spacing:-.02em;font-weight:800}
.lab{display:block;font-size:13.5px;font-weight:800;color:var(--c2-d);letter-spacing:.01em;margin-bottom:2px}
.fail{color:var(--c);font-size:15px}
svg{width:20px;height:20px;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:58px;padding:0 28px;border-radius:999px;font-size:17px;font-weight:800;text-decoration:none;transition:transform .25s var(--ease),background-color .25s var(--ease)}
.btn.fill{background:var(--c);color:#fff}
.btn.fill:hover{background:var(--c-d);transform:translateY(-2px)}
.btn.line{background:#fff;color:var(--c);border:2px solid var(--c)}
.btn.line:hover{transform:translateY(-2px)}
.go{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--c);text-decoration:none;font-size:17px;border-bottom:2px solid rgba(244,162,107,.55);padding-bottom:2px}
.go svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.go:hover svg{transform:translateX(4px)}

/* 머리 */
.top{position:sticky;top:0;z-index:40;background:rgba(247,243,255,.9);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.top .wrap{height:var(--top);display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:19px}
.lg-i{width:30px;height:30px}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{text-decoration:none;font-size:15.5px;color:var(--mute);font-weight:800}
.nav a:hover{color:var(--c)}
.callb{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 18px;border-radius:999px;background:var(--c);color:#fff;font-weight:800;font-size:15px;text-decoration:none}
.callb svg{width:17px;height:17px}

/* 첫 화면 */
.hero{overflow-x:clip;padding:28px 0 var(--sec)}
.hero-g{display:grid;grid-template-columns:minmax(0,1fr) 660px;gap:48px;align-items:stretch}
.copy{display:flex;flex-direction:column;justify-content:center;padding-bottom:8px}
.band{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:800;color:var(--c2-d);background:var(--tint2);padding:8px 16px 8px 12px;border-radius:999px;margin-bottom:26px}
.who-dot{width:10px;height:10px;border-radius:50%;background:var(--c2);box-shadow:0 0 0 0 rgba(244,162,107,.5);animation:ping 2.4s ease-out infinite}
h1{font-size:64px;line-height:1.12;letter-spacing:-.02em;font-weight:800}
h1 .l1,h1 .l2{display:block}
.sub{font-size:24px;color:var(--mute);margin-top:20px}
.cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.recent{display:flex;gap:0}

.scene{position:relative;height:660px}
.owner{position:absolute;right:0;top:0;width:450px;height:660px;border-radius:30px;overflow:hidden;background:#ECE8F3;box-shadow:0 30px 60px -28px rgba(60,30,120,.35)}
.o-img{position:absolute;inset:0;background:url(../img/owner/12.jpg) 50% 0/cover no-repeat;transform-origin:50% 30%;animation:breathe 14s ease-in-out infinite alternate}
.pinc{position:absolute;z-index:2;left:0;bottom:0;width:206px;transform:rotate(-2.2deg);animation:rise .45s var(--ease) .3s both}
.pinc img{width:206px;height:270px;object-fit:cover;border-radius:18px;box-shadow:0 22px 40px -18px rgba(60,30,120,.4)}
.pinc figcaption{font-size:13.5px;font-weight:800;color:var(--mute);margin-top:8px}
.pin{position:absolute;left:var(--x);top:var(--y);display:flex;flex-direction:row-reverse;align-items:center;gap:8px;transform:translate(calc(-100% + 9px),-50%);animation:pop .4s var(--ease) both}
.pin:nth-of-type(2){animation-delay:.12s}.pin:nth-of-type(3){animation-delay:.24s}
.pin>i{position:relative;width:18px;height:18px;border-radius:50%;background:var(--c2);box-shadow:0 0 0 4px #fff;flex:none}
.pin>i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #fff;animation:ring 2.2s ease-out infinite}
.pin b{background:#fff;color:var(--ink);font-size:13.5px;padding:5px 11px;border-radius:999px;white-space:nowrap;filter:drop-shadow(0 6px 12px rgba(30,20,51,.18))}
.pin.r{flex-direction:row;transform:translate(-9px,-50%)}

/* 새 도전: 대화판 */
.talk{padding:var(--sec) 0}
.talk-g{display:grid;grid-template-columns:520px minmax(0,1fr);gap:56px;align-items:stretch}
.tq .q{background:#fff;border-radius:22px 22px 22px 6px;padding:20px 28px 22px;font-size:26px;font-weight:800;line-height:1.35;letter-spacing:-.01em;filter:drop-shadow(0 10px 18px rgba(60,30,120,.08));
  transform:translateY(calc(var(--near,0) * -8px));transition:transform .25s var(--ease),background-color .25s var(--ease)}

/* 안 되는 것 */

/* 끝낸 자리 */
.done{padding:var(--sec) 0 40px;overflow-x:clip}
.done-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.rail{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px 0 8px max(var(--pad),calc((100vw - 1440px) / 2 + var(--pad)));scrollbar-width:thin;scroll-padding-left:max(var(--pad),calc((100vw - 1440px) / 2 + var(--pad)))}
.rail:focus-visible{outline:2px solid var(--c)}
.cc{flex:0 0 310px;scroll-snap-align:start;text-decoration:none;display:flex;flex-direction:column;gap:6px}
.ci{position:relative;display:block;height:410px;margin-bottom:8px}
.ci img{width:100%;height:100%;object-fit:cover;border-radius:22px;transform:rotate(var(--r,-.8deg));transition:transform .3s var(--ease)}
.cc:nth-child(2n) .ci{--r:.9deg}
.cc:hover .ci img{transform:rotate(0) translateY(-4px)}
.ok{position:absolute;right:-8px;top:-8px;width:40px;height:40px;border-radius:50%;background:var(--c2);color:#fff;display:grid;place-items:center}
.ok svg{width:20px;height:20px}
.cm{font-size:15px;color:var(--mute)}
.ct{font-size:21px;line-height:1.35}

/* 다니는 곳: B 입체 노선도 */
.m-board{position:absolute;left:50%;top:50%;width:720px;height:510px;margin:-255px 0 0 -360px;border-radius:52px;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-30deg);
  background:linear-gradient(135deg,#FFFFFF,#F1ECFB)}

/* 연락 */
.ask{padding:40px 0 var(--sec)}
.ask-g{display:grid;grid-template-columns:640px minmax(0,1fr);gap:64px;align-items:center;background:var(--tint);border-radius:40px;padding:24px 56px 24px 24px}
.ask-st{position:relative;height:600px}
.ask-ph{position:absolute;left:0;top:0;width:450px;height:600px}
.ask-ph img{width:100%;height:100%;object-fit:cover;border-radius:30px}
.ask-ph figcaption{position:absolute;left:16px;bottom:16px;font-size:14px;font-weight:800;background:rgba(255,255,255,.85);padding:6px 12px;border-radius:10px}
.ask-st .phone{position:absolute;right:0;top:60px;width:290px}
.ask-t h2{font-size:64px}
.tel{font-size:54px;font-weight:800;color:var(--c);letter-spacing:-.01em;margin-top:24px}
.phone{width:400px;height:auto;border-radius:46px;outline:10px solid #fff;outline-offset:-10px;background:#fff;padding:22px 18px;filter:drop-shadow(0 30px 40px rgba(60,30,120,.22));overflow:hidden}
.ph-scr{display:flex;flex-direction:column;height:100%}
.ph-top{display:flex;flex-direction:column;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.ph-top b{font-size:16px}
.ph-top small{font-size:13px;color:var(--mute)}
.ph-msg{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.m-in{align-self:flex-start;width:130px}
.m-in img,.m-out img{width:130px;height:128px;object-fit:cover;border-radius:16px}
.m-q{align-self:flex-start;max-width:90%;background:#F1EEF7;border-radius:18px 18px 18px 6px;padding:12px 16px;font-size:18px;font-weight:800;line-height:1.4}
.m-a{align-self:flex-end;max-width:86%;background:var(--c);color:#fff;border-radius:18px 18px 6px 18px;padding:10px 14px;font-size:14.5px;line-height:1.4}
.m-a b,.m-a span{display:block}.m-a b{font-size:26px}
.m-out{align-self:flex-end;width:130px;display:flex;flex-direction:column;align-items:flex-end}
.m-out figcaption{font-size:12.5px;color:var(--mute);margin-top:4px}
.ph-msg.play .m-a{animation:snap .38s var(--snap) 1.6s both}
.ph-msg.play .m-out{animation:rise .4s var(--ease) 1.9s both}

/* 꼬리말 · 고정줄 */
.foot{background:#EFE9FC;padding:40px 0 44px}
.foot-g{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px}
.fname{display:flex;align-items:center;gap:10px;font-size:18px;margin-bottom:12px}
.foot dl{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;font-size:14.5px;color:var(--mute)}
.foot dt{font-weight:800;color:var(--ink)}
.foot dd{margin:0}
.flinks{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.flinks a{text-decoration:none;font-weight:800;font-size:15px;color:var(--mute)}
.sample-note{grid-column:1/-1;font-size:13.5px;color:var(--mute)}
.bar{position:fixed;z-index:50;right:24px;bottom:24px;display:flex;gap:8px;padding:8px;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 18px 40px -16px rgba(60,30,120,.35);backdrop-filter:blur(8px);transition:transform .3s var(--ease),visibility 0s}
.bar.away{transform:translateY(160%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
.bar .btn{height:48px;padding:0 20px;font-size:16px}

/* 나타남(키프레임 — 600ms 안) */
.js:not(.rm) .rv{opacity:0}
.js:not(.rm) .rv.in{animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes snap{0%{opacity:0;transform:translate(10px,14px) scale(.86)}70%{opacity:1;transform:translate(0,-2px) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes vtsnap{0%{transform:scale(.88)}70%{transform:scale(1.04)}100%{transform:none}}
@keyframes pop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(244,162,107,.55)}100%{box-shadow:0 0 0 12px rgba(244,162,107,0)}}
@keyframes ping2{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes dot{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes gone{to{opacity:0;visibility:hidden}}
@keyframes stamp{0%{opacity:0;transform:rotate(-12deg) scale(1.8)}60%{opacity:1;transform:rotate(-12deg) scale(.92)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
@keyframes strike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes spin{to{rotate:360deg}}
@keyframes flow{to{background-position:26px 0}}
@keyframes bob{from{translate:0 0}to{translate:0 -6px}}
@keyframes blink{50%{opacity:0}}
@keyframes fadein{from{opacity:.2}to{opacity:1}}

/* 현장 쪽 · 한 줄 답 쪽 */
.sub-page{padding:40px 0 var(--sec)}
.back{margin-bottom:28px}
.back svg{transform:rotate(180deg)}
.cg{display:grid;grid-template-columns:440px minmax(0,1fr);gap:72px;align-items:center}
.c-ph{position:relative;height:540px;border-radius:30px;background:#ECE8F3;box-shadow:0 30px 60px -28px rgba(60,30,120,.32)}
.c-ph .c-b{position:absolute;right:-30px;bottom:-30px;width:170px;height:220px;object-fit:cover;border-radius:16px;border:6px solid #fff;transform:rotate(3deg)}
.c-ph .c-bt{position:absolute;right:120px;bottom:166px;z-index:2;background:var(--c2-d);color:#fff;font-size:13px;font-weight:800;padding:3px 10px;border-radius:8px;transform:rotate(3deg)}
.c-t{display:flex;flex-direction:column;justify-content:center;gap:16px}
.c-t h1{font-size:52px;line-height:1.15}
.c-t .when{font-size:16px;color:var(--mute)}
.c-t .bq{animation:none;max-width:520px;font-size:20px}
.c-t .ba{animation:snap .38s var(--snap) .2s both;max-width:520px;margin-left:48px}
.c-t .ba span{font-size:17px}
.qa-h{margin-bottom:34px}
.qa-h h1{font-size:56px;line-height:1.14}
.qa-h p{font-size:22px;color:var(--mute);margin-top:14px}
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 56px}
.qa li{display:flex;flex-direction:column;gap:10px}
.qa .bq{animation:none}
.qa .ba{animation:none;margin:0 0 0 48px;display:flex;align-items:center;gap:14px}
.qa .ba img{width:124px;height:100px;border-radius:12px;object-fit:cover;flex:none;outline:3px solid rgba(255,255,255,.7)}
.qa .ba b{font-size:24px}
.qa .ba a{color:#fff;text-decoration:none}

@media (max-width:1240px){
  :root{--pad:32px}
  .hero-g{grid-template-columns:minmax(0,1fr) 560px}
  .owner{width:380px}
  h1{font-size:54px}
  .talk-g{grid-template-columns:440px minmax(0,1fr)}
  .ask-g{padding:40px}
  .nav{gap:18px}
}
@media (max-width:900px){
  :root{--sec:44px;--pad:20px;--top:58px}
  h2{font-size:34px}
  .nav{display:none}
  .callb{margin-left:auto}
  .hero{padding-top:18px}
  .hero-g{display:flex;flex-direction:column;gap:0}
  .copy,.scene{display:contents}
  .band{order:1;margin-bottom:18px;font-size:14px}
  h1{order:2;font-size:38px}
  .sub{order:3;font-size:19px;margin-top:12px}
  .cta{order:4;margin-top:22px}
  .cta .btn{flex:1 1 0;padding:0 12px;height:54px;font-size:16px}
  .owner{order:5;position:relative;right:auto;width:auto;height:480px;margin:28px calc(var(--pad) * -1) 0;border-radius:0}
  .o-img{background-position:50% 8%}
  .foot{padding:32px 0 84px}
  .ask{padding-top:24px}
  .ask-ph figcaption{top:14px;bottom:auto}
  .pinc{order:7;position:relative;bottom:auto;width:76%;margin:26px auto 0;align-self:center}
  .pinc img{width:100%;height:auto;aspect-ratio:3/4}
  .talk-g{display:block}
  .done-h{flex-direction:column;align-items:flex-start}
  .done-h .go{display:none}
  .rail{gap:16px;padding:24px var(--pad) 12px}
  .cc{flex-basis:250px}
  .ci{height:330px}
  .ask-g{display:flex;flex-direction:column-reverse;align-items:stretch;gap:28px;padding:28px 14px;border-radius:30px}
  .ask-st{height:auto}
  .ask-ph{position:relative;width:100%;height:420px}
  .ask-st .phone{position:relative;right:auto;top:auto;width:100%;margin:-110px 0 0}
  .m-in,.m-in img{width:100%;height:190px}
  .ask-t h2{font-size:36px}
  .tel{font-size:32px}
  .foot-g{grid-template-columns:1fr}
  .bar{left:0;right:0;bottom:0;border-radius:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .bar .btn{flex:1;height:52px}
  .cg{display:flex;flex-direction:column;gap:40px}
  .c-ph{min-height:0;height:460px;margin:0 calc(var(--pad) * -1);border-radius:0}
  .c-ph .c-b{right:16px;bottom:-24px;width:120px;height:156px}
  .c-ph .c-bt{right:96px;bottom:110px}
  .c-t h1{font-size:34px}
  .c-t .ba{margin-left:28px}
  .qa-h h1{font-size:38px}
  .qa-h p{font-size:18px}
  .qa{grid-template-columns:1fr;gap:26px}
  .qa .ba{margin-left:28px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1!important}}
.rm *,.rm *::before,.rm *::after{animation:none!important;transition:none!important}
.rm .rv{opacity:1}
.ask-s{grid-template-columns:minmax(0,1fr) 360px}
.ask-o{width:360px;height:470px;object-fit:cover;object-position:50% 0;border-radius:30px}
@media (max-width:900px){.ask-o{width:100%;height:420px}}
.pw{position:relative;display:block}
.c-ph .c-a{width:100%;height:100%;object-fit:cover;border-radius:30px}
.t-more{align-self:flex-start;margin-top:26px}
@media (max-width:900px){.qa .ba img{width:88px;height:76px}.c-ph{height:460px}.c-ph .c-a{border-radius:0}}

/* 365생생 첫 판(10-29): 첫 화면 큰 사진 = 로봇청소기장 현장 · 갈래 구역 */
.owner .pin{z-index:2}
.o-cap{position:absolute;z-index:2;left:18px;bottom:18px;display:flex;flex-direction:column;padding:10px 16px;border-radius:14px;background:rgba(255,255,255,.88);font-size:13.5px;font-weight:800;color:var(--mute);line-height:1.4}
.o-cap b{font-size:18px;color:var(--ink)}
.cy{font-size:16px;line-height:1.45;color:var(--mute)}
.cy b{color:var(--c)}
@media (max-width:900px){
  .o-cap{left:12px;bottom:12px}
}
.qgs{display:flex;flex-direction:column;gap:56px}
.qa-gh{font-size:32px;margin-bottom:22px;scroll-margin-top:90px}
@media (max-width:900px){.qgs{gap:40px}.qa-gh{font-size:26px}}
@media (max-width:900px){.rc small{white-space:normal;overflow:visible}.a-t b{font-size:26px}}

/* 보강판(10-30): 큰 글자가 이끄는 첫 화면 · 전후 밀어 보기 · 전·작업 중·후 · 문짝·경첩 · 손님 말 · 동네 막대 */
.lg-i{width:34px;height:34px}
.hero2 .copy{justify-content:center}
.hq{position:relative;font-size:21px;font-weight:800;line-height:1.5;color:var(--ink);max-width:600px;margin:0 0 18px;padding-left:20px;border-left:4px solid var(--c2)}
.hero2 h1 .l1{font-size:72px;line-height:1.05}
.hero2 h1 .l2{font-size:150px;line-height:.98;letter-spacing:-.04em}
.hero2 .sub{font-size:20px;max-width:560px;margin-top:18px}
.talk-g{align-items:stretch}
.cmp{position:relative;min-height:560px;border-radius:30px;overflow:hidden;background:#ECE8F3;user-select:none;-webkit-user-select:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-b{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cmp-l{position:absolute;top:0;bottom:0;left:var(--p);width:4px;margin-left:-2px;background:#fff;pointer-events:none}
.cmp-l i{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px #fff}
.cmp-l i::before,.cmp-l i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-7px;border:7px solid transparent}
.cmp-l i::before{left:7px;border-right-color:#fff}.cmp-l i::after{right:7px;border-left-color:#fff}
.cmp-t{position:absolute;top:18px;font-size:16px;font-weight:800;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.9);pointer-events:none}
.t-b{left:18px}.t-a{right:18px;color:var(--c)}
.cmp-r{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.cmp figcaption{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:14px;font-weight:800;color:var(--ink);background:rgba(255,255,255,.9);padding:6px 14px;border-radius:999px;white-space:nowrap;pointer-events:none}
.trip{padding:var(--sec) 0}
.door{padding:var(--sec) 0}
.door-g{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:80px;align-items:stretch}
.d-t{display:flex;flex-direction:column;justify-content:center}
.door h2{font-size:68px}
.d-s{font-size:20px;margin-top:22px;max-width:620px}
.d-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px;max-width:620px}
.d-pair img{aspect-ratio:auto;height:220px;border-radius:18px}
.d-pair figcaption{font-size:15.5px}
.d-stage{position:relative;min-height:680px}
.d-big{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:30px}
.d-tag{position:absolute;right:20px;bottom:20px;display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;background:rgba(255,255,255,.9);padding:8px 16px;border-radius:14px}
.d-tag b{font-size:14px;color:#fff;background:var(--c);padding:2px 10px;border-radius:999px}
.d-in{position:absolute;left:-56px;width:170px}
.d-in img{width:170px;height:170px;object-fit:cover;border-radius:16px;outline:6px solid #fff}
.d-in figcaption{position:absolute;left:10px;top:10px;font-size:13px;font-weight:800;color:#fff;background:var(--c2-d);padding:2px 10px;border-radius:999px}
.d-in1{top:56px;transform:rotate(-3deg)}.d-in2{top:262px;transform:rotate(2deg)}
.voice{padding:var(--sec) 0}
@media (max-width:1240px){
  .hero2 h1 .l1{font-size:58px}.hero2 h1 .l2{font-size:118px}
  .door-g{grid-template-columns:minmax(0,1fr) 440px;gap:64px}
  .door h2{font-size:56px}
}
@media (max-width:900px){
  .hq{order:2;font-size:17px;padding-left:14px;margin-bottom:14px}
  .hero2 h1 .l1{font-size:40px}.hero2 h1 .l2{font-size:88px}
  .hero2 .sub{font-size:17px}
  .talk-g{display:flex;flex-direction:column;gap:28px}
  .cmp{min-height:0;aspect-ratio:1/1;margin:0 calc(var(--pad) * -1);border-radius:0}
  .door-g{display:flex;flex-direction:column-reverse;gap:30px}
  .door h2{font-size:40px}
  .d-s{font-size:17px}
  .d-pair img{height:150px}
  .d-stage{min-height:0;height:440px;margin:0 calc(var(--pad) * -1)}
  .d-big{border-radius:0}
  .d-in{left:auto;right:14px;width:104px}.d-in img{width:104px;height:104px;outline-width:4px}
  .d-in1{top:14px}.d-in2{top:138px}
  .d-tag{left:14px;right:auto;bottom:14px;font-size:15px}
  .m-board .b3:nth-of-type(6) b,.m-board .b3:nth-of-type(7) b{display:none} /* 폰: 강동·광명 이름표가 서초·영등포와 겹쳐 숨김(막대는 그대로) */
}
.c-ph .c-d{position:absolute;left:-30px;top:-30px;width:150px;height:150px;object-fit:cover;border-radius:16px;border:6px solid #fff;transform:rotate(-3deg)}
.c-ph .c-dt{position:absolute;left:-14px;top:-40px;z-index:2;background:var(--c);color:#fff;font-size:13px;font-weight:800;padding:3px 10px;border-radius:8px}
@media (max-width:900px){.c-ph .c-d{left:16px;top:16px;width:104px;height:104px}.c-ph .c-dt{left:24px;top:8px}}
/* R23-5 (창재님 10-29): 아래 고정 문자·전화 줄은 늘 보이게 — 첫 화면 버튼이 보여도 숨기지 않음 */
/* 10-31 블로그 강점 순서: 2위 타공 없이 두 쌍, 3위 기준 */
.nh-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:30px}
.nh-g .d-pair{margin-top:0;max-width:none}
.rule{padding:72px 0;background:#fff}
.rule-g{max-width:860px}
.rule-q{font-size:clamp(28px,4.4vw,46px);font-weight:800;line-height:1.3;margin:10px 0 26px;letter-spacing:-.02em}
@media (max-width:760px){.nh-g{grid-template-columns:1fr;gap:20px}.rule{padding:52px 0}.rule-l li{font-size:16px}}

/* ── PC 바탕 깊이(창재님 10-31 「웹에서 보면 배경이 모두 밋밋해 보여」) ──
   폰은 그대로. 넓은 화면에서만: 보라·청록·노랑 빛이 겹친 바탕 + 옅은 타일 줄눈 격자 + 구역마다 현장 사진을 흐리게 깐 띠 */
@media (min-width:1024px){
  body{background:
      radial-gradient(1100px 640px at 92% -8%,rgba(244,162,107,.22),transparent 62%),
      radial-gradient(860px 600px at -8% 30%,rgba(109,40,217,.14),transparent 60%),
      radial-gradient(900px 700px at 108% 66%,rgba(253,230,138,.38),transparent 62%),
      radial-gradient(900px 620px at 6% 98%,rgba(244,162,107,.14),transparent 60%),
      #F5F0FF;background-attachment:fixed}
  body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6;
    background:linear-gradient(rgba(60,30,120,.06) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(60,30,120,.06) 1px,transparent 1px) 0 0/40px 40px;
    -webkit-mask:radial-gradient(ellipse at 50% 40%,transparent 38%,#000 88%);mask:radial-gradient(ellipse at 50% 40%,transparent 38%,#000 88%)}
  main>section{position:relative;isolation:isolate}
}

/* ── 4차(11-02) 창재님 「글이 많고 · 움직임 적고 · 보라+초록 · 아래 바 이상」 ──
   색: 보라 한 가지(--c) + 살구(--c2, 형광펜·작은 점만). 초록·청록 없음. 바탕 밝게. */
:root{--c2:#F4A26B;--c2-d:#B4531A;--pt:#FFD3AE;--bg:#FBF9FF;--tint:#F1EBFD;--tint2:#FFF1E6;--line:#E6DEF6}
body{background:var(--bg)}
@media (min-width:1024px){
  body{background:radial-gradient(1000px 620px at 94% -10%,rgba(109,40,217,.10),transparent 62%),radial-gradient(900px 640px at -10% 70%,rgba(244,162,107,.12),transparent 62%),var(--bg);background-attachment:fixed}
  body::after{opacity:.35}
}
.bq{position:relative;background:#fff;border-radius:22px 22px 22px 6px;padding:13px 18px 14px;font-size:17px;font-weight:800;line-height:1.45}
.ba{margin:14px 0 0 34px;background:var(--c);color:#fff;border-radius:22px 22px 6px 22px;padding:12px 20px 15px}
.ba b{display:block;font-size:32px;line-height:1.2;letter-spacing:-.02em}
.ba span{display:block;font-size:15.5px;color:rgba(255,255,255,.9);margin-top:2px}
.d-pair{text-decoration:none}
.d-pair img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:20px}
.d-pair figure{position:relative}
.d-pair figcaption{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:16px;font-weight:800}
.d-pair figcaption b{font-size:13px;color:#fff;background:var(--c);padding:3px 11px;border-radius:999px}
.d-pair figure:first-child figcaption b{background:#8B7FA8}
.kick{color:var(--c)}
.kick::before{background:var(--c2)}
.go{border-bottom-color:var(--c2)}

/* 글 움직임: 한 단어씩 · 형광펜 · 숫자 */
.wd .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wd .w>span{display:inline-block}
.js:not(.rm) .wd .w>span{transform:translateY(105%);transition:transform .7s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.js:not(.rm) .wd.on .w>span{transform:none}
.hl{background:linear-gradient(transparent 60%,var(--pt) 60%,var(--pt) 94%,transparent 94%) no-repeat 0 0/100% 100%;padding:0 .04em}
.js:not(.rm) .wd .hl{background-size:0% 100%;transition:background-size .8s var(--ease);transition-delay:calc(var(--n,4) * 70ms + 250ms)}
.js:not(.rm) .wd.on .hl{background-size:100% 100%}
.wd .hl .w{overflow:visible}

/* 머리 · 첫 화면 */
.hq{border-left:0;padding-left:0;font-size:20px;color:var(--ink);max-width:560px;margin-bottom:22px}
.hq .lab{color:var(--c);font-size:15px;margin-bottom:6px}
.hero2 h1{margin-top:0}
.hero2 h1 .l1{font-size:64px}
.hero2 h1 .l2{font-size:156px}
.nums{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:19px;color:var(--mute);margin-top:22px}
.nums b{font-size:34px;color:var(--ink);letter-spacing:-.02em;margin-left:4px}
.nums i,.d-tag i,.pr-t i{font-style:normal;font-variant-numeric:tabular-nums}
.owner{display:block;text-decoration:none}
.pin>i{background:var(--c)}
.pinc{text-decoration:none}
.pc-t{display:block;font-size:14px;font-weight:800;color:var(--mute);margin-top:8px}

/* 로봇청소기장: 전후 + 세 낱말 */
.cmp-t{font-size:15px}
.t-b{color:#6B6280}
.t-side h2{margin-bottom:28px}
.chips{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.chips li{display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:18px;color:var(--mute)}
.chips b{font-size:22px;color:var(--c);width:64px;flex:none}

/* 타공 없이 */
.trip h2{max-width:900px}
.nh-g{margin-top:34px}
.pr-t{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:20px;font-weight:800;margin-top:4px;color:var(--ink)}
.pr-t b{color:var(--c);font-size:26px}
.pr-t small{font-size:14px;color:var(--mute);font-weight:400}
.nh-g .d-pair{transition:transform .3s var(--ease)}
.nh-g .d-pair:hover{transform:translateY(-4px)}

/* 기준: 한 문장 */
.rule{background:transparent;padding:88px 0}
.rule-g{max-width:1100px;text-align:center}
.rule-q{font-size:clamp(30px,5vw,60px);margin:0}
.rule-by{margin-top:18px;font-size:16px;color:var(--mute);font-weight:800}

/* 문짝 */
.d-s{font-size:21px;font-weight:800;color:var(--mute)}
.d-stage{display:block;text-decoration:none}
.d-in figcaption{background:#6B6280}

/* 인덕션 넘기기 */
.ok{background:var(--c)}
.cy{display:none}

/* 고객 후기 — Threads식 타래(가게 이름·마크만, 손님 프로필·숫자 없음) */
.voice{padding:var(--sec) 0}
.vo-g{display:grid;grid-template-columns:minmax(0,1fr) 640px;gap:64px;align-items:center}
.vo-t{font-size:30px;line-height:1.3;letter-spacing:-.01em}
.vo-s{display:none}
.th-dots{display:flex;gap:8px;margin-top:26px}
.th-dots button{width:10px;height:10px;padding:0;border:0;border-radius:999px;background:#D9D0EC;cursor:pointer;transition:width .3s var(--ease),background-color .3s}
.th-dots button[aria-selected="true"]{width:30px;background:var(--c)}
.th{position:relative;background:#fff;border-radius:28px;padding:26px 26px 8px;box-shadow:0 24px 60px -30px rgba(60,30,120,.28);min-height:520px}
.tp{position:relative;display:flex;gap:14px;text-decoration:none;color:inherit;padding-bottom:22px}
.tp-av{position:relative;flex:none;width:40px;display:flex;flex-direction:column;align-items:center}
.tp-av img,.tp-av i{width:40px;height:40px;border-radius:50%}
.tp-av i{display:grid;place-items:center;font-style:normal;font-weight:800;font-size:16px;color:var(--c);background:#EFE9FB}
.tp-av::after{content:"";flex:1;width:2px;margin-top:8px;background:#E4DDF2;border-radius:2px}
.tp-b{min-width:0;flex:1;display:flex;flex-direction:column;gap:10px}
.tp-hd{display:flex;align-items:baseline;gap:8px}
.tp-hd b{font-size:16px}
.tp-hd small{font-size:14px;color:var(--mute)}
.tp-tx{font-size:21px;line-height:1.55;font-weight:400;color:var(--ink)}
.tp-tx mark{background:linear-gradient(transparent 55%,var(--pt) 55%,var(--pt) 95%,transparent 95%) no-repeat 0 0/100% 100%;color:inherit;font-weight:800;padding:0 .05em}
.tp-ph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.tp-ph img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px}
.tp-ph img:first-child{filter:saturate(.85)}
.tp-ft{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:800;color:var(--c)}
.tp-ft svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.tp:hover .tp-ft svg{transform:translateX(4px)}
/* 한 번에 한 글: 지금 글 + 다음 글 머리만 살짝 */
.th.one .tp{display:none}
.th.one .tp.on{display:flex}
.th.one .tp.next{display:flex;max-height:74px;overflow:hidden;opacity:.45;pointer-events:none;-webkit-mask:linear-gradient(#000 30%,transparent);mask:linear-gradient(#000 30%,transparent)}
.th.one .tp.next .tp-ph,.th.one .tp.next .tp-ft{display:none}
.th.one .tp.on{animation:rise .5s var(--ease) both}
.th.live .tp.on .tw2{display:inline;opacity:0;animation:wfade .35s var(--ease) both;animation-delay:calc(var(--i) * 55ms + 200ms)}
.th.live .tp.on mark.tw2{animation:wfade .35s var(--ease) both,mark .7s var(--ease) both;animation-delay:calc(var(--i) * 55ms + 200ms),calc(var(--n) * 55ms + 400ms)}
.th.live .tp.on .tp-ph img{animation:rise .5s var(--ease) both;animation-delay:calc(var(--n) * 55ms + 300ms)}
.th.live .tp.on .tp-ph img+img{animation-delay:calc(var(--n) * 55ms + 450ms)}
.th.all .tp{display:flex}
@keyframes wfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mark{from{background-size:0% 100%}to{background-size:100% 100%}}

/* 다니는 곳 — 동네 이름 띠(3D 판 대신) */
.area{padding:var(--sec) 0;overflow-x:clip}
.area-h{text-align:center}
.ar-q{font-size:20px;font-weight:800;color:var(--mute);margin-bottom:10px}
.towns{display:flex;flex-direction:column;gap:6px;margin:36px 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.tw{display:flex;align-items:center;gap:20px;padding:0 var(--pad)}
.tw-k{flex:none;width:56px;font-size:14px;font-weight:800;color:var(--c);letter-spacing:.04em}
.tw-m{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tw-m p{display:flex;width:max-content;gap:0}
.tw-m b,.tw-m span{font-size:44px;font-weight:800;line-height:1.3;letter-spacing:-.02em;padding:0 22px;white-space:nowrap}
.tw-m b{color:var(--c)}
.tw-m span{color:transparent;-webkit-text-stroke:1.2px #B7A6E0}
.js:not(.rm) .tw-m p{animation:slide var(--t) linear infinite}
.js:not(.rm) .tw.r .tw-m p{animation-direction:reverse}
.rm .tw-m p{flex-wrap:wrap;width:auto}
.ar-cta{text-align:center}
@keyframes slide{to{transform:translateX(-50%)}}

/* 연락 */
.ask-g{background:var(--tint)}
.m-q{font-weight:800}

/* 아래 고정 바 — 두 칸 같은 크기, 위 경계 한 줄, 홈 막대 여백 */
.bar{gap:8px}
.bar a,.bar .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;font-size:16px;font-weight:800;text-decoration:none}
.bar .call,.bar .btn.line{background:#fff;color:var(--c);border:1.5px solid var(--c)}
.bar .sms,.bar .btn.fill{background:var(--c);color:#fff;border:1.5px solid var(--c)}
.bar svg{width:18px;height:18px}

@media (max-width:1240px){
  .hero2 h1 .l1{font-size:54px}.hero2 h1 .l2{font-size:124px}
  .vo-g{grid-template-columns:minmax(0,1fr) 560px;gap:40px}
}
@media (max-width:900px){
  .hq{font-size:17px;margin-bottom:14px}
  .hq .lab{font-size:14px}
  .hero2 h1 .l1{font-size:38px}.hero2 h1 .l2{font-size:92px}
  .nums{order:3;font-size:16px;gap:4px 18px;margin-top:14px}
  .nums b{font-size:26px}
  .hero2 .cta,.top .callb{display:none} /* 폰은 아래 고정 바가 같은 두 버튼 */
  .o-cap{display:none}
  .owner{height:420px;margin-top:22px}
  .pinc{width:62%}
  .t-side h2{margin-bottom:18px}
  .chips li{font-size:16px;padding:11px 0}
  .chips b{font-size:19px;width:52px}
  .nh-g{grid-template-columns:1fr;gap:26px;margin-top:22px}
  .pr-t{font-size:17px}.pr-t b{font-size:22px}
  .d-pair{gap:10px}
  .d-pair figcaption{font-size:14px}
  .rule{padding:56px 0}
  .d-s{font-size:17px}
  .vo-g{display:block}
  .vo-t{font-size:24px}
  .vo-s{font-size:16px}
  .th-dots{margin:16px 0 18px}
  .th{margin:0 -8px;padding:18px 16px 4px;border-radius:22px;min-height:0}
  .tp{gap:10px}
  .tp-av{width:34px}.tp-av img,.tp-av i{width:34px;height:34px}
  .tp-tx{font-size:17px}
  .tp-ph img{aspect-ratio:1/1}
  .tw{gap:12px}
  .tw-k{width:34px;font-size:13px}
  .tw-m b,.tw-m span{font-size:28px;padding:0 13px}
  .towns{margin:24px 0 22px;padding:12px 0}
  .area .wrap{padding:0 var(--pad)}
  .ask .wrap{padding:0 12px}
  .bar{left:0;right:0;bottom:0;border-radius:0;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);box-shadow:none;border-top:1px solid var(--line)}
  .bar a,.bar .btn{flex:1 1 0;height:50px;padding:0 12px;border-radius:14px;font-size:17px}
  .bar.away{transform:none;visibility:visible} /* 폰: 늘 보이게(창재님 10-29) — 대신 첫 화면 버튼을 뺌 */
  .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
/* 11-02 v6: 기준 구역 PC 오른쪽 빈칸 → 작업 중 사진 */
.rule-g{max-width:1440px;text-align:left;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.rule-ph{position:relative;margin:0}
.rule-ph img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:26px}
.rule-ph figcaption{position:absolute;left:16px;bottom:16px;font-size:14px;font-weight:800;background:rgba(255,255,255,.9);padding:6px 12px;border-radius:10px}
@media (max-width:900px){.rule-g{grid-template-columns:1fr;gap:24px}}

/* hero8 */
/* 돌직구 타이포 첫 화면 — 하부장 사진 한 장 + 말풍선 + 문짝 도장 + 14cm 치수선, 각진 버튼 */
.h8 { --bh: 'Black Han Sans', 'Noto Sans KR', sans-serif; position: relative; background: var(--bg); padding: 0 0 16px; overflow: hidden; }
.h8-stage { position: relative; height: calc(100svh - 58px - 76px - 125px); min-height: 380px; max-height: 560px; background: #2B3D57; }
.h8-sc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.h8-in { opacity: 0; transition: opacity .2s; }
.h8.s3 .h8-in { opacity: 1; }
.h8-door { transform-box: view-box; transform-origin: 600px 330px; transition: transform 1s cubic-bezier(.5, 0, .2, 1); }
.h8.s3 .h8-door { transform: scaleX(.5) skewY(-3deg); }
.h8.s5 .h8-door { transform: none; }
/* 11-02 v6.2: 「됩니다.」 도장은 문짝이 아니라 제목 뒤 — 「로봇청소기장,」을 읽은 다음에 찍힌다 */
.h8-ok { display: inline-block; margin-top: 8px; padding: 2px 14px 4px; font-size: .78em; color: var(--c); background: #fff; border: 5px solid var(--c); border-radius: 6px; text-shadow: none; transform: rotate(-4deg) scale(1.6); opacity: 0; }
.h8.s2 .h8-ok { opacity: 1; transform: rotate(-4deg) scale(1); transition: transform .32s cubic-bezier(.3, 1.4, .5, 1), opacity .12s; }
.rm .h8-ok { opacity: 1; transform: rotate(-4deg); }
.h8-robot { transform-box: view-box; transform: translate(250px, 130px) scale(1.25); transform-origin: 425px 560px; opacity: 0; }
.h8.s4 .h8-robot { opacity: 1; transform: none; transition: transform 1.5s cubic-bezier(.3, .1, .2, 1), opacity .3s; }
.h8-dim line { stroke: #fff; stroke-width: 4; }
.h8-dim rect { fill: var(--c); }
.h8-dim text { font: 800 26px 'Noto Sans KR', sans-serif; fill: #fff; text-anchor: middle; }
.h8-dim { opacity: 0; transition: opacity .5s; }
.h8.s4 .h8-dim { opacity: 1; transition-delay: 1.2s; }
.h8-say { position: absolute; left: 14px; right: 40px; top: 14px; margin: 0; padding: 12px 14px 13px; background: #fff; border-radius: 4px 18px 18px 18px; box-shadow: 0 14px 30px -14px rgba(20, 10, 50, .5); font-size: 15px; line-height: 1.45; color: var(--ink); min-height: 4.4em; }
.h8-say::after { content: ''; position: absolute; left: 34px; bottom: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.h8-say b { display: block; font-size: 12px; color: var(--mute); margin-bottom: 3px; }
.h8-say .cur { display: inline-block; width: 2px; height: 1em; background: var(--c); vertical-align: -2px; margin-left: 1px; animation: h8blink .8s steps(1) infinite; }
@keyframes h8blink { 50% { opacity: 0; } }
.h8-copy { position: relative; z-index: 2; padding: 0 20px; margin-top: -40px; }
.h8-t { margin: 0; font-family: var(--bh); font-weight: 400; font-size: 52px; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); text-shadow: 0 2px 0 var(--bg), 0 -2px 0 var(--bg); }
.h8-line { margin: 10px 0 14px; font-size: 16px; font-weight: 800; color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.h8-line small { font-size: 13px; font-weight: 400; color: var(--mute); }
.h8-cta { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }
/* 11-02: 폰은 아래 바가 늘 보이므로(10-29) 첫 화면 버튼 둘을 겹쳐 두지 않는다 */
@media (max-width: 760px) { .h8-cta { display: none; } .h8-line { margin-bottom: 0; } }
.h8-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 0; font-weight: 800; font-size: 16px; text-decoration: none; }
.h8-b svg { width: 18px; height: 18px; }
.h8-b.fill { background: var(--c); color: #fff; box-shadow: 5px 5px 0 var(--ink); }
.h8-b.line { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.h8-b:active { transform: translate(2px, 2px); box-shadow: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 761px) {
  .h8 { display: grid; grid-template-columns: minmax(0, 820px) minmax(380px, 1fr); grid-template-rows: minmax(0, 1fr); height: calc(100vh - 68px); min-height: 640px; max-height: 900px; padding: 0; }
  .h8-stage { height: auto; max-height: none; }
  .h8-say { left: 40px; right: auto; top: 36px; max-width: 420px; font-size: 18px; padding: 16px 20px; }
  .h8-say b { font-size: 14px; }
  .h8-copy { margin: 0; padding: 0 32px 24px 56px; align-self: center; }
  .h8-t { font-size: clamp(76px, calc((100vw - 900px) / 4.6), 124px); line-height: 1.02; text-shadow: none; }
  .h8-ok { margin-top: 14px; border-width: 7px; padding: 0 22px 6px; }
  .h8-t .h8-l2 { display: block; }
  .h8-line { font-size: 21px; margin: 34px 0 30px; flex-direction: column; gap: 8px; }
  .h8-line small { font-size: 15px; }
  .h8-cta { grid-template-columns: auto auto; justify-content: start; gap: 14px; }
  .h8-b { height: 60px; padding: 0 28px; font-size: 18px; }
}
/* /hero8 */

/* 11-02 게시글 본문(블로그 원글 대신) */
.cbody{max-width:720px;margin:36px auto 8px;padding:0 20px;font-size:17px;line-height:1.8;color:var(--ink)}
.cbody p{margin:0}
.cbody p+p{margin-top:14px}
@media (max-width:760px){.cbody{margin-top:24px;font-size:16px}}

/* ── 11-02 저녁 업그레이드(2단계): 기준 = 보라 띠 한 문장 · 인덕션 레일 → 10월 달력 칸 사진 피드 · 장식 줄표·짧은 줄 0 ── */
.kick::before{content:none!important;display:none!important}
.rule{background:var(--c)!important;color:#fff;padding:96px 0!important}
.rule .rule-q{color:#fff}.rule .rule-q .hl{color:#FFD9BF;background:none}
.rule .rule-by{color:#DCCDF7}
.rule .rule-ph figcaption{color:#DCCDF7}
.cal .mon{display:flex;align-items:baseline;gap:12px;margin:6px 0 14px}
.cal .mon b{font-size:46px;color:var(--c);letter-spacing:-.04em;line-height:1}
.cal .mon span{font-size:16px;color:var(--mute)}
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.mgrid .wd7{font-size:12px;color:var(--mute);text-align:center;padding:4px 0 8px}
.mc{position:relative;aspect-ratio:1/1;border-radius:6px;background:var(--tint);overflow:hidden;font-size:12px;color:#B3A9C8;display:block}
.mc span{position:absolute;left:6px;top:4px}
.mc.has img{width:100%;height:100%;object-fit:cover}
.mc.has span{left:auto;right:6px;color:#fff;font-weight:800;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.mc.has::after{content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:6px;transition:border-color .2s}
.mc.has:hover::after{border-color:var(--c)}
.mc.empty{background:transparent}
@media(min-width:761px){.mgrid{gap:8px}.mc{border-radius:10px}.mc span{font-size:14px;left:10px;top:8px}.mc.has span{right:10px}.cal .mon b{font-size:64px}}
@media(min-width:761px){.cal .mgrid{max-width:820px}}
@media(min-width:761px){.cal .mgrid,.cal .mon{max-width:820px;margin-left:auto;margin-right:auto}}
@media(min-width:761px){.cal .mgrid,.cal .mon{max-width:none;margin-left:0;margin-right:0}.mgrid{gap:10px}}
.mc:not(.has):not(.empty){background:transparent;border:1px dashed var(--line)}