/* ════════════════════════════════════════════════════════════════════
   [2026-09-25 또율아빠 "첫 화면을 전부 브랜드 영상으로 · 남들이 봤을 때 이쁘다 할 정도로"]
   ilbium.com 첫 화면(시네마 히어로) + 페이지 전체 다듬기. gallery.css 뒤에 읽힌다.

   · 첫 화면은 늘 어두운 무대다(테마와 무관) — 브랜드 릴(15초, 128 BPM)이 주인공.
   · 왼쪽에 고정된 사이드바(z-index 30) 위를 이 무대(z-index 40)가 덮고 있다가,
     내려가면 무대가 걷히며 사이드바가 드러난다. 자바스크립트 없이 커튼처럼 동작한다.
   · 휴대폰(620px 이하)은 사이드바가 원래 흐름 안에 있어 무대 → 사이드바 순으로 쌓인다.
   ════════════════════════════════════════════════════════════════════ */
.cine{
  --c-ink:#07080D; --c-amber:#FFAE2E; --c-violet:#5B3DF5; --c-teal:#2EC4D6; --c-mist:#AEB6C8; --c-line:rgba(255,255,255,.12);
  --c-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
  position:relative; z-index:40; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  background:var(--c-ink); color:#fff;
}
.cine-bg{position:absolute; inset:0; z-index:-1; pointer-events:none}
.cine-glow{position:absolute; border-radius:50%; filter:blur(80px)}
.cine-glow.a{width:52vw; height:52vw; right:-14vw; top:-24vw; background:radial-gradient(circle,rgba(91,61,245,.85) 0,transparent 66%); animation:cine-drift 18s ease-in-out infinite alternate}
.cine-glow.b{width:42vw; height:42vw; left:-16vw; bottom:-24vw; background:radial-gradient(circle,rgba(255,174,46,.55) 0,transparent 64%); animation:cine-drift 22s ease-in-out infinite alternate-reverse}
.cine-glow.c{width:30vw; height:30vw; left:34vw; top:36%; background:radial-gradient(circle,rgba(46,196,214,.22) 0,transparent 62%)}
.cine-grid{position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 25%,transparent 72%); mask-image:radial-gradient(ellipse at 60% 40%,#000 25%,transparent 72%)}
@keyframes cine-drift{to{transform:translate3d(-4vw,3vw,0) scale(1.08)}}

/* ── 머리띠 ─────────────────────────────────────────────────────── */
.cine-nav{display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); padding:22px clamp(18px,4vw,56px)}
.cine-brand{display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; flex:none}
.cine-badge{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#fff; color:var(--c-ink); box-shadow:0 0 0 1px rgba(255,255,255,.2),0 10px 30px -12px rgba(255,174,46,.6)}
.cine-badge svg{width:19px; height:17px}
.cine-word{display:flex; flex-direction:column; font-size:19px; font-weight:800; letter-spacing:-.03em; line-height:1.05}
.cine-word small{margin-top:5px; font-size:9.5px; font-weight:700; letter-spacing:.34em; color:var(--c-mist)}
.cine-links{display:flex; gap:clamp(16px,2vw,30px); margin-left:auto}
.cine-links a{color:#C3CADA; font-size:14px; font-weight:600; text-decoration:none; transition:color .15s}
.cine-links a:hover{color:#fff}
.cine-actions{display:flex; align-items:center; gap:10px; flex:none}
.cine-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:42px; padding:0 18px; border-radius:999px;
  font-size:14px; font-weight:700; letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
  transition:transform .15s ease,background .15s ease,box-shadow .2s ease,border-color .15s ease}
.cine-btn:focus-visible{outline:3px solid #fff; outline-offset:3px}
.cine-btn-amber{background:var(--c-amber); color:#160F02; box-shadow:0 12px 32px -14px rgba(255,174,46,.85)}
.cine-btn-amber:hover{background:#FFBC52; transform:translateY(-1px)}
.cine-btn-glass{background:rgba(255,255,255,.07); color:#fff; border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.cine-btn-glass:hover{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.28)}
.cine-btn.lg{height:56px; padding:0 26px; font-size:15.5px}
.cine-btn .arrow{transition:transform .15s ease}
.cine-btn:hover .arrow{transform:translateX(3px)}

/* ── 본문: 글 · 릴 ──────────────────────────────────────────────── */
.cine-body{flex:1; display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.24fr); align-items:center;
  gap:clamp(32px,4.6vw,76px); padding:clamp(8px,2.4vh,32px) clamp(18px,4vw,56px) clamp(72px,11vh,110px)}
.cine-kicker{display:inline-flex; align-items:center; gap:10px; padding:8px 13px; border:1px solid var(--c-line); border-radius:999px;
  background:rgba(255,255,255,.04); font:700 11.5px/1 var(--c-mono); letter-spacing:.2em; color:#C9D0DE}
.cine-kicker i{width:7px; height:7px; border-radius:50%; background:var(--c-amber); box-shadow:0 0 0 4px rgba(255,174,46,.18)}
/* 제목은 세 줄로 선다 — "오늘 할 일," / "일비움에서" / "시작하세요." (6.4em 폭이면 글꼴이 달라도 세 줄).
   셋째 줄만 호박색: 글자 상자 높이의 2/3 지점에서 색이 바뀐다. */
.cine h1{margin:24px 0 0; max-width:6.4em; font-size:clamp(44px,5.4vw,86px); line-height:1.07; font-weight:800; letter-spacing:-.048em;
  word-break:keep-all; color:#fff;
  background:linear-gradient(180deg,#fff 0,#fff 66.6%,var(--c-amber) 66.6%,var(--c-amber) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.cine-lede{margin:26px 0 0; max-width:31em; font-size:clamp(15.5px,1.15vw,18px); line-height:1.78; color:#B4BCCC; word-break:keep-all}
.cine-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.cine .hero-badges{justify-content:flex-start; margin:30px 0 0}
.cine .hero-badges a{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12); color:#A7B0C2}
.cine .hero-badges a b{color:#fff}
.cine .hero-badges a:hover{border-color:rgba(255,174,46,.6); color:#fff}

.cine-reel{position:relative; margin:0; min-width:0}
.cine-reel::before{content:''; position:absolute; inset:6% -5% -8%; z-index:-1; filter:blur(46px);
  background:radial-gradient(closest-side at 30% 40%,rgba(91,61,245,.6),transparent),radial-gradient(closest-side at 80% 85%,rgba(255,174,46,.38),transparent)}
.cine-screen{position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 120px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08)}
.cine-screen video,.cine-screen img{display:block; width:100%; height:100%; object-fit:cover}
.cine-reel figcaption{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px;
  font:700 11px/1 var(--c-mono); letter-spacing:.16em; color:#8C95A8}
.cine-live{display:inline-flex; align-items:center; gap:9px; white-space:nowrap}
.cine-live i{width:7px; height:7px; border-radius:50%; background:#FF5B5B; box-shadow:0 0 0 4px rgba(255,91,91,.16)}
.cine-controls{display:flex; gap:8px}
.cine-ctl{display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff;
  font:600 12.5px/1 'Pretendard Variable',Pretendard,sans-serif; letter-spacing:0; transition:background .15s,border-color .15s}
.cine-ctl:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3)}
.cine-ctl:focus-visible{outline:2px solid #fff; outline-offset:2px}
.cine-ctl[aria-pressed="true"].is-sound{border-color:rgba(255,174,46,.7); color:var(--c-amber)}

/* ── 아래 띠: 기능 이름이 흘러간다 ──────────────────────────────── */
.cine-ticker{position:absolute; left:0; right:0; bottom:0; overflow:hidden; border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(7,8,13,0),rgba(7,8,13,.7)); padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cine-ticker-track{display:flex; width:max-content; animation:cine-ticker 46s linear infinite}
/* 한글은 모노·넓은 자간이면 글자가 흩어져 보인다 — 본문 글꼴에 살짝만 벌린다 */
.cine-ticker-track span{display:inline-flex; align-items:center; gap:28px; padding-right:28px; font-size:13.5px; font-weight:600; line-height:1; letter-spacing:.01em; color:#8A93A6; white-space:nowrap}
.cine-ticker-track span::after{content:''; width:5px; height:5px; border-radius:50%; background:var(--c-amber); opacity:.8}
@keyframes cine-ticker{to{transform:translateX(-50%)}}

@media (max-width:1100px){
  .cine-body{grid-template-columns:minmax(0,1fr); gap:44px; padding-top:18px}
  .cine h1{font-size:clamp(44px,8vw,72px)}
  .cine-links{display:none}
  .cine-actions{margin-left:auto}
}
@media (max-width:620px){
  .cine-nav{padding:16px 18px; gap:12px}
  .cine-word{font-size:17px}
  .cine-actions .cine-btn{height:38px; padding:0 14px; font-size:13px}
  .cine-actions .cine-btn-glass{display:none}
  .cine-body{padding:10px 18px 84px; gap:34px}
  .cine h1{font-size:44px}
  .cine-cta{flex-direction:column; align-items:stretch}
  .cine-cta .cine-btn{width:100%}
  .cine-screen{border-radius:14px}
  .cine-reel figcaption{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .cine-glow,.cine-ticker-track{animation:none}
  .cine-btn,.cine-btn .arrow{transition:none}
}

/* ════════════════════════════════════════════════════════════════════
   페이지 전체 다듬기 — 무대 아래 본문
   글자 위계(굵기·자간)를 한 단계 올리고, 머리말을 무대와 같은 말투(모노 + 호박 점)로 맞춘다.
   ════════════════════════════════════════════════════════════════════ */
.work-eyebrow{display:inline-flex; align-items:center; gap:9px; margin:0; font:700 11.5px/1 ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace; letter-spacing:.22em; color:var(--muted)}
.work-eyebrow::before{content:''; width:7px; height:7px; border-radius:50%; background:#FFAE2E; box-shadow:0 0 0 4px rgba(255,174,46,.18)}
.workspace-main .gallery-hero .work-title{margin:16px 0 10px; font-size:clamp(28px,2.8vw,40px); line-height:1.25; font-weight:800; letter-spacing:-.04em; color:var(--ink); word-break:keep-all}
.workspace-main h2{font-weight:800; letter-spacing:-.035em}
.workspace-main .kicker,.workspace-main .eyebrow{font-family:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace; letter-spacing:.2em}
.workspace-main .btn{border-radius:999px}
.workspace-main .btn-primary{box-shadow:0 12px 26px -16px rgba(16,23,34,.55)}
.workspace-main .btn-primary:hover{transform:translateY(-1px)}
.work-card,.access-card,.promise-points li,.faq-item{transition:transform .18s ease,box-shadow .2s ease,border-color .15s ease}
.work-card:hover,.access-card:hover{transform:translateY(-3px); box-shadow:0 24px 48px -30px rgba(16,23,34,.45)}
.work-sidebar{box-shadow:1px 0 0 var(--ink-soft)}
.work-sidebar .work-nav a[aria-current="true"]{box-shadow:inset 3px 0 0 #FFAE2E}
@media (prefers-reduced-motion:reduce){
  .work-card,.access-card,.promise-points li,.faq-item{transition:none}
  .work-card:hover,.access-card:hover,.workspace-main .btn-primary:hover{transform:none}
}

/* ════════════════════════════════════════════════════════════════════
   '화면을 보세요' 갤러리 — 전체 기능을 분야별로 (scripts/build-landing-gallery.mjs 가 만든다)
   [2026-09-25 또율아빠 "여기에 기능이 너무 적게 있어 전부 다 넣어줬으면 해"]
   카드는 썸네일(shots/thumbs, 장당 25KB)만 받는다 — 누르면 슬라이드 쇼에서 원본으로 크게.
   ════════════════════════════════════════════════════════════════════ */
.workspace-main .work-gallery{display:flex; flex-direction:column; gap:48px}
.work-group[hidden]{display:none}
.work-group-title{display:flex; align-items:center; gap:10px; margin:0 0 16px; font-size:19px; font-weight:800; letter-spacing:-.03em; color:var(--ink)}
.work-group-title i{width:10px; height:10px; border-radius:3px; background:var(--tint)}
.work-group-title span{padding:2px 9px; border-radius:999px; background:color-mix(in srgb,var(--tint) 15%,transparent); color:var(--ink); font-size:12px; font-weight:700}
.work-group-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px 18px}
.work-group .work-card-copy{padding:12px 2px 0}
.work-group .work-card h4{margin:0 0 5px; font-size:15.5px; font-weight:800; line-height:1.4; letter-spacing:-.025em; color:var(--ink)}
.work-group .work-card p{margin:0; font-size:13px; line-height:1.6; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.work-group .gallery-shot.step-shot{border-radius:12px; transition:border-color .15s ease}
.work-group .gallery-shot.step-shot img{aspect-ratio:640/392; object-fit:cover}
.work-group .gallery-shot:hover,.work-group .gallery-shot:focus-visible{border-color:var(--tint)}
.work-group .shot-action{font-size:11.5px; padding:5px 11px; opacity:0; transform:translateY(4px); transition:opacity .15s ease,transform .15s ease}
.work-group .gallery-shot:hover .shot-action,.work-group .gallery-shot:focus-visible .shot-action{opacity:1; transform:none}
@media (hover:none){.work-group .shot-action{opacity:1; transform:none}}
@media (max-width:620px){
  .workspace-main .work-gallery{gap:36px}
  .work-group-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px}
  .work-group .work-card h4{font-size:14px}
  .work-group .work-card p{display:none}
}
@media (prefers-reduced-motion:reduce){.work-group .shot-action,.work-group .gallery-shot.step-shot{transition:none}}