body{background:#f7f8f4}.new-mark{background:var(--lime);color:#183c26;border-radius:11px;width:34px;height:34px;display:grid;place-items:center;font-size:26px;letter-spacing:-.06em;line-height:1}.cinema-mode .menu-toggle span{background:white}.connected-story{height:1000vh;position:relative;scroll-margin:0}.story-stage{height:100vh;height:100svh;position:sticky;top:0;overflow:hidden;isolation:isolate;background:#f7f8f4;perspective:1800px}.story-background{position:absolute;inset:0;z-index:-3;background:black}.story-grain{position:absolute;inset:0;z-index:-2;opacity:0;background:radial-gradient(ellipse at 73% 51%,#d7e8c76b,transparent 55%)}.story-topline{position:absolute;left:5%;right:5%;top:115px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.13em;color:#808d7a;z-index:10}.story-topline>span:last-child{font-size:9px}.story-copies{position:absolute;inset:0;pointer-events:none;z-index:12}.story-copy{position:absolute;top:50%;left:max(6.2vw,calc((100vw - 1280px)/2));width:44%;transform:translateY(-50%);opacity:0;pointer-events:none}.story-copy[data-active=true]{pointer-events:auto}.story-copy h2{font-size:clamp(40px,4.1vw,65px);line-height:1.21;font-weight:700;letter-spacing:-.062em;margin:26px 0}.story-copy h2>span{color:#7b886c}.story-copy>p:not(.eyebrow){font-size:16px;color:#7e8975;line-height:1.85}.story-copy>.eyebrow{font-size:10px;letter-spacing:.13em}.story-copy>.text-link{margin-top:32px;font-size:13px}.story-tags{display:flex;gap:7px;margin-top:23px;flex-wrap:wrap}.story-tags span{font-size:10px;color:#788b68;border:1px solid #d9e1d0;padding:7px 10px;border-radius:5px}.story-copy em{font-size:9px;font-style:normal;padding:4px 7px;background:var(--lime);color:#354e20;border-radius:3px}.intro-copy{color:white;top:52%;left:6.2vw;width:55%;opacity:1}.intro-copy h1{font-size:clamp(58px,6vw,96px);line-height:1.13;letter-spacing:-.065em;font-weight:730;margin:24px 0 27px}.intro-copy h1>span{color:#d4fe76}.intro-copy>p:not(.eyebrow){font-size:17px;color:#86988d}.intro-copy>.eyebrow{color:#a9b9b0;letter-spacing:.06em;font-size:12px}.film-link{font-size:11px;display:inline-flex;align-items:center;gap:22px;margin-top:38px;color:#a8b6aa}.film-link span{font-size:22px;color:var(--lime)}.shared-frame{position:absolute;left:70%;top:51%;width:300px;height:300px;background:#101713;border-radius:40px;transform:translate(-50%,-50%);opacity:0;z-index:4;overflow:hidden;box-shadow:0 26px 65px #23312217;transform-style:preserve-3d;will-change:transform,width,height,left,top;outline:1px solid #3345380b}.scene-ui{position:absolute;inset:0;opacity:0;pointer-events:none}.shared-core{position:absolute;left:71%;top:51%;width:800px;height:800px;overflow:hidden;transform:translate(-50%,-50%);border-radius:50%;z-index:7;pointer-events:none;background:black;will-change:transform,width,height,left,top}.shared-core>video,.shared-core>.last-frame{position:absolute;width:300%;height:300%;max-width:none;left:-100%;top:-100%;object-fit:cover}.last-frame{opacity:0}.core-label{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#d6e7d7;font-size:13px;letter-spacing:-.03em;opacity:0}.core-label>small{display:block;font-size:6px;letter-spacing:.17em;margin-top:5px;color:#758777}
.hub-network{position:absolute;left:70%;top:50%;width:650px;height:650px;transform:translate(-50%,-50%);z-index:3;opacity:0;pointer-events:none}.hub-network>svg{position:absolute;inset:0;width:100%;height:100%}.hub-network path{stroke:#b9cbaa;stroke-width:1.3;stroke-dasharray:4 6;fill:none}.hub-note{position:absolute;display:flex;align-items:center;gap:12px;background:#ffffffda;border:1px solid #e1e9d8;box-shadow:0 10px 35px #4654370d;padding:18px 20px;border-radius:15px;transform:rotate(-3deg)}.hub-note small{display:block;font-size:7px;letter-spacing:.11em;color:#99a48d}.hub-note strong{font-size:13px;display:block;margin-top:8px;font-weight:550;color:#59664f}.note-icon{background:#e9f3dc;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:22px;color:#8ca26d}.note-one{left:0;top:62px}.note-two{right:-25px;top:87px;transform:rotate(5deg)}.note-three{right:-15px;bottom:95px;transform:rotate(-4deg)}.note-four{left:-15px;bottom:100px;transform:rotate(3deg)}.hub-orbit{position:absolute;border:1px solid #cedbc338;border-radius:50%;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit-one{width:420px;height:420px}.orbit-two{width:590px;height:590px}
.web-ui{color:white;background:#0e1812}.browser-bar{height:30px;display:flex;justify-content:space-between;align-items:center;background:#e9ede7;color:#6d7d68;padding:0 13px;font-size:10px}.browser-bar>span:first-child{display:flex;gap:4px}.browser-bar i{width:5px;height:5px;background:#bac5b3;border-radius:50%}.browser-bar b{font-size:7px;font-weight:400;letter-spacing:.03em}.web-navigation{display:flex;justify-content:space-between;align-items:center;padding:28px;font-size:10px}.web-navigation>span{font-size:6px;color:#8a9b8e}.web-hero-copy{position:absolute;top:28%;left:8%}.web-hero-copy>span:first-child{font-size:6px;letter-spacing:.12em;color:#7e9a80}.web-hero-copy>strong{display:block;font-size:61px;font-weight:500;line-height:1;letter-spacing:-.06em;margin-top:19px;color:#e0efdb}.web-hero-copy>p{font-size:10px;line-height:1.6;color:#6e886e;margin-top:18px}.demo-button{display:block;background:#d4fe76;color:#2c451c;width:max-content;font-size:7px;border-radius:5px;padding:11px 15px;margin-top:20px}.web-bottom{position:absolute;bottom:23px;left:28px;right:28px;display:flex;justify-content:space-between;font-size:6px;letter-spacing:.08em;color:#607761}.detail-ui{background:#f4f2eb}.shop-top{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;border-bottom:1px solid #dde1d4;font-size:9px;color:#63744f}.shop-top>span{font-size:15px}.shop-heading{padding:27px 28px}.shop-heading>span{font-size:6px;letter-spacing:.09em;color:#95a284}.shop-heading h3{font-size:28px;line-height:1.2;font-weight:550;margin-top:13px;color:#364b26}.shop-description{position:absolute;bottom:24px;left:28px;right:28px}.shop-description>div{padding:13px 0;border-bottom:1px solid #d9dfcf;display:flex;align-items:center;justify-content:space-between}.shop-description>div>span{font-size:7px;color:#a2ad96;letter-spacing:.07em}.shop-description strong{font-size:11px;font-weight:500;color:#7c896c}.shop-description>p{font-size:11px;line-height:1.5;margin-top:17px;color:#8c9880}.shop-cta{display:flex;justify-content:space-between;margin-top:15px;background:#314426;color:#edf4e7;border-radius:6px;padding:13px;font-size:9px}.shop-cta b{font-size:13px}.ai-ui{z-index:3;border:12px solid #fbfcf8;background:transparent}.editor-toolbar{position:absolute;top:0;left:0;right:0;height:39px;background:#fbfcf8;display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#8b967f;font-size:7px}.editor-toolbar span:first-child{font-weight:700;color:#536d3e;font-size:10px}.editor-corner{position:absolute;width:15px;height:15px;border:1px solid #e5fec6;z-index:3}.corner-tl{left:20px;top:62px;border-right:0;border-bottom:0}.corner-tr{right:20px;top:62px;border-left:0;border-bottom:0}.corner-bl{left:20px;bottom:22px;border-top:0;border-right:0}.corner-br{right:20px;bottom:22px;border-top:0;border-left:0}.image-index{position:absolute;bottom:37px;left:38px;font-size:7px;letter-spacing:.12em;color:white}.moving-photo{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;opacity:0;z-index:1;background:#d5dbce}.moving-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;filter:brightness(var(--image-light,1)) sepia(var(--image-sepia,0)) grayscale(var(--image-mono,0));transform:scale(var(--photo-zoom,1));will-change:transform}.editor-controls{position:absolute;left:51%;top:66%;width:325px;padding:25px;background:#fffffff0;border:1px solid #edf2e6;box-shadow:0 18px 55px #1b30171f;border-radius:18px;z-index:15;opacity:0;pointer-events:none;backdrop-filter:blur(16px)}.control-kicker{font-size:7px;letter-spacing:.12em;color:#a0ad91}.editor-controls>strong{display:block;margin-top:12px;font-size:18px;font-weight:600;letter-spacing:-.04em}.lighting-options{display:flex;gap:6px;margin-top:19px}.lighting-options button{font-size:10px;padding:8px 12px;border-radius:8px;background:#f3f5ed;color:#8f9f7c}.lighting-options button[aria-pressed=true]{background:#d4fe76;color:#314425}.editor-controls label{display:flex;justify-content:space-between;margin-top:20px;font-size:9px;color:#7f8b71}.editor-controls label span{font-size:6px;letter-spacing:.05em}.editor-controls input{width:100%;margin:12px 0 16px;accent-color:#85a547;height:4px;cursor:ew-resize}.control-tags{display:flex;gap:10px;font-size:7px;color:#93a27f}
.shorts-ui{z-index:4;color:#fff;background:linear-gradient(0deg,#000b,transparent 55%,#0003)}.social-top{padding:32px 21px;font-size:16px;font-weight:700;display:flex;justify-content:space-between}.social-headline{position:absolute;top:20%;left:22px}.social-headline small{font-size:7px;letter-spacing:.1em}.social-headline strong{display:block;font-size:29px;line-height:1.15;letter-spacing:-.05em;margin-top:13px;text-shadow:0 3px 30px #0004}.social-actions{position:absolute;right:17px;bottom:178px;display:flex;flex-direction:column;gap:19px;align-items:center;font-size:27px}.social-actions svg{width:24px;height:24px;fill:none;stroke:white;stroke-width:1.5}.social-footer{position:absolute;left:18px;right:18px;bottom:64px}.social-footer>b{font-size:11px;display:flex;gap:7px;align-items:center}.social-footer i{font-style:normal;background:var(--lime);color:#1d3322;width:27px;height:27px;border-radius:50%;display:grid;place-items:center}.social-footer b>span{font-size:7px;padding:5px 7px;border:1px solid #ffffff99;border-radius:4px;font-weight:400;margin-left:5px}.social-footer p{font-size:9px;line-height:1.6;margin:10px 0}.social-footer small{font-size:7px}.social-progress{position:absolute;left:13px;right:13px;bottom:49px;height:2px;background:#ffffff40}.social-progress>span{height:100%;display:block;background:white;width:var(--shorts-progress,0%)}.social-bottom{position:absolute;bottom:0;left:0;right:0;height:44px;background:#101710;display:flex;justify-content:space-around;align-items:center;font-size:22px}.timeline-panel{position:absolute;left:49%;top:74%;width:350px;background:#f9fcf5eF;border:1px solid #e5edda;box-shadow:0 16px 50px #20301c1c;border-radius:16px;padding:19px;z-index:13;opacity:0;pointer-events:none;transform:rotate(-3deg)}.timeline-panel>div:first-child{display:flex;justify-content:space-between;font-size:6px;letter-spacing:.07em;color:#879675}.edit-track{position:relative;display:flex;gap:4px;margin-top:17px}.edit-track>span{font-size:7px;padding:12px 9px;background:#daeac7;border-radius:4px;flex:1;text-align:center;color:#6b8750}.edit-track>span:nth-child(2){background:#bdde94;flex:1.5}.edit-track>i{position:absolute;top:-5px;bottom:-34px;left:var(--shorts-progress,0%);width:1px;background:#47672d;z-index:2}.caption-track{font-size:7px;margin-top:5px;padding:7px 10px;background:#e9dff0;color:#9b83a5;border-radius:4px}.sound-track{color:#93ae73;font-size:10px;margin-top:4px;white-space:nowrap;overflow:hidden;letter-spacing:1px}.social-platforms{display:flex;gap:6px;margin-top:12px}.social-platforms button{font-size:7px;border-radius:4px;padding:5px 9px;background:#eef2e7;color:#8b9c78}.social-platforms button[aria-pressed=true]{background:#283c21;color:#d4fe76}
.ir-ui{background:#fdfdfa;z-index:0;color:#37452b}.slide-header{padding:27px 30px;display:flex;align-items:center;justify-content:space-between;font-size:9px}.slide-header>span{font-size:6px;color:#a2ac94}.slide-copy{position:absolute;top:26%;left:9%}.slide-copy>small{font-size:6px;color:#8e9e7c;letter-spacing:.1em}.slide-copy h3{font-size:31px;line-height:1.2;margin:12px 0}.slide-copy p{font-size:9px;color:#8f9c7d;line-height:1.6}.slide-chart{position:absolute;right:6%;top:24%;width:31%;height:57%}.slide-chart>span{font-size:6px;letter-spacing:.08em;color:#a4af99}.chart-bars{position:absolute;left:0;right:0;top:35px;bottom:44px;display:flex;align-items:end;gap:15px}.chart-bars i{width:28%;height:34%;background:#dcebc9;border-radius:8px 8px 0 0;position:relative;transform-origin:bottom;transform:scaleY(var(--chart-grow,1))}.chart-bars i:nth-child(2){height:60%;background:#bed891}.chart-bars i:nth-child(3){height:95%;background:#78994e}.chart-bars b{position:absolute;bottom:-21px;left:0;right:0;text-align:center;font-size:7px;font-style:normal;font-weight:400;color:#97a985}.chart-line{position:absolute;bottom:44px;height:1px;left:0;right:0;background:#e0e7d6}.slide-chart>small{position:absolute;bottom:0;left:0;font-size:6px;color:#bac4b0}.slide-footer{position:absolute;left:30px;right:30px;bottom:23px;display:flex;justify-content:space-between;font-size:6px;color:#a0ad90;letter-spacing:.04em}.film-progress{position:absolute;bottom:77px;left:6.2%;width:36%;display:flex;align-items:center;gap:16px;color:#627e6c;font-size:7px;letter-spacing:.08em;z-index:12}.film-progress>div{height:1px;flex:1;background:#1e3224}.film-progress i{height:100%;display:block;width:0;background:#b5db79}.film-progress>span:last-child{font-variant-numeric:tabular-nums}.chapter-nav{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:26px;z-index:20}.chapter-nav button{background:none;display:flex;align-items:center;gap:7px;font-size:9px;color:#a1ad96;padding:8px 0;white-space:nowrap}.chapter-nav i{display:block;width:4px;height:4px;background:#acb89f;border-radius:50%}.chapter-nav [aria-current=step]{color:#698641}.chapter-nav [aria-current=step] i{width:17px;border-radius:5px;background:#92b762}.cinema-mode .chapter-nav [aria-current=step]{color:var(--lime)}.scene-notice{position:absolute;right:5%;bottom:33px;z-index:11;font-size:7px;color:#a4af99;opacity:0}.story-outro{padding:150px 0 20px;text-align:center}.story-outro>.eyebrow{justify-content:center}.story-outro h2{font-size:66px;margin:28px 0;color:#34442d}.story-outro h2>span{color:#8fa17b}.story-outro>p:not(.eyebrow){font-size:17px;color:#94a185}.outro-arrow{display:grid;place-items:center;margin:35px auto 0;font-size:27px;width:53px;height:53px;border:1px solid #d4ddc9;border-radius:50%;color:#8da075}.work-section{padding-top:120px}.cinema-mode .mobile-nav{color:var(--ink)}.story-static-note{display:none}
@media(min-width:1600px){.story-copy h2{font-size:65px}.intro-copy h1{font-size:96px}}
@media(max-height:760px) and (min-width:761px){.story-topline{top:95px}.story-copy h2{font-size:48px}.intro-copy h1{font-size:76px}.story-copy>p:not(.eyebrow){font-size:14px}.story-tags{margin-top:16px}.story-copy>.text-link{margin-top:22px}}
@media(max-width:1100px) and (min-width:761px){.story-copy{left:4%;width:43%}.story-copy h2{font-size:40px}.story-copy>p:not(.eyebrow){font-size:13px}.intro-copy{width:54%}.intro-copy h1{font-size:67px}.editor-controls{width:280px;padding:19px}.timeline-panel{width:290px}.chapter-nav{gap:18px}.scene-notice{display:none}}
@media(max-width:760px){.new-mark{width:29px;height:29px;font-size:23px}.connected-story{height:900vh}.story-topline{top:91px;left:6%;right:6%;font-size:6px}.story-topline>span:last-child{font-size:6px}.story-copy{left:7%;top:18%;transform:none;width:86%}.story-copy h2{font-size:34px;line-height:1.22;margin:15px 0}.story-copy>.eyebrow{font-size:7px}.story-copy>p:not(.eyebrow){font-size:11px;line-height:1.7}.story-tags{margin-top:13px;gap:5px}.story-tags span{font-size:6px;padding:5px 7px}.story-copy>.text-link{position:absolute;right:0;bottom:0;font-size:9px;gap:9px}.intro-copy{top:24%;width:90%;left:7%}.intro-copy h1{font-size:49px;margin-top:17px}.intro-copy>p:not(.eyebrow){font-size:13px;color:#899d90}.intro-copy>.eyebrow{font-size:10px}.film-link{font-size:8px;margin-top:23px;gap:12px}.film-progress{bottom:87px;left:7%;width:86%;font-size:6px}.chapter-nav{gap:12px;bottom:26px}.chapter-nav button{font-size:7px;flex-direction:column;gap:9px}.chapter-nav i{width:3px;height:3px}.chapter-nav [aria-current=step] i{width:12px}.scene-notice{right:7%;bottom:67px;font-size:6px}.editor-controls{width:215px;padding:16px;left:5%;top:69%;transform:scale(.72);transform-origin:left top}.editor-controls>strong{font-size:15px}.editor-controls input{margin-bottom:11px}.timeline-panel{left:4%;top:73%;width:280px;transform:scale(.68) rotate(-3deg);transform-origin:left top}.story-outro{padding-top:90px}.story-outro h2{font-size:40px}.story-outro>p:not(.eyebrow){font-size:13px}.story-outro>.eyebrow{font-size:8px}.work-section{padding-top:85px}.hub-network{transform-origin:center}.web-hero-copy>strong{font-size:61px}.story-copy em{font-size:6px;padding:3px 4px}}
.web-ui{background:#000}
@media(prefers-reduced-motion:reduce){.connected-story{height:800vh}.shared-frame,.shared-core,.moving-photo img{will-change:auto}}

/* v3: 장면별 실제 작업물 갤러리 — 카피 아래 3열 정렬 그리드. 장면 가중치에 따라 순서대로 떠오른다(motion.js) */
.scene-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;pointer-events:none}
.scene-card{margin:0;opacity:0;translate:0 22px;will-change:opacity,translate}
.scene-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:top;border-radius:12px;background:#e6ecdf;box-shadow:0 12px 34px #22301b1f;outline:1px solid #ffffff99}
.scene-card figcaption{margin-top:10px;font-size:13px;line-height:1.35;color:#4b5a40;letter-spacing:-.01em}
.scene-card figcaption small{display:block;font-size:10px;letter-spacing:.12em;color:#93a285;margin-bottom:3px}
.scene-card figcaption b{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 쇼츠: 릴스 그리드 타일 — 다른 갤러리와 같은 규격(이미지 + 아래 캡션), 4:5 세로 이미지에 재생 버튼과 길이만 얹는다 */
.scene-card.reel{position:relative}
.scene-card.reel img{aspect-ratio:1/1;object-position:50% 12%}
.reel-ui{position:absolute;left:0;top:0;width:100%;aspect-ratio:1/1;border-radius:12px;background:linear-gradient(0deg,#00000099,transparent 42%)}
.reel-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:40px;height:40px;border-radius:50%;background:#ffffffe0;color:#1d2a1a;display:grid;place-items:center;font-size:13px;padding-left:3px;box-shadow:0 6px 18px #0004;backdrop-filter:blur(4px)}
.reel-dur{position:absolute;left:11px;bottom:10px;color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 6px #0008}
@media(max-height:760px) and (min-width:761px){.scene-gallery{margin-top:18px;gap:12px}.scene-card img{aspect-ratio:16/9}.scene-card figcaption{margin-top:7px;font-size:12px}.scene-card.reel img,.reel-ui{aspect-ratio:1/1}}
@media(max-width:1100px) and (min-width:761px){.scene-gallery{gap:10px;margin-top:22px}}
/* v3: 타이포 확대 — 시안2의 7~10px 보조 텍스트를 읽히는 크기로 */
.story-topline{font-size:13px}.story-topline>span:last-child{font-size:12px}
.story-copy>.eyebrow{font-size:13px}.story-copy>p:not(.eyebrow){font-size:19px;line-height:1.8}
.story-tags span{font-size:13px;padding:8px 12px}.story-copy>.text-link{font-size:16px}.story-copy em{font-size:11px;padding:4px 8px}
.film-link{font-size:14px}.hub-note small{font-size:10px}.hub-note strong{font-size:16px}
.chapter-nav button{font-size:12px}.scene-notice{font-size:11px}
@media(max-width:1100px) and (min-width:761px){.story-copy>.eyebrow{font-size:11px}.story-copy>p:not(.eyebrow){font-size:15px}.story-tags span{font-size:11px}.story-copy>.text-link{font-size:14px}.chapter-nav button{font-size:10px}.story-topline{font-size:11px}.story-topline>span:last-child{font-size:10px}}
@media(max-height:760px) and (min-width:761px){.story-copy>p:not(.eyebrow){font-size:16px;line-height:1.7}}
@media(max-width:760px){.story-topline{font-size:9px}.story-topline>span:last-child{font-size:9px}.story-copy>.eyebrow{font-size:10px}.story-copy>p:not(.eyebrow){font-size:14px}.story-tags span{font-size:9px;padding:6px 8px}.story-copy>.text-link{font-size:12px}.film-link{font-size:11px}.chapter-nav button{font-size:9px}}
/* v3: 자동 넘김 안내 */
.flow-hint{position:absolute;right:5%;bottom:33px;z-index:11;font-size:13px;letter-spacing:.08em;color:#a4af99;display:flex;align-items:center;gap:8px}.flow-hint i{width:14px;height:22px;border:1px solid #b9c3ad;border-radius:8px;position:relative;display:block}.flow-hint i::after{content:"";position:absolute;left:5px;top:5px;width:2px;height:5px;border-radius:2px;background:#8fa77a;animation:flowdot 1.6s ease-in-out infinite}@keyframes flowdot{0%,100%{transform:translateY(0);opacity:1}70%{transform:translateY(7px);opacity:.2}}.cinema-mode .flow-hint{color:#8ea095}.story-stage[data-flowing=true] .flow-hint{opacity:.35}
@media(max-width:760px){.scene-gallery{display:none}.flow-hint{display:none}}
@media(prefers-reduced-motion:reduce){.flow-hint{display:none}.flow-hint i::after{animation:none}}
/* v3: 하단 섹션 타이포 확대 (styles.css 의 6~12px 보조 텍스트) */
@media(min-width:761px){.eyebrow{font-size:12px}.work-filters button{font-size:14px;padding:12px 20px}.work-filters button>span{font-size:12px}.work-meta strong{font-size:19px}.work-meta>span{font-size:11px;letter-spacing:.1em}.work-desc{font-size:15px}.work-bottom>span{font-size:12px}.process-steps p{font-size:16px}.step-output{font-size:12px}.service-options span{font-size:14px}.contact-form legend>span,.brief-label span{font-size:12px}.form-note{font-size:13px}}
/* v3: 배치 보정 — 갤러리가 붙어 길어진 카피는 살짝 아래로, 상단 라벨은 헤더 바로 밑으로, 넓은 프레임과 겹치지 않게 그리드 폭 제한, 힌트는 좌하단 */
@media(min-width:761px){.story-topline{top:94px}.story-copy:has(.scene-gallery){top:53.5%}.scene-gallery{--copy-left:max(6.2vw,calc((100vw - 1280px)/2));width:min(100%,calc(72vw - 388px - var(--copy-left)),calc(51vw - 28px - var(--copy-left)))}.flow-hint{left:5%;right:auto}}
/* v3: 세로 여유 — 화면 높이에 맞춰 갤러리 붙은 카피의 헤드라인·행간·간격을 줄여 상단 라벨(109px)과 챕터 내비 사이에 들어가게 */
@media(min-height:980px) and (min-width:761px){.scene-card.reel img,.reel-ui{aspect-ratio:4/5}}
@media(max-height:880px) and (min-width:761px){.story-copy:has(.scene-gallery) h2{font-size:56px;margin:20px 0}.story-copy:has(.scene-gallery)>p:not(.eyebrow){line-height:1.7}.scene-gallery{margin-top:24px}}
@media(max-height:800px) and (min-width:761px){.story-copy:has(.scene-gallery) h2{font-size:48px;margin:14px 0}.story-copy:has(.scene-gallery)>p:not(.eyebrow){font-size:16px;line-height:1.6}.story-copy:has(.scene-gallery) .story-tags{margin-top:14px}.story-copy:has(.scene-gallery)>.text-link{margin-top:18px}.scene-gallery{margin-top:16px;gap:12px}.scene-card figcaption{margin-top:7px;font-size:12px}}
/* v3: 쇼츠 양옆 폰 — 메인 폰(310×620)과 같은 릴스 UI 마크업을 0.62 배율로 양옆에 세운다. 진행 바·색감 변수는 스테이지에서 상속 */
.reel-deck{position:absolute;left:74%;top:53%;width:0;height:0;z-index:3;pointer-events:none}
.reel-phone{position:absolute;left:-155px;top:-276px;width:310px;height:552px;opacity:0;transform-origin:center;will-change:transform,opacity}
.reel-screen{position:absolute;inset:0;border-radius:34px;overflow:hidden;background:#101710;box-shadow:0 26px 65px #23312233;outline:1px solid #ffffff55}
.reel-phone .moving-photo{opacity:1}
.reel-phone .moving-photo img{object-position:50% 20%}
.reel-phone .shorts-ui{position:absolute;inset:0;opacity:1;pointer-events:none}
.reel-code{position:absolute;left:50%;bottom:-46px;translate:-50%;font-size:19px;letter-spacing:.12em;color:#7e8975;white-space:nowrap}
.story-copy[data-copy=shorts]{--copy-left:max(6.2vw,calc((100vw - 1280px)/2));width:min(40%,calc(74vw - 390px - var(--copy-left)))} /* 왼쪽 폰(74vw-363px)과 안 겹치게 */
@media(max-width:760px){.reel-deck{display:none}}
/* v4: 밝은 인트로 — 흰 배경 구체 영상에 맞춰 검정 시네마 레이어를 흰색으로, 인트로 타이포·진행 바·코어/프레임 배경을 밝은 톤으로 */
.story-background{background:#fff}
.shared-core{background:#fff}
.shared-frame{background:#fff;outline:1px solid #e6ebe1}
.intro-copy{color:var(--ink)}
.intro-copy h1>span{color:#5f8a3a}
.intro-copy>p:not(.eyebrow){color:#6f7d73}
.intro-copy>.eyebrow{color:#8a9a8c}
.film-link{color:#6b7a68}.film-link span{color:#5f8a3a}
.film-progress{color:#8a9a83}.film-progress>div{background:#dfe6d7}.film-progress i{background:#6f9a44}
.core-label{color:#33422f}.core-label>small{color:#8a9a8c}
.web-ui{color:#17231a;background:#f6f8f3}
.web-hero-copy>strong{color:#1b2a1f}.web-hero-copy>p{color:#6b7a6a}.web-hero-copy>span:first-child{color:#6f9a44}.web-navigation>span{color:#7d8c7f}
@media(max-width:760px){.web-ui{background:#f6f8f3}.intro-copy>p:not(.eyebrow){color:#6f7d73}}
/* v4: 새 영상은 구체가 화면의 88%를 차지하므로 3배 확대를 없애고 코어를 꽉 채운다 */
.shared-core video,.shared-core .last-frame{width:100%;height:100%;left:0;top:0;max-width:none;object-fit:cover}.cinema-mode .menu-toggle span{background:var(--ink)}
/* v4: 히어로 배경 시안 — 영상의 흰 배경을 multiply 로 녹여 어떤 밝은 색 위에도 구체만 남게 한다. ?bg=sage|mint|sky 로 전환 */
:root{--hero-bg:#ffffff;--hero-glow:#ffffff;--hero-accent:#5f8a3a}
html[data-bg=sage]{--hero-bg:#dde7cf;--hero-glow:#edf3e3;--hero-accent:#4a7a2a}
html[data-bg=mint]{--hero-bg:#cfeae2;--hero-glow:#e3f4ef;--hero-accent:#1b7a66}
html[data-bg=sky]{--hero-bg:#d7e0f4;--hero-glow:#e8edf9;--hero-accent:#3558a8}
/* video: Flow 영상의 실제 배경색(5개 프레임 좌우 띠 평균 #faf9fc, 그라데이션 없음)을 그대로 페이지에 적용. 블렌드 없이 색을 정확히 맞춰 경계가 사라진다 */
html[data-bg=video]{--hero-bg:#faf9fc;--hero-glow:#faf9fc;--hero-accent:#5f8a3a}
html[data-bg=video] .shared-core{mix-blend-mode:normal}
.story-background{background:radial-gradient(circle at 73% 52%,var(--hero-glow) 0,var(--hero-bg) 40%)}
.shared-core{background:transparent}
/* 코어 자체가 스태킹 컨텍스트라 video 에 걸면 안 섞인다 → 코어에 걸어 스테이지 배경과 곱셈 */
.shared-core{mix-blend-mode:multiply}
.intro-copy h1>span,.film-link span{color:var(--hero-accent)}.film-progress i{background:var(--hero-accent)}
/* v4: '모든 장면으로' 강조색 시안 — ?accent=a|b|c (bg=video 기준) */
html[data-accent=a] .intro-copy h1>span{color:#23a24f}                       /* a: 구체의 네온 그린 */
html[data-accent=b] .intro-copy h1>span{color:#0f97a8}                       /* b: 구체의 시안 링 */
html[data-accent=c] .intro-copy h1>span{background:linear-gradient(92deg,#23a24f 0%,#19b8c9 100%);-webkit-background-clip:text;background-clip:text;color:transparent} /* c: 그린→시안 그라데이션(구체 링 두 색) */
html[data-accent=a] .film-link span,html[data-accent=a] .film-progress i{color:#23a24f;background:#23a24f}
html[data-accent=b] .film-link span,html[data-accent=b] .film-progress i{color:#0f97a8;background:#0f97a8}
html[data-accent=c] .film-link span,html[data-accent=c] .film-progress i{color:#19b8c9;background:linear-gradient(90deg,#23a24f,#19b8c9)}
html[data-accent] .film-link span{background:none}
/* v4: 히어로 배경 변형 4종 — 영상 배경색(#faf9fc) 위에 그라데이션/모눈 그리드. 코어는 multiply 로 녹임 */
html[data-bg=grad-sage] .story-background{background:linear-gradient(135deg,#faf9fc 0%,#f4f7ee 45%,#dfe9cf 100%)}
html[data-bg=grad-neon] .story-background{background:radial-gradient(circle at 78% 30%,#d9f3e2 0,transparent 32%),radial-gradient(circle at 70% 72%,#d6f0f3 0,transparent 34%),linear-gradient(180deg,#faf9fc,#f4f6f8)}
html[data-bg=grid] .story-background{background-color:#faf9fc;background-image:linear-gradient(rgba(49,130,246,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(49,130,246,.16) 1px,transparent 1px),linear-gradient(rgba(49,130,246,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(49,130,246,.07) 1px,transparent 1px);background-size:160px 160px,160px 160px,32px 32px,32px 32px;background-position:0 0,0 0,0 0,0 0}
html[data-bg=grid-grad] .story-background{background-color:#faf9fc;background-image:radial-gradient(circle at 73% 52%,#faf9fc 0,#faf9fc 22%,transparent 46%),linear-gradient(rgba(60,110,70,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(60,110,70,.14) 1px,transparent 1px),linear-gradient(rgba(60,110,70,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(60,110,70,.06) 1px,transparent 1px),linear-gradient(160deg,#faf9fc 0%,#eef4e6 55%,#dcebd6 100%);background-size:auto,160px 160px,160px 160px,32px 32px,32px 32px,auto}
html[data-bg=grid] .story-background::after,html[data-bg=grid-grad] .story-background::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 73% 52%,#faf9fc 0,#faf9fc00 38%)} /* 구체 주변은 그리드를 걷어 깨끗하게 */
html[data-bg=grid] .story-background,html[data-bg=grid-grad] .story-background{overflow:hidden}
/* v4: 구체 실루엣 마스크 — 스크럽 영상에서 구체는 중심(49.5%,50.2%) 반지름 32.3% 로 고정(9개 프레임 측정, 편차 ±0.5%). 그 바깥의 영상 배경을 잘라 어떤 배경(그라데이션·그리드)에서도 원판이 남지 않는다 */
/* farthest-side 기준: 구체 반지름 = 영상 폭의 32.3% = 반폭의 64.6% → 코어가 가로로 긴 상자(상세 장면 335×225)여도 object-fit:cover 때문에 비율이 같다 */
.shared-core{-webkit-mask:radial-gradient(circle farthest-side at 50% 50%,#000 66%,transparent 68.5%);mask:radial-gradient(circle farthest-side at 50% 50%,#000 66%,transparent 68.5%)}
html[data-bg=video] .shared-core{-webkit-mask:none;mask:none}
/* v4 카피 개정: 텍스트 로고 → 실제 로고 이미지(헤더), 릴스 UI 계정 아바타는 로고 심볼 부분만 보이게 */
.brand-logo{height:36px;width:auto;display:block}
@media(max-width:760px){.brand-logo{height:24px}}
.social-footer i.brand-avatar,.phone-footer i.brand-avatar{overflow:hidden;background:#0f1a12;padding:0;display:grid;place-items:center}
.brand-avatar img{width:100%;height:100%;max-width:none;object-fit:contain;display:block}

/* 카드 세 장의 폭을 같게 — 1fr 의 최소폭은 내용 크기라 제목이 길면 그 칸만 넓어졌다 */
.scene-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.scene-card{min-width:0}

/* 제목은 자르지 말고 두 줄까지 접는다(카드 높이는 그리드 행이 맞춰 준다) */
.scene-card figcaption b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip;line-height:1.3}

.work-more{display:flex;justify-content:center;margin-top:34px}
.work-more .button span{font-size:13px;color:#8a9a8c;margin-left:4px}

/* 양옆 폰은 화면 자체가 9:16 이라 숏폼이 잘리지 않고 그대로 들어간다 */
.reel-phone .reel-screen{border-radius:30px}
.moving-photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;background:#101710}