/* ===================================================================
   Studio Stacy — 공용 디자인 시스템 (design tokens + shared components)
   여러 페이지(홈·/works·/demo)가 공유. 브랜드 색·폰트·컴포넌트는 여기 한 곳에서.
   페이지 고유 스타일(히어로·가격·폼·챗봇 등)은 각 페이지 <style>에 인라인.
   =================================================================== */
:root{
  --bg:#FFFFFF;--bg2:#FBFAF5;--card:#FFFFFF;--ink:#1A1813;--muted:#74726A;
  --accent:#E12B22;--accent-deep:#C21A12;--accent2:#7E9E8C;--accent-ink:#FBE7E4;
  --line:rgba(23,22,15,.11);--btnr:999px;--h1max:4.2rem;
  --disp:"Unbounded","Noto Sans KR",sans-serif;--sans:"Inter","Noto Sans KR",sans-serif;--kr:"Noto Sans KR",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:linear-gradient(157deg,#FFFEFC 0%,#FAF5F0 40%,#F1F7F1 72%,#F6FAF6 100%);background-attachment:fixed;line-height:1.75;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:clip}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 30px}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#1FA45E}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:#1FA45E}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:.9rem;padding:14px 28px;border-radius:var(--btnr);border:1.5px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;transition:.28s}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn.o{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.o:hover{background:var(--ink);color:var(--bg)}
.ac{color:var(--accent)}
.doti{position:relative;display:inline-block}
.doti .calyx{position:absolute;left:50%;bottom:.44em;width:.84em;height:.78em;transform:translateX(-50%) rotate(180deg);color:#1FA45E}
.bm{display:none}

/* nav */
header.nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{font-family:var(--disp);font-weight:800;font-size:1.3rem;letter-spacing:-.01em}
.kr-sub{font-family:var(--kr);font-weight:400;font-size:.62rem;letter-spacing:.08em;color:var(--muted);margin-left:8px}
nav ul{display:flex;gap:30px;list-style:none}
nav a{font-size:.86rem;font-weight:500;color:var(--muted);transition:.2s}
nav a:hover,nav a.on{color:var(--accent)}
.nav-cta{font-size:.84rem;font-weight:600;color:#fff;background:var(--accent);padding:10px 20px;border-radius:var(--btnr);transition:.3s}
.nav-cta:hover{background:var(--accent-deep)}
.burger{display:none;background:none;border:0;font-size:1.3rem;color:var(--ink);cursor:pointer}
@media(max-width:880px){nav ul,.nav-cta{display:none}.burger{display:block}}

/* sections — 배경은 body의 연속 대각선 그라데이션이 비치도록 투명(섹션 경계 이음새 제거) */
section{padding:104px 0;background:transparent}
.alt{background:transparent}
.sec-head{max-width:720px;margin:0 auto 60px;text-align:center}
.sec-head h2{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,4.4vw,3rem);margin:12px 0;line-height:1.14}
.sec-head p{font-family:var(--kr);font-weight:300;color:var(--muted)}

/* subpage header (works·demo) */
.phead{background:transparent}
.phead-inner{padding-top:66px;padding-bottom:60px;max-width:760px}
.phead h1{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,6vw,3.4rem);line-height:1.14;letter-spacing:-.02em;margin:20px 0 0}
.phead p{font-family:var(--kr);font-weight:300;font-size:1.05rem;color:var(--muted);margin-top:22px;max-width:52ch;line-height:1.9}

/* work / browser cards */
.work{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:center}
.work+.work{margin-top:72px}
.work.flip{grid-template-columns:1.1fr 1fr}
.work.flip .browser{order:-1}
.work .info .tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--kr);font-weight:500;font-size:.78rem;color:#5E7D6C;background:#EDF2EE;padding:5px 13px;border-radius:999px;margin-bottom:14px}
.work .info h3{font-family:var(--disp);font-weight:700;font-size:1.9rem;margin:12px 0 14px}
.work .info p{font-family:var(--kr);font-weight:300;color:var(--muted);margin-bottom:16px}
.work .chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}
.work .chips span{font-size:.76rem;color:var(--muted);border:1px solid var(--line);padding:6px 13px;border-radius:999px}
.work .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.browser{border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(23,22,15,.45);background:#fff}
.browser .bar{display:flex;align-items:center;gap:8px;padding:12px 15px;background:var(--card);border-bottom:1px solid var(--line)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
.browser .bar .url{margin-left:10px;font-size:.74rem;color:var(--muted)}
.wtag{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.66rem;letter-spacing:.06em;padding:3px 9px;border-radius:6px;vertical-align:middle}
.wtag.demo{background:#EDF2EE;color:#4E7360;border:1px solid #CFE0D5}
.wtag.real{background:#EDF2EE;color:#4E7360;border:1px solid #CFE0D5}
.browser .bar .wtag{margin-left:auto}
.info .wtag{margin-left:8px}
.browser .screen{position:relative;height:450px;background:#fff}
.browser .screen iframe{width:100%;height:100%;border:0}
.browser .screen.locked iframe{pointer-events:none}
.browser .screen a.open{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px;background:linear-gradient(180deg,rgba(23,22,15,0) 70%,rgba(23,22,15,.42));opacity:0;transition:.3s}
.browser .screen:hover a.open{opacity:1}
.browser .screen a.open span{background:var(--ink);color:var(--bg);font-weight:600;font-size:.85rem;padding:10px 20px;border-radius:var(--btnr)}
@media(max-width:860px){.work,.work.flip{grid-template-columns:1fr;gap:30px}.work .browser,.work.flip .browser{order:-1}.browser .screen{height:340px}}

/* cta band */
.cta-band{text-align:center}
.cta-band h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.6rem,4vw,2.4rem);margin:12px 0 10px}
.cta-band p{font-family:var(--kr);font-weight:300;color:var(--muted);margin-bottom:28px}

/* footer */
footer{background:var(--ink);color:var(--bg);padding:70px 0 40px}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
footer .fb{font-family:var(--disp);font-weight:800;font-size:1.7rem}
footer .fkr{font-family:var(--kr);font-weight:400;font-size:.82rem;letter-spacing:.06em;color:color-mix(in srgb,var(--bg) 62%,var(--ink));margin-top:5px}
footer .ftag{font-family:var(--kr);font-weight:300;color:color-mix(in srgb,var(--bg) 60%,var(--ink));font-size:.9rem;margin-top:10px;max-width:34ch}
footer .fcol h5{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--bg) 55%,var(--ink));margin-bottom:14px}
footer .fcol a{display:block;color:color-mix(in srgb,var(--bg) 78%,var(--ink));font-size:.95rem;margin-bottom:9px;transition:.2s}
footer .fcol a:hover{color:var(--bg)}
footer .copy{margin-top:42px;border-top:1px solid color-mix(in srgb,var(--bg) 18%,var(--ink));padding-top:20px;font-size:.74rem;color:color-mix(in srgb,var(--bg) 50%,var(--ink));display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:200;background:rgba(20,19,16,.5);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:.3s}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu .panel{position:absolute;top:0;right:0;width:min(82vw,330px);height:100%;background:var(--bg);border-left:1px solid var(--line);padding:28px 28px 32px;transform:translateX(100%);transition:.35s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
.mobile-menu.open .panel{transform:none}
.mobile-menu .x{align-self:flex-end;background:none;border:0;font-size:1.7rem;color:var(--ink);cursor:pointer}
.mobile-menu .mb{font-family:var(--disp);font-weight:800;font-size:1.5rem;margin:4px 0 18px}
.mobile-menu a.m{display:block;font-family:var(--kr);font-size:1.14rem;padding:16px 2px;border-bottom:1px solid var(--line);color:var(--ink)}
.mobile-menu .mcta{margin-top:auto;padding-top:22px}.mobile-menu .mcta .btn{width:100%;justify-content:center}

/* shared mobile */
@media(max-width:560px){
  .bm{display:inline}
  .wrap{padding:0 30px}
  section{padding:54px 0}.sec-head{margin-bottom:32px}
  .nav-inner{height:60px}.brand{font-size:1.05rem}.kr-sub{display:none}
  .eyebrow{font-size:.7rem;letter-spacing:.16em}
  .sec-head h2{font-size:1.45rem}.sec-head p{font-size:.87rem}
  .phead-inner{padding-top:34px;padding-bottom:40px}.phead h1{font-size:2rem}.phead p{font-size:.9rem}
  .work .info h3{font-size:1.35rem}.work .info p{font-size:.86rem}
}

/* ===================================================================
   애니메이션 · 인터랙션 유틸 (홈·서브페이지 공용)
   =================================================================== */
/* 스크롤 등장 — 방향·스태거 변형 */
.reveal.up{transform:translateY(34px)}
.reveal.left{transform:translateX(-40px)}
.reveal.right{transform:translateX(40px)}
.reveal.zoom{transform:scale(.92)}
.reveal.in{opacity:1 !important;transform:none !important}
[data-delay="1"]{transition-delay:.08s}[data-delay="2"]{transition-delay:.16s}
[data-delay="3"]{transition-delay:.24s}[data-delay="4"]{transition-delay:.32s}
[data-delay="5"]{transition-delay:.4s}[data-delay="6"]{transition-delay:.48s}

/* 히어로 단어 로테이터 (kinetic text) */
.rotator{display:inline-flex;flex-direction:column;overflow:hidden;height:1.15em;vertical-align:bottom;position:relative}
.rotator .w{display:block;line-height:1.15em;color:var(--accent);white-space:nowrap;animation:rotword 9s infinite}
@keyframes rotword{0%,16%{transform:translateY(0)}20%,36%{transform:translateY(-100%)}40%,56%{transform:translateY(-200%)}60%,76%{transform:translateY(-300%)}80%,96%{transform:translateY(-400%)}100%{transform:translateY(0)}}

/* 무한 마퀴 스트립 */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);padding:16px 0}
.marquee-track{display:flex;gap:0;width:max-content;animation:marq 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--disp);font-weight:600;font-size:1.05rem;color:var(--ink);padding:0 26px;display:inline-flex;align-items:center;gap:26px;white-space:nowrap}
.marquee-track span::after{content:"·";color:var(--accent)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 카운트업 통계 밴드 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:860px;margin:0 auto}
.stat{text-align:center;padding:22px 14px}
.stat .big{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,5vw,3rem);color:var(--accent);line-height:1}
.stat .lab{font-family:var(--kr);font-weight:400;font-size:.92rem;color:var(--muted);margin-top:10px}
@media(max-width:620px){.stats{grid-template-columns:1fr;gap:6px}.stat{padding:14px}}

/* 작업 캐러셀 */
.car{position:relative;overflow:hidden;width:100%;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.car:active{cursor:grabbing}
.car-track{display:flex;width:100%;transition:transform .7s cubic-bezier(.5,.05,.2,1)}
.car-slide{flex:0 0 100%;min-width:0;padding:4px}
.car-slide .work,.car-slide .info,.car-slide .info>*{min-width:0}
.car-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:34px}
.car-dot{width:9px;height:9px;border-radius:50%;border:0;background:var(--line);cursor:pointer;transition:.25s;padding:0}
.car-dot.on{background:var(--accent);transform:scale(1.35)}
.car-arw{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;font-size:1.05rem;transition:.25s;display:flex;align-items:center;justify-content:center}
.car-arw:hover{border-color:var(--accent);color:var(--accent)}

/* 버튼·카드 미세 인터랙션 */
.btn{will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* [의도적] '동작 줄이기(reduce-motion)'에서도 모든 모션을 그대로 유지 — 브랜드 페이지가 정적으로 죽어 보이지 않게 오너가 선택. 리빌·마퀴·캐러셀·로테이터 전부 동작 */