/* HP-1b moiday.kr 회사 홈페이지(대표 2026-11-03 · 시안 design/drafts/homepage/index.html 그대로 · GAP D-256).
   시안 <style> 를 옮겼다 — 시안 전용(위 검정 띠 · 아래 노란 메모)만 뺐고, 인라인 style 넷은 아래 "시안 인라인 → 클래스" 로.
   움직임은 전부 prefers-reduced-motion 이면 끈다(아래 · 시안 규칙 + 폰 기울임 · 카드 떠오름 · 사진 확대). */
/* 레이아웃: 한 장 스크롤 대표 사이트 — 첫 화면(큰 글자 + 떠 있는 폰 + 날아다니는 풍선 친구) → 글자 띠 → "왜 모이데이" 역할 탭(지금까지 ↔ 모이데이) → 기능 벤토(마우스 따라 빛나는 테두리) → 고양이 줄 → 생일 광고(어두운 띠 · 전광판 사진) → 함께해요 + 문의 양식 → 회사 정보. 앱 토큰(시그니처 파랑 · 연하늘 · zinc · 풍선 노랑 · rose) 그대로 · 밝은 한 가지 모양 */
:root{
  --sig:#2891FE; --sigInk:#1A6FD6; --sigTint:#EAF3FF; --sky2:#CFE4FF; --sigDeep:#0E5BC2;
  --ink:#141418; --sub:#4B4B55; --mute:#7A7A85; --line:#E6E6EB; --z50:#FAFAFB; --z100:#F3F3F6; --z900:#18181B;
  --yellow:#FFC53D; --pointTint:#FEF3C7; --pointInk:#92400E; --rose:#E11D48; --roseTint:#FFF1F2;
  --lav:#EDE7FF; --mint:#DDF6EA; --peach:#FFE8D6;
  --display:"Jua","Noto Sans KR",system-ui,sans-serif;
  --body:"Pretendard","Noto Sans KR",system-ui,-apple-system,sans-serif;
  --r:24px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
.in{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--sky2);outline-offset:3px;border-radius:8px}

/* 머리 */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid rgba(0,0,0,.05)}
.top .in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.top img{height:36px;width:auto;display:block}
.nav{display:flex;gap:4px;align-items:center;font-size:14.5px;font-weight:600;color:var(--sub)}
.nav a{text-decoration:none;padding:8px 12px;border-radius:999px;transition:background .15s}
.nav a:hover{background:var(--z100);color:var(--ink)}
.nav .cta{color:#fff;background:var(--sig);padding:9px 16px;margin-left:6px}
.nav .cta:hover{background:var(--sigInk);color:#fff}
@media (max-width:720px){.nav a:not(.cta){display:none}}

/* 첫 화면 */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 500px at 15% 0%,#FFF1F2 0%,transparent 60%),
  radial-gradient(900px 600px at 95% 10%,#EAF3FF 0%,transparent 60%),
  linear-gradient(180deg,#FBFCFF 0%,#fff 100%)}
.hero .in{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;min-height:620px;padding-block:56px 40px;position:relative;z-index:2}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--sigInk);background:#fff;border:1.5px solid var(--sky2);padding:6px 12px 6px 8px;border-radius:999px;margin-bottom:18px;box-shadow:0 4px 14px rgba(40,145,254,.10)}
.kicker i{width:8px;height:8px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 3px #DCFCE7}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6.2vw,72px);line-height:1.12;margin:0 0 18px;letter-spacing:-1px;text-wrap:balance}
.hero h1 .g{background:linear-gradient(92deg,#2891FE 0%,#7C6CF6 55%,#E11D48 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:18px;color:var(--sub);margin:0 0 28px;max-width:26em}
.store{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.store img{height:54px;width:auto;display:block;transition:transform .15s}
.store img:hover{transform:translateY(-2px)}
.soon{font-size:13px;font-weight:700;color:var(--sub);background:#fff;border:1.5px solid var(--line);padding:7px 13px;border-radius:999px}
.roles{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.roles a{text-decoration:none;font-size:13.5px;font-weight:700;padding:8px 13px;border-radius:999px;background:var(--z100);color:var(--sub);transition:all .15s}
.roles a:hover{background:var(--ink);color:#fff}
/* 폰 */
.stage{position:relative;min-height:560px;display:flex;justify-content:center;align-items:center}
.phone{position:relative;width:286px;aspect-ratio:420/891;border-radius:44px;background:#0F0F12;padding:9px;box-shadow:0 40px 80px -30px rgba(20,20,30,.45),0 0 0 1px rgba(0,0,0,.4);transform:rotate(-4deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.stage:hover .phone{transform:rotate(-1.5deg) translateY(-6px)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:36px;display:block}
.phone::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:86px;height:22px;background:#0F0F12;border-radius:0 0 14px 14px;z-index:2}
.chip{position:absolute;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9);border-radius:16px;padding:10px 14px;box-shadow:0 12px 30px rgba(20,20,40,.14);font-size:13.5px;font-weight:700;display:flex;gap:10px;align-items:center;z-index:3}
.chip small{display:block;font-weight:500;color:var(--mute);font-size:12px}
.chip .sq{width:34px;height:34px;border-radius:10px;flex:none}
.c1{left:-8px;top:96px;animation:bob 6s ease-in-out infinite}
.c2{right:-14px;top:230px;animation:bob 7s ease-in-out infinite reverse}
.c3{left:4px;bottom:110px;animation:bob 6.5s ease-in-out .8s infinite}
.helper{position:absolute;width:76px;height:76px;z-index:1;filter:drop-shadow(0 14px 18px rgba(20,20,40,.18))}
.h1{left:-30px;top:10px;animation:fly 9s ease-in-out infinite}
.h2{right:-24px;top:40px;width:64px;height:64px;animation:fly 11s ease-in-out 1s infinite reverse}
.h3{right:10px;bottom:20px;width:70px;height:70px;animation:fly 10s ease-in-out .5s infinite}
.h4{left:-10px;bottom:-6px;width:58px;height:58px;animation:fly 12s ease-in-out 2s infinite reverse}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fly{0%,100%{transform:translate(0,0) rotate(-3deg)}33%{transform:translate(6px,-16px) rotate(3deg)}66%{transform:translate(-5px,-6px) rotate(-2deg)}}
.hero .town{position:absolute;left:0;right:0;bottom:-30px;height:240px;background:url(home/town_s.webp) center bottom/cover no-repeat;opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}
@media (max-width:860px){.hero .in{grid-template-columns:1fr;text-align:center;min-height:0;padding-block:40px 20px}.hero p.lead{margin-inline:auto}.store,.roles{justify-content:center}.stage{min-height:600px;margin-top:10px}.phone{width:236px}.c1{left:0;top:120px}.c2{right:0;top:270px}.c3{left:0;bottom:120px}.chip{padding:8px 11px;font-size:12.5px}.h1{left:0}.h2{right:0}.hero .town{height:160px;opacity:.4}}

/* 띠 */
.marq{border-block:1px solid var(--line);background:#fff;overflow:hidden;padding:14px 0;font-family:var(--display);font-size:20px;color:var(--mute)}
.marq .track{display:flex;gap:40px;width:max-content;animation:marq 40s linear infinite}
.marq span{display:flex;align-items:center;gap:40px;white-space:nowrap}
.marq em{font-style:normal;color:var(--sig)}
@keyframes marq{to{transform:translateX(-50%)}}

/* 공통 섹션 */
section{padding-block:88px}
.eyebrow{font-size:13px;font-weight:800;color:var(--sigInk);letter-spacing:.08em;margin:0 0 8px;text-transform:uppercase}
h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.2vw,46px);line-height:1.22;margin:0 0 12px;letter-spacing:-.5px;text-wrap:balance}
.lead2{color:var(--sub);margin:0 0 40px;max-width:36em;font-size:17px}
.reveal{opacity:.001;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.c1,.c2,.c3,.helper,.marq .track,.cat img{animation:none!important}}

/* 왜 모이데이 — 역할 탭 */
.why{background:var(--z50)}
.tabs{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:28px}
.tabs button{font:inherit;font-weight:800;font-size:15px;border:0;background:transparent;color:var(--sub);padding:10px 20px;border-radius:999px;cursor:pointer;transition:all .18s}
.tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.panel{display:none;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.panel.on{display:grid}
.cmp{display:grid;gap:14px}
.box{border-radius:var(--r);padding:22px 24px;background:#fff;border:1px solid var(--line)}
.box.before{background:#fff}
.box.after{background:var(--sigTint);border-color:var(--sky2)}
.box h4{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--mute)}
.box.after h4{color:var(--sigInk)}
.box ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.box li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.55}
.box li b{font-weight:700}
.box.before li{color:var(--sub)}
.box li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--z100) center/12px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7A85' stroke-width='3' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>")}
.box.after li::before{background:var(--sig) center/12px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>")}
.vis{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/4.6;background:linear-gradient(180deg,var(--sigTint),#fff);display:flex;align-items:flex-end;justify-content:center;border:1px solid var(--line)}
.vis img{width:92%;height:auto;display:block;transform:translateY(6%)}
.vis .tag{position:absolute;top:16px;left:16px;z-index:2;background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.vis .tag i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rose);margin-right:6px}
@media (max-width:860px){.panel{grid-template-columns:1fr}.vis{aspect-ratio:4/3.6}.tabs{width:100%;justify-content:space-between}.tabs button{flex:1;padding:10px 8px;font-size:14px}}

/* 벤토 */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(190px,auto);gap:16px}
.card{--mx:50%;--my:50%;position:relative;border-radius:var(--r);background:#fff;border:1px solid var(--line);padding:24px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-width:0;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(40,145,254,.9),rgba(124,108,246,.5) 35%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(40,145,254,.08),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(20,20,40,.25)}
.card:hover::before,.card:hover::after{opacity:1}
.card h3{margin:0;font-size:19px;line-height:1.35;position:relative}
.card p{margin:0;font-size:14.5px;color:var(--sub);position:relative}
.card .who{position:absolute;top:18px;left:20px;font-size:11.5px;font-weight:800;color:var(--sigInk);background:var(--sigTint);padding:3px 9px;border-radius:999px}
.c-map{grid-column:span 4;grid-row:span 2;background:linear-gradient(160deg,#F3F8FF,#fff)}
.c-map h3,.c-map p{max-width:50%}
.c-map .art{position:absolute;right:-10px;top:-6px;width:56%;max-width:360px;aspect-ratio:1/1;background:url(home/intro_map_s.webp) center/contain no-repeat;transform:rotate(4deg)}
.c-ticket{grid-column:span 2;background:linear-gradient(160deg,#FFF7E8,#fff)}
.c-ticket .tk{position:absolute;top:18px;right:18px;width:118px;height:62px;border-radius:12px;background:var(--yellow);box-shadow:0 10px 24px rgba(255,197,61,.45);transform:rotate(8deg)}
.c-ticket .tk::before,.c-ticket .tk::after{content:"";position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#FFF7E8;transform:translateY(-50%)}
.c-ticket .tk::before{left:-7px}.c-ticket .tk::after{right:-7px}
.c-ticket .tk i{position:absolute;left:30px;right:30px;top:50%;border-top:2px dashed rgba(255,255,255,.85)}
.c-res{grid-column:span 2;background:linear-gradient(160deg,var(--lav),#fff)}
.c-res .slots{position:absolute;top:18px;right:18px;display:grid;grid-template-columns:repeat(3,38px);gap:6px}
.c-res .slots b{height:26px;border-radius:8px;background:#fff;border:1px solid var(--line);font-size:10px;font-weight:800;display:grid;place-items:center;color:var(--sub)}
.c-res .slots b.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.c-res .slots b.full{color:var(--rose);background:var(--roseTint);border-color:#FECDD3}
.c-cafe{grid-column:span 2;background:linear-gradient(160deg,var(--mint),#fff)}
.c-cafe .cal{position:absolute;top:18px;right:18px;display:grid;grid-template-columns:repeat(7,16px);gap:4px}
.c-cafe .cal i{height:16px;border-radius:5px;background:#fff;border:1px solid var(--line)}
.c-cafe .cal i.x{background:var(--ink);border-color:var(--ink)}
.c-cafe .cal i.r{background:var(--roseTint);border-color:#FECDD3}
.c-live{grid-column:span 2;background:linear-gradient(160deg,var(--roseTint),#fff)}
.c-live .bub{position:absolute;top:20px;right:18px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;padding:8px 12px;border-radius:14px 14px 4px 14px}
.c-live .bub::after{content:"";position:absolute;right:0;bottom:-8px;border:8px solid transparent;border-top-color:var(--ink);border-right:0}
.c-ad{grid-column:span 2;background:var(--z900);color:#fff;border-color:var(--z900)}
.c-ad p{color:#C9C9D1}
.c-ad .who{background:rgba(255,255,255,.12);color:#fff}
.c-ad .scr{position:absolute;top:18px;right:18px;width:70px;height:110px;border-radius:8px;background:linear-gradient(160deg,#FBCFE8,#C4B5FD 50%,#93C5FD);box-shadow:0 0 30px rgba(196,181,253,.6);display:grid;place-items:center;font-family:var(--display);font-size:11px;color:#3B2F80;text-align:center;line-height:1.2}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.c-map{grid-column:span 2;grid-row:span 1;min-height:280px}.c-map .art{width:44%;right:-4px}.c-map h3,.c-map p{max-width:56%}.c-ticket,.c-res,.c-cafe,.c-live,.c-ad{grid-column:span 1}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.c-ticket,.c-res,.c-cafe,.c-live,.c-ad,.c-map{grid-column:span 1}}

/* 고양이 */
.cats{background:linear-gradient(180deg,#fff,#F6FAFF)}
.catrow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end;margin-top:12px}
.cat{position:relative;text-align:center;padding-top:10px}
.cat img{width:100%;max-width:200px;height:auto;display:block;margin:0 auto;transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-origin:50% 100%}
.cat:hover img{transform:translateY(-10px) rotate(-3deg) scale(1.04)}
.cat .shadow{width:60%;height:14px;margin:-4px auto 0;border-radius:50%;background:radial-gradient(ellipse,rgba(20,20,40,.18),transparent 70%)}
.cat .say{position:absolute;top:-6px;left:50%;transform:translate(-50%,6px);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;white-space:nowrap;opacity:0;transition:all .25s;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.cat:hover .say{opacity:1;transform:translate(-50%,-4px)}
.cat .say::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.pills span{font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.pills span.y{background:var(--pointTint);color:var(--pointInk);border-color:#FDE68A}
@media (max-width:720px){.catrow{grid-template-columns:repeat(5,1fr);gap:4px}.cat .say{display:none}}

/* 생일 광고 */
.ad{background:#0E0E12;color:#fff;position:relative;overflow:hidden}
.ad::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at 80% 0%,rgba(124,108,246,.25),transparent 60%),radial-gradient(600px 400px at 0% 100%,rgba(40,145,254,.2),transparent 60%);pointer-events:none}
.ad .in{position:relative}
.ad .eyebrow{color:#9CC7FF}
.ad .lead2{color:#B9B9C4}
.ad-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;margin-bottom:16px}
.shot{position:relative;border-radius:22px;overflow:hidden;background:#1a1a22;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.08);transition:transform .3s}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.shot:hover img{transform:scale(1.04)}
.shot .lb{position:absolute;left:14px;bottom:14px;background:rgba(14,14,18,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700}
.shot .lb i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--yellow);margin-right:7px}
.ad-side{display:grid;grid-template-rows:1fr auto;gap:16px}
.ad-copy{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.ad-copy h3{margin:0;font-family:var(--display);font-weight:400;font-size:26px;line-height:1.3}
.ad-copy p{margin:0;color:#C9C9D1;font-size:14.5px}
.ad-copy .zones{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ad-copy .zones span{font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.1)}
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 10px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .shot{flex:0 0 260px;aspect-ratio:4/3;scroll-snap-align:start}
.ad .note{font-size:12.5px;color:#8A8A96;margin:12px 0 0}
@media (max-width:860px){.ad-grid{grid-template-columns:1fr}}

/* 함께해요 */
.partner{background:linear-gradient(180deg,#fff,var(--sigTint))}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.pcard{--mx:50%;--my:50%;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden;transition:transform .25s,box-shadow .25s}
.pcard::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:radial-gradient(240px circle at var(--mx) var(--my),rgba(40,145,254,.9),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none}
.pcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(20,20,40,.3)}
.pcard:hover::before{opacity:1}
.pcard .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--sigTint)}
.pcard h3{margin:6px 0 0;font-size:19px}
.pcard p{margin:0;font-size:14.5px;color:var(--sub)}
.pcard ul{margin:4px 0 0;padding-left:18px;font-size:14px;color:var(--sub)}
.pcard .go{margin-top:auto;padding-top:10px;font-size:14px;font-weight:800;color:var(--sigInk);text-decoration:none}
@media (max-width:820px){.pcards{grid-template-columns:1fr}}

.form{background:#fff;border:1px solid var(--line);border-radius:28px;padding:32px;display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;box-shadow:0 30px 60px -40px rgba(20,20,40,.25)}
.form .side h3{font-family:var(--display);font-weight:400;font-size:30px;margin:0 0 10px;line-height:1.25}
.form .side p{margin:0 0 6px;color:var(--sub);font-size:14.5px}
.form .side .mail{font-weight:800;color:var(--sigInk);user-select:all;font-size:16px}
.form .side .mini{margin-top:18px;display:grid;gap:8px;font-size:13.5px;color:var(--sub)}
.form .side .mini div{display:flex;gap:8px;align-items:center}
.form .side .mini i{width:6px;height:6px;border-radius:50%;background:var(--sig)}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.full{grid-column:1/-1}
label{font-size:13.5px;font-weight:700}
label .req{color:var(--rose);margin-left:2px}
input,select,textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--z100);border:1.5px solid transparent;border-radius:14px;padding:12px 14px;width:100%;transition:all .15s}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sig);background:#fff;box-shadow:0 0 0 4px var(--sigTint)}
.kinds{display:flex;gap:8px;flex-wrap:wrap}
.kinds input{position:absolute;opacity:0;width:1px;height:1px}
.kinds label{font-weight:700;font-size:14px;background:var(--z100);color:var(--sub);padding:9px 15px;border-radius:999px;cursor:pointer;transition:all .15s}
.kinds label:hover{background:var(--line)}
.kinds input:checked+label{background:var(--ink);color:#fff}
.kinds input:focus-visible+label{outline:3px solid var(--sky2);outline-offset:2px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--sub);font-weight:500}
.agree input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--sig)}
.send{grid-column:1/-1;height:56px;border:0;border-radius:999px;background:var(--sig);color:#fff;font:inherit;font-size:16.5px;font-weight:800;cursor:pointer;transition:all .15s;box-shadow:0 12px 24px -10px rgba(40,145,254,.6)}
.send:hover:not(:disabled){background:var(--sigInk);transform:translateY(-1px)}
.send:disabled{background:var(--z100);color:#A1A1AA;cursor:not-allowed;box-shadow:none}
.done{grid-column:1/-1;background:var(--sigTint);border-radius:18px;padding:22px;text-align:center;font-weight:800;color:var(--sigInk);font-size:17px}
.done span{display:block;font-weight:500;color:var(--sub);font-size:14px;margin-top:4px}
@media (max-width:820px){.form{grid-template-columns:1fr;padding:22px}form{grid-template-columns:1fr}}

/* 끝 */
.cta-end{text-align:center;padding-block:80px 70px}
.cta-end h2{font-size:clamp(30px,4.6vw,50px)}
.cta-end .store{justify-content:center;margin-top:18px}
footer{background:var(--z900);color:#C9C9D1;font-size:14px}
footer .in{padding-block:40px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .co{display:flex;flex-direction:column;gap:3px}
footer .co b{color:#fff;font-size:15px}
footer .links{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
footer .links a{color:#fff;text-decoration:none;font-weight:600}
footer small{color:#8A8A96;margin-top:6px}

/* ── 시안 인라인 → 클래스(모양 그대로) ── */
.c1 .sq{background:linear-gradient(135deg,#F9A8D4,#C4B5FD)}
.c2 .sq{background:var(--yellow);border-radius:50%}
.c3 .sq{background:var(--sigTint);display:grid;place-items:center;font-size:16px}
.vis .tag i.t-host{background:var(--sig)}
.vis .tag i.t-owner{background:#16A34A}
.shot.wide{aspect-ratio:16/9}
.store a{display:block}

/* ── 실제 페이지에만 있는 것 ── */
/* 로봇 막기 숨은 칸(사람은 안 보이고 · 탭도 안 들어간다 · Edge contact_form 이 비어 있어야 받는다) */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* 보내지 못함(지시서 — 메일 주소로 직접) */
.done.fail{background:var(--roseTint);color:var(--rose)}
.send.busy{opacity:.7;cursor:progress}
footer .links span{color:#8A8A96;font-weight:600}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .phone,.stage:hover .phone,.card,.card:hover,.pcard,.pcard:hover,.shot img,.shot:hover img,.cat img,.cat:hover img,.store img,.store img:hover,.send{transition:none!important;transform:none!important}
  .phone{transform:rotate(-4deg)!important}
  .cat .say{transition:none}
}