/* V5: 소개서 원본의 하프톤 에셋과 타이포를 사용한다. 스크롤 좌표는 V4가 소유한다. */
@font-face{font-family:V5Fraunces;src:url('assets/editorial-fonts/Fraunces-italic-500-latin.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:V5Mono;src:url('assets/editorial-fonts/JetBrainsMono-normal-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
html:root{--paper:#fbfbf8;--paper-2:#edf0e7;--ink:#263624;--ink-2:#50604b;--muted:#65735f;--muted-2:#65735f;--olive:#263624;--lime:#d4fe76;--line:#cdd4c8;--radius:4px;--v5-forest:#203629;--v5-mono:V5Mono,Pretendard,monospace;--v5-serif:V5Fraunces,Georgia,serif}
body{background:var(--paper);color:var(--ink)}
::selection{background:var(--lime);color:var(--ink)}
body .eyebrow,body .micro,body .ag-topline,body .story-topline,body .film-progress,body .pf-meta small,body .step-output{font-family:var(--v5-mono);font-weight:400;letter-spacing:.08em}
body .grad,html[data-accent] .intro-copy h1>span{background:none;color:#259463;-webkit-text-fill-color:currentColor}
body .display-type,body .english-title,body .step-number,body .chapter-number{font-family:var(--v5-serif);font-style:italic;font-weight:500}
body .pf-img,body .pf-feature,body .pf-feature>img,body .post-hero,body .cs-hero,body .cs-hero.h3,body .work-card,body .work-card-image,body .in-feature,body .in-card,body .model-card,body .ms-card img,body .ct-form2{border-radius:4px;box-shadow:none}
body .pf-meta,body .work-card-info{border-top:1px solid var(--line);padding-top:14px}
body .tl-img{border-radius:3px;box-shadow:none}
body .chip{background:transparent;border-color:var(--line);border-radius:2px}
body .chip[aria-current=true]{background:var(--ink);color:var(--paper)}
body .chips{gap:6px}
body .pf-side{border-top:1px solid var(--ink);padding-top:24px}
body .pf-side h1{font-weight:650;letter-spacing:-.055em}
body .pf-side .eyebrow{font-family:var(--v5-mono)}
body .pf-feature-copy,body .in-feature-copy{background:#edf0e7}
body .work-filters{border-bottom:1px solid var(--line);padding-bottom:20px}
body .work-filters button{border-radius:2px}
body .work-section{padding-top:100px}
/* 영상의 밝은 배경과 자연스럽게 섞이며 기존 스크럽/전환을 그대로 유지한다. */
html[data-bg] .story-background,body .ag-bg{background:#eef1e8}
html[data-bg] .story-background::after{background:url('assets/halftone/orb_green.png') no-repeat -180px calc(100% + 200px)/430px;opacity:.22}
body .story-stage{background:#eef1e8}
body .intro-copy{color:var(--ink)}
body .intro-copy>.eyebrow,body .intro-copy>p:not(.eyebrow){color:#65735f}
body .story-topline,body .ag-topline{color:#65735f}
body .story-outro{position:relative;isolation:isolate;width:100%;max-width:none;padding:130px max(7vw,24px);margin:0;background:var(--v5-forest);color:#fbfbf8;overflow:hidden;text-align:left}
body .story-outro::after{content:"";position:absolute;width:620px;height:620px;right:-110px;top:-90px;background:url('assets/halftone/orb_lime.png') center/contain no-repeat;z-index:-1;opacity:.42;pointer-events:none}
body .story-outro h2{max-width:820px;position:relative}
body .story-outro h2 span{color:var(--lime)}
body .story-outro>p{color:#c5d0be;position:relative}
body .story-outro .eyebrow{color:#c5d0be}
body .story-outro .outro-arrow{margin-left:0;color:var(--lime)}
body .process-section{position:relative;isolation:isolate;overflow:hidden;background:var(--lime);color:var(--ink)}
body .process-section::after{content:"";position:absolute;right:-30px;top:20px;width:370px;height:370px;background:url('assets/halftone/orb_green.png') center/contain no-repeat;z-index:-1;opacity:.65;pointer-events:none}
body .process-section .muted,body .process-section .eyebrow,body .process-steps p,body .process-section .step-output{color:#426035}
body .process-intro{max-width:870px}
body .process-steps article{border-top-color:#77964f}
body .process-steps .step-number{color:#263624}
body .faq-list details{border-color:var(--line)}
body .faq-section{background-image:url('assets/halftone/orb_green.png');background-repeat:no-repeat;background-size:200px;background-position:left bottom}
/* 서브페이지의 정보 구조와 사진 크롭은 유지한다. */
body .ct-hero{background:#edf0e7}
body .ct-hero-head{background:url('assets/halftone/orb_green.png') no-repeat calc(100% + 80px) 30px/340px}
body .ct-hero-head h1,body .ct-hero-head .lead{position:relative}
body .ct-form2{border:1px solid var(--line)}
body .ct-dark{background:var(--v5-forest) url('assets/halftone/orb_lime.png') no-repeat calc(100% + 170px) calc(100% + 180px)/450px}
body .ct-dark h1{color:var(--lime)}
body .ct-dark .ct-form2{border:0}
body .contact-section{background:var(--v5-forest);color:#fbfbf8;position:relative;isolation:isolate;overflow:hidden}
body .contact-section::before{content:"";position:absolute;right:-95px;bottom:-190px;width:480px;height:480px;background:url('assets/halftone/orb_lime.png') center/contain no-repeat;opacity:.17;z-index:-1;pointer-events:none}
body .contact-section h2,body .contact-section .contact-email{color:var(--lime)}
body .contact-section .eyebrow,body .contact-section .form-note,body .contact-section .brief-label,body .contact-section .contact-copy>p,body .contact-section legend>span{color:#c5d0be}
body .contact-section .service-options span{color:#e0e8db;border-color:#75836d;background:transparent}
body .contact-section .service-options input:checked+span{color:var(--ink);background:var(--lime)}
body .contact-section textarea{background:#ffffff0a;color:#fbfbf8;border-color:#718068}
body .contact-section textarea::placeholder{color:#bcc8b5}
body .contact-section .button.dark{background:var(--lime);color:var(--ink)}
body .ag-stage{background:#eef1e8}
body .ag-stage::after{background:var(--v5-forest)}
body .ag-page .ag-copy h1 em{color:#259463}
/* 에디토리얼 에이전시: 기존 사진 이동·타임라인은 손대지 않는다. */
body:has(.casting-rail) .stage{background:#edf0e7}
body:has(.casting-rail) .stage::before{content:"";position:absolute;inset:0;background:url('assets/halftone/orb_green.png') no-repeat -180px calc(100% + 240px)/460px;opacity:.15;pointer-events:none;z-index:-1}
body:has(.casting-rail) .display-type{color:#42623c}
body:has(.casting-rail) .after-story{background:var(--paper)}
body:has(.casting-rail) .hero-tag{color:#52664b}
body:has(.casting-rail) .service-list article{border-color:var(--line)}
@media(max-width:740px){
 body .story-outro{padding:75px 24px}
 body .story-outro::after{width:350px;height:350px;right:-170px;top:80px;opacity:.22}
 body .process-section::after{width:220px;height:220px;right:-100px;opacity:.25}
 body .ct-hero-head{background-size:200px;background-position:calc(100% + 125px) 25px}
 body .faq-section{background-image:none}
 body .contact-section::before{opacity:.1}
 body .work-section{padding-top:65px}
}
/* ── 2026-09-14 홈 피드백 ── */
/* 마무리 헤드라인 첫 줄이 포레스트 배경에 묻히지 않게 */
body .story-outro h2{color:#fbfbf8}
/* GOOD QUESTIONS: 하단 여백을 주고 구체가 섹션 끝에 붙지 않게 */
body .faq-section{padding-block:140px 190px;min-height:72vh;background-size:210px;background-position:0 calc(100% - 36px)}
/* 모바일: 요소를 덜어 텍스트가 겹치거나 어색하게 끊기지 않게 */
@media(max-width:760px){
 body .story-topline>span:first-child{display:none}
 body .story-topline{justify-content:flex-end}
 body .chapter-nav button span{display:none}
 body .chapter-nav{gap:16px}
 body .story-copy h2{font-size:30px}
 body .story-tags{display:none}
 body .story-copy[data-copy=shorts]{width:86%}
 body .story-copy>.text-link{position:static;display:inline-flex;margin-top:14px} /* 우하단 절대배치가 본문 3행과 겹쳤다 */
 body .story-outro h2{font-size:30px;line-height:1.25}
 body .story-outro>p:not(.eyebrow){font-size:14px}
 body .work-heading h2,body .process-intro h2,body .faq-section h2,body .contact-section h2{font-size:30px;line-height:1.25}
 body .work-heading>p{font-size:14px}
 body .process-steps{grid-template-columns:1fr;gap:26px}
 body .process-steps .step-output{display:none}
 body .faq-section{padding-block:70px 90px;min-height:auto}
 body .contact-section .form-note{font-size:12px}
}
/* 1440 보다 넓은 화면: 장면 카피의 왼쪽 위치를 히어로 카피와 같은 6.2vw 로(기존은 1280px 박스 기준이라 넓을수록 안쪽으로 밀렸다) */
@media(min-width:1441px){body .story-copy{left:max(6.2vw,calc((100vw - 1680px)/2 + 104px))}} /* 1680 넘는 폭은 1680 박스를 가운데 둔다 */
/* ── 모바일 2차(2026-09-14): 홈 허브 노트 z, 에이전시 에디토리얼 가독성 ── */
@media(max-width:760px){
 /* 허브 노트 4장이 흰 카드 뒤에 숨지 않게 — 카드보다 위로. 선·궤도는 카드 위를 가로지르므로 숨긴다 */
 body .hub-network{z-index:9}
 body .hub-network svg,body .hub-network .hub-orbit{display:none}
}
@media(max-width:740px){
 /* 'A FACE. / A BRAND.' 가 폭 36vw 에 갇혀 단어별로 끊기던 것 */
 body:has(.casting-rail) .display-type{white-space:nowrap;width:auto}
 /* 얼굴 사진이 화면을 덮는 장면: 카피 뒤에 반투명 종이를 깔아 읽히게 */
 /* 흰 상자 대신 글자 뒤 종이색 글로우(여러 겹 text-shadow)로 사진 위에서 읽히게 */
 body:has(.casting-rail) .campaign-copy h2,body:has(.casting-rail) .spread-copy h2{color:#263624;text-shadow:0 0 12px #f3f5ef,0 0 24px #f3f5ef,0 0 44px rgba(243,245,239,.95),0 1px 2px rgba(243,245,239,.9)}
 body:has(.casting-rail) .campaign-copy .body-copy,body:has(.casting-rail) .spread-copy .muted,body:has(.casting-rail) .spread-copy .eyebrow{color:#33452f;text-shadow:0 0 3px #f3f5ef,0 0 6px #f3f5ef,0 0 10px #f3f5ef,0 0 18px #f3f5ef,0 0 30px rgba(243,245,239,.95),0 0 48px rgba(243,245,239,.9)}
 /* 캠페인 챕터(2): 가로형 캠페인 사진(1672×941)이 세로 화면 전체를 cover 로 채우면 얼굴만 남는다 → 사진 상자를 아래 절반으로 낮춰 확대를 줄이고, 위쪽 종이 공간에 카피를 둔다. 사진은 원본 그대로 */
 /* 채택(B 스트립): 카피는 위, 사진은 폭 100%·높이 34% 띠. 띠 사각형 자체는 agency.js frame() 의 mobile full 이 담당(보간이 그대로 이어져 끊김 없음) */
 body:has(.casting-rail) .moving-photo .campaign-image{object-position:50% 40%}
 body:has(.casting-rail) .campaign-copy{top:6%}
}
/* 캠페인 챕터 사진 3장 교차(agency-campaign-sequence.js): 얹는 사진도 원본과 같은 자리·크롭 */
body:has(.casting-rail) .moving-photo .campaign-seq{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;will-change:opacity}
@media(max-width:740px){body:has(.casting-rail) .moving-photo .campaign-seq{object-position:50% 40%}}
/* 캠페인 홀드: 사진이 여러 장 바뀌는 동안 스크롤을 붙잡는 길이(vh). agency.js holdProgress 가 읽고, story 높이도 그만큼 늘린다 */
html:root{--campaign-hold:220}
body:has(.casting-rail).enhanced .story{height:calc(520vh + var(--campaign-hold) * 1vh)}
@media(max-width:740px){html:root{--campaign-hold:180}body:has(.casting-rail).enhanced .story{height:calc(560vh + var(--campaign-hold) * 1vh)}}
/* 캠페인 시퀀스(가로 3:2 사진): 피사체가 오른쪽에 있으므로 PC 는 가운데 기준, 모바일 띠는 약간 오른쪽 */
body:has(.casting-rail) .moving-photo .campaign-image{object-position:50% 40%}
@media(max-width:740px){body:has(.casting-rail) .moving-photo .campaign-image,body:has(.casting-rail) .moving-photo .campaign-seq{object-position:60% 40%}}
/* 캠페인 시퀀스: 어두운 사진(data-campaign-tone=dark)일 때 PC 카피를 흰색으로, 왼쪽에 옅은 어두운 그라데이션 */
@media(min-width:741px){
 body:has(.casting-rail) .campaign-copy h2,body:has(.casting-rail) .campaign-copy .body-copy,body:has(.casting-rail) .campaign-tag,body:has(.casting-rail) .story-controls label,body:has(.casting-rail) .progress-count{transition:color .45s}
 body:has(.casting-rail) .stage[data-campaign-tone=dark] .campaign-copy h2{color:#fbfbf8}
 body:has(.casting-rail) .stage[data-campaign-tone=dark] .campaign-copy .body-copy{color:#e6ede1}
 body:has(.casting-rail) .stage[data-campaign-tone=dark] .campaign-tag,body:has(.casting-rail) .stage[data-campaign-tone=dark] .story-controls label,body:has(.casting-rail) .stage[data-campaign-tone=dark] .progress-count{color:#dfe8d9} /* 오른쪽 aside 는 밝은 벽 위라 잉크색 유지 */
 body:has(.casting-rail) .moving-photo::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;background:linear-gradient(90deg,rgba(10,14,11,.52) 0%,rgba(10,14,11,.3) 36%,rgba(10,14,11,0) 62%)}
 body:has(.casting-rail) .stage[data-campaign-tone=dark] .moving-photo::after{opacity:1}
}
/* 모델 상세(모바일): 2열 그리드에 모바일 규칙이 없어 갤러리가 458px 로 고정되어 가로 넘침(QA 2026-09-14) → 1열, 폭 100% */
@media(max-width:760px){
 body .mdd{grid-template-columns:1fr;gap:34px;padding:40px 0 20px}
 body .mdd-gallery,body .mdd-gallery img.main,body .mdd-info{width:100%;max-width:100%;min-width:0}
 body .mdd-gallery .thumbs{flex-wrap:wrap;max-width:100%}
 body .mdd-info{position:static}
}
/* 에이전시 '모델을 고른 다음은' 목록: 행 전체가 선택 가능한 영역임을 드러낸다 — 호버에 라임 배경, 번호·링크 강조, 행 클릭 시 해당 링크로 이동(agency-casting-pick.js) */
body:has(.casting-rail) .service-list article{position:relative;cursor:pointer;margin-inline:-20px;padding-inline:20px;border-radius:4px;transition:background-color .25s ease}
body:has(.casting-rail) .service-list article:hover,body:has(.casting-rail) .service-list article:focus-within{background-color:rgba(212,254,118,.38)}
body:has(.casting-rail) .service-list .service-index{transition:color .25s}
body:has(.casting-rail) .service-list article:hover .service-index{color:#23a24f;font-weight:600}
body:has(.casting-rail) .service-list a{transition:border-color .25s,color .25s}
body:has(.casting-rail) .service-list article:hover a{border-bottom-color:#263624;color:#263624}
body:has(.casting-rail) .service-list article:hover a::after{content:" ↗"}
@media(max-width:740px){body:has(.casting-rail) .service-list article{margin-inline:-12px;padding-inline:12px}}
/* 문의 화면(모바일): 폼 아래 안내문이 라임 망점 구체 위에 놓여 안 읽힘 → 채택안 B(2026-09-14): 섹션 아래쪽 구체를 포레스트로 서서히 덮고 안내문은 상자 없이 밝은 글자 */
@media(max-width:760px){
 body .ct-dark{position:relative}
 body .ct-dark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;background:linear-gradient(180deg,rgba(32,54,41,0) 0%,rgba(32,54,41,.72) 38%,rgba(32,54,41,.94) 100%)}
 body .ct-dark .ct-form2,body .ct-dark .form-note{position:relative;z-index:1}
 body .ct-dark .form-note{color:#dfe8d9;margin-top:16px;text-shadow:0 1px 8px rgba(32,54,41,.9)}
}
/* 작업 상세(모바일): 사이드 메타 칸의 sticky 가 1열에서도 남아 본문을 덮음(QA 2026-09-14) → 모바일은 일반 흐름 */
@media(max-width:760px){body .cs-side{position:static}}
/* 문의: 관심 프로젝트 카드(작업 상세에서 넘어온 경우, inquiry-context.js) */
body .ct-ref{margin:0 0 22px;padding:14px 16px;border:1px solid #718068;border-radius:4px;background:#ffffff0a}
body .ct-ref .eyebrow{color:#c5d0be;font-family:var(--v5-mono);font-weight:400;letter-spacing:.12em;font-size:10px;margin:0 0 10px}
body .ct-ref a{display:flex;align-items:center;gap:14px;color:#fbfbf8;text-decoration:none}
body .ct-ref-thumb{flex:0 0 72px;width:72px;height:48px;border-radius:3px;background:#2b3f31;overflow:hidden}
body .ct-ref-thumb img{width:100%;height:100%;object-fit:cover;display:block}
body .ct-ref-body b{display:block;font-size:15px;font-weight:600;line-height:1.35}
body .ct-ref-body small{display:block;font-size:12px;color:#c5d0be;margin-top:4px}
body .ct-ref a:hover .ct-ref-body small{color:var(--lime)}
body .ct-hero .ct-ref{border-color:var(--line);background:#fbfbf8}body .ct-hero .ct-ref a{color:var(--ink)}body .ct-hero .ct-ref .eyebrow,body .ct-hero .ct-ref-body small{color:#65735f}
/* 모바일 포트폴리오: 필터를 접어 두는 아코디언(mobile-ui.js). 데스크톱에서는 버튼을 숨기고 목록을 그대로 편다 */
.pf-filter-toggle{display:none}
@media(max-width:760px){
 body .pf-side .pf-filter-toggle{display:flex;align-items:center;gap:10px;width:100%;margin:18px 0 0;padding:14px 0;background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:Pretendard,sans-serif;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
 body .pf-side .pf-filter-label{font-family:var(--v5-mono);font-size:10px;letter-spacing:.12em;color:#65735f}
 body .pf-side .pf-filter-summary{flex:1;font-weight:600}
 body .pf-side .pf-filter-arrow{color:#65735f;transition:transform .25s}
 body .pf-side .pf-filter-toggle[aria-expanded=true] .pf-filter-arrow{transform:rotate(180deg)}
 body .pf-side.is-collapsed .side-list,body .pf-side.is-collapsed .side-sort{display:none}
 body .pf-side .side-list{margin-top:14px}
 /* 작업 상세 '이런 작업도 있어요': 모바일은 1열 */
 body .rec-grid.a,body .rec-grid.b,body .related-row{grid-template-columns:1fr}
}
/* KR / EN 전환(i18n.js) */
.site-header .lang-switch{display:inline-flex;align-items:center;gap:4px;font-family:var(--v5-mono);font-size:11px;letter-spacing:.08em;color:#8a9a8c;text-decoration:none;padding:0 6px;height:40px}
.site-header .lang-switch span{padding:2px 3px;border-radius:2px}
.site-header .lang-switch span.on{color:var(--ink);font-weight:600}
.site-header .lang-switch i{font-style:normal;color:#c1cbb8}
.site-header .lang-switch:hover span:not(.on){color:var(--ink)}
.hero-dark .site-header .lang-switch span.on{color:#fbfbf8}
.mobile-nav .lang-switch-m{font-family:var(--v5-mono);letter-spacing:.08em;font-size:12px}
@media(max-width:760px){.site-header .lang-switch{display:none}}

/* 영어판(html lang=en) 전용: 문장이 길어 한국어용 강제 줄바꿈(br)과 카드 폭이 어색한 곳만 보정. 한국어 화면에는 영향 없음 */
html[lang=en] .process-steps p br{display:none}
html[lang=en] .hub-note{max-width:236px}
html[lang=en] .hub-note strong{font-size:14px;line-height:1.35}
@media(max-width:760px){html[lang=en] .story-copy>p:not(.eyebrow) br,html[lang=en] .intro-copy>p:not(.eyebrow) br,html[lang=en] .story-outro>p:not(.eyebrow) br,html[lang=en] .process-intro>p:last-child br{display:none}}

/* 모바일: 홈 5번(숏폼) 장면의 "YOUR STORY, IN MOTION" 타임라인 박스는 화면이 좁아 정신사나워 숨긴다(2026-09-14 사용자 요청) */
@media(max-width:760px){body .timeline-panel{display:none}}

/* 모바일 인사이트 목록: 사진 옆 좁은 글 칸(116px)이 아니라 사진 아래에 제목·요약을 놓는다(2026-09-14 사용자 요청) */
@media(max-width:760px){body .in-list .in-card{grid-template-columns:1fr;gap:12px}body .in-list .in-card img{aspect-ratio:16/10}body .in-list .in-card strong{font-size:18px;margin:6px 0 4px}body .in-list .in-card p{-webkit-line-clamp:3}body .in-list{gap:34px}}