/* medigeo — 브랜드 마케팅 사이트 디자인 시스템 (다크 프리미엄, 오리지널) 레퍼런스에서 '기법·완성도 수준'만 참조 — 색·타이포·컴포넌트는 medigeo 오리지널. */ :root{ --bg:#060910; --bg-2:#0b1120; --panel:#0e1930; --accent:#2766f8; --accent-hi:#5aa0ff; --accent-2:#1751d9; --accent-d:#0c40b5; --glow:#0037b8; --ink:#ffffff; --ink-inverse:#08101f; --success:#a9c6ff; --error:#ffb4b4; --mut:rgba(255,255,255,.68); --mut-2:rgba(255,255,255,.56); --mut-3:rgba(255,255,255,.24); --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --glass:rgba(255,255,255,.05); --glass-2:rgba(255,255,255,.08); --accent-wash:rgba(39,102,248,.14); --accent-wash-2:rgba(39,102,248,.06); --accent-line:rgba(39,102,248,.48); --accent-glass:rgba(39,102,248,.18); --r-lg:4rem; --r-md:3rem; --r-sm:1.6rem; --r-pill:9rem; --wrap:144rem; --gut:clamp(2rem,5vw,4rem); --space-1:.4rem; --space-2:.8rem; --space-3:1.2rem; --space-4:1.6rem; --space-5:2rem; --space-6:2.4rem; --space-8:3.2rem; --space-10:4rem; --space-12:4.8rem; --space-16:6.4rem; --space-20:8rem; --space-24:9.6rem; --text-sm:1.4rem; --text-md:1.6rem; --text-brand:2.2rem; --measure-compact:40rem; --target-min:4.4rem; --f-kr:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","맑은 고딕","Malgun Gothic",sans-serif; --f-lat:"Segoe UI",Arial,var(--f-kr); --ease:cubic-bezier(.4,0,.2,1); --ease-2:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box} [hidden]{display:none!important} html{font-size:62.5%;-webkit-text-size-adjust:100%;scroll-behavior:auto;overflow-x:clip} html{scrollbar-color:var(--line-2) var(--bg)} ::-webkit-scrollbar{width:1.2rem} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--line-2);border:.3rem solid var(--bg);border-radius:var(--r-pill)} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-kr); font-size:1.7rem;line-height:1.6;font-weight:400;word-break:keep-all; -webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img,video{max-width:100%;display:block} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} ul,ol{margin:0;padding:0;list-style:none} em{font-style:normal} ::selection{background:var(--accent);color:var(--ink)} .font-lat{font-family:var(--f-lat);letter-spacing:.01em} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)} h1,h2,h3{text-wrap:balance} p,li{text-wrap:pretty} /* ---------- 커서 글로우 (ambient) ---------- */ .cursor-glow{position:fixed;top:0;left:0;width:120rem;height:120rem;margin:-60rem 0 0 -60rem; border-radius:50%;pointer-events:none;z-index:0;opacity:.5;filter:blur(2rem); background:radial-gradient(circle at center,rgba(0,55,184,.9) 0%,rgba(0,55,184,.5) 26%,rgba(0,55,184,.18) 52%,rgba(0,55,184,0) 78%); transform:translate3d(50vw,30vh,0);transition:opacity .6s} @media(hover:none){.cursor-glow{display:none}} /* ---------- 공통 타이포 ---------- */ .eyebrow{font-family:var(--f-lat);font-size:1.5rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--accent-hi);margin:0 0 1.8rem} .sec-title{font-size:clamp(3.4rem,5.2vw,6rem);font-weight:300;line-height:1.18; letter-spacing:-.03em;margin:0} .sec-title b{font-weight:600} .sec-lead{margin:2.4rem 0 0;max-width:56rem;color:var(--mut);font-size:clamp(1.7rem,1.9vw,2rem);line-height:1.7} .sec-lead em{color:var(--ink)} /* ---------- 버튼 (잉크블롯) ---------- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:1rem; height:6rem;padding:0 3.4rem;border-radius:var(--r-pill);font-size:1.7rem;font-weight:600; overflow:hidden;isolation:isolate;transition:color .4s var(--ease),transform .15s ease-out} .btn span{position:relative;z-index:2;white-space:nowrap} .btn.sm{height:5.2rem;padding:0 2.8rem;font-size:1.6rem} .btn.full{width:100%} .btn-ink{border:1.5px solid rgba(255,255,255,.85);color:var(--ink)} .btn-ink i{position:absolute;right:2.4rem;top:50%;width:1rem;height:1rem;border-radius:50%; background:var(--ink);transform:translateY(-50%);transition:opacity .3s var(--ease-2);z-index:1} .btn-ink::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:right; transition:transform .5s var(--ease-2);z-index:1;border-radius:inherit} .btn-ink:hover{color:var(--ink-inverse)} .btn-ink:hover::after{transform:scaleX(1)} .btn-ink:hover i{opacity:0} .btn-ghost{border:1.5px solid var(--line-2);color:var(--ink)} .btn-ghost::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left; transition:transform .45s var(--ease-2);z-index:1;border-radius:inherit} .btn-ghost:hover{color:var(--ink-inverse)} .btn-ghost:hover::after{transform:scaleX(1)} .btn:active{transform:scale(.98)} .btn:disabled{cursor:not-allowed;opacity:.58} /* ---------- 헤더 / 내비 ---------- */ .site-header{position:fixed;top:0;left:0;width:100%;z-index:40; transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent} .site-header.scrolled{background:rgba(6,9,16,.72);backdrop-filter:blur(1.6rem);border-bottom-color:var(--line)} .hdr-inner{max-width:var(--wrap);margin:0 auto;padding:2rem var(--gut);display:flex;align-items:center;gap:3rem} .brand{font-family:var(--f-lat);font-size:2.4rem;font-weight:600;letter-spacing:-.02em} .brand .dot{color:var(--accent)} .gnb{margin-left:auto;display:flex;gap:3.2rem} .gnb a{font-size:1.6rem;font-weight:500;color:var(--mut);transition:color .3s} .gnb a:hover{color:var(--ink)} .nav-cta{padding:1.1rem 2.2rem;border-radius:var(--r-pill);border:1.5px solid var(--line-2); font-size:1.5rem;font-weight:600;transition:.35s var(--ease)} .nav-cta:hover{background:var(--accent);border-color:var(--accent)} .nav-toggle{display:none;flex-direction:column;gap:.6rem;width:4.4rem;height:4.4rem; align-items:center;justify-content:center;margin-left:auto;position:relative;z-index:45} .nav-toggle span{width:2.4rem;height:2px;background:var(--ink);transition:.35s} .site-header.menu-open .nav-toggle span:nth-child(1){transform:translateY(.4rem) rotate(45deg)} .site-header.menu-open .nav-toggle span:nth-child(2){transform:translateY(-.4rem) rotate(-45deg)} /* 메뉴가 열려 있을 때 헤더의 backdrop-filter 를 끈다 — backdrop-filter 가 있으면 헤더가 position:fixed 인 .gnb-m 의 기준 상자가 되어 모바일 메뉴가 화면 전체가 아니라 헤더 높이만큼만 덮인다(content.css 의 .content-page .site-header 보다 우선하도록 body 를 붙인다). */ body .site-header.menu-open{backdrop-filter:none;-webkit-backdrop-filter:none} .gnb-m{position:fixed;inset:0 0 0 auto;width:min(82vw,34rem);background:rgba(9,14,26,.96); backdrop-filter:blur(2rem);border-left:1px solid var(--line);padding:11rem 3rem 4rem; display:flex;flex-direction:column;gap:.6rem;transform:translateX(100%);visibility:hidden;pointer-events:none; transition:transform .5s var(--ease-2),visibility 0s .5s;z-index:35} .site-header.menu-open .gnb-m{transform:translateX(0);visibility:visible;pointer-events:auto;transition:transform .5s var(--ease-2),visibility 0s} .gnb-m a{padding:1.6rem .4rem;font-size:2rem;font-weight:500;border-bottom:1px solid var(--line)} .gnb-m .m-cta{margin-top:2rem;border:0;color:var(--accent);font-weight:700} /* ---------- 히어로 ---------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden} .hero-media{position:absolute;inset:0;z-index:0} .hero-video{width:100%;height:100%;object-fit:cover;opacity:.55} .hero-scrim{position:absolute;inset:0;background: radial-gradient(120% 90% at 50% 10%,rgba(6,9,16,.2),rgba(6,9,16,.86) 70%), linear-gradient(180deg,rgba(6,9,16,.6),rgba(6,9,16,.2) 40%,rgba(6,9,16,.95))} .hero-inner{position:relative;z-index:2;padding-block:16rem} .hero-title{font-size:clamp(4.4rem,8.4vw,10rem);font-weight:300;line-height:1.08; letter-spacing:-.04em;margin:0} .hero-title b{font-weight:600;color:#5aa0ff} .hero-sub{margin:3rem 0 0;font-size:clamp(1.7rem,2vw,2.1rem);line-height:1.6;color:var(--mut)} .hero-actions{margin-top:4.4rem;display:flex;gap:1.4rem;flex-wrap:wrap} .scroll-cue{position:absolute;left:50%;bottom:3.4rem;transform:translateX(-50%);z-index:3; width:2.6rem;height:4.4rem;border:1.5px solid var(--line-2);border-radius:2rem;display:flex;justify-content:center} .scroll-cue .dot{width:.5rem;height:.5rem;border-radius:50%;background:#fff;margin-top:.9rem;animation:scrolldot 1.8s var(--ease) infinite} @keyframes scrolldot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateY(1.6rem)}} /* ---------- 섹션 공통 리듬 ---------- */ section{position:relative;z-index:1} #services,#geo,#websites,#design-subscription,#start,#faq,#cta{scroll-margin-top:10rem} .problem,.how,.service,.website-service,.design-subscription,.stats,.why,.pricing,.faq,.cta{padding-block:clamp(9rem,15vw,20rem)} .how-head{max-width:70rem;margin-bottom:clamp(4rem,7vw,8rem)} /* ---------- 문제 (글로우 텍스트) ---------- */ .problem{text-align:left} .glow-text{font-size:clamp(3rem,5.4vw,6.6rem);font-weight:300;line-height:1.32;letter-spacing:-.03em;margin:0;max-width:20ch;color:rgba(255,255,255,.48);transition:color 1s var(--ease-2)} .glow-text.is-visible{color:var(--ink)} .glow-text em{color:var(--accent-hi)} /* ---------- HOW (4단계) ---------- */ .how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:s} .how-step{padding:3.4rem 2.8rem;border-radius:var(--r-md);border:1px solid var(--line); background:var(--glass);backdrop-filter:blur(1rem);min-height:30rem;display:flex;flex-direction:column; transition:transform .5s var(--ease-2),border-color .4s,background .4s} .how-step:hover{transform:translateY(-.8rem);border-color:rgba(39,102,248,.4);background:var(--glass-2)} .step-num{font-size:1.6rem;font-weight:500;color:var(--accent-hi);margin-bottom:auto;letter-spacing:.04em} .how-step h3{font-size:2.4rem;font-weight:600;letter-spacing:-.02em;margin:5rem 0 1.2rem} .how-step p{margin:0;font-size:1.6rem;color:var(--mut);line-height:1.62} /* ---------- 서비스 카드 ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem} .glass{background:var(--glass);backdrop-filter:blur(1.4rem);border:1px solid var(--line);border-radius:var(--r-md)} .card{padding:4rem 3.4rem;min-height:34rem;display:flex;flex-direction:column; transition:transform .5s var(--ease-2),background .45s,border-color .45s} .card-idx{font-size:1.5rem;color:var(--accent-hi);font-weight:600;margin-bottom:auto} .card h3{font-size:3rem;font-weight:600;letter-spacing:-.03em;margin:4rem 0 .6rem} .card-sub{margin:0 0 1.8rem;color:var(--accent-hi);font-size:1.5rem;font-weight:600} .card p:last-child{margin:0;color:var(--mut);font-size:1.6rem;line-height:1.66} .card:hover{transform:translateY(-.8rem);background:linear-gradient(160deg,rgba(39,102,248,.16),rgba(23,81,217,.06));border-color:rgba(39,102,248,.5)} .service-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(32rem,1.2fr);gap:var(--space-12);align-items:end;margin-bottom:var(--space-20)} .service-head .sec-lead{justify-self:end} .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)} .service-card{position:relative;padding:var(--space-10);min-height:42rem;display:flex;flex-direction:column; overflow:hidden;isolation:isolate;border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass); transition:transform .5s var(--ease-2),border-color .3s,background .3s} .service-card::before{content:"";position:absolute;inset:auto -20% -55% 35%;height:34rem;z-index:-1; border-radius:50%;background:radial-gradient(circle,var(--accent-glass),transparent 68%);filter:blur(1rem)} .service-card:hover,.service-card:focus-within{transform:translateY(-.8rem);border-color:var(--accent-line);background:var(--glass-2)} .service-card.is-core,.service-card.core{background:linear-gradient(155deg,var(--accent-glass),var(--glass) 58%)} .service-card .card-idx{margin-bottom:var(--space-20)} .service-card h3{font-size:clamp(3rem,3.2vw,4.4rem);font-weight:600;line-height:1.12;letter-spacing:-.04em;margin:0} .service-card>p,.service-card .service-summary{margin:var(--space-5) 0 var(--space-6);color:var(--mut);font-size:1.7rem;line-height:1.66} .service-points{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:auto} .service-points li,.service-points span,.sample-tags span{padding:.7rem 1.2rem;border:1px solid var(--line);border-radius:var(--r-pill); color:var(--mut);font-size:1.3rem;font-weight:600} .service-link{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-8);color:var(--accent-hi);font-size:1.5rem;font-weight:700} .service-link::after{content:"";width:2.6rem;height:1px;background:currentColor;transition:transform .3s var(--ease)} .service-link:hover::after{transform:translateX(.6rem)} .service-detail-grid{display:grid;grid-template-columns:minmax(24rem,.68fr) minmax(0,1.32fr);gap:clamp(4rem,8vw,12rem);align-items:start} .service-aside{position:sticky;top:12rem} .service-no{display:block;margin-bottom:var(--space-6);color:var(--accent-hi);font-size:1.5rem;font-weight:600;letter-spacing:.06em} .service-aside .sec-title{font-size:clamp(3.4rem,4.4vw,5.4rem)} .service-aside .sec-lead{max-width:42rem} .service-content{min-width:0} .website-service{background:linear-gradient(180deg,var(--bg),var(--bg-2) 40%,var(--bg))} .sample-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)} .sample-card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line); transition:transform .5s var(--ease-2),border-color .3s,background .3s} .sample-card:hover,.sample-card:focus-visible{transform:translateY(-.8rem);border-color:var(--accent-line);background:var(--glass-2)} .sample-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel)} .sample-media img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s var(--ease-2)} .sample-card:hover .sample-media img{transform:scale(1.025)} .sample-specialty{display:inline-flex;align-self:flex-start;margin-bottom:var(--space-4);padding:.8rem 1.4rem;border-radius:var(--r-pill); background:rgba(6,9,16,.78);border:1px solid var(--line-2);font-size:1.3rem;font-weight:700} .sample-copy{padding:var(--space-8);display:flex;flex-direction:column;flex:1} .sample-copy h3{margin:0;font-size:2.6rem;letter-spacing:-.03em} .sample-copy p{margin:var(--space-3) 0 var(--space-6);color:var(--mut);font-size:1.55rem} .sample-tags{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:auto} .sample-note{margin-top:var(--space-8);padding:var(--space-6) var(--space-8);border-left:2px solid var(--accent); background:var(--accent-wash-2);color:var(--mut);font-size:1.6rem;line-height:1.7} .build-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-top:var(--space-10)} .build-step{padding:var(--space-6) var(--space-5);border-top:1px solid var(--line-2)} .build-step>span{display:block;margin-bottom:var(--space-3);color:var(--accent-hi);font-family:var(--f-lat);font-size:1.4rem;font-weight:600} .build-step strong{display:block;font-size:1.55rem} .build-step p{margin:var(--space-2) 0 0;color:var(--mut);font-size:1.4rem;line-height:1.6} .deliverables{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)} .deliverable{min-height:25rem;padding:var(--space-8);display:flex;flex-direction:column;border-radius:var(--r-md); background:var(--glass);border:1px solid var(--line);transition:border-color .3s,background .3s} .deliverable:nth-child(2),.deliverable:nth-child(3){background:linear-gradient(150deg,var(--accent-wash-2),var(--glass))} .deliverable:hover{border-color:var(--accent-line);background:var(--glass-2)} .deliverable-no{color:var(--accent-hi);font-family:var(--f-lat);font-size:1.4rem;font-weight:600} .deliverable h3{margin:auto 0 var(--space-2);font-size:2.6rem;letter-spacing:-.03em} .deliverable p{margin:0;color:var(--mut);font-size:1.55rem;line-height:1.62} .subscription-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--space-10);border-block:1px solid var(--line)} .subscription-flow li{position:relative;padding:var(--space-8) var(--space-6)} .subscription-flow li+li{border-left:1px solid var(--line)} .subscription-flow li>span{display:block;margin-bottom:var(--space-3);color:var(--accent-hi);font-family:var(--f-lat);font-size:1.4rem;font-weight:600} .subscription-flow strong{display:block;font-size:1.6rem} .subscription-flow p{margin:var(--space-2) 0 0;color:var(--mut);font-size:1.4rem;line-height:1.6} /* ---------- STATS (카운트업) ---------- */ .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:left} .stat{padding:3rem 0;border-top:1px solid var(--line)} .stat-num{font-family:var(--f-lat);font-size:clamp(6rem,9vw,11rem);font-weight:300;line-height:.95;letter-spacing:-.04em} .stat-plus{font-family:var(--f-lat);font-size:clamp(3rem,4vw,5rem);font-weight:300;color:var(--accent)} .stat p{margin:1.6rem 0 0;font-size:1.8rem;font-weight:500} .stat small{display:block;margin-top:.6rem;color:var(--mut-2);font-size:1.4rem;font-weight:400} /* ---------- WHY ---------- */ .why-list{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem} .why-item{padding:3.4rem 0 0;border-top:2px solid rgba(255,255,255,.85)} .why-item h3{font-size:2.4rem;font-weight:600;letter-spacing:-.02em;margin:0 0 1.4rem} .why-item p{margin:0;color:var(--mut);font-size:1.65rem;line-height:1.66} /* ---------- ENGINES (마퀴) ---------- */ .engines{padding-block:clamp(5rem,8vw,9rem);border-block:1px solid var(--line);overflow:hidden} .marquee{position:relative;width:100%;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .marquee-track{display:flex;gap:6rem;width:max-content;will-change:transform} .marquee-track{animation:marquee 26s linear infinite} @keyframes marquee{to{transform:translateX(-50%)}} .marquee-track span{font-family:var(--f-lat);font-size:clamp(3rem,4.6vw,5.4rem);font-weight:300; color:var(--mut-2);letter-spacing:-.01em;white-space:nowrap;transition:color .3s} .marquee-track span:hover{color:var(--ink)} /* ---------- PRICING ---------- */ .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:stretch} .tier{position:relative;padding:4rem 3.4rem;display:flex;flex-direction:column} .tier h3{font-family:var(--f-lat);font-size:2.8rem;font-weight:500;margin:0 0 .6rem} .tier-desc{margin:0 0 2.6rem;color:var(--mut);font-size:1.6rem} .tier ul{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:3.4rem} .tier li{position:relative;padding-left:2.4rem;font-size:1.6rem;color:var(--mut)} .tier li::before{content:"";position:absolute;left:0;top:.9rem;width:.9rem;height:.9rem;border-radius:50%; border:1.5px solid var(--accent)} .tier .btn{margin-top:auto} .tier.featured{background:linear-gradient(165deg,var(--accent-glass),var(--accent-wash-2));border-color:var(--accent-line)} .tier-badge{position:absolute;top:-1.4rem;left:3.4rem;padding:.6rem 1.6rem;border-radius:var(--r-pill); background:var(--accent);color:var(--ink);font-size:1.3rem;font-weight:700;letter-spacing:.02em} .tier.featured li::before{border-color:var(--accent-hi)} /* ---------- FAQ ---------- */ .faq-inner{max-width:96rem} .faq-list{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem; padding:3rem .4rem;font-size:clamp(1.9rem,2.4vw,2.4rem);font-weight:500;text-align:left;letter-spacing:-.02em} .faq-q i{position:relative;flex:0 0 auto;width:1.8rem;height:1.8rem} .faq-q i::before,.faq-q i::after{content:"";position:absolute;top:50%;left:0;width:100%;height:1.5px;background:var(--accent);transition:transform .4s var(--ease)} .faq-q i::after{transform:rotate(90deg)} .faq-item.open .faq-q i::after{transform:rotate(0)} .faq-a{display:none;height:auto;overflow:hidden} .faq-item.open .faq-a{display:block} .faq-a p{margin:0;padding:0 .4rem 3rem;color:var(--mut);font-size:1.7rem;line-height:1.7;max-width:76rem} /* ---------- CTA / 폼 ---------- */ .cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(4rem,7vw,9rem);align-items:center} .cta-form{padding:4rem;display:flex;flex-direction:column} .fld{margin-bottom:1.8rem} .fld label{display:block;font-size:1.4rem;font-weight:600;color:var(--mut);margin-bottom:.8rem} .choice-fld{padding:0;border:0;min-width:0} .choice-fld legend{display:block;width:100%;padding:0;font-size:1.4rem;font-weight:600;color:var(--mut);margin-bottom:.8rem} .choice-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem} .choice{position:relative;margin:0!important;cursor:pointer} .choice input{position:absolute;inset:0;opacity:0;pointer-events:none} .choice span{display:flex;align-items:center;justify-content:center;min-height:5.2rem;padding:1.2rem 1.6rem;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:rgba(255,255,255,.03);color:var(--mut);font-size:1.6rem;transition:border-color .3s,background .3s,color .3s} .choice input:checked + span{border-color:var(--accent);background:var(--accent-wash-2);color:var(--ink)} .choice input:focus-visible + span{outline:2px solid var(--accent-hi);outline-offset:1px} .choice-fld:has(input[aria-invalid="true"]) .choice span{border-color:var(--error)} .fld input,.fld textarea,.fld select{width:100%;padding:1.5rem 1.7rem;border-radius:var(--r-sm); border:1.5px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--ink);font-family:inherit;font-size:1.6rem;transition:border-color .3s,background .3s} .fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%); background-position:calc(100% - 2.1rem) 50%,calc(100% - 1.6rem) 50%;background-size:.5rem .5rem,.5rem .5rem;background-repeat:no-repeat} .fld select option{background:var(--panel);color:var(--ink)} .fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--accent);background-color:var(--accent-wash-2)} .fld input:focus-visible,.fld textarea:focus-visible,.fld select:focus-visible{outline:2px solid var(--accent-hi);outline-offset:1px} .fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--error)} .fld textarea{resize:vertical} .fld-note{margin:.8rem 0 0;color:var(--mut);font-size:1.3rem;line-height:1.55} .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .consent{display:flex;gap:1rem;align-items:flex-start;margin:.6rem 0 2.4rem;font-size:1.35rem;color:var(--mut-2);line-height:1.55} .consent input{flex:0 0 auto;margin-top:.3rem;width:auto} .consent a{color:var(--ink);text-decoration:underline;text-underline-offset:.3rem} .form-status{display:none;margin-top:1.6rem;padding:1.4rem;border-radius:var(--r-sm);text-align:center;font-weight:600} .form-status.ok{background:var(--accent-wash);color:var(--success)} .form-status.err{border:1px solid var(--error);color:var(--error)} /* ---------- 푸터 ---------- */ .site-footer{border-top:1px solid var(--line);padding-block:var(--space-16) var(--space-8);background:linear-gradient(180deg,transparent,rgba(39,102,248,.04))} .foot-main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(32rem,.85fr);gap:clamp(var(--space-12),7vw,var(--space-24));align-items:start} .foot-brand .brand{font-size:var(--text-brand)} .foot-brand p{margin:var(--space-4) 0 0;color:var(--mut);font-size:var(--text-md);line-height:1.7;max-width:var(--measure-compact)} .foot-service-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-6)} .foot-service-links a,.foot-links a{display:inline-flex;min-height:var(--target-min);align-items:center;color:var(--mut);font-size:var(--text-sm);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:var(--space-1);transition:color .3s,text-decoration-color .3s} .foot-service-links a:hover,.foot-service-links a:focus-visible,.foot-links a:hover,.foot-links a:focus-visible{color:var(--ink);text-decoration-color:var(--accent-hi)} .foot-company{padding-left:var(--space-8);border-left:1px solid var(--line)} .foot-eyebrow{margin:0 0 var(--space-5);color:var(--accent-hi);font-size:1.2rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .foot-company dl{display:grid;gap:var(--space-3);margin:0} .foot-company dl div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:var(--space-4);font-size:var(--text-sm);line-height:1.6} .foot-company dt{color:var(--mut-2)} .foot-company dd{margin:0;color:var(--mut);text-align:right} .foot-company dd a{color:var(--mut);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:var(--space-1);transition:color .3s,text-decoration-color .3s} .foot-company dd a:hover,.foot-company dd a:focus-visible{color:var(--ink);text-decoration-color:var(--accent-hi)} .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--line);color:var(--mut-2);font-size:var(--text-sm)} .foot-bottom p{margin:0} .foot-links{display:flex;justify-content:flex-end;gap:var(--space-4)} /* ---------- reveal 초기상태 ---------- */ [data-reveal]{opacity:0;transform:translateY(3rem)} [data-reveal].is-in{opacity:1;transform:none;transition:opacity .8s var(--ease-2),transform .8s var(--ease-2)} .evidence-links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:3rem} .evidence-links a{display:inline-flex;align-items:center;min-height:4.4rem;padding:.9rem 1.5rem;border:1px solid var(--line-2);border-radius:var(--r-pill);color:var(--accent-hi);font-size:1.4rem;font-weight:700} .trust-note{display:flex;align-items:center;justify-content:space-between;gap:3rem;margin-top:5rem;padding:2.8rem 3rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--accent-wash-2)} .trust-note p{max-width:90rem;margin:0;color:var(--mut);font-size:1.55rem;line-height:1.7} .trust-note strong{color:var(--ink)} .trust-note a{flex:0 0 auto;color:var(--accent-hi);font-size:1.45rem;font-weight:700} /* ---------- 포커스 / hover 접근성 ---------- */ :focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;border-radius:2px} .btn:focus-visible,.brand:focus-visible,.gnb a:focus-visible,.nav-cta:focus-visible,.nav-toggle:focus-visible,.faq-q:focus-visible,.gnb-m a:focus-visible,.scroll-cue:focus-visible,.marquee-track span:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .faq-q:hover{color:var(--success)} .gnb-m a:hover,.gnb-m a:focus-visible{color:var(--ink)} .gnb-m .m-cta:hover{color:var(--accent-hi)} .scroll-cue:hover{border-color:var(--ink)} .fld input::placeholder,.fld textarea::placeholder{color:var(--mut)} .skip-link{position:fixed;top:1rem;left:1rem;z-index:60;padding:1rem 1.6rem;border-radius:var(--r-sm); background:var(--ink);color:var(--ink-inverse);font-weight:600;font-size:1.5rem;transform:translateY(-160%);transition:transform .25s var(--ease-2)} .skip-link:focus{transform:translateY(0)} /* ---------- 반응형 ---------- */ @media(max-width:1024px){ .gnb,.nav-cta{display:none} .nav-toggle{display:flex} .how-steps,.cards,.service-grid,.stats-grid,.why-list,.tiers{grid-template-columns:repeat(2,1fr)} .service-head,.service-detail-grid{grid-template-columns:1fr} .service-head .sec-lead{justify-self:start} .service-aside{position:static} .cta-inner{grid-template-columns:1fr;gap:4rem} .trust-note{align-items:flex-start;flex-direction:column} .foot-main{grid-template-columns:1fr} .foot-company{padding:var(--space-8) 0 0;border-left:0;border-top:1px solid var(--line)} .foot-company dd{text-align:left} .foot-bottom{align-items:flex-start;flex-direction:column} .foot-links{justify-content:flex-start;flex-wrap:wrap} .foot-links{justify-content:flex-start;flex-wrap:wrap} } @media(max-width:640px){ .how-steps,.cards,.service-grid,.sample-grid,.deliverables,.stats-grid,.why-list,.tiers,.build-flow,.subscription-flow{grid-template-columns:1fr} .hero-inner{padding-block:14rem 10rem} .hero-actions{flex-direction:column;align-items:stretch} .btn{width:100%} .cta-form{padding:2.8rem} .hero-title{font-size:clamp(3.4rem,8.4vw,10rem)} .how-step{min-height:auto} .service-card{min-height:34rem;padding:var(--space-8)} .sample-copy,.deliverable{padding:var(--space-6)} .subscription-flow li+li{border-left:0;border-top:1px solid var(--line)} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} [data-reveal]{opacity:1;transform:none} } /* ---------- 우측 퀵메뉴 (탱탱소프트 · MEDIGEO · NANUGEO · EDUGEO 공통 형식 · 2026-10-06) ---------- AI 안내(브랜드 색 · 흰 "AI") → 문의(흰) → TOP(흰 · 한 화면 넘게 내리면 스택이 한 칸 올라오며 드러남). 카카오톡 채널이 없어 카톡 버튼은 뺐다. 표식은 각 페이지 main.min.js 태그 바로 위