/* 로그인 전 첫 화면 5판 — Codex 시안 '01 시네마'(차콜과 세이지, 작품 중심) 그대로. 모든 규칙은 #landing 안이라 작업 화면(app.css)과 섞이지 않는다.
   글꼴: Pretendard 하나(우리 서버 /fonts, SIL OFL) — 시안의 영문·한글 글꼴 섞임을 없앰. 색·크기·간격은 시안 값, 세로 간격만 화면 높이에 맞춰 줄어듦(1440×900 한 화면). */
@import url(/fonts/fonts.css?v=1);
#landing{display:none}
/* 로그인 여부를 알기 전에는 예전 화면을 잠깐도 비치지 않음(app.js 가 workspace-open 을 붙이면 보임) — 스크립트가 못 떠도 4초 뒤엔 보임 */
body:not(.workspace-open):not(.cw-ready)>header,body:not(.workspace-open):not(.cw-ready)>main,body:not(.workspace-open):not(.cw-ready)>footer{visibility:hidden;animation:ld-failsafe 0s linear 4s forwards}
@keyframes ld-failsafe{to{visibility:visible}}
body.landing-on{background:#111715;margin:0}
body.landing-on>main{max-width:none;margin:0;padding:0;width:auto}
body.landing-on #landing{display:block}
body.landing-on>header,body.landing-on #workspace,body.landing-on #workspace-mobile-bar,body.landing-on #guest-banner,body.landing-on>footer,body.landing-on #workspace-drawer-backdrop{display:none!important}
#landing-back{display:none}
body.workspace-guest:not(.landing-on) #landing-back{display:inline-flex;align-items:center;margin-left:8px;padding:7px 12px;border:1px solid #ffffff40;border-radius:4px;background:none;color:inherit;font:inherit;font-size:12px;cursor:pointer}

#landing{--sage:#d4ddc5;--sage2:#adba9d;--muted:#919894;--gut:max(4%,calc((100% - 1800px) / 2));
  background:#111715;color:#ededeb;font-family:'Pretendard Variable',Pretendard,'Malgun Gothic',sans-serif;font-size:16px;line-height:1.6;letter-spacing:0;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;margin:0;max-width:none;padding:0;border:0;border-radius:0;box-shadow:none} /* 랜딩 바깥 틀(section)에도 사이트 공통 상자 규칙을 끔 */
#landing *{box-sizing:border-box}
#landing nav,#landing figure,#landing footer,#landing section,#landing ol,#landing li,#landing dialog{border:0;border-radius:0;box-shadow:none;background:transparent;max-width:none;margin:0;padding:0} /* 사이트 공통 상자 규칙(app.css)을 랜딩에서는 끔 */
#landing h1,#landing h2,#landing h3,#landing p{margin:0;font-weight:inherit;letter-spacing:inherit}
#landing a{color:inherit;text-decoration:none}
#landing button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;letter-spacing:inherit}
#landing a:focus-visible,#landing button:focus-visible{outline:2px solid var(--sage);outline-offset:4px;border-radius:2px}
#landing h1:focus{outline:none}
#landing ::selection{background:var(--sage);color:#171d16}
#landing .ld-label{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

/* 위 메뉴 */
#landing .ld-nav{height:clamp(68px,9.4vh,94px);display:flex;align-items:center;justify-content:space-between;gap:30px;margin:0 var(--gut);border-bottom:1px solid #ffffff1a}
#landing .ld-brand{display:flex;gap:11px;align-items:center;font-size:12.5px;font-weight:650;letter-spacing:1.6px;line-height:1.35}
#landing .ld-mark{font-size:31px;font-weight:300;letter-spacing:-5px;width:40px;line-height:1}
#landing .ld-links{display:flex;gap:33px;font-size:13px;align-items:center}
#landing .ld-links a{opacity:.92;transition:opacity .2s}
#landing .ld-links a:hover{opacity:1;color:#fff}
#landing .ld-end{display:flex;gap:25px;align-items:center;font-size:13px}
#landing .ld-lang{font-size:13px;color:#c9cdc9}
#landing .ld-outline{display:inline-flex;align-items:center;gap:6px;border:1px solid #ffffff45;padding:11px 19px;border-radius:4px;font-size:13px;transition:border-color .2s,background .2s}
#landing .ld-outline:hover{border-color:var(--sage);background:#ffffff0a}

/* 첫 칸 */
#landing .ld-hero{margin:0 var(--gut);padding:clamp(24px,4.4vh,66px) 0 clamp(20px,4vh,48px);display:grid;grid-template-columns:1fr 1.04fr;gap:clamp(40px,3.6vw,64px);align-items:center}
#landing .ld-copy{min-width:0}
#landing h1{font-size:clamp(36px,min(4.7vw,7.2vh),68px);line-height:1.23;font-weight:450;letter-spacing:-.045em;margin:clamp(14px,2.6vh,25px) 0 clamp(14px,2.4vh,23px);word-break:keep-all}
#landing h1 em{font-style:normal;color:var(--sage2)}
#landing .ld-desc{font-size:14.5px;line-height:1.95;color:#a3aaa5;margin:0 0 clamp(18px,2.6vh,31px);max-width:27em;word-break:keep-all}
#landing .ld-desc span{display:block}
#landing .ld-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px}
#landing .ld-cta{display:inline-flex;align-items:center;gap:34px;padding:16px 23px;border-radius:4px;background:var(--sage);color:#171d16;font-size:14px;font-weight:600;transition:background .2s}
#landing .ld-cta:hover{background:#e2e9d6}
#landing .ld-text{font-size:13px;border-bottom:1px solid currentColor;padding-bottom:5px;transition:color .2s}
#landing .ld-text:hover{color:var(--sage)}
#landing .ld-tri{font-size:8px;margin-left:8px;vertical-align:1px;color:var(--sage)}
#landing .ld-heroot{display:flex;flex-wrap:wrap;gap:8px 25px;margin-top:clamp(16px,2.6vh,45px);font-size:11px;letter-spacing:1px;color:#929b94}
#landing .ld-heroot span:before{content:'·';color:var(--sage);margin-right:7px}

#landing .ld-feature{min-width:0}
#landing .ld-frame{position:relative;height:clamp(240px,37.4vh,377px);overflow:hidden;border-radius:2px;background:#000}
#landing .ld-shot{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#1a211e}
#landing .ld-inline{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
#landing .ld-inline[hidden],#landing .ld-shot[hidden],#landing .ld-close[hidden]{display:none}
#landing .ld-close{position:absolute;z-index:3;top:12px;right:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#111715c0;border:1px solid #ffffff55;font-size:13px}
#landing .ld-close:hover{border-color:var(--sage)}
#landing .ld-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 0%;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#landing .ld-shot:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 70%,#0a111188);pointer-events:none}
#landing .ld-shot:hover img{transform:scale(1.025)}
#landing .ld-tag{position:absolute;z-index:2;top:18px;left:18px;padding:7px 10px;border:1px solid #ffffff55;background:#11171570;font-size:9.5px;font-weight:600;letter-spacing:1.2px}
#landing .ld-play{position:absolute;z-index:2;right:18px;bottom:18px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff70;border-radius:50%;background:#11171570;font-size:11px;padding-left:2px;opacity:.9;transition:background .2s,border-color .2s}
#landing .ld-shot:hover .ld-play{background:#111715c0;border-color:var(--sage)}
#landing .ld-feature figcaption{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;padding-top:17px;color:#bac0bb}
#landing .ld-feature figcaption small{color:#7f8b83;font-size:10px;letter-spacing:.5px}

/* 작업 과정 */
#landing .ld-flow{background:#171e1a}
#landing .ld-flow-in{padding:clamp(22px,3.8vh,40px) var(--gut) clamp(24px,4.6vh,52px)}
#landing .ld-flow-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}
#landing .ld-flow h2{font-size:22.5px;font-weight:500;letter-spacing:-.7px}
#landing .ld-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #ffffff24}
#landing .ld-steps li{padding:24px 24px 0 0}
#landing .ld-steps small{font-size:10.5px;color:#8d958e;letter-spacing:1px}
#landing .ld-steps h3{font-size:16.5px;font-weight:500;margin:14px 0 8px}
#landing .ld-steps p{font-size:13.5px;line-height:1.8;color:#9ca29e;max-width:19em;word-break:keep-all}
#landing .ld-foot{margin:0 var(--gut);border-top:1px solid #ffffff1d;padding:clamp(14px,2vh,25px) 0;display:flex;justify-content:space-between;gap:20px;color:#8f9691;font-size:10.5px;letter-spacing:1px;text-transform:none}
#landing #landing-flow,#landing #landing-work{scroll-margin-top:16px}


/* 큰 화면(폭 1600 이상): 1440 기준 시안이 작아 비어 보이지 않게 글자·사진·간격을 함께 키움(10/2 사장님 "비어 보인다") */
@media (min-width:1600px){
  #landing .ld-nav{height:clamp(68px,8.8vh,104px)}
  #landing .ld-flow-in{padding-top:clamp(20px,2.8vh,40px);padding-bottom:clamp(24px,3.6vh,52px)}
  #landing .ld-brand{font-size:13px}
  #landing .ld-mark{font-size:35px;width:46px}
  #landing .ld-links,#landing .ld-end,#landing .ld-lang,#landing .ld-outline{font-size:14px}
  #landing .ld-links{gap:40px}
  #landing .ld-outline{padding:12px 22px}
  #landing .ld-label{font-size:11px}
  #landing .ld-hero{gap:clamp(48px,3.4vw,72px);padding-top:clamp(24px,4.2vh,66px);padding-bottom:clamp(18px,2.4vh,48px)}
  #landing .ld-feature figcaption{padding-top:12px}
  #landing .ld-flow-head{margin-bottom:18px}
  #landing .ld-foot{padding:clamp(12px,1.3vh,25px) 0}
  #landing h1{font-size:clamp(36px,min(4.8vw,7.8vh),92px)}
  #landing .ld-desc{font-size:16.5px}
  #landing .ld-cta{font-size:15px;padding:18px 28px;gap:40px}
  #landing .ld-text{font-size:14.5px}
  #landing .ld-heroot{font-size:12.5px}
  #landing .ld-frame{height:clamp(240px,48.4vh,460px)}
  #landing .ld-tag{font-size:10.5px;top:20px;left:20px;padding:8px 12px}
  #landing .ld-feature figcaption{font-size:14px}
  #landing .ld-feature figcaption small{font-size:11px}
  #landing .ld-flow h2{font-size:26px}
  #landing .ld-steps small{font-size:11px}
  #landing .ld-steps h3{font-size:19px}
  #landing .ld-steps p{font-size:15px;max-width:25em}
  #landing .ld-foot{font-size:11px}}
/* 좁은 화면(시안 휴대폰 배치) */
@media (max-width:959px){ /* 두 칸 배치는 폭 960 부터 — 그보다 좁으면 사진 상자가 정사각형에 가까워져 인물·연기가 잘림 */
  #landing .ld-nav{height:68px;gap:14px}
  #landing .ld-links{display:none}
  #landing .ld-brand{font-size:10px}
  #landing .ld-end{gap:14px}
  #landing .ld-outline{padding:9px 14px}
  #landing .ld-hero{grid-template-columns:1fr;gap:34px;padding-top:36px}
  #landing h1{font-size:clamp(32px,10.4vw,39px);letter-spacing:-.04em}
  #landing .ld-heroot{margin-top:25px;gap:8px 13px;font-size:10px}
  #landing .ld-tag{left:auto;right:10px;top:10px;padding:5px 8px;font-size:8.5px;letter-spacing:1px} /* 좁은 사진에선 왼쪽 위가 인물 머리라 하늘이 빈 오른쪽 위로 */
  #landing .ld-play{right:12px;bottom:12px;width:38px;height:38px}
  #landing .ld-frame{height:auto;aspect-ratio:16/9} /* 좁은 화면은 비율로 — 태블릿 폭에서 납작해져 아래(손·강 불빛)가 잘리던 것 막음 */
  #landing .ld-steps{grid-template-columns:1fr 1fr;gap:0 15px}
  #landing .ld-steps li{padding-top:17px;padding-bottom:4px}
  #landing .ld-flow-head{flex-direction:column;align-items:flex-start;gap:8px}
  #landing .ld-flow-head .ld-label{font-size:8.5px}
  #landing .ld-flow h2{font-size:19px}}
@media (max-width:380px){#landing .ld-tag{font-size:7.5px;padding:4px 6px;letter-spacing:.6px}#landing .ld-brand{letter-spacing:1px}#landing .ld-end{gap:10px}#landing .ld-outline{padding:8px 11px}#landing .ld-steps{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#landing *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* 10/8 사업자 정보(주소 제외) — 하단 왼쪽 브랜드 아래 작은 한 줄 */
.ld-foot{align-items:flex-end}
.ld-foot-l{display:flex;flex-direction:column;gap:5px;min-width:0}
.ld-biz{color:#737a76;font-size:10.5px;letter-spacing:0;line-height:1.5;overflow-wrap:anywhere}
.ld-foot-l,.ld-foot-l *{text-align:left}
@media (max-width:900px){.ld-foot{flex-direction:column;align-items:flex-start;gap:8px;text-align:left}.ld-foot>span{text-align:left}}