/* ============================================================ 결 스튜디오 — Vale 데모 (interior studio) Warm paper + charcoal + one teal whisper (#40847D). The hero is a full-bleed scroll-scrubbed frame sequence; everything below it is flat paper and hairlines. Reduced-motion safe. Media queries live at the END of this file. ============================================================ */ /* ---- fonts (self-hosted, shared with root) ---- */ @font-face{font-family:'MaruBuri';src:url('/fonts/MaruBuri-Regular.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'MaruBuri';src:url('/fonts/MaruBuri-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'MaruBuri';src:url('/fonts/MaruBuri-Bold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Pretendard';src:url('/fonts/PretendardVariable.woff2') format('woff2-variations');font-weight:45 920;font-display:swap} :root{ --paper:#F4F1EA; --paper-2:#ECE6DB; --paper-3:#E2DACB; --ink:#141414; --ink-warm:rgb(33,30,26); --ink-soft:rgb(96,90,82); --hairline:rgba(33,30,26,.14); --teal:#40847D; --teal-ink:rgb(46,102,96); /* the frame renders sit on their own warm gradient — these two match the top and bottom edge pixels of the WebPs, so any letterbox band left by the canvas fit reads as part of the render, not as a bar */ --render-top:rgb(203,191,181); --render-bot:rgb(222,213,203); --f-serif:'MaruBuri',ui-serif,Georgia,serif; --f-sans:'Pretendard',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif; --ease-out:cubic-bezier(.22,1,.36,1); --gutter:clamp(20px,5vw,72px); --maxw:1160px; --bar-h:60px; } *,*:before,*:after{margin:0;padding:0;box-sizing:border-box} /* the horizontal clip lives on ONLY. Putting overflow-x:hidden on the body too (while html is already non-visible) turns the body into its own scroll container, and position:sticky children — the hero stage — stop pinning entirely. */ html{overflow-x:hidden;scroll-behavior:smooth} body{background:var(--paper);color:var(--ink-warm);font-family:var(--f-sans);font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased;word-break:keep-all} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;color:inherit} ol,ul{list-style:none} ::selection{background:var(--teal);color:var(--paper)} :focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px} section[id]{scroll-margin-top:calc(var(--bar-h) + 8px)} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:fixed;top:-100px;left:16px;z-index:2000;background:var(--ink);color:var(--paper); padding:.7em 1.2em;border-radius:8px;font-size:.8rem;transition:top .3s} .skip:focus{top:16px} /* ambient grain (matches root) */ .grain{position:fixed;top:-60%;right:-60%;bottom:-60%;left:-60%;width:220%;height:220%;z-index:3;pointer-events:none; opacity:.04;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")} main,footer{position:relative;z-index:1} /* ---- reveals ---- */ .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} .rv.is-in{opacity:1;transform:none} .rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s} /* ---- the mark: a window / door opening ---- */ .mark{width:26px;height:26px;flex:none;overflow:visible} .mark__arch,.mark__sill,.mark__bar{fill:none;stroke:var(--teal-ink);stroke-linecap:round;stroke-linejoin:round} .mark__arch{stroke-width:1.6} .mark__sill{stroke-width:1.6} .mark__bar{stroke-width:1.2;opacity:.5} .mark--lg{width:clamp(34px,4vw,44px);height:clamp(34px,4vw,44px)} /* ---- top bar ---- */ .bar{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--bar-h); display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gutter); background:transparent;border-bottom:1px solid transparent; transition:background .4s,border-color .4s,backdrop-filter .4s} .bar.is-solid{background:rgba(244,241,234,.86);backdrop-filter:saturate(1.3) blur(14px);border-bottom-color:var(--hairline)} .bar__brand{font-size:.82rem;font-weight:500;letter-spacing:.22em;color:var(--ink);white-space:nowrap} .bar__nav{display:flex;gap:clamp(14px,2.2vw,30px);font-size:.78rem;letter-spacing:.04em} .bar__nav a{color:var(--ink-soft);transition:color .3s} .bar__nav a:hover{color:var(--ink)} .bar__back{font-size:.74rem;letter-spacing:.08em;color:var(--ink-soft);white-space:nowrap;transition:color .3s} .bar__back:hover{color:var(--teal-ink)} /* ============================================================ Hero — the scroll-scrubbed sequence, full bleed A tall section whose stage sticks: gyeol.js paints 121 WebP frames onto the canvas as scroll progress moves 0 → 1, so the finished 거실 comes apart into 마감 → 설비 → 골조. No scroll listeners — an IO-gated rAF loop reads getBoundingClientRect. Each label owns a frame range. ============================================================ */ .reel{position:relative;height:440vh; background:linear-gradient(to bottom,var(--render-top) 0%,var(--render-top) 10%,var(--render-bot) 92%,var(--render-bot) 100%)} .reel__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden} .reel__canvas{position:absolute;inset:0;width:100%;height:100%;display:block} /* the sequence hands off to paper: a short wash at the bottom edge so the first section below the fold does not start on a hard seam */ .reel__stage:after{content:"";position:absolute;right:0;bottom:0;left:0;height:14vh;pointer-events:none;z-index:1; background:linear-gradient(to top,var(--paper),rgba(244,241,234,0))} .reel__center{position:absolute;inset:0;z-index:2;display:grid;place-items:center; padding:var(--bar-h) var(--gutter) 0;pointer-events:none} .reel__stack{position:relative;width:min(620px,88vw);display:flex;flex-direction:column;align-items:center; text-align:center;gap:clamp(20px,3.4vh,34px)} /* a soft paper breath behind the type — the renders are light and warm, so this is a whisper, not a scrim */ .reel__stack:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:190%;height:220%;pointer-events:none;z-index:-1; background:radial-gradient(ellipse at center,rgba(244,241,234,.72),rgba(244,241,234,.34) 46%,rgba(244,241,234,0) 72%)} .reel__labels{position:relative;width:100%;height:clamp(150px,22vh,200px)} /* the outgoing label clears fast and the incoming one waits a beat, so two labels are never legibly stacked on top of each other mid-scrub */ .reel__label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:14px; opacity:0;transform:translateY(16px); transition:opacity .26s var(--ease-out),transform .5s var(--ease-out)} .reel__label.is-on{opacity:1;transform:none; transition:opacity .5s var(--ease-out) .16s,transform .8s var(--ease-out) .16s} .reel__label h2{font-family:var(--f-serif);font-weight:600;line-height:1.1;color:var(--ink); font-size:clamp(2.6rem,7.4vw,4.6rem);letter-spacing:-.02em} .reel__label p{max-width:34ch;color:var(--ink-warm);font-size:clamp(.94rem,1.5vw,1.08rem);line-height:1.7} .reel__hint{position:absolute;left:0;right:0;bottom:clamp(26px,5vh,48px);z-index:2; display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none; font-size:.66rem;letter-spacing:.3em;color:var(--ink-soft); transition:opacity .5s var(--ease-out)} .reel__hint i{display:block;width:1px;height:34px;background:linear-gradient(to bottom,var(--ink-soft),rgba(96,90,82,0)); animation:drip 2.4s var(--ease-out) infinite} @keyframes drip{0%{transform:scaleY(.2);transform-origin:top;opacity:0} 40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}} .reel__stage.is-scrubbing .reel__hint{opacity:0} .reel__rail{position:absolute;left:0;right:0;bottom:0;z-index:2;height:2px;background:rgba(33,30,26,.1)} .reel__rail i{display:block;width:100%;height:100%;background:var(--teal); transform:scaleX(0);transform-origin:left;will-change:transform} /* ---- shared furniture ---- */ .wrap{max-width:var(--maxw);margin:0 auto} .section{position:relative;padding:clamp(80px,10vw,140px) var(--gutter)} .section--alt{background:var(--paper-2)} .head{margin-bottom:clamp(38px,5vw,68px)} .eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.3em;color:var(--teal-ink);margin-bottom:18px} .head h2{font-family:var(--f-serif);font-weight:600;line-height:1.24;color:var(--ink); font-size:clamp(1.7rem,3.8vw,2.7rem);letter-spacing:-.01em} .lead{margin-top:18px;max-width:50ch;color:var(--ink-soft);font-size:clamp(.98rem,1.3vw,1.06rem)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--ink);color:var(--paper); font-size:.88rem;font-weight:600;padding:.95em 1.7em;border-radius:100px;border:1px solid var(--ink);cursor:pointer; transition:background .35s,border-color .35s,transform .35s var(--ease-out)} .btn:hover{background:var(--teal-ink);border-color:var(--teal-ink);transform:translateY(-2px)} /* ---- work ---- */ .grid-work{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px) clamp(18px,2.4vw,32px)} .proj__img{overflow:hidden;background:var(--paper-3);border-radius:3px} .proj__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3; transition:transform .8s var(--ease-out)} .proj:hover .proj__img img{transform:scale(1.035)} .proj__body{padding-top:16px} .proj__n{display:block;font-size:.68rem;font-weight:600;letter-spacing:.18em;color:var(--teal-ink)} .proj__body h3{margin-top:9px;font-family:var(--f-serif);font-size:1.14rem;font-weight:600;color:var(--ink); display:flex;align-items:baseline;justify-content:space-between;gap:10px} .proj__body h3 b{font-family:var(--f-sans);font-size:.76rem;font-weight:600;color:var(--ink-soft);flex:none} .proj__body p{margin-top:7px;color:var(--ink-soft);font-size:.89rem} .proj__meta{display:block;margin-top:13px;padding-top:12px;border-top:1px solid var(--hairline); font-size:.72rem;letter-spacing:.05em;color:var(--ink-soft)} /* ---- process ---- */ .steps{border-top:1px solid var(--hairline)} .steps li{display:grid;grid-template-columns:4.5rem 9rem 1fr auto;align-items:baseline; gap:clamp(14px,3vw,40px);padding:clamp(20px,2.8vw,30px) 0;border-bottom:1px solid var(--hairline)} .steps__n{font-family:var(--f-serif);font-size:.95rem;font-weight:600;color:var(--teal-ink);letter-spacing:.06em} .steps li b{font-family:var(--f-serif);font-size:1.16rem;font-weight:600;color:var(--ink)} .steps li p{color:var(--ink-soft);font-size:.93rem} .steps__when{font-size:.74rem;letter-spacing:.05em;color:var(--ink-soft);white-space:nowrap} /* ---- pricing ---- */ .rates{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hairline)} .rate{padding:clamp(26px,3vw,38px) clamp(18px,2.4vw,32px) clamp(26px,3vw,38px) 0; border-bottom:1px solid var(--hairline)} .rate + .rate{border-left:1px solid var(--hairline);padding-left:clamp(18px,2.4vw,32px)} .rate__size{display:block;font-size:.74rem;font-weight:600;letter-spacing:.2em;color:var(--teal-ink)} .rate__num{display:block;margin:12px 0 6px;font-family:var(--f-serif);font-weight:600;color:var(--ink); font-size:clamp(1.8rem,3vw,2.35rem);letter-spacing:-.01em} .rate__num small{font-size:.42em;font-weight:600;color:var(--ink-soft);margin-left:2px} .rate__scope{font-size:.9rem;color:var(--ink)} .rate__inc{margin-top:14px;font-size:.84rem;line-height:1.85;color:var(--ink-soft)} .rates__foot{margin-top:clamp(24px,3vw,36px);font-size:.78rem;color:var(--ink-soft)} /* ---- consult ---- */ .consult{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(34px,5vw,80px);align-items:start} .consult__intro h2{font-family:var(--f-serif);font-weight:600;line-height:1.26;color:var(--ink); font-size:clamp(1.7rem,3.4vw,2.5rem)} .consult__form{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px} .consult__form .f{display:flex;flex-direction:column;gap:6px} .consult__form label{font-size:.72rem;font-weight:600;letter-spacing:.1em;color:var(--ink-soft)} .consult__form input{border:0;border-bottom:1px solid var(--hairline);background:none;padding:.6em 0; font-family:inherit;font-size:.95rem;color:var(--ink);transition:border-color .3s} .consult__form input::placeholder{color:rgba(96,90,82,.5)} .consult__form input:focus{outline:none;border-bottom-color:var(--teal)} .consult__form .btn{grid-column:1/-1;justify-self:start;margin-top:8px} .consult__note{grid-column:1/-1;font-size:.74rem;color:var(--ink-soft)} .consult__note.is-ok{color:var(--teal-ink);font-weight:600} /* ---- footer ---- */ .footer{border-top:1px solid var(--hairline);padding:clamp(46px,6vw,80px) var(--gutter) 40px;background:var(--paper)} .footer__top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; padding-bottom:clamp(24px,3.4vw,40px);border-bottom:1px solid var(--hairline)} .footer__logo{display:inline-flex;align-items:center;gap:11px;font-size:.85rem;font-weight:500;letter-spacing:.2em; color:var(--ink)} .footer__demo{display:inline-flex;align-items:center;gap:9px;font-size:.74rem;letter-spacing:.04em;color:var(--ink-soft)} .footer__demo i{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none; box-shadow:0 0 0 0 rgba(64,132,125,.6);animation:pulse 2.6s var(--ease-out) infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(64,132,125,.5)}70%{box-shadow:0 0 0 7px rgba(64,132,125,0)}100%{box-shadow:0 0 0 0 rgba(64,132,125,0)}} .footer__note{padding-top:24px;font-size:.8rem;color:var(--ink-soft);line-height:1.8;max-width:78ch} .footer__note b{color:var(--ink-warm)} .footer__note a{color:var(--teal-ink);border-bottom:1px solid rgba(46,102,96,.35)} .footer__biz{margin-top:9px;font-size:.74rem;opacity:.85} .footer__links{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap; margin-top:clamp(22px,3vw,34px);font-size:.82rem;font-weight:600;color:var(--teal-ink)} .footer__links a{transition:color .3s} .footer__links a:hover{color:var(--ink)} /* ---- chatbot ---- */ .bot{position:fixed;right:clamp(16px,3vw,34px);bottom:calc(clamp(16px,3vw,34px) + env(safe-area-inset-bottom,0px)); z-index:950;display:flex;flex-direction:column;align-items:flex-end;gap:14px} .bot__fab{width:54px;height:54px;border-radius:50%;background:var(--ink);border:0;cursor:pointer;position:relative; box-shadow:0 18px 44px -14px rgba(20,20,20,.55);transition:transform .5s var(--ease-out),background .4s} .bot__fab:hover{transform:scale(1.06);background:var(--teal-ink)} .bot__fab svg{position:absolute;inset:0;margin:auto;width:23px;height:23px;fill:none;stroke:var(--paper); stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s,transform .4s var(--ease-out)} .bot__fab .bot__fab-open{fill:var(--paper);stroke:none} .bot__fab-close{opacity:0;transform:rotate(-90deg)} .bot.is-open .bot__fab-open{opacity:0;transform:rotate(90deg)} .bot.is-open .bot__fab-close{opacity:1;transform:none} .bot__panel{position:absolute;bottom:68px;right:0;width:min(380px,calc(100vw - 32px)); height:min(560px,calc(100dvh - 140px));display:flex;flex-direction:column;background:var(--paper); border:1px solid var(--hairline);border-radius:18px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(20,20,20,.45); transform:translateY(14px) scale(.98);opacity:0;pointer-events:none;visibility:hidden; transition:transform .5s var(--ease-out),opacity .4s,visibility 0s .5s} .bot.is-open .bot__panel{transform:none;opacity:1;pointer-events:auto;visibility:visible; transition:transform .5s var(--ease-out),opacity .4s} .bot__head{background:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:13px 15px} .bot__id{display:flex;align-items:center;gap:11px;min-width:0} .bot__avatar{position:relative;width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center; background:rgba(244,241,234,.12);border:1px solid rgba(244,241,234,.2);font-family:var(--f-serif); font-weight:700;color:var(--paper);font-size:.9rem} .bot__dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--teal); border:2px solid var(--ink)} .bot__who strong{display:block;font-size:.8rem;color:var(--paper);white-space:nowrap} .bot__who small{display:block;color:rgba(244,241,234,.55);font-size:.64rem;margin-top:2px} .bot__x{width:32px;height:32px;flex:none;border-radius:50%;background:rgba(244,241,234,.1);border:0;cursor:pointer} .bot__x svg{width:14px;height:14px;fill:none;stroke:rgba(244,241,234,.75);stroke-width:2;stroke-linecap:round} .bot__x:hover{background:rgba(244,241,234,.2)} .bot__log{flex:1;overflow-y:auto;padding:18px 18px 6px;display:flex;flex-direction:column;gap:14px} .msg{max-width:88%;font-size:.8rem;line-height:1.6;white-space:pre-wrap;word-break:break-word} .msg--bot{background:#fff;color:var(--ink-warm);align-self:flex-start;border:1px solid rgba(33,30,26,.06); padding:.8em 1em;border-radius:14px;border-bottom-left-radius:4px;box-shadow:0 4px 14px -8px rgba(33,30,26,.15)} .msg--user{background:var(--ink);color:var(--paper);align-self:flex-end;padding:.8em 1em;border-radius:14px; border-bottom-right-radius:4px} .msg--typing{display:flex;gap:5px;align-self:flex-start;background:#fff;border:1px solid rgba(33,30,26,.06); padding:.9em 1em;border-radius:14px;border-bottom-left-radius:4px} .msg--typing i{width:6px;height:6px;border-radius:50%;background:rgba(33,30,26,.32);animation:blink 1.3s infinite} .msg--typing i:nth-child(2){animation-delay:.2s}.msg--typing i:nth-child(3){animation-delay:.4s} @keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}} .bot__form{display:flex;gap:8px;padding:12px;align-items:center} .bot__form input{flex:1;min-width:0;border:1px solid var(--hairline);border-radius:100px;padding:.8em 1.15em; font-family:inherit;font-size:.82rem;color:var(--ink-warm);background:#fff} .bot__form input:focus{outline:none;border-color:var(--teal)} .bot__form button{width:40px;height:40px;flex:none;border-radius:50%;background:var(--ink);border:0;cursor:pointer; display:grid;place-items:center;transition:background .3s} .bot__form button:hover{background:var(--teal-ink)} .bot__form button svg{width:18px;height:18px;fill:none;stroke:var(--paper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .bot__demo{font-size:.64rem;text-align:center;color:var(--ink-soft);padding:0 14px 12px} /* ============================================================ Responsive + reduced motion (media queries — END of file) ============================================================ */ @media(max-width:1000px){ .grid-work{grid-template-columns:repeat(2,1fr)} .consult{grid-template-columns:1fr} .steps li{grid-template-columns:3.4rem 1fr auto;row-gap:4px} .steps li p{grid-column:2/3} .steps li b{grid-column:2/3} } @media(max-width:820px){ .rates{grid-template-columns:1fr} .rate,.rate + .rate{padding:26px 0;border-left:0} .rate__inc{margin-top:10px} } @media(max-width:760px){ :root{--bar-h:54px} .bar__nav{display:none} /* a portrait viewport fits the 16:9 frames smaller, so the scrub needs less runway to read at the same pace */ .reel{height:360vh} .reel__labels{height:clamp(160px,24vh,210px)} .grid-work{grid-template-columns:1fr;max-width:440px} .consult__form{grid-template-columns:1fr} .footer__links{flex-direction:column;gap:12px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rv{opacity:1!important;transform:none!important;transition:none} .grain{animation:none} .footer__demo i{animation:none} .msg--typing i{animation:none;opacity:.5} .proj:hover .proj__img img{transform:none} .btn:hover{transform:none} /* the hero: no scrub and no pin — one still of the finished 거실 with all five 층위 spelled out beneath it, so the section still says what it says */ .reel{height:auto;background:var(--paper)} .reel__stage{position:relative;height:auto;overflow:visible; padding:calc(var(--bar-h) + clamp(30px,6vw,60px)) var(--gutter) clamp(60px,8vw,100px); max-width:var(--maxw);margin:0 auto} .reel__stage:after{display:none} .reel__canvas{position:static;width:100%;height:auto;aspect-ratio:16/9;border-radius:4px; background:linear-gradient(to bottom,var(--render-top),var(--render-bot))} .reel__center{position:static;display:block;padding:0;pointer-events:auto} .reel__stack{width:100%;align-items:stretch;text-align:left;margin-top:clamp(30px,4vw,48px); gap:clamp(22px,3vw,34px)} .reel__stack:before{display:none} .reel__labels{position:static;width:100%;height:auto;display:grid;gap:clamp(22px,3vw,32px)} .reel__label{position:static;inset:auto;align-items:flex-start;gap:8px;opacity:1;transform:none;transition:none} .mark--lg{align-self:flex-start} .reel__label h2{font-size:clamp(1.5rem,3.4vw,2.1rem)} .reel__label p{max-width:52ch} .reel__hint,.reel__rail{display:none} }