@font-face{font-family:"WorkPlate Brand";src:url("/fonts/brand/workplate.woff") format("woff");font-display:swap;font-weight:100 900}
:root{color-scheme:light;--staff:#E7ECE0;--client:#F4EFE4;--green:#2F5D45;--ochre:#8A6A1C;--ink:#1F2A22;--muted:#5F6A62;--border:#CBD3C2;--pale:#F4F7F0;--white:#FFFFFF;--mint:#9CD0B0;--red:#D9442B;--page:var(--ink);--accent:var(--green);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}body{margin:0;background:var(--page);color:var(--ink);font-family:"Pretendard Variable",Pretendard,sans-serif;font-size:16px;word-break:keep-all;overflow-wrap:break-word;transition:background-color .6s ease}body[data-theme="dark"]{--page:var(--ink);--accent:var(--mint)}body[data-theme="staff"]{--page:var(--staff);--accent:var(--green)}body[data-theme="client"]{--page:var(--client);--accent:var(--ochre)}button,input,textarea{font:inherit}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}a{color:inherit;text-underline-offset:4px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}input:focus-visible,textarea:focus-visible{outline:3px solid rgba(47,93,69,.25);outline-offset:2px;border-color:var(--green)}[hidden]{display:none!important}h1,h2,h3,p,figure{margin:0}button{border:0}svg{display:block}main{display:block}section{scroll-margin-top:0}.skip-link{position:fixed;top:8px;left:20px;z-index:200;padding:12px 20px;background:var(--white);color:var(--green);border-radius:12px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}
.site-header{height:52px;padding:0 20px;position:fixed;inset:0 0 auto;z-index:30;display:flex;justify-content:space-between;align-items:center;background:var(--page);background:color-mix(in srgb,var(--page) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(95,106,98,.12);transition:background-color .6s ease,color .6s ease;color:var(--ink)}body[data-theme="dark"] .site-header{color:var(--white)}.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:"WorkPlate Brand",Georgia,serif;font-size:18px;font-weight:700;letter-spacing:-.03em;white-space:nowrap}.brand-tile{width:28px;height:28px;flex:none;background:var(--white);border-radius:8px}.perspective-chip{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 11px;border:1px solid var(--green);color:var(--white);background:var(--green);border-radius:999px;font-size:12px;line-height:1.4;font-weight:750;white-space:nowrap}.perspective-chip[data-view="client"]{background:var(--ochre);border-color:var(--ochre);color:var(--white)}.perspective-chip[data-view="both"]{background:var(--green);color:var(--white)}.scene-chip{margin-bottom:20px}.progress-track{position:fixed;z-index:40;top:50px;left:0;right:0;height:2px;pointer-events:none}#reading-progress{width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:background-color .6s ease}
#story-sections{position:relative;padding-top:52px}.story-section{min-height:100svh;padding:56px 20px;position:relative;--section-accent:var(--green)}.story-section[data-theme="client"]{--section-accent:var(--ochre)}.hero{color:var(--white);--section-accent:var(--mint)}.scene-layout{width:100%;max-width:360px;margin:0 auto}.scene-title{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.22}.title-line{display:block;white-space:nowrap}.word{display:inline-block;position:relative}.emphasis{font-weight:800;color:var(--section-accent);isolation:isolate}.emphasis::after{content:"";height:6px;border-radius:3px;position:absolute;inset:auto 0 1px;background:currentColor;opacity:.25;z-index:-1;transform-origin:left;transform:scaleX(1)}.scene-copy{font-size:16px;font-weight:500;line-height:1.65;color:var(--muted);margin-top:10px}.hero .scene-copy{color:var(--white);opacity:.86}.scene-media{position:relative;width:100%;max-width:360px;aspect-ratio:9/16;margin:24px auto 0;border-radius:28px;overflow:hidden;background:var(--pale);box-shadow:0 24px 60px rgba(31,42,34,.22)}.scene-video{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}.scene-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;display:grid;place-items:center;padding-left:5px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(31,42,34,.22);color:var(--green);font-size:26px;z-index:4}.loop-cover{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease;background-size:cover;background-position:center;border-radius:inherit;z-index:2}.is-looping>.loop-cover{opacity:1}.hero-actions{display:grid;gap:12px;margin-top:28px}.button{height:52px;min-height:52px;padding:0 16px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-size:17px;font-weight:800;line-height:1.3;transition:background-color .2s ease,box-shadow .2s ease;letter-spacing:-.02em}.button-primary{background:var(--green);color:var(--white);border:1px solid var(--green)}.button-primary:hover{box-shadow:0 6px 18px rgba(31,42,34,.14)}.button-secondary{background:var(--white);border:1px solid var(--green);color:var(--green)}.button-secondary:hover{background:var(--pale)}.admin-link{font-size:13px;text-align:center;text-decoration:none;line-height:1.8;padding:8px 0}.admin-link:hover{text-decoration:underline}.scroll-cue{font-size:13px;text-align:center;line-height:1.7;opacity:.7;margin-top:28px;transition:opacity .25s ease}.scroll-cue span{display:inline-block;margin-left:4px;animation:breathe 2s ease-in-out infinite}.scroll-cue.is-hidden{opacity:0;pointer-events:none}@keyframes breathe{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
.helper-section{min-height:200svh}.helper-section .scene-layout{min-height:calc(200svh - 112px);position:relative;display:flex;flex-direction:column}.helper-sticky{position:sticky;top:76px;margin-top:10px}.helper-step{display:none;color:var(--ochre);font-size:16px;font-weight:750;line-height:1.5;min-height:24px}.helper-sticky .scene-media{margin-top:24px}.has-helper-step .helper-description{display:none}.has-helper-step .helper-step{display:block}.story-open{display:block;background:transparent;color:var(--green);font-size:15px;font-weight:700;line-height:1.5;min-height:44px;margin:18px auto 0;padding:6px 0;text-align:center;white-space:nowrap}#desktop-rail{display:none}
.has-js .story-section:not(.is-revealed) .scene-chip,.has-js .story-section:not(.is-revealed) .word,.has-js .story-section:not(.is-revealed) .scene-copy{opacity:0;transform:translateY(16px)}.has-js .scene-chip{transition:opacity .5s var(--ease),transform .5s var(--ease)}.has-js .word{transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.5s + var(--word-index,0)*.1s)}.has-js .scene-copy{transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(1s + var(--word-count,5)*.1s)}.has-js .story-section:not(.is-revealed) .emphasis::after{transform:scaleX(0)}.has-js .emphasis::after{transition:transform .5s var(--ease);transition-delay:calc(.65s + var(--word-index,0)*.1s)}
.start-section{padding:72px 20px 56px;background:var(--staff);color:var(--ink);min-height:100svh}.start-inner{max-width:1120px;margin:0 auto}.start-heading{margin-bottom:28px}.start-heading h2{font-size:30px;line-height:1.22;font-weight:800;letter-spacing:-.02em;margin-top:20px}.start-cards{display:grid;gap:20px;align-items:start}.start-card{min-width:0;padding:24px;border-radius:28px;background:var(--white);border:1px solid var(--border);box-shadow:0 12px 36px rgba(31,42,34,.05)}.card-role{font-size:12px;font-weight:800;color:var(--green);display:block;margin-bottom:12px}.client-card .card-role{color:var(--ochre)}.start-card h3{font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.3}.start-card>p{font-size:16px;font-weight:500;line-height:1.65;margin-top:14px;color:var(--muted)}.start-card>.button{width:100%;margin-top:24px}.client-card>.button{font-size:16px;padding:0 8px}.form-guidance{font-size:13px;line-height:1.5;color:var(--muted);margin:26px 0 20px;padding-top:24px;border-top:1px solid var(--border)}.form-guidance span,.field label>span{color:var(--green)}.field{margin:0 0 20px;min-width:0}.field label{font-size:14px;font-weight:750;display:block;margin-bottom:8px}.field input,.field textarea,.share-fallback textarea{display:block;width:100%;max-width:100%;height:48px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--white);color:var(--ink);font-size:16px;line-height:1.5;appearance:none}.field input::placeholder{color:var(--muted);opacity:1}.field textarea,.share-fallback textarea{height:auto;min-height:120px;resize:vertical;word-break:normal;overflow-wrap:anywhere}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-hint,.field-error,.character-count{font-size:13px;font-weight:500;line-height:1.6;margin-top:7px;color:var(--muted)}.character-count{text-align:right;font-variant-numeric:tabular-nums}.field-error,.form-error{color:var(--red);font-weight:700}.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red)}.consent-field{margin:4px 0 24px}.consent-row{display:flex;align-items:flex-start;gap:10px}.consent-row input{appearance:auto;accent-color:var(--green);width:20px;height:20px;flex:none;margin:2px 0}.consent-row label{font-size:14px;font-weight:650;line-height:1.6}.consent-field details{margin-top:10px;padding-left:30px;font-size:13px;line-height:1.65;color:var(--muted)}.consent-field summary{cursor:pointer;color:var(--green);font-weight:700;min-height:32px}.consent-field dl{margin:10px 0}.consent-field dt{font-weight:750;color:var(--ink);margin-top:10px}.consent-field dd{margin:2px 0 0}.honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}#apply-submit{width:100%}.form-error{font-size:14px;line-height:1.6;margin-top:14px}.success-card{padding-top:26px;border-top:1px solid var(--border);margin-top:26px}.success-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--staff);color:var(--green);font-size:26px;font-weight:750;margin-bottom:18px}.success-card p{font-size:16px;line-height:1.65;color:var(--muted);margin-top:12px}.share-fallback{margin-top:20px}.share-fallback label{display:block;font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:8px}.share-fallback textarea{font-size:16px}.site-footer{padding:32px 20px 48px;background:var(--staff);color:var(--green);border-top:1px solid var(--border);display:flex;align-items:center;flex-direction:column;gap:20px}.site-footer nav{display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.7;text-align:center;color:var(--muted)}.site-footer nav a{text-decoration:none}.site-footer nav a:hover{text-decoration:underline}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;max-width:calc(100% - 40px);width:max-content;padding:14px 18px;border-radius:12px;background:var(--ink);color:var(--white);font-size:15px;line-height:1.6;box-shadow:0 8px 30px rgba(31,42,34,.22);text-align:center}
#story-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:48px 20px 24px;border:0;background:rgba(31,42,34,.96);color:var(--white);overflow:auto}#story-dialog::backdrop{background:transparent}#story-dialog[open]{display:flex;align-items:center;justify-content:center}.story-dialog-content{width:min(100%,calc((100svh - 96px)*9/16));max-width:540px;position:relative}.dialog-close{position:fixed;right:12px;top:8px;width:48px;height:48px;border-radius:50%;color:var(--white);background:transparent;font-size:24px;z-index:2}#story-video{display:block;width:100%;aspect-ratio:9/16;max-height:calc(100svh - 180px);object-fit:contain;background:var(--ink);border-radius:20px}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.dialog-actions .button{background:transparent;border-color:var(--white);color:var(--white);font-size:14px;padding:0 8px}.dialog-actions .button:hover{background:rgba(255,255,255,.1)}body.modal-open{overflow:hidden}
@media(min-width:600px) and (max-width:1023px){.scene-layout{max-width:430px}.scene-text{max-width:430px}.scene-media{max-width:360px}.start-cards{max-width:640px;margin:0 auto}.start-heading{max-width:640px;margin:0 auto 28px}.hero-actions{max-width:360px;margin-left:auto;margin-right:auto}}
@media(min-width:1024px){html{scroll-padding-top:96px}.site-header{padding-left:max(40px,calc((100vw - 1120px)/2));padding-right:max(40px,calc((100vw - 1120px)/2))}.progress-track{top:96px;bottom:48px;left:auto;right:20px;width:2px;height:auto}#reading-progress{transform:scaleY(0);transform-origin:center top}#story-sections{max-width:1120px;margin:0 auto}.story-section{padding:56px 0;min-height:100svh}.scene-layout{max-width:none;width:100%;display:grid;grid-template-columns:520px 400px;justify-content:space-between;align-items:center;column-gap:40px;min-height:calc(100svh - 112px)}.scene-text{grid-column:1;grid-row:1}.scene-title{font-size:48px}.scene-chip{font-size:13px;padding:6px 12px;margin-bottom:24px}.scene-copy{font-size:20px;line-height:1.65;max-width:500px}.scene-media{grid-column:2;grid-row:1;max-width:400px;width:400px;margin:0;box-shadow:none;visibility:hidden}.hero .scene-layout{grid-template-rows:auto auto auto;align-content:center;row-gap:0}.hero .scene-text{grid-row:1}.hero .scene-media{grid-row:1 / span 3}.hero-actions{grid-column:1;grid-row:2;max-width:360px;margin-top:32px}.scroll-cue{grid-column:1;grid-row:3;max-width:360px;margin-top:24px}#desktop-rail{display:block;position:absolute;top:44px;bottom:56px;right:0;width:400px;z-index:5;pointer-events:none;opacity:1;transition:opacity .3s ease}#desktop-rail.is-hidden{opacity:0}#desktop-pin{position:sticky;top:96px;width:100%;pointer-events:auto}.desktop-phone{width:400px;padding:10px;background:var(--ink);border-radius:44px;box-shadow:0 24px 60px rgba(31,42,34,.22)}#desktop-screen{width:100%;aspect-ratio:9/16;position:relative;background:var(--pale);border-radius:34px;overflow:hidden}.desktop-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .3s ease}.desktop-slide.is-active{opacity:1;pointer-events:auto}.desktop-slide .scene-video{border-radius:0}.helper-section{min-height:200svh}.helper-section .scene-layout{min-height:calc(200svh - 112px);display:grid;grid-template-columns:520px 400px;align-items:start}.helper-section .scene-text{position:sticky;top:calc(96px + 120px);margin-top:120px}.helper-sticky{grid-column:2;grid-row:1;position:relative;top:auto;min-height:calc(200svh - 112px);margin:0;display:flex;align-items:flex-start;justify-content:center}.helper-sticky .scene-media{position:sticky;top:96px;margin-top:0;flex:none}.helper-step{position:static;width:auto;margin:10px 0 0;color:var(--ochre);font-size:18px;font-weight:750}.story-open{grid-column:1;grid-row:2;justify-self:start;margin:24px 0 0;align-self:start}#together .scene-layout{grid-template-rows:auto auto;align-content:center}#together .scene-media{grid-row:1 / span 2}.start-section{padding:100px 40px 88px}.start-heading{margin-bottom:36px}.start-heading h2{font-size:48px;margin-top:24px}.start-cards{grid-template-columns:1fr 1fr;gap:28px}.start-card{padding:36px;border-radius:28px}.start-card h3{font-size:28px}.start-card>p{max-width:410px}.start-card>.button{max-width:100%}.client-card>.button{font-size:17px}.site-footer{padding:36px max(40px,calc((100vw - 1120px)/2));flex-direction:row;justify-content:space-between}.site-footer nav{flex-direction:row;gap:28px}.story-dialog-content{max-width:460px}.dialog-actions .button{font-size:15px}}
@media(min-width:1024px) and (max-width:1199px){#story-sections{margin-left:40px;margin-right:40px}.scene-layout,.helper-section .scene-layout{grid-template-columns:minmax(0,520px) 360px;gap:28px}.scene-title{font-size:44px}#desktop-rail,.desktop-phone,.scene-media{width:360px}.scene-copy{max-width:460px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.has-js .story-section .scene-chip,.has-js .story-section .word,.has-js .story-section .scene-copy{opacity:1!important;transform:none!important}.has-js .story-section .emphasis::after{transform:none!important}}

/* The first scene stays inline; the shared phone resumes after the hero. */
body.hero-visible[data-theme="dark"]{--page:#1F2B24}
body.hero-visible .site-header{background:color-mix(in srgb,#1F2B24 88%,transparent);color:var(--white)}
body.hero-visible #header-view{visibility:hidden}
body.hero-visible #desktop-rail{visibility:hidden;opacity:0;pointer-events:none;transition:none}
#top{isolation:isolate;background:#1F2B24;min-height:calc(100svh - 52px);height:calc(100svh - 52px);padding:10px 20px}
#top::before{content:"";position:absolute;inset:0;z-index:-1;background:#1F2B24;box-shadow:0 0 0 100vmax #1F2B24;clip-path:inset(0 -100vmax)}
#top .scene-layout{height:100%;min-height:0;max-width:430px;display:flex;flex-direction:column;justify-content:center}
#top .scene-text{width:100%;max-width:none;flex:none}
#top .scene-chip{margin-bottom:8px}
#top .scene-copy{margin-top:8px;line-height:1.5}
#top .scene-media{flex:none;width:100%;max-width:none;height:42svh;aspect-ratio:auto;margin:4px auto;visibility:visible;background:transparent;border:0;border-radius:0;box-shadow:none;mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%)}
#top .scene-video{object-fit:cover;border-radius:0}
#top .loop-cover{border-radius:0}
#top .hero-actions{width:100%;max-width:none;flex:none;display:grid;grid-template-columns:1fr;gap:8px;margin:4px 0 0}
#top .admin-link{padding:0}
#top .scroll-cue{flex:none;margin-top:6px;max-width:none;font-size:12px;line-height:1.4}
@media(max-width:1023px) and (max-height:800px){#top .scene-chip{margin-bottom:6px}#top .scene-copy{font-size:14px;margin-top:6px}}
@media(min-width:1024px){
  #top{padding:0}
  #top .scene-layout{position:relative;left:50%;transform:translateX(-50%);width:min(1120px,calc(100vw - 48px));max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto auto;column-gap:40px;row-gap:0;align-content:center;align-items:center}
  #top .scene-text{grid-column:1;grid-row:1;align-self:end}
  #top .scene-chip{margin-bottom:24px}
  #top .scene-title{font-size:56px}
  #top .scene-copy{font-size:20px;line-height:1.65;max-width:460px;margin-top:16px}
  #top .scene-media{grid-column:2;grid-row:1 / span 2;align-self:center;width:400px;height:min(540px,calc(100svh - 220px));margin:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%);mask-composite:intersect}
  #top .hero-actions{grid-column:1;grid-row:2;align-self:start;width:452px;max-width:100%;grid-template-columns:220px 220px;column-gap:12px;row-gap:16px;margin:40px 0 0}
  #top .hero-actions .button{width:220px;height:56px;min-height:56px}
  #top .button-secondary{background:transparent;border:1.5px solid var(--white);color:var(--white)}
  #top .button-secondary:hover{background:rgba(255,255,255,.08)}
  #top .admin-link{grid-column:1 / -1;text-align:left;justify-self:start}
  #top .scroll-cue{position:absolute;left:0;right:0;bottom:28px;width:100%;margin:0;font-size:13px;line-height:1.7;grid-column:auto;grid-row:auto}
}

/* PC 오른쪽 휴대폰: 화면 높이가 낮아도(노트북·배율 125%) 위아래가 잘리지 않게 높이에 맞춰 줄임 */
@media(min-width:1024px){.desktop-phone{width:min(400px,calc((100svh - 128px) * 9 / 16 + 20px));margin:0 auto}}
@media(min-width:1024px) and (max-width:1199px){.desktop-phone{width:min(360px,calc((100svh - 128px) * 9 / 16 + 20px))}}
/* 이미 쓰는 거래처로 들어온 경우(?from=client-…): 담당자용 신청·관리자 링크를 숨기고 '돌아가기' 카드만 */
.for-client #top .hero-actions,.for-client #apply-card,.for-client #share-card,.for-client .dialog-actions,.for-client .admin-link,.for-client .site-footer a[href="/#admin"]{display:none!important}
.for-client .start-cards{grid-template-columns:1fr;max-width:560px;margin:0 auto}
.for-client .start-heading{max-width:560px;margin-left:auto;margin-right:auto}