/* Landing styles are isolated from the project workspace. */
.landing-route .project-home,.project-route .landing{display:none}
/* 랜딩도 **앱과 같은 기둥**에 선다 (L08/R1). 예전엔 왼쪽선이 둘이었다 — 히어로는
   `--pad`(1440px 에서 72px)에서, 그 아래 `.in-w` 섹션은 max-width 1280 + pad 라 152px
   에서 시작했다. 내비 로고(80)와도 안 맞았다. `--col`·`--gut` 하나로 모은다. */
.landing{--pad:var(--gut);color:#f5f2eb;background:var(--void);overflow:hidden;font-family:var(--body)}
.landing *{box-sizing:border-box}
.landing h1,.landing h2,.landing h3,.landing p{margin:0;word-break:keep-all}
.landing h1,.landing h2,.landing h3{font-family:var(--disp);letter-spacing:-.055em}
.landing a{text-decoration:none}
.landing .in-w{max-width:calc(var(--col) + var(--gut)*2);margin:auto;padding:0 var(--pad)}
.hero{max-width:calc(var(--col) + var(--gut)*2);margin:auto;padding:88px var(--pad) 72px;display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center;min-height:760px}
.hero-kicker,.eyebrow{display:block;color:var(--hot);font-size:var(--t-md);font-weight:600;letter-spacing:.03em;margin-bottom:26px}
.hero h1{font-size:clamp(48px,5.6vw,80px);line-height:1.16;font-weight:900}
.hero h1 em{font-style:normal;color:var(--hot)}
.hero-sub{font-size:var(--t-2xl);color:var(--ink-2);line-height:1.85;margin-top:24px!important;max-width:440px}
.cta{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:54px;padding:16px 24px;font-size:var(--t-xl);font-weight:700;border-radius:8px}
.cta.primary{background:var(--hot);color:#160d03}.cta.primary:hover{background:#ffb65d}
.cta.ghost{color:#eeeee7;padding:15px 0}.cta.ghost:hover{color:var(--hot)}
.hero-showcase{position:relative;background:#29211b;border:1px solid #ffffff13;border-radius:176px 176px 24px 24px;padding:32px 20px 24px;text-align:center;min-width:0;background-image:radial-gradient(ellipse at 50% 30%,#664022,transparent 70%)}
.showcase-label{font-size:var(--t-base);color:#ddcfc3;letter-spacing:.03em}.stage{position:relative;height:445px;margin:24px auto 8px;max-width:440px}
.phone{position:absolute;left:55%;top:0;width:235px;aspect-ratio:9/16;transform:translateX(-50%) rotate(5deg);border-radius:24px;overflow:hidden;background:#18191C;border:5px solid #18191C;box-shadow:0 24px 55px #0007;transition:transform var(--dur-3) var(--ease)}
.phone .pshow,.pslide{position:absolute;inset:0;width:100%;height:100%}.pslide{opacity:0;transition:opacity var(--dur-5) var(--ease-inout)}.pslide.on{opacity:1}.phone .pfall{position:absolute;inset:0;display:grid;place-items:center;padding:24px;color:#f5e4d2;background:linear-gradient(145deg,#64432d,#26201c);font-size:var(--t-2xl);line-height:1.6}.phone .pfall[hidden]{display:none}
.source-peek{position:absolute;left:0;top:100px;width:220px;height:145px;transform:rotate(-9deg);border:5px solid #866043;border-radius:12px;overflow:hidden;box-shadow:0 16px 28px #0004}.source-peek img{width:100%;height:100%;object-fit:cover}.source-peek span{position:absolute;left:10px;bottom:9px;background:#111b;padding:4px 8px;border-radius:4px;color:#fff;font-size:var(--t-sm)}
.showcase-tag{position:absolute;right:0;bottom:28px;background:#ffd3a0;color:#40240e;padding:12px 16px;transform:rotate(-5deg);font-size:var(--t-md);font-weight:700;box-shadow:0 5px 20px #0002}.showcase-link{font-size:var(--t-base);color:#ddcfc3}
.format-strip{border-top:1px solid #ffffff18;border-bottom:1px solid #ffffff18;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px var(--pad);max-width:calc(var(--col) + var(--gut)*2);margin:0 auto;font-size:var(--t-md);color:var(--ink-2)}.format-strip div{font-size:var(--t-xl);color:#ebe7e2}
/* 왼쪽은 **무엇을 하라는 말**, 오른쪽은 **어디로 가는가**. 둘 사이에 방향(↑ 업로드)이 있어야
   '우리 계정 팔로우' 로 안 읽힌다. 마크는 이름과 한 칩 안에 들어간다 — 마크만 떼어 늘어놓으면
   그건 바닥 띠의 소셜 링크 줄과 같은 모양이다. */
.fmt-lead{display:flex;flex-direction:column;gap:4px}
.fmt-lead b{font-size:var(--t-xl);color:#ebe7e2;font-weight:700}
.fmt-lead i{font-style:normal;font-size:var(--t-base);color:var(--ink-3)}
.fmt-flow{display:flex;align-items:center;gap:16px;min-width:0}
.fmt-out{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);letter-spacing:.06em;
  color:var(--hot);white-space:nowrap}
.fmt-out svg{width:13px;height:13px}
.fmt-logos{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0;
  flex-wrap:wrap;min-width:0}
/* 칩은 **읽는 자리이지 누르는 자리가 아니다** — 바깥 링크가 아니라서 커서·밑줄을 주지 않는다 */
.fmt-logos li{display:flex;align-items:center;gap:8px;color:#ebe7e2;font-size:var(--t-md);
  border:1px solid #ffffff1f;border-radius:var(--r-full);padding:8px 16px;background:#ffffff08}
/* 마크는 저마다 무게가 달라 **같은 높이로 세우면 크기가 달라 보인다** (유튜브 마크는 가로로
   넓어 같은 값이면 혼자 커 보인다) */
.fmt-ic{display:block;width:auto;opacity:.9}
.fmt-yt{height:14px}.fmt-ig{height:16px}.fmt-tt{height:15px}
.outs,.how,.faq{padding:100px 0}.sec-title{font-size:clamp(32px,4vw,52px);line-height:1.22}.sec-lead{color:var(--ink-2);font-size:var(--t-xl);line-height:1.8;margin-top:20px!important}.head{margin-bottom:42px}.out-grid{display:grid;grid-template-columns:repeat(3,minmax(0,260px));gap:24px;justify-content:center}.out-card{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:var(--panel);cursor:pointer;margin:0;border:1px solid #ffffff20}.out-card img,.out-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.out-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 16px 20px;background:linear-gradient(transparent,#08080aed);color:white;font-size:var(--t-lg);pointer-events:none}.out-card figcaption em{display:block;font-size:var(--t-sm);margin-top:8px;font-style:normal;color:#c9c4be}.out-card .play{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--t-5xl);color:white;text-shadow:0 2px 15px #000}.out-card.on .play,.out-card.on figcaption{display:none}
.how{background:#f2ede7;color:#30251c}.how .eyebrow{color:#a55113}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:55px}.step{border-top:1px solid #30251c38;padding-top:22px}.step .n{font-size:var(--t-base);color:#8b6244}.step h3{font-size:var(--t-3xl);margin-top:32px}.step p{font-size:var(--t-lg);color:#706156;line-height:1.85;margin-top:15px}
.hero-copy{min-width:0}.hero-box{container-type:inline-size;text-align:left;margin-top:24px;scroll-margin-top:100px}.landing .urlbox{margin-top:0}.hero-copy .cta.primary{background:transparent;color:var(--ink-2);padding-left:0;min-height:40px}.hero-copy .cta.ghost{min-height:40px}
.faq{padding-top:90px}.faq .in-w{max-width:950px}.faq .head{text-align:center}.faq .eyebrow{display:none}.faq details{border-bottom:1px solid #ffffff20}.faq summary{gap:20px;padding:24px 0;font-size:var(--t-xl);font-weight:600}.faq summary::after{width:18px;height:18px;color:#c6b5a7}.faq .a{color:var(--ink-2);line-height:1.85;font-size:var(--t-lg);padding:0 35px 24px 0}.faq .faq-more{margin:var(--sp-24) 0 0;text-align:center;font-size:var(--t-md)}.faq .faq-more a{color:var(--hot);text-decoration:none;border-bottom:1px solid currentColor}
/* 바닥 띠는 전체 폭 배경이라 max-width 를 못 쓴다 — 내비와 같은 방법으로 맞춘다 */
.landing-footer{border-top:1px solid #ffffff20;padding:40px max(var(--gut),calc((100% - var(--col))/2)) 32px}.foot-top{display:flex;justify-content:space-between;gap:40px}.foot-brand p{font-size:var(--t-md);color:var(--ink-3);margin-top:12px;max-width:280px;line-height:1.6}.foot-cols{display:flex;gap:64px}.foot-cols div{display:flex;flex-direction:column;gap:10px;min-width:110px}.foot-cols h3{font-size:var(--t-base);font-weight:600;color:var(--ink-2);margin-bottom:4px}.foot-cols a{font-size:var(--t-md);color:var(--ink-3)}.foot-cols a:hover{color:#dfd4ca}.foot-cols b{font-weight:700;color:#dfd4ca}.foot-legal{margin-top:32px;padding-top:20px;border-top:1px solid #ffffff14;font-size:var(--t-base);line-height:1.8;color:var(--ink-3)}.foot-co span{display:inline-block;margin-right:16px}.foot-co b{font-weight:500;color:var(--ink-2);margin-right:4px}.foot-co a{color:inherit}.foot-copy{margin-top:8px}.landing :focus-visible{outline:2px solid var(--hot);outline-offset:5px}.landing section{scroll-margin-top:85px}
@media(min-width:1500px){.hero{min-height:820px}}
@media(max-width:1000px){.hero{gap:24px;padding-top:60px}.hero h1{font-size:clamp(42px,5.6vw,64px)}.phone{width:210px}.stage{height:410px}.source-peek{width:160px;height:115px}.showcase-tag{font-size:var(--t-sm);padding:12px}.fmt-flow{gap:12px}.fmt-logos{gap:6px}}
@media(max-width:720px){.hero{grid-template-columns:1fr;padding-top:40px;gap:40px;min-height:auto}.hero h1{font-size:clamp(42px,9.8vw,64px)}.hero-sub{font-size:var(--t-xl)}.hero-showcase{max-width:420px;width:100%;justify-self:center}.hero-kicker{margin-bottom:22px}.cta{font-size:var(--t-lg);padding:14px 17px}.format-strip{flex-direction:column;align-items:flex-start;gap:12px}.format-strip div{font-size:var(--t-md)}.fmt-flow{flex-wrap:wrap;gap:10px;width:100%;min-width:0}.fmt-logos li{font-size:var(--t-base);padding:6px 12px}.outs,.how{padding:65px 0}.steps{grid-template-columns:1fr;gap:30px}.step h3{margin-top:18px}.out-grid{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.out-card:last-child{display:none}.out-card figcaption{font-size:var(--t-base);padding:35px 10px 12px}.faq{padding:15px 0 65px}.faq summary{font-size:var(--t-lg)}.foot-top{flex-direction:column;gap:28px}.foot-cols{gap:40px}.showcase-label{font-size:var(--t-sm)}}
/* 모션 줄이기는 style.css 의 전역 규칙 하나가 맡는다 (UI 점검 R6-09) — 여기서 animation:none 을 또 걸면 끝 상태에 기대는 등장이 끝값을 못 받는다 */
/* A visible input first; the scroll story explains what the single request takes care of. */
.hero h1{line-height:1.18}
.flow-layout{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}.flow-intro{position:sticky;top:135px;padding:35px 0}.flow-intro .sec-title{font-size:clamp(30px,3.1vw,45px)}.click-mark{display:flex;align-items:center;gap:20px;margin-top:48px;color:#c76516}.click-mark b{font-size:clamp(80px,9vw,130px);line-height:1;font-weight:900;letter-spacing:-.08em}.click-mark span{font-size:var(--t-lg);line-height:1.7;letter-spacing:.12em}.flow-footnote{font-size:var(--t-base);color:#806d5c;margin-top:20px!important}.flow-stages{display:grid;gap:30px}.flow-step{position:relative;padding:40px;background:#fff9f1;border:1px solid #d8c5b2;border-radius:24px;min-height:370px}.flow-owner{font-size:var(--t-base);color:#a55113;font-weight:700}.flow-step .n{float:right;color:#9d8773;font-size:var(--t-base)}.flow-step h3{font-size:clamp(21px,2.2vw,27px);margin-top:26px}.flow-step>p,.optional-edit p{font-size:var(--t-lg);line-height:1.8;color:#706156;margin-top:16px}.flow-visual{margin-top:32px;border-radius:12px;background:#eadbcb;padding:24px;color:#56351b}.source-symbol{display:flex;align-items:center;gap:16px;min-height:90px}.source-symbol>span{display:grid;place-items:center;width:44px;height:34px;border-radius:6px;background:#fff9f1}.source-symbol b{font-size:var(--t-lg)}.source-symbol i{margin-left:auto;font-style:normal;font-size:var(--t-4xl)}.auto-symbol{display:flex;gap:10px;background:none;padding:0}.auto-symbol span{flex:1;padding:20px 10px;background:#eadbcb;border-radius:12px;font-size:var(--t-base);text-align:center}.auto-symbol i{display:block;margin-top:16px;font-style:normal;font-size:var(--t-3xl);color:#ad5714}.result-symbol{display:flex;align-items:center;justify-content:center;gap:32px;padding:16px}.result-symbol span{border:1px solid #b8916d;border-radius:8px;padding:20px 12px;font-size:var(--t-xs);line-height:1.8;text-align:center}.result-symbol i{font-size:var(--t-5xl);font-style:normal}.optional-edit{margin-top:24px;border-top:1px solid #d8c5b2;padding-top:18px}.optional-edit summary{cursor:pointer;font-size:var(--t-md);color:#705138}.closing{text-align:center;padding:90px 0}.closing .cta{margin-top:30px}.closing-sample{display:block;margin-top:24px;font-size:var(--t-md);color:var(--ink-2)}
/* Reveal once on approach; native scrolling and content stay usable without JS. */
.landing-motion .landing .rv{opacity:0;transform:translateY(14px);transition:opacity var(--dur-4) var(--ease-inout),transform var(--dur-4) var(--ease);transition-delay:var(--reveal-delay,0ms)}.landing-motion .landing .rv.in,.landing-motion .landing .rv:focus-within{opacity:1;transform:none}.landing-motion .flow-step{transition:opacity var(--dur-5) var(--ease-inout),transform var(--dur-5) var(--ease),box-shadow var(--dur-5) var(--ease),border-color var(--dur-5) var(--ease)}.landing-motion .flow-step.is-current{border-color:#d5833d;box-shadow:0 20px 55px #6f3c1714}.landing-motion .auto-symbol span{transition:transform var(--dur-5) var(--ease);transform:translateY(14px)}.landing-motion .in .auto-symbol span{transform:none}.landing-motion .auto-symbol span:nth-child(2){transition-delay:var(--dur-1)}.landing-motion .auto-symbol span:nth-child(3){transition-delay:var(--dur-3)}
@media(max-width:900px){.flow-layout{gap:30px}.flow-step{padding:24px}.flow-intro{top:110px}}
@media(max-width:720px){.flow-layout{grid-template-columns:1fr;gap:28px}.flow-intro{position:static;padding:0}.click-mark{margin-top:24px}.flow-stages{gap:20px}.flow-step{min-height:0}.closing{padding:65px 0}.hero h1{font-size:clamp(39px,9.4vw,64px)}}
@media(prefers-reduced-motion:reduce){.landing-motion .landing .rv{opacity:1;transform:none}.flow-intro{position:static}}
/* Clip decorative edges without creating a scroll container around sticky content. */
.landing{overflow:clip}.how .sec-lead{color:#706156}

/* ── Higgsfield 로 생성한 랜딩 그림·루프 (web/assets/landing/ · CREDITS.md) ──
 * 흐름 카드의 그림 자리는 **흰 미디어 패널(왼쪽 46%) + 탄 색 라벨 영역** 두 톤이다. 루프 영상은 흰 바탕
 * 그대로라 알파도 블렌드도 필요 없고, 포스터(배경 뺀 webp)도 같은 흰 패널 안에 같은 크기로 앉는다.
 * (곱하기 블렌드로 흰 바탕을 지우는 방법은 헤드리스 Chrome 에서 안 먹었다 — 브라우저마다 다른 것에 기대지 않는다) */
.flow-art{display:flex;align-items:stretch;gap:0;padding:0;margin:32px 0 0;height:168px;overflow:hidden;background:linear-gradient(90deg,#fff 0 46%,#eadbcb 46%)}
.flow-art>img,.flow-art>.clip{flex:none;width:46%;height:100%;object-fit:contain;padding:var(--sp-16);box-sizing:border-box;display:block}
.flow-art>.clip{display:none;object-fit:cover;padding:0}
.flow-art>.clip.on{display:block}.flow-art>.clip.on+img{display:none}
.flow-art figcaption{align-self:center;padding:var(--sp-16) var(--sp-24);font-size:var(--t-lg);font-weight:700;color:#56351b}
.auto-art figcaption{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.auto-art figcaption span{padding:var(--sp-8) var(--sp-12);background:#fff9f1;border-radius:var(--r-full);font-size:var(--t-base);color:#7a4a25}
.landing-motion .auto-art figcaption span{transition:transform var(--dur-5) var(--ease),opacity var(--dur-5) var(--ease);transform:translateY(12px);opacity:0}
.landing-motion .in .auto-art figcaption span{transform:none;opacity:1}
.landing-motion .auto-art figcaption span:nth-child(2){transition-delay:var(--dur-1)}.landing-motion .auto-art figcaption span:nth-child(3){transition-delay:var(--dur-3)}
/* "1 CLICK" 옆의 버튼 — 흰 타일 하나에 그림(포스터)도 루프도 같은 크기로 앉는다 */
.click-mark .click-art,.click-mark .clip{flex:none;width:136px;height:136px;margin-right:var(--sp-6);border-radius:var(--r-xl);background:#fff;box-shadow:0 12px 24px #6f3c1714;object-fit:contain;padding:var(--sp-16);box-sizing:border-box}
.click-mark .clip{display:none;object-fit:cover;padding:0}
.click-mark .clip.on{display:block}.click-mark .clip.on+img{display:none}
.closing{position:relative;isolation:isolate;background:#18191C url('/assets/landing/closing-bg.webp') center/cover no-repeat}.closing>.in-w{position:relative;z-index:1}
.closing::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#18191Cf2 0%,#18191Cd6 50%,#18191C80 100%),radial-gradient(ellipse at 50% 50%,#18191Ca0,transparent 60%)}
/* 앰비언트 루프 — 포스터(정지 그림)가 먼저고, 영상은 화면에 들어올 때만 받는다 (landing.js). 모션을 줄인 사람에게는 포스터만 */
.hero{position:relative}.hero>*{position:relative;z-index:1}.hero-bg{position:absolute;inset:-10% 0 0;z-index:0;pointer-events:none;overflow:hidden}
/* 꾸밈 띠(.mv)는 회전한 큰 상자라 320 폭에서 화면 밖까지 그려졌다 (R7-22) — 띠의 바탕(.hero-bg)이 칠도 잘라서(contain:paint)
   어느 브라우저에서도 문서 폭에 안 걸리게 한다. overflow:clip 은 스크롤 상자를 만들지 않는다 */
.hero-bg{overflow:clip;contain:paint}
/* 배경은 히어로 **안에서** 사라진다 (P01) — 띠는 화면 폭 끝까지 흐르고(기둥 폭에서 잘리면 x≈1380 에 칼선이 선다),
   아래로는 옅어지며, 스크롤 시차(landing.js translateY)로 내려와도 히어로 밑변을 못 넘는다 (clip-path 가 아래만 자른다).
   다음 절(.format-strip · 장르 제목)은 그래서 또렷하다. */
.landing .hero{clip-path:inset(-120px -100vw 0 -100vw)}
.landing .hero>.hero-bg{left:calc(50% - 50vw);right:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 96%);mask-image:linear-gradient(180deg,#000 55%,transparent 96%)}
.hero-bg video,.closing-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}.closing-clip{z-index:-2}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--void) 0%,#18191Cb8 50%,#18191C66 100%),linear-gradient(0deg,var(--void) 0%,transparent 35%)}
/* 히어로 뒤로 흐르는 비스듬한 띠 — **우리가 만든 쇼츠**의 표지다 (v3/mv-*.jpg · 회색조로 구워 둔 132px 타일).
   `.hero-bg::after` 의 그라디언트가 이 위에 깔리므로 왼쪽 카피 쪽은 자동으로 가려진다 — 여기서 따로 안 가린다.
   움직임은 `.landing-motion`(모션을 줄이지 않은 사람)에서만 돈다. 줄 하나는 내용이 **두 벌**이라
   translateX(-50%) 한 바퀴가 이음매 없이 돈다. */
.hero-bg .mv{position:absolute;inset:-60%;display:grid;align-content:center;gap:var(--sp-12);
  transform:rotate(-20deg);filter:saturate(.85) brightness(.95);opacity:.42;
  -webkit-mask-image:linear-gradient(105deg,transparent 4%,#000 46%,#000 78%,transparent 99%);
  mask-image:linear-gradient(105deg,transparent 4%,#000 46%,#000 78%,transparent 99%)}
.hero-bg .mv-row{display:flex;gap:var(--sp-12);width:max-content}
.hero-bg .mv-row img{display:block;flex:0 0 auto;width:clamp(84px,7.2vw,132px);aspect-ratio:132/235;
  object-fit:cover;border-radius:var(--r)}
/* 띠의 속도는 장식 루프라 계단 밖이다 (motion:ambient). 모션 줄이기에서는 landing.js 가 .landing-motion 을 안 붙여 처음부터 안 돈다 */
.landing-motion .hero-bg .mv-row{animation:mv-slide 70s linear infinite} /* motion:ambient */
.landing-motion .hero-bg .mv-row:nth-child(2){animation-duration:94s;animation-direction:reverse} /* motion:ambient */
.landing-motion .hero-bg .mv-row:nth-child(3){animation-duration:82s} /* motion:ambient */
.landing-motion .hero-bg .mv-row:nth-child(4){animation-duration:106s;animation-direction:reverse} /* motion:ambient */
.landing-motion .hero-bg .mv-row:nth-child(5){animation-duration:76s} /* motion:ambient */
@keyframes mv-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* 화면 밖·탭 뒤에서는 멈춘다 (UI 점검 R6-04) — landing.js 가 히어로 배경·입력 상자의 불·히트맵 스캔이 화면에 없거나
   탭이 숨으면 data-paused 를 단다. 릴은 landing-reel.js 가 이미 같은 규칙으로 멈춘다 */
.landing [data-paused],.landing [data-paused]::before,.landing [data-paused]::after,
.landing [data-paused] *,.landing [data-paused] *::before,.landing [data-paused] *::after{animation-play-state:paused!important}
/* 좁은 폭에서는 카피가 띠 위에 바로 얹힌다 — 읽는 것이 먼저다 */
@media(max-width:720px){.hero-bg .mv{opacity:.4}}
.hero-bg video{opacity:.9}
@media(max-width:720px){.flow-art{height:128px}.flow-art>img,.flow-art>.clip{padding:var(--sp-10)}.flow-art figcaption{padding:var(--sp-12) var(--sp-16)}.click-mark .click-art,.click-mark .clip{width:96px;height:96px;padding:var(--sp-10)}}
/* 히어로의 시작 자리 — **점선 상자 하나**다 (2026-10-30 사용자 결정 · style.css `.has-zone`). 2026-09-29 의 '한 줄 바'
   (검색창의 자리)는 파일을 여러 개 받는다는 사실을 글자 한 낱말로만 말해서 되돌렸고, 그 뒤 파일 상자 + '또는 링크로' 두 벌은
   입구가 둘로 읽혀 하나로 합쳤다. 안은 겹친 파일 카드 + 문장 하나, 그 아래 [링크 입력] [파일 선택] [영상 확인] 한 줄.
   둘레의 불·그림자는 그대로 상자를 돈다. 공용 부품(.urlbox · 카탈로그·프로젝트)은 한 줄 바 그대로다. */
.landing .urlbox{--ub-gap:var(--sp-16);align-items:center;column-gap:var(--sp-8);
  padding:var(--sp-20) var(--sp-20) var(--sp-24);border-radius:var(--r-xl);
  box-shadow:0 24px 64px -28px color-mix(in oklch,var(--hot) 45%,transparent),
    0 0 0 6px color-mix(in oklch,var(--hot) 6%,transparent)}
.landing .urlbox .ub-fire{border-radius:var(--r-xl)}
.landing .urlbox-hint{display:none}
.landing .urlbox .ub-zone{padding:var(--sp-8) var(--sp-8) var(--sp-4)}
.landing .urlbox .ub-zone-t,.landing .urlbox .ub-zone-d{font-size:var(--t-3xl)}
/* 링크 줄 — 입력은 자기 바탕을 가진 둥근 칸이라 '여기에 붙여넣는다' 가 읽힌다 (카드 바탕 위에 맨 글자면 안내문으로 보인다) */
.landing .urlbox input[type=url]{font-size:var(--t-xl);padding:0 var(--sp-12) 0 var(--sp-20);height:var(--ctl-hero);
  border-radius:var(--r-full);background:color-mix(in oklch,var(--panel) 92%,#fff)}
.landing .urlbox input[type=url]:focus{background:var(--panel)}
.landing .urlbox input[type=url]::placeholder{color:var(--ink-3)}
.landing .urlbox .ub-ph{padding:0 var(--sp-12) 0 var(--sp-20)}
.landing .urlbox .ub-link-body{padding-left:var(--sp-12)}
.landing .urlbox .ub-link-t b{font-size:var(--t-md)}
.landing .urlbox .btn{min-height:var(--ctl-hero);height:var(--ctl-hero);border-radius:var(--r-full);
  padding:0 var(--sp-24);font-size:var(--t-xl);font-weight:700}
.landing .urlbox .ub-pick{background:var(--panel)}
.landing .urlbox-note{grid-column:1/-1}
/* 좁으면 입력이 한 줄을 다 쓰고 단추 둘이 아래 한 줄에 선다 */
@container (max-width:560px){
  .landing .urlbox{grid-template-columns:1fr 1fr;padding:var(--sp-16) var(--sp-12) var(--sp-16)}
  .landing .urlbox .ub-zone-t,.landing .urlbox .ub-zone-d{font-size:var(--t-2xl)}
  .landing .urlbox .ub-in{grid-column:1/-1}
  .landing .urlbox input[type=url],.landing .urlbox .ub-ph{padding:0 var(--sp-16)}
  .landing .urlbox .ub-pick{grid-column:1;padding:0 var(--sp-12)}
  .landing .urlbox>.ub-make{grid-column:2;padding:0 var(--sp-12)}}
/* 한국어는 어절 단위로 접는다 (P15) — 좁은 폭에서 낱글자 사이로 끊긴 줄이 남았다 */
.landing:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
/* 일본어·중국어는 글자 사이에서 접되 금칙을 지킨다 (R2-19) — 공통 keep-all 이 공백 없는 문장을 한 덩어리로 묶어
   768 에서 overflow-wrap 이 낱말 한가운데를 갈랐다. 한국어(P15)는 그대로다 */
.landing:is(:lang(ja),:lang(zh)),
.landing:is(:lang(ja),:lang(zh)) :is(h1,h2,h3,p,.hero h1,.hero-sub){word-break:normal;line-break:strict;overflow-wrap:break-word}